:root {
    --theme-main: rgb(0, 105, 180);
    --theme-secondary: rgb(108 117 125);
    --subtheme-communication:  rgb(0, 73, 127);
    --subtheme-events: rgb(63, 165, 53);
    --subtheme-products: rgb(216, 154, 6);
    --subtheme-brands: rgb(0, 140, 168);
    --subtheme-training: rgb(18, 48, 75);
    --subtheme-tools: rgb(149, 191, 31);
    --subtheme-solutions: rgb(117, 141, 154);
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

.card-title,
.card-header,
.card-footer {
    background: rgb(from var(--theme-main) r g b);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

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

.card-footer a,
.card-footer a:link,
.card-footer a:visited {
    color: white !important;
}

.card-footer a:hover,
.card-footer a:active,
.card-footer a:focus {
    color: black !important;
}

.card-title,
.card-header,
#resources .card-header h2 {
    margin-bottom: 0;
}

#resources .card-footer,
#resources .dropdown-menu.show {
    background-color:  rgba(108, 117, 125, 1) !important;
}

.home #resources .card-footer {
    min-height: 7em;
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center;     /* Vertical centering */
}

#resources .card-footer i {
    font-size: 2.5em;
}

.card-body {
    color: black;
}

/* HOME ****************************************************************** */
.subtheme-home,
.home .card-list .card-title,
.home .card-list .card-footer {
    background: rgb(from var(--theme-main) r g b);
}

.home #lead-aside,
.home ::-webkit-scrollbar-thumb,
.home .card-list .card {
    background: rgba(from var(--theme-main) r g b / 0.25) !important;
}

.home .card-title,
.home .card-header,
.home .card-footer {
    background: transparent;
}

.home h1,
.home h2,
.home h3,
.home h4,
.home h5,
.home h6,
/* .home #main a, */
.home th,
.home th a,
.home td a,
.home #lead-aside a {
    color: rgb(from var(--theme-main) r g b) !important;
    /* text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); */
}

.home h2 a,
.home h2 a:link,
.home h2 a:visited,
.home .h4 a,
.home .h4 a:link,
.home .h4 a:visited,
.generic h2 a,
.generic h2 a:link,
.generic h2 a:visited,
.generic .h4 a,
.generic .h4 a:link,
.generic .h4 a:visited,
.generic #region-nav a,
.generic #region-nav a:link,
.generic #region-nav a:visited,
.generic #region-nav h3 a,
.generic #region-nav h3 a:link,
.generic #region-nav h3 a:visited,
.generic #content-panel a,
.generic #content-panel a:link,
.generic #content-panel a:visited,
.home h6,
.generic h6 {
    color: rgb(from var(--theme-main) r g b) !important;
    text-decoration: none;
}

.home h2 a:hover,
.home h2 a:active,
.home h2 a:focus,
.home .h4 a:hover,
.home .h4 a:active,
.home .h4 a:focus,
.generic h2 a:hover,
.generic h2 a:active,
.generic h2 a:focus,
.generic .h4 a:hover,
.generic .h4 a:active,
.generic .h4 a:focus,
.generic #region-nav a:hover,
.generic #region-nav a:active,
.generic #region-nav a:focus,
.generic #content-panel a:hover,
.generic #content-panel a:active,
.generic #content-panel a:focus {
    text-decoration: underline;
}

.home ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 8px rgba(from var(--theme-main) r g b / 0.25);
}

.brands h1,
.brands.iframe h2,
.generic h1,
.events h1,
.media h1,
.training h1,
.products h1,
.solutions h1,
.tools h1,
.communication h1 {
    color: white;
    text-align: center;
    line-height: 2.25em;
    font-size: 2em;
}

.iframepage h2 {
    padding: 0.5em 1em 0.5em 1em;
    text-align: center;
}

.home #main .card-title a,
/* .home #main .card-body, */
.home #main .card-body a,
.communication #main .card-title a,
.products #main .card-title a,
.solutions #main .card-title a,
.events #main .card-title a,
.brands #main .card-title a,
.training #main .card-title a,
.tools #main .card-title a,
.home #region-nav li.active a,
.generic #region-nav .active a,
.generic #content-panel a.btn,
.generic #content-panel a.btn:link,
.generic #content-panel a.btn:visited,
.brands #main a.btn,
.brands #main a.btn:link,
.brands #main a.btn:visited {
    color: white !important;
}

.generic #content-panel a.btn:hover,
.generic #content-panel a.btn:active,
.generic #content-panel a.btn:focus {
    text-decoration: none;
}

#resources .card-header {
    height: 4.75em;
    display: flex;           /* Enable Flexbox */
    justify-content: center; /* Horizontal centering */
    align-items: center;     /* Vertical centering */
}

