:root {
        --warm-beige: #b3cef4;
        --soft-oatmilk: #81a2d0;
        --deep-clay: #5378ad;
        --muted-olive: #28446b;
        --soft-black: #193255;
        --warm-white: #f5f6fc;
        --dark-brown: #03214a;
        --warm-beige-light: #3c89f3; /* +10% */
        --warm-beige-dark: #075dd4; /* -10% */
        --soft-oatmilk-light: #c4d4ea; /* +10% */
        --soft-oatmilk-dark: #c4d4ea; /* -10% */ 
    }

@font-face {
  font-family: 'Cosmetic';
  src: url('/website/fonts/spacefont/spacefont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Avenir-roman';
  src: url('/website/fonts/avenir/AvenirLTStd-Roman.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body.login-page {
  background: linear-gradient(135deg, var(--warm-white),var(--warm-beige));
  
  color: var(--text-color);
}

.login-box {
  margin-top: 60px;
  width:40% !important;
 
}


@media (max-width: 767px) {
  .login-box {
    width: 80% !important;
  }
}

.login-logo img {
  border-radius: 16px;
  transition: transform 0.3s ease;
  width:100px;
  aspect-ratio: 1 / 1;  
  object-fit: cover; 
  padding: 5px;
}

.login-logo img:hover {
  transform: scale(1.05);
}

.card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--warm-beige);
  background: white;

}

.login-card-body {
  padding: 2rem;
  background-color: var(--warm-white);
}

.login-box-msg {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--muted-olive);
  text-align: center;
  margin-bottom: 1.5rem;
}

.login-box-msg2 {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--deep-clay);
  text-align: center;
  margin-bottom: 1.5rem;
}

.input-group .form-control {
  border-radius: 8px 0 0 8px;
  border: 1px solid var(--warm-beige);
  height: 45px;
  background-color: #fff;
  color: #333;
}

.input-group-text {
  background-color: var(--warm-beige);
  border: 1px solid var(--warm-beige);
  color: #fff;
  border-radius: 0 8px 8px 0;
}

.btn-primary {
  background-color: var(--muted-olive);
  border-color: var(--muted-olive);
  border-radius: 8px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--deep-clay);
  border-color: var(--soft-oatmilk);
}

.icheck-primary > input:first-child:checked + label::before {
  background-color: var(--deep-clay);
  border-color: var(--deep-clay);
}

.icheck-primary > input:first-child + label::before {
  border-radius: 4px;
  border: 1px solid var(--deep-clay);
}

a {
  color: var(--muted-olive);
  font-size: 0.85rem;
}

a:hover {
  text-decoration: underline;
  color: var(--soft-oatmilk);
}

.invalid-feedback {
  font-size: 0.85rem;
  color: #dc3545;
}

span.fas{
  color: var(--soft-black);
}