.main-header {
    position: static;
}
.login-wrapper {
    position: relative;
    background: #1A171766;
    border: 1px solid #403F3F99;
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    margin: 60px auto;
}

.login-wrapper h2 {
    text-align: center;
    color: #fff;
    font-size: 28px;
    margin-bottom: 20px;
    font-family: 'pphattonmedium500';
    font-weight: 500;
}

.login-wrapper input {
    width: 100%;
    padding: 12px 15px;
    margin: 0px 0 20px;
    border: 1px solid #403F3F99;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    background: #1b1b1b;
    color: #fff;
}
.login-wrapper input:focus-visible,
.login-wrapper input:focus,
.login-wrapper input:hover{
  border-color: #f8931d !important;
  box-shadow: none;
  outline: none;
}

.login-wrapper button {
    width: fit-content;
    background-color: #f8931d;
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s all ease;
    padding: 14px 50px;
    margin: 10px auto;
    display: block;
    line-height: 1;
}

.login-wrapper button:hover {
  background-color: #6fa744;
}

.login-wrapper .link {
  text-align: center;
  margin-top: 15px;
  color: #fff;
}

.login-wrapper .link a {
    color: #fff;
    font-weight: 500;
    text-decoration: underline;
    transition: 0.5s all ease;
}

.login-wrapper .link a:hover {
  text-decoration: underline;
}
.login-wrapper .alert {
    padding: 5px 10px;
    font-size: 14px;
}
.login-wrapper input:-webkit-autofill, 
.login-wrapper input:-webkit-autofill:hover, 
.login-wrapper input:-webkit-autofill:focus, 
.login-wrapper input:-webkit-autofill:active {-webkit-box-shadow: 0 0 0 30px white inset !important;}


.login-wrapper .link p {
    margin-bottom: 0px;
}

.Forgot-Password:hover,
.login-wrapper .link a:hover {
    color: #6ea643 !important;
}
.Forgot-Password {
    transition: 0.5s all ease;
}

@media (max-width: 767px) {

    /* ==== login-page ==== */
  .login-wrapper { padding: 24px; width: auto; max-width: 100%; margin: 50px 15px; }

}


.login-wrapper .password-toggle-wrapper .password-toggle-btn {padding: 0; margin: 0; color: #000; background: #fff; top: 45%; }
.login-wrapper .password-toggle-wrapper .password-toggle-btn:hover, 
.login-wrapper .password-toggle-wrapper .password-toggle-btn:focus {background: transparent !important; }