/* GENERIC  ****************************************************************** */
.subtheme-generic,
.generic h1,
.generic .card-list .card-footer,
#resources .generic .card-title,
#resources .generic .card-header {
    background: rgb(from var(--theme-main) r g b) !important;
}

.generic .table-dark-header thead th,
.generic #intro .btn {
    background: rgb(from var(--theme-main) r g b) !important;
    color: white !important;
}

.generic #lead-aside,
.generic .card-list .card,
#resources .card.generic,
#resources .generic .card-body,
.generic .table-dark-header tfoot th {
    background: rgba(from var(--theme-main) r g b / 0.25);
}

.generic #main h2,
.generic #main h3,
.generic #main h4,
.generic #main h5,
.generic #main h6,
.generic #main p a,
.generic th,
.generic th a,
.generic td a,
.generic #lead-aside a,
.generic #lead-aside dt {
    color: rgb(from var(--theme-main) r g b) !important;
}

/* News  ****************************************************************** */
.subtheme-news,
.news h1,
.news .card-list .card-footer,
#resources .news .card-title,
#resources .news .card-header {
    background: rgb(from var(--subtheme-communication) r g b) !important;
}

.news .table-dark-header thead th,
.news #intro .btn {
    color: white !important;
    background: rgb(from var(--subtheme-communication) r g b) !important;
}

.news #lead-aside,
.news .card-list .card,
#resources .card.news,
#resources .news .card-body,
.news .table-dark-header tfoot th {
    background: rgba(from var(--subtheme-communication) r g b / 0.25) !important;
}

.news #main h2,
.news #main h3,
.news #main h4,
.news #main h5,
.news #main h6,
.news #main p a,
.news th,
.news th a,
.news td a,
.news #lead-aside a,
.news #lead-aside dt {
    color: rgb(from var(--subtheme-communication) r g b) !important;
}


/* BRANDS ****************************************************************** */
.subtheme-brands,
.brands h1,
.brands .card-list .card-footer,
#resources .brands .card-title,
#resources .brands .card-header {
    background: rgb(from var(--subtheme-brands) r g b) !important;
}

.brands .table-dark-header thead th,
.brands #intro .btn,
.brands.iframepage h2 {
    color: white !important;
    background: rgb(from var(--subtheme-brands) r g b) !important;
}

.brands #intro .btn:hover,
.brands #intro .btn:active,
.brands #intro .btn:focus {
    color: black !important;
}

.brands #lead-aside,
.brands .card-list .card,
#resources .card.brands,
#resources .brands .card-body,
.brands .table-dark-header tfoot th {
    background: rgba(from var(--subtheme-brands) r g b / 0.25) !important;
}


.brands #resources .card-footer a,
.brands #resources .card-footer a:link,
.brands #resources .card-footer a:visited {
    color: white !important;
}

.brands #main h2,
.brands #main h3,
.brands #main h4,
.brands #main h5,
.brands #main h6,
.brands #main p a,
.brands th,
.brands th a,
.brands td a,
.brands #lead-aside a,
.brands #lead-aside dt {
    color: rgb(from var(--subtheme-brands) r g b) !important;
}

.brands #main a,
.brands #main a:link,
.brands #main a:visited {
    color: rgb(from var(--subtheme-brands) r g b) !important;
    text-decoration: none;
}

.brands #main a:hover,
.brands #main a:active,
.brands #main a:focus {
    color: black !important;
    text-decoration: underline;
}

body.brands #main .card-footer a:hover,
body.brands #main .card-footer a:active,
body.brands #main .card-footer a:focus {
    color: black !important;
    text-decoration: none;
}

/* EVENTS ****************************************************************** */
.subtheme-events,
.events h1,
.events .card-list .card-footer,
#resources .events .card-title,
#resources .events .card-header {
    background: rgb(from var(--subtheme-events) r g b) !important;
}

.events .table-dark-header thead th,
.events #intro .btn {
    color: white !important;
    background: rgb(from var(--subtheme-events) r g b) !important;
}

.events #lead-aside,
.events .card-list .card,
#resources .card.events,
#resources .events .card-body,
.events .table-dark-header tfoot th {
    background: rgba(from var(--subtheme-events) r g b / 0.25) !important;
}

.events #main h2,
.events #main h3,
.events #main h4,
.events #main h5,
.events #main h6,
.events #main p a,
.events th,
.events th a,
.events td a,
.events #lead-aside a,
.events #lead-aside dt {
    color: rgb(from var(--subtheme-events) r g b) !important;
}

