/* put forms CSS before Base in the html head so link colors work */

/*:root {
  16px=1rem, 15px=.9375, 14px=.875, 12px=.75, 11px=.6875;
  font-size: clamp(16px, calc(1rem + ((1vw - 3.6px) * .2299)), 24px); 
  font-size: clamp(1rem, calc(1rem + ((1vw - 8px) * .5)), 1.5rem); 
}*/


/*****************/
/*   CSS RESET   */
/*****************/

*, *::before, *::after {
  box-sizing: border-box;
}

html:focus-within {
  scroll-behavior: smooth;
}

body, h1, h2, h3, h4, h5, h6, hr, p, figure, form, blockquote, dl, dt, dd, table {
  margin: 0;
}

body {
  font-weight: normal;
  letter-spacing: normal;
  padding: 0;
  position: relative;
  text-align: left;
  text-rendering: optimizeSpeed;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  font-family: inherit;
  line-height: inherit;
  overflow: hidden;
}

h1 {
  font-size: 1.4rem;
}

h2 {
  font-size: 1.2rem;
}

h3 {
  font-size: 1.05rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: .95rem;
}

h6 {
  font-size: .9rem;
}


p {
  margin: .75rem 0;
  padding: 0;
  overflow-wrap: break-word;
}

input, button, textarea, select {
  font: inherit;
}

img, picture, video, canvas, svg {
  max-width: 100%;
  display: block;
}

table {
  border: none;
  border-spacing: 0;
  border-collapse: collapse;
}

th {
  text-align: center;
}

th, td {
  overflow: hidden;
  vertical-align: middle;
}

ul[role='list'], ol[role='list'] {
  list-style: none;
}

dl {
  margin-block: .3rem 0;
  overflow: hidden;
}

dt {
  margin-top: .5rem;
  padding: .5rem 0 0 0;
  font-weight: bold;
}

dd {
  padding: .2rem 2%;
}

code {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: #008000;
  font-size: 110%;
}

samp {
  font-family: 'Courier New', monospace;
  font-size: 110%;
  background-color: black;
  color: #00ff00;
  display: block;
  padding: .75rem;
  margin-block: .5rem .5rem;
  overflow-wrap: anywhere;
  border: inset 2px #c0c0c0;
}


/****************/
/*   ELEMENTS   */
/****************/

body {
  font-family: 'Segoe UI',Arial,Helvetica,Verdana,sans-serif;
  background-color: var(--site-body-bcol);
  color: var(--site-body-fcol);
  font-size: 1rem;
  line-height: 1.6;
}


ul {
  margin: 0 .5rem;
  padding: .3rem 0 .3rem .75rem;
  list-style-type: disc;
  list-style-position: outside;
  text-indent: 0;
  overflow: hidden;
}

li {
  margin: 0 0 .2rem .25rem;
  padding: .2rem .25rem;
}

.licustom li {
  list-style: none;
  /*hanging indent*/
}

  .licustom li:before {
    margin-left: -2.0rem;
    margin-right: .7rem;
  }

ol {
  margin: 0 .5rem;
  padding: .3rem 0 .3rem .75rem;
  list-style-type: decimal;
  list-style-position: outside;
  text-indent: 0;
  overflow: hidden;
}



/*************/
/*   LINKS   */
/*************/

a, a:visited {
  color: var(--page-link-fcol);
  text-decoration: none;
}

.flexlinks {
  margin: .5rem 0;
  padding: .75rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
}

  .flexlinks a {
    white-space: nowrap;
    padding: .5rem 1rem;
    background-color: var(--page-link-bcol);
    border: 1px solid var(--page-link-bdrcol);
    border-radius: 2px;
  }

  .flexlinks img {
    display: inline-block;
    margin: 0 .25rem 0 0;
    vertical-align: middle;
  }

