/* =========================
   FORM LOGIN
========================= */

.form-layout {
    max-width: 400px;
    padding: 2rem;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    color: #252525;
    box-sizing: border-box;
    transition: all 0.3s ease;

}
.form-layout h2 {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 20px;
  color: var(--bgthemes);
  padding: 30px 10px;
}

.form-body {
    margin-top: 35px;
  color: #000;
  display: grid;
  justify-content: center;
  gap: 12px;
}

/* =========================
   FORM ROW
========================= */
.form-row {
   display: flex;
   flex-direction: row;
   justify-content: center;
   gap: 15px;
   margin-bottom: 15px;
}
.form-footer{
   margin-top: 10px;
   padding: 5px;
   display: grid;
   justify-content: center;
   align-items: center;
   gap: 10px;
}
/* =========================
   INPUT PASSWORD GROUP
========================= */

.input-group,
.input-password {
  display: flex;
  align-items: stretch;
  width: 300px;
  justify-content: center;
}

.input-password > * {
  border: 1px solid #ced4da;
  height: 45px;
}

/* Left Icon */
.input-password .input-group-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  background: #fff;
  color: #000;
  border-right: none;
  border-radius: 6px 0 0 6px;
}

/* Input Field */
.input-password .form-password {
  flex: 1;
  padding: 10px;
  border-left: none;
  border-right: none;
  outline: none;
}

/* Eye Button */
.input-password .btn-eyes {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  cursor: pointer;
  background-color: #fff;
  color: #000;
  border-left: none;
  border-radius: 0 6px 6px 0;
}

/* Focus State */
.input-password:focus-within {
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
  border-radius: 6px;
}

/* Hover */
.input-password .btn-eyes:hover {
  background-color: #f8f9fa;
}

/* =========================
   BUTTON
========================= */
.btn-login {
    width: 100%;
    background: var(--bgthemes);
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    border: none;
    transition: all 0.2s ease;
}

.btn-login:hover {
    background: #13a39f;
}
.btn-login::after{
    background:#424242;
    outline: rgb(147, 147, 147);
}
.msg-error{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* =========================
   LINKS / TEXT
========================= */
.btn-forgot-password{
  flex: 1;
  display: flex;
  justify-content: flex-start;
}
.btn-forgot-password a,
.wrap-register a,
.terms-notes a {
    font-size: 16px;
    text-decoration: none;
    color: var(--bgthemes);
}

.terms-notes,
.wrap-register {
    text-align: center;
    font-size: 16px;
    color: #424242;
    line-height: 1.5;
}
.terms-notes small{
    font-size: 16px;
}
.wrap-register p{
    text-align: center;
    font-size: 16px;
    color: #424242;
    line-height: 1.5;
}

/* =========================
   MOBILE (<= 991px)
========================= */
 @media (max-width: 991px) {

}





/* =========================
   MOBILE (<= 495px)
========================= */
 @media (max-width: 495px) {
  .form-layout {
    max-width: 400px;
    padding: 1rem;
    background-color: var(--bgthemes);
    box-shadow: none;
    box-sizing:none;
  }
  .input-group,
  .input-password {
    width: 100%;
    height: 45px;
  }
  .form-layout h2 {
    margin-bottom: 20px;
    color: var(--white);
    padding: 0px 10px;
  }
  .form-layout a {
    color: var(--white);
  }
  .btn-login {
    background: #13a39f;
  }

  .btn-login:hover {
      background: #73f5f0;
  }

}

/* =========================
   SMALL DEVICES (<= 360px)
========================= */
@media (max-width: 360px) {

  .form-layout {
      margin-top: -30px;
      padding: 0;
  }
  .input-group,
  .input-password {
    width: 100%;
    height: 45px;
  }
  .form-footer{
    padding: 0;
  }
}