:root, [data-bs-theme=light] {
    --app-bg-color: #FED7E2;
    --app-header-height: 75px;
    --app-header--nav-link-color: white;
    --app-header-btn-color: var(--bs-white);
}


[data-bs-theme=dark] {
    --app-bg-color: #0D0D0D;
}

/* Globals */
::-webkit-scrollbar {
    box-shadow: unset;
    width: 0;
}

body {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background-color: var(--app-bg-color);
    background-size: cover;
    height: 100vh;
    color: var(--bs-color-body);
}

h1, h2 {
    font-size: 1.5rem;
    font-weight: 600;
}

hr {
    color: transparent;
    margin: .5rem;
}

.alert ul, ul.errorlist {
    list-style: none;
    padding: 0;
}

ul.errorlist {
    position: relative;
    padding: .5rem 1rem;
    margin-bottom: 1rem;
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
    border: var(--bs-border-width) solid var(--bs-danger-border-subtle);
    border-radius: var(--bs-border-radius);
}

/* App Header */
.app-sidebar .brand-wrapper, .app-header {
    min-height: var(--app-header-height);
    max-height: var(--app-header-height);
    display: flex;
    align-items: center;
}

.app-header .navbar {
    padding: unset;
}

.app-header .brand-wrapper .logo {
    height: 60px;
}

.app-header .navbar .nav-link {
    font-weight: 600;
}

.app-header .navbar-toggler {
    display: none;
}

.app-header .navbar-nav .btn {
    height: 45px;
    font-size: 1.2rem;
    cursor: pointer;
    padding: .25rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* App Main */
.app-main {
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    padding-bottom: 81px;
}

.app-main .main-wrapper {
    max-height: 100vh;
    margin: 0 auto;
    padding-top: 3rem;
}

.app-main .btn.logout-from-stage {
    background-color: var(--bs-secondary);
}

.app-main .alert ul {
    margin-bottom: 0;
}

.app-main .box-circle {
    width: 500px;
    height: 500px;
    border-radius: 50%;
}

.app-main .box-circle, .app-main .spin-circle {
    margin-top: -45px;
}

.app-main .box-circle .icon-bg {
    background-color: #f9fafb;
    padding: .25rem;
    border-radius: 50%;
}

@media (min-width: 768px) {
    body, .app-main {
        overflow: hidden;
    }
}

@media (max-width: 600px) {
    .app-footer {
        position: relative;
    }
    .app-footer .copyright-right {
        display: none;
    }
}

@media (min-width: 992px) {
    .app-main .form-wrapper {
        margin-left: 30px;
    }
    .app-main .right-wrapper {
        margin-right: 30px;
    }

    .app-main .box-circle, .app-main .spin-circle {
        margin-left: 90px;
    }

}

@media (min-width: 1200px) {
    .app-main .form-wrapper {
        margin-left: 45px;
    }
    .app-main .right-wrapper {
        margin-right: 120px;
    }

    .app-main .box-circle, .app-main .spin-circle {
        margin-left: 0;
    }
}

@media (min-width: 1400px) {
    .app-main .form-wrapper {
        margin-left: 120px;
    }
    .app-main .box-circle, .app-main .spin-circle {
        margin-left: -45px;
    }
}

/* App Footer */
.app-footer {
    color: var(--bs-body-color);
}

/* Form Wrapper CSS */
.form-wrapper {
    max-width: 600px;
    border-radius: .5rem;
}

.form-wrapper form {
    border-radius: .5rem;
    max-width: 500px;
}

.form-wrapper #logout-from-stage {
    display: none;
}

.form-wrapper .form-control {
    background: rgba(255, 255, 255, 0.15);
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.form-wrapper .form-control:focus {
    outline: 0;
}

.form-wrapper .form-control:hover,
.form-wrapper .form-control:focus {
    background: rgba(255, 255, 255, 0.09);
}

.form-wrapper p a {
    font-weight: 600;
    text-transform: capitalize;
}

.form-wrapper  .form-text {
    color: var(--bs-white);
}

.form-wrapper .text-highlight {
    color: var(--bs-white) !important;
    font-size: 1rem;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.21);
    padding: 1px 5px;
    border-radius: 4px;
}

.form-wrapper .btn-provider {
    color: white;
    font-weight: 600;
    font-size: 1rem;
    padding: .25rem .75rem;
    font-family: var(--bs-font-monospace);
    background-color: var(--bs-secondary);
    border: 1px solid var(--bs-border-color);
}

.form-wrapper #id_password_helptext,
.form-wrapper #id_password1_helptext {
    display: none;
}

/*----------------------------------------*/
/* Spin Animation CSS
/*----------------------------------------*/
.spin-animation {
    -webkit-animation: spin-animation 35s linear infinite;
    animation: spin-animation 35s linear infinite;
}

@-webkit-keyframes spin-animation {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin-animation {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/*----------------------------------------*/
/* Opacity Animation CSS
/*----------------------------------------*/
@-webkit-keyframes opacity-animation {

    0%,
    100% {
        opacity: 0
    }

    50% {
        opacity: 1
    }
}

@keyframes opacity-animation {

    0%,
    100% {
        opacity: 0
    }

    50% {
        opacity: 1
    }
}

.opacity-animation {
    -webkit-animation: opacity-animation 4s ease-in infinite;
    animation: opacity-animation 4s ease-in infinite;
}

.opacity-animation-0,
.opacity-animation-1,
.opacity-animation-2,
.opacity-animation-3,
.opacity-animation-4,
.opacity-animation-5 {
    opacity: 0;
}

.opacity-animation-0 {
    animation-delay: .5;
}

.opacity-animation-1 {
    animation-delay: 1s;
}

.opacity-animation-2 {
    animation-delay: 1.5s;
}

.opacity-animation-3 {
    animation-delay: 2s;
}

.opacity-animation-4 {
    animation-delay: 3.5s;
}

.opacity-animation-5 {
    animation-delay: 5s;
}

.opacity-animation-6 {
    animation-delay: 6.5s;
}


.opacity-animation-7 {
    animation-delay: 8.5s;
}


.opacity-animation-8 {
    animation-delay: 10.5s;
}


.opacity-animation-9 {
    animation-delay: 12s;
}


/* Animation Delay CSS */
.sleep-0 {
    animation-delay: 0.5 !important;
}

.sleep-1 {
    animation-delay: 1s !important;
}

.sleep-2 {
    animation-delay: 1.5s !important;
}

.sleep-3 {
    animation-delay: 2s !important;
}

.sleep-4 {
    animation-delay: 3.5s !important;
}

.sleep-5 {
    animation-delay: 5s !important;
}

.sleep-6 {
    animation-delay: 6.5s !important;
}

.sleep-7 {
    animation-delay: 8.5s !important;
}


.sleep-8 {
    animation-delay: 10.5s !important;
}


.sleep-9 {
    animation-delay: 12.5s !important;
}