body {
    background-color: #e9ecef;
}

.dark-mode .overlay {
    background-color: #454d55 !important;
    opacity: 0.75;
}

.dark-mode .login-page {
    background-color: #454d55;
    border-color: #4b545c;
}

.login-page {
    padding-top: 10rem;
}

.login-box,
.register-box {
    margin-top: 10rem;
    scroll-margin: 100px;
    width: 400px;
    z-index: 2;
    animation: fadeIn 1.2s ease-in-out;
}

.dark-mode input:-webkit-autofill,
.dark-mode input:-webkit-autofill:focus,
.dark-mode input:-webkit-autofill:hover,
.dark-mode select:-webkit-autofill,
.dark-mode select:-webkit-autofill:focus,
.dark-mode select:-webkit-autofill:hover,
.dark-mode textarea:-webkit-autofill,
.dark-mode textarea:-webkit-autofill:focus,
.dark-mode textarea:-webkit-autofill:hover {
    color-scheme: dark;
}

@media (max-width: 576px) {
    .login-box,
    .register-box {
        width: 90%;
    }
}

.auth-one-bg-position {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 70%;
}

.auth-one-bg {
    background-image: url('/assets/img/aerofood-acs.jpg');
    background-position: center;
    background-size: cover;
}

.shape {
    margin-bottom: -1px;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
}

.shape > svg {
    width: 100%;
    height: auto;
    fill: #e9ecef;
}

.dark-mode .shape > svg {
    fill: #454d55;
}

img,
svg {
    vertical-align: middle;
}

.auth-one-bg .bg-overlay {
    background: linear-gradient(to right, #696b6b, #6b7374);
    opacity: 0.5;
}

.bg-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
}

.footer {
    background-color: transparent;
    padding: 10px calc(1.5rem * 0.5) 50px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}