/* =========================
   Layout
========================= */

#div-1a,
#div-1b,
#div-2a,
#div-2b,
#div-Pa,
#div-Pb {
  float: left;
  width: 50%;
}

#div-1c,
#div-2c,
#div-Pc {
  clear: both;
  width: 100%;
}

@media (max-width: 768px) {
  #div-1a,
  #div-1b,
  #div-2a,
  #div-2b,
  #div-Pa,
  #div-Pb {
    float: none;
    width: 100%;
  }
}

/* =========================
   Typography and spacing
========================= */

h1,
h2,
h3 {
  margin-bottom: 0.5rem;
}

p,
ul,
ol,
.formRow,
.actions,
.Grid {
  margin-bottom: 1rem;
}

ul,
ol {
  padding-left: 1.5rem;
}

.required-indicator {
  color: #000;
  font-weight: 700;
}

/* =========================
   Form layout
========================= */

.formRow label {
  display: inline-block;
  margin-right: 0.5rem;
  font-weight: 600;
}

.actions {
  margin-top: 1rem;
}

  .actions > * {
    margin-right: 0.75rem;
  }

/* =========================
   Accessibility utilities
========================= */

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================
   Standard tables
========================= */

.sofT th.helpHed,
.sofT th.sup,
.sofT td {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.sofT th.helpHed,
.sofT th.sup {
  background-color: #c9d9ee;
  color: #333;
  font-weight: 700;
  text-align: left;
  padding: 4px 6px;
  border: 1px solid #7fa7d8;
}

.sofT td {
  padding: 4px 6px;
  border: 1px solid #7fa7d8;
  vertical-align: top;
}

/* =========================
   Grid/table readability
========================= */

.Grid {
  margin-top: 1rem;
}

  .Grid th,
  .Grid td {
    padding: 6px 10px;
    vertical-align: top;
  }

/* =========================
   Institution details
========================= */

.institutionDetails h2 {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.detailList {
  margin: 0 0 1rem 0;
}

  .detailList dt {
    margin-top: 0.5rem;
    font-weight: 700;
  }

  .detailList dd {
    margin: 0 0 0.75rem 0;
  }

/* =========================
   Members
========================= */

.memberList {
  margin-bottom: 1rem;
}

.memberCard {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid #7fa7d8;
}

.memberName {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

/* =========================
   Section banner
========================= */

.sectionBanner {
  margin: 1rem 0;
  padding: 0.5rem;
  background-color: #1f4e79;
  color: #fff;
  font-weight: 700;
}

/* =========================
   Modal
========================= */

.modalPanel {
  max-width: 30rem;
  padding: 1rem;
  background: #fff;
  border: 2px solid #293e8e;
}

/* =========================
   Institution options
========================= */

.institutionOption {
  margin-bottom: 0.5rem;
}

  .institutionOption input[type="checkbox"] {
    margin-right: 0.5rem;
  }

/* =========================
   Course fieldset/options
========================= */

.courseFieldset {
  margin: 0 0 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid #b5b5b5;
}

  .courseFieldset legend {
    padding: 0 0.25rem;
    color: #000;
    font-weight: 700;
  }

.courseOptions {
  margin: 0.5rem 0 0 0;
}

  .courseOptions input[type="radio"],
  .courseOptions input[type="checkbox"] {
    margin-right: 0.5rem;
  }

  .courseOptions label {
    display: inline;
    color: #000;
    font-weight: 400;
  }

.courseOption {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

  .courseOption input[type="radio"],
  .courseOption input[type="checkbox"] {
    margin-top: 0.2rem;
  }

  .courseOption label {
    line-height: 1.4;
  }

/* =========================
   Worksheet table
========================= */

.worksheetTable {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
}

  .worksheetTable th,
  .worksheetTable td {
    padding: 0.5rem;
    border: 1px solid #666;
    text-align: left;
    vertical-align: top;
  }

  .worksheetTable thead th {
    background-color: #d9d9d9;
    color: #000;
  }

  .worksheetTable caption {
    margin-bottom: 0.5rem;
    text-align: left;
    font-weight: 700;
  }

/* =========================
   Status text
========================= */

.statusComplete,
.statusIncomplete {
  color: #000;
  font-weight: 700;
}

.statusNeutral {
  color: #000;
}

/* =========================
   Miscellaneous
========================= */

.backToTop {
  text-align: right;
}

/* =========================
   Buttons
========================= */

.button,
.button-secondary {
  display: inline-block;
  min-height: 44px;
  padding: 0.6em 1.2em;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
}

.button {
  background-color: #005ea2;
  color: #fff;
  border: 2px solid #005ea2;
}

  .button:hover {
    background-color: #004080;
    border-color: #004080;
  }

  .button:active {
    background-color: #002f5b;
    border-color: #002f5b;
  }

.button-secondary {
  background-color: #fff;
  color: #005ea2;
  border: 2px solid #005ea2;
}

  .button-secondary:hover {
    background-color: #e6f0f8;
  }

  .button:focus,
  .button:focus-visible,
  .button-secondary:focus,
  .button-secondary:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
  }

  .button:disabled,
  .button[aria-disabled="true"],
  .button.is-disabled,
  .button-secondary:disabled,
  .button-secondary[aria-disabled="true"],
  .button-secondary.is-disabled {
    background-color: #ccc;
    color: #666;
    border-color: #999;
    cursor: not-allowed;
  }