.listlinks {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

  .listlinks li {
    margin: 0;
    padding: .3rem 0;
  }

  .listlinks a {
    padding: .3rem 1rem;
  }

.listlink a {
  margin-left: -.25rem;
  padding: .25rem .25rem;
}



/****************************/
/* SITE HEADER, FOOTER, NAV */
/****************************/

.mainMaxWidth {
  max-width: var(--site-max-width);
  margin-left: auto;
  margin-right: auto;
}


.site_main {
  background-color: var(--site-main-bcol);
  color: var(--site-main-fcol);
  overflow: auto;
}


.site_head {
  background-color: var(--site-head-bcol);
  color: var(--site-head-fcol);
  text-align: center;
}

  .site_head h1 {
    font-weight: normal;
  }

  .site_head div {
    text-align: center;
    font-size: 1.2rem;
    padding: .25rem;
  }

  .site_head a, .site_head a:visited {
    color: inherit;
  }

.site_banner {
  margin: 0 0 .25rem 0;
  display: block;
  width: 100%;
}


.site_foot {
  padding: 1rem .5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 2rem;
  row-gap: 1rem;
  font-size: .9rem;
  background-color: var(--site-foot-bcol);
  color: var(--site-foot-fcol);
}

  .site_foot a, .site_foot a:visited {
    color: inherit;
    padding: .5rem .75rem;
  }

    .site_foot a:hover {
      color: var(--page-link-hover-fcol);
      background-color: var(--page-link-hover-bcol);
    }



.site_nav {
  background-color: var(--site-nav-bcol);
  color: var(--site-nav-fcol);
  display: flex;
  flex-wrap: wrap;
  position: relative;
  font-size: 1.1rem;
}

  .site_nav .nav_dropactive {
    background-color: var(--site-nav-menuactive-bcol);
  }

  .site_nav a {
    color: inherit;
    text-align: center;
    padding: .5rem clamp(.1rem, calc(2vw), 2rem);
    margin: 0;
    font-size: 1.05rem;
  }

    .site_nav a:visited {
      color: inherit;
    }

    .site_nav a:hover {
      background-color: var(--site-nav-hover-bcol);
      color: var(--site-nav-hover-fcol);
    }



/*****************/
/* PAGE ELEMENTS */
/*****************/

.head_left {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1%;
  background-color: var(--page-hdr-bcol);
  color: var(--page-hdr-fcol);
}

  .head_left > *:first-child {
    flex-grow: 1;
  }

  .head_left h1 {
    font-size: 1.2rem;
  }

  .head_left a {
    font-size: .9rem;
    padding: .3rem .4rem;
    background-color: #f8f8f8;
  }


.pgFoot {
  padding: 1rem 2%;
  color: var(--page-ftr-fcol);
  background-color: var(--page-ftr-bcol);
  font-size: .9rem;
}

  .pgFoot h3 {
    font-weight: normal;
    margin: 0;
    padding: 0;
  }


section {
  margin: 0 0 1rem 0;
  padding: 1rem 2%;
}

  section:after {
    content: '';
    clear: both;
  }

article {
  margin: .5rem .5rem .5rem 0;
  padding: .5rem 0;
}


.sctnBorder {
  margin-top: .5rem;
  border-top: 1px solid #404040;
}

.sctnHeading {
  margin: 0 0 1rem 0;
  padding: 1rem 1%;
  background-color: var(--sctn-hdr-bcol);
  color: var(--sctn-hdr-fcol);
  text-align: center;
}

.sctnBox, .sctnDetails {
  margin: 1rem 1% 2rem 1%;
  border: 1px solid var(--sctn-details-bdrcol);
}

  .sctnBox > div, .sctnDetails > div {
    padding: .5rem 1%;
    background-color: var(--sctn-details-bcol);
    color: var(--sctn-hdr-fcol);
  }

  .sctnDetails > summary {
    cursor: pointer;
    padding: 1rem 1%;
    background-color: var(--sctn-hdr-bcol);
    color: var(--sctn-hdr-fcol);
    font-weight: bold;
    font-size: 1.25rem;
  }


  .sctnBox > h2 {
    padding: 1rem 1%;
    background-color: var(--sctn-hdr-bcol);
    color: var(--sctn-hdr-fcol);
    font-weight: bold;
  }

  .sctnBox > h3 {
    padding: .5rem 1%;
    background-color: var(--sctn-hdr-bcol);
    color: var(--sctn-hdr-fcol);
    font-weight: bold;
  }


.artclDetails {
  margin: 1rem 0 2rem 0;
  border: 1px solid var(--sctn-details-bdrcol);
}

  .artclDetails > div {
    padding: .5rem .5rem;
    background-color: var(--sctn-details-bcol);
    color: var(--sctn-hdr-fcol);
  }

  .artclDetails > summary {
    cursor: pointer;
    padding: .5rem 1%;
    background-color: var(--sctn-hdr-bcol);
    color: var(--sctn-hdr-fcol);
    font-weight: normal;
    font-size: 1.05rem;
  }

  .artclDetails h4, .sctnDetails h4 {
    font-weight: bold;
    font-size: 1.05rem;
    margin: .3rem .3rem .3rem 0;
    padding: 0;
  }


.sctnNotice {
  width: 90%;
  margin: 2rem auto;
  padding: .25rem 1rem;
  background-color: var(--sctn-notice-bcol);
  color: var(--sctn-notice-fcol);
  border: 5px solid var(--sctn-notice-bdrcol);
  border-radius: 5px;
}

  .sctnNotice h5 {
    font-size: 1.05rem;
    margin: .75rem 0;
  }


.box_innerbox {
  width: 96%;
  max-width: 36rem;
  margin: 0 auto;
}

.messagelinks {
  width: 90%;
  max-width: 36rem;
  margin: 1rem auto 1.5rem auto;
}

  .messagelinks a {
    display: block;
    margin: 1rem auto;
    padding: .25rem .5rem;
    background-color: var(--page-link-bcol);
    border: 1px solid var(--page-link-bdrcol);
    border-radius: 2px;
  }


.messagebox {
  width: 90%;
  max-width: 36rem;
  margin: 1rem auto 1.5rem auto;
  padding: .25rem .75rem;
  background-color: #333333;
  border-radius: 2px;
}

.boxlinks {
  margin: 1rem 0 .75rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}

  .boxlinks a {
    padding: .25rem .5rem;
    background-color: var(--page-link-bcol);
    border: 1px solid var(--page-link-bdrcol);
    border-radius: 2px;
  }


.tintWarning {
  background-color: #800000;
  color: #ffffff;
}

.tintGreen {
  background-color: #58b365;
  color: #ffffff;
}

.addtint {
  background-color: var(--page-addtint-bcol);
  border: solid 1px var(--page-addtint-bdrcol);
}

.boxtintCyan {
  background-color: #333333;
  border: 1px solid #60cdff;
}

.boxtintGreen {
  background-color: #393d1b;
  border: 1px solid #6ccb5f;
}

.boxtintPink {
  background-color: #442726;
  border: 1px solid #ff99a4;
}


.h2sec {
  color: var(--sctn-hdr-fcol);
  margin: 0;
  padding: 1.25rem .3rem .3rem 0;
}

.h3sec {
  color: var(--sctn-hdr-fcol);
  margin: .3rem .3rem .3rem 0;
  padding: 0;
}




/***************/
/*   DETAILS   */
/***************/

.form_details {
  margin: 0;
}

  .form_details > summary {
    cursor: pointer;
    padding: .2rem .6rem;
    background-color: var(--form-summary-bcol);
    color: #000000;
    font-weight: bold;
  }

  .form_details > div {
    padding: 1rem 1rem;
    background-color: var(--form-details-bcol);
    color: var(--form-details-fcol);
  }





/******************/
/*   CONTAINERS   */
/******************/

.ellips {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 20rem;
}

.mgnblock {
  margin-block: 1.5rem;
}

.mcenter {
  margin-inline: auto;
}

.hidden {
  display: none;
}

.lineblk {
  display: inline-block;
}

.w100 {
  width: 100%;
}


.maxw10r {
  max-width: 10rem;
}

.maxw15r {
  max-width: 15rem;
}

.maxw20r {
  max-width: 20rem;
}

.maxw24r {
  max-width: 24rem;
}

.maxw30r {
  max-width: 30rem;
}

.maxw35r {
  max-width: 35rem;
}

.maxw40r {
  max-width: 40rem;
}

.maxw45r {
  max-width: 45rem;
}

.maxw50r {
  max-width: 50rem;
}


.maxw45c {
  max-width: 45ch;
}

.maxw55c {
  max-width: 55ch;
}

.maxw65c {
  max-width: 65ch;
}

.maxw75c {
  max-width: 75ch;
}

.maxchild75ch > * {
  max-width: 75ch;
}

.w100app {
  width: 100%;
  max-width: 36rem;
}


.grid_auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.grid_5050 {
  display: grid;
  grid-template-columns: 50% 50%;
}

.grid_6040 {
  display: grid;
  grid-template-columns: 60% 40%;
}

@media (max-width: 600px) {
  .grid_5050, .grid_6040 {
    grid-template-columns: 100%;
  }
}

.grid_imgcard {
  gap: 2rem;
  padding: 2rem;
}

  .grid_imgcard .imgactive {
    color: var(--page-ftr-fcol);
    background-color: var(--page-ftr-bcol);
  }

  .grid_imgcard > * > div {
    padding: 1rem 1rem;
  }

  .grid_imgcard img {
    width: 100%;
    max-width: 36rem;
    margin-inline: auto;
  }


.grid_box > * {
  margin: 1rem 1rem;
}

.grid_card > * {
  margin: 1rem 1rem;
  padding: 1rem;
  border: solid 1px #808080;
  background-color: #f8f4ec;
  border-radius: 5px;
}

.flex_container {
  margin: .3rem 0;
  padding: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  gap: 2rem;
}

.flex_unpad {
  margin: unset;
  padding: unset;
}

.flex_gap0 {
  gap: 0;
}

.flex_gap1r {
  gap: 1rem;
}

.flex_column {
  flex-direction: column;
}

.flex_row {
  flex-direction: row;
}

.flex_jcenter {
  justify-content: center;
}

.flex_jaround {
  justify-content: space-around;
}

.flex_jevenly {
  justify-content: space-evenly;
}

.flex_jbetween {
  justify-content: space-between;
}

.flex_jstart {
  justify-content: flex-start;
}

.flex_grow1 {
  flex-grow: 1;
}

.flex_astart {
  align-items: flex-start;
}

.flex_acenter {
  align-items: center;
}

.flex_astretch {
  align-items: stretch;
}




/*   IMAGES   */

.pageImg300 {
  margin: 1rem auto;
  width: 90%;
  max-width: 300px;
}

.imageBlock {
  margin: 2rem auto;
  width: 80%;
  text-align: center;
}

  .imageBlock img {
    width: 100%;
    max-width: var(--site-max-width);
    margin-inline: auto;
  }

.imageLogo {
  float: right;
  width: clamp(10px, 20vw, 400px);
  margin: 0 .5rem .5rem .5rem;
}

.imgFloatRight {
  float: right;
  margin: .3rem 0 .3rem 2%;
  padding: 0;
  max-width: 120px;
}

.imgFeature {
  margin: 0 auto .5rem auto;
  padding: .5rem 0 0 0;
  width: 90%;
}

.imgFloatWide {
  float: right;
  margin: 1rem 0 1rem 1rem;
  width: 80%;
  max-width: 300px;
}

@media (max-width:500px) {
  .imgFloatWide {
    float: unset;
    margin: 1rem auto;
    width: 100%;
  }
}

.mapFlex60 {
  margin: 2rem auto;
  height: 60vh;
  border: solid 2px #808080;
}

  .mapFlex60 a {
    color: #0078A8 !important;
  }




/*   TABLES   */

td + .tdhideborderleft {
  border-left-width: 0 !important;
}

td + .tdhideborderright {
  border-right-width: 0 !important;
}

.layout_fixed {
  table-layout: fixed;
}



.gridfilter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: .5rem;
  gap: 1rem;
}

  .gridfilter .submit_search {
    background-color: transparent; /*#b0e8f0*/
    border: 1px dotted #8080ff;
  }

    .gridfilter .submit_search:hover {
      background-color: var(--page-link-hover-bcol);
    }

