/************************************************
	************************************************
				1. Importing Sass Variables
	************************************************
************************************************/
/************************************************
	************************************************
				2. Importing Web Fonts
	************************************************
************************************************/
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato/Lato-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato/Lato-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato/Lato-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik Mono One";
  src: url("../fonts/rubik-mono/RubikMonoOne-Regular.ttf") format("truetype");
  font-style: normal;
  font-style: normal;
  font-display: swap;
}

body{
 overflow: hidden;
}

.login-container {
  /* background: #eef1f6; */
  background-repeat: no-repeat;
  /* background: linear-gradient(rgba(0, 0, 0, 0.39), rgba(0, 0, 0, 0.39)), url("../images/login/medicinebackdrop.png"); */
  background: linear-gradient(rgba(47, 49, 77, 0.39), rgba(0, 0, 0, 0.39));
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.maintenance-page {
  background: #eef1f6;
  display: flex;
  align-items: center;
  color: #ffffff;
}

/************* Login *************/
.login-box {
  background: #ffffff;
  margin: auto;
  width: 510px;
  min-height: 320px;
}
.login-box .login-logo {
  display: flex;
}
.login-box .login-logo img {
  width: 150px;
}
.login-box .btn img.login-icon {
  width: 30px;
  height: 30px;
}
.login-box .login-form-footer {
  border-top: 1px solid #ffffff;
}

@media (max-width: 576px) {
  .login-box {
    padding: 30px 20px 30px 20px;
    width: auto;
  }
}
/******** Maintenance Screen ********/
.maintenance-screen {
  background: #1553a3;
  color: #ffffff;
}
.maintenance-screen h1 {
  font-size: 5rem;
}
.maintenance-screen .btn {
  padding: 0.7rem 1.8rem;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  color: #ffffff;
  background: transparent;
  border: 2px solid #ffffff;
}
.maintenance-screen .btn:hover {
  color: #1553a3;
  background: #ffffff;
  border: 2px solid #ffffff;
}

/************* Error Page *************/
.error-screen {
  background: #e22132;
  color: #ffffff;
}
.error-screen h1 {
  font-family: Rubik Mono One;
  font-size: 15rem;
}
.error-screen .btn {
  padding: 0.7rem 1.8rem;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  color: #ffffff;
  background: transparent;
  border: 2px solid #ffffff;
}
.error-screen .btn:hover {
  color: #e22132;
  background: #ffffff;
  border: 2px solid #ffffff;
}