/* ========================================
      GENERAL OVERRIDE STYLES
======================================== */

main { 	margin: 40px 30px 200px 30px; }

h1 { padding-top: 100px; }
h2 { padding-top: 50px; }
h3 { border-bottom: 1px solid #800000; margin-top: 30px; margin-bottom: 15px;}
h4 { color: #800000; }

h1 + h2 { margin-top: 0px; padding-top: 0px; }
h2 + h3 { margin-top: 0px; padding-top: 0px; }
header + article > h2:first-child { margin-top: 0; padding-top: 0px; }

@media (max-width: 768px) {
  /* REDUCES HEADING SIZE ON SMALL SCREENS */
  h1 { font-size: 2.0rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.10rem; }
}

.title {
  /* ON NON-ACADEMY PAGES, SETS THE FIRST H1 */
  color: #800000;
  border-bottom: 6px solid #800000;
}

ul { list-style-type: square;}
ul li { padding: 5px 0px 5px 0px; }
ul ul li { padding: 3px 0px 3px 0px; }
ul li.secondary_indent { list-style-type: none; }

ol li { padding: 5px 0px 5px 0px; }
ol li.secondary_indent { list-style-type: none; }

blockquote { padding: 0px 30px 0px 30px; font-style: italic; }

sup { font-size: x-small; vertical-align: baseline; position: relative; top: -0.5em; }

h3 sup  { font-size: initial; vertical-align: top; line-height: 1.5; position: static; top: auto;}

p:has(+ ul) { /* DECREASES BOTTOM MARGIN FOR P TAGS NEXT TO UL TAGS */ margin-bottom: 0.5rem; }
p:has(+ ol) { /* DECREASES BOTTOM MARGIN FOR P TAGS NEXT TO OL TAGS */ margin-bottom: 0.5rem; }


.text_fisttheory { color: #800000; }
.fisttheory { color: #fff; background-color: #800000; }
.text_small { font-size: 0.75rem}

/* =======================================
      FILTER DIALOGS
======================================= */

.aggregator_filter {
  /* STYLES FILTER DIALOG ON AGGREGATE PAGES: ETIQUETTE, VOCABULARY, MYTHS */
  font-size: 0.95rem;
  padding: 10px 10px 4px 10px;
  border: 1px solid #c1c1c1;
  background-color: #F1F1F1;
  width: 100%;
  margin-bottom: 30px;
}

.aggregator_filter p:first-of-type {
  /* STYLES FILTER HEADER "CURRENT FILTER" */
  font-weight: 600;
  color: #800000;
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.aggregator_filter .form-group {
  padding-left: .75rem;
  padding-right: .75rem;
}

.aggregator_filter button:hover {
  color: #fff;
  text-transform: uppercase;
}









/* =======================================
      BUTTONS
======================================= */

.btn-course, .btn_course {
		color: #FFF;
		font-weight: 450;
		background-color: #800000;
		border: 1px solid #800000;
	}

.btn-course:hover { opacity: .75; color: #FFF; }

.btn_micro {
  /* NARROW BUTTON USED IN TABLES AND CAPTIONS */
    cursor: pointer;
    color: #fff;
    background-color: #800000;
    font-size: 0.65rem;
    padding: 3px 10px 3px 10px;
    margin-left: auto;
    transition: box-shadow 0.15s ease-in-out;
  }

  /* CONTROLS HOVER STATE */
  .btn_micro:hover {
    color: #FFFFFF;
    font-size: 0.65rem;
    box-shadow: 0 0 6px rgba(224, 0, 0, 0.8);
  }


/* =======================================
      CATALOG
======================================= */

.catalog_cards {
  /* CONTROLS HOW POLICY AND PREVENTION (CATALOG) BOXES LAYOUT ON SCREEN */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 991px) {
  /* CONTROLS RESPONSIVE CATALOG CARDS FOR TABLETS */
  .catalog_cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  /* CONTROLS RESPONSIVE CATALOG CARDS FOR MOBILE */
  .catalog_cards {
    grid-template-columns: 1fr;
  }
}

.catalog_cards .card-header {
  /* KEEPS HEADER ALL ON ONE LINE */
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
}

.catalog .card-header {
  /* SETS STYLES IN CATALOG CARD HEADERS | MAKES HEADER FULLY CLICKABLE */
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}

.catalog_header {
  /* STYLES POLICIES & INJURY PREVENTION HEADERS  */
  margin: 0;
  font-size: 1.15rem;
  font-weight: 500;
  font-variant: small-caps;
}

.catalog_chevron {
  /* STYLES SPEED OF CARROT CHANGE  */
  transition: transform 0.15s ease;
}

.catalog_toggle{
  /* CONTROLS HOW SCRIPTING WORKS */
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  border: 0;
  background: transparent;
  text-align: left;
}

.catalog_mauve .card-header {
  /* SETS CATALOG HEADER TO: MAUVE SCHEME */
  background-color: #EECEDA;
}

.catalog_mauve .card-body {
  /* SETS CATALOG BODY TO: MAUVE SCHEME */
  background-color: #FAE7EB;
  border: 1px solid #EECEDA;
}

.catalog_blue .card-header {
  /* SETS CATALOG HEADER TO: BLUE SCHEME */
  background-color: #BDD2E4;
}

.catalog_blue .card-body {
  /* SETS CATALOG BODY TO: BLUE SCHEME */
  background-color: #DBEEF7;
  border: 1px solid #BDD2E4;
}

.catalog_peach .card-header {
  /* SETS CATALOG HEADER TO: PEACH SCHEME */
  background-color: #FEC89A;
}

.catalog_peach .card-body {
  /* SETS CATALOG BODY TO: PEACH SCHEME */
  background-color: #FFDAB9;
  border: 1px solid #FEC89A;
}

.catalog_mint .card-header {
  /* SETS CATALOG HEADER TO: MINT SCHEME */
  background-color: #A9E4DB;
}

.catalog_mint .card-body {
  /* SETS CATALOG BODY TO: MINT SCHEME */
  background-color: #E1F6F2;
  border: 1px solid #A9E4DB;
}

.catalog_taupe .card-header {
  /* SETS CATALOG HEADER TO: TAUPE SCHEME */
  background-color: #DED6CE;
}

.catalog_taupe .card-body {
  /* SETS CATALOG BODY TO: TAUPE SCHEME */
  background-color: #F5EBE0;
  border: 1px solid #DED6CE;
}

.catalog_lavender .card-header {
  /* SETS CATALOG HEADER TO: LAVENDER SCHEME */
  background-color: #E1D3F8;
}

.catalog_lavender .card-body {
  /* SETS CATALOG BODY TO: LAVENDER SCHEME */
  background-color: #F7F5FF;
  border: 1px solid #E1D3F8;
}

.catalog_teal .card-header {
  /* SETS CATALOG HEADER TO: TEAL SCHEME */
  background-color: #A8CAD6;
}

.catalog_teal .card-body {
  /* SETS CATALOG BODY TO: TEAL SCHEME */
  background-color: #E5FAF8;
  border: 1px solid #A8CAD6;
}

.catalog_gold .card-header {
  /* SETS CATALOG HEADER TO: GOLD SCHEME */
  background-color: #F6D580;
}

.catalog_gold .card-body {
  /* SETS CATALOG BODY TO: GOLD SCHEME */
  background-color: #FAEDCB;
  border: 1px solid #F6D580;
}

.catalog_gray .card-header {
  /* SETS CATALOG HEADER TO: GRAY SCHEME */
  background-color: #DBDBDB;
}
.catalog_gray .card-body {
  /* SETS CATALOG BODY TO: GRAY SCHEME */
  background-color: #E8F0F7;
  border: 1px solid #DBDBDB;
}


/* ========================================
      TABLE OF CONTENTS
======================================== */

#table_of_contents{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:1050;
}

#toc_panel{
    display:none;
    position:absolute;
    right:0;
    bottom:calc(100% + 8px);
    width:320px;
    max-height:70vh;
    overflow-y:auto;
}

#toc_panel .card{
    box-shadow:0 .25rem .75rem rgba(0,0,0,.2);
}

#toc_list{
    list-style:none;
    margin:0;
    padding:0;
}

#toc_list ul{
    list-style:none;
    margin:0;
    padding-left:18px;
}

#toc_list li{
    margin:2px 0;
}

#toc_list a{
    display:block;
    padding:.15rem .5rem;
    color:#333;
    text-decoration:none;
}

#toc_list a:hover,
#toc_list a.active{
    color:#800000;
    background:#f8f9fa;
    text-decoration:none;
}





/* ========================================
      CITATIONS
======================================== */

cite[data-number]::before {
  /* FORMATS VANCOUVER CITATIONS */
  content: "[" attr(data-number) "]";
  color: #800000;
  padding: 0 0 0 3px;
  font-style: normal;
  text-decoration: none;
}

cite {
  /* FORMATS VANCOUVER CITATIONS */
  text-decoration: none;
}


/* ========================================
      LISTS (GENERAL)
======================================== */

.compact_list li {
  /* REMOVES BULLET SPACING */
  padding: 0px;
}

.flush_list li {
  /* ALIGNS BULLET LEFT FLUSH WITH MARGIN */
  margin-left: -20px;
}

.labelled_list li:first-of-type{
  /* CREATES HEADER LINE FOR SHORT LISTS */
  border-bottom: 1px solid #800000;
  list-style-type: none;
  font-weight: 700;
  margin-left: -2.25rem;
}

.no_bullet_list {
  /* REMOVES BULLETS IN LIST */
  list-style-type: none;
  padding-left: 20px;
  margin-bottom: 0px;
}


/* ========================================
      LISTS (INDICES & DIRECTORIES)
======================================== */

.directory_list_label  {
  /* CREATES HEADER LINE FOR SHORT BULLETED LISTS */
  border-bottom: 1px solid #800000;
  list-style-type: none;
  font-weight: 700;
  margin-left: -40px !important;
  margin-top: 20px;
  text-indent: 5px;
}

.directory_label  {
  /* CREATES HEADER LINE FOR SHORT LISTS (NOT BULLETED) */
  border-bottom: 1px solid #800000;
  font-weight: 700;
  margin-top: 20px;
  padding-left: 5px;
  font-size: 1.05rem;
}

