@charset "utf-8";
/* CSS Document */ 



/* CURRENT ADMINISTRATION CUSTOMIZATION CSS */
h1, h2, h3, h4, h5 {font-family: 'century gothic', sans-serif;}

.covid-title {color: #B22222; font-weight: normal;}
.dropdown-header, .title {color: #C19A6B !important;}

/* NOTE: remove colors when you want to use the dark and light */
.navbar { background-color: #1f4423; font-family: 'century gothic', sans-serif;} 
.navbar-light .navbar-nav .nav-item .nav-link {color: var(--bs-white);}

@media (max-width: 991.98px) {
  .navbar-light .navbar-nav .nav-item .nav-link {
    color: var(--bs-gray-500);
    font-weight: 500;
  }
}
.navbar-stick:not(.navbar-dark) {background: #1f4423;}

/* Main Menu uppercase text */
.ucf {text-transform: uppercase;}

.logo { width: 15%;}

@media (max-width: 576px) {
    .sidebar-text { display: none; }
    .sidebar-icon { padding: 0 7px; border-radius: 7px; font-size: 1em; }
}

/* mimics the dropdown-divider in the theme template */ 
/* Sidebar divider (works outside .dropdown-menu) */
hr.sidebar-divider {
  border: 0; /* reset any normalize/Bootstrap rules */
  border-top: 1px solid var(--bs-border-color, #e2e8f0); /* fallback color */
  margin: 0.5rem 0; /* explicit margin;  */
  opacity: 1;
}


/* Default links: no underline; added font-weight to see if this passes the compliance checker */
a {
    text-decoration: none;
    font-weight: 500; 
}

/* Hover/focus for normal links, but NOT buttons */
a:hover,
a:focus,
a:focus-visible {
    text-decoration: underline;
}

/* Exclude anything with btn class */
a.btn:hover,
a.btn:focus,
a.btn:focus-visible {
    text-decoration: none;
} 

/* ---------- KEYBOARD VISIBLE FOCUS ---------- */
/* main menu */
.nav-item:focus-visible, .dropdown:focus-visible  
{box-shadow: 0 0 0 .25rem   rgba(240, 240, 240, 0.2); outline: 0; padding: 4px; border-radius: 4px;}
/* links */
a:focus-visible {box-shadow: 0 0 0 .25rem rgba(2, 89, 211, .25); outline: 0; padding: 4px; border-radius: 4px;}
/* ---------- END KEYBOARD FOCUS ---------- */

/* Highlight text yellow when selected  */ 
::selection {
  background-color: #FFD773;
} /* Highligter Yellow */ ::-moz-selection {
  background-color: #FFD773;
} /* Highligter Yellow */


/* ---------- SPECIAL GLOBAL CLASSES ---------- */
.button a, .button a:hover {text-decoration: none;}

.firebrick, .text-firebrick {color:#B22222} /* firebrick */
.camel, .text-camel {color:#C19A6B} /* camel */

.bg-firebrick {background-color:#B22222} /* firebrick */
.bg-camel {background-color:#C19A6B} /* Camel */
.bg-grain {background: #f5f5f5 url('/_theme/block-1-1-0/dist/assets/images/pattern/grain.png') repeat-y;}


/* When you want remove a bullet from a list but keep it within the list */
ul.no-bullet, 
ol.no-bullet, 
li.no-bullet {list-style-type: none;}
 
/* changes the arrow to a hand pointer on hover, signaling an image is interactive. */
.cursor-pointer {cursor: pointer;}


/* --------------------------------------------------------- */
/*      DISABLED,, AND INACTIVE  STYLES           */
/* --------------------------------------------------------- */
.btn-disabled {color: #fff !important; background-color: #868e96; border-color: #868e96; pointer-events: none;}
.btn-disabled.disabled, .btn-disabled:disabled {color: #FFF; background-color: #868e96; border-color: #868e96; pointer-events: none;}
.disabled, a .disabled {pointer-events: none; color: #666;} 

.grayed-out { color: var(--aos-grayed-out-color) !important;} /* HTML Gray  #808080; rgb:128, 128, 128;*/
/* boostrap default for the class "text-muted" is #6c756c 757d7d*/
   
/* ---------------------------------------------------------
   Styles created to visually gray out inactive bulletin containers.
   Can be applies globally to any element
   Ensures all nested content appears de-emphasized.
--------------------------------------------------------- */

/* Gray all text inside an inactive container */
.inactive,
.inactive * {
  color: #808080 !important;
}

/* Ensure links don’t revert to theme colors */
.inactive a,
.inactive a:link,
.inactive a:visited,
.inactive a:hover,
.inactive a:active {
  color: #808080 !important;
  text-decoration-color: #808080 !important;
}

/* Scope explicitly to table text only (keeps table-striped backgrounds) */
.inactive .table td,
.inactive .table th,
.inactive .table thead *,
.inactive .table tbody *,
.inactive .table tfoot * {
  color: #808080 !important;
}

/* Optional: icons—only needed if your SVGs don't inherit text color */
.inactive svg,
.inactive svg * {
  fill: #808080 !important;
  stroke: #808080 !important;
}

/* Optional: if any element refuses to gray due to inline styles */
.inactive .force-gray {
  color: #808080 !important;
}

/* --------------------------------------------------------- */
/*   END DISABLED,, AND INACTIVE CUSTOM STYLES    */
/* --------------------------------------------------------- */

 


/**** alternative question mark symbol ****/ 
/* Changes the ? character from century gothic to arial */
.alt-q {
  font-family: "Segoe UI", Verdana, "Trebuchet MS",  "sans-serif" !important;}


/* Fiscal Caution, Watch, and Emergency colors */
 .fiscal-caution {color: #FFC107;} /* Firebrick red */
 .fiscal-watch {color: #FF8C00;} /* Dark orange – more active */
 .fiscal-emergency {color: #B22222;}  /* Bright yellow */


/* ----------  TEXT SHADOW UTILITY  ---------------- */
/*
 * - Improves contrast for white text over dark or B/W images 
 * - First used on "Stop Fraud" banner (small screens)  */ 

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.text-shadow-sm {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.text-shadow-lg {
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
}

.text-shadow-none {
  text-shadow: none !important;
}
/* ---------- END TEXT SHADOW UTILITY ---------------- */
 



/* ---------- SPECIAL FRAUD CLASSES ---------------- */
.bg-gray-drk {background-color: #555}
.text-fraud {font-family: 'century gothic', sans-serif; font-size:  17px}
/* Existing style */
.fraud-header {
    font-size: 8rem;
    padding: 0;
    margin: 0;
    line-height: 1;
}

/* Responsive adjustment for smaller screens */
@media (max-width: 767.98px) {
    .fraud-header {
        font-size: 3rem; /* adjust as needed */
    }
}

.hero-fraud {align-items: center; display: flex;  justify-content: center;  overflow: hidden}

@media (max-width:768px) {
  .hero-fraud {
    min-height: 300px
  }
}

/* Title for sidemenu medicaid stats */
.medicaid-stats-title  {
font-family: "Century Gothic", sans-serif;
text-align: center;
font-weight: bold;
color:#000;
font-size: 1.5rem; /* h3*/
line-height:1;} 
    
/* Big RED Number */
.medicaid-stats-number {
font-family: "Century Gothic", sans-serif;
text-align: center;
font-weight: bold;
color:#B22222;
font-size:24px;
line-height:1}

/* Label Text */
.medicaid-stats-label{
font-family: "Century Gothic", sans-serif;
text-align: center;
text-weight:normal;
font-size:18px;
line-height:1.2}


/* ---------- END SPECIAL FRAUD CLASSES ---------------- */






/* ---------- Back to page link 7/2025---------------- */

.floating-link {
  position: absolute;
  top: 1rem;   /* adjust as needed */
  left: 17rem;  /* adjust as needed */
  z-index: 1000; /* ensures it sits above other content */
}

@media (max-width: 767.98px) { /* Bootstrap's breakpoint for md and smaller */
  .floating-link {
    position: static;  /* Cancel absolute positioning */
    display: block;
    width: 100%;       /* Make it full-width like a row */
    text-align: center; /* Optional: center it */
    margin: 1rem 0;     /* Optional: spacing around it */
  }
}
/* ---------- end back to page link ---------------- */




/* ---------- Training Badges  ---------------- */
.bg-inperson {color: #fff; background-color: #6f42c1;} 
.bg-hybrid {color: #fff; background-color: #0dcaf0 !important;} 
.bg-onDemand {color: #fff; background-color: #6C6C6C !important;} 
/* ---------- End Training Badges ---------------- */



/* ---------------------------------------------- */
/* ------  CUSTOM BULLETINS STYLES ------- */
/* ---------------------------------------------- */
/* Bulletin Header */
.b-head {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  line-height: 1.35;
  margin-bottom: .5rem;
  color: var(--aos-b-head); 
/*  font-family: 'century gothic', sans-serif; #343434*/
} /* light #343434 dark #CED5DF */

/* Bulletin Summary */
.b-summary{font-size: .900em;}


/* ------  CUSTOM BULLETIN TABLE ------- */
    /* Bulletin Status w:100px */
    .b-status {min-width: 100px; font-weight: bold !important;} /* Bulletin status: active or removed (inactive) */
     /* Bulletins Filename w:760px */
    .b-name {width: 760px; font-weight: bold !important;}
     /* Bulletin Date w:105px */
    .b-date {min-width: 105px; font-weight: bold !important;} /* Bulletin date: issued date, revised date, removal date */
/*  END BULLETIN TABLE */

.b-asterisk {color: var(--aos-grayed-out-color) !important; text-align: center; padding-bottom: 0 !important; margin-bottom: 0; font-size: 1rem;}/* --bs-danger-text-emphasis: #580816 |  firebrick#B22222*/

.b-disclaimer {
  background-size: auto 100%;
  padding-top: 10px;
  padding-bottom: 30px;
  position: relative;
  z-index: 2;
  color: var(--bs-danger-text-emphasis) !important;
}
/* Bulletin Links */
a.b-link {text-decoration: none;}
a.b-link:hover {text-decoration: underline;}
/* ----------  END CUSTOM BULLETINS STYLES ---------- */


/* ---------------------------------------------- */
/* ------  CUSTOM TABLE STYLES ------- */
/* ---------------------------------------------- */

/* ------ This is for the table in the FAQ's on the fraud training page. 
Delete styles when no loner need ------- */
.h-entity {width:50%; font-weight: bold;}
.h-sdate {width:15%; font-weight: bold;}
.h-edate {width:15%; font-weight: bold;}
/* ---------------------------------------------- */


/* ---------------------------------------------- */
/* AOS Green Header Striped table */
/* Faber Green Table */
/* used on the Procurement Opportunities pages */ 
/* ---------------------------------------------- */
table.BidTable tr:nth-child(odd) {
    background-color: #eee;
}
table.BidTable tr:nth-child(even) {
    background-color: #fff;
}
table.BidTable th {
    background-color: #1F4423;
    color: #FFF;
    font-family: "Century Gothic";
}
table.BidTable .projectInfo {
    font-weight: bold;
    font-family: "Century Gothic";
	width:15%;
    vertical-align: text-top;
}

/* Custom table is used on the UAN page for the Participation Fees */ 
.table.th-uan th {background: #1f4423; color: #FFF; padding: 10px; border-top: 1px solid #fdfdfd; border-bottom: 1px solid #d0d0d0; font-size: 22px; font-weight: bold; font-family: 'century gothic', sans-serif; }
.uanHead {font-size: 17px; font-family: Cambria, serif; font-weight: bold; color: #0f5132; background: #d1e7dd !important;}

/* ---------------- IPA Table ---------------------- */
/* copied over from old style sheet */
/* ---------------------------------------------- */

.pamphlet table {border: 1px solid #e0e0e0; }
.pamphlet table th {padding: 10px; border-top: 1px solid #fdfdfd; border-bottom: 1px solid #d0d0d0; background: #1f4423; color: #fff;}
.pamphlet table th:first-child {text-align: left; padding-left: 20px; color: #fff;}
.pamphlet table tr:first-child th:first-child {-moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px;}
.pamphlet table tr:first-child th:last-child {-moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px;}
.pamphlet table tr {text-align: left; padding-left: 20px;}
.pamphlet table td:first-child {text-align: left; padding-left: 20px; border-left: 0;}
.pamphlet table td {padding: 10px; border-top: 1px solid #fff; border-bottom: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0; vertical-align: top;}/* background: #fff; */
.pamphlet table tr.even td {background: #f6f6f6; background: #fafafa;  background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa)); background: -moz-linear-gradient(top, #fbfbfb, #fafafa);}
.pamphlet table tr:last-child td {border-bottom: 0;}
.pamphlet table tr:last-child td:first-child {-moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;}
.pamphlet table tr:last-child td:last-child {-moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;}
/* ----------  END CUSTOM TABLE STYLES ---------- */



/* ---------------------------------------------- */
/* ------  CUSTOM IMAGE OVERLAYS ------- */
/* ---------------------------------------------- */
/* this overlays images with an oaverlay and a magnifying glass */
/* See the FHI sidebar for html example */
/* ---------------------------------------------- */
.image-container {position: relative; width: fit-content;}
.image-container img {display: block;}

.icon-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: inherit; /* Color of the icon when not hovering */
  transition: opacity 0.3s ease; /* Smooth transition */}

.image-container:hover .icon-overlay {opacity: 0;}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;}

.image-container:hover .overlay {opacity: 1;}
.overlay .img-icon {color: white;} /* Color of the icon when hovering */
.icon-overlay .img-icon {font-size: 2rem;} /* Adjust the size as needed */
/* ---------------------------------------------- */


.alert-link {font-weight: 600;}
.alert-link:hover {text-decoration: underline;}
 

/* ---------------------------------------------- */
/* ------ CUSTOM SERIF LIST ------- */
/* ---------------------------------------------- */
/* -------- resource lists / weblinks ----------- */
.serif-list ul, .serif-list li {font-family: Cambria, "cambria", "serif"; line-height: 25px;} /*color: #007AFF; */
.serif-list li {line-height: 1.1rem; padding: .2rem 0; }
.serif-list ol {font-family: Cambria, "cambria", "serif" !important; line-height: 25px; color: #5D5D5D; font-weight: bold;}
.serif-list a, .serif-list a:visited {color:#0654C3; font-weight: bold;}
.serif-list a:hover, .serif-list a:active {color: #444;}
 

/* ---------------------------------------------- */
/* ------ CUSTOM CARD STYLES ------- */
/* ---------------------------------------------- */
.card-header-green 
    {padding: .75rem 1.25rem; margin-bottom: 0; background-color: #1f4423; border-bottom: #1f4423; color: #FFF; font-weight: 600;   } 
.card-header-blue 
    {padding: .75rem 1.25rem; margin-bottom: 0; background-color: #546c98; border-bottom: #546c98; color: #FFF; font-weight: 600;   } 
.card-header-blue :first-child 
    {border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0}
.card-header-cyber 
    {display: flex; align-items: center; padding: .75rem 1.25rem; margin-bottom: 0;background-color: rgba(0,0,0,.03);border-bottom: 1px solid rgba(0,0,0,.125)}

.card-img-sq {border-radius: 0 !important;} /* also refer to the boarder classes in the theme */
.zoom-img-sq {border-radius: 0 !important;} /* also refer to the zoom-img classes in the theme */

.card-sq {border-radius: 0 !important;}
.card-top-sq {border-top-left-radius: 0 !important; border-top-right-radius: 0 !important;}

.img-card-title,.img-card-icon {margin: 0;}  



/* ---------------------------------------------- */
/* FONT AWESOME STYLES */
/* CUSTOM ICONS */
/* ---------------------------------------------- */

.pdf-link, .fa-kit-duotone-fa-file-pdf-duotone {
  --fa-primary-color: #bd0000;
  --fa-secondary-color: #bd0000;
  text-decoration: none;
  color: inherit;
    font-weight: bold;
}
.pdf-link:hover, .fa-kit-duotone-fa-file-pdf-duotone:hover {
  --fa-primary-color: #ffffff;
  --fa-secondary-color: #ffffff;
  text-decoration: none;
  color: inherit;
}
.login-link {
  --fa-primary-opacity: .4;
  --fa-secondary-opacity: 1;
}

.pdf-icon:hover {color:#FF0000 !important;}
.excel-icon:hover {color:#217346 !important;}

/* Ensures the envelope icon and email address stay on the same line */
.fa-no-wrap {white-space: nowrap;}

 /* Styles for the double right chevrons in the Read More Buttons */
.fa-light.fa-chevrons-right  {position: relative;  vertical-align: middle !important;  /*Adjust alignment */}
/* .fa-light.fa-chevrons-left {position: relative; vertical-align: middle !important; not in use} 

 
/* Created for the Fiscal > Receivership  page */
.icon-firebrick  {color: #B22222;}     /* Firebrick red */
.icon-dark-orange {color:#FF8C00;}     /* Dark orange */

.icon-amber {color: #ffcb56;}         /* Yellow or Amber */ 
.icon-amber-earth {color: #e0a735;}   /*  Amber Earth */

.icon-bright-green {color: #28a745;}  /* Bright Green */
.icon-pacific-blue  {color: #17a2b8;} /* Pacific Blue */
.icon-purple-rain  {color: #6f42c1;}  /* Purple Rain */

.icon-camel {color: #C19A6B;}         /* Camel or/ Khaki */
.icon-piggy-bank  {color:#ffccbb;}     /* Peach Pink*/


/* ---------------------------------------------- */
/* ------  CAROUSEL GLOBAL STYLES ------- */
/* ----------------------------------- */
/* Padding below the footer and lighter body text */
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {margin-bottom: 4rem;}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {bottom: 3rem; z-index: 10;}
/* Declare heights because of positioning of img element */
.carousel-item {height: 19rem;}
.banner-img {
  background-position: center;
  background-repeat: no-repeat !important;
  background-size: cover;}

.banner {
  position: relative;
  width: 100%;
  height: 300px; /* Adjust as needed */
  overflow: hidden;}

.banner::before, .banner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%; /* Adjust as needed */
  background: rgba(0, 0, 0, 0.5);} /* Adjust color and opacity as needed */

.banner::before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.banner::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
/* RESPONSIVE CSS  */
@media (max-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }
  .carousel-caption {padding: inherit; bottom: 0;}
}
 /* ------ END CAROUSEL GLOBAL STYLES ------- */
/* ---------------------------------------------- */



/* ----- SEARCH BULLETINS BUTTON -------------- */
.gsc-control-cse {
  border-color: transparent !important;
  background-color: transparent !important;
}
.gsc-search-button {
  border-radius: 4px !important;
}

/* Base styles for the custom search button */
.gsc-search-button .gsc-search-button-v2 {
  color: #fff; /* Bootstrap primary button text color */
  background-color: var(--bs-primary); /* Bootstrap primary button background color */
  border-color: var(--bs-primary); /* Bootstrap primary button border color */
}

/* Hover state */
.gsc-search-button .gsc-search-button-v2:hover {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  color: #fff;
  box-shadow: rgb(49, 132, 253)}

input.gsc-input{background-image: none !important;}
/*
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color)
*/
/* Focus state */
.gsc-search-button .gsc-search-button-v2:focus, .gsc-search-button .gsc-search-button-v2.focus {
  /*
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: var(--bs-btn-focus-box-shadow);
  color: var(--bs-btn-hover-color);
  outline: 0
*/
}
/* Active and show states */
.gsc-search-button .gsc-search-button-v2:active, .gsc-search-button .gsc-search-button-v2.active, .gsc-search-button .gsc-search-button-v2.show, .gsc-search-button .gsc-search-button-v2:show {
  color: #fff;
  background-color: #6f31cc !important;
  border-color: #682ebf !important;
  box-shadow: rgba(2, 6, 23, .125) !important;
  /*
    background-color: var(--bs-btn-active-bg) !important;
    border-color: var(--bs-btn-active-border-color) !important;
    box-shadow: var(--bs-btn-active-shadow) !important;
*/
}
.gsc-input {
  color: var(--bs-body-color) !important;
}
.gsc-input-box {
  border-radius: 4px;
}

/* ---------------------------------------------- */
/* ------ CUSTOM SIDE MENU ------- */
/* ---------------------------------------------- */

/*  REFERENCE MATERIALS SIDE MENU */
/* ---------------------------------------------- */
.ref-menu li {
    font-weight: 600;
    /*font-size: .875em;*/ /* small text */
    /*line-height: 1.25 !important;*/ /*tight line height */
    /* margin: 0; */ 
    /* padding: 0; */
}

.ref-menu li a {
  color: #0259d3 ; /* 64748b default text color */
  text-decoration: none;
  display: block; /* ensure the link fills the li for hover */
  padding: 4px 8px;   /* add some padding for hover */
  transition: background-color 0.2s, color 0.2s;
}

/* Hover state */
.ref-menu li a:hover {
  background-color: #e2e8f0;  /* light background on hover */
  color: #000;    /* darker text on hover */
  border-radius: 4px
}

/* Active state */
.ref-menu li a.active {
  background-color: #1F4423; /*546c98 blue background for active */
  color: #fff; /* white text for active */
  border-radius: 4px
}
/*  END REFERENCE MATERIALS SIDE MENU */
/* ---------------------------------------------- */


/* ---------------------------------------------- */
/*  TECHNICAL BULLETINS SIDE MENU */
/* ---------------------------------------------- */
.b-menu {font-size: 150%; } /* overflow-y: scroll; height: 700px;  .year-list */

.b-menu li {
    font-weight: 600;
    /*font-size: .875em;*/ /* small text */
    /*line-height: 1.25 !important;*/ /*tight line height */
    /* margin: 0; */ 
    /* padding: 0; */
}

.b-menu li a {
  color: #0259d3 ; /* 64748b default text color */
  text-decoration: none;
  display: block; /* ensure the link fills the li for hover */
  padding: 4px 8px;   /* add some padding for hover */
  transition: background-color 0.2s, color 0.2s;
}

/* Hover state */
.b-menu li a:hover {
  background-color: #e2e8f0;  /* light background on hover */
  color: #000;    /* darker text on hover */
  border-radius: 4px
}

/* Active state */
.b-menu li a.active {
  background-color: #1F4423; /*546c98 blue background for active */
  color: #fff; /* white text for active */
  border-radius: 4px
}



/* ---------- FOOTER  ---------------- */
  .menu-divider {
    height: 2rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
  }                      


a.ft-links {font-weight: normal;}

/* ---------------------------------------------- */
/* --------------- CUSTOM BUTTONS --------------- */
/* ---------------------------------------------- */


/* Firebrick Button */
.btn-firebrick {
    color: #fff !important;               /* Text color */
    background-color: #B22222 !important; /* Firebrick background */
    border-color: #8B1A1A !important;     /* Slightly darker border */
    transition: all 0.2s ease-in-out;
}

/* Hover state */
.btn-firebrick:hover, 
.btn-outline-firebrick:hover {
    color: #fff !important;               /* Text color on hover */
    background-color: #8B1A1A !important; /* Darker background on hover */
    border-color: #6E1616 !important;      /* Darker border on hover */
}

/* Active state */
.btn-firebrick:active, .btn-outline-firebrick:active,
.btn-firebrick.active, .btn-outline-firebrick.active, 
.show > .btn-firebrick.dropdown-toggle {
    color: #fff !important;               /* Text color in active state */
    background-color: #6E1616 !important; /* Even darker background */
    border-color: #5A1313 !important;      /* Even darker border */
}

/* Focus state */
.btn-firebrick:focus, .btn-outline-firebrick:focus, 
.btn-firebrick.focus, .btn-outline-firebrick.focus,
.btn-firebrick:focus-visible {
    color: #fff !important;                /* Ensure text color remains */
    background-color: #8B1A1A !important; /* Background color on focus */
    border-color: #6E1616 !important;      /* Border color on focus */
    box-shadow: 0 0 0 0.2rem rgba(178, 34, 34, 0.5) !important; /* Focus ring */
}

/* Outline version */
.btn-outline-firebrick {
    color: #B22222 !important;            /* Text color for outline */
    background-color: transparent !important;
    border-color: #B22222 !important;
}

.btn-outline-firebrick:hover {
    color: #fff !important;
    background-color: #B22222 !important;
    border-color: #8B1A1A !important;
}

.btn-outline-firebrick:active, .btn-outline-firebrick.active {
    color: #fff !important;
    background-color: #6E1616 !important;
    border-color: #5A1313 !important;
}

.btn-outline-firebrick:focus, .btn-outline-firebrick.focus,
.btn-outline-firebrick:focus-visible {
    color: #fff !important;
    background-color: #8B1A1A !important;
    border-color: #6E1616 !important;
    box-shadow: 0 0 0 0.2rem rgba(178, 34, 34, 0.5) !important;
}

/* Green Dark Button */
.btn-green-dark {
    color: #fff !important; /* Text color */
    background-color: #1F4423 !important; /* Background color */
    border-color: #4C5C4C !important; /* Border color */
}

/* Hover state */
.btn-green-dark:hover, .btn-outline-green-dark:hover {
    color: #EDF9F2 !important; /* Text color on hover */
    background-color: #1B5421  !important; /* Darker background color on hover */
    border-color: #1E5B24 !important; /* Darker border color on hover */
}

/* Active state */
.btn-green-dark:active, .btn-outline-green-dark:active,
.btn-green-dark.active, .btn-outline-green-dark.active, 
.show > .btn-green-dark.dropdown-toggle {
    color: #fff !important; /* Text color in active state */
    background-color: #162b1a !important; /* Darker background color in active state */
    border-color: #162b1a !important; /* Darker border color in active state */
}

/* Focus state */
.btn-green-dark:focus, .btn-outline-green-dark:focus, 
.btn-green-dark.focus, .btn-outline-green-dark.focus,
.btn-green-dark:focus-visible {
    color: #EDF9F2 !important; /* Ensure text color remains consistent */
    background-color: #1B5421 !important; /* Background color on focus */
    border-color: #1E5B24 !important; /* Border color on focus */
    box-shadow: 0 0 0 0.2rem rgba(31, 68, 35, 0.5) !important; /* Focus outline */
}

.btn-outline-green-dark {
    color: #1F4423 !important;
    border-color: #4C5C4C !important;}

 

/* Green Mid Button */
.btn-green-mid {
    color: #fff !important; /* Text color */
    background-color: #3D4A3D !important; /* Background color */
    border-color: #4C5C4C !important; /* Border color */
}

/* Hover state */
.btn-green-mid:hover {
    color: #EDF9F2 !important; /* Text color on hover */
    background-color: #4C5C4C !important; /* Darker background color on hover */
    border-color: #4C5C4C !important; /* Darker border color on hover */
}

/* Active state */
.btn-green-mid:active, 
.btn-green-mid.active, 
.show > .btn-green-mid.dropdown-toggle {
    color: #fff !important; /* Text color in active state */
    background-color: #2e392e !important; /* Darker background color in active state */
    border-color: #2e392e !important; /* Darker border color in active state */
}

/* Focus state */
.btn-green-mid:focus, 
.btn-green-mid.focus,
.btn-green-mid:focus-visible {
    color: #fff !important; /* Ensure text color remains consistent */
    background-color: #3D4A3D !important; /* Background color on focus */
    border-color: #4C5C4C !important; /* Border color on focus */
    box-shadow: 0 0 0 0.2rem rgba(61, 74, 61, 0.5) !important; /* Focus outline */
}

/* Green Light Button */
.btn-green-light {
    color: #fff !important; /* Text color */
    background-color: #A0AFA0 !important; /* Background color */
    border-color: #A0AFA0 !important; /* Border color */
}

/* Hover state */
.btn-green-light:hover {
    color: #fff !important;
    background-color: #B2BFB2 !important;
    border-color: #8FA38F !important;
}

/* Active state looks like a pistachio green */
.btn-green-light:active, 
.btn-green-light.active, 
.show > .btn-green-light.dropdown-toggle {
    color: #fff !important; /* Text color in active state */
    background-color: #8FA38F !important; /* Darker background color in active state */
    border-color: #8FA38F !important; /* Darker border color in active state */
}

/* Focus state this shows the box-shadow on mouse clicks and using the tab key */
.btn-green-light:focus, 
.btn-green-light.focus,
.btn-green-light:focus-visible {
    color: #3D4A3D !important; /* Ensure text color remains consistent */
    background-color: #B2BFB2 !important;
/*  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;  Background color on focus */
    border-color: #B2BFB2 !important; /* Border color on focus */
    box-shadow: 0 0 0 0.2rem rgba(160, 175, 160, 0.5) !important; /* Focus outline */
}

/* Blue Dark Button */
.btn-blue-dark {
    color: #fff !important; /* Text color */
    background-color: #203D64 !important; /* Background color */
    border-color: #375A7F !important; /* Border color */
}

/* Hover state */
.btn-blue-dark:hover {
    color: #EDF0F7 !important; /* Text color on hover */
    background-color: #2B4E7F !important; /* a bit brighter */
    border-color: #40679A !important;
    
}

/* Active state */
.btn-blue-dark:active, 
.btn-blue-dark.active, 
.show > .btn-blue-dark.dropdown-toggle {
    color: #fff !important; /* Text color in active state */
    background-color: #162B3B !important; /* Darker background color in active state */
    border-color: #162B3B !important; /* Darker border color in active state */
}

/* Focus state */
.btn-blue-dark:focus, 
.btn-blue-dark.focus,
.btn-blue-dark:focus-visible {
    color: #fff !important; /* Ensure text color remains consistent */
    background-color: #203D64 !important; /* Background color on focus */
    border-color: #375A7F !important; /* Border color on focus */
    box-shadow: 0 0 0 0.2rem rgba(32, 61, 100, 0.5) !important; /* Focus outline */
}



/* Blue Dark Outline Button */ 
.btn-outline-blue-dark {
    color: #203D64 !important; /* Text color */
    background-color: transparent !important;
    border-color: #375A7F !important; /* Border color */
}

/* Hover state */
.btn-outline-blue-dark:hover {
    color: #EDF0F7 !important; /* Text color on hover */
    background-color: #203D64 !important; /* Background color */
    border-color: #375A7F !important; /* Border color */
    /*background-color: #2B4E7F !important;  Background on hover */
   /* border-color: #40679A !important;  Border on hover */
}

/* Active state */
.btn-outline-blue-dark:active,
.btn-outline-blue-dark.active,
.show > .btn-outline-blue-dark.dropdown-toggle {
    color: #fff !important;
     background-color: #546C98 !important; /* Background color */
    border-color: #375A7F !important; /* Border color */
}

/* Focus state */
.btn-outline-blue-dark:focus,
.btn-outline-blue-dark.focus,
.btn-outline-blue-dark:focus-visible {
 color: #EDF0F7 !important; /* Text color on hover */
    background-color: #203D64 !important; /* Background color */
    border-color: #375A7F !important; /* Border color */
    box-shadow: 0 0 0 0.2rem rgba(32, 61, 100, 0.5) !important;
}

 



/* Blue Mid Button */
.btn-blue-mid {
    color: #fff !important; /* Text color */
    background-color: #546C98 !important; /* Background color */
    border-color: #375A7F !important; /* Border color */
}

/* Hover state */
.btn-blue-mid:hover {
    color: #EDF0F7 !important; /* Text color on hover */
    background-color: #375A7F !important; /* Darker background color on hover */
    border-color: #375A7F !important; /* Darker border color on hover */
}

/* Active state */
.btn-blue-mid:active, 
.btn-blue-mid.active, 
.show > .btn-blue-mid.dropdown-toggle {
    color: #fff !important; /* Text color in active state */
    background-color: #3A525E !important; /* Darker background color in active state */
    border-color: #3A525E !important; /* Darker border color in active state */
}

/* Focus state */
.btn-blue-mid:focus, 
.btn-blue-mid.focus,
.btn-blue-mid:focus-visible {
    color: #fff !important; /* Ensure text color remains consistent */
    background-color: #546C98 !important; /* Background color on focus */
    border-color: #375A7F !important; /* Border color on focus */
    box-shadow: 0 0 0 0.2rem rgba(84, 108, 152, 0.5) !important; /* Focus outline */
}

/* Blue Light Button */
.btn-blue-light {
    color: #fff !important; /* Text color */
    background-color: #B4C8DF !important; /* Light blue background color (other #B0C4DE)  */
    border-color: #99AFC7 !important; /* Border color */
}

/* Hover state */
.btn-blue-light:hover {
    color: #fff !important; /* Text color on hover */
    background-color: #99AFC7 !important; /* Darker background color on hover */
    border-color: #99AFC7 !important; /* Darker border color on hover */
}

/* Active state */
.btn-blue-light:active, 
.btn-blue-light.active, 
.show > .btn-blue-light.dropdown-toggle {
    color: #203D64 !important; /* Text color in active state */
    background-color: #8AA6B7 !important; /* Darker background color in active state */
    border-color: #8AA6B7 !important; /* Darker border color in active state */
}

/* Focus state */
.btn-blue-light:focus, 
.btn-blue-light.focus,
.btn-blue-light:focus-visible {
    color: #203D64 !important; /* Ensure text color remains consistent */
    background-color: #B0C4DE !important; /* Background color on focus */
    border-color: #99AFC7 !important; /* Border color on focus */
    box-shadow: 0 0 0 0.2rem rgba(176, 196, 222, 0.5) !important; /* Focus outline */
}

/*  ================ ================ TEMPLATE FOR CUSTOM BUTTONS ================ ================ 
.btn-button-name {
    color: #fff !important;  
    background-color: #main-bg-color !important;  
    border-color: #main-border-color !important; }
*/

/* Hover state 
.btn-button-name:hover {
    color: #hover-text-color !important; 
    background-color: #hover-bg-color !important; 
    border-color: #hover-border-color !important; }
*/

/* Active state 
.btn-button-name:active, 
.btn-button-name.active, 
.show > .btn-button-name.dropdown-toggle {
    color: #active-text-color !important;
    background-color: #active-bg-color !important; 
    border-color: #active-border-color !important; }
*/

/* Focus state 
.btn-button-name:focus, 
.btn-button-name.focus,
.btn-button-name:focus-visible {
    color: #focus-text-color !important; 
    background-color: #focus-bg-color !important; 
    border-color: #focus-border-color !important; 
    box-shadow: 0 0 0 0.2rem rgba(focus-rgba-color, 0.5) !important; }
*/





/* ================ FABER COLORS  ================ 
DRK GREEN
#1F4423
31, 68, 35

MID  GREEN
#3D4A3D 
61, 74, 61

LIGHT GREEN
#A0AFA0
160, 175, 160

DARK BLUE
#203D64
32, 61, 100

LIGHT BLUE
#546C98
84, 108, 152

Color lists: 
.greens {color: #4C5C4C #A0AFA0 #EDF9F2 #99C899 #9ABF9A #3D4A3D #1F4423 #FFFFFF #2b502f}
.blues {  #B0C4DE #a0c5e0; #708090; #5f7f9f; #82b1c7; #2c3e50; #1a252f; #34495e; #34495e; #1c2833;  
    box-shadow: 0 0 0 0.2rem rgba(112, 128, 144, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(28, 40, 51, 0.5);
} ================ ================ ================ ================ ================ ================ ================ */
 

/* Styles for a timeline or path connecting cards | currently  not in use  | LRH  Oct 2025  */ 

.step-1 {
  position: relative;
}

/* horizontal line from step 1 to step 2 */
.step-1::after {
  content: "";
  position: absolute;
  top: 50%;                  /* vertically centered */
  right: -40px;             /* pushes line to right */
  width: 40px;              /* length of connector */
  height: 2px;              /* thickness */
  background: var(--bs-border-color);
}

.step-2 {
  position: relative;
}

/* vertical line from step 2 to step 3 */
.step-2::after {
  content: "";
  position: absolute;
  bottom: -40px;            /* pushes line downward */
  left: 20px;               /* aligns under bullet or number icon */
  width: 2px;
  height: 40px;
  background: var(--bs-border-color);
}
 
/* HTML 
<div class="step-1">Step 1</div>
<div class="step-2">Step 2</div>
<div class="step-3">Step 3</div>
*/