/* Concordis-inspired color theme */

:root {
  /* Base / Background */
  --color-bg: #ffffff;
  /* white background */
  --color-alt: #f8f9fa;
  /* light off-white / subtle section bg */

  /* Text */
  --color-text: #333333;
  /* dark gray for main text */
  --color-heading: #1a1a1a;
  /* almost black for headings */
  --color-muted: #6c757d;
  /* muted / secondary text */

  /* Primary brand color (links, buttons, highlights) */
  --color-primary: #02374f;
  /* a deep blue — matches many education-style “trust & professionalism” accents */

  /* Secondary / accent */
  --color-accent: #0069d9;
  /* slightly lighter blue for hover, borders, subtle accents */

  /* Borders / dividers */
  --color-border: #e1e4e8;
  /* light grey border / divider color */

  /* Link / button text on primary background */
  --color-on-primary: #ffffff;
  /* white text on primary buttons */
}

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline;
}

.htmx-request.htmx-indicator {
  display: inline;
}

table,
th,
td {
  border: 1px solid black;
}

.main-body {
  display: grid;
  grid-template-areas: 'body-left body-right';
  background-color: var(--color-primary);
  color: var(--color-alt);
  font-size: 22px;
}

a {
  display: block;
  margin: auto;
  padding: 1rem 1.25rem;
  font-family: sans-serif;
  font-size: 1.5rem;
  text-decoration: none;
  color: white;
  position: relative;
  transition: all .3s cubic-bezier(.2, 0, 0, 1);
  z-index: 1;

  &:after {
    content: '';
    display: block;
    height: 2px;
    position: absolute;
    bottom: 0;
    right: 1.25rem;
    left: 1.25rem;
    background-color: #ffffff;
    transition: all .3s cubic-bezier(.2, 0, 0, 1);
    transform-origin: bottom center;
    z-index: -1;
  }

  &:hover {
    color: #2D2D2D;

    &:after {
      right: 0;
      left: 0;
      height: 100%;
    }
  }
}

.body-left {
  grid-area: 2 / body-left / body-left / body-left;
  justify-self: center;
}

.body-right {
  grid-area: 2 / body-right / body-right / body-right;
  justify-self: center;
}


.centered-on-grid {
  grid-area: 1 / 1 / 1 / 3;
  justify-self: center;
}

.centered-on-grid_row2 {
  grid-area: 2 / 1 / 2 / 3;
  justify-self: center;
}

.progress {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.progress-bar {
  float: left;
  width: 0%;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #337ab7;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  -webkit-transition: width .6s ease;
  -o-transition: width .6s ease;
  transition: width .6s ease;
}

.hidden {
  visibility: hidden;
}

.hidden_during_load {
  visibility: hidden;
}