div:has(.gridtable) {
  overflow-x: auto;
}

.gridtable {
  margin: 1rem auto 1.5rem auto;
  background-color: #ffffff;
  color: #000000;
  padding: 0;
  border: solid 2px #d0d0d0;
}


  .gridtable th, .gridtable td {
    padding: .5rem .7rem;
    border: solid 1px #d0d0d0;
  }

  .gridtable th {
    background-color: var(--pages-grid-head-bcol);
    font-weight: inherit;
    white-space: nowrap;
  }

  .gridtable thead, .gridhead {
    background-color: var(--pages-grid-head-bcol);
    text-align: center;
  }


.gridaltrow tr:nth-child(2n+1) {
  background-color: #f0f0f0;
}

.gridpage tr {
  background-color: var(--pages-grid-page-bcol) !important;
  color: #303030;
  text-align: center;
}

.gridpage > td {
  padding: 0;
}

.gridfoot {
  background-color: var(--pages-grid-foot-bcol) !important;
  color: #303030;
  text-align: center;
}



.plaintbl th, .plaintbl td {
  padding: .4rem .6rem;
}

.plaintbl a, .tblData1 a, .gridtable a {
  display: block;
  margin: -5em;
  padding: 5em;
}

.cell5x2 th, .cell5x2 td {
  padding: .5rem .2rem;
}

