@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@400;800&display=swap);
.login .background-cover,
body.login {
  background-size: cover;
  height: 100%;
  width: 100%;
}
*,
::after,
::before {
  box-sizing: border-box;
}
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}
body.login {
  background-color: #000;
  background-image: linear-gradient(-180deg, #2b4f67 0, #9bc3dc 100%);
  background-attachment: fixed;
  font-family:Nunito,sans-serif;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.75);
}
.login-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.login .background-cover {
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
}
.login .login-box,
img {
  max-width: 100%;
  height: auto;
}
.login .background-cover::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background-image: linear-gradient(
    to top,
    rgba(43, 79, 103, 0.8),
    rgba(155, 195, 220, 0.07)
  );
}
.login .login-box {
  position: relative;
  width: 420px;
  border-radius: 5px;
  padding: 65px;
  transition: max-height 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  background-image: radial-gradient(
      rgba(155, 195, 220, 0.4),
      rgba(43, 79, 103, 0.8)
    ),
    radial-gradient(rgba(0, 0, 0, 0.39), rgba(0, 0, 0, 0.79));
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.72);
}
.login .login-box_header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50px;
}
.login .login-box_header .sub-title {
  margin: 15px 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
}
.login .login-box_header .sub-title span {
  color: #f0ab00;
}
.login .login-form .form-group {
  margin-bottom: 30px;
}
.login .login-form .form-label {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
.login .login-form .form-input {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 3px;
  color: #435d6d;
  outline-color: #435d6d;
  font-size: 16px;
  padding: 7px;
}
.login .login-form .sign-in-btn {
  width: 100%;
  display: block;
  cursor: pointer;
  text-align: center;
  background: #00b7f1;
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 16px;
  padding: 9px 15px;
  margin-top: 45px;
}
.login .login-form .sign-in-btn:hover {
  background: #00a9de;
}
.login .mini-logo {
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 9999;
}
.alert-danger {
    color: #FFF;
    background-color: #ff06067a;
    border-color: #FFF;
}
@media only screen and (max-width: 480px) {
  body.login {
    font-size: 16px;
  }
  .login-wrapper {
    padding: 15px;
  }
  .login .login-box {
    padding: 60px 25px;
  }
  .login .mini-logo {
    bottom: 15px;
    left: 15px;
  }
}