html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}



html {
  position: relative;
  min-height: 100%;
}

/* Use flexbox to make footer stick to bottom without overlapping content.
   The page structure in _Layout.cshtml is:
     <header>...</header>
     <div class="container">  <-- make this expand
       <main role="main">...</main>
     </div>
     <footer>...</footer>
*/

body {
    margin-bottom: 20vh; /* override bootstrap */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* let the main container grow to fill available space so footer is pushed to the bottom */
body > .container {
    flex: 1 0 auto;
}

/* provide the main area an explicit flexible area if needed */
main[role="main"] {
    flex: 1 0 auto;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

li {
    font-weight: bold;
    font-size: .9em;
}