/* ===================================================================
            LAYOUT ELEMENTS
=================================================================== */
html,
body {
  font-family: 'Roboto', sans-serif;
  color: #1c1f20;
  background-color: #eaeaea;
  /* overflow-x: hidden;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none; 
    user-select: none; */
  padding: 0;
  margin: 0;
}

body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* HEADER */

header {
  flex-shrink: 0;
  z-index: 100;
  margin: 0;
  height: 80px;
  font-family: "Comic Neue", cursive;
  /* font-family: "Rampart One", sans-serif; */
  background-color: #1c1f20 !important;
  background-color: #000000;
  font-weight: 300;
  font-size: 1em;
  color: #FFFFFF;
  text-decoration: none;
  padding: 0 1em
}

/* NAVIGATION BAR */

.nav-item{
  margin-left: 0.5em;
}

.navbar-toggler-icon {
  filter: invert(1);
  border-color: #FFFFFF
}

.navbar-nav, .nav-link {
  /* color: #FFFFFF !important; */
  /* background-color: #1B2D3E !important; */
  background-color: transparent !important;
  /* margin: 0 0 0 0.5em; */
}

/* FOOTER */

footer {
  margin-top: auto;
  min-height: 50px;
  flex-shrink: 0;
  padding: 1em 0;
  color: #ffffff;
  font-weight: 300;
  text-align: center;
  /* position: sticky; */
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: #1c1f20 !important;
}
/* Parallax */
.index-parallax {
  background-image: url('/images/bg-parallax-grey.webp');
  color: #ffffff;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 5em 0;
}


/* ===================================================================
            FONT CLASSES
=================================================================== */ 

/* FONT TYPES */

.rampart {
  font-family: "Rampart One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.comic-neue-light {
  font-family: "Comic Neue", cursive;
  font-weight: 300;
  font-style: normal;
}

.comic-neue-regular {
  font-family: "Comic Neue", cursive;
  font-weight: 400;
  font-style: normal;
}

.comic-neue-bold {
  font-family: "Comic Neue", cursive;
  font-weight: 700;
  font-style: normal;
}

.comic-neue-light-italic {
  font-family: "Comic Neue", cursive;
  font-weight: 300;
  font-style: italic;
}

.comic-neue-regular-italic {
  font-family: "Comic Neue", cursive;
  font-weight: 400;
  font-style: italic;
}

.comic-neue-bold-italic {
  font-family: "Comic Neue", cursive;
  font-weight: 700;
  font-style: italic;
}


.roboto-100 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.roboto-200 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.roboto-300 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.roboto-400 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.roboto-500 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.roboto-600 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.roboto-700 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* HEADINGS */

.t1 {
  font-size: 2.5rem;
}
.t2 {
  font-size: 2rem;
}
.t3 {
  font-size: 1.75rem;
}
.t4 {
  font-size: 1.5rem;
}
.t5 { 
  font-size: 1em;
}

.disclaimer {
  font-size: 1.25rem;
  color: #d70d1a;
  font-style: italic;
  font-weight: 500;
}

/* ===================================================================
            LINKS & BUTTONS
=================================================================== */ 

.link {
  text-decoration: none;
}

.sidebar {
  background-color: #ffffff;
  min-width: 250px;
  min-height: 10px;
  padding: 1.5rem;
  border: 1px solid #d4d4d4;
}

.sidebar-title{
  margin: 0.5rem 0;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #dee2e6;
  color: #494B4C;
  font-weight: 500;
  font-size: 1.5rem;
}

.sidebar-header{
  margin: 0.5rem 0;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #dee2e6;
  color: #494B4C;
  font-weight: 500;
  font-size: 1.25rem;
}

.sidebar-link { 
  color: #1976D2; 
  text-decoration: none; 
  padding: 0.25rem 0;
  display: block;
  transition: color 0.2s ease-in-out;
}

/* Hover State */
.sidebar-link:hover { 
    color: #ffc107 !important; /* This is the hover color */
}

/* The "Selected" State (Added by Bootstrap JS) */
.sidebar-link.active { 
    color: #D70D1A !important; /* This stays yellow when the tab is open */
}

/* Optional: if you want the active link to still turn red on hover */
.sidebar-link.active:hover {
    color: #d70d1a !important;
}

.sidebar-link.disabled, 
.sidebar-link:disabled {
    color: #6c757d !important; /* Standard Bootstrap secondary grey */
    cursor: not-allowed;
    opacity: 0.65;
    text-decoration: none;
}

.tab-content {
  background-color: #ffffff;
  /* min-height: 600px; */
  padding: 1.5rem;
  border: 1px solid #d4d4d4;
}