/* MEDIA ****************************************************************** */
.subtheme-solutions,
.solutions h1,
.solutions .card-list .card-footer,
#resources .solutions .card-title,
#resources .solutions .card-header {
    background: rgb(from var(--subtheme-solutions) r g b) !important;
}

.solutions .table-dark-header thead th,
.solutions #intro .btn {
    color: white !important;
    background: rgb(from var(--subtheme-solutions) r g b) !important;
}

.solutions #lead-aside,
.solutions .card-list .card,
#resources .card.solutions,
#resources .solutions .card-body,
.solutions .table-dark-header tfoot th {
    background: rgba(from var(--subtheme-solutions) r g b / 0.25) !important;
}

.solutions #main h2,
.solutions #main h3,
.solutions #main h4,
.solutions #main h5,
.solutions #main h6,
.solutions #main p a,
.solutions th,
.solutions th a,
.solutions td a,
.solutions #lead-aside a,
.solutions #lead-aside dt {
    color: rgb(from var(--subtheme-solutions) r g b) !important;
}


/* PRODUCTS ****************************************************************** */
.subtheme-products,
.products h1,
.products .card-list .card-footer,
#resources .products .card-title,
#resources .products .card-header {
    background: rgb(from var(--subtheme-products) r g b) !important;
}

.products .table-dark-header thead th,
.products #intro .btn {
    color: white !important;
    background: rgb(from var(--subtheme-products) r g b) !important;
}

.products #lead-aside,
.products ::-webkit-scrollbar-thumb,
.products .card-list .card,
#resources .card.products,
#resources .products .card-body,
.products .table-dark-header tfoot th {
    background: rgba(from var(--subtheme-products) r g b / 0.25);
}

.products #main h2,
.products #main h3,
.products #main h4,
.products #main h5,
.products #main h6,
.products #main p a,
.products th,
.products th a,
.products td a,
.products #lead-aside a,
.products #lead-aside dt {
    color: rgb(from var(--subtheme-products) r g b) !important;
    transition: text-shadow 200ms ease-in-out;    
}

/* TRAINING ****************************************************************** */
.subtheme-training,
.training h1,
#resources .training .card-header,
#resources .training .card-title,
#resources .training .card-header {
    background: rgb(from var(--subtheme-training) r g b) !important;
}

.training .table-dark-header thead th,
.training #intro .btn {
    color: white !important;
    background: rgb(from var(--subtheme-training) r g b) !important;
}

.training #lead-aside,
.training .card-list .card,
#resources .card.training,
#resources .training .card-body,
.training .table-dark-header tfoot th {
    background: rgba(from var(--subtheme-training) r g b / 0.25);
}

.training #main h2,
.training #main h3,
.training #main h4,
.training #main h5,
.training #main h6,
.training #main p a,
.training th,
.training th a,
.training td a,
.training #lead-aside a,
.training #lead-aside dt {
    color: rgb(from var(--subtheme-training) r g b) !important;
}

/* TOOLS ****************************************************************** */
.subtheme-tools,
.tools h1,
.tools .card-list .card-footer,
#resources .tools .card-title,
#resources .tools .card-header {
    background: rgb(from var(--subtheme-tools) r g b) !important;
}

.tools .table-dark-header thead th,
.tools #intro .btn {
    color: white !important;
    background: rgb(from var(--subtheme-tools) r g b) !important;
}

.tools #lead-aside,
.tools .card-list .card,
#resources .card.tools,
#resources .tools .card-body,
.tools .table-dark-header tfoot th {
    background: rgba(from var(--subtheme-tools) r g b / 0.25);
}

.tools #main h2,
.tools #main h3,
.tools #main h4,
.tools #main h5,
.tools #main h6,
.tools #main p a,
.tools th,
.tools th a,
.tools td a,
.tools #lead-aside a,
.tools #lead-aside dt {
    color: rgb(from var(--subtheme-tools) r g b) !important;
}

/* COMMUNICATION ****************************************************************** */
.subtheme-communication,
.communication h1,
.communication .card-list .card-footer,
#resources .communication .card-title,
#resources .communication .card-header {
    background: rgb(from var(--subtheme-communication) r g b) !important;
}

.communication .table-dark-header thead th,
.communication #intro .btn {
    color: white !important;
    background: rgb(from var(--subtheme-communication) r g b) !important;
}

.communication #lead-aside,
.communication .card-list .card,
#resources .card.communication,
#resources .communication .card-body,
.communication .table-dark-header tfoot th {
    background: rgba(from var(--subtheme-communication) r g b / 0.25) !important;
}

