@charset "utf-8";
/* CSS Document - defaults.css */

/* Bootstrap spacing classes in included dist have been modified:

   {property}{sides}-{size}
   {property}{sides}-{breakpoint}-{size}
   
   Where size is one of:

   0 - (default) for classes that eliminate the margin or padding by setting it to 0
   1 - (default) for classes that set the margin or padding to $spacer * .25
   2 - (default) for classes that set the margin or padding to $spacer * .5
   3 - (default) for classes that set the margin or padding to $spacer
   4 - (default) for classes that set the margin or padding to $spacer * 1.5
   5 - for classes that set the margin or padding to $spacer * 2
   6 - for classes that set the margin or padding to $spacer * 3
   7 - for classes that set the margin or padding to $spacer * 4
   
   $spacer is 1rem by default
*/

/* ------------------- defaults ------------------- */
:root {
  --tsy-navy: #2c384a;
  --tsy-green: #4d7861;
  --tsy-mid-blue: #5d779d;
  --tsy-lime: #b1f0cf;
  --tsy-light-blue: #90b6f0;
  --tsy-orange: #f0ae81;
  
  --tsy-mid-blue-dark-tint: #d3dcea;
  --tsy-mid-blue-light-tint: #e8effa;
  --tsy-lime-tint: #e8fbf1;
  --tsy-light-blue-tint: #e0eaff;
  --tsy-lighter-blue-tint: #f4f7fd;
  --tsy-orange-tint: #fcefe6;
  --tsy-black-blue: #1c2632;
  
  --ui-almost-black: #333;
  --ui-dark-grey: #666;
  --ui-grey: #c4c4c4;
  --ui-light-grey: #eee;
  --ui-lightest-grey: #f7f8fa;
  
  --a-rainbow-of-blue-1: #414d5d;
  --a-rainbow-of-blue-2: #d9e5fb;
  --a-rainbow-of-blue-3: #e3edfb;
  --a-rainbow-of-blue-4: #eef4fd;
  
  --vertical-spacing: 2.25rem;
  --last-element-margin-bottom: 0;
  --text-underline-offset: 0.25rem;
  /*--header-height: 114px; /* only use if fixed or sticky header implemented - base this value on actual measured header height */
  --grid-gap: 20px;
  --item-padding: var(--vertical-spacing);
  --item-border-radius: 0;
  --item-heading-size: calc(1.275rem + 0.36cqw); /* cqw container width units - based on h4 heading RFS size */
 
  /*--fa-style-family: "Font Awesome 6 Pro";*/
  --fa-style-family: "Font Awesome 6 Sharp";
  /*--fa-style: 900; /* solid */
  --fa-style: 400; /* regular */
  /*--fa-style: 300; /* light */
  /*--fa-style: 900; /* thin */
  /* if used, ensure matching sharp family is imported in all HTML files - FA sharp styles are NOT included in all.css or all.min.css */
    
  accent-color: var(--tsy-mid-blue); /* applies to some browser input and progress elements */
}

div > p:last-child,
div > ol:last-child,
div > ul:last-child,
div > dl:last-child {
    margin-bottom: var(--last-element-margin-bottom, 1rem);
}

