/** @format */

.MainLoader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    background: white;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.LoadingScreen {
    text-align: center;
    font-weight: bold;
    font-size: var(--rpp-font-loading);
}

.LoadingText {
    background-color: white;
    color: transparent;
    background-image: linear-gradient(
        90deg,
        hsl(210, 19%, 28%),
        hsl(210, 19%, 48%),
        hsl(210, 19%, 68%),
        #fff,
        hsl(210, 19%, 68%),
        hsl(210, 19%, 48%),
        hsl(210, 19%, 28%)
    );
    background-clip: text;
    -webkit-background-clip: text;
    animation: LoadingIt 2s linear infinite;
    background-size: 400%;
    -webkit-background-size: 400%;
}

@keyframes LoadingIt {
    0% {
        background-position: 0% 100%;
    }
    50% {
        background-position: 100% 0%;
    }
    100% {
        background-position: 0% 100%;
    }
}

.ErrorIcon {
    font-size: var(--rpp-font-error-icon);
    margin-bottom: var(--rpp-spacing-md);
}

.ErrorText {
    font-size: var(--rpp-font-error-text);
    color: #5a0000;
    max-width: var(--rpp-error-max-width);
    text-align: center;
    line-height: var(--rpp-line-height-body);
    padding: 0 var(--rpp-spacing-md);
}