/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialiconsround/v108/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmPq_HTTw.woff2) format('woff2');
}

:root {
    --background-color-main: #FFFFFF;
    --background-color: #F3F5FC;
    --foreground-color: #000012;
    --border-color-light: #E5E5E5FF;
    --foreground-color-light: #4e4e4e;
    --primary-color: #436af4;
    --primary-color-background: #436af444;
    --primary-color-light: #6785ed;
    --text-color-dark: #060607;
    --text-color-light: #4e4e4e;
    --text-color-mid: #616368;
    --text-color-lighter: #E5E5E5FF;
    --danger-color-light: #fef2f2;
    --danger-color: #f87171;
    --danger-color-background: #f8717144;
    --warning-color: #faad14;
    --warning-color-background: #faad1444;
    --success-color: #52c41a;
    --success-color-background: #52c41a44;
}

.loading-page {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s;
}

.loading-page-hidden {
    opacity: 0;
    filter: blur(10px);
}

.loading-page .loading-page-content {
    display: flex;
    height: 50px;
    overflow: hidden;
    padding: 0 20px;
    mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
}

.loading-page .loading-page-content .logo-letter {
    display: flex;
    flex-direction: column;

}

.loading-page .loading-page-content .logo-letter img {
    margin-top: 10px;
    height: 30px;
}

.loading-page .loading-page-content .logo-letter-m {
    margin-right: 6px;
    animation: scroll-up 3s infinite ease-in-out;
    animation-delay: 2s;
}

.loading-page .loading-page-content .logo-letter-a {
    margin-right: 1px;
    animation: scroll-up 3s infinite ease-in-out;
    animation-delay: 2.2s;
}

.loading-page .loading-page-content .logo-letter-t {
    margin-right: 4px;
    animation: scroll-up 3s infinite ease-in-out;
    animation-delay: 2.4s;
}

.loading-page .loading-page-content .logo-letter-c {
    margin-right: 6px;
    animation: scroll-up 3s infinite ease-in-out;
    animation-delay: 2.6s;
}

.loading-page .loading-page-content .logo-letter-h {
    margin-right: 16px;
    animation: scroll-up 3s infinite ease-in-out;
    animation-delay: 2.8s;
}

.loading-page .loading-page-content .logo-letter-ovo {
    animation: eye-open 3s infinite;
    animation-delay: 3s;
}

@keyframes scroll-up {
    0% {
        transform: translateY(0);
        filter: blur(0);
    }

    30% {
        transform: translateY(-500%);
        filter: blur(8px);
    }

    60% {
        transform: translateY(0);
        filter: blur(0px);
    }
}

@keyframes scroll-down {
    0% {
        transform: translateY(-500%);
        filter: blur(0);
    }

    30% {
        transform: translateY(0%);
        filter: blur(8px);
    }

    60% {
        transform: translateY(-500%);
        filter: blur(0px);
    }
}

@keyframes eye-open {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(1);
    }
    60% {
        transform: scaleY(1.2);
    }
    68% {
        transform: scaleY(0.8);
    }
    70% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(1);
    }
}
/* ----------------------------------------------
 * Generated by Animista on 2024-12-6 15:49:9
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation blur-out-expand
 * ----------------------------------------
 */
@-webkit-keyframes blur-out-expand {
    0% {
        -webkit-filter: blur(0.01);
        filter: blur(0.01);
        transform: scale(1);
    }
    100% {
        /*letter-spacing: 1em;*/
        transform: scale(2);
        -webkit-filter: blur(12px) opacity(0%);
        filter: blur(12px) opacity(0%);
    }
}
@keyframes blur-out-expand {
    0% {
        -webkit-filter: blur(0.01);
        filter: blur(0.01);
        transform: scale(1);
    }
    100% {
        /*letter-spacing: 1em;*/
        transform: scale(2);
        -webkit-filter: blur(12px) opacity(0%);
        filter: blur(12px) opacity(0%);
    }
}

.blur-in {
    -webkit-animation: blur-out-expand 1s cubic-bezier(0.550, 0.055, 0.675, 0.190) reverse both;
    animation: blur-out-expand 1s cubic-bezier(0.550, 0.055, 0.675, 0.190) reverse both;
}