#loader-outer-container {
    position: absolute;  
    height: max(100%, 500px);  
    width: 100vw;  
    overflow: hidden;
    z-index: 200;
}

.loader-board-half {
    width: 50%;
}

.loader-board-text {
    font-family: dfkai-sb;  
    font-size: 40px;
    cursor: default;
    color: #FFFFE0;
    /* -webkit-text-stroke: 1px #343A40; */
    text-shadow: #343A40 1px 0 2px;
    font-weight: bold;
}

.loader-board-text-lower {
    font-family: dfkai-sb;  
    font-size: 26px;
}

.loader-circle-holder-outer {
    width: 100px;  
    height: 200px;  
}

.loader-circle-holder-inner {
    width: 80px;  
    height: 160px;  
    background-color: rgb(32, 38, 44);
}

.loader-circle-outer-left {
    border-radius: 100px 0 0 100px;
    /* background-color: #57BC90; */
}

.loader-circle-outer-right {
    border-radius: 0 100px 100px 0;
}

.loader-circle-inner-left {
    border-radius: 80px 0 0 80px;
}

.loader-circle-inner-right {
    border-radius: 0 80px 80px 0;
}

@keyframes lower_board_container_bounce {
    0%   {  transform: translate(-50%, -50%) translateY(-20px);  }
    50%  {  transform: translate(-50%, -50%) translateY(0px);    }
    75%  {  transform: translate(-50%, -50%) translateY(-10px);  }
    88%  {  transform: translate(-50%, -50%) translateY(0px);    }
    94%  {  transform: translate(-50%, -50%) translateY(-5px);   }
    100% {  transform: translate(-50%, -50%) translateY(0px);    }
}

#loader-board-text-lower-container {
    position: absolute;  
    top: 80%;  
    left: 50vw;
    transform: translate(-50%, -50%);
    animation: lower_board_container_bounce 1s 1;
    background-color: rgba(52, 58, 64, 0.95);
    width: 360px;
    text-align: center;
}

.loader-circle-spinner-outer {
    position: absolute;  
    top: 50%;
    left: 50vw;
    z-index: 100;
}

@keyframes loader_rotate {
    0%   {  transform : scale(1)   rotate(0deg);    }
    70%  {  transform : scale(0.9) rotate(200deg);  }
    100% {  transform : scale(1)   rotate(360deg);  }
}

.loader-circle-spinner {
    border: 25px solid #FFFFE0;
    border-radius: 50%;  
    width: 200px;
    height: 200px;  
    margin-top: -50%;
    margin-left: -50%;
    border-top: 25px solid rgb(255, 195, 0);
    animation: loader_rotate 4s linear infinite; 
    box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.3);
}

@keyframes animate_lower_board_dots {
    0%   { content: attr(load-text) "\00a0\00a0\00a0"; }
    25%  { content: attr(load-text) ".\00a0\00a0";     }
    50%  { content: attr(load-text) "..\00a0";         }
    75%  { content: attr(load-text) "...";             }
    100% { content: attr(load-text) "\00a0\00a0\00a0"; }
}

#loader-board-text-lower-dots {
    color: #FFFFE0;
}

#loader-board-text-lower-dots::after {
    /* position: fixed; */
    animation: animate_lower_board_dots 2s infinite;
    content: attr(load-text) "\00a0\00a0\00a0";
}

.force-hide-element {
    display: none !important;
}

@keyframes animate_left_board_opening {
    0%   { transform: translateX(0vw);   }
    10%  { transform: translateX(-10vw); }
    100% { transform: translateX(-50vw); }
}

@keyframes animate_right_board_opening {
    0%   { transform: translateX(0vw);   }
    10%  { transform: translateX(10vw); }
    100% { transform: translateX(50vw); }
}

.open-left-board {
    animation: animate_left_board_opening 1s 1;
    transform: translateX(-50vw);
}

.open-right-board {
    animation: animate_right_board_opening 1s 1;
    transform: translateX(50vw);
}

#api-loader-board-left {
    background-color: #77C9D4;
}

#api-loader-board-right {
    background-color: #57BC90;
}

.default-background-color {
    background-color: #343A40;
}

@media (max-width: 576px) {
    .loader-board-text-lower {
        font-size: 20px;
    }
    .loader-board-text {
        font-size: 26px;
    }
}