.communication #main h2,
.communication #main h3,
.communication #main h4,
.communication #main h5,
.communication #main h6,
.communication #main p a,
.communication th,
.communication th a,
.communication td a,
.communication #lead-aside a,
.communication #lead-aside dt {
    color: rgb(from var(--subtheme-communication) r g b) !important;
}

/* ****************************************************************** */

#resources .card-header h2,
#resources .card-header h2 a,
#resources .card-footer h2 {
    color: white !important;
}

/* ****************************************************************** */
body {
    font-family: "Univers Roman", "Roboto", "Arial", sans-serif, sans, clean;
}

.bg-primary,
#topnavbar {
    background-color: rgb(from var(--theme-main) r g b)!important;
}

.navbar.bg-primary .navbar-toggler-icon,
[data-bs-theme="dark"] .navbar.bg-primary .navbar-toggler-icon,
[data-bs-theme="light"] .navbar.bg-primary .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

.navbar.bg-primary .navbar-toggler,
[data-bs-theme="dark"] .navbar.bg-primary .navbar-toggler,
[data-bs-theme="light"] .navbar.bg-primary .navbar-toggler {
    border-color: #fff;
}

#logo {
    height: 52px;
    width: auto;
}

#topnavbar {
    z-index: 1000;
}

#topnavbar .nav-icon {
    height: 40px;
    transition: all 0.3s ease;
    filter: brightness(100%);
    padding: 5px; /* Adds space to prevent clipping during zoom */
}

#topnavbar .nav-icon:hover {
    filter: brightness(110%) drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
    transform: scale(1.05);
}

#topnavbar i {
    color: white;
    font-size: 2.25em;
    margin-left: 0.5em;
}

#topnavbar .dropdown-menu i {
    font-size: 1em;
    padding-right: 1.75em;
}

.dropdown-toggle::after {
    color: white;
}

#headernav {
    height: 80px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Custom Component: subnavbar              */

#subheadernav {
    font-size: 1em;
    line-height: 2.5em;
}

#subheadernav .navbar-toggler:focus {
    box-shadow: none;
}

#subheadernav .navbar-toggler .fa-chevron-up,
#subheadernav .navbar-toggler .fa-chevron-down {
  font-size: 1.25rem; /* Match Bootstrap's default toggler icon size */
  transition: transform 0.2s ease-in-out; /* Smooth rotation animation */
}

#subheadernav .navbar-toggler[aria-expanded="false"] .fa-chevron-up,
#subheadernav .navbar-toggler[aria-expanded="false"] .fa-chevron-down {
  transform: rotate(180deg);
}

#subheadernav a,
#subheadernav button {
    text-transform: uppercase;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    width: 100%;
    transition: text-shadow 200ms ease-in-out;
}

#subnavbar a:hover,
#subnavbar a:active,
#subnavbar a:focus,
#subnavbar button:hover,
#subnavbar button:active,
#subnavbar button:focus {
    text-shadow: 
        0 0 2px rgba(255, 255, 255, 0.8),  /* Tight inner glow for edge definition */
        0 -1px 4px rgba(0, 0, 0, 0.3),     /* Subtle dark offset for outline/contrast */
        0 0 5px white,                    /* Your original mid-glow */
        0 0 10px white                    /* Your original wider white */
}        

#lead-aside a:hover,
#lead-aside a:active,
#lead-aside a:focus {
    color: black !important;
    text-shadow: 
        0 0 2px rgba(255, 255, 255, 0.8),  /* Tight inner glow for edge definition */
        0 -1px 4px rgba(0, 0, 0, 0.3),     /* Subtle dark offset for outline/contrast */
        0 0 5px white,                    /* Your original mid-glow */
        0 0 10px white                    /* Your original wider white */
}

#subnavbar .dropdown-menu[data-bs-popper] {
    margin-top: 0;
    padding-top: 0;
    border-radius: 0;
    background-color: inherit;    
}

#subnavbar .dropdown-menu[data-bs-popper] li {
    border-top: 1px solid white;
}

#subnavbar .dropdown-menu[data-bs-popper] a {
    margin-top: 0;
    text-transform: capitalize;
}

#subnavbar .dropdown-item {
    white-space: wrap;
}

#subnavbar .dropdown-item:focus,
#subnavbar .dropdown-item:hover {
    background-color: inherit;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#footer {
    font-size: 0.8em;
    background: linear-gradient(-45deg, #054169, #0071bc);
    color: white;
    font-size: 0.8em;
    padding: 60px 24px 24px; /* extra top padding to compensate for cut */
    clip-path: polygon(
        0          4vh,      /* ← this controls the slant height */
        100%         0,
        100%      100%,
        0         100%
    );    
}

#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6,
#footer th {
    color: white !important;
}

#footer a {
    line-height: 2.25em;
}

