/* LOGIN FORM */

#content-main {
    float: unset;
    margin: auto;
}

input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=tel], textarea, select, .vTextField {
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 5px 6px;
    margin-top: 0;
    color: #000;
    background-color: #fff;
}


body  {
    background: #f8f8f8;
}

.login {
    height: auto;
}

.login #header {
    height: auto;
    padding: 15px 16px;
    justify-content: left;
    border-bottom: 1px solid #b1b1b1;
}

.login #header h1 {
    font-size: 1.125rem;
    margin: 0;
}

.login #header h1 a {
    color: var(--header-link-color);
}

.login #content {
    padding: 20px 20px 0;
}

.login #container {
    border: 1px solid var(--hairline-color);
    border-radius: 4px;
    overflow: hidden;
    width: 60em;
    min-width: 300px;
    margin: 100px auto;
    height: auto;
}

.login #container-top {
    border: 1px solid var(--hairline-color);
    border-radius: 4px;
    overflow: hidden;
    width: 60em;
    min-width: 300px;
    margin: 0px auto;
    height: auto;
}

.content-wrapper {
    height: 84vh; /* Adjust the height as per your needs */
    overflow-y: auto; /* Enable vertical scroll when content exceeds container */
    padding-bottom: 60px;
}

.login form{
    background: #ffffff;
    padding: 15px;
    padding: 1px 50px;
}

ul > li {
    font-size: 0.7rem;
    list-style-type: unset;
    padding: 1px 3px;
}

.login .form-row {
    padding: 4px 0;
}

.login .form-row label {
    display: block;
    line-height: 2em;
}

.login .form-row #id_email {
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}

.login .form-row #id_username, .login .form-row #id_password {
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}

.login .submit-row {
    padding: 1em 0 0 0;
    margin: 0;
    text-align: center;
}

.login .password-reset-link {
    text-align: center;
}

.login .helptext ul{
    color: #666;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* remove blue autofill shadow */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}


/* Mobile Styles */
@media (max-width: 768px) {
    body {
        background: #e0e0e0; /* Example: Change background for mobile */
    }

    .login #container {
        width: 90%; /* Adjust the container width */
        margin: 50px auto; /* Adjust margin for mobile */
    }

    .login form {
        padding: 10px; /* Reduce padding */
    }

    .login #header h1 {
        font-size: 1rem; /* Adjust font size for mobile */
    }

    .login .form-row label {
        font-size: 0.9rem; /* Adjust label font size */
    }

    .content-wrapper {
        height: auto; /* Adjust height */
        padding-bottom: 30px; /* Adjust padding */
    }

    ul > li {
        font-size: 0.6rem; /* Adjust font size for lists */
        padding: 2px 5px;
    }

    .login .submit-row {
        padding: 1em 0;
    }
}