/*//////////////////////////////////////////////////////*/
/*//====================----------====================//*/
/*//                 BASE VARIABLES                   //*/
/*//====================----------====================//*/
/*//////////////////////////////////////////////////////*/
:root {
    --bodyBgColor: black;
    --textColorLight: #F0F0F0;
    --loaderIconColor: #F0F0F0;
    --loaderTextColor: #F0F0F0;
    --loaderBackgroundColor: rgba(0,0,0,.5);
    --fontSizeBase: 16px;
}

/*//////////////////////////////////////////////////////*/
/*//====================----------====================//*/
/*//                       BASE                       //*/
/*//====================----------====================//*/
/*//////////////////////////////////////////////////////*/

html,
body {
    background-color: var(--bodyBgColor);
    color: var(--textColorLight);
}

/*-- Loading Icon --*/

.spinner-container {
    position: fixed !important;
    top: 0;
    z-index: 8000;
    margin-left: auto;
    width: 100%;
    font-size: larger;
    text-align: center;
    vertical-align: middle;
    background: var(--loaderBackgroundColor);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    height: 100vh;
}

.spinnerContent {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    z-index: 8100;
    width: 100%;
}

.spinnerContent__text {
    display: block;
    color: var(--loaderTextColor);
    font-size: var(--fontSizeBase);
    width: 90%;
    margin: 1em auto;
}

.sk-circle {
    margin: 0 auto !important;
}

    .sk-circle .sk-child:before {
        background-color: var(--loaderIconColor) !important;
    }