#spinnerContainer {
    position: absolute;
    left: 50%;
    top: 78%;
    width: 100%;
    max-width: 10%;
    height: 100%;
    max-height: 10%;
    background: rgba(0, 0, 0, 0);
    background-image: none;
}

.lds-ellipsis {
    display: block;
    position: absolute;
    z-index: 19;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 120px;
    height: 80px;
    background: rgba(0, 0, 0, 0);
}

#fantasma-preloader-container {
    background: radial-gradient(ellipse at top, rgb(13, 22, 65), #13151d),
    radial-gradient(ellipse at center, #0053c056, #1409b6a8);
    width: 100%;
    height: 100%;
    position: fixed;
}

#fade-in {
    -webkit-animation: fade-in 2s ease-out forwards;
    animation: fade-in 2s ease-out forwards;
}

#preloader-bg {
    width: 100%;
    height: 100%;
    top: -12px;
    position: absolute;
    z-index: 1;

    /*background-image: url("background.png");*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /*-webkit-animation: fade-in 2s ease-out forwards;*/
    /*animation: fade-in 2s ease-out forwards;*/
}
#preloader-backdrop {
    width: 100%;
    height: 100%;
    position: absolute;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    z-index: 0;
}
#preloader {
    width: 100%;
    height: 100%;
    position: absolute;
    /*background-image: url("background.png");*/
    /*background-repeat: no-repeat;*/
    /*background-position: center;*/
    /*background-size: contain;*/
    /*-webkit-animation: fade-in 2s ease-out forwards;*/
    /*animation: fade-in 2s ease-out forwards;*/
}

#loadingText {
    max-width: 50%;
}

#corpLogo {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: 2%;
    max-height: 20%;
    max-width: 30%;
}

#loadingText, #barBg, #progress {
    position: absolute;
    left: 50%;
    top: 65%;
    max-height: 8%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

#barBg, #progress {
    display: grid;
    -webkit-animation: fade-in 1s ease-out;
    animation: fade-in 1s ease-out;

}
#barBg {
    height: 2.5em;
    width: 79%;
    border-radius: 2.8em;

    border: 7px solid transparent;  /* ← stroke thickness */

    background:
        /* inner background */
        linear-gradient(to bottom,
            #2a027b 1%,
            #4500ad 20%,
            #4500ad 80%,
            #2a027b 100%
        ) padding-box,

        /* gradient stroke */
        linear-gradient(
            to top,
	    #b307fb 0%,
            #5f05d8 7%,
            #f42aff 94%,
	    #ff81dd 100%
        ) border-box;

    box-shadow: 0 0 18px #3a185e;
}

#progress {
    left: 10%; /* position: shifts the bar inward from the left edge of #barBg */
    border-radius: 2.7em; /* shape: rounds the corners into a pill */
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%); /* position: vertically re-centers the bar */
    height: 2.4em; /* size */
    width: 110%; /* size */
    border: 3px solid #a619ff; /* stroke: 0px wide, so this renders nothing (dead/unused) */
    -webkit-box-shadow: 0px 0px 0px rgb(251, 245, 92); /* outer glow (Safari/older Chrome): offset 0px right/down, 0px soft blur, warm yellow */
    box-shadow:
        0px 0px 0px #ae3521, /* outer glow (standard): currently 0 blur, so no visible outer glow */
        inset 0 2px 3px #d83901, /* inner glow, top edge: 2px blur, subtler — box-shadow can't do true gradients, so this is the "top color" half of the fake gradient */
        inset 0 -3px 4px #a80909; /* inner glow, bottom edge: bigger offset & blur so it reads stronger/heavier than the top, per request */
    background: linear-gradient(to top, rgb(193,81,40) 0%, rgb(255,152,64) 7%, rgb(255,115,53) 14%, rgb(221,75,12) 24%, rgb(229,88,27) 32%, rgb(242,116,19) 43%, rgb(255,144,11) 49%, rgb(255,200,11) 63%, rgb(255,243,43) 79%, rgb(255,200,11) 90%, rgb(255,133,3) 97%); /* fill: the progress bar's own gradient color */
}

.lds-ellipsis div {
    position: absolute;
    width: 88px;
    height: 50px;
    background-image: url("tick.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: -60px;
    -webkit-animation: lds-ellipsis1 0.6s infinite;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: -60px;
    -webkit-animation: lds-ellipsis2 0.6s infinite;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 10px;
    -webkit-animation: lds-ellipsis2 0.6s infinite;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 80px;
    -webkit-animation: lds-ellipsis3 0.6s infinite;
    animation: lds-ellipsis3 0.6s infinite;
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes enter-in-small {
    0% {
        -webkit-transform: translate(-50%, -20%);
        transform: translate(-50%, -20%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@keyframes enter-in-small {
    0% {
        -webkit-transform: translate(-50%, -20%);
        transform: translate(-50%, -20%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@-webkit-keyframes enter-in {
    0% {
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

@keyframes enter-in {
    0% {
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

@-webkit-keyframes lds-ellipsis1 {
    0% {
        /*transform: translate(-55px, 0);*/
        -webkit-transform: translate(-120px, 0);
        transform: translate(-120px, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes lds-ellipsis1 {
    0% {
        /*transform: translate(-55px, 0);*/
        -webkit-transform: translate(-120px, 0);
        transform: translate(-120px, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
}

@-webkit-keyframes lds-ellipsis2 {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    100% {
        -webkit-transform: translate(70px, 0);
        transform: translate(70px, 0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    100% {
        -webkit-transform: translate(70px, 0);
        transform: translate(70px, 0);
    }
}

@-webkit-keyframes lds-ellipsis3 {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(120px, 0);
        transform: translate(120px, 0);
        opacity: 0;
    }
}

@keyframes lds-ellipsis3 {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(120px, 0);
        transform: translate(120px, 0);
        opacity: 0;
    }
}