@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  --bs-blue: #0C4E82;
}

.btn-primary {
  background-color: var(--bs-blue) !important;
  border-color: var(--bs-blue) !important;

  &:hover {
    background-color: #0f62a3 !important;
    border-color: #0f62a3 !important;
  }
}



/* Login Settings */

.main-login-container{
  font-family: "Open Sans", sans-serif !important;
  font-optical-sizing: auto !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-variation-settings: "wdth" 800 !important;
}


.hero-image {
  width: -webkit-fill-available;
}

.hero-title {
  font-size: calc(2.5em + 2vw) !important;
  margin-top: 8rem !important;
}

.hero-subtitle {
  font-weight: 600 !important;
  font-size: calc(1.5em + .8vw) !important;
  line-height: 1.5em !important;
  padding: 0 6rem !important;
}

.logo-slogan {
  font-size: 1em !important;
}

.login-container label,
.forgot-password-container label {
  font-size: calc(.8em + .5vw) !important;
  font-weight: 600 !important;
}

.login-container input,
.forgot-password-container input, 
.recovery-password input {
  background-color: #ecebeb;
}

.eye-icon {
  margin-top: .5295rem !important;
}

.recovery-password {
  font-size: calc(.4em + .5vw) !important;
}

.recovery-title-text {
  color: var(--bs-blue) !important;
}

.bg-whitesmoke {
  background-color: #fbfbfb !important;
}

.text-gray {
  color: #5C5C5C !important;
}

.text-lightgray {
  color: #555555 !important;
}

.footer-span {
  color: var(--bs-blue) !important;

  &:hover {
    color: #0f62a3 !important;
  }
}

/* Mobile view */
@media screen and (max-width: 767px) {
  .eye-icon {
    margin-top: .3rem !important;
  }
}

/* Tablet view */
@media screen and (min-width: 768px) and (max-width: 991px) {

  .hero-container,
  .logo,
  .hero-text {
    max-height: 30vh !important;

    & .hero-image {
      max-height: 30vh !important;
      min-width: 100vw !important;
    }
  }

  .hero-title {
    font-size: 3.2em !important;
    margin-top: 2rem !important;
  }

  .hero-subtitle {
    font-size: 1.5em !important;
    padding: 0 2rem !important;
  }

  .login-container {
    max-height: 70vh !important;
  }

  .forgot-password-container {
    max-height: 70vh !important;
  }

  .recovery-password {
    text-align: center !important;
  }

  .eye-icon {
    margin-top: .3rem !important;
  }

}

/* Extra large screen */
@media (min-width: 2000px) and (max-width: 3400px) {
  .hero-subtitle {
    padding: 0 16rem !important;
  }
}