/* ========================================
      LISTS (TIPS)
======================================== */

ol.tip_circle_list {
    list-style: none; /* Remove default numbering */
    counter-reset: list-counter; /* Reset counter */
    padding-left: 0; /* Remove default padding */
}

ol.tip_circle_list > li {
    counter-increment: list-counter; /* Increment counter */
    position: relative; /* Position relative for custom number positioning */
    padding-left: 3rem; /* Space for the custom number */
    margin-bottom: 1.5rem; /* Space between list items */
}

ol.tip_circle_list > li::before {
    content: counter(list-counter); /* Display the counter */
    position: absolute; /* Position the custom number */
    left: 0; /* Align to the left */
    top: 0; /* Align to the top of the li */
    width: 2rem; /* Set width of the circle */
    height: 2rem; /* Set height of the circle */
    background-color: #800000; /* Red background color */
    color: white; /* White text color */
    border-radius: 50%; /* Make it circular */
    text-align: center; /* Center text horizontally */
    line-height: 2rem; /* Center text vertically */
    font-weight: bold; /* Make text bold */
    font-size: 1rem; /* Adjust font size */
}


/* ========================================
      NOTES (ADDITIONAL)
======================================== */

.note {
  /* SETS SIZE AND POSITION OF NOTES */
  font-size: 0.75rem;
  position: relative;
  padding-left: 1.1rem;
}

.note::before {
  /* STYLES CHARACTER FOR NOTES */
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 600;
  line-height: 1.5;
}

.note_asterisk::before {
  /* SETS * AS A NOTE MODIFIER  */
  content: "*";
  font-size: 1.0rem;
}

.note_dagger::before {
  /* SETS "†" AS A NOTE MODIFIER  */
  content: "†";
  font-size: 1.0rem;
}

.note_double_dagger::before {
  content: "‡";
  font-size: 1.0rem;
}

/* ========================================
   OPACITY
======================================== */

.opacity_25 { opacity: 0.25; }
.opacity_50 { opacity: 0.5; }
.opacity_75 { opacity: 0.75; }
.opacity_100 { opacity: 1; }

/* ========================================
      COMPONENT STYLES: NAVIGATION MENUS

      KEEPING ONLY TO FIGURE OUT TOP NAVIGATION MENU.
======================================== */

.article_navigation ul li + li::before {
  /* CREATES BREAK PIPES IN MENUS */
  content: " | ";
  padding: 0 6px;
}

@media (max-width: 600px) {
  /* REMOVES PIPES WHEN WRAPPING IN SMALL SCREENS */
  .article_navigation ul li + li::before {
    content: "";
    padding: 0;
  }
}


/* ========================================
       EXAMPLES (PAIRED)
======================================== */

.paired_example {
  /* DEFINES GRID LAYOUT FOR DT/DD PAIRS - INDIVIDUAL OVERRIDES ARE SPECIFIED ON TOPICS */
  /* ON TOPIC OVERRIDES, CREATE A STYLE THAT HAS THIS PROPERTY ONLY: --paired-label-col: 140px; AND REPLACE 140PX WITH DESIRED COLUMN WIDTH */
  display: grid;
  grid-template-columns: var(--paired-label-col, 90px) 1fr;
  column-gap: 12px;
  row-gap: 0;
  margin: 10px 0px 10px 30px;
}

.paired_example + .paired_example {
  /* WORKS WITH NEXT STYLE (HAS) TO REMOVE SPACING WHEN paired_example BUTTS UP AGAINGS ANOTHER paired_example */
  margin-top: 0px;
  margin-bottom: 10px;
}

.paired_example:has(+ .paired_example) {
  /* WORKS WITH PREVIOUS STYLE (HAS) TO REMOVE SPACING WHEN paired_example BUTTS UP AGAINGS ANOTHER paired_example */
  margin-top: 10px;
  margin-bottom: 0px;
}

.paired_example dt,
.paired_example dd {
  /* NORMALIZES DEFAULT DL ELEMENT SPACING */
  margin: 0;
  padding: 6px 0;
}

.paired_example dt {
  /* CREATES VERTICAL DIVIDER BETWEEN DT AND DD (DESKTOP) */
  border-right: 2px solid #800000;
  padding-right: 10px;
  font-weight: normal;
}

.paired_example p {
  /* REMOVES DEFAULT PARAGRAPH SPACING WITHIN DD CONTENT */
  margin: 0px 0px 8px 0px;
  padding: 0px;
}

@media (max-width: 576px) {
  .paired_example {
    /* COLLAPSES GRID INTO VERTICAL STACK FOR SMALL SCREENS */
    display: block;
    margin-left: 0;
  }

  .paired_example dt {
    /* REPLACES VERTICAL DIVIDER WITH HORIZONTAL SEPARATOR (MOBILE) */
    border-right: none;
    border-bottom: 1px solid #800000;
    padding-right: 0;
    font-style: italic;
  }
}



/* ========================================
       MEDICAL TOPICS: MEDICATIONS
======================================== */

.medication_box {
  height: 100%;
  border: 1px solid #dfdfdf;
  padding: 0.65rem 0.75rem;
  font-size: 0.75rem;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  row-gap: 0.3rem;
}

.medication_title {
  font-size: 0.85rem;
  line-height: 1.2;
  margin: 0;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid #800000;
}

.medication_label,
.medication_suffix,
.medication_purpose {
  margin: 0;
}

.medication_list {
  margin: 0;
  padding-left: 1.1rem;
  align-self: start;
}

.medication_list li {
  padding-top: 0.0rem;
  padding-bottom: 0.0rem;
}

.medication_purpose {
  min-height: 2.6em;
}


/* ========================================
       PROVIDER DATA SHEETS
======================================== */

.provider_data_sheet {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;

  padding: 0.75rem 0.75rem;
  border: 1px solid #c1c1c1;
  background: #fff;
  cursor: pointer;
}


/* ========================================
       MEDICAL TOPICS: RATIONALE
======================================== */

.rationale_container .rationale {
  /* HIDES RATIONALE UNTIL TRIGGERED BY CLICK AND SCRIPT */
  display: none;
}

.rationale_container.rationale_visible .rationale {
  /* HIDES RATIONALE UNTIL TRIGGERED BY CLICK AND SCRIPT */
  display: block;
}