#footer,
#footer a,
#footer a:link,
#footer a:visited  {
    color: white;
    text-decoration: none;
    text-shadow: none; /* Base: No glow */
    transition: text-shadow 200ms ease-in-out; /* Smooth fade in/out */      
}

#footer a:hover,
#footer a:active,
#footer a:focus {
    color: black;
    text-shadow: 
        0 0 2px rgba(255, 255, 255, 0.8),  /* Tight inner glow for edge definition */
        0 -1px 4px rgba(0, 0, 0, 0.3),     /* Subtle dark offset for outline/contrast */
        0 0 5px white,                    /* Your original mid-glow */
        0 0 10px white                    /* Your original wider white */
}

#footer ul,
#footer ol,
#footer dl {
    padding-left: 0;
}

#footer li {
    list-style-type: none;
}     


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Custom Component: Joez Upcoming Floater  */

#upcoming-floater {
    position: fixed;
    top: 20%;
    right: 0;
    background: transparent;
    padding-right: 0;
    font-size: 1em;
    color: white;
    transition: transform 0.5s ease-in-out;
    display: flex; /* Use Flexbox for side-by-side layout */
    align-items: stretch; /* Ensure both columns stretch to the same height */
    z-index: 100;
    max-width: 500px;
}

#upcoming-floater a,
#upcoming-floater a:link,
#upcoming-floater a:visited {
    color: white !important;
    text-decoration: none;    
}

#upcoming-floater a:hover,
#upcoming-floater a:active,
#upcoming-floater a:focus {
    color: white !important;
    text-decoration: none;
    font-weight: bold;
}

#upcoming-floater .block {
    background: transparent;
}

#upcoming-floater.hidden {
    transform: translateX(calc(100% - 8px)); /* hide the floater by sliding it to the right */
}

#upcoming-floater .toggler i {
    width: 40px;
    height: 40px;
    background: rgb(from var(--theme-main) r g b);
    border: none;
    border-radius: 1em 0 0 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1em 0 0 1em; /* Default state */
    transition: border-radius 0.3s ease;
}

#upcoming-floater .floater-content {
    padding: 10px;
    width: 200px;
}

#upcoming-floater .toggler {
    cursor: pointer;
    margin-left:-1.5em;
    flex: 0 0 50px; /* Fixed width for icon column */
    display: flex; /* Flexbox to center icon */
    justify-content: center; /* horizontal positioning */
    align-items: top; /* vertical positioning */
    }

#upcoming-floater div {
    flex: 1; /* Take remaining space */
    padding: 0;
}

#upcoming-floater h2 {
    font-weight: bold;
    font-size: 1.5em;
    padding: 0.5em 1em 0 1em;
    margin-bottom: 3px;
    background: rgba(from var(--theme-secondary) r g b / 0.95);
    color: white !important;
}

#upcoming-floater .subtheme-brands h2 {
    background: rgba(from var(--subtheme-brands) r g b / 0.95);
}

#upcoming-floater .subtheme-events h2 {
    background: rgba(from var(--subtheme-events) r g b / 0.95);
}

#upcoming-floater .subtheme-media h2 {
    background: rgba(from var(--subtheme-media) r g b / 0.95);
}

#upcoming-floater .subtheme-products h2 {
    background: rgba(from var(--subtheme-products) r g b / 0.95);
}

#upcoming-floater .subtheme-training h2 {
    background: rgba(from var(--subtheme-training) r g b / 0.95);
}

#upcoming-floater .subtheme-tools h2 {
    background: rgba(from var(--subtheme-tools) r g b / 0.95);
}

#upcoming-floater .subtheme-communication h2 {
    background: rgba(from var(--subtheme-communication) r g b / 0.95);
}

#upcoming-floater ul,
#upcoming-floater ol {
    padding-left: 0;
}

#upcoming-floater li {
    list-style-type: none;
    line-height: 1em;
    padding: 1em;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
    background: rgba(from var(--theme-secondary) r g b / 0.90);
}

#upcoming-floater .subtheme-brands li {
    background: rgba(from var(--subtheme-brands) r g b / 0.90);
}

#upcoming-floater .subtheme-events li {
    background: rgba(from var(--subtheme-events) r g b / 0.90);
}

#upcoming-floater .subtheme-media li {
    background: rgba(from var(--subtheme-media) r g b / 0.90);
}

#upcoming-floater .subtheme-products li {
    background: rgba(from var(--subtheme-products) r g b / 0.90);
}

#upcoming-floater .subtheme-training li {
    background: rgba(from var(--subtheme-training) r g b / 0.90);
}

#upcoming-floater .subtheme-tools li {
    background: rgba(from var(--subtheme-tools) r g b / 0.90);
}

