.logo-anim {
            width: 50px;
            height: 50px;
        }

        /* =========================
   HIJAU – ROTASI
   ========================= */
        #green {
            transform-origin: 50% 50%;
            animation: spin 4s linear infinite;
        }

        /* =========================
   WARNA
   ========================= */
        #yellow-base {
            fill: #1ABB9C;
        }

        #yellow-dark {
            fill: #083b31;
        }

        #red-base {
            fill: #E74C3C;
        }

        #red-dark {
            fill: #3d140f;
        }

        /* =========================
   MASK ANIMATION
   ========================= */
        #yellowMaskRect {
            animation: yellowProgress 6s infinite;
        }

        #redMaskRect {
            animation: redProgress 6s infinite;
        }

        /* =========================
   KEYFRAMES
   ========================= */

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* KUNING DULU */
        @keyframes yellowProgress {
            0% {
                width: 0%;
            }

            10% {
                width: 0%;
            }

            50% {
                width: 100%;
            }

            60% {
                width: 100%;
            }

            100% {
                width: 100%;
            }
        }

        /* MERAH SETELAHNYA */
        @keyframes redProgress {

            0%,
            50% {
                width: 0%;
            }

            60% {
                width: 0%;
            }

            95% {
                width: 100%;
            }

            100% {
                width: 100%;
            }
        }

.align-items-center {
  align-items: center !important;
}
.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -.75rem;
  margin-left: -.75rem;
}
.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid #e3e6f0;border-radius:.35rem}
.card>hr{margin-right:0;margin-left:0}
		.card>.list-group{border-top:inherit;border-bottom:inherit}
		.card>.list-group:first-child{border-top-width:0;border-top-left-radius:calc(.35rem - 1px);border-top-right-radius:calc(.35rem - 1px)}
		.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:calc(.35rem - 1px);border-bottom-left-radius:calc(.35rem - 1px)}
		.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}
		.card-body{flex:1 1 auto;min-height:1px;padding:1.25rem}
		.card-title{margin-bottom:.75rem}
		.card-subtitle{margin-top:-.375rem;margin-bottom:0}
		.card-text:last-child{margin-bottom:0}
		.card-link:hover{text-decoration:none}
		.card-link+.card-link{margin-left:1.25rem}
		.card-header{padding:.75rem 1.25rem;margin-bottom:0;background-color:#f8f9fc;border-bottom:1px solid #e3e6f0}
		.card-header:first-child{border-radius:calc(.35rem - 1px) calc(.35rem - 1px) 0 0}
		.card-footer{padding:.75rem 1.25rem;background-color:#f8f9fc;border-top:1px solid #e3e6f0}
		.card-footer:last-child{border-radius:0 0 calc(.35rem - 1px) calc(.35rem - 1px)}
		.card-header-tabs{margin-right:-.625rem;margin-bottom:-.75rem;margin-left:-.625rem;border-bottom:0}
		.card-header-pills{margin-right:-.625rem;margin-left:-.625rem}
		.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem;border-radius:calc(.35rem - 1px)}
		.card-img,.card-img-bottom,.card-img-top{flex-shrink:0;width:100%}
		.card-img,.card-img-top{border-top-left-radius:calc(.35rem - 1px);border-top-right-radius:calc(.35rem - 1px)}
		.card-img,.card-img-bottom{border-bottom-right-radius:calc(.35rem - 1px);border-bottom-left-radius:calc(.35rem - 1px)}
		.card-deck .card{margin-bottom:.75rem}
		@media (min-width:576px){.card-deck{display:flex;flex-flow:row wrap;margin-right:-.75rem;margin-left:-.75rem}
		.card-deck .card{flex:1 0 0%;margin-right:.75rem;margin-bottom:0;margin-left:.75rem}
		}
		.card-group>.card{margin-bottom:.75rem}
		@media (min-width:576px){.card-group{display:flex;flex-flow:row wrap}
		.card-group>.card{flex:1 0 0%;margin-bottom:0}
		.card-group>.card+.card{margin-left:0;border-left:0}
		.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}
		.card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{border-top-right-radius:0}
		.card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}
		.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}
		.card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{border-top-left-radius:0}
		.card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}
		}
		.card-columns .card{margin-bottom:.75rem}
		@media (min-width:576px){.card-columns{-moz-column-count:3;column-count:3;-moz-column-gap:1.25rem;column-gap:1.25rem;orphans:1;widows:1}
		.card-columns .card{display:inline-block;width:100%}
		}

.border-left-primary {
  border-left: .25rem solid #4e73df !important;
}
.border-left-success {
  border-left: .25rem solid #1cc88a !important;
}
.border-left-info {
  border-left: .25rem solid #36b9cc !important;
}
.border-left-warning {
  border-left: .25rem solid #f6c23e !important;
}
.py-2 {
  padding-bottom: .5rem !important;
}

.h-100 {
  height: 100% !important;
}

.shadow {
  box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15) !important;
}

.text-success {
  color: #1cc88a !important;
}

.mb-4, .my-4 {
  margin-bottom: 1.5rem !important;
}
*, ::after, ::before {
  box-sizing: border-box;
}

.h-100 {
  height: 100% !important;
}

@media (min-width: 1200px) {
  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

.mr-2, .mx-2 {
  margin-right: .5rem !important;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  margin-right: 10px;
}

.card-row{
  display: flex;
  flex-wrap: wrap;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.text-gray-800 {
  color: #5a5c69 !important;
}

.card-progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #4e73df;
  transition: width .6s ease;
}

.card-progress-sm {
  height: .5rem;
}

.card-progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  line-height: 0;
  font-size: .75rem;
  background-color: #eaecf4;
  border-radius: .35rem;
}

.card-col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.card-bg-info {
  background-color: #36b9cc !important;
}

.bg-danger {
  background-color: #e74a3b !important;
}

.bg-warning {
  background-color: #f6c23e !important;
}

.bg-info {
  background-color: #36b9cc !important;
}

.bg-success {
  background-color: #1cc88a !important;
}

.bg-secondary {
  background-color: #858796 !important;
}

.bg-light {
  background-color: #f8f9fc !important;
}

.bg-dark {
  background-color: #5a5c69 !important;
}

.text-white {
  color: rgba(255, 255, 255, 0.842) !important;
}