.rationale_toggle_btn {
  /* STYLES TOGGLE BUTTON FOR RATIONALE */
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 0.6rem 0.75rem;
  border-radius: 4px;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.rationale_toggle_btn:hover {
  /* STYLES TOGGLE BUTTON FOR RATIONALE */
  font-variant: small-caps;
}

.rationale {
  /* SETS CONTAINER QUALITIES FOR MEDICAL RATIONALE */
  border: 1px solid #dfdfdf;
  margin: 10px 0px 10px 0px;
  background-color: #efefef;
  padding: 10px;
  font-size: 0.90rem;
}

.rationale p {
  /* SETS TEXT PROPERTIES IN MEDICAL RATIONALE */
  margin: 0px 8px 0px 8px;
  padding-bottom: 8px;
}

.rationale p:first-child {
  /* SETS RATIONALE TITLE */
  color: #800000;
  border-bottom: 1px solid black;
  margin-bottom: 10px;
  padding-bottom: 0px;
  font-variant: small-caps;
  font-weight: 600;
}

.rationale_suite {
  /* FORMATS DOCTOR FISTING IMAGES */
  background-color: transparent;
  padding: 0px;
}

.rationale p:last-child {
  /* KILLS EXCESSIVE MARGIN IN RATIONALE */
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.rationale_office {
  /* ENCASES DOCTOR IMAGE SUITE IN SINGL BOX BUT PER IMAGE */
  padding: 5px;
  border-left: 1px solid #DFDFDF;
  border-right: 1px solid #DFDFDF;
}


/* ========================================
       RESOURCE NAVIGATION CARDS
======================================== */

.resource_card {
  /* CREATES A GLOW ON CLICKABLE CARDS */
  transition: transform .2s ease, box-shadow .2s ease;
  border: 2px solid #c1c1c1;
}

.resource_card:hover {
  /* CREATES A GLOW ON CLICKABLE CARDS */
  transform: translateY(-6px);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.15);
}

.resource_footer {
  /* SETS BACKGROUND COLOR ON BOTTOM SECTION OF RESOURCE CARDS */
  font-weight: 600;
  color: #800000;
  background-color: #c1c1c1;
}








/* LEGACY DELETE AFTER BASES AND OTHER LUBE TOPIC REPLACED EXAMPLES PLACES HORIZONTAL BAR BETWEEN ITEM AND EXAMPLES. USED IN LUBE */
  .examples {padding: 0px 10px 0px 10px; margin-left: 5px; margin-top: 0px; margin-bottom: 0px;}
  .examples p {padding: 5px 0px 5px 0px; margin: 0px;}
  @media (max-width: 576px) { .examples p {padding: 0px; margin: 0px; opacity: 50% } }
  .examples_border {border-right: 2px solid #800000;}
  @media (max-width: 576px) { .examples_border { border: none; font-weight: bold; padding: 0px; opacity: 50%;} }









.injury_index { border: 2px solid #800000; padding: 25px; background: #F1F1F1;}
.injury_index h5 {font-size: 0.90rem; border-bottom: 2px solid #800000;}
.injury_index p {font-size: 0.80rem;}
.injury_index ul {font-size: 0.80rem;}
.injury_index p:first-of-type {text-align: center; border: 1px solid #800000; padding: 5px; font-weight: 600; background-color: #FFFFFF; margin-top: 20px;}
.injury_index h4 {padding: 0px 0px 25px 0px; margin-top: 0px;}








/* ========================================
      FIGURES
======================================== */

figure { margin: 0px;}

figure > img {
  box-sizing: border-box;
  border: 1px solid #EFEFEF;
  padding: 2px;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
}

.border_multiple {
  /* SETS BORDER COLOR AROUND MULTIPLE IMAGE CONFIGURATIONS W/BOOTRAP 4 BORDER CLASS */
  border: 1px solid #EFEFEF;
}

.figure_unavailable {
  /* SUPPORTS IMAGE AND TEXT STACKING ON UNCREATED IMAGES */
  position: relative;
}

.figure_unavailable img {
  /* SUPPORTS IMAGE AND TEXT STACKING ON UNCREATED IMAGES */
  display: block;
}

.figure_unavailable_overlay {
  /* SUPPORTS IMAGE AND TEXT STACKING ON UNCREATED IMAGES */
  position: absolute;
  inset: 0;                 /* top/right/bottom/left: 0 */
  background: rgba(255,255,255,0.85);
  color: #800000;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  pointer-events: none;
  white-space: pre-line;
}

.figure_multiple img {
  border: 1px solid #efefef;
}

figcaption {
  /* STYLES FIGURE CAPTION BLOCKS */
  background: #efefef;
  font-size: 0.8rem;
  width: 100%;
  margin-top: 4px;
  margin-bottom: 15px;
  padding: 8px;
  overflow-wrap: break-word;
}

figcaption h6 {
  /* OVERRIDES H6 SETTINGS FOR FIGURES */
	color: #800000;
	font-size: 0.80rem;
	font-weight: 500;
	margin-bottom: 4px;
}

figcaption p {
  /* SETS SPACING IN FIGURE CAPTION SO IT DOESN'T FEEL BLOATED */
  margin-bottom: 0px;
}

.sub_caption, .sub-caption {
  /* CONTROLS INBLOCK FIGURE NUMBERING [ A ] [ B ] IN CAPTIONS */
  color: #800000; font-weight: 500; white-space: nowrap;}

  .credit {
    /* NECESSARY INFRASTRUCTURE FOR Z-INDEX OF IMAGE OVERLAY */
   position: relative;
 }

 .credit_stamp {
   /* CREATES THE STAMP ON IMAGES FOR REFERENCING BSKY ACCOUNT */
   display: flex;
   align-items: center;
   gap: 6px;
   color: #1185FE;
   font-size: 0.85rem;
   padding: 6px 10px;
   border-radius: 4px;
 }

 .credit_stamp:hover {
   /* CHANGES STAMP TO MAROON WHEN LINKED */
   color: #FFFFFF;
   font-weight: 600;
   background-color: #800000;
 }

 .credit_light {
   /* SHADES THE STAMP LIGHT FOR DARK BACKGROUNDS */
   background: rgba(255, 255, 255, 0.25);
 }

 .credit_dark {
   /* SHADES THE STAMP DARK FOR LIGHT BACKGROUNDS */
   background: rgba(0, 0, 0, 0.45);
   text-shadow: 0 0 4px rgba(0,0,0,0.6);
 }

 .credit_stamp i {
   /* SETS THE BSKY ICON SIZE IN STAMP */
   font-size: 1rem;
 }

 .credit_rt {
   /* PLACES THE STAMP TOP RIGHT */
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 2;
 }

 .credit_rb {
   /* PLACES THE STAMP BOTTOM RIGHT */
   position: absolute;
   bottom: 10px;
   right: 10px;
   z-index: 2;
 }

 .credit_lt {
   /* PLACES THE STAMP TOP LEFT */
   position: absolute;
   left: 10px;
   top: 10px;
   z-index: 2;
 }

 .credit_lb {
   /* PLACES THE STAMP BOTTOM LEFT */
   position: absolute;
   bottom: 10px;
   left: 10px;
   z-index: 2;
 }

 .credit_rt_multiple {
   /* PLACES THE STAMP TOP RIGHT */
   position: absolute;
   top: 10px;
   right: 25px;
   z-index: 2;
 }

 .credit_rb_multiple {
   /* PLACES THE STAMP BOTTOM RIGHT */
   position: absolute;
   bottom: 10px;
   right: 25px;
   z-index: 2;
 }

 .credit_lt_multiple {
   /* PLACES THE STAMP TOP LEFT */
   position: absolute;
   left: 25px;
   top: 10px;
   z-index: 2;
 }

 .credit_lb_multiple {
   /* PLACES THE STAMP BOTTOM LEFT */
   position: absolute;
   bottom: 10px;
   left: 25px;
   z-index: 2;
 }

 /* ***** RESPONSIVE FIGURE SETS ***** */

 /*
   figure_set.php renders:
   - a desktop Bootstrap grid at lg and above;
   - a mobile carousel below lg;
   - optional individual or shared captions.
 */

 .figure_set {
   margin-bottom: 0;
 }


 /* ***** DESKTOP LAYOUT ***** */

 .figure_set_desktop .figure_set_item {
   height: 100%;
   margin-bottom: 0;
 }


 /* ***** IMAGE AND CREDIT AREA ***** */

 .figure_set_media {
   position: relative;
   width: 100%;
 }

 .figure_set_media img {
   box-sizing: border-box;
   display: block;
   border: 1px solid #efefef;
   padding: 2px;
   width: 100%;
   max-width: 100%;
   min-width: 100%;
   height: auto;
 }


 /* ***** MOBILE CAROUSEL IMAGE AREA ***** */

 .figure_set_stage {
   position: relative;
   width: 100%;
 }

 /*
   Bootstrap positions indicators absolutely.

   figure_set_stage contains only the image area, so the indicators
   remain over the image and do not enter the figcaption.
 */

 .figure_set_stage .carousel-indicators {
   bottom: 0.5rem;
   margin-bottom: 0;
 }


 /* ***** MOBILE INDIVIDUAL CAPTIONS ***** */

 .figure_set_mobile_caption {
   display: none;
 }

 .figure_set_mobile_caption.active {
   display: block;
 }



/* ========================================
      COMPONENT STYLES: VOCABULARY LEGACY
======================================== */

/* REMOVE THIS SECTION AFTER 2026 TEMPLATE APPLIED TO ALL COURSES */

.vocabulary {
	/* CREATES VOCABULARY BOX FRAME */
	border: solid 1px #CFCFCF;
	margin-bottom: 20px;
  padding-bottom: 10px;
	min-width: 200px;
  background-color: orange;
}

.vocabulary h6 {
	/* STYLES VOCABULARY BOX HEADER */
	background-color: #C0C0C0;
	font-weight: 600;
  margin-bottom: 10px;
	padding: 4px 10px 4px 10px;
	text-transform: uppercase;
}

.vocabulary p {
	/* STYLES THE ACTUAL VOCABULARY WORD */
	color: #800000;
	font-weight: 600;
	text-align: left;
	font-size: .95rem;
  padding: 4px 10px 4px 10px;
}

.vocabulary ol {
  /* CONFIGURES THE ENTRIES AS PART OF THE LIST */
  font-size: .85rem;
  padding-right: 10px;
}

.vocabulary p.example {
	/* FORMATS THE EXAMPLE */
  margin-top: 0px;
  margin-bottom: 5px;
  margin-left: 40px;
  padding-right: 15px;
  color: #000000;
  font-weight: 400;
  font-size: .85rem;
}

.vocabulary em {
  /* MAKES WORD TYPE CAPITALIZED IN SMALL CAPS */
	font-variant: small-caps;
	font-style: normal;
}

.vocabulary em::before { content: "| " }   /* MAKES WORD TYPE ENCLOSED IN PIPES */
.vocabulary em::after { content: " |" }    /* MAKES WORD TYPE ENCLOSED IN PIPES */



/* ========================================
      COMPONENT STYLES: VOCABULARY (CARD)
======================================== */

.vocabulary_card {
  /* SETS CARD ENCASEMENT IN VOCABULARY */
  border: 2px solid #CFCFCF;
  margin-bottom: 20px;
  font-size: 0.90rem;
  min-width: 200px;
}

.vocabulary_card .card-header {
  /* STYLES VOCABULARY HEADER */
  background-color: #CFCFCF;
  font-weight: 600;
  padding: 10px;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.vocabulary_card .vocabulary_term {
  /* STYLES TEXT IN VOCABULARY CARD */
  color: #800000;
  font-weight: 600;
  font-size: .90rem;
  padding: 8px 10px 6px 10px;
  margin: 0px;
}

.vocabulary_card ol {
  /* STYLES OL IN VOCABULARY CARD */
  padding: 0 15px 0px 35px;
}

.vocabulary_example {
  /* ADDS SPACING WHEN EXAMPLE IS PRESENT */
  padding-top: 6px;
}

.vocabulary_definition em {
  /* STYLES THE WORD TYPE */
  font-variant: small-caps;
  font-style: normal;
}

.vocabulary_definition em::before, .vocabulary_definition em::after {
  /* CREATES WORD TYPE ENCASEMENT */
  content: " | ";

}


/* ========================================
      COMPONENT STYLES: QUICK REFERENCE (CARD)
======================================== */

.quick_reference_card {
  /* SETS CARD ENCASEMENT IN QUICK REFREENCE */
  border: 2px solid #CFCFCF;
  margin-bottom: 20px;
  font-size: 0.90rem;
  min-width: 200px;
}

.quick_reference_card .card-header {
  /* STYLES QUICK REFERENCE HEADER */
  background-color: #CFCFCF;
  font-weight: 600;
  padding: 10px;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.quick_reference_card ul {
  list-style: none;
  padding: 0px 0px 0px 20px;
  margin: 0px 0px 0px 0px;
}

.quick_reference_card li {
  position: relative;
  padding-left: 1.5em;
  margin: 0px 0px 0px 0px;
}

.quick_reference_card ul li::before {
  content: "\1F44A\1F3FB";
  position: absolute;
  left: -20px;
  top: 0;
  font-size: 1.8em;
  line-height: 1;
}





/* ========================================
      VOCABULARY / DICTIONARY
======================================== */

.dictionary img {
  /* CONTROLS BULL HORN */
  vertical-align:top;
}

.dictionary img + img {
  /* CONTROLS BULL HORN AND CODE WORD */
  float: right;
}

.dictionary_entry {
  /* STYLES WORD ENCLOSURE BOXES */
  border: 2px solid #800000;
  margin-bottom: 30px;
  padding: 15px;
}

.dictionary_entry_heading {
  /* STYLES THE WORD */
  color: #800000;
  display: inline;
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0px;
  padding: 0px;
}

.dictionary_entry ol li {
  /* CREATES SPACE BETWEEN ENTRY ITEMS */
  padding-bottom: 0px;
}

.dictionary_entry ol {
  /* PREVENTS EXCESS SPACE BETWEEN CONTENT AND ENCASEMENT */
  margin-bottom: 0px;
}

.dictionary_example {
  /* SETS LEADING AROUND EXAMPLES IN WORD DEFINITIONS */
  margin: 10px 0px 0px 0px;
  padding: 0px;
  list-style-type: none;
}

.dictionary_word_type {
  /* SETS SPACING ON DEFINITION OF WORD (NOUN, VERB, ETC.) */
  padding: 0px 10px;
  margin: 0px;
  font-variant: small-caps;
  text-transform: lowercase;
}

.dictionary_word_type::before {
  /* SETS LEFT | */
  content: "| "
}

.dictionary_word_type::after {
  /* SETS RIGHT | */
  content: " |"
}

.dictionary .box {
  /* OVERRIDES BOX SPACING IN VOCABULARY TOPIC */
  margin-bottom: 30px;
}

.dictionary_modal_body {
  / SETS BACKGROUND PROPERTY ON VOCABULARY POPUPS /
  background: transparent;
  margin: 5px;
  padding: 15px;
}

.modal_modal_footer {
    / SETS BACKGROUND FOOTER PROPERTIES ON VOCABULARY POPUPS /
  background: transparent;
  border-top: none;
  padding-top: 0px;
}




/* ========================================
      COMPONENT STYLES: EXPERT ADVICE
======================================== */

.expert_mainframe {
  /* ENCASES AN EXPERT WITH HIS ADVICE */
  border: 2px solid #800000;
  padding: 10px;
  margin-bottom: 25px;
}

.expert_image_mainframe {
  /* CONTROLS DISPLAY OF EXOERTS IMAGE  */
  padding: 0px;
  margin: 0px;
  margin-bottom: 20px;
}

.expert_image {
  /* CONTROLS DISPLAY OF EXOERTS IMAGE  */
  border: 1px solid #C1C1C1;
  padding: 10px;
  max-width: 100%;
  width: 100%;
  margin: 0px;
}

.expert_advice h4 {
  /* IDENTIFIES EXPERT  */
  color: #C1C1C1;
  font-size: 0.85rem;
}

.expert_advice p:first-child {
  color: #C1C1C1;
  font-size: 0.85rem;
  font-weight: bold;
  margin: 0 0;
}


.expert_advice h3 {
  /* STYLES THE ADVICE HEADER  */
  color: #800000;
  font-size: 1.25rem;
  border: none;
  margin: 0px 0px 10px 0px;
}

.expert_advice p {
  /* STYLES THE ADVICE  */
  margin-bottom: 0px;
  padding-bottom: 8px;
}

.expert_advice .row:last-child {
  /* STYLES THE ADVICE  */
  margin-top: auto;
  padding-top: 20px;
  padding-bottom: 0px;
}

#guest_submissions_library p a[href$=".pdf"]::before {
  /* STYLES PDF LINKS FOR DOCUMENTS PROVIDE IN THE EXPERT ADVICE SECTIONS  */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f1c1"; /* fa-file-pdf icon */
  margin-left: 1.35rem;
  margin-right: .35rem;
  font-size: 2.0em;
  vertical-align: middle;
}





/* ================================================
      COMPONENT STYLES: MYTHS & MISCONCEPTIONS
================================================ */

.card_myth, .card_event {
  font-size: 0.90rem;
  border: 2px solid #800000;
}

.card_myth .card-header, .card_event .card-header {
  padding: 8px;
  background-color: #800000;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 1.25rem;
}

.card_myth ul, .card_event ul {
  margin: 0px 8px 0px -20px;
}

.card_myth h6, .card_event h6 {
  color: #800000;
  text-align: left;
  font-weight: 600;
  font-variant: small-caps;
  font-size: 1.20rem;
}




/* ========================================
      COMPONENT STYLES: WARNING
======================================== */

.warning {
	border: 2px solid #800000;
	background-image: url('/bs-images/general/messages_warning.png');
	background-position: 10px 10px;
	background-repeat: no-repeat;
	display: table;
	margin: 20px 0px 20px 0px;
	min-width: 100%;
	min-height: 35px;
	padding: 20px 20px 10px 70px;
}





/* ========================================
      COMPONENT STYLES: CONSTRUCTION
======================================== */

.construction {
	/* DISPLAYS SMALL CONSTRUCTION WITH SHOVEL */
	border: 2px solid #800000;
	background-image: url('/bs-images/general/construction.png');
	background-position: 10px 10px;
	background-repeat: no-repeat;
	display: table;
	margin: 20px 0px 20px 0px;
	min-width: 100%;
	min-height: 95px;
	padding: 20px 20px 10px 100px;
  text-align: center;
}



/* ========================================
      TABLES: AUDIO PLAYBACK
======================================== */

.audio {
  /* INCREASES SIZE AND COLOR OF AUDIO PLAYBACK TEXT */
  font-size: 1.25rem;
}

.audio i {
  /* INCREASES SIZE AND COLOR OF AUDIO PLAYBACK TEXT */
  font-size: 1.25rem;
  color: #800000;
}

.audio li:hover {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}






/* ========================================
      TABLES: SPECIALTY (SINGLE COLUMN)
======================================== */

.specialty .card-header {
  /* STYLES SPECIALTY CARD HEADER ENCASEMENT AND TYPOGRAPHY */
  padding: 8px 12px;
  background-color: #800000;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 1.0rem;
  text-transform: uppercase;
}

.specialty .card-body {
  /* STYLES SPECIALTY CARD BODY ENCASEMENT */
  background-color: #F1F1F1;
  border: 2px solid #800000;
  padding: 12px 4px 0px 4px;
}






/* ===========================================
      TABLES: PROGRESSION (IN INTRO TO TOPICS)
============================================== */

/* PROGRESSION TABLE */

.progression_table {
  margin: 1.5rem 0rem 1.5rem 0rem;
}

.progression_table .row {
  margin-left: 0;
  margin-right: 0;
}

/* Header row */
.progression_table_header {
  background-color: #800000;
  color: #FFFFFF;
  font-weight: bold;
}

.progression_table_header p {
  margin: 0.5rem 0;
}

/* Shared cell styling */
.progression_table .progression_milestone,
.progression_table .progression_description {
  border: 1px solid #C1C1C1;
  padding: 0.75rem;
}

/* Prevent double border between columns */
.progression_table .progression_description {
  border-left: none;
}

/* Desktop milestone appearance */
.progression_table .progression_milestone {
  font-weight: bold;
}

/* Paragraph spacing */
.progression_table .progression_milestone p,
.progression_table .progression_description p {
  margin-bottom: 0.5rem;
}

.progression_table .progression_milestone p:last-child,
.progression_table .progression_description p:last-child {
  margin-bottom: 0;
}

/* Optional shaded rows */
@media (min-width: 768px) {
  .progression_row_shaded {
    background-color: rgba(0,0,0,.05);
  }
}

/* MOBILE LAYOUT */
@media (max-width: 767px) {

  /* Hide desktop header */
  .progression_table_header {
    display: none;
  }

  /* Turn rows into cards */
  .progression_table .progression_segment {
    margin-bottom: 1rem;
    border: 1px solid #800000;   /* changed */
  }

  /* Remove inner borders */
  .progression_table .progression_milestone,
  .progression_table .progression_description {
    border: none;
  }

  /* Mobile milestone header */
  .progression_table .progression_milestone {
    background-color: #800000;
    color: #FFFFFF;
    font-weight: bold;
  }

  /* Divider between title/content */
  .progression_table .progression_description {
    border-top: 1px solid #C1C1C1;
  }
}

/* Hand size label */
.progression_hand_size {
  font-size: 0.85em;
  font-weight: normal;
  color: #666666;
}

/* Desktop: force next line */
@media (min-width: 768px) {
  .progression_hand_size {
    display: block;
    margin-top: 0.15rem;
  }
}

/* Mobile: keep inline */
@media (max-width: 767px) {
  .progression_hand_size {
    display: inline;
    color: inherit;
  }
}


/* ========================================
      COMPONENT STYLES: TOOLS & TECH
======================================== */

.advantage {
 /* FORMS CONTAINER FOR TOOLS & TECH ADVANTAGES */
  border: 2px solid #800000;
  font-size: 0.70rem;
  padding-top: 8px;
}

.advantage h5 {
 /* FORMATS HEADINGS WITHIN TOOLS & TECH ADVANTAGES */
  font-size: 1.0rem;
  font-weight: 500;
  border-bottom: 1px solid #800000;
  margin-top: 8px;
}

.ssssssadvantage ul {
 /* CONTROLS TOOLS & TECH LIST PLACEMENT */
  margin-left: -20px;
}

.tools_and_tech_methodologies {
  margin-bottom: 80px;
}



/* ========================================
      ERROR STYLES
======================================== */

a.error404,
a.error404:hover,
a.error404:active,
a.error404:focus,
a.slides404,
a.slides404:hover,
a.slides404:active,
a.slides404:focus {
  /* DITHERS AND DISABLES LINKS TO UNFINISHED TOPICS */
  opacity: 0.5;
  text-decoration: none;
  cursor: not-allowed;
  pointer-events: none;
}


/* ========================================
      FOOTER STYLES
======================================== */

.footer-toggle-button {
  background-color: #800000;
  border: 2px solid #800000;
  color: #FFFFFF;

  float: right;
  margin-right: 30px;
  padding: 10px 16px;

  font-weight: 500;
  border-radius: 4px;

  cursor: pointer;
  transition:
    box-shadow 0.25s ease,
    font-weight 0.2s ease,
    transform 0.15s ease;
}

.footer-toggle-button:hover {
  font-weight: 600;
  box-shadow: 0 0 10px rgba(128, 0, 0, 0.6),
              0 0 20px rgba(128, 0, 0, 0.35);
}

.footer-toggle-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.45);
}

.footer-toggle-button:active {
  transform: translateY(1px);
}



.suckmydick_footer_toggle_button_old { background-color: #FFF; border: 0px; color: #800000; float: right; margin-right: 30px; text-decoration: underline; padding: 10px; }

#supplemental_materials .card {
  /* CREATES CONTAINER FOR FOOTER CARDS */
  border: 1px solid #D0D0D0;
  margin-top: 20px;
}

#supplemental_materials .card-header {
  /* STYLES FOOTER CARD HEADERS */
  background-color: #D0D0D0;
  font-weight: 500;
  padding: 8px;
}

#supplemental_materials ul {
  /* REMOVES DEFAULT LEFT MARGIN FROM LIST */
  margin: 0px 8px 10px -20px;
}

#supplemental_materials ol {
  /* REMOVES DEFAULT LEFT MARGIN FROM LIST */
  margin: 0px 8px 10px -20px;
}

#supplemental_materials li {
  /* REMOVES DEFAULT BULLET SPACING */
  padding-top: 0px;
  padding-bottom: 0px;
}

#supplemental_materials h5 {
  /* STYLES INTERNAL HEADINGS */
  font-size: 0.95rem;
  font-weight: 500;
}

