html {
  height: 100%;
}

.top-100 {
  height: 100%;
  top: 0;
}

body {
  height: 100%;
  background-color: #525252;
}

#login-page {
  background-image: url("/resources/login-background.png");
  background-repeat: repeat;
  background-position: center;
  background-size: 50%;
  background-color: #AAAAAA;
}

.top-filler {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 25%;
  min-height: 4rem;
  background-color: black;
}
.top-filler h1 {
  color: white;
  font-family: "Rubik", sans-serif;
  font-weight: 550;
}

.bot-filler {
  position: absolute;
  left: 0%;
  bottom: 0%;
  width: 100%;
  height: 25%;
  min-height: 8rem;
  background-color: black;
}

.login-logo {
  position: absolute;
  width: 350px;
  height: 200px;
  background-image: url("/resources/elforest-vert.png");
  background-repeat: no-repeat;
  background-size: contain;
}

.login-pane {
  justify-self: center;
  align-self: center;
  height: 13rem;
  padding: 1.4rem 4rem;
  background-color: rgba(35, 35, 35, 0.65);
  color: white;
}

.login-label {
  margin: 0;
  font-size: 10pt;
}

.login-button {
  box-shadow: none !important;
  background-color: #2878d2;
  color: whitesmoke;
  height: 2rem;
  padding: 0 0.6rem;
  border-radius: 0.1rem;
  border-width: 0.15rem;
  border-style: solid;
}
.login-button:hover {
  border-color: #2878d2;
  background-color: #2878d2;
  color: white;
}

.form-group > input {
  border-radius: 0.1rem;
}
.form-group > input::placeholder {
  color: #afafaf;
}

@media screen and (max-width: 991px) {
  .login-pane {
    padding: 1rem 1rem 1rem 1rem;
  }
}