#upcoming-floater .subtheme-communication li {
    background: rgba(from var(--subtheme-communication) r g b / 0.90);
}

#upcoming-floater li {
    display: flex;
    justify-content: space-between;
    line-height:1.5em;
}

#upcoming-floater li div:first-of-type {
    padding-left: 2em;
}

#upcoming-floater li .title {
    font-weight: bold;
    font-size: 1.1em;
    display: flex;
    align-items: center;    
}

#upcoming-floater li .date {
    text-align: right;
    white-space: nowrap;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


#lead-aside {
    font-size: 90%;
    background-color: var(--bs-secondary-bg-subtle) !important;
}

/* width */
#lead-articles article::-webkit-scrollbar {
  width: 8px;
}

/* Track */
#lead-articles article::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

/* Handle */
#lead-articles article::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.card {
    border-radius: 1.25em;
    border-width: 2px;
    text-align: center;
    overflow: hidden;
    color: white;
    background: rgb(from var(--theme-secondary) r g b);
}

.card.subtheme-generic {
    background: rgba(from var(--theme-secondary) r g b / 1);
}

.card.subtheme-brands {
    background: rgba(from var(--subtheme-brands) r g b / 1);
}

.card.subtheme-events {
    background: rgba(from var(--subtheme-events) r g b / 1);
}

.card.subtheme-media {
    background: rgba(from var(--subtheme-media) r g b / 1);
}

.card.subtheme-products {
    background: rgba(from var(--subtheme-products) r g b / 1);
}

.card.subtheme-training {
    background: rgba(from var(--subtheme-training) r g b / 1);
}

.card.subtheme-tools {
    background: rgba(from var(--subtheme-tools) r g b / 1);
}

.card.subtheme-communication {
    background: rgba(from var(--subtheme-communication) r g b / 1);
}

.card a,
.card a:link,
.card a:visited{
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    transition: text-shadow 200ms ease-in-out;
}

.card a:hover,
.card a:active,
.card a:focus {
    color: white;
    text-decoration: none;
    text-transform: uppercase;  
    color: white;
    /*
    text-shadow: 
        0 0 2px rgba(255, 255, 255, 0.8),  /* Tight inner glow for edge definition *
        0 -1px 4px rgba(0, 0, 0, 0.3),     /* Subtle dark offset for outline/contrast *
        0 0 5px white,                    /* Your original mid-glow *
        0 0 10px white                    /* Your original wider white *
    */
}

.card-text {
    padding: 1em 0 0 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.dt-column-title,
tbody .tools,
#calculators-roi-grid .tool-product,
#calculators-reagents-grid .tool-name {
    white-space: nowrap;
}

#calculators-roi-grid td i,
#calculators-reagents-grid td i {
    font-size: 1.75em;
}

a.roi-calculator {
    text-decoration: none;
}

#bulletins-grid_wrapper {
    margin-top: -4em;
}

abbr[title],
a[data-bs-toggle="tooltip"] {
    text-decoration: none;
}

#th-footer-bulletin-title select {
    display: none;
    visibility: hideen;
}

.hideme {
    display: none !important;
    visibility: hidden !important;
}

#lead-aside dt {
    padding-top:1em;;
}

#lead-aside dd {
    display: inline-block;
}

#lead-aside dd i {
    font-size: 1.5em;
}

.card-list .card-title,
.card-list .card-footer {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

code {
    font-size: 1em;
    color: black;
}

.center-xy {
  display: flex;
  justify-content: center;  /* Horizontal centering */
  align-items: center;      /* Vertical centering */
  flex-direction: row;
}

.card .paper img {
    max-width: 150px;
    float:left;
    padding-right: 1em;
}

/* We need two rules for this to work properly, this is not a typo */
/* 1. The span starts fully visible (no class yet) */
.symbol-sup {
    display: inline-block;
    line-height: 1;
    font-size: 1em;                    /* normal size */
    vertical-align: baseline;          /* normal position */
    opacity: 1;
    margin-left: 1px;
    
    /* Animate everything we care about */
    transition:
        opacity    0.85s ease,
        font-size  0.45s ease-out,
        transform  0.45s ease-out;
}

/* 2. First stage: fade out to 0% (we add this class first) */
.symbol-sup.fade-out {
    opacity: 0;
}

/* 3. Second stage: resize + reposition while invisible (add this class next) */
.symbol-sup.transformed {
    font-size: 0.68em;
    transform: translateY(-0.38em);   /* perfect superscript position */
    opacity: 0;                        /* stay invisible during transform */
}

/* 4. Final stage: fade back in (add this class last) */
.symbol-sup.show {
    opacity: 0.92;                     /* or 1 if you want full */
}
/* End */

/* https://css-tricks.com/fluid-superscripts-and-subscripts/   */
@supports (font-size: calc(1em + 1px)) {
    sup, sub {
        font-size: calc(0.5em + 4px);
        vertical-align: baseline;
        position: relative; 
        top: calc(-0.5 * 0.83 * 2 * (1em - 4px)); 
        /* Simplified top: calc(-0.83em + 3.32px) */
    }

    sub {
        top: calc(0.25 * 0.83 * 2 * (1em - 4px)); 
        /* Simplified top: calc(0.42em - 1.66px) */
    }
  }
/* */

#sidebar .list-group-item a,
#region-nav h3 a {
    text-decoration: none;
}