#footer.footer-collapsed {
  /* CONTROLS FOOTER STATES (EXPANDED OR COLLAPSED) */
  display: none;
}

#footer.footer-expanded {
  /* CONTROLS FOOTER STATES (EXPANDED OR COLLAPSED) */
  display: block;
  max-height: var(--footer-height, 1000px);
}

#footer {
  /* CAUSES CAROT FLIP TO BE GENTLE */
  transition: all 0.25s ease;
}


#footer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}

#footer-toggle i {
  /* STYLES CHEVRON - CAUSES CAROT FLIP TO BE GENTLE*/
  margin-left: 6px;
  color: #FFFFFF;
  transition: transform 0.25s ease;
}

#footer-toggle i.rotated {
  /* STYLES CHEVRON */
  transform: rotate(180deg);
}

.ft-title-link {
  /* IN REFERENCES LINKS STYLES THE TITLE LINK */
  color: #007bff;
  text-decoration: none;
}

.ft-title-link:hover {
  /* IN REFERENCES LINKS STYLES THE TITLE LINK */
  text-decoration: underline;
}

.ft-ref-print {
  /* IN REFERENCES MAKES URLS PRINTABLE TEXT */
  display: none;
}

@media print {
  /* IN REFERENCES MAKES URLS PRINTABLE TEXT WITH LEADING "AVAILABLE FROM"*/
  .ft-title-link {
    color: black !important;
    text-decoration: none !important;
  }
  .ft-ref-print {
    display: inline;
  }
}

