:root {
  --darkBlue: rgb(20,56,127);
  --red: rgb(231,51,49);
  --lightBlue: rgb(99,195,209);
  --pink: rgb(240,133,144);
  --brown: rgb(200,174,106);
  --lightGreen: rgb(174,204,83);
  --darkGreen: rgb(69,179,132);
  --yellow: rgb(255,206,68);
  --lightGrey: rgb(178,178,178);
  --darkGrey: rgb(135,135,135);
  --orange: rgb(243,149,63);
  --purple: rgb(187,124,179);
}

body{
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
}

.chmi-text {
  font-family: 'Campton Book';
  font-weight: 300;
}
.chmi-text a {
  --tw-text-opacity: 1;
  color: rgb(99 195 209 / var(--tw-text-opacity));
  text-decoration-line: underline;
}
.chmi-text-perex {
  font-size: 16px;
  line-height: 22px;
  --tw-text-opacity: 1;
  color: var(--darkBlue);
}
.chmi-title {
  display: none;
}
.chmi-subtitle {
  display: none;
}
.chmi-p-l {
  padding-left: 0rem;
}
.chmi-p-r {
  padding-right: 0rem;
}
@media (min-width: 768px) {
  .chmi-p-l {
      padding-left: 4rem;
  } 
  .chmi-p-r {
      padding-right: 4rem;
  }
  .chmi-text-perex {
      font-size: 16px;
      line-height: 26px;
  }
  .chmi-subtitle {
      display: block;
  }
  .chmi-text-bold {
      font-family: 'Campton Bold';
      font-weight: 700;
  }
  .chmi-border-l {
      border-left: 1px solid #e5e7eb;
  }
}
@media (min-width: 1280px) {
  .chmi-text-perex {
      font-size: 20px;
      line-height: 30px;
  }
  .chmi-title {
      display: block;
  }
}
.chmi-flex {
  display: flex;
}
.chmi-flex-col {
  flex-direction: column;
}
.chmi-items-center {
  align-items: center;
}
.chmi-max-h-full {
  max-height: 100%;
}
.chmi-pl-8 {
  padding-left: 2rem;
}
.chmi-pr-8 {
  padding-right: 2rem;
}
.chmi-text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.chmi-py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.chmi-h-32 {
  height: 8rem;
}
.bg-chmi-blue {
  --tw-bg-opacity: 1;
  background-color: var(--darkBlue);
}
.chmi-justify-start {
  justify-content: flex-start;
}
.chmi-w-full {
  width: 100%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

.chmu-h {
  font-family: 'Campton Book';
  font-weight: 700;
  --tw-text-opacity: 1;
  color: var(--darkBlue);
}

.chmu-h1 {
  color: var(--darkBlue);
  font-size: 26px;
  line-height: 33px;
  font-weight: 500;
  margin-bottom: 7px;
  margin-top: 12px;
  text-align: center;
}

.chmu-h2 {
  font-size: 23px;
  color: var(--lightBlue);
  line-height: 28px;
  font-weight: 500;
  margin-bottom: 6px;
  margin-top: 12px;
}

.chmu-h3 {
  font-size: 21px;
  color: var(--lightBlue);
  line-height: 25px;
  font-weight: 500;
  margin-bottom: 5px;
  margin-top: 10px;
}

.chmu-h4 {
  font-size: 19px;
  color: var(--lightBlue);
  line-height: 22px;
  font-weight: 500;
  margin-bottom: 4px;
  margin-top: 8px;
}

.chmu-h5 {
  font-size: 17px;
  color: var(--lightBlue);
  line-height: 22px;
  font-weight: 500;
  margin-bottom: 4px;
  margin-top: 8px;
}

.chmu-h6 {
  font-size: 16px;
  color: var(--lightBlue);
  line-height: 18px;
  margin-bottom: 4px;
  margin-top: 8px;
}

.chmu-text a {
  --tw-text-opacity: 1;
  color: var(--lightBlue);
  text-decoration-line: underline;
}

p, .text{
  font-size: 16px;
  line-height: 22px;
  padding-top:5px;
  padding-bottom: 5px;
}

@media (min-width: 768px) {
  .chmu-h1 {
    color: var(--darkBlue);
    font-size: 35px;
    line-height: 40px;
    font-weight: 500;
    margin-bottom: 10px;
    margin-top: 15px;
    text-align: center;
  }
  
  .chmu-h2 {
    font-size: 31px;
    color: var(--lightBlue);
    line-height: 35px;
    font-weight: 500;
    margin-bottom: 8px;
    margin-top: 13px;
  }
  
  .chmu-h3 {
    font-size: 28px;
    color: var(--lightBlue);
    line-height: 30px;
    font-weight: 500;
    margin-bottom: 5px;
    margin-top: 10px;
  }
  
  .chmu-h4 {
    font-size: 25px;
    color: var(--lightBlue);
    line-height: 29px;
    font-weight: 500;
    margin-bottom: 4px;
    margin-top: 8px;
  }
  
  .chmu-h5 {
    font-size: 23px;
    color: var(--lightBlue);
    line-height: 25px;
    font-weight: 500;
    margin-bottom: 4px;
    margin-top: 8px;
  }
  
  .chmu-h6 {
    font-size: 20px;
    color: var(--lightBlue);
    line-height: 22px;
    margin-bottom: 4px;
    margin-top: 8px;
  }
  p, .text{
    font-size: 20px;
    line-height: 24px;
  }
}

@media (min-width: 1280px) {
  p, .text{
    font-size: 22px;
    line-height: 26px;
  }
  .chmu-h1 {
    font-size: 52px;
    line-height: 62px;
    font-weight: 700;
    color: var(--darkBlue);
    margin-bottom: 10px;
    margin-top: 18px;
  }

  .chmu-h2 {
    font-size: 40px;
    color: var(--lightBlue);
    line-height: 43px;
    font-weight: 500;
    margin-bottom: 9px;
    margin-top: 15px;
  }
  
  .chmu-h3 {
    font-size: 35px;
    color: var(--lightBlue);
    line-height: 40px;
    font-weight: 500;
    margin-bottom: 6px;
    margin-top: 12px;
  }
  
  .chmu-h4 {
    font-size: 31px;
    color: var(--lightBlue);
    line-height: 35px;
    font-weight: 500;
    margin-bottom: 6px;
    margin-top: 12px;
  }
  
  .chmu-h5 {
    font-size: 25px;
    color: var(--lightBlue);
    line-height: 28px;
    font-weight: 500;
    margin-bottom: 5px;
    margin-top: 10px;
  }
  
  .chmu-h6 {
    font-size: 23px;
    color: var(--lightBlue);
    font-weight: 500;
    line-height: 25px;
    margin-bottom: 5px;
    margin-top: 10px;
  }
}

.socialIcon{
  color: var(--lightBlue);
  font-size: 3em;
  padding-left: 3px;
  padding-right: 3px;
  cursor: pointer;
}
.socialIcon:hover{
  color: var(--pink);
}
#logo{
  cursor: pointer;
}
@media (max-width: 767px) {
  #logo{
      width:120px;
  }
}