.list-group-item.active a {
    color: white;
}

#summaryBox {
  overflow: hidden;  /* Clips content as it shrinks */
  transition: 
    opacity 300ms ease-out,
    height 300ms ease-out,
    padding 600ms ease-out,
    margin 600ms ease-out;
}

.Xcollapsed {
  opacity: 0!important;
  height: 0!important;
  margin: 0!important;
  padding: 0!important;
}

.clear {
    clear: both;
}

/* ***************************************************************************** */
/* Product family themes                                               */

.aerospray h1,
.cytopro h1,
.digital-cell-analyzers h1,
.chlorochek h1,
.esr h1,
.macroduct h1,
.osmometers h1 {
    border-bottom: 0.5em solid transparent;
}

.tb h1 {
    border-color: rgb(213,100,149);
}

.cytology h1 {
    border-color: rgb(173,206,109);
}

.hempro h1 {
    border-color: rgb(250,207,190);
}

.hemstat h1 {
    border-color: rgb(85,136,195);
}

.chloridometer h1 {
    border-color: rgb(96,116,51);
}

.gram h1 {
    border-color: rgb(101,34,102);
}

.cellavision h1 {
    border-color: rgb(0,111,182);
}

.peripheral-blood-application h1 {
    border-color: rgb(1,166,243);
}

.ned h1 {
    border-image: linear-gradient(to right, 
        rgb(226,4,120) 0%, 
        rgb(226,4,120) 30%, 
        rgb(24,178,226) 70%,
        rgb(24,178,226) 100%) 1;
    border-image-slice: 1;  /* Ensures the gradient fills the border fully */
}

.cytocentrifuge h1 {
    border-color: rgb(249,152,29);
}

.excytemini h1 {
    border-color: rgb(149,149,192);
}

.excyte20 h1 {
    border-color: rgb(174,165,207);
}

.microsed h1 {
    border-color: rgb(175,194,215);
}

.mixrate h1 {
    border-color: rgb(34,108,181);
}

.duomix h1 {
    border-color: rgb(157,162,206);
} 

.freezepoint h1 {
    border-color: rgb(66,68,79);
}

.vapro h1 {
    border-color: rgb(77,75,74);
}

.gonotec-osmomat h1 {
    border-color: rgb(184,104,6);
}

.gonotec-osmomat-auto h1 {
    border-color: rgb(231,162,92);
}

/*                                                                               */
/* ***************************************************************************** */

/* ***************************************************************************** */
/* Styles for directory list inside an iframe                                    */
.folder-view nav > ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.folder-view nav > ul li {
    list-style-type: none;
    padding: 0.5em 3em;
}

/* ==== Ultra-specific file-type icons for <ol class="icon-list"> – Font Awesome 7 ==== */
.icon-list a {
    position: relative;
    padding-left: 32px !important;
    display: inline-block;
    text-decoration: none;
    color: #333;
    transition: color 0.2s;
}

.icon-list a:hover { color: #0066cc; }

.icon-list a::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 1.1em;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    text-align: center;
    opacity: 0.9;
}

