.allauth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.allauth {
    height: 100%;
    flex-grow: 1;
    margin: 5rem auto;

    max-width: min(1204px, 80vw);

    font-family: 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
    color: var(--text-grey);
}

.allauth h1 {
    color: var(--eurac-red);
}

.allauth a {
    font-weight: 700;
    text-align: left;
    text-decoration: none !important;
    text-decoration-style: solid;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--eurac-red) !important;
}

.allauth p {
    margin: 35px 0;
}

.allauth label {
    display: inline-block;
    width: 100%;
}

.allauth label[for='id_remember'] {
    display: inline;
    position: relative;
    top: -4px;
}

.allauth input[type='text'], 
.allauth input[type='password'], 
.allauth input[type='email'] {
    border: none;
    border-bottom: 1px solid #AAA;
    border-radius: 0;
    font-size: 23px;
    height: 40px;
    width: min(80vw, 500px);
    outline: 0;
    cursor: pointer;
    transition: border-color .2s ease-in-out;
    color: var(--dark);
}

 .allauth input:focus {
    border-color: var(--eurac-red);
    border-width: 2px;
    background-color: rgb(238,238,238);
}

.allauth input[type='checkbox'] {
    border-color: #AAA;
    width: 20px;
    height: 20px;
}

.allauth button {
    text-transform: uppercase;
    background-color: transparent;
    color: #8C9091;
    color: var(--eurac-red);
    background-color: white;
    border-radius: 1rem;
    border: 1.5px solid #8C9091;
    border-color: var(--eurac-red);
    padding: 0.5em 1.5rem;
    text-align: center;
}

.allauth button:hover {
    background-color: var(--eurac-red);
    color: white;
    border-color: var(--eurac-red);
}

.allauth #id_privacy_helptext {
    color: var(--text-grey);
    position: relative;
    top: -4px;
}

.allauth .password-wrap {
    display: flex;
    width: min(80vw, 500px);
}

.allauth .password-wrap button {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #AAA;
    transition: border-color .2s ease-in-out;
    padding: 0;
    width: 40px;
    height: 40px;
}

.allauth .password-wrap button:hover {
    color: inherit;
    background-color: inherit;
}

.allauth .password-wrap:has(input:focus) button {
    border-bottom: 2px solid var(--eurac-red);
    background-color: rgb(238,238,238);
}

.mdi--show-outline {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238c9091' d='M12 9a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m0-4.5c5 0 9.27 3.11 11 7.5c-1.73 4.39-6 7.5-11 7.5S2.73 16.39 1 12c1.73-4.39 6-7.5 11-7.5M3.18 12a9.821 9.821 0 0 0 17.64 0a9.821 9.821 0 0 0-17.64 0'/%3E%3C/svg%3E");
}

.mdi--hide-outline {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238c9091' d='M2 5.27L3.28 4L20 20.72L18.73 22l-3.08-3.08c-1.15.38-2.37.58-3.65.58c-5 0-9.27-3.11-11-7.5c.69-1.76 1.79-3.31 3.19-4.54zM12 9a3 3 0 0 1 3 3a3 3 0 0 1-.17 1L11 9.17A3 3 0 0 1 12 9m0-4.5c5 0 9.27 3.11 11 7.5a11.8 11.8 0 0 1-4 5.19l-1.42-1.43A9.86 9.86 0 0 0 20.82 12A9.82 9.82 0 0 0 12 6.5c-1.09 0-2.16.18-3.16.5L7.3 5.47c1.44-.62 3.03-.97 4.7-.97M3.18 12A9.82 9.82 0 0 0 12 17.5c.69 0 1.37-.07 2-.21L11.72 15A3.064 3.064 0 0 1 9 12.28L5.6 8.87c-.99.85-1.82 1.91-2.42 3.13'/%3E%3C/svg%3E");
}