.form-body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: var(--toolbar-height);
    background: var(--background-dark);
    max-height: 100%;
    overflow-y: auto;
}

.form-container {
    width: var(--form-width);
    display: flex;
    align-items: center;
    flex-direction: column;
}    

.form-image {
    width: 85%;
    height: auto;
}

.form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    padding: 20px;
    border-radius: 8px;
    min-width: 400px;
}
  
input {
    width: 100%;
    padding: 15px 10px;
    margin: 10px 0;
    border: none;
    border-radius: 7px;
    font-size: 1rem;
    font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
    box-sizing: border-box;
    outline: none;
    background-color: var(--accounts-input);
    border: 1px solid var(--border);
    color: white;
}

/* Autofill reset */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px var(--accounts-input) inset !important;
    box-shadow: 0 0 0 1000px var(--accounts-input) inset !important;
    -webkit-text-fill-color: white !important;
    font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif !important;
    transition: background-color 5000s ease-in-out 0s;
}

input:focus {
    border-color: var(--border-light);
}

  
button, input[type=submit] {
    width: 100%;
    padding: 10px;
    margin: 25px 0;
    background: var(--blue);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1.2rem;
    font-family: 'Open Sans', sans-serif; /* 1 */
    cursor: pointer;
}

.form-button {
    margin-bottom: 0;
}
  
.form-button:hover, input[type=submit]:hover {
    cursor: pointer;
    background-color: var(--blue-dark);
    border-color: transparent;
}

.form-link {
    cursor: pointer;
    color: white;
}

.form-link:hover {
    color: white;
}

.accounts-form-container h1 {
    margin-top: 0;
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.5rem;
    font-weight: 500; /* Bold */
}

.accounts-form-outer {
    width: auto;
    max-width: 80%;

    box-sizing: border-box;
    padding: 40px 50px;
    border-radius: 15px;

    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
}

.accounts-form-container {
    width: var(--form-width);
    max-width: 550px;
    height: auto;
}

.accounts-form-container p {
    color: rgb(200,200,200);
}

a {
    color: white;
    text-decoration: none;
}

.password_change a {
    display: block;
    width: 100%;
    text-align: center;
}

a:hover {
    text-decoration: underline;
}

h2 {
    font-size: 1.7rem;
    font-weight: 500;
}

#id_remember {
    height: 22px;
    width: 22px;
    margin: 0;
    margin-left: 10px;
    background-color: var(--accounts-input);
}

.signup p label, .login p label, .password_change p label, .password_reset p label {
    display: none;
}

.login p:nth-of-type(3) {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.login p:nth-of-type(3) label {
    display: inline-block;
}

.skip-link {
    text-align: center;
    width: 100%;
    display: block;
}

.accounts-title {
    margin-top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.login-or {
    text-align: center;
    margin: 0;
}

.socialaccount_providers {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 10px;
    width: 100%;
}

.socialaccount_providers li {
    width: 100%;

}

.socialaccount_provider {
    color: white;
    display: flex;
    font-size: 1rem;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border: 1px solid var(--border);
    padding: 10px 15px;
    box-sizing: border-box;
    border-radius: 7px;
    width: 100%;
    text-align: center;
}
.socialaccount_provider:hover {
    text-decoration: none;
    border: 1px solid var(--border-light);
}

.provider-logo {
    height: 24px;
    width: 24px;
    margin-right: 10px;
}

.form-note {
    text-align: center;
    margin: 0;
    margin-top: 20px;
}

.accounts-scroll {
    min-height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    background: var(--background-dark);
}

.ctrlHolder label {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.ctrlHolder label span {
    margin-left: 7px;
    color: var(--gray-text);
}

.ctrlHolder label input {
    margin-right: 10px;
}

.blockLabels {
    border: none;
    padding: 0;
    margin-top: 20px;
    margin-bottom: 40px;
}

.blockLabels .buttonHolder {
    margin-top: 30px;
}

.blockLabels .buttonHolder button {
    margin: 5px 0;
    background: transparent;
    border: 1px solid var(--border);
}
.blockLabels .buttonHolder button:hover {
    border: 1px solid var(--border-light);
}

.add_email button {
    margin-top: 10px;
}