@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
}
.login-container {
  background: #e6ecf3
}
.maintenance-page {
  background: #e6ecf3;
  display: flex;
  align-items: center;
  color: #fff
}
.login-box {
  background: #fff;
  margin: auto;
  width: 420px;
  min-height: 320px;
    margin-top: 20vh;
}
.login-box .login-logo {
  display: flex
}
.login-box .login-logo img {
  width: 300px
}
.login-box .btn img.login-icon {
  width: 30px;
  height: 30px
}
.login-box .login-form-footer {
  border-top: 1px solid #fff
}
@media(max-width: 576px) {
  .login-box {
    padding: 30px 20px 30px 20px;
    width: auto
  }
}
.maintenance-screen {
  background: #1553a3;
  color: #fff
}
.maintenance-screen h1 {
  font-size: 5rem
}
.maintenance-screen .btn {
  padding: .7rem 1.8rem;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  color: #fff;
  background: rgba(0, 0, 0, 0);
  border: 2px solid #fff
}
.maintenance-screen .btn:hover {
  color: #1553a3;
  background: #fff;
  border: 2px solid #fff
}
.error-screen {
  background: #e13d4b;
  color: #fff
}
.error-screen h1 {
  font-family: Rubik Mono One;
  font-size: 15rem
}
.error-screen .btn {
  padding: .7rem 1.8rem;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  color: #fff;
  background: rgba(0, 0, 0, 0);
  border: 2px solid #fff
}
.error-screen .btn:hover {
  color: #e13d4b;
  background: #fff;
  border: 2px solid #fff
}