html,
body {
  height: 100%;
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.login-bg{
  background-image: url(../img/login-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  object-fit: cover;
  background-size: cover;
}
.forgot-password-bg{background: rgba(16, 105, 119, 0.3);}
.form-main {
  max-width: 400px;
  width: 100%;
  background: #D9D9D9;
  border-radius: 30px;
}

.form-main h1{
  background: linear-gradient(to right, #AC72A1, #070E2A);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 30px;
  font-weight: 800;
  text-align: center;;
  font-style: normal;
  margin-bottom: 30px;
}
.form-main .form-control{background: transparent; border: none; border-bottom: 1px solid #000; border-radius: 0px; padding: 0px 0px; height: 40px;}
.form-main .form-control:focus{background: transparent;  box-shadow: none; border-color: black;}
.form-main .form-control{color: #000;}
.form-main .form-control::placeholder{color: #000;}

.form-main .form-check-input[type=checkbox]{ border:1px solid #1D1B20; background-color: transparent; box-shadow: none; border-radius: 0px;}
.form-main .form-check{display: flex; gap: 10px;}
.form-check-input:checked[type=checkbox]{filter: brightness(0);}

.form-main button.btn-primary {
  background: linear-gradient(to right, #106977, #D9D9D9);
  border: none;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  height: 50px;
  font-weight: 700;
  border-radius: 50px;
  width: 100%;
  transition: background 0.3s ease;
}
.form-main button.btn-primary:hover {
  background: linear-gradient(to right, #D9D9D9, #106977);
}
.form-main form{padding: 3rem;}
.form-main.login form{padding: 3rem 3rem 2rem;}
.role-main{gap:40px;}
.login .role-main{justify-content: space-between;padding:0px 20px 3rem;}
.login .role-main a{color: #000; text-decoration: none;}
.login .role-main a:hover{text-decoration: underline;}
h3.admin-login-heading{font-size: 16px; text-align: center; margin:30px 0px 0px;}
h3.admin-login-heading a{color: #000; text-decoration: none;}
h3.admin-login-heading a:hover{text-decoration: underline;}

.form-main.forgot-password{background: transparent; max-width: 600px;}
.form-main.forgot-password h1{background: transparent; color: #000;}
.form-main.forgot-password .form-control{background-color: rgba(217, 217, 217, 1); border: none; height: 50px; padding: 0px 15px;}
.form-main.forgot-password button.btn-primary{border-radius: 0px; background: rgba(16, 105, 119, 1);}
.form-main.forgot-password button.btn-primary:hover{background: rgb(12, 91, 104);}
.admin-login-heading img{margin-right: 15px; max-width: 18px;}
.yes-no{display: flex; justify-content: space-between;}
.form-main.logout-confirmation{background: transparent; max-width: 600px;}
.form-main.logout-confirmation h1{background: none; color: #000;}
.yes-no{display: flex; gap: 50px; margin-top: 130px;}
.yes-no button{font-size: 22px;}
.yes-no button.yes-logout{background: rgba(16, 105, 119, 0.8); color: #fff; width: 50%; border: none; border-radius: 50px;}
.yes-no button.yes-logout:hover{background: rgb(12, 91, 104);}
.yes-no button.no-logout{background: rgba(255, 255, 255, 1); color: #000; width: 50%; border: none;border-radius: 50px; }
.yes-no button.no-logout:hover{background: rgba(16, 105, 119, 0.8); color: #fff;}