.cell4x10 th, .cell4x10 td {
  padding: .4rem 1rem;
}

.cell5x15 th, .cell5x15 td {
  padding: .5rem 1.5rem;
}

.cell75x10 th, .cell75x10 td {
  padding: .75rem 1rem;
}



.tblData1 {
  margin: 1rem auto 1.5rem auto;
  border: 0 solid #d0d0c0;
}

  .tblData1 th, .sideth td:first-child {
    padding: .75rem .75rem;
    border: 1px solid #d0c8c0;
    background-color: var(--pages-tabl-head-bcol);
    color: #404040;
  }

  .tblData1 th {
    font-weight: normal;
  }

  .tblData1 td {
    padding: .7rem .7rem;
    border: 1px solid #d0c8c0;
    background-color: var(--pages-tabl-bcol);
    color: var(--pages-tabl-fcol);
  }

  .tblData1 img {
    vertical-align: middle;
    display: inline-block;
  }

  .tblData1 a, .tblData1 a:visited {
    color: #b00000;
  }

.tblPage1 {
  color: #303030;
  text-align: center;
}

  .tblPage1 td {
    background-color: var(--pages-tabl-head-bcol);
    border: none;
    border-right: 1px solid #d0c8c0;
  }

  .tblPage1 > td {
    padding: 0;
    border: 1px solid #d0c8c0;
  }


