.page-login {
  min-height: 100vh !important;
}

.page-login .wrapper {
  background-color: #f0f0f0;
  min-height: 100vh !important;
}

.login-box,
.register-box {
  width: 100%;
  max-width: 38em;
}

.login-box-body {
  background-color: #fff;
}

.login-logo b {
  display: inline-block;
  position: relative;
  padding-right: .3em;
}

.login-logo b::after {
  border-left: 4px dotted #333;
  content: "";
  display: block;
  height: 1.8em;
  position: absolute;
  right: .1em;
  top: -300%;
  width: 0;
}

.pw-forgot {
  padding-top: 10px;
}

.login-logo.page-loaded b::after {
  top:-15%;
  transition: top .8s ease;
}

.login-logo.typing-started b::after {
  animation-name: rotation;
  animation-duration: 3s;
  animation-iteration-count: 1;
}
.materialize {
  padding-top: 16px;
  position: relative;

}

.materialize label {
  pointer-events:none;
  color: #aaa;
  cursor: text;
  font-weight: normal;
  left: 1em;
  line-height: 34px;
  position: absolute;
  top: 16px;
  transition: top .4s ease,
    left 0.4s ease .05s,
    color .3s linear .45s,
    letter-spacing .2s ease .35s;
}

.materialize input:focus + label,
.materialize input.has-content + label  {
  color: #333;
  left: 0;
  letter-spacing: 1px;
  top: -.85rem;
}

.has-feedback.materialize .form-control-feedback {
  top: 17px;
}

:root {
  --gradient: linear-gradient(0.265turn,#114E8F,var(--isl-blue) 84%,#ffffff80 84.5%);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(-180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}