.appIcon{
  width: 150px;
  padding: 5px;
  cursor: pointer;
  opacity: 0.8;
}

.appIcon:hover{
  opacity: 1;
}

.footerWidget{
  padding-top: 10px;
  padding-bottom: 10px;
  display: table;
}

.sort{
  opacity: 0.7;
  cursor: pointer;
  font-weight: bold;
}
.sort:hover{
  opacity: 1;
}

#wrapper{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.mainWrapper{
  width: 95%;
  margin: 0 auto;
  padding-top: 15px;
  padding-bottom: 20px;
  margin-bottom: 30px;
}
#footer{
  background: var(--darkBlue);
  background: linear-gradient(rgba(20,56,127,0.6), rgba(20,56,127,0.7)), url("../images/bg.jpg");
  background-position: 50% 0px;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: auto;
  width: 100%;
}
#footerContent{
  padding: 10px;
  color: white;
  text-align: center;
  font-family: 'Campton Book';
}

.designTable thead tr{
  text-align: center;
  background: var(--darkBlue);
  color: white;
}

/* fix for tables missing thead tag */
.designTable th{
  background: var(--darkBlue);
  color: white;
}

.designTable th, td{
  padding: 5px;
}

.designTable td{
  text-align: center;
}

.designTableZebra tbody tr:nth-child(even){
  background: rgb(240,240,240);
}

.designTableZebra tbody tr:nth-child(odd){
  background: rgb(225,225,225);
}

.designTableBorders tbody td{
  border: 1px solid var(--darkBlue);
}

.designTableBorders thead th{
  border: 1px solid white;
}

.designTableBorders{
  border: 2px solid var(--darkBlue);
}

table.tablesorter tbody tr.normal-row td {
  background: rgb(240,240,240);
  color: #000;
}
table.tablesorter tbody tr.alt-row td {
  background: rgb(225,225,225);
  color: #000;
}

.tableWrapper{
  width: 100%;
  overflow-x: auto;
  /*margin-right: calc(-.5* var(--bs-gutter-x));*/
  /*margin-left: calc(-.5* var(--bs-gutter-x));*/
}

.filterHeading{
  font-size: 0.9em;
  color: var(--darkBlue);
  font-weight: 700;
}

/* CUSTOM */