.tdCenter1 td:first-child {
  text-align: center;
}

.tdCenterAfter1 td:not(:first-child) {
  text-align: center;
}

.sideth td:first-child, .sideth th:first-child {
  text-align: left;
}

.tblaltrow tr:nth-child(2n+1) td {
  background-color: #f8f8f0;
}


.tblData1 .noborder {
  visibility: collapse;
  border: 0 !important;
}

.tblData1 .emptytbl td {
  border: none;
  background-color: transparent;
}

.rowgap > td {
  padding: .5rem 0;
  border: none !important;
  background-color: transparent !important;
}




/*   COLORS   */

.bkyelhilite {
  background-color: #ffff00 !important;
  color: #000000;
}

.bkred1 {
  background-color: #ff9999 !important;
}

.bkgrn1 {
  background-color: #99ff99;
}

.bkwhite {
  background-color: #ffffff;
}



/*   TEXT   */

.ftmono {
  font-family: 'Courier New', monospace;
}

.ftemo {
  font-family: 'Segoe UI Emoji';
}

.ftcursive {
  font-family: cursive;
}

.ft80 {
  font-size: .8rem;
}

.ft90 {
  font-size: .9rem;
}

.ft120 {
  font-size: 1.2rem;
  line-height: 120%;
}

.strikethru {
  text-decoration-line: line-through;
}

