:root {
    --sr-primary-color: #006837;
    --sr-secondary-color: #84C53C;
    --sr-tertiary-color: #E6D14A;
    --ar-primary-color: #00293F;
    --ar-secondary-color: #84C53C;
    --ar-tertiary-color: #E6D14A;
    --qr-primary-color: #366780;
    --qr-secondary-color: #84C53C;
    --qr-tertiary-color: #E6D14A;
    --main-primary-color: black;

    --sr-primary-color-darken: #004e29;
    --sr-secondary-color-darken: #42631d;
    --sr-tertiary-color-darken: #857612;
    --ar-primary-color-darken: #00141f;
    --ar-secondary-color-darken: #42631d;
    --ar-tertiary-color-darken: #857612;
    --qr-primary-color-darken: #001e2f;
    --qr-secondary-color-darken: #42631d;
    --qr-tertiary-color-darken: #857612;
    --main-primary-color-darken: #191919;
}

.color-1 {
    color: #192A67;
}

.color-2 {
    color: var(--sr-primary-color) !important;
}

.color-3 {
    color: #A6CAD2;
}

.color-4 {
    color: #E97820;
}

.color-5 {
    color: #FFFFFF;
}

.color-6 {
    color: #003B1C;
}

.color-ar {
    color: var(--ar-primary-color);
}

.color-magic {
    background: -webkit-linear-gradient(0deg, #00D059, #006837 40%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ar-color-magic {
    background: -webkit-linear-gradient(0deg, #94CCD4, #366780 10%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.color-red {
    color: #FF0000;
}

.bg-color-1 {
    background-color: #192A67
}

.bg-color-2 {
    background-color: #006837
}

.bg-color-3 {
    background-color: #A6CAD2
}

.bg-color-4 {
    background-color: #E97820
}

.bg-color-5 {
    background-color: #FFFFFF
}

.bg-color-6 {
    background-color: #003B1C;
}

.bg-color-magic {
    background: linear-gradient(90deg, #00D059 0%, #006837);
}

.bg-color-red {
    background-color: #FF0000 !important;
}

.bg-color-orange {
    background-color: #E97820 !important;
}

.bg-color-gradient {
    background: linear-gradient(90deg, #00D059 0%, #006837 70%);
}

.ar-bg-color {
    background-color: var(--ar-primary-color);
}

.sr-bg-color {
    background-color: var(--sr-primary-color);
}


.qr-bg-color {
    background-color: var(--qr-primary-color);
}


.sr-btn-primary {
    background-color: var(--sr-primary-color);
    color: #FFFFFF;
}

.sr-btn-primary:disabled {
    color: #808080 !important;
    background-color: #D0D0D0 !important;
    cursor: not-allowed !important;
}

.sr-btn-primary:hover {
    color: #FFFFFF;
    background-color: var(--sr-primary-color-darken);
}

.sr-btn-secondary {
    background-color: #b01f1f;
    color: #FFFFFF;
}

.sr-btn-secondary:hover {
    color: #FFFFFF;
    background-color: #621010;
}

/* .sr-btn-secondary:disabled {
    color: #808080;
    background-color: #D0D0D0;
} */

.sr-btn-outline-primary {
    background-color: transparent;
    color: var(--sr-primary-color);
    border-color: var(--sr-primary-color);
}

.sr-btn-outline-primary:hover {
    color: #FFFFFF;
    background-color: var(--sr-primary-color);
    border-radius: 4px;
}

.sr-btn-outline-primary:disabled {
    color: #808080;
    background-color: #D0D0D0;
    border-radius: 4px;
}

.ar-btn-outline-primary {
    background-color: transparent;
    color: var(--ar-primary-color);
    border-color: var(--ar-primary-color);
}

.ar-btn-outline-primary:hover {
    color: #FFFFFF;
    background-color: var(--ar-primary-color);
    border-radius: 4px;
}

.ar-btn-outline-primary:disabled {
    color: #808080;
    background-color: #D0D0D0;
    border-radius: 4px;
}

.ar-btn-primary {
    background-color: var(--ar-primary-color);
    color: #FFFFFF;
}

.ar-btn-primary:hover {
    color: #FFFFFF;
    background-color: var(--ar-primary-color-darken);
}

.ar-btn-primary:disabled {
    color: #808080;
    background-color: #D0D0D0;
    /* border-radius: 4px; */
}

.qr-btn-primary {
    background-color: var(--qr-primary-color);
    color: #FFFFFF;
}

.qr-btn-primary:hover {
    color: #FFFFFF;
    background-color: var(--qr-primary-color-darken);
}

.qr-btn-primary:disabled {
    color: #808080;
    background-color: #D0D0D0;
    /* border-radius: 4px; */
}

.main-btn-outline-primary {
    background-color: transparent;
    color: var(--main-primary-color);
    border-color: var(--main-primary-color);
}

.main-btn-outline-primary:hover {
    color: #FFFFFF;
    background-color: var(--main-primary-color);
    border-radius: 4px;
}

.main-btn-outline-primary:disabled {
    color: #808080;
    background-color: #D0D0D0;
    border-radius: 4px;
}

.main-btn-primary {
    background-color: var(--main-primary-color);
    color: #FFFFFF;
}

.main-btn-primary:hover {
    color: #FFFFFF;
    background-color: var(--main-primary-color-darken);
}

.main-btn-primary:disabled {
    color: #808080;
    background-color: #D0D0D0;
    /* border-radius: 4px; */
}

.border-color-2 {
    border: 1px solid #006837;
    border-radius: 4px;
}

.border-color-7 {
    border: 1px solid #D0D0D0;
}

.border-color-8 {
    border: 1px solid #297C3B;
}


.border-color-white {
    border: 1px solid white;
}

.btn-cek {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.btn-cek:not(:checked)+.badge-green,
.btn-cek:not(:checked)+.badge-orange,
.btn-cek:not(:checked)+.badge-red {
    opacity: 30%;
}

.badge-green {
    color: #006837;
    border-color: #006837;
    font-size: 1.3 rem;
}

.badge-orange {
    color: #E97820;
    border-color: #E97820;
    font-size: 1.3 rem;
}

.badge-red {
    color: #FF0000;
    border-color: #FF0000;
    font-size: 1.3 rem;
}

#toast-container>.toast {
    border-radius: 0.8125rem !important;
    width: fit-content !important;
    max-width: 80%;
    min-width: 0 !important;
    padding-right: 24px !important;
    padding-top: 16px;
    padding-bottom: 16px;
    white-space: nowrap;
    opacity: 1;
}

.toast-message {
    padding-right: 45px !important;
    font-size: 1rem;
}

#toast-container>.toast .toast-close-button {
    position: relative;
    padding-left: 20px;
    margin-left: 16px;
    margin-top: auto;
    margin-bottom: auto;
    top: 40%;
}

#toast-container>.toast .toast-close-button::before {
    content: "";
    position: absolute;
    left: 0;
    top: -50%;
    height: 200%;
    width: 1px;
    background-color: white;
    margin-top: auto;
    margin-bottom: auto;
}

.rt-btn-orange {
    background-color: #E97820;
    color: #FFFFFF;
}

.rt-btn-orange:hover {
    color: #FFFFFF;
    background-color: #bd6019;
}

.rt-btn-orange:disabled {
    color: #808080;
    background-color: #D0D0D0;
    /* border-radius: 4px; */
}