@font-face {
  font-family: 'Campton Book';
  src: url('../fonts/campton-book.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Campton Bold';
  src: url('../fonts/campton-bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  font-family: 'Campton Book', sans-serif;
}

a{
  text-decoration: none;
}

a:link {
  color: var(--red);
}

a:visited {
  color: rgb(99,195,209);
}

a:hover {
  color: var(--red)
}

a:active {
  color: rgb(99,195,209);
}

.hrWrapper{
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.designHR{
  height: 0.12rem;
  width: 50%;
  margin-bottom: 2rem;
  margin-top: 2rem;
  border-radius: 0.25rem;
  border-width: 0;
  background-color: var(--darkBlue);
  opacity: 0.5;
}

.designHRicon{
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0px);
  background-color: white;
  padding-left: 1rem;
  padding-right: 1rem;
}

.designHRSVG{
  color: var(--darkBlue);
  width: 2rem;
  height: 2rem;
  filter: invert(16%) sepia(47%) saturate(3243%) hue-rotate(208deg) brightness(93%) contrast(94%);
  opacity: 0.5;
}

.imageLightBox{
  border: 2px solid var(--darkBlue);
  border-radius: 7px;
  opacity: 0.8;
  cursor: pointer;
}

.imageLightBox:hover{
  opacity: 1;
}

.btn-darkBlue, .btn-darkBlue:hover{
  background: var(--darkBlue);
  color: white;
}

.btn-lightBlue, .btn-lightBlue:hover{
  background: var(--lightBlue);
  color: black;
}

.btn-pink, .btn-pink:hover{
  background: var(--pink);
  color: black;
}

.btn-darkGreen, .btn-darkGreen:hover{
  background: var(--darkGreen);
  color: white;
}

.btn-lightGreen, .btn-lightGreen:hover{
  background: var(--lightGreen);
  color: black;
}

.btn-red, .btn-red:hover{
  background: var(--red);
  color: white;
}

.btn-purple, .btn-purple:hover{
  background: var(--purple);
  color: white;
}

.btn-yellow, .btn-yellow:hover{
  background: var(--yellow);
  color: black;
}

.btn-darkGrey, .btn-darkGrey:hover{
  background: var(--darkGrey);
  color: white;
}

.btn-lightGrey, .btn-lightGrey:hover{
  background: var(--lightGrey);
  color: black;
}

.btn-orange, .btn-orange:hover{
  background: var(--orange);
  color: black;
}

.btn-brown, .btn-brown:hover{
  background: var(--brown);
  color: black;
}

.hover{
  opacity: 0.8;
  cursor: pointer;
}

.hover:hover{
  opacity: 1;
}

.accordion-button{
  background: rgba(20,56,127,0.8);
  color: white;
}

.accordion-button:after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}

.accordion-button:not(.collapsed) {
  background: var(--darkBlue);
  color: white;
}

.accordion-button:focus{
  border: 0px solid black;
  box-shadow: 0 0 0 0 rgb(0, 0, 0);
}

#logoSVGleft, #logoSVGmiddle, #logoSVGright {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

#logoSVGleft {
  animation: drawLogo 3.5s linear forwards infinite;
  animation-delay: 0s;
}

#logoSVGmiddle {
  animation: drawLogo 3.5s linear forwards infinite;
  animation-delay: 0.25s;
}

#logoSVGright {
  animation: drawLogo 3.5s linear forwards infinite;
  animation-delay: 0.5s;
}

@keyframes drawLogo {
  0% {
      stroke-dashoffset: 1000;
  }
  33% {
      stroke-dashoffset: 0;
  }
  66% {
      stroke-dashoffset: 1000;
  }
  100% {
      stroke-dashoffset: 1000;
  }
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: white;
  background-color: var(--darkBlue);
  border-color: var(--lightBlue);
}
.nav-tabs .nav-link{
  border-color: rgba(20,56,127,0.3);
}
.nav-tabs .nav-link:hover{
  border-color: rgba(20,56,127,0.5);
  color: var(--lightBlue);
}
.nav-link{
  color: black;
}

.modal-header{
  background: var(--darkBlue);
  color: white;
  font-weight: 700;
}
.modal-header .btn-close{
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

.center{
  text-align: center;
}

.left{
  text-align: left;
}

.right{
  text-align: right;
}

.justify{
  text-align: justify;
}

.fullWidth{
  width: 100%;
}

.alignMiddle{
  margin: 0 auto;
}

.footnote p{
  font-size: 90%;
}

.form-select{
  width: auto;
  max-width: 100%;
  border-bottom: 3px solid var(--darkBlue);
  box-shadow: 0 0 0 0 rgb(0, 0, 0);
}

.form-select:focus{
  border-color: 1px solid var(--darkBlue);
}

input{
  box-shadow: none!important;
}

.contentItem{
  color: var(--pink);
  cursor: pointer;
  font-size: 1.3em;
}

.contentItem:hover{
  color: var(--red);
}