.img-cover {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

a .fa::before {
    display: inline-block;
}

/* ------------------- vertical spacing utility classes ------------------- */
.py-vs-05 {
  padding-top: calc(0.5 * var(--vertical-spacing));
  padding-bottom: calc(0.5 * var(--vertical-spacing));
}
.py-vs-1 {
  padding-top: var(--vertical-spacing);
  padding-bottom: var(--vertical-spacing);
}
.py-vs-2 {
  padding-top: calc(2 * var(--vertical-spacing));
  padding-bottom: calc(2 * var(--vertical-spacing));
}
.pt-vs-05 {
  padding-top: calc(0.5 * var(--vertical-spacing));
}
.pt-vs-1 {
  padding-top: var(--vertical-spacing);
}
.pt-vs-2 {
  padding-top: calc(2 * var(--vertical-spacing));
}
.pb-vs-05 {
  padding-bottom: calc(0.5 * var(--vertical-spacing));
}
.pb-vs-1 {
  padding-bottom: var(--vertical-spacing);
}
.pb-vs-2 {
  padding-bottom: calc(2 * var(--vertical-spacing));
}
.my-vs-05 {
  margin-top: calc(0.5 * var(--vertical-spacing));
  margin-bottom: calc(0.5 * var(--vertical-spacing));
}
.my-vs-1 {
  margin-top: var(--vertical-spacing);
  margin-bottom: var(--vertical-spacing);
}
.my-vs-2 {
  margin-top: calc(2 * var(--vertical-spacing));
  margin-bottom: calc(2 * var(--vertical-spacing));
}
.mt-vs-05 {
  margin-top: calc(0.5 * var(--vertical-spacing));
}
.mt-vs-1 {
  margin-top: var(--vertical-spacing);
}
.mt-vs-2 {
  margin-top: calc(2 * var(--vertical-spacing));
}
.mb-vs-05 {
  margin-bottom: calc(0.5 * var(--vertical-spacing));
}
.mb-vs-1 {
  margin-bottom: var(--vertical-spacing);
}
.mb-vs-2 {
  margin-bottom: calc(2 * var(--vertical-spacing));
}
.mt-gg {
    margin-top: var(--grid-gap) !important;
}
.mb-gg {
    margin-bottom: var(--grid-gap) !important;
}
@media (min-width: 576px) {
  .py-vs-sm-05 {
    padding-top: calc(0.5 * var(--vertical-spacing));
    padding-bottom: calc(0.5 * var(--vertical-spacing));
  }
  .py-vs-sm-1 {
    padding-top: var(--vertical-spacing);
    padding-bottom: var(--vertical-spacing);
  }
  .py-vs-sm-2 {
    padding-top: calc(2 * var(--vertical-spacing));
    padding-bottom: calc(2 * var(--vertical-spacing));
  }
  .my-vs-sm-05 {
    margin-top: calc(0.5 * var(--vertical-spacing));
    margin-bottom: calc(0.5 * var(--vertical-spacing));
  }
  .my-vs-sm-1 {
    margin-top: var(--vertical-spacing);
    margin-bottom: var(--vertical-spacing);
  }
  .my-vs-sm-2 {
    margin-top: calc(2 * var(--vertical-spacing));
    margin-bottom: calc(2 * var(--vertical-spacing));
  }
  .mt-sm-gg {
    margin-top: var(--grid-gap) !important;
  }
  .mb-sm-gg {
    margin-bottom: var(--grid-gap) !important;
  }
}
@media (min-width: 768px) {
  .py-vs-md-05 {
    padding-top: calc(0.5 * var(--vertical-spacing));
    padding-bottom: calc(0.5 * var(--vertical-spacing));
  }
  .py-vs-md-1 {
    padding-top: var(--vertical-spacing);
    padding-bottom: var(--vertical-spacing);
  }
  .py-vs-md-2 {
    padding-top: calc(2 * var(--vertical-spacing));
    padding-bottom: calc(2 * var(--vertical-spacing));
  }
  .my-vs-md-05 {
    margin-top: calc(0.5 * var(--vertical-spacing));
    margin-bottom: calc(0.5 * var(--vertical-spacing));
  }
  .my-vs-md-1 {
    margin-top: var(--vertical-spacing);
    margin-bottom: var(--vertical-spacing);
  }
  .my-vs-md-2 {
    margin-top: calc(2 * var(--vertical-spacing));
    margin-bottom: calc(2 * var(--vertical-spacing));
  }
  .mt-md-gg {
    margin-top: var(--grid-gap) !important;
  }
  .mb-md-gg {
    margin-bottom: var(--grid-gap) !important;
  }
}
@media (min-width: 992px) {
  .py-vs-lg-05 {
    padding-top: calc(0.5 * var(--vertical-spacing));
    padding-bottom: calc(0.5 * var(--vertical-spacing));
  }
  .py-vs-lg-1 {
    padding-top: var(--vertical-spacing);
    padding-bottom: var(--vertical-spacing);
  }
  .py-vs-lg-2 {
    padding-top: calc(2 * var(--vertical-spacing));
    padding-bottom: calc(2 * var(--vertical-spacing));
  }
  .my-vs-lg-05 {
    margin-top: calc(0.5 * var(--vertical-spacing));
    margin-bottom: calc(0.5 * var(--vertical-spacing));
  }
  .my-vs-lg-1 {
    margin-top: var(--vertical-spacing);
    margin-bottom: var(--vertical-spacing);
  }
  .my-vs-lg-2 {
    margin-top: calc(2 * var(--vertical-spacing));
    margin-bottom: calc(2 * var(--vertical-spacing));
  }
  .mt-lg-gg {
    margin-top: var(--grid-gap) !important;
  }
  .mb-lg-gg {
    margin-bottom: var(--grid-gap) !important;
  }
}
@media (min-width: 1200px) {
  .py-vs-xl-05 {
    padding-top: calc(0.5 * var(--vertical-spacing));
    padding-bottom: calc(0.5 * var(--vertical-spacing));
  }
  .py-vs-xl-1 {
    padding-top: var(--vertical-spacing);
    padding-bottom: var(--vertical-spacing);
  }
  .py-vs-xl-2 {
    padding-top: calc(2 * var(--vertical-spacing));
    padding-bottom: calc(2 * var(--vertical-spacing));
  }
  .my-vs-xl-05 {
    margin-top: calc(0.5 * var(--vertical-spacing));
    margin-bottom: calc(0.5 * var(--vertical-spacing));
  }
  .my-vs-xl-1 {
    margin-top: var(--vertical-spacing);
    margin-bottom: var(--vertical-spacing);
  }
  .my-vs-xl-2 {
    margin-top: calc(2 * var(--vertical-spacing));
    margin-bottom: calc(2 * var(--vertical-spacing));
  }
  .mt-gg {
    margin-top: var(--grid-gap) !important;
  }
  .mb-gg {
    margin-bottom: var(--grid-gap) !important;
  }
}
@media (min-width: 1400px) {
  .py-vs-xxl-05 {
    padding-top: calc(0.5 * var(--vertical-spacing));
    padding-bottom: calc(0.5 * var(--vertical-spacing));
  }
  .py-vs-xxl-1 {
    padding-top: var(--vertical-spacing);
    padding-bottom: var(--vertical-spacing);
  }
  .py-vs-xxl-2 {
    padding-top: calc(2 * var(--vertical-spacing));
    padding-bottom: calc(2 * var(--vertical-spacing));
  }
  .my-vs-xxl-05 {
    margin-top: calc(0.5 * var(--vertical-spacing));
    margin-bottom: calc(0.5 * var(--vertical-spacing));
  }
  .my-vs-xxl-1 {
    margin-top: var(--vertical-spacing);
    margin-bottom: var(--vertical-spacing);
  }
  .my-vs-xxl-2 {
    margin-top: calc(2 * var(--vertical-spacing));
    margin-bottom: calc(2 * var(--vertical-spacing));
  }
  .mt-xxl-gg {
    margin-top: var(--grid-gap) !important;
  }
  .mb-xxl-gg {
    margin-bottom: var(--grid-gap) !important;
  }
}

/* ------------------- bs overrides ------------------- */
:root {
  --bs-gap: var(--grid-gap) var(--grid-gap); /* horizontal and vertical gap sizes for css grid */
  --bs-border-radius: 0;
}

@media (min-width: 575px) and (max-width: 1399.98px) {
  .container-xxl {
      /* give xxl fluid layout elements proportional space at sides */
      margin-left: 8vw;
      margin-right: 4vw;
      width: unset !important;
  }
}

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

.card {
  --bs-card-border-color: transparent;
}

.btn {
  --bs-btn-border-radius: 0;
}

.btn-primary {
  --bs-btn-font-weight: 700;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--tsy-navy);
  --bs-btn-border-color: var(--tsy-navy);
  --bs-btn-hover-color: var(--tsy-navy);
  --bs-btn-hover-bg: var(--bs-white);
  --bs-btn-hover-border-color: var(--tsy-navy);
  /*--bs-btn-focus-shadow-rgb: var(--tsy-navy);*/
  --bs-btn-active-color: var(--tsy-navy);
  --bs-btn-active-bg: var(--bs-white);
  --bs-btn-active-border-color: var(--tsy-navy) !important;
}

