/* LOGIN FORM */

.login {
    height: auto;
}

.login #header img {
    height: 88px;
}
.login #header {
    height: auto;
    padding: 2rem 1.2rem;
    justify-content: center;
}


#set-password-logo {
    height: auto;
    justify-content: center;
    width:auto;
    display:flex;
    align-items: center;
    background: var(--header-bg);
    color: var(--header-color);
}

.login #header h1 {
    font-size: 2.125rem;
    font-weight: 400;
    margin: 0;
}

.login #header h1 {
    color: #000;
}

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

.login #container {
    border-radius: 4px;
    overflow: hidden;
    width: 28em;
    min-width: 300px;
    margin: 100px auto;
    height: auto;
}

.login .form-row {
    padding: 2.5px 0;
    position: relative;
}

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

.login .form-row .errorlist {
    display: block;
    min-height: 1.4rem;
    margin: 0;
    background: none;
}

.login .form-row #id_username, .login .form-row #id_password, .form-row #id_confirm_password {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 7px 7px 37px;
    border: none;
    border-bottom: rgba(166, 166, 166, 1) 1px solid;
    border-radius: 0px;
    font-size: 0.95rem;
    outline: none;
}

.login .form-row .email-icon::before {
    content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 7.00005L10.2 11.65C11.2667 12.45 12.7333 12.45 13.8 11.65L20 7" stroke="%23155a96ab" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><rect x="3" y="5" width="18" height="14" rx="2" stroke="%23155a96ab" stroke-width="2" stroke-linecap="round"/></svg>');
    display: block;
    position: absolute;
    top: 0.4rem;
    left: 0.5rem;
}

.login .form-row .password-icon::before {
    content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 10.0288C7.47142 10 8.05259 10 8.8 10H15.2C15.9474 10 16.5286 10 17 10.0288M7 10.0288C6.41168 10.0647 5.99429 10.1455 5.63803 10.327C5.07354 10.6146 4.6146 11.0735 4.32698 11.638C4 12.2798 4 13.1198 4 14.8V16.2C4 17.8802 4 18.7202 4.32698 19.362C4.6146 19.9265 5.07354 20.3854 5.63803 20.673C6.27976 21 7.11984 21 8.8 21H15.2C16.8802 21 17.7202 21 18.362 20.673C18.9265 20.3854 19.3854 19.9265 19.673 19.362C20 18.7202 20 17.8802 20 16.2V14.8C20 13.1198 20 12.2798 19.673 11.638C19.3854 11.0735 18.9265 10.6146 18.362 10.327C18.0057 10.1455 17.5883 10.0647 17 10.0288M7 10.0288V8C7 5.23858 9.23858 3 12 3C14.7614 3 17 5.23858 17 8V10.0288" stroke="%23155a96ab" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    display: block;
    position: absolute;
    top: 0.4rem;
    left: 0.5rem;
}

.login .form-row .eye-icon::after,.form-row .eye-icon-1::after {
    content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.99902 3L20.999 21M9.8433 9.91364C9.32066 10.4536 8.99902 11.1892 8.99902 12C8.99902 13.6569 10.3422 15 11.999 15C12.8215 15 13.5667 14.669 14.1086 14.133M6.49902 6.64715C4.59972 7.90034 3.15305 9.78394 2.45703 12C3.73128 16.0571 7.52159 19 11.9992 19C13.9881 19 15.8414 18.4194 17.3988 17.4184M10.999 5.04939C11.328 5.01673 11.6617 5 11.9992 5C16.4769 5 20.2672 7.94291 21.5414 12C21.2607 12.894 20.8577 13.7338 20.3522 14.5" stroke="%23155a96ab" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    display: block;
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    cursor: pointer;
}

.login .form-row .eye-icon.clicked::after ,.form-row .eye-icon-1.clicked::after {
    content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.0007 12C15.0007 13.6569 13.6576 15 12.0007 15C10.3439 15 9.00073 13.6569 9.00073 12C9.00073 10.3431 10.3439 9 12.0007 9C13.6576 9 15.0007 10.3431 15.0007 12Z" stroke="%23155a96ab" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.0012 5C7.52354 5 3.73326 7.94288 2.45898 12C3.73324 16.0571 7.52354 19 12.0012 19C16.4788 19 20.2691 16.0571 21.5434 12C20.2691 7.94291 16.4788 5 12.0012 5Z" stroke="%23155a96ab" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

#set-password .form-row .password-icon::before , #set-password .form-row .eye-icon::after, #set-password .form-row .eye-icon-1.clicked::after , #set-password .form-row .eye-icon.clicked::after  , #set-password .form-row .eye-icon-1::after,#set-password .form-row{
    top: auto !important;
    bottom: 10.5px;
  }

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

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

.login .password-reset-link a {
    color: var(--primary);
    display: flex;
    justify-content: flex-end;
}

.clear,
#footer {
    display: none;
}

.input-group-text {
    background: white;
}

.form-control {
    font-size: 1rem;
}

.variable-container {
    width: 38%;
    margin: auto;
    padding-bottom: 20%;
}

.container {
    height: 100vh;
    display: flex;
}


#login-form input[type="submit"] {
    font-size: 1.3rem;
    padding: 0.2rem;
    width: 100%;
}

.form-control::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgba(166, 166, 166, 1);
    opacity: 1;
    /* Firefox */
}

.form-control:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: rgba(166, 166, 166, 1);
}

.form-control::-ms-input-placeholder {
    /* Microsoft Edge */
    color: rgba(166, 166, 166, 1);
}

.input-group-text {
    padding: 0.375rem 1.5%
}

.form-control:focus {
    box-shadow: none;
}

.transparent-bg {
    background: none;
}

.errorlist {
    font-weight: bold;
    padding-left: 1%;
}


@media (max-width: 767px) {
    .variable-container {
        width: 95%;
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #333;
    -webkit-box-shadow: 0 0 0 50px white inset;
}

.border-bottom{
    border-bottom: rgba(166, 166, 166, 1) 2px solid !important;
    border-radius: 0px !important;
}

.centered-form {
      text-align: center;
      margin: 0 auto;
      width: auto;
      margin-top: 100px;
      text-colour:black;
 }

.loader {
    display: inline-block;
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    position: absolute;
    left: 47%;
    top: 40%;
    margin: auto;
    transform: translate(-50%, -50%);

    border: 5px solid white;
    border-bottom-color: transparent;

    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}