.uline {
  text-decoration-line: underline;
}

.italix {
  font-style: italic;
}

.bolde {
  font-weight: bold;
}

.clear {
  clear: both;
}

.nowrap {
  white-space: nowrap;
}

.hleft {
  text-align: left;
}

.hcenter {
  text-align: center;
}

.hright {
  text-align: right;
}

.emohdr {
  font-family: 'Segoe UI Emoji';
  font-size: 2rem;
  float: right;
  padding: .4rem 0 .4rem .4rem;
}






/************************************** FORMS **************************************/

textarea {
  vertical-align: top;
}

select, textarea, input, button, .textlabel {
  border: 2px solid var(--input-bdrcol);
  border-radius: 5px;
  padding: .4rem;
  margin: 0;
  background-color: var(--input-bcol);
  color: var(--input-fcol);
  font-size: inherit;
}

  input[type=range] {
    background-color: #eeeeee;
  }

  input[type=file]::file-selector-button {
    padding: .4rem .75rem;
    margin-right: 1rem;
    background-color: #b8f0c8;
    border: 2px solid var(--input-bdrcol);
    border-radius: 3px;
  }

  input[type=radio], input[type=checkbox] {
    margin: .5rem .5rem;
  }

    input[type=radio] + label, input[type=checkbox] + label {
      padding-left: .25rem;
      padding-right: .75rem;
    }

.checkdiv {
  padding: .25rem .25rem;
  border: 2px solid var(--input-bdrcol);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  background-color: #f8e4d8; /*#e8e2dc*/
  color: #000000;
  cursor: pointer;
}

  .checkdiv > * {
    cursor: pointer;
  }

  .checkdiv:has(input[type="checkbox"]:checked) {
    background-color: #90e090;
  }

  .checkdiv:hover {
    background-color: var(--input-hover-bcol);
    color: #000000;
  }

.inputdiv {
  padding: .2rem .4rem;
  border: 2px solid var(--input-bdrcol);
  border-radius: 5px;
  align-items: center;
}


input[type=button], input[type=submit], button {
  cursor: pointer;
}

input:focus, select:focus, textarea:focus {
  background-color: var(--input-focus);
}


input[type=text]:read-only, input[type=date]:read-only, input[type=datetime-local]:read-only, textarea:read-only, .readonly {
  background-color: #e0e0e0;
  color: #404040;
}

input[type=text]:disabled, input[type=date]:disabled, input[type=datetime-local]:disabled, textarea:disabled, .disabled {
  background-color: #d0d0d0;
  color: #404040;
}

input[type=button]:disabled, input[type=submit]:disabled, button:disabled {
  cursor: default;
  background-color: #d0d0d0;
  color: #808080;
}

input::placeholder {
  font-style: italic;
  opacity: 0.5;
}





/*   FORM SUBMIT   */

