body {
  background: url("../vital10-background-large.png") center center no-repeat;
  background-size: cover;
  min-height: 100vh;
  display: grid;
}

.body-container {
  margin-top: 60px;
  padding-bottom: 40px; }

.welcome-page li {
  list-style: none;
  padding: 4px; }

.logged-out-page iframe {
  display: none;
  width: 0;
  height: 0; }

.grants-page .card {
  margin-top: 20px;
  border-bottom: 1px solid lightgray; }
  .grants-page .card .card-title {
    font-size: 120%;
    font-weight: bold; }
    .grants-page .card .card-title img {
      width: 100px;
      height: 100px; }
  .grants-page .card label {
    font-weight: bold; }

.login-component .vital-10-logo-container {
  background: url("../logo.svg") center center no-repeat;
  background-size: contain;
  display: flex;
  justify-content: center;
  transform: height 0.5s; }
  .login-component .vital-10-logo-container div {
    display: flex;
    justify-content: center;
    align-items: center; }
    .login-component .vital-10-logo-container div img {
      width: 150px; }

.login-component h1 {
  color: #0b9396;
  font-family: "Lusitana", serif; }

.password-wrap {
  position: relative; }

.password-rules {
  display: none;
  position: absolute;
  background-color: #FFF;
  color: #0a0a0a;
  border: 1px solid #cacaca;
  z-index: 999;
  padding: 0.5em;
  list-style-position: inside;
  top: 2.5em;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.27);
  width: calc(100% - 30px); }

input[type=password]:focus ~ .password-rules {
  display: block; }

.toggle-password-rules {
  position: absolute;
  left: calc(100% - 30px);
  top: 0;
  cursor: pointer;
  display: inline-block;
  color: #AAA;
  float: right; }

button[type=submit], .btn-primary {
  border-color: #105655;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
  background-color: #0b9396;
  color: #fefefe;
}

.btn-secondary {
  background-color: #fefefe;
  color: #156c6b;
  border-color: #156c6b;
}

  .btn-secondary:not(:disabled):not(.disabled).active {
    background-color: #156c6b;
    border-color: #105655;
  }

.btn:hover, .btn:focus {
  background-color: #156c6b;
  color: #FFF;
  border-color: #105655;
  box-shadow: 0 0 0 0.2rem rgb(11 147 150 / 25%) !important;
}

.btn:active {
  background-color: #156c6b !important;
  color: #FFF;
  border-color: #105655;
}

.btn-secondary:hover {
  background-color: #d3f4f4 !important;
  color: #105655 !important;
  border-color: #105655;
}

.btn-secondary:focus, .btn-secondary.focus {
  background-color: #d3f4f4;
}

.btn-link {
  color: #0b9396;
  border: none;
}

  .btn-link:not(:disabled):not(.disabled).active {
    color: #fefefe;
    background-color: #FFF;
    border: none;
  }

  .btn-link:hover {
    color: #105655 !important;
    background-color: #FFF;
    border: none;
  }

  .btn-link:focus {
    color: #105655;
    background-color: #FFF;
    border: none;
  }

.btn-link > a {
  color: #0b9396;
  border: none;
}

  .btn-link:not(:disabled):not(.disabled).active > a {
    color: #fefefe;
    background-color: #FFF;
    border: none;
  }

  .btn-link:hover > a {
    color: #105655 !important;
    background-color: #FFF;
    border: none;
  }

  .btn-link:focus > a {
    color: #105655;
    background-color: #FFF;
    border: none;
  }

.form-control:focus {
  border-color: #9DD3D5;
  box-shadow: 0 0 0 0.2rem rgb(11 147 150 / 25%) !important;
}

.caps-warning {
  color: #A00;
}

.hidden {
  display: none;
}

.correct {
  color: #0A0;
}