.terminal-footer {
  /* SETS PROPERTIES FOR FIST THEORY FOOTER */
  background: #F1F1F1;
  margin: 30px auto 30px auto;
  padding: 6px;
  color: #800000;
  font-size: 0.75rem;
}
.terminal-footer a::before {
  /* CONTROLS ENCASEMENT BARS */
  content: "|";
  padding-right: 8px;
  color: #800000;
  font-weight: 700;
}

.terminal-footer a::after {
  /* CONTROLS ENCASEMENT BARS */
  content: "|";
  padding-left: 8px;
  color: #800000;
  font-weight: 700;
}


/* ========================================
      TABLES: REFERENCE STAT BOXES
======================================== */

.reference_notes {
  /* STYLES REFERENCE STAT BOX ENCASEMENTS */
  border: 2px solid #800000;
  width: 100%;
  font-size: 0.90rem;
  margin-bottom: 5px;
}

.reference_notes thead {
  /* STYLES REFERENCES STAT BOXES HEADING BAR */
  background-color: #800000;
  color: #FFF;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.20rem;
  border: none;
}

.reference_notes td,
.reference_notes th {
  /* REMOVES INTERNAL BORDERS IN REFERENCES STAT BOXES (ANATOMY) */
  border: none;
}


/* ========================================
      TABLES: SIDEBAR TABLES
======================================== */

.table_side th, .table_side td {
  padding: 5px 10px;
  font-size: 0.75rem;
}




/* ========================================
      TABLE RESPONSIVE
======================================== */

.table-sm td, .table-sm th {
  /* OVERRIDES FONT SIZE IN BOOTSTRAP 4 table-sm STYLE */
  font-size: 0.85rem;
  padding: 3px 8px 3px 8px;
}

thead {
  /* OVERRIDES FONT AND BACKGROUND IN BOOTSTRAP 4 thead STYLE */
  font-weight: 550;
  background-color: #D1D1D1;
}





/* ========================================
      TABLES: CAPTIONS AND LEGENDS
======================================== */

.table_caption, .table_legend {
  /* CREATES CAPTION CONTAINER */
  background-color: #efefef;
  padding: 12px;
  margin: 5px 0px 20px 0px;
  font-size: 0.8rem;
  color: #000000;
}

.table_caption h6, .table_legend h6 {
  /* STYLE CAPTION HEADING */
  color: #800000;
  font-size: 0.8rem;
}

.table_legend p {
  /* REMOVES DEFAULT PARAGRAPH SPACING IN LEGENDS */
  padding: 2px 0px 0px 0px;
  margin: 0px;
}

.table_caption p:last-child, .table_legend p:last-child {
  /* STYLE CAPTION HEADING */
  margin-bottom: 0rem;
}

.table_caption_reference {
  /* DISTINGUISH CAPTION REFERENCES WITH BORDER AND INDENTATION */
  font-size: 0.8rem;
  padding: 5px 0px 0px 15px;
  border-top: 1px solid #cfcfcf;
}

.table_caption_reference li {
  /* FORMAT CAPTION REFERENCES AS UPPER-ALPHA ITALIC LIST */
  list-style-type: upper-alpha;
  margin-top: 0;
  margin-bottom: 0;
  font-style: italic;
}

.table_legend dl dt {
  /* MAKES DT / DL APPEAR ON SAME LINE */
  display: inline;
  font-style: italic;
  font-weight: normal;
}

.table_legend dl dd {
  /* MAKES DT / DL APPEAR ON SAME LINE */
  display: inline;
  margin-left: 0;

}

.table_legend dl dd::before {
  /* ADDS PIPE BETWEEN DT / DD */
  content: " | ";
}

.table_legend dl dd::after {
  /* CONTROLS MARGIN/PADDING IN DEFINITON COMBO */
  content: "";
  display: block;
  height: 8px;
}

.table_legend h5 {
  /* OVERRIDES H5 CAPTIONING IN LEGEND DETAILED EXPLANATIONS */
  border-bottom: 1px solid #800;
  font-size: .7rem;
  font-weight: 600;
}

.legend_icons {
  /* SETS FONT AWESOME COLOR BLIND KEY SIZE IN LEGENDS */
  font-size: 0.7rem;
  vertical-align: -0.025rem;
}






/* ========================================
      COURSE APPENDICES
======================================== */

#course_appendix {
  /* FORMATS ENCASEMENT FOR APPENDICES */
  border: 2px solid #C0C0C0;
  background-color: #F1f1f1;
  padding: 30px;
  margin: 10px 0px;
  font-size: 0.80rem;
}

#course_appendix > p:first-of-type {
 /* FORMATS TITLE */
 font-size: 2.5rem;
 font-weight: 600;
}

.l1_outline { margin: 0px 0px 0px 10px;}
.l2_outline { margin: 0px 0px 0px 50px;}
.l3_outline { margin: 0px 0px 0px 90px;}
.l4_outline { margin: 0px 0px 0px 130px;}






/* =====================================================
          GUTTERS - MULTII-IMAGE SMALL

          NOT SURE IF THIS IS USED
   ===================================================== */

/* XS — default */
.row.gutter-r {
  margin-left: -4px;
  margin-right: -4px;
}

.row.gutter-r > [class*="col"] {
  padding-left: 4px;
  padding-right: 4px;
}