.form_submit {
  margin: 0;
  padding: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

  .form_submit a {
    display: inline-block;
    white-space: nowrap;
    padding: .5rem 1rem;
    background-color: var(--page-link-bcol);
    border: 1px solid var(--page-link-bdrcol);
    border-radius: 5px;
  }

.submit_ok, .submit_back, .submit_warning, .submit_process {
  padding: .5rem 1rem;
  border: 2px solid var(--input-bdrcol);
  border-radius: 5px;
}

/*.form_submit input[type=button] {
  padding: .5rem 1.5rem;
}*/

.submit_ok {
  background-color: #f0eae4;
  color: #b00000;
}

.submit_back {
  background-color: #d4c8bc;
  color: #000000;
}

.submit_warning {
  background-color: #ffc0c0;
}

.submit_process {
  background-color: #80ffff;
}




/*   BULLET MESSAGES   */

.inlineMessages {
  margin: 1rem auto;
  padding: 0 0;
  width: -moz-fit-content;
  width: fit-content;
}

  .inlineMessages li {
    display: inline-block;
    border: 1px solid #000000;
    margin-right: 1rem;
  }

.multilineMessages {
  margin: 1rem 0;
  padding: 0 0;
  list-style-position: inside;
}

  .multilineMessages li {
    border: 1px solid #000000;
  }


.msgulpass li {
  background-color: #ccffcc;
  color: #000000;
}

.msgulfail li {
  background-color: #ffcccc;
  color: #000000;
}



.hscroll {
  white-space: pre;
  overflow-x: auto;
}







/************************************** PAGES, HEADINGS **************************************/

/* containers */

.page_form, .form_sublist_wrapper {
  padding: 2rem 1rem;
  background-color: var(--page-form-bcol);
  color: var(--page-form-fcol);
}

  .page_form h2 {
    margin: .2rem .3rem 1rem 0;
    color: inherit;
  }

  .page_form h4 {
    font-weight: bold;
    font-size: 1rem;
    margin: .2rem .3rem .2rem 0;
  }

.page_print {
  background-color: #ffffff;
}

  .page_print h1 {
    font-weight: normal;
    text-align: center;
    font-size: 1.2rem;
    margin: 0;
    padding: 0 0 2rem 0;
  }


.page_gap {
  border-top: 1rem solid #404040;
}

.form_sublist_wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
}

  .form_sublist_wrapper > div {
    padding: 1rem;
    background-color: var(--form-frames-bcol);
    color: var(--form-frames-fcol);
    border: solid 1px var(--form-frames-bdrcol);
  }

.form_sublist_head {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}

  .form_sublist_head a {
    padding: .2rem .4rem;
    background-color: var(--page-link-bcol);
    border: 1px solid var(--page-link-bdrcol);
  }

  .form_sublist_head h4 {
    font-weight: normal;
    font-size: 110%;
    padding: .2rem .4rem;
  }




/*   FRAMES   */

.form_frames {
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
}

.form_details .form_frames {
  margin-bottom: 0;
}

.form_frames > div {
  padding: 1rem;
  background-color: var(--form-frames-bcol);
  color: var(--form-frames-fcol);
  border: solid 1px var(--form-frames-bdrcol);
}

.form_frames th, .form_frames td {
  padding: .6rem .7rem;
}

/*.form_frames a {
  padding: .2rem .4rem;
  border-radius: 5px;
}*/

/*   FRAME VALUES   */

.frame_singles {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 1rem;
}

  .frame_singles > .frame_singles {
    row-gap: .5rem;
  }

.frame_values {
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-rows: min-content;
  justify-content: start;
  align-items: center;
  gap: 1rem;
}

  .frame_values > h4 {
    grid-column: span 2;
  }

    .frame_values > h4:not(:first-child) {
      margin-top: 1rem;
    }

  .frame_values .span2 {
    grid-column: span 2;
  }





/*   POPUP OVERLAY   */

.popup_wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
  background: rgba(0,0,0,.5);
  color: #000000;
  z-index: 1000;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
}

  .popup_wrapper > div {
    position: relative;
    padding: 1rem;
    background-color: #e8e8e0;
    border: 1px solid #cccccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    z-index: 2001;
  }

.popup_close {
  position: absolute;
  top: 0;
  right: 0;
}

  .popup_close input[type=button] {
    font-size: 120%;
    padding: .5rem 1rem;
    background-color: transparent;
    border: 0 solid #400000;
  }

.popup_video {
  position: relative;
  max-width: 512px;
  padding: 1rem;
  text-align: center;
  color: #ffffff;
  background-color: #484038;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

  .popup_video video {
    border-radius: 5px;
  }

.popup_wrapper h4 {
  font-size: 1.05rem;
  font-weight: bold;
  padding: 0 0 1rem 0;
  text-align: center;
}

.popup_wrapper label {
  display: block;
  font-weight: bold;
  padding: 0;
  margin: 1rem 0 .5rem 0;
}

.popup_values {
  padding: 1rem 0;
  display: grid;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  grid-template-columns: auto auto;
}




/*   FINAL LINK STYLES   */

a:hover {
  color: var(--page-link-hover-fcol);
  background-color: var(--page-link-hover-bcol);
}