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


body {
    --fr-color-0: #202020;
    --fr-color-1: #272727;
    --fr-color-2: #272727;
    --fr-color-3: #272727;
    --fr-base-color: #dea717;
    --fr-color-primary: #fbbd18;
    --fr-color-primary-dark: #dea717;
    --fr-color-primary-light: #fdd567;
    --fr-color-primary-rgb: 251, 189, 24;
    --fr-color-text-primary: #ffffff;
    --fr-color-text: #dfdfdf;
    --fr-color-text-2: #989898;
    --fr-color-text-3: #666666;
    --fr-color-background: #1F1F1F;
    --fr-color-card: #2d2d2d;
    --fr-color-input: #3a3a3a;
    --fr-color-input-focus: #404040;
    --fr-color-border: #404040;
    --fr-color-light: #3a3a3a;
    --fr-color-light-hover: #404040;
    --fr-color-google: #4285f4;
    --fr-color-google-hover: #3367d6;
    --fr-color-google-rgb: 66, 133, 244;
    --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;
}