:root {
  --color0  :#A5AC8D;
  --color1: #80866E; /* +20% */
  --color2: #767B65; 
  --color3: #565A4A; /* -20% */


  --soft-black: #333333;
  --soft-black-light: #3B3B3B; /* +10% */
  --soft-black-dark: #2D2D2D; /* -0% */

  --warm-white: #F5F0E6;
  --warm-white-light: #FAF7F2; /* +10% */
  --warm-white-dark: #E8E3D9; /* -10% */
  --white:#FFFFFF;
  --black:#000000;
}

@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-beige), var(--color1));
  
  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: 20px;
  transition: transform 0.3s ease;
  width:140px;
  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(--color1);
  background: white;

}

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

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

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

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

.input-group-text {
  background-color: var(--soft-black);
  border: 1px solid var(--soft-black);
  color: var(--color3);
  border-radius: 0 8px 8px 0;
}

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

.btn-primary:hover {
  background-color: var(--color2) !important;
  border-color: var(--color3) !important;
}

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

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

a {
  color: white;
  font-size: 0.85rem;
}

a:hover {
  text-decoration: underline;
  color: white !important;
  font-size: 0.9rem;
}

.invalid-feedback {
  font-size: 0.85rem;
  color: var(--soft-black);
}

span.fas{
  color: white !important;
}

.input-group-append{
  background: var(--color3);
}