html, body, #app {
    height: 100%;
}


    body[data-mode='light'] {
        --fr-color-0: #ffffff;
        --fr-color-1: #EDF2F2;
        --fr-color-2: #EDF2F2;
        --fr-color-white: white;
        --fr-color-primary: #fbbd18;
        --fr-color-primary-dark: #dea717;
        --fr-color-text-primary: #444444;
        --fr-color-text: #505050;
        --fr-color-text-2: #444444;
        --fr-color-background: #f8f8f8;
        --fr-box-shadow: 0px 0px 2px 0px #aeaeae;
        --fr-box-shadow-primary: 0px 0px 2px 0px #12842d;
        --vs-dropdown-bg: #ffffff;
        --vs-dropdown-color: #ffffff;
        --vs-dropdown-option-color: #ffffff;
    }


    body[data-mode='dark'] {
        --fr-color-0: #272727;
        --fr-color-1: #272727;
        --fr-color-2: #272727;
        --fr-color-3: #272727;
        --fr-color-primary: #fbbd18;
        --fr-color-primary-dark: #dea717;
        --fr-color-text-primary: #ffffff;
        --fr-color-text: #dfdfdf;
        --fr-color-text-2: #989898;
        --fr-color-background: #1F1F1F;
        --fr-box-shadow: 0px 0px 2px 0px #272727;
        --fr-box-shadow-primary: 0px 0px 2px 0px #4c7957;
        --vs-dropdown-bg: #272727;
        --vs-dropdown-color: #dfdfdf;
        --vs-dropdown-option-color: #dfdfdf;
        --vs-selected-color: #dfdfdf;
    }


.fr-logo-loader {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--fr-color-1);
}

    .fr-logo-loader h1 {
        font-size: 25px;
        border: var(--fr-color-primary) solid 2px;
        border-top: unset;
        border-bottom: unset;
        color: var(--fr-color-text);
        padding: 20px;
        border-radius: 50px;
        margin-bottom: 60px;
        position: relative;
    }


.slide-fade-enter-active {
    transition: all .3s ease;
}

.slide-fade-leave-active {
    transition: all .3s ease-out;
}

.slide-fade-enter,
.slide-fade-leave-to {
    opacity: 0;
}