/* Color variables for new UI enhancements Issue 9216 & 9212 */
/* Color variables for Calendar view when picking a session */
/* Font variables for new UI enhancements Issue 9216 & 9212*/
@font-face {
  font-family: 'jennasue';
  src: url('/assets/fonts/JennaSue.ttf');
}
@font-face {
  font-family: 'lato light';
  src: url('/assets/fonts/Lato-Light.ttf');
}
@font-face {
  font-family: 'lato heavy';
  src: url('/assets/fonts/Lato-Heavy.ttf');
}
@font-face {
  font-family: 'lato black';
  src: url('/assets/fonts/Lato-Black.ttf');
}
/* Font variables for new UI enhancements Issue 9216 & 9212*/
@font-face {
  font-family: 'montserrat bold';
  src: url('/assets/fonts/Montserrat-Bold.ttf');
}
@font-face {
  font-family: 'montserrat medium';
  src: url('/assets/fonts/Montserrat-Medium.ttf');
}
@font-face {
  font-family: 'montserrat regular';
  src: url('/assets/fonts/Montserrat-Regular.ttf');
}
/* The typing effect */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}
#md-18 {
  font-size: 18px;
}
/* sidebar compatibility - use this to retain desired background */
body {
  background-color: #EEF1F4;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'montserrat regular';
}
h1 {
  font-size: 32pt;
  font-family: 'montserrat bold';
  margin-top: 0.3rem !important;
}
.pusher {
  padding-bottom: 1rem;
}
.login-container {
  display: flex;
  background-color: white;
  margin: auto;
  width: 32.0089cm;
  height: 20cm;
  border-radius: 5px;
  box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.2);
}
.login-container .login-image {
  flex-basis: 50%;
  border-radius: 5px 0 0 5px;
  background-image: url(/assets/images/login-image.jpg);
  background-position: 50%;
  background-size: cover;
}
.login-container .login-content {
  flex-basis: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2em;
}
.login-container .login-content .login-label {
  color: #03ACEF;
  margin-bottom: 0;
}
.login-container .login-content .ui.message {
  margin-bottom: 0;
}
.login-container .login-content form {
  font-size: 16pt;
  padding: 2em 0 2em 0;
}
.login-container .login-content form .login-menu.ui.menu {
  font-size: 1em;
}
.login-container .login-content form .ui.segment {
  font-size: 1em;
}
.field .ui.input {
  position: relative;
}
.field .ui.input.id::before {
  content: "";
  position: absolute;
  left: 0.4em;
  top: 0;
  bottom: 0;
  width: 0.8em;
  background: url(/assets/images/username-icon.svg) center / contain no-repeat;
}
.field .ui.input.password::before {
  content: "";
  position: absolute;
  left: 0.4em;
  top: 0;
  bottom: 0;
  width: 0.8em;
  background: url(/assets/images/lock_password-icon.svg) center / contain no-repeat;
}
.field .ui.input input {
  border: none;
  border-radius: 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  padding-left: 2em;
}
.field .ui.input input:focus {
  border-width: 0;
  border-radius: 5px;
  box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.2);
}
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5em;
}
.form-actions .ui.button.submit-btn {
  font-size: 16pt;
  flex-basis: 40%;
  background-color: #03ACEF;
  color: #F4F7FB;
  border-radius: 5px;
  box-shadow: 0 0.2em 1em rgba(0, 191, 255, 0.2);
}
.form-actions .forgot-password {
  flex-basis: 55%;
  color: #202223;
}
#qr_wrapper {
  width: 17em;
}
@media (max-width: 1280px) {
  h1 {
    font-size: 1.85rem;
  }
  .login-container {
    width: 85vw;
    height: 80vh;
  }
  .form-actions .forgot-password {
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 768px) {
  h1 {
    font-size: 1.2rem;
  }
  .login-container {
    height: 90vh;
    flex-direction: column;
    justify-content: space-between;
  }
  .login-container .login-image {
    flex-basis: 30%;
  }
  .login-container .login-content {
    flex-basis: 65%;
    justify-content: flex-start;
  }
  .login-container .login-content .ui.message {
    font-size: 0.8rem;
  }
  .login-container .login-content form {
    padding: 1rem 0 1rem 0;
  }
  .login-container .login-content form .field {
    font-size: 1rem;
  }
  .form-actions .ui.button.submit-btn {
    font-size: 1rem;
  }
  .form-actions .forgot-password {
    font-size: 1rem;
  }
  #qr_wrapper {
    width: 12em;
  }
}