:root {
    --dovr-primary-color: #F67952;
    --dovr-primary-color-opacity: #F679521A;
    --dovr-background-color: #fbfbfd;
    --dovr-secondary-color: rgb(113, 90, 255);
}

input:focus, select:focus, button:focus {
    border-color: #FF5733 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 87, 51, 0.25) !important;
}

body
{
    background-color: #9b999d;
    padding-bottom: 55px;   /* accommodate the footer */
}

#email, #password {
    max-width: 420px;
}

.col-4,
.col-sm-6,
.col-md-8,
.col-lg-10,
.col-xl-12 {
    width: 100%;
    max-width: 100%;
    flex-basis: 100%;
}

.partial-enqueued { font-style: italic; color: grey; }

#menu-sidebar .row {
    margin-bottom: 6px;
    text-align: left;
}

.dovr-btn {
    background-color: #F67952;
    border: 1px solid #F67952;
    color: #fff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dovr-btn:hover {
    background-color: #FFF;
    color: #F67952;
}

.dovr-btn-outline {
    border: 1px solid #F67952;
    color: #F67952;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dovr-btn-outline:hover {
    background-color: #F67952;
    color: #fff;
}

.dovr-secondary-btn {
    background-color: var(--dovr-secondary-color);
    border: 1px solid var(--dovr-secondary-color);
    color: #fff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dovr-secondary-btn:hover {
    background-color: #FFFFFF;
    color: var(--dovr-secondary-color);
}

.dovr-text-link {
    text-decoration: none !important;
    color: var(--dovr-primary-color) !important;
}

.dovr-logo {
    max-width: 158px;
}

/* Default (Desktop) styles */
.login-container {
    position: relative;
}

.login-form-container {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 1;
    width: 420px;
    padding: 15px;
}

.login-image-container img {
    width: 100%;
    height: calc(100vh - 56px - 55px); /* 56px for navbar, 55px for footer */
    object-fit: cover;
    object-position: top;
}

/* Mobile styles */
@media (max-width: 991px) {
    .login-container {
        position: static; /* Reset position for mobile */
        display: flex;
        flex-direction: column;
        align-items: center; /* Center the form */
    }

    .login-form-container {
        position: static; /* Reset position for mobile */
        order: 1;
    }

    .login-image-container {
        order: 2;
    }

    .login-image-container img {
        height: auto; /* Reset height for mobile */
    }

    #email, #password {
        max-width: 335px;
    }
}