html.loading {
    background: #4351E8;
    display: table;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

body.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
}

.text {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loading-img {
    width: 98px;
}

.loading-lottie {
    width: 250px;
    height: 141px;
}

@property --fill {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
  }
  
@property --left-color {
    syntax: '<color>';
    initial-value: #ffcc00;
    inherits: false;
}

@property --right-color {
    syntax: '<color>';
    initial-value: #ffffff;
    inherits: false;
}

.loading-text {
    font-size: 15px;
    font-weight: 600;
    margin-top: -30px;
    background: linear-gradient(
        90deg,
        var(--left-color) 0%,
        var(--left-color) var(--fill),
        var(--right-color) var(--fill),
        var(--right-color) 100%
    );
    background-size: 100% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: loading-text-fill 3s ease-in-out infinite;
}

@keyframes loading-text-fill {
    0% {
        --left-color: #ffcc00;
        --right-color: #ffffff;
        --fill: 0%;
    }
    50% {
        --left-color: #ffcc00;
        --right-color: #ffffff;
        --fill: 100%;
    }
    50.01% {
        --left-color: #ffffff;
        --right-color: #ffcc00;
        --fill: 0%;
    }
    100% {
        --left-color: #ffffff;
        --right-color: #ffcc00;
        --fill: 100%;
    }
}

/* Safari iOS orientation fix */
html, body {
    -webkit-text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Fix for Safari white screen on orientation change */
@supports (-webkit-appearance: none) {
    html {
        height: -webkit-fill-available;
    }
    body {
        min-height: -webkit-fill-available;
    }
}

/* Force repaint on orientation change */
.x-viewport {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}