/* 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;
}

body {
  background-color: var(--color-primary);
  color: var(--color-alt);
  font-size: 22px;
}

option,
select {
  font-size: 16px;
}

.main-body {
  display: grid;
  padding: 50px;
  grid-template-areas:
    'logo logo'
    'head1 head1'
    'wkspcsel wkspcsel'
    'body1-left body1-right'
    'middle middle'
    'head2 head2'
    'body2-left body2-right'
  ;
}

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%;
    }
  }
}

.body1-left {
  grid-area: body1-left;
  justify-self: center;
}

.body1-right {
  grid-area: body1-right;
  justify-self: center;
}

.body2-left {
  grid-area: body2-left;
  justify-self: center;
}

.body2-right {
  grid-area: body2-right;
  justify-self: center;
}


.logo {
  grid-area: logo;
  justify-self: center;
}

.head1 {
  grid-area: head1;
  justify-self: center;
}

.head2 {
  grid-area: head2;
  justify-self: center;
}

.middle {
  grid-area: middle;
  justify-self: center;
  justify-items: center;
  width: 100%;
  text-align: center;
}

.wkspcsel {
  grid-area: wkspcsel;
  justify-self: center;
  justify-items: center;
  width: 100%;
  text-align: center;
}

.submit_button {
  font-size: 15px;
  padding: 10px;
  font-weight: 200;
}

.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;
}

.hidden_log_sel {
  visibility: hidden;
}

.hidden_during_logic {
  visibility: hidden;
}

.hidden_srcwkspc {
  visibility: hidden;
}

.hidden_tgtwkspc {
  visibility: hidden;
}

.btn {
  height: 60px;
}

/***** MODAL DIALOG ****/
#modal {
  /* Underlay covers entire screen. */
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;

  /* Flexbox centers the .modal-content vertically and horizontally */
  display: flex;
  flex-direction: column;
  align-items: center;

  /* Animate when opening */
  animation-name: fadeIn;
  animation-duration: 150ms;
  animation-timing-function: ease;
}

#modal>.modal-underlay {
  /* underlay takes up the entire viewport. This is only
	required if you want to click to dismiss the popup */
  position: absolute;
  z-index: -1;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

#modal>.modal-content {
  /* Position visible dialog near the top of the window */
  margin-top: 10vh;

  /* Sizing for visible dialog */
  width: 80%;
  max-width: 600px;

  /* Display properties for visible dialog*/
  border: solid 1px #999;
  border-radius: 8px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
  background-color: white;
  padding: 20px;
  color: black;

  /* Animate when opening */
  animation-name: zoomIn;
  animation-duration: 150ms;
  animation-timing-function: ease;
}

#modal.closing {
  /* Animate when closing */
  animation-name: fadeOut;
  animation-duration: 150ms;
  animation-timing-function: ease;
}

#modal.closing>.modal-content {
  /* Animate when closing */
  animation-name: zoomOut;
  animation-duration: 150ms;
  animation-timing-function: ease;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.9);
  }
}