.btn-secondary {
  --bs-btn-font-weight: 700;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--ui-dark-grey);
  --bs-btn-border-color: var(--ui-dark-grey);
  --bs-btn-hover-color: var(--tsy-navy);
  --bs-btn-hover-bg: var(--bs-white);
  --bs-btn-hover-border-color: var(--ui-dark-grey);
  /*--bs-btn-focus-shadow-rgb: var(--tsy-navy);*/
  --bs-btn-active-color: var(--ui-dark-grey);
  --bs-btn-active-bg: var(--bs-white);
  --bs-btn-active-border-color: var(--ui-dark-grey) !important;
}

.btn-warning {
  --bs-btn-font-weight: 700;
  --bs-btn-color: var(--tsy-navy);
  --bs-btn-bg: var(--tsy-orange);
  --bs-btn-border-color: var(--tsy-orange);
  --bs-btn-hover-color: var(--tsy-navy);
  --bs-btn-hover-bg: var(--bs-white);
  --bs-btn-hover-border-color: var(--tsy-orange);
  /*--bs-btn-focus-shadow-rgb: var(--tsy-navy);*/
  --bs-btn-active-color: var(--tsy-navy);
  --bs-btn-active-bg: var(--bs-white);
  --bs-btn-active-border-color: var(--tsy-orange) !important;
}

.btn-info {
  --bs-btn-font-weight: 700;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--tsy-mid-blue);
  --bs-btn-border-color: var(--tsy-mid-blue);
  --bs-btn-hover-color: var(--tsy-navy);
  --bs-btn-hover-bg: var(--bs-white);
  --bs-btn-hover-border-color: var(--tsy-mid-blue);
  /*--bs-btn-focus-shadow-rgb: var(--tsy-navy);*/
  --bs-btn-active-color: var(--tsy-navy);
  --bs-btn-active-bg: var(--bs-white);
  --bs-btn-active-border-color: var(--tsy-mid-blue) !important;
}

.table-primary {
    --bs-table-color: #000;
    --bs-table-bg: var(--tsy-lighter-blue-tint); /*#cfe2ff;*/
    --bs-table-border-color: #a6b5cc;
    --bs-table-striped-bg: #c5d7f2;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #bacbe6;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #bfd1ec;
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

/* --- responsive font sizes --- */
h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1 {
    font-size: 2.5rem;
  }
}

h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h2 {
    font-size: 2rem;
  }
}

h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3 {
    font-size: 1.75rem;
  }
}

h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4 {
    font-size: 1.5rem;
  }
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}
