table {
  border-collapse: collapse;
}

table th,
table td {
  padding: 0.25em;
  border: 1px solid #CED1D3;
}

table th {
  text-align: left;
  background-color: #E9EAEB;
}

table:has(th[scope=row]) th[scope=col] {
  background-color: #DBDEDF;
}

table.stripes tr:nth-child(odd) > td {
  background-color: #f6f7f7;
}

table td > ul {
  margin-top: 0px;
  margin-bottom: 0px;
}

table.chf_blue th,
table.chf_blue td {
  border-color: #a9c4de;
}

table.chf_blue th {
  background-color: #d1dde9;
}

table.chf_blue:has(th[scope=row]) th[scope=col] {
  background-color: #bed1e3;
}

table.chf_blue.stripes tr:nth-child(odd) > td {
  background-color: #e4eaf0;
}

table.chf_orange th,
table.chf_orange td {
  border-color: #F8CC7B;
  transition: background-color 0.1s ease-in-out;
}

table.chf_orange th {
  background-color: #FDF1DC;
}

table.chf_orange:has(th[scope=row]) th[scope=col] {
  background-color: #FCE8C4;
}

table.chf_orange.stripes tr:nth-child(odd) > td {
  background-color: #f7f3ea;
  transition: background-color 0.1s ease-in-out;
}

table tr > th[scope=col] {
  border-block-start-width: 0.25em;
}

table tr > th[scope=row] {
  border-inline-start-width: 0.25em;
}

table tr:has(~ tr > th[scope=row]) > th[scope=col]:first-of-type {
  border-block-start-width: 0.25em;
  border-inline-start-width: 0.25em;
}

table.chf_blue.highlight.row tr:hover > th:not([scope=col]),
table.chf_blue.highlight.row tr:hover > td {
  background-color: #f7f3ea;
  transition: background-color 0.1s ease-in-out;
}

table.chf_blue.highlight.col tr:hover > th:not([scope=row]),
table.chf_blue.highlight.col tr:hover > td {
  background-color: #f7f3ea;
  transition: background-color 0.1s ease-in-out;
}

table.chf_orange.highlight.row tr:hover > th:not([scope=col]),
table.chf_orange.highlight.row tr:hover > td {
  background-color: #d1dde9;
  transition: background-color 0.1s ease-in-out;
}

table.chf_orange.highlight.col tr:hover > th:not([scope=row]),
table.chf_orange.highlight.col tr:hover > td {
  background-color: #d1dde9;
  transition: background-color 0.1s ease-in-out;
}

ol > li {
  margin-top: 0.25em;
}

ol.discs {
  counter-reset: item;
  list-style: none;
  padding-left: 3em;
}

ol.discs > li:before {
  counter-increment: item;
  margin-right: 5px;
  margin-left: -4.5ch;
  padding: 2px 5px 2px 5px;
  content: counter(item);
  border-radius: 1em;
  width: 1.2em;
  font-size: 1em;
  line-height: 1em;
  text-align: center;
  display: inline-block;
}

ol[type=a].discs > li:before {
  counter-increment: item;
  content: counter(item, lower-alpha);
}

ol.discs.chf_blue > li:before {
  background-color: #bed1e3;
  color: #231F20;
}

ol.discs.chf_orange > li:before {
  background-color: #F5B335;
  color: #231F20;
}

.masthead.image.centered {
  display: grid;
  place-items: center;
  background-color: #E9EAEB;
}

.masthead.image.centered > img {
  display: block;
  max-width: 50%;
  max-height: 25rem;
  object-fit: contain;
  object-position: center center;
}

@media only screen and (max-width: 512px) {
  .masthead.image.centered > img {
    max-width: 75%;
  }
}
.grid_columns {
  display: grid;
  gap: 2rem;
}

.grid_columns.two {
  grid-template-columns: 1fr 1fr;
}

.grid_columns > ul {
  margin-top: 0px;
  margin-bottom: 0px;
}

.grid_columns > ul > li:last-of-type {
  margin-bottom: 0px;
}

@media only screen and (max-width: 512px) {
  .grid_columns.collapse {
    grid-template-columns: 1fr;
  }
}
.light_box {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 200px));
  gap: 2rem;
  margin: 0px;
  padding: 0px;
}

.light_box > li > a:any-link {
  display: grid;
  place-items: start center;
  height: 100%;
  width: 100%;
  background: linear-gradient(-30deg, #EFEFEF, #FEFEFE);
  border: 1px solid #E89B0C;
  text-decoration: none;
  transition: background 0.2s ease-in-out;
  cursor: zoom-in;
}

.light_box > li > a > img {
  display: block;
  width: calc(100% - 1rem);
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center center;
  margin: 0.5rem;
  border: 1px solid #E89B0C;
}

.light_box > li.video > a > img {
  aspect-ratio: 16/9;
}

.light_box > li.video > a:has(.text) > img {
  margin-bottom: 0px;
}

.light_box > li > a .text,
.light_box > li > a .length {
  display: block;
  width: 100%;
  line-height: 1.2em;
  padding: 0.25em;
}

.light_box > li > a .text {
  text-align: left;
}

.light_box > li > a .length {
  text-align: right;
  font-size: 0.9rem;
}

.light_box > li > a:hover {
  background: #F9D694;
  transition: background 0.2s ease-in-out;
}

.light_box > li > a:active {
  background: #F5B335;
  transition: background 0.2s ease-in-out;
}

@media only screen and (max-width: 512px) {
  .light_box {
    grid-template-columns: 1fr 1fr;
  }
}
.masthead.image.full {
  display: block;
  width: 100%;
  min-height: 10rem;
  margin-bottom: 2rem;
  padding-top: 9rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  box-shadow: 0px 0px 0.25rem #777777;
}

.masthead.image.full > h1 {
  display: inline-grid;
  grid-template-columns: 2em auto;
  place-items: center start;
  margin: 0rem 0rem 0.5rem 0rem;
  background-color: #F8CC7B;
  font-size: 1.8rem;
}

@media only screen and (max-width: 512px) {
  .masthead.image.full > h1 {
    font-size: 1.4rem;
  }
}
.masthead.image.full > h1 > .bug {
  display: block;
  height: 100%;
  width: 100%;
  aspect-ratio: 1/1;
  background: url(/images/logos/chf/chf_icon_001_multi.png), #FFFFFF;
  background-repeat: no-repeat, no-repeat;
  background-size: 70% auto, contain;
  background-position: center center, center center;
}

.masthead.image.full > h1 > .text {
  padding: 0.25em 0.25em 0.25em 0.5em;
}

.masthead.image.full.title_top {
  padding-top: unset;
  padding-bottom: 9rem;
}

.masthead.image.full.title_top > h1 {
  margin-top: 0.5rem;
}