/* ===== RESET ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Sora", sans-serif;
}

/* ===== MAIN WRAP ===== */
.login_wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(121deg, rgb(35 71 149) 0%, #5c94d8 100%);
}

/* ===== LOGIN BOX ===== */
.login_wrap > .login_box {
    background: #fff;
    width: 100%;
    max-width: 380px;
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* ===== TITLE ===== */
.login_wrap > .login_box > h2 {
    text-align: center;
    margin-bottom: 25px;
    color: #1e3c72;
}

/* ===== FORM ===== */
.login_wrap > .login_box > form > .form_group {
    margin-bottom: 18px;
    position: relative;
}

/* ===== ICON ===== */
.login_wrap > .login_box > form > .form_group > svg {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    fill: #2a5298;
}

/* ===== INPUT ===== */
.login_wrap > .login_box > form > .form_group > input {
    width: 100%;
    padding: 12px 12px 12px 42px;
    border-radius: 6px;
    border: 1px solid #ccc;
    outline: none;
    font-size: 14px;
}

.login_wrap > .login_box > form > .form_group > input:focus {
    border-color: #2a5298;
}

/* ===== BUTTON ===== */
.login_wrap > .login_box > form > button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(121deg, rgb(35 71 149) 0%, #5c94d8 100%);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: 0.3s;
}

.login_wrap > .login_box > form > button:hover {
    opacity: 0.9;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .login_wrap > .login_box {
        padding: 25px;
    }
}


.alert{
  padding:12px 14px;
  border-radius:10px;
  font-size:14px;
  line-height:1.4;
  margin-top:12px;
  margin-bottom:12px;
  display:none;
}
.alert-success{
  background:#e9f9ef;
  border:1px solid #bfe8cd;
  color:#1f7a3f;
}
.alert-danger{
  background:#ffecec;
  border:1px solid #ffb9b9;
  color:#a61b1b;
}
.alert ul{
  margin:8px 0 0 18px;
}
.alert li{
  margin:4px 0;
}


.btn-spinner{
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 8px;
    animation: btnspin .6s linear infinite;
}
@keyframes btnspin { to { transform: rotate(360deg); } }