/* SM ≥576px */
@media (min-width: 576px) {
  .row.gutter-r {
    margin-left: -8px;
    margin-right: -8px;
  }
  .row.gutter-r > [class*="col"] {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* MD ≥768px */
@media (min-width: 768px) {
  .row.gutter-r {
    margin-left: -12px;
    margin-right: -12px;
  }
  .row.gutter-r > [class*="col"] {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* LG ≥992px */
@media (min-width: 992px) {
  .row.gutter-r {
    margin-left: -15px;
    margin-right: -15px;
  }
  .row.gutter-r > [class*="col"] {
    padding-left: 15px;
    padding-right: 15px;
  }
}


/* ========================================
      PROCEDURES
======================================== */

/* NOT SURE IF THIS IS BOTH OLD AND NEW STYLES */

.procedures_category_and_name h1 {
  /* FORMATS NAME OF PROCEDURE - BUT CAN EVENTUALLY BE DELETED AS TOPICS PORT (as this changes to H3 instead) */
  font-size: 1.25rem;
  color: #00008F;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  display: inline;
}

.procedures_category_and_name h3 {
  /* FORMATS NAME OF PROCEDURE */
  font-size: 1.25rem;
  color: #00008F;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  display: inline ;
  border-bottom: none; /* cancels the default h3 border */
}

.procedures_category_and_name h1:hover {
  /* FORMATS NAME OF PROCEDURE ON HOVER -- CAN BE DELETED ONCE ALL TOPICS ARE PORTED (CHECK POP UP TOC)*/
  text-decoration:underline;
}

.procedures_category_and_name h3:hover {
  /* FORMATS NAME OF PROCEDURE ON HOVER */
  text-decoration:underline;
}


.procedures_category_and_name h2 {
  /* FORMATS WORD "PROCEDURE..." JUST ABOVE H1 TO BE DELETED AFTER ALL TOPICS PORTED CHECK TOC */
  font-size: 0.75rem;
  color: #C1C1C1;
  margin: 0px;
  padding: 4px 0px 0px 0px;
}

.procedures_category_and_name p:first-child {
  /* FORMATS WORD "PROCEDURE..." JUST ABOVE H1 */
  font-size: 0.75rem;
  color: #C1C1C1;
  margin: 0px;
  padding: 2px 0px 0px 0px;
}


.procedures_category_and_name h2:hover {
  /* CAUSES WORD "PROCEDURE..." TO CHANGE COLOR ON HOVER can be deleted after port see expandable toc */
  color: #00008F;
}

.procedures_category_and_name p:first-child:hover {
  /* CAUSES WORD "PROCEDURE..." TO CHANGE COLOR ON HOVER */
  color: #00008F;
}

.procedures_down_line {
  /* EXISTS BUT DON'T KNOW WHAT IT AFFECTS ----= UPDATE: CONTROLS VERTICAL LINE TO SOME DEGREE POSSIBLY*/
  margin-left: 0px;
}

.procedures_flat_line {
  /* CONTROLS LINE UNDER H2-H1 PROCEDURE ITEM */
  border-bottom: 2px solid #800000;
  padding: 0px;
}

.procedures_carat_major {
  /* CONTROLS SPACING AROUND FLIP BUTTON (MAY GO AWAY WITH CHATGPT ENHANCEMENTS */
  text-align: right;
  padding: 0px;
  margin: 0px;
}

.procedures_carat_major i {
  /* CONTROLS SIZE OF FLIP BUTTON (MAY GO AWAY WITH CHATGPT ENHANCEMENTS */
  font-size: 24px;
  color:#800000;
}

.procedure_block {
  /* CONTROLS RED LINE AT BOTTOM OF PROCEDURE  */
  background-image: url('/bs-images/university/general/g_bullet_spacer_800000.png');
  background-position: 15px;
  background-size: 2px auto;
  background-repeat: repeat-y;
  margin-bottom: 20px;
}

.procedures_number ul {
  /* LOOKS like it encases each individual procedure (just the procedure fist button and h1 and h2 names ) */
  list-style: none;
  margin: 0;
  padding: 0 0rem;
}

.procedures_number ul li {
  /* CONTROLS THE FIST BOX AND H1 AND H2 IN PROCEDURE LIST; the image here is likely redundant and this style needs to be chected to see if it controls spacing at all */

  margin-bottom: 0.5rem;
  display: flex;
  align-items: bottom;
  padding: 0px;
}

.procedures_number ul li:before {
  /* CONTROLS THE BOX ENCASING THE FIST AND THE FIST INSIDE IT */
  content: counter(fisting-steps);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00008F;
  border: 2px solid #800000;
  padding: 1rem;
  height: 45px;
  width: 80px;
  font-size: 0.01rem;
  font-weight: 600;
  margin-right: 1rem;
  margin-left: 0px;
  background-color: white;
  background-image: url('/bs-images/university/general/g_bullet_fist_small.png');
  background-repeat: no-repeat;
  background-position: center;
}

  .procedures_supplies_card {
  /* SETS CARD ENCASEMENT IN QUICK REFREENCE */
  border: 2px solid #00008b;
  margin: 0px 0px 20px 0px;
  font-size: 0.90rem;
  min-width: 200px;
}

.procedures_supplies_card .card-header {
  /* STYLES QUICK REFERENCE HEADER */
  background-color: #00008b;
  font-weight: 600;
  padding: 10px;
  font-size: 1.2rem;
  color: #ffffff;
  text-transform: uppercase;
}

.procedures_supplies_card ul {
	/* FORMATS LIST START POINT FROM BORDER IN SUPPLIES BOX */
  margin: 0px 0px 0px -20px;
}

.procedures_supplies_card ul li {
	/* CONTROLS BULLET SPACING IN SUPPLIES BOX */
  padding: 2px;
	font-size: 0.85rem;
	padding-right: 15px;
}

.procedures_mainframe {
  /* STYLES BOX CONTAINING ACTUAL PROCEDURE */
  border: 2px solid #800000;
  padding: 15px;
  margin-left: 15px;
  margin-bottom: 50px;
}

.procedures_supplemental_materials {
  /* FORMATS VIDOE AND PRINT DISPLAY */
  text-align: center;
}

.procedures_addendum {
  /* FORMATS ADDENDUM BOX AFTER PROCEDURE INSTRUCTIONS */
  background-color: #F1F1F1;
  border: 2px solid #800000;
  padding: 15px;
}

.procedures_addendum h4 {
  /* FORMATS ADDENDUM BOX HEADER */
  color: #800000;
  font-size: 1.0rem;
  padding: 0px;
  margin: 0px;
}

.procedures_addendum p {
  /* FORMATS ADDENDUM BOX CONTENT */
  padding: 6px;
  font-size: 0.85rem;
  margin: 0px;
}

.procedure_title_space {
  /* NOT USED */
  margin-bottom: 0px;
}

retiring.procedures li {
  /* PROBABLY NEEDS MORE SPECIFICITY */
  margin-bottom: 10px;}

  @media (max-width: 600px) {
    /* HIDES PRINT MENU TEXT IN PROCEDURES ON SMALL SCREENS */
    .too_big {
      display: none;
    }
  }

  .step-fig { position:relative; display:inline-block; }
  .step-fig img{ display:block; width:100%; border-radius:.25rem; }
  .step-fig figcaption{
    position:absolute; left:0; right:0; bottom:0;
    padding:.5rem .75rem; text-align:center; font-weight:700;
    color:#800000; background:rgba(177,177,177,.3);
    border-bottom-left-radius:.25rem; border-bottom-right-radius:.25rem;
    pointer-events:none;
  }


  /* ========================================
        MANUFACTURER'S BEST PRACTICES
  ======================================== */

      .manufacturer_logo_selection_set {
        /* CONTROLS MANUFACTURER LOGO SELECTION STYLES */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        padding: 20px;
      }

      .manufacturer_logo_selection_set a img {
        /* CONTROLS SIZE AND SPECIAL FEATURES OF LOGO ICONS IN SELECTION */
        width: 85px;
        height: auto;
        cursor: pointer;
        transition: transform 0.2s ease-in-out;
      }

      .manufacturer_logo_selection_set a img:hover {
        /* INCREASES MANUFACTURER LOGO SELECTION ON HOVER */
        transform: scale(1.1); }

      .manufacturer_dropdown {
        /* CONTROLS THE MANUFACTURER DROPDOWN SELECTION */
        display: none;
        text-align: center;
        margin: 20px;
      }

      @media (max-width: 768px) {
        /* HIDES LOGO ICONS ON SMALL SCREENS - RETURNS DROPDOWN INSTEAD */
        .manufacturer_logo_selection_set { display: none; }
        .manufacturer_dropdown { display: block; }
      }









/* ========================================
      MULTIMEDIA VIDEOS (EMBEDED)
======================================== */

.film_frame {
  width: 100%;
  border: 2px solid #800000;
}

.film_frame iframe,
.film_frame video {
  /* SETS VIDEO SIZE AND BORDER */
  width: 100%;
  height: 100%;
  border: 4px solid #fff;
  display: block;
}

.film_provider {
  /* SETS BOTTOM RIGHT LOGO PLACEMENT */
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.film_16x9 {
  /* SETS YOUTUBE-LIKE WIDE SIZING */
  aspect-ratio: 16 / 9;
}

.film_9x16 {
  /* SETS TIKTOK-LIKE TALL SIZING */
  aspect-ratio: 9 / 16;
}

.film_1x1  {
  /* SETS VARIANT SIZING */
  aspect-ratio: 1 / 1;
}


/* ==========================================
      COURSE INDICES (IN ESSENTIALS TOPICS)
============================================= */

.course_index table td:nth-child(2) {
  /* CONTROLS WIDTH OF COURSE NAME COLUMN */
  word-wrap: break-word;
  min-width: 200px;
  max-width: 300px;
}

.course_index table td:nth-child(3) {
  /* CONTROLS WIDTH OF SKILL LEVEL COLUMN */
  word-wrap: break-word;
  min-width: 150px;
  max-width: 159px;
}

.course_index table td:nth-child(4) {
  /* CONTROLS WIDTH OF DESCRIPTION COLUMN */
  word-wrap: break-word;
  min-width: 400px;
  max-width: 550px;
}

.ft-course-inactive {
  /* DITHERS COURSES MARKED INACTIVE IN THE COURSES.JSON */
  opacity: 0.45;
}

.ft-course-inactive a {
  /* REMOVES ABILITY TO SELECT INACTIVE COURSE IN COURSE INDEX */
  pointer-events: none;
  text-decoration: none;
  color: inherit;
}

.ft-badge {
  /* MARKS A COURSE AS IN DEVELOPMENT - PART I */
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  margin-left: 6px;
  border-radius: 999px; /* pill shape */
  vertical-align: middle;
  line-height: 1.2;
}

.ft-badge-dev {
  /* MARKS A COURSE AS IN DEVELOPMENT - PART II */
  color: #ffffff;
  background-color: #800000;
  border: 1px solid #d2d2d2;
}


/* ==========================================
      LUBRICATION DATA SHEETS
============================================= */

.data_sheet_referral {
  /* STYLES THE REFERRAL BLOCK TO SKIP TO THE ACTUAL DATA SHEET */
  background-color: #f1f1f1;
  padding: 10px;
  border: 3px solid #c1c1c1;
  font-size: 0.8rem;

}

.data_sheet_referral .btn {
  /* STYLES THE BUTTON IN THE REFERRAL SECTION */
  background-color: #03bafc;
  color: #fff;
  font-size: 1rem;
  display: table;
  margin: 0 auto;
  width: auto;
}

.data_sheet_referral .btn:hover {
  background-color: #02a5df;
}

.data_sheet {
  /* CREATES THE ENCASEMENT */
  border: 3px solid #03bafc;
  background: #F1F1F1;
}

.data_sheet_bar {
  /* STYLES THE ENCASEMENT HEADER BACKGROUND */
  background: #03bafc;
  padding: .75rem 1rem;
}

.data_sheet_bar h2 {
  /* STYLES THE ENCASEMENT HEADER TYPOGRAPHY */
  margin: 0;
  padding: 0;
  font-size: 1.4rem;
  color: #fff;
  font-weight: 600;
}

.data_sheet_body {
  /* ADDS PADDING TO ENCASEMENTS */
  padding: 1rem;
}

.data_sheet_panel {
  /* STYLES PANEL BOXES IN DATA SHEETS */
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.data_sheet_panel_title {
  /* STYLES PANEL HEADER TYPOGRAPHY */
  font-size: 1.3rem;
  font-weight: 700;
  color: #800000;
  margin-bottom: .75rem;
}

.data_sheet_panel_general {
  /* COLORS GENERAL PANEL */
  background: #f7dede;
}

.data_sheet_panel_safety {
  /* COLORS SAFETY PANEL */
  background: #f3e8d9;
}

.data_sheet_panel_sanitation {
  /* COLORS SANITATION PANEL */
  background: #d9e7ff;
}

.data_sheet_panel_value {
  /* COLORS VALUE PANEL */
  background: #e0f6ea;
}

.data_sheet_panel_availability {
  /* COLORS AVAILABILITY PANEL */
  background: #ffffe5;
}

.data_sheet_panel_notes {
  /* COLORS NOTES PANEL */
  background: #e5ffff;
}

.data_sheet_pairs {
  /* CONTROLS DATA PANEL ENCASEMENT */
  margin: 0;
}

.data_sheet_pairs dt {
  /* CONTROLS DATA LIST TYPOGRAPHY - LABEL */
  font-weight: 600;
}

.data_sheet_pairs dd {
  /* CONTROLS DATA LIST TYPOGRAPHY - VALUE */
  margin: 0 0 .75rem 0;
}

.data_sheet_pairs_inline dt,
.data_sheet_pairs_inline dd {
  /* PUTS DT AND DD ON SAME LINE */
  display: inline;
}

@media (max-width: 991.98px) {
.data_sheet_pairs_inline dt,
.data_sheet_pairs_inline dd {
  /* OVERRIDES HARD RETURNS ON SMALL SCREENS */
  display: block;
  }
.data_sheet_pairs_inline dd {
  /* FOR<ATS ENCASEMENTS ON SMALL SCREENS */
  margin: 0 0 .75rem 0;
  }
}

.data_sheet_panel_subtitle {
  /* STYLES CHECKLIST HEADINGS */
  font-weight: 600;
  margin-top: .75rem;
  margin-bottom: 0px;
}

.data_sheet_panel_note {
  /* STYLES NOTE ENCASEMENT AND TYPOGRAPHY IN SAFETY PANEL */
  border: 1px solid #ccc;
  background: #ffffff;
  padding: .5rem .75rem;
  font-size: .8rem;
  margin: .75rem 0;
}

.data_sheet_panel_note p {
  /* REDUCES INHERENT P MARGIN IN SAFETY NOTE */
  margin-bottom: 0.25rem;
}

.data_sheet_panel_split {
  /* CREATES TWO COLUMN LAYOUT IN DATASHEET */
  margin-top: .75rem;
}

.data_sheet_inline_pair {
  /* MANUAL BLOCKING OVERRIDE ON A DL PAIR */
  display: inline-block;
}

@media (max-width: 991.98px) {
.data_sheet_inline_pair {
  /* MANUAL BLOCKING OVERRIDES ON A DL PAIR */
  display: block;
  }
}



.scrollable-json {
max-height: 400px;      /* Set your desired max height */
overflow-y: auto;       /* Enable vertical scrolling */
padding-right: 10px;    /* Optional: prevent content flush against scrollbar */
overflow-x: hidden;      /* prevent horizontal scroll */
word-wrap: break-word;   /* wrap long words/URLs */
white-space: normal;     /* override nowrap or <pre> if applied */
scrollbar-gutter: stable; /* if supported */
}


:root {
  --scroll-margin-top: 40px;     /* adjust to match your fixed header height */
  --scroll-margin-bottom: 48px;  /* optional: adjust for sticky footer/chat bar */
}

[id],
:target,
section,
article,
.card-header,
footer,
h1, h2, h3, h4, h5, h6 {
  scroll-margin-top: var(--scroll-margin-top);
  scroll-margin-bottom: var(--scroll-margin-bottom);
}

@media (prefers-reduced-motion: reduce) {
  .collapsing { transition: none !important; }
}

.form-control {
  border-color: #80bdff; /* Light blue border */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Light blue shadow */
}

/* Dark red border and shadow when focused */
.form-control:focus {
  border-color: #800000; /* Dark red border when focused */
  box-shadow: 0 0 0 0.2rem rgba(128, 0, 0, 0.25); /* Dark red shadow when focused */
}

.filter_border {
  border: 1px solid #C1C1C1; /* Set the border style, color, and width */
  padding: 20px; /* Add padding to create space between content and border */
  position: relative; /* Set position to relative for absolute positioning of title */
}
.filter_label {
  background-color: #fff; /* Set background color to match the page background */
  padding: 0 10px; /* Add padding to the title */
  position: absolute; /* Position title absolutely within the bordered div */
  top: -12px; /* Adjust the top position to overlap with the border */
  left: 10px; /* Adjust the left position to align with the border */
}



.blink {
  animation: blinker 1.0s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.danger {
  /* CREATES A FLASHING DANGER TEXT WITH @KEYFRAMES FLASH */
  font-weight: bold;
  animation: flash 4s infinite;
}

@keyframes flash {
  /* ESTABLISHES BLINKING PATTERN IN SOME WARNINGS */
  0% { color: red; }
  50% { color: transparent; }
  100% { color: red; }
}





.resource_category_image { border: 2px solid #D1D1D1; }
.resource_category_name { text-align: center; color: #800000; background-color: #D1D1D1; font-weight: 500; font-size: larger; padding: 20px;}
.resource_category_description { background-color: #D1D1D1; margin-bottom: 60px; padding: 15px 15px 5px 15px; font-size: smaller; min-height: 190px;}




.chem {font-size: 0.80rem;}
.chem h5 {border-bottom: 2px solid #800000; font-size: 0.90rem;}
.substance {border: 4px solid #000000; padding: 0px; margin: 0px 0px 25px 0px; width: 100%;}
.substance p:nth-child(1) {font-size: 1.25rem; margin: 5px 0px 0px 10px; padding: 0px 0px 0px 0px;}
.substance p:nth-child(2) {font-size: 4.0rem; font-weight: bold; text-align: center; line-height: 80%; margin-top: 15px; }
.substance p:nth-child(3) {font-size: 1.5rem; font-weight: bold; text-align: center; margin: 15px 0px 0px 0px; }
.substance p:nth-child(4) {font-size: 1.0rem; text-align: center; margin: 0px 0px 10px 0px; }
.category {border: 2px solid #800000; background-color: #F1F1F1; text-align: right; padding: 20px; margin: 30px 0px 0px 0px;}
.category h2 {padding: 0px; margin: 0px 0px 0px 0px;}
.category h3 {padding: 0px; margin: 0px; border-bottom: none; font-size: 1.25rem;}
.risk {color: red;}
.proposed {font-size: 0.75rem;}
.box {margin-bottom: 65px; }
.columnar {margin-bottom: 0px;}
.drug_picture {display: flex; justify-content: center; align-items: center; padding-bottom: 10px; width: 100%;}
.mginty p:nth-child(1) {margin-bottom: 8px;}
.mginty p:nth-child(2) {margin-bottom: 0px;}
.step_block {border: 2px solid #800000; padding: 15px; margin-left: 15px; margin-bottom: 25px;}




.json_title { font-weight: bold;}
.update-item p { margin-bottom: 0px; font-size: 0.75rem; }
.update-item { border: 2px solid #800000; background-color: #F1F1F1; margin: 10px; padding: 10px; }
.btn-course-small {padding: 5px; font-size: 0.75rem; margin: 2px 0px 2px 0px; width: 100%; font-weight: bold; }
@media (max-width: 576px) {
  .btn-course-small {
    margin-top: 10px;
  }
}













/* -------------------------------LUBRICATION BASES---------------------------- */

.lubrication_bases_msds {
  width: 130px;
  height: 130px;
  margin-right: 30px;
  margin-bottom: 20px;
  text-align: center; /* Center the content horizontally */
  display: inline-block;
}

.lubrication_bases_msds a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}




@media (max-width: 767.98px) { .lubrication_bases_msds_center_content { text-align: center; } }

.photo-lubrication {border: 2px solid #800000; width: 100%; padding: 2px; }


.lube-detail-information {margin-top: 60px;}





.xxxdata-sheet-full { border: 3px solid #03bafc; background-color: #F1F1F1; }

.xxxdata-sheet-full h1 { font-size: 1.2rem; color: #800000; margin: 0px; padding: 0px; }

.xxxdata-sheet-full h2 { font-size: 1.0rem; color: #000000; margin: 0px; padding: 0px; font-weight: bold; }

.xxxdata-sheet-full h3 { font-size: 1.0rem; color: #000000; margin: 0px; padding: 0px; font-weight: bold; display: inline; border-bottom: none;}

.xxxdata-sheet-full h3 + p { display: inline-block; padding-bottom: 8px;  margin-bottom: 8px;}

.xxxdata-sheet-head { background-color: #03bafc; }

.xxxdata-sheet-head p { margin: 3px; font-size: 1.5rem; color: #FFFFFF; }

.xxxdata-sheet-general { padding: 10px; margin: 5px; background-color: #f2d9d9; }

.xxxdata-sheet-safety { padding: 10px; margin: 5px; background-color: #f2e6d9; }

.xxxdata-sheet-sanitation { padding: 10px; margin: 5px; background-color: #ccddff;}

@xxxmedia (max-width: 767.98px) {.data-sheet-sanitation { margin-top: 30px;}
}

.xxxdata-sheet-marketing { padding: 10px; margin: 5px; background-color: #ffffe6; }

.xxxdata-sheet-value { padding: 10px; margin: 5px; background-color: #d9f2e6; }

.xxxdata-sheet-compatibility { padding: 10px; margin: 5px; background-color: #ccffff; }

.xxxdata-sheet {background-color: #F1F1F1; padding: 10px; border: 3px solid #C1C1C1; font-size: 0.8rem; margin-bottom: 20px; margin-top: 15px;}

.sssssssdata-sheet p {font-size: 1.0rem; color: blue; text-decoration: underline; margin-bottom: 0px; }

.xxxdata-sheet ul { margin: 0px; padding-left: 20px; }

xxxul.fa-ul-indent {padding-left: 10px; }

h4.text_wrap  {padding-top: 10px; font-size: 0.75rem;}


.lubrication_evaluation .card-body {
  /* STYLES BORDER OF EVALUATION CARDS */
  border: 2px solid #800000;
}

.lubrication_evaluation .card-header {
  /* STYLES EVALUATION CARD HEADERS */
  font-size: 1.25rem;
  font-weight: 600;
  padding: 0px 10px 0px 10px;
  color: #fff;
  background-color: #800000;
}

.lubrication_evaluation p:nth-of-type(odd) {
  /* STYLES THE LABEL IN EVALUATION TABLES */
  border-bottom: 1px solid #800000;
  font-size: 0.90rem;
  font-weight: 500;
  padding: 0px;
  margin: 0px;
}

.lubrication_evaluation p:nth-of-type(even) {
  /* STYLES THE FISTS IN THE RATINGS */
  font-size: 1.5rem;
  margin-bottom: 0px;
  padding-left: 10px;
}

.lubrication_evaluation_legend {
  /* STYLES LEGEND FOR EVALUATION ON INDIVIDUAL BASE PAGES */
  display: grid;
  grid-template-columns: 9ch auto; /* fixed fist column */
  font-size: 0.75rem;
  column-gap: 3ch;
}

.lubrication_evaluation_legend > div:nth-child(odd) {
  /* KEEPS LEGEND FISTS IN ONE LINE */
  white-space: nowrap;
}





.lube-matrix-equalizer { height: 1px; width: 70px; display: block; opacity: 0.0; /* THIS STYLE SHOULD BE IN PAGE STYLE & IF MULTIPLE TABLES WILL NEED DUPLICATION AND RENAMING */}
.lube-matrix-equalizer-first { height: 1px; width: 120px; display: block; opacity: 0.0; /* THIS STYLE SHOULD BE IN PAGE STYLE & IF MULTIPLE TABLES WILL NEED DUPLICATION AND RENAMING */}

.lube-matrix p { margin: 0px; padding: 0px; }

.lube-matrix thead th { border-bottom: none; vertical-align: middle;}

.lube-matrix thead:nth-child(2) th  { border-bottom: none; height: 90px; line-height: 100%;  vertical-align: middle; writing-mode: vertical-rl; transform: rotate(270deg); font-weight: normal; font-size: 0.75rem;}

.lube-matrix td, .lube-matrix th { text-align: center; font-size: 0.85rem; border: 1px solid #EFEFEF; width: 12%; padding: 3px; vertical-align: middle;}

.lube-matrix td:first-child { text-align: left; }

.lube-matrix th:nth-child(1)  { text-align: left; }

.lube-matrix thead th  { font-weight: 550; }

.lube-matrix thead { background-color: #C1C1C1;}

.lube-matrix thead tr:first-child th:first-child { background-color: #C1C1C1; padding-left: 8px; }

.lube-matrix tbody tr:nth-child(odd) { background-color: #FFF; padding-left: 8px; }

.lube-matrix tbody tr:nth-child(odd) td:first-child  { background-color: #FFF; padding-left: 8px; }

.lube-matrix tbody tr:nth-child(even) { background-color: #F4F4F4; padding-left: 8px;}

.lube-matrix tbody tr:nth-child(even) td:first-child { background-color: #F4F4F4; padding-left: 8px;}

.lube-matrix td:first-child, .matrix th:first-child { position: sticky; left: 0px; -webkit-sticky; /* Safari */}




.troubleshoot {color: #000000;}
.troubleshoot:hover {text-decoration:none;}

/* Blink the text color. Adjust --blink-duration or --blink-color if you like */
time.blink-updated {
  --blink-duration: 1.5s;
  --blink-color: red;
  animation: ft-blink var(--blink-duration) steps(1, end) infinite;
}

@keyframes ft-blink {
  0%, 100% { color: inherit; }
  50%      { color: var(--blink-color); }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  time.blink-updated {
    animation: none;
    /* choose: either keep it steady red or inherit; here we keep it steady */
    color: var(--blink-color);
  }
}












/* ========================================
      MASTHEAD STYLES (PHP)
======================================== */

/* Global Vars ----------------------------------------------- */
:root {
  --logo-h: 5rem;           /* desktop logo height */
  --logo-aspect: 2.2;       /* width = height × aspect */
  --logo-gap: 16px;         /* space between logo and title */
}

/* Masthead Outer -------------------------------------------- */
.ftmh {
  --ftmh-notch: 36px;       /* angled end depth (desktop/tablet) */
  background: #800000;
  position: relative;
  clip-path: polygon(
    var(--ftmh-notch) 0,
    calc(100% - var(--ftmh-notch)) 0,
    100% 50%,
    calc(100% - var(--ftmh-notch)) 100%,
    var(--ftmh-notch) 100%,
    0 50%
  );
}

/* Masthead Inner Container ---------------------------------- */
.ftmh-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px max(16px, var(--ftmh-notch)); /* protects angled cuts */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;          /* allows subtitle to drop */
}

/* Logo ------------------------------------------------------- */
.ftmh-logo {
  height: var(--logo-h);
  width: auto;
  display: block;
}

/* Text Stack ------------------------------------------------- */
.ftmh-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ftmh-title,
.ftmh-subtitle {
  margin: 0;
  line-height: 1;
  text-align: center;
}

/* Title ------------------------------------------------------ */
.ftmh-title {
  color: #fff;
  font-size: 6rem;
  font-weight: 725;         /* fallback handled by font */
  padding: 0;
}

/* Subtitle --------------------------------------------------- */
.ftmh-subtitle {
  color: #fff;
  font-size: 2rem;
  letter-spacing: 0.5rem;
  margin-top: 4px;
  font-weight: 500;
}

/* ========== Small Screens ================================== */
@media (max-width: 640px) {

  /* remove angled ends */
  .ftmh {
    clip-path: none;
  }

  /* normal padding */
  .ftmh-inner {
    padding: 8px 16px;
  }

  /* promote text to outer flex flow */
  .ftmh-text {
    display: contents;
  }

  .ftmh-logo {
    order: 1;
    height: 4rem;
    padding-top: 8px;
  }

  .ftmh-title {
    order: 2;
    white-space: nowrap;
    font-size: 3.2rem;
  }

  .ftmh-subtitle {
    order: 3;
    flex-basis: 100%;
    margin-top: 8px;
    padding-bottom: 8px;
    font-size: 1.1rem;
    letter-spacing: 0.25rem;
  }
}

/* ========== Very Narrow Phones ============================= */
@media (max-width: 420px) {
  .ftmh-subtitle {
    letter-spacing: 0.2rem;
  }
}

/* ========================================
      MASTHEAD NAVIGATION STYLES (PHP)
======================================== */

/* ---------- Desktop / Base ---------- */
.ftnav {
  --ft-accent: #800000;   /* underline color */
  --ft-grey:   #6b6b6b;   /* base link color */
  --ftnav-spacer: calc(
    var(--logo-h, 5rem) *
    var(--logo-aspect, 2.2) +
    var(--logo-gap, 16px)
  );

  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  background: #fff;
}

.ftnav .container {
  display: flex;
  align-items: center;
}

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

.ftnav-spacer {
  flex: 0 0 var(--ftnav-spacer);
}

/* ---------- Links + Burgundy Underline ---------- */
.ftnav-list .nav-link {
  position: relative;
  color: var(--ft-grey) !important;
  font-weight: 600;
  padding: .55rem .9rem;
  text-decoration: none;
  outline: 0;
  border: 0;
}

.ftnav-list .nav-link::after {
  content: "";
  position: absolute;
  left: .6rem;
  right: .6rem;
  bottom: .35rem;
  height: 2px;
  background: var(--ft-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

.ftnav-list .nav-link:hover::after,
.ftnav-list .nav-link:focus::after,
.ftnav-list .nav-link.is-current::after {
  transform: scaleX(1);
}

/* ---------- “Menu” Button (Mobile Toggle) ---------- */
.ftnav-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .7rem;
  background: #800000;
  color: #fff;
  border: 0;
  border-radius: .175rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, transform .1s ease;
  font-variant: small-caps;
}

/* Force correct color against Bootstrap overrides */
.navbar-light .navbar-toggler.ftnav-menu-btn,
.ftnav .ftnav-menu-btn {
  color: #fff !important;
}

.ftnav .ftnav-menu-btn:hover,
.ftnav .ftnav-menu-btn:focus {
  background: #6d0000;
}

.ftnav .ftnav-menu-btn:active {
  transform: translateY(1px);
}

.ftnav .ftnav-menu-btn:focus {
  outline: 2px solid rgba(128, 0, 0, .35);
  outline-offset: 2px;
}

/* ---------- Hamburger Icon ---------- */
.ftnav-burger,
.ftnav-burger::before,
.ftnav-burger::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  content: "";
  position: relative;
  transition: transform .2s ease, opacity .2s ease, background .2s ease;
}

.ftnav-burger::before {
  position: absolute;
  top: -6px;
  left: 0;
}

.ftnav-burger::after {
  position: absolute;
  top: 6px;
  left: 0;
}

/* Morph to X when expanded */
.navbar-toggler[aria-expanded="true"] .ftnav-burger {
  background: transparent;
}

.navbar-toggler[aria-expanded="true"] .ftnav-burger::before {
  transform: translateY(6px) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .ftnav-burger::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* ======================= Mobile Flyout ======================= */
@media (max-width: 767.98px) {

  /* kill desktop spacer */
  .ftnav {
    --ftnav-spacer: 0px;
  }

  /* right-docked panel */
  #ftnavCollapse {
    position: absolute;
    top: calc(100% + .25rem);
    z-index: 1050;
    width: min(90vw, 18rem);
    background: #fff;
    margin-left: 90px;
  }

  /* stack items full width */
  .ftnav-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    margin: 0;
  }

  /* right-aligned links */
  .ftnav-list .nav-link {
    display: block;
    width: 100%;
    text-align: right;
    font-size: .95rem;
    font-weight: 600;
    color: #555 !important;
    padding: .25rem 1rem .25rem .75rem;
  }

  /* underline aligns right */
  .ftnav-list .nav-link::after {
    left: auto;
    right: 1rem;
    width: 100%;
    bottom: .2rem;
    transform: scaleX(0);
    transform-origin: right center;
  }

  .ftnav-list .nav-link:hover::after,
  .ftnav-list .nav-link:focus::after,
  .ftnav-list .nav-link.is-current::after {
    transform: scaleX(1);
  }
}