/********** Colors **********/

:root {
    --color-red-orange-dd: #b83b03;
    --color-red-orange-d: #ed4c04;
    --color-red-orange:#FB6C2C;
    --color-red-orange-l:#fc9060;
    --color-red-orange-ll:#fdb595;

    --color-orange-1: #FFA521;
    --color-orange-2: #ffb243;
    --color-orange-3: #ffbd5d;

    --color-light-orange-1: #FFC99D;
    --color-light-orange-2: #ffd2ae;
    --color-light-orange-3: #ffe1c9;

    --color-blue-1: #70F4FF;
    --color-blue-2: #93f6ff;
    --color-blue-3: #aef8ff;

    --color-beige-1: #FFECC1;
    --color-beige-2: #fef6e4;
    --color-beige-3: #ffffff;




    --color-background:        #F4F3F2;

    --color-navbar-background: #F4F3F2;
    --color-navbar-text:       #050505;
    --color-navbar-text-hover: #FB6C2C;

    --color-text-main:         #050505;
    --color-text-alt:          #F4F3F2;
    --color-text-alt-2:        #FB6C2C;

    --color-footer-background: #7e7e7e;
    --color-footer-link:       #1f1e1f;
    --color-footer-link-hover: #3d3d3d;

    --color-section-main:        #FFECC1;
    --color-section-alt:         #000000; /* Sagara does not use. */
    --color-section-transparent: #6060606a;

    --color-button-main-background:          #FB6C2C;
    --color-button-main-text:                #F4F3F2;
    --color-button-main-shadow:              #FB6C2C;
    --color-button-main-hover-background:    #fc9060;
    --color-button-main-hover-text:          #F4F3F2;
    --color-button-main-active-background:   #b83b03;
    --color-button-main-active-text:         #F4F3F2;
    --color-button-main-disabled-background: #fdb595;
    --color-button-main-disabled-text:       #F4F3F2;

    --color-button-alt-background:  #ffbd5d;
    --color-button-alt-text:        #050505;
    --color-button-alt-shadow:      #ffbd5d;
    --color-button-alt-hover:       #FFA521;
    --color-button-alt-active:      #fc9060;
    --color-button-alt-disabled:    #5b4e50;

    --color-button-cancel-background: #F4F3F2;
    --color-button-cancel-text:       #FB6C2C;
    --color-button-cancel-shadow:     #FB6C2C;
    --color-button-cancel-hover:      #e9e8e7;
    --color-button-cancel-active:     #cececd;
    --color-button-cancel-disabled:   #F4F3F2;

    --color-button-class-background:      #ffbd5d;
    --color-button-class-text:            #050505;
    --color-button-class-shadow:          #050505;
    /* --color-button-class-hover:           #FFA521; */
    /* --color-button-class-active:          #fc9060; */
    --color-button-class-passed:          #dcdbdc;
    --color-button-class-cancelled:       #adaaab;
    --color-button-class-full:            #ab8f98;
    --color-button-class-disabled-text:   #5c5c5c;
    --color-button-class-disabled-shadow: #5c5c5c;

    --color-instructor-active:       #FFA521;
    --color-instructor-passed:       #bcb0b3;

    --color-a-main: #FB6C2C;
}



/********** Colors - Other **********/

.validation-message {
    color: #475b60;
    font-weight: bold;
}

.error {
    color: #475b60;
}

.shadow {
    box-shadow: 0 4px 10px rgb(0 0 0 / 0.3), 0 -4px 10px rgb(0 0 0 / 0.3);
}

.loader {
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    display: inline-block;
    border-top: 2px solid #FFF;
    border-right: 2px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
.loader::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    border-bottom: 2px solid #FF3D00;
    border-left: 2px solid transparent;
}
@keyframes rotation {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
}