/* === DIRECTORIES === */
.icon-list a[href$="/"]::before          { content: "\f07b"; color: #f7d05a; } /* fa-folder */
.icon-list a[href="../"]::before         { content: "\f060"; color: #999;    } /* fa-arrow-left */

/* === INDIVIDUAL IMAGE FORMATS === */
.icon-list a[href$=".png" i]::before     { content: "\f1c5"; color: #6c5ce7; } /* PNG gets purple (classic PNG color) */
.icon-list a[href$=".jpg" i]::before,
.icon-list a[href$=".jpeg" i]::before    { content: "\f1c5"; color: #e17055; } /* JPEG = warm red/orange */
.icon-list a[href$=".gif" i]::before     { content: "\f1c5"; color: #00b894; } /* GIF = green (animated vibe) */
.icon-list a[href$=".webp" i]::before    { content: "\f1c5"; color: #0984e3; } /* WebP = modern blue */
.icon-list a[href$=".svg" i]::before     { content: "\f3b1"; color: #ffb74d; } /* fa-vector-square – perfect for SVG */
.icon-list a[href$=".avif" i]::before    { content: "\f1c5"; color: #a29bfe; } /* AVIF = soft purple */
.icon-list a[href$=".bmp" i]::before     { content: "\f1c5"; color: #636e72; } /* BMP = gray (old-school) */
.icon-list a[href$=".tiff" i]::before,
.icon-list a[href$=".tif" i]::before     { content: "\f1c5"; color: #2d3436; } /* TIFF = dark gray */
.icon-list a[href$=".ico" i]::before     { content: "\f1c5"; color: #fdcb6e; } /* ICO = yellow */

/* === OTHER COMMON TYPES === */
.icon-list a[href$=".pdf" i]::before     { content: "\f1c1"; color: #e74c3c; } /* fa-file-pdf */
.icon-list a[href$=".zip" i]::before,
.icon-list a[href$=".rar" i]::before,
.icon-list a[href$=".7z" i]::before      { content: "\f1c6"; color: #e67e22; } /* fa-file-zipper */
.icon-list a[href$=".mp4" i]::before,
.icon-list a[href$=".webm" i]::before,
.icon-list a[href$=".mov" i]::before     { content: "\f1c8"; color: #9c27b0; } /* fa-file-video */
.icon-list a[href$=".mp3" i]::before,
.icon-list a[href$=".wav" i]::before     { content: "\f1c7"; color: #e91e63; } /* fa-file-audio */

/* Office */
.icon-list a[href$=".doc" i]::before,
.icon-list a[href$=".docx" i]::before    { content: "\f1c2"; color: #1976d2; }
.icon-list a[href$=".xls" i]::before,
.icon-list a[href$=".xlsx" i]::before    { content: "\f1c3"; color: #27ae60; }
.icon-list a[href$=".ppt" i]::before,
.icon-list a[href$=".pptx" i]::before    { content: "\f1c4"; color: #e67e22; }

/* Text / data */
.icon-list a[href$=".txt" i]::before,
.icon-list a[href$=".log" i]::before,
.icon-list a[href$=".md" i]::before      { content: "\f0f6"; color: #607d8b; } /* fa-file-lines */
.icon-list a[href$=".csv" i]::before     { content: "\f6dd"; color: #27ae60; } /* fa-file-csv */

/* === GENERIC FALLBACK (only if no rule above matches) === */
.icon-list a::before { content: "\f15b"; color: #95a5a6; } /* fa-file – catches everything else */

/*                                                                               */
/* ***************************************************************************** */


/* ***************************************************************************** */
/* Apply our styles to the popovers in the headernab                             */
.headernav-popover {
    --bs-popover-max-width: 250px;
    --bs-popover-header-color: rgb(from var(--theme-main) r g b);
    --bs-popover-header-bg: rgba(255,255,255,0.90);
    --bs-popover-bg: rgba(255,255,255,0.90);
}

.headernav-popover .popover-header,
.headernav-popover .popover-body {
  text-align: center;
}

table.dataTable tfoot th, 
table.dataTable thead th {
    font-weight: inherit !important;
    font-size: 1.2rem;
}
/*                                                                               */
/* ***************************************************************************** */


/* ***************************************************************************** */
/* Replace default arrows with FA arrows on the span */
table.dataTable thead .dt-column-order::before {
  content: "\f0de" !important; /* up */
  font-family: "Font Awesome 7 Free" !important;
  font-weight: 900 !important;
}

table.dataTable thead .dt-column-order::after {
  content: "\f0dd" !important; /* down */
  font-family: "Font Awesome 7 Free" !important;
  font-weight: 900 !important;
}

/* Active: full opacity on correct direction */
table.dataTable thead th.dt-ordering-asc .dt-column-order::before { opacity: 1 !important; }
table.dataTable thead th.dt-ordering-desc .dt-column-order::after { opacity: 1 !important; }

/* Inactive: reduced opacity (default is ~0.2-0.4) */
table.dataTable thead .dt-column-order::before,
table.dataTable thead .dt-column-order::after { opacity: 0.4 !important; }

/* Hide opposite when active */
table.dataTable thead th.dt-ordering-asc .dt-column-order::after,
table.dataTable thead th.dt-ordering-desc .dt-column-order::before { opacity: 0 !important; }

table.dataTable thead th { padding-right: 30px !important; }

table.dataTable th.tools .dt-column-order {
    display: none !important;
}
/*                                                                               */
/* ***************************************************************************** */