html, body {
  font-size: 14px;
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column; /* Stack children vertically */
}

main {
    flex: 1; /* Shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
    width: 100%;
    max-width: 100%;
    padding: 0;
}

#top-bar {
    width: 100%;
    max-width: 100%;
    padding: 0;
  background: linear-gradient(to right, #92d2eb 0%, #c4e8f8 50%, #92d2eb 100%);
}

#top-bar .navbar {
  padding: 2px;
}

@media (min-width: 768px) {
    header#header  ul.navbar-nav > li:not(:first-child):not(.dropdown-item) a:not(.dropdown-item):before {
        content: "|";
        padding-right: 1em;
    }
}

header#header {
  color: #fff;
  background: linear-gradient(to bottom, #023a6d 0%, #315a8e 50%, #2c5e91 100%);
  padding-top: 0;
    padding-bottom: 0;
}


header#header  ul.navbar-nav > li.nav-item {
    font-size: 1.3em;
}

header#header img {
    height: 32px;
    width: 100px;
}

header#header #logo-text {
    padding-left: 57px;
    color: white;
    font-size: 0.9rem;
}

header#header #header-title {
    font-size: 2rem;
}


.band {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.band.white {
  background-color: #fff;
}
.band.gray {
  background-color: #f8f9fa;
}
.band.darkgray {
  background-color: #adb5bd;
}

.band.hero { 
    padding-top: 0;
    text-align: center;
}

.band.hero .hero-img-container {
  position: relative;
  display: inline-block;
}
.band.hero .hero-img-container:before, .band.hero .hero-img-container:after {
  content: "";
  display: block;
  width: 5rem;
  position: absolute;
  top: 0;
  bottom: 0;
}
.band.hero .hero-img-container:before {
  left: 0;
  background-image: linear-gradient(to left, transparent, #fff);
}
.band.hero .hero-img-container:after {
  right: 0;
  background-image: linear-gradient(to right, transparent, #fff);
}

@media (max-width: 899.98px) {
  .band .wrapper {
    max-width: 100%;
  }
}

.header-container, .band .wrapper {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 450px) {
  .header-container, .band .wrapper {
    max-width: 450px;
  }
}
@media (min-width: 600px) {
  .header-container, .band .wrapper {
    max-width: 600px;
  }
}
@media (min-width: 900px) {
  .header-container, .band .wrapper {
    max-width: 900px;
  }
}
@media (min-width: 1200px) {
  .header-container, .band .wrapper {
    max-width: 1200px;
  }
}


.card {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  overflow: hidden;
  border-radius: 0.33rem;
  border: 2px solid #f8f9fa;
  border-bottom-color: #dee2e6;
  box-shadow: 0 0.5rem 1rem 0 rgba(102, 102, 102, 0.75);
  background-color: #fff;
}


footer#footer {
  padding-top: 1rem;
  clear: both;
  color: #fff;
  background: linear-gradient(to bottom, #2c5e91 0%, #023a6d 100%);
}
footer#footer .container {
  margin-left: auto;
  margin-right: auto;
}
footer#footer a {
  color: inherit;
}
footer#footer .row {
  border-top: 1px solid #ffff00;
}
footer#footer .row ul#network-links {
  margin: 1rem 0;
}
@media (max-width: 449.98px) {
  footer#footer .row ul#network-links {
    justify-content: center;
  }
}
footer#footer .row ul#network-links > li {
    font-size: 0.8rem;
  padding-right: 1em;
  display: inline-block;
}
footer#footer .row ul#network-links > li:not(:last-child):after {
  content: "|";
  padding-left: 1em;
}
footer#footer .row ul#network-links > li > a {
  padding: 0;
  display: inline-block;
  font-weight: bold;
}
footer#footer .row ul#contact-info {
    font-size: 0.8rem;
  margin: 1rem 0;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
}
footer#footer .row ul#contact-info > li {
  padding-right: 1em;
}
@media (min-width: 450px) {
  footer#footer .row ul#contact-info > li:not(:last-child):after {
    content: "|";
    padding-left: 1em;
  }
}

.form-label.required::after {
    content: "*";
    color: red;
    font-size: 0.8em;
    vertical-align: super;
    margin-left: 0.25rem;
}

.form-check-label.required::after {
    content: "*";
    color: red;
    font-size: 0.8em;
    vertical-align: super;
    margin-left: 0.25rem;
}

.data-table tbody tr {
    cursor: pointer;
}

.data-table tbody tr.selected {
    background-color: #0d6efd !important;
    color: white;
}

.data-table tbody tr.selected td {
    background-color: #0d6efd !important;
    color: white;
}

.badge-status {
    font-size: 0.85em;
}