.dashboard-card {
  background-color: #FFFFFF; 
  padding: 1.5rem; 

  text-decoration: none; 
  border: solid 1px #d4d4d4;  
  width: 150px;
  height: auto;
  
  display: flex;
  flex-direction: column; /* Keeps multiple items tidy */
  align-items: center; 
  justify-content: center;

  text-align: center;
  box-shadow: 5px 5px 5px 1px #d4d4d4;
}

.dashboard-card-btn { background-color: #FFFFFF; padding: 2em; text-decoration: none; border: solid 1px #d4d4d4; color:#9fabb9 }
.dashboard-card-btn:hover { background-color: #ffecec; text-decoration: none; box-shadow: 5px 5px 5px 1px #d4d4d4; color: #28724f }

.dashboard-msg {
  background-color: #FFFFFF; 
  padding: 1.5rem; 

  text-decoration: none; 
  width: auto;
  height: auto;
  
  display: flex;
  flex-direction: column; /* Keeps multiple items tidy */
  align-items: center; 
  justify-content: center;

  text-align: center;
}

.count {
  font-family: "comic neue", cursive;
  font-weight: 700;
  font-size: 3.5rem;
}

.plaque { 
  background-color: #FFFFFF; 
  padding: 1.5rem; 
  text-decoration: none; 
  border: solid 1px #d4d4d4; 
  display: flex; 
  flex-direction: column; 
  height: 100%; }

.plaque-btn { background-color: #FFFFFF; padding: 2em; text-decoration: none; border: solid 1px #d4d4d4; color:#1c1f20 }
.plaque-btn:hover { background-color: #ffecec; text-decoration: none; box-shadow: 5px 5px 5px 1px #d4d4d4; }

/* Link Colors */
.link-white {
  color: #FFFFFF !important;
  text-decoration: none;
}

.link-crimson {
  color: #d70d1a !important;
  text-decoration: none;
}
.link-crimson:hover {
  color: #e2e2e2 !important;
  text-decoration: none;
}

.link-stone { color: #9fabb9; text-decoration: none; }
.link-stone:hover { color: #28724f; text-decoration: none; }

.link-blue { 
    color: #1976D2; 
    text-decoration: none; 
    transition: color 0.2s ease-in-out;
}

/* Hover State */
.link-blue:hover { 
    color: #ffc107 !important; /* This is the hover color */
}

/* The "Selected" State (Added by Bootstrap JS) */
.link-blue.active { 
    color: #D70D1A !important; /* This stays yellow when the tab is open */
}

/* Optional: if you want the active link to still turn red on hover */
.link-blue.active:hover {
    color: #d70d1a !important;
}

.link-blue.disabled, 
.link-blue:disabled {
    color: #6c757d !important; /* Standard Bootstrap secondary grey */
    cursor: not-allowed;
    opacity: 0.65;
    text-decoration: none;
}
.link-green { 
    color: #1b7a43; 
    text-decoration: none; 
    transition: color 0.2s ease-in-out;
}

/* Hover State */
.link-green:hover { 
    color: #ffc107 !important; /* This is the hover color */
}

/* The "Selected" State (Added by Bootstrap JS) */
.link-green.active { 
    color: #1b7a43 !important; /* This stays green when the tab is open */
}

/* Optional: if you want the active link to still turn red on hover */
.link-green.active:hover {
    color: #1b7a43 !important;
}

.link-green.disabled, 
.link-green:disabled {
    color: #6c757d !important; /* Standard Bootstrap secondary grey */
    cursor: not-allowed;
    opacity: 0.65;
    text-decoration: none;
}

/* Button Colors */
.btn-crimson { background-color: #d70d1a; color: #FFFFFF; }
.btn-crimson:hover { background-color: #d70d1a; color: #FFFFFF; }

.btn-crimson-outline { background-color: transparent; color: #d70d1a; border: 1px solid #d70d1a; }
.btn-crimson-outline:hover { background-color: #d70d1a; color: #FFFFFF; border: solid 1px #d4d4d4; }

.btn-white { background-color: #FFFFFF; color: #3C6186; border: 1px solid #d4d4d4; }
.btn-white:hover { background-color: #f0f4f8; color: #3C6186; border: solid 1px #d4d4d4; }

.btn-outline-white { background-color: transparent; color: #FFFFFF; border: 1px solid #FFFFFF; }
.btn-outline-white:hover { background-color: #f0f4f8; color: #3C6186; border: solid 1px #d4d4d4; }

.btn-blue { background-color: #1976D2; color: #FFFFFF; }
.btn-blue:hover { background-color: #1976D2; color: #FFFFFF; }

.btn-blue-outline { background-color: transparent; color: #1976D2; border: 1px solid #1976D2; }
.btn-blue-outline:hover { background-color: #1976D2; color: #FFFFFF; border: solid 1px #d4d4d4; }

 .btn-iris { background-color: #765BEE; color: #FFFFFF; }
 .btn-iris:hover { background-color: #765BEE; color: #FFFFFF; }

 .btn-iris-outline { background-color: transparent; color: #765BEE; border: 1px solid #765BEE; }
 .btn-iris-outline:hover { background-color: #765BEE; color: #FFFFFF; border: solid 1px #d4d4d4; }


/* section formatting */
.top {
  margin-top: 90px; /* Height of the fixed header */
}

.segment {
  padding: 1em 0 1em 0; /* Space between sections */
}

.end {
  padding: 2em 0; /* Space for the footer */
}


/* ===================================================================
            FONT AND BACKGROUND COLOR CLASSES
=================================================================== */
.black { color: #1C1F20 !important; }
.iron { color: #494B4C !important; }
.pewter { color: #A4A5A5 !important; }
.heather { color: #B1BFCE !important; }
.ghost { color: #EBF0F8 !important; }
.snowdrift { color: #FFECEC !important; }
.white { color: #FFFFFF !important; }


.crimson-xx-dark { color: #56050A !important; }
.crimson-x-dark { color: #81070F !important; }
.crimson-dark { color: #AC0A14 !important; }
.crimson { color: #D70D1A !important; }
.crimson-light { color: #E3555E !important; }
.crimson-x-light { color: #EF9EA3 !important; }
.crimson-xx-light { color: #FBE6E8 !important; }
.iris-xx-dark { color: #2F245F !important; }
.iris-x-dark { color: #46368E !important; }
.iris-dark { color: #5E48BE !important; }
.iris { color: #765BEE !important; }
.iris-light { color: #9F8CF3 !important; }
.iris-x-light { color: #C8BDF8 !important; }
.iris-xx-light { color: #F1EEFD !important; }
.orange-xx-dark { color: #612D0B !important; }
.orange-x-dark { color: #914411 !important; }
.orange-dark { color: #C25A16 !important; }
.orange { color: #F2711C !important; }
.orange-light { color: #F58E49 !important; }
.orange-x-light { color: #F8AB77 !important; }
.orange-xx-light { color: #FBC8A4 !important; }
.blue-xx-dark { color: #06214B !important; }
.blue-x-dark { color: #0A387E !important; }
.blue-dark { color: #0D47A1 !important; }
.blue { color: #1976D2 !important; }
.blue-light { color: #29B6F6 !important; }
.blue-x-light { color: #81D4FA !important; }
.blue-xx-light { color: #E0F2F1 !important; }
.green-xx-dark { color: #24322E !important; }
.green-x-dark { color: #364C45 !important; }
.green-dark { color: #48655C !important; }
.green { color: #5A7E73 !important; }
.green-light { color: #7B988F !important; }
.green-x-light { color: #9CB2AB !important; }
.green-xx-light { color: #BDCCC7 !important; }

.bg-black { background-color: #1C1F20 !important; }
.bg-iron { background-color: #494B4C !important; }
.bg-pewter { background-color: #A4A5A5 !important; }
.bg-heather { background-color: #B1BFCE !important; }
.bg-ghost { background-color: #EBF0F8 !important; }
.bg-cloud {background-color: #f8f9fa !important; }
.bg-disabled {background-color: #e9ecef !important; }
.bg-app { background-color: #eaeaea !important; }
.bg-snowdrift { background-color: #FFECEC !important; }
.bg-white { background-color: #FFFFFF !important; }

.bg-crimson-xx-dark { background-color: #56050A !important; }
.bg-crimson-x-dark { background-color: #81070F !important; }
.bg-crimson-dark { background-color: #AC0A14 !important; }
.bg-crimson { background-color: #D70D1A !important; }
.bg-crimson-light { background-color: #E3555E !important; }
.bg-crimson-x-light { background-color: #EF9EA3 !important; }
.bg-crimson-xx-light { background-color: #FBE6E8 !important; }
.bg-iris-xx-dark { background-color: #2F245F !important; }
.bg-iris-x-dark { background-color: #46368E !important; }
.bg-iris-dark { background-color: #5E48BE !important; }
.bg-iris { background-color: #765BEE !important; }
.bg-iris-light { background-color: #9F8CF3 !important; }
.bg-iris-x-light { background-color: #C8BDF8 !important; }
.bg-iris-xx-light { background-color: #F1EEFD !important; }
.bg-orange-xx-dark { background-color: #612D0B !important; }
.bg-orange-x-dark { background-color: #914411 !important; }
.bg-orange-dark { background-color: #C25A16 !important; }
.bg-orange { background-color: #F2711C !important; }
.bg-orange-light { background-color: #F58E49 !important; }
.bg-orange-x-light { background-color: #F8AB77 !important; }
.bg-orange-xx-light { background-color: #FBC8A4 !important; }
.bg-blue-xx-dark { background-color: #06214B !important; }
.bg-blue-x-dark { background-color: #0A387E !important; }
.bg-blue-dark { background-color: #0D47A1 !important; }
.bg-blue { background-color: #1976D2 !important; }
.bg-blue-light { background-color: #29B6F6 !important; }
.bg-blue-x-light { background-color: #81D4FA !important; }
.bg-blue-xx-light { background-color: #E0F2F1 !important; }
.bg-green-xx-dark { background-color: #24322E !important; }
.bg-green-x-dark { background-color: #364C45 !important; }
.bg-green-dark { background-color: #48655C !important; }
.bg-green { background-color: #5A7E73 !important; }
.bg-green-light { background-color: #7B988F !important; }
.bg-green-x-light { background-color: #9CB2AB !important; }
.bg-green-xx-light { background-color: #BDCCC7 !important; }

.amber-duotone {
  --fa-primary-color: #B8860B;   
  --fa-secondary-color: #ffe135;
  --fa-secondary-opacity: 1.0; 
}

.green-duotone {
  --fa-primary-color: #1b7a43;   
  --fa-secondary-color: #eaf9f0;
  --fa-secondary-opacity: 1.0;   
}

.green-dk-duotone {
  --fa-primary-color: #005900;   
  --fa-secondary-color: #329932;
  --fa-secondary-opacity: 0.5;   
} 

.blue-duotone {
  --fa-primary-color: #1976d2;   
  --fa-secondary-color: #67e6fb;
  --fa-secondary-opacity: 0.5;   
}

.crimson-duotone {
  --fa-primary-color: #d70d1a;   
  --fa-secondary-color: #d70d1a;
  --fa-secondary-opacity: 0.4;   
}

.red-duotone {
  --fa-primary-color: #d70d1a;   
  --fa-secondary-color: #d70d1a;
  --fa-secondary-opacity: 0.5;   
}

.iris-duotone {
  --fa-primary-color: #765bee;   
  --fa-secondary-color: #b1bfce;
  --fa-secondary-opacity: 0.8;   
}

.green-duotone {
  --fa-primary-color: #1b7a43;   
  --fa-secondary-color: #eaf9f0;
  --fa-secondary-opacity: 1.0;   
}

.slate-duotone {
  --fa-primary-color: #64809E;   
  --fa-secondary-color: #b1bfce;
  --fa-secondary-opacity: 0.8;   
}

.orange-duotone {
  --fa-primary-color: #f2711c;   
  --fa-secondary-color: #b1bfce;
  --fa-secondary-opacity: 0.5;   
}

.white-duotone {
  --fa-primary-color: #ffffff;
  --fa-secondary-color: #b1bfce;
  --fa-secondary-opacity: 0.5;   
}

/* ===================================================================
            BUTTON AND LINK STYLING
=================================================================== */

/* Button Colors */
.btn-crimson { background-color: #d70d1a; color: #FFFFFF; }
.btn-crimson:hover { background-color: #d70d1a; color: #FFFFFF; }

.btn-crimson-outline { background-color: transparent; color: #d70d1a; border: 1px solid #d70d1a; }
.btn-crimson-outline:hover { background-color: #d70d1a; color: #FFFFFF; border: solid 1px #d4d4d4; }

.btn-white { background-color: #FFFFFF; color: #3C6186; border: 1px solid #d4d4d4; }
.btn-white:hover { background-color: #f0f4f8; color: #3C6186; border: solid 1px #d4d4d4; }

.btn-outline-white { background-color: transparent; color: #FFFFFF; border: 1px solid #FFFFFF; }
.btn-outline-white:hover { background-color: #f0f4f8; color: #3C6186; border: solid 1px #d4d4d4; }

.btn-blue { background-color: #1976D2; color: #FFFFFF; }
.btn-blue:hover { background-color: #1976D2; color: #FFFFFF; }

.btn-blue-outline { background-color: transparent; color: #1976D2; border: 1px solid #1976D2; }
.btn-blue-outline:hover { background-color: #1976D2; color: #FFFFFF; border: solid 1px #d4d4d4; }

/* ===================================================================
            FORM ELEMENT STYLING 
=================================================================== */

.seal {
  /* position: relative; */
  display: inline-block;
  background-color: #ffffff;
  color: #d70d1a;
  padding: 0.5em 1em;
  border: 1px solid #d70d1a;
  border-radius: 2.25rem;
  width: fit-content;
  font-size: 0.85em;
  text-decoration: none;
}

.seal-btn:hover {
  background-color: #d70d1a;
  color: #ffffff;
  text-decoration: none;
  border: solid 1px #d4d4d4;
}
/* .crimson-x-light { color: #EF9EA3 !important; }
.crimson-xx-light { color: #FBE6E8 !important; } */
/* Range Slider Styling */

.slider-labels span {
  min-width: 1.5em;
  text-align: center;
  display: inline-block;
}

input[type="range"].slider {
  width: 100%;
  min-width: 120px; /* optional: set a minimum width */
  max-width: 100%;
  box-sizing: border-box;
  /* background: transparent; */
  border-radius: 0;
}

/* ===================================================================
            UTILITY & FORMATTING CLASSES
=================================================================== */

.form-label {
  font-weight: 400;
}

.form-control {
  font-weight: 300;
}

.fit-content {
  width: fit-content;
}

/* Remove rounded corners from the modal container */
.modal-content {
    border-radius: 0;
}

/* Optional: If you use header/footer borders, 
   some versions of Bootstrap apply specific radii there too */
.modal-header, 
.modal-footer {
    border-radius: 0;
}

/* .ranking-slider {
  -webkit-appearance: none;
  appearance: none;
  background-color: #d4d4d4;
  height: 8px;
  outline: none;
}
.ranking-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 4px;
  height: 4px;
  background-color: #ff0066;
  cursor: pointer;
  border-radius: 50%;
  border: none;
} */

/* Target the button when it's NOT collapsed (i.e., when the body is open) */
.accordion-button:not(.collapsed) {
  /* Set the background color when the accordion is OPEN */
  background-color: #f0f4f8;
  color: #ff0066; /* Adjust text color if needed */
}

/* Target the button on hover */
.accordion-button:not(.collapsed):hover {
  /* The color that shows when the open header is hovered */
  background-color: #A5BCCC; color: #81070F; text-decoration: none;
}

.accordion-button.collapsed {
  /* Set the background color when the accordion is CLOSED */
  background-color: #f0f4f8;
  color: #333; /* Adjust text color if needed */
}

/* Target the button when it IS collapsed (i.e., when the body is closed) */
.accordion-button:hover {
  /* The color that shows when the closed header is hovered */
  background-color: #A5BCCC; color: #81070F; text-decoration: none;
}


.box-shadow {
  box-shadow: 5px 5px 5px 1px #d4d4d4;
}

.border-tbl {
  margin-top: -1px;
  border-top: 1px solid #d4d4d4;
  border-right: 1px solid #d4d4d4;
  border-left: 1px solid #d4d4d4;
  border-bottom: 1px solid #d4d4d4;
}

/* .input-rating {
  width: 100px;
} */

.input-btn {
  color: #fff;
  background-color: #3c6186;
  text-decoration: none;
  max-width: 50px;
}

.input-btn:hover {
  color: #333333;
  background-color: #67e6fb;
  text-decoration: none;
}

.input-reset-btn {
  color: #fff;
  background-color: #be123c;
  text-decoration: none;
  max-width: 50px;
}

.input-reset-btn:hover {
  color: #333333;
  background-color: #ebb7c4;
  text-decoration: none;
}

/* Eval Colors */
.eval10 { color: #00C853 !important; }
.eval9 { color: #4CAF50 !important; }
.eval8 { color: #CDDC39 !important; }
.eval7 { color: #FFC107 !important; }
.eval6 { color: #FFA500 !important; }
.eval5 { color: #D70D1A !important; }
.eval4 { color: #B70C15 !important; }
.eval3 { color: #8B0911 !important; }
.eval2 { color: #6B070D !important; }
.eval1 { color: #4A0409 !important; }
.eval0 { color: #000000 !important; }

/* Evaluation badge color helpers
.eval-red {
  background-color: #e74c3c !important;
  color: #fff !important;
}
.eval-pink {
  background-color: #ff77a9 !important;
  color: #000 !important;
}
.eval-orange {
  background-color: #ff8c42 !important;
  color: #000 !important;
}
.eval-yellow {
  background-color: #f1c40f !important;
  color: #000 !important;
}
.eval-chartreuse {
  background-color: #9acd32 !important;
  color: #000 !important;
}
.eval-green {
  background-color: #2ecc71 !important;
  color: #fff !important;
}

.eval-score {
  text-align: center;
}
.eval-sm {
  display: inline-block;
  padding: 0.75em 1em;
  border-radius: 2.25rem;
  font-size: 2.5em;
}

.eval-md {
  display: inline-block;
  padding: 0.5em 0.75em;
  border-radius: 2.25rem;
  font-size: 1em;
}

.eval-square {
  display: inline-block;
  font-size: 1.5em;
  padding: 0.5em 0.75em;
  margin: 0.5em;
  border-radius: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
} */

.form-control {
  border: 1px solid #d4d4d4;
}

.form-control::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #b2bbc3;
  opacity: 1; /* Firefox */
}

.form-control:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #b2bbc3;
}

.form-control::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #b2bbc3;
}

/* .tab-panel {
  padding: 1em;
  border: 1px solid #d4d4d4;
  border-top: none;
  background-color: #ffffff;
  min-height: 200px;
} */

/* General pagination styling (applies to all pagination not in specific containers) */
.pagination .page-link {
  color: #3c6186; /* brand purple */
  border-color: #d4d4d4;
  border-width: 1px;;
  padding: 0.35rem 0.6rem;
  border-radius: 0;
}

.pagination .page-item.active .page-link {
  background-color: #3c6186; /* brand purple */
  color: #ffffff !important;
  border-color: #3c6186;
}

.pagination .page-link:hover {
  background-color: #b1bfce; /* light brand hover */
  color: #3c6186;
}

.pagination .page-item.disabled .page-link {
  color: #6c6c6c; /* muted grey */
  background-color: transparent;
  pointer-events: none;
}

/* ===================================================================
   AUTOCOMPLETE DROPDOWN STYLES
=================================================================== */
#autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  margin-top: 0.125rem;
}

#autocomplete-dropdown .dropdown-item {
  padding: 0.5rem 1rem;
  color: #333;
  cursor: pointer;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
}

#autocomplete-dropdown .dropdown-item:last-child {
  border-bottom: none;
}

#autocomplete-dropdown .dropdown-item:hover,
#autocomplete-dropdown .dropdown-item.active {
  background-color: #f0f7ff;
  color: #3c6186;
}

#autocomplete-dropdown .dropdown-item:active {
  background-color: #e0efff;
}

/* Bookmark Toggle Buttons */
.bookmark-toggle {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}

.bookmark-toggle:hover {
  transform: scale(1.1);
}

.bookmark-toggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.match-toggle {
  background: none;
  color: #d70d1a;
  cursor: pointer;
  border: none;
  text-decoration: none;
  /* border: solid 1px #d70d1a;
  padding: 0.25em 0.75em;
  border-radius: 2.25rem; */
  font-size: 0.85em;
  text-align: center;
  transition: transform 0.2s;
}

 .match-toggle:hover {
  transform: scale(1.1);
}

 .match-toggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.list-nostyle {
  list-style-type: none;
  padding: 0;
  margin: 0 0 0 1em;
}

/* DataTables Customization for Vendor List
#vendorListTable_wrapper .dataTables_length {
  margin-bottom: 1rem;
}

#vendorListTable_wrapper .dataTables_filter {
  margin-bottom: 1rem;
}

#vendorListTable_wrapper .dataTables_filter input {
  margin-left: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

#vendorListTable_wrapper .dataTables_info {
  padding-top: 0.75rem;
}

#vendorListTable_wrapper .dataTables_paginate {
  padding-top: 0.75rem;
}

#vendorListTable thead th {
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
}

#vendorListTable tbody tr:hover {
  background-color: #f5f5f5;
} */

/* ===================================================================
            FORM FIELD STATES
=================================================================== */

/* Locked/Disabled field state - clear visual distinction that field is not editable */
.field-locked {
  background-color: #f5f5f5 !important;
  color: #999999 !important;
  opacity: 0.7;
  cursor: not-allowed !important;
  border-color: #e0e0e0 !important;
}

.field-locked:focus {
  outline: none;
  box-shadow: none;
  background-color: #f5f5f5 !important;
}

/* Disabled state for checkboxes and radio buttons */
.field-locked[type="checkbox"],
.field-locked[type="radio"] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Label styling for locked fields */
.field-locked ~ label,
label[for*="checked"][disabled] {
  color: #999999;
  cursor: not-allowed;
}

/* ===================================================================
   RICH TEXT CONTENT DISPLAY
   Ensures HTML formatting tags render correctly in view divs.
   Needed because Bootstrap resets some default browser styles.
=================================================================== */
.rich-content { color: #1c1f20 !important; opacity: 0.85; }
.rich-content u  { text-decoration: underline !important; }
.rich-content s  { text-decoration: line-through !important; }
.rich-content em { font-style: italic !important; }
.rich-content strong { font-weight: bold !important; }
.rich-content a  { color: #1976D2; text-decoration: underline; }
.rich-content h2 { font-size: 1.5rem; font-weight: 600; margin: 0.75rem 0 0.25rem; }
.rich-content h3 { font-size: 1.25rem; font-weight: 600; margin: 0.75rem 0 0.25rem; }
.rich-content ul, .rich-content ol { padding-left: 1.5rem; margin-bottom: 0.5rem; }
.rich-content li { margin-bottom: 0.25rem; }
.rich-content p  { margin-bottom: 0.5rem; }
.rich-content blockquote { border-left: 3px solid #d4d4d4; padding-left: 1rem; color: #6c757d; margin: 0.5rem 0; }

/* ===================================================================
   FORM LOCKING — CRUD View Mode
   Applied by BaseFormManager when mode = view.
   Uses pointer-events so all field values remain serializable.
=================================================================== */
form.form-locked input:not([type="submit"]):not([type="checkbox"]),
form.form-locked select,
form.form-locked textarea,
form.form-locked input[type="range"] {
  pointer-events: none;
  background-color: var(--bs-secondary-bg, #e9ecef);
  opacity: 0.85;
  cursor: not-allowed;
}

form.form-locked input[type="checkbox"] {
  pointer-events: none;
  opacity: 0.65;
  cursor: not-allowed;
}

/* ===================================================================
noUiSlider Custom Styles (for summary screen) - optional, can be removed if not using noUiSlider
=================================================================== */

/* noUiSlider — blue track, dot handle */
  .adv-slider { margin: 8px 4px 4px; }
  .adv-slider .noUi-connect { background: #A4A5A5; }
  .adv-slider .noUi-target  { background: #d4d4d4; border: none; box-shadow: none; }
  .adv-slider .noUi-handle  {
    width: 25px !important; height: 25px !important; right: -10px !important; top: -5px !important;
    border-radius: 50% !important; background: #0d6efd !important;
    border: 2px solid #fff !important; box-shadow: 0 2px 6px rgba(13,110,253,0.4) !important;
    cursor: pointer !important; display: block !important; box-sizing: border-box !important;
  }
  .adv-slider .noUi-handle::before,
  .adv-slider .noUi-handle::after { display: none; }

/* ===================================================================
   VALUES SURVEY STYLES
=================================================================== */

/* ── CONTAINER & LAYOUT ──────────────────────────────────────────────────── */

.values-survey-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 0;
}

.carousel-container {
  position: relative;
  min-height: 400px;
}

/* ── PROGRESS BAR ────────────────────────────────────────────────────────── */

.progress {
  background-color: #d4d4d4;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  background: linear-gradient(90deg, #0d6efd 0%, #0a58ca 100%);
  transition: width 0.4s ease;
  border-radius: 10px;
}

/* ── QUESTION DISPLAY ────────────────────────────────────────────────────── */

#currentQuestion .card-body {
  padding: 2rem 1.5rem;
  background-color: #ffffff;
}

#questionText {
  font-weight: 600;
  color: #1c1f20;
  line-height: 1.4;
}

.text-muted.d-block {
  font-size: 0.85rem;
  color: #6c757d;
}

/* ── SLIDER DISPLAY ─────────────────────────────────────────────– */

#scoreIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75em;
  margin-top: 0px;
  color: #1c1f20;
}

/* ── RANGE SLIDER (CROSS-BROWSER - for summary) ─────────────────────────────────────── */

.form-range {
  height: 8px;
  background-color: #d4d4d4;
  border-radius: 4px;
  border: none;
  outline: none;
  /* -webkit-appearance: none; */
  width: 100%;
  cursor: pointer;
  transition: background 0.15s ease;
}

/* Webkit (Chrome, Safari, Edge) */
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0d6efd;
  cursor: pointer;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(13, 110, 253, 0.4);
  transition: all 0.2s ease;
}

.form-range::-webkit-slider-thumb:hover {
  width: 28px;
  height: 28px;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.6);
  background: #0a58ca;
}

.form-range::-webkit-slider-thumb:active {
  box-shadow: 0 4px 16px rgba(13, 110, 253, 0.8);
}

/* Firefox */
.form-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0d6efd;
  cursor: pointer;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(13, 110, 253, 0.4);
  transition: all 0.2s ease;
}

.form-range::-moz-range-thumb:hover {
  width: 28px;
  height: 28px;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.6);
  background: #0a58ca;
}

/* Firefox Track */
.form-range::-moz-range-track {
  background: transparent;
  border: none;
}

.form-range::-moz-range-progress {
  background-color: #0d6efd;
}

/* IE / Edge */
.form-range::-ms-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0d6efd;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(13, 110, 253, 0.4);
}

.form-range:disabled {
  background-color: #e9ecef;
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── NOTES TEXTAREA ──────────────────────────────────────────────────────– */

#scoreNote {
  resize: none;
  font-family: inherit;
}

/* ── SUMMARY SCREEN STYLES ───────────────────────────────────────────────– */

.summary-container {
  margin-top: 20px;
}

.summary-cards {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 8px;
  border: 1px solid #d4d4d4;
  border-radius: 6px;
  background-color: #ffffff;
}

.summary-cards::-webkit-scrollbar {
  width: 6px;
}

.summary-cards::-webkit-scrollbar-track {
  background: transparent;
}

.summary-cards::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
  transition: background 0.2s ease;
}

.summary-cards::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.summary-card {
  border-left: 4px solid #0d6efd;
  transition: all 0.2s ease;
  background-color: #ffffff;
  color: #1c1f20;
  border: 1px solid #d4d4d4;
}

.summary-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateX(2px);
}

.summary-card.null-score {
  border-left-color: #ffc107;
  background-color: #fffbf0;
}

.summary-card.complete-score {
  border-left-color: #28a745;
}

.summary-null-badge {
  background-color: #ffc107 !important;
  color: #333 !important;
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
}

.summary-question {
  font-weight: 600;
  color: #212529;
  margin-bottom: 0.75rem;
}

.score-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.summary-slider {
  height: 6px;
  cursor: pointer;
  margin: 8px 0;
}

/* ── ANIMATIONS FOR SURVEY ───────────────────────────────────────────────– */

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── ACCESSIBILITY FOR SURVEY ────────────────────────────────────────────– */

.form-range:focus {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* ── END VALUES SURVEY STYLES ────────────────────────────────────────────– */

/* ===================================================================
   MEDIA QUERIES
=================================================================== */
/*** Phone 425px ***/
@media (max-width: 576px) {
  .values-survey-container {
    padding: 10px;
  }

  #currentQuestion .card-body {
    padding: 1.25rem 1rem;
  }

  #questionText {
    font-size: 1.1rem;
  }

  .score-value-display {
    gap: 8px;
  }

  .score-value-display .h4 {
    font-size: 1.75rem;
  }

  #scoreIcon {
    font-size: 20px;
  }

  .form-label {
    font-size: 0.9rem;
  }

  #scoreNote {
    font-size: 0.9rem;
  }

  .summary-card .card-body {
    padding: 1rem !important;
  }

  .summary-question {
    font-size: 0.95rem;
  }

  .alert {
    padding: 0.75rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 768px) {
  .values-survey-container {
    max-width: 100%;
    padding: 15px;
  }

  .carousel-container {
    min-height: 350px;
  }

  #currentQuestion .card-body {
    padding: 1.5rem 1.25rem;
  }

  .d-flex.gap-2 {
    flex-direction: column;
    gap: 0.5rem !important;
  }

  .btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }

  .score-display {
    padding: 15px;
  }

  .form-range::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
  }

  .form-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }

  .summary-cards {
    max-height: 300px;
  }
}

/*** Tablet 768px ***/
@media (min-width: 768px) {
  .sidebar {
    min-width: 250px;
    min-height: 600px;
  }
}

/* ── TOUCH-FRIENDLY (Touch Devices) ──────────────────────────────────────– */

@media (hover: none) and (pointer: coarse) {
  .btn {
    min-height: 48px;
    min-width: 48px;
  }

  .form-range::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }

  .form-range::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }

  .summary-card {
    padding: 12px 0;
  }
}

/*** Laptop & Desktop 1024px <- Normal 1440px <- Large ***/
@media (min-width: 1024px) {
}

@media (min-width: 1440px) {
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* 1. Change the background and text color */
.tooltip-inner {
    background-color: #999999 !important; /* Your background color */
    color: #ffffff !important;           /* Your font color */
    font-family: 'Your-Font-Family', sans-serif;
    font-size: 14px;
}

/* 2. Change the arrow color to match */
/* For tooltips on top */
.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #2d3436 !important;
}

/* For tooltips on bottom */
.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #2d3436 !important;
}

/* For tooltips on left */
.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: #2d3436 !important;
}

/* For tooltips on right */
.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: #2d3436 !important;
}