/*
    Global styling
*/
:root {
    --red: #d43532;
    --deep-red: #a12626;
    --bright-blue: #004473;
    --light-blue: #eff4f9;
    --navy: #20396f;
    --dark-blue: #0d224e;
    --black: #17181a;
    --gray-01: #6a6e70;
    --gray-02: #aab5bd;
    --gray-03: #eef0f2;
    --gray-04: #595959;
    --white: #ffffff;
    --dark-red: #A51212;
}

html {
    font-size: 1rem;
    position: relative;
    min-height: 100%;
}

h1, .h1 {
    font-weight: 500;
    font-size: 2.25rem;
    line-height: 120%;
}

h2, .h2 {
    font-weight: 500;
    font-size: 1.875rem;
    line-height: 125%;
}

h3, .h3 {
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 120%;
}

h4, .h4 {
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 120%;
}

h5, .h5 {
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 120%;
}

h6, .h6{
    font-weight: 500;
    font-size: 1rem;
    line-height: 120%;
}

p {
    font-weight: 400;
    font-size: 1rem;
    line-height: 150%;
    margin: 0;
}

a {
    color: var(--bright-blue);
    font-weight: bold;
    white-space: normal;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: underline;
}

a:hover {
    color: var(--navy);
}

hr {
    margin: 0;
}

.vpt-textarea {
    height: 100% !important;
}

@media (min-width: 768px) {
    html {
        font-size: 0.9rem;
    }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--white), 0 0 0 0.25rem var(--navy);
}


body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Roboto', sans-serif;
}

/*
    Site-wide Styling
*/
.visually-hidden:not(:focus) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.vpt-navbar {
    background-color: var(--dark-blue);
}

.navbar{
    padding: 0;
}

.navbar-brand-section {
    padding: 1.5rem 0;
}

.card {
    background-color: var(--light-blue);
    border: none;
}

.card-body {
    padding: 3rem;
}

.vpt-card-icon {
    padding-bottom: 1.5rem;
}

.vpt-card-title {
    color: var(--navy);
    padding-bottom: 1.5rem;
    margin: 0;
}

.vpt-accordion {
    background-color: var(--light-blue);
}

.accordion-item {
    border: none;
}

.accordion-button:not(.collapsed)::after {
    background-color: var(--light-blue);
    background-image: url('../images/dash.svg');
    transform: rotate(360deg);
    background-size: 2rem;
    background-position: center;
}

.accordion-button.collapsed::after {
    background-image: url('../images/plus.svg');
    background-size: 2rem;
    background-position: center;
}

.accordion-button:not(.collapsed) {
    color: var(--white);
    background-color: var(--light-blue);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem var(--navy);
}

.navbar-title {
    font-size: 1.5rem;
    font-family: 'Roboto', sans-serif;
    color: var(--white);
    font-weight: bold;
    white-space: normal;
}

.navbar-light .navbar-nav .nav-link {
    font-weight: bold;
    font-size: small;
    color: var(--white);
    padding-right: 1.5rem;
    text-align: center;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: var(--white);
    text-decoration: underline;
}

.nav-item {
    align-self: start;
}

.custom-navbar-icon {
    color: var(--white);
    font-size: 1.5rem;
    padding: 1rem;
    background-color: var(--navy);
    font-family: 'Bootstrap-icons';
}
#navbar-menu-btn{
    border: none;
    background-color: transparent;
}

#navbar-menu-btn.collapsed > .custom-navbar-icon::after {
    content: '\F479';
}

#navbar-menu-btn:not(.collapsed) > .custom-navbar-icon::after {
    content: '\F62A';
}

.call-to-action-btn {
    background-color: var(--red);
    color: var(--white);
    border: none;
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    font-weight: bold;
    font-size: small;
    text-align: center;
    border-radius: .1rem;
}

.call-to-action-btn:hover {
    background-color: var(--deep-red);
    color: var(--white);
}

.main-display {
    background-color: var(--white);
}

.footer-upper {
    background-color: var(--dark-blue);
    color: var(--white);
    width: 100%;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    font-size: small;
}

.footer-upper-header {
    color: var(--white);
    margin-bottom: 0;
    padding-bottom: 1.5rem;
}

.footer-lower {
    background-color: var(--navy);
    color: var(--white);
    width: 100%;
    padding: 1.5rem;
    font-size: small;
}

.footer-link {
    --bs-gutter-x: 1.5rem;
    text-align: center;
}

.footer-link a {
    color: var(--white);
}

.footer-lower .vr {
    margin: 0px 5px 0px 5px;
    text-align: center;
    opacity: 90;
}

#google-translate-element {
    text-align: center;
}

.goog-te-gadget-simple {
    padding: 5px 10px;
    border-radius: 4px;
}

.goog-te-gadget-icon {
    display: none;
}

/*
    Standardized Page Styling
*/
.page-body {
    padding: 3rem;
}

.page-header {
    background-color: var(--light-blue);
    color: var(--black);
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.page-header-title {
    color: var(--navy);
    padding-bottom: 1.5rem;
    margin: 0;
}

.page-header-subtitle {
    color: var(--black);
    padding-bottom: 0.5rem;
}

.breadcrumb {
    padding-bottom: 3rem;
    margin-bottom: 0;
}

.breadcrumb > .breadcrumb-item,
.breadcrumb > .breadcrumb-item::before {
    align-self: end;
    font-size: smaller;
    color: var(--black);
}

.breadcrumb a {
    color: var(--bright-blue);
}

.dropdown-item {
    color: var(--black);
}

/*
    Homepage Styling
*/
.homepage-body {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/*
    Search Page Styling
*/
.search-page-header {
    background-image: linear-gradient(var(--light-blue) 80%, var(--white) 0%);
    padding-top: 3rem;
}

#reset-form-button {
    border: 2px solid !important;
    box-sizing: border-box;
    background-color: var(--dark-blue) !important;
    border-color: var(--white) !important;
    font-size: small;
    height: 100%;
    border-radius: .1rem;
}

#application-search-form label:not(.datepicker-text) {
    font-size: smaller;
    padding-bottom: 0.5rem;
}

#application-search-form .input-group {
    padding: 0;
}

.search-form .form-control:focus {
    box-shadow: 0 0 0 0.1rem var(--black), 0 0 0 0.25rem var(--white);
}

#application-received-date-label {
    font-size: smaller;
    padding-bottom: 0.5rem;
}

.search-icon {
    background-color: var(--white);
}

.datepicker {
    border-radius: 0.25rem;
    border: none;
}

.datepicker-text {
    background-color: transparent;
    color: #4b4b4b !important;
    border: none;
    font-size: 0.9rem;
    padding: 0.5rem;
    font-weight: 600;
    display: inline-block;
}

.form-container {
    background-color: var(--navy);
    color: var(--white);
    padding: 1.5rem;
}

.dropdown-item:active {
    background-color: var(--bright-blue);
}

.dropdown-item.active {
    background-color: var(--navy);
}

/* Search Table Styling*/
#table-header {
    display: flex;
    padding-bottom: 2rem;
}

#app-status-filter-container {
    display: flex;
    flex: 1;
    align-items: center;
}

.app-status-filter{
    background-color: white;
    border: 1.5px black solid;
}

#table-information {
    display: flex;
    flex: 1;
    justify-content: end;
}

#table-paging {
    padding-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#search-results-toast {
    background-color: var(--navy);
    color: var(--white);
    z-index: 11;
    width: 100%;
}

#search-results-toast .toast-body {
    padding: 1rem 3rem;
}

#contact-project-manager-success-toast {
    background-color: var(--navy);
    color: var(--white);
    z-index: 11;
    width: 100%;
}

#contact-project-manager-success-toast .toast-body {
    padding: 1rem 3rem;
}

#contact-project-manager-error-toast {
    background-color: var(--red);
    color: var(--white);
    z-index: 11;
    width: 100%;
}

#contact-project-manager-error-toast .toast-body {
    padding: 1rem 3rem;
}

.contact-project-manager-title {
    color: var(--red);
}

.contact-project-manager-subtext {
    font-size: smaller;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

/* DataTable Styling */


table.dataTable {
    font-size: .8rem;
}

table.dataTable thead th {
    position: relative;
    background-image: none !important;
    white-space: nowrap;
}

table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:before,
table .dataTable thead th.sorting_desc:after {
    font-family: 'Bootstrap-icons' !important;
    opacity: unset !important;
    color: var(--gray-02);
}

table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_desc:before {
    content: '\F235' !important;
}

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    content: '\F229' !important;
}

table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_desc:after {
    color: var(--black);
}

table.dataTable tbody tr:hover {
    background-color: var(--light-blue) !important;
}

table.dataTable th button{
    background-color: transparent;
    border: none;
    font-weight: bold;
    padding: 0;
}

.table-bordered th {
    border-top: none;
}

.table-bordered th:first-child,
.table-bordered td:first-child {
    border-left: none;
}
.table-bordered th:last-child,
.table-bordered td:last-child {
    border-right: none;
}

.page-item.active .page-link {
    background-color: var(--navy);
    border-color: var(--navy);
}

.page-link {
    color: var(--bright-blue);
    border: none;
}

.page-link:hover {
    color: var(--navy);
}

/*
    Details Page Styling
*/
.details-page-breadcrumb {
    padding-bottom: 2rem;
}

.details-page-header-subtitle {
    color: var(--red);
    padding-bottom: 1.5rem;
    margin: 0;
}

.details-page-section-header {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: var(--navy);
    padding-top: 3rem;
    padding-bottom: 2rem;
    margin: 0;
}

.status-container {
    background-color: var(--white);
    padding: 1.5rem;
}

.status-container .row:not(:first-of-type){
    padding-top: 1rem;
}

.status-container .row{
    padding-bottom: 1rem;
}

.status-container-field-label {
    font-size: smaller;
    padding-bottom: 1rem;
    margin: 0;
}

.permit-status-section{
    background-color: var(--gray-03);
}

.status-complete {
    color: var(--navy);
}

.status-in-progress {
    color: var(--bright-blue);
}

.status-not-started {
    color: var(--gray-02);
}

.details-page-field-label {
    color: var(--gray-04);
    font-size: smaller;
    padding-top: 2rem;
    padding-bottom: 1rem;
    margin: 0;
}

/* Apex Charts Styling */
#gantt-rotate-prompt {
    visibility: hidden;
    padding-top: .75rem;
    color: var(--bright-blue);
}

.rotate-phone-icon {
    height: 2rem;
    margin-right: .75rem;
    filter: invert(29%) sepia(91%) saturate(1412%) hue-rotate(183deg) brightness(84%) contrast(101%);
}

.apexcharts-legend-series {
    display: flex !important;
    flex-wrap: wrap;
    align-content: center;
}

.apexcharts-legend-marker {
    border-radius: 0px !important;
}

/*
    Agency Details Page Styling
*/

.agency-card-subtitle {
    font-weight: bold;
    padding-bottom: 1.5rem;
    margin: 0;
}

.agency-card-content {
    padding-bottom: 1.5rem;
}

.sidepanel-container {
    padding-left: 1rem;
    padding-right: 1rem;
}

.logo-container {
    background-color: var(--white);
}

.agency-details-page-body-title {
    color: var(--navy);
    margin: 0;
    padding-bottom: 1.5rem;
}

.agency-details-page-body-header {
    color: var(--dark-red);
    margin: 0;
    padding-bottom: 1.5rem;
}

.agency-details-page-body-subheader {
    color: var(--navy);
    margin: 0;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

.agency-details-page-body-header:not(:first-of-type) {
    padding-top: 2rem;
}

.agency-details p:not(:first-of-type) {
    padding-bottom: 1.5rem;
}

.agency-details-list {
    margin: 0;
    padding-left: 3rem;
}

.agency-details-list li:not(:last-child) {
    padding-bottom: 1rem;
}

.agency-details-contact-title {
    color: var(--dark-red);
    padding-bottom: 2rem;
    margin: 0;
}

.agency-details-contact-subtitle {
    color: var(--navy);
    padding-bottom: 1.5rem;
    margin: 0;
}

.agency-details-contact hr {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.agency-details-contact h5 {
    margin: 0;
    padding-bottom: 1rem;
}

.agency-details-contact h5:not(:first-of-type) {
    padding-top: 1.5rem;
}

.agency-details-contact-call-us {
    padding: 0;
}

.agency-details-contact-call-us li {
    list-style-type: none;
}

.agency-details-contact-call-us li:not(:last-of-type) {
    padding-bottom: 1rem;
}
/*
    About Page Styling
*/
.about-page-section-title {
    color: var(--red);
    padding-bottom: 1.5rem;
    margin: 0;
}

.about-page-section-subheader {
    color: var(--dark-red);
    padding-bottom: 1.5rem;
    margin: 0;
    font-weight: 600;
}

.about-page-video-block {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

.about-page-video-thumbnail {
    width: 95%;
}

.about-page-video-title {
    color: var(--navy);
    margin: 0;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
}

.about-page-contact-title {
    color: var(--dark-red);
    margin: 0;
}

.about-page-contact-subtitle {
    color: var(--navy);
    padding-top: 2rem;
    padding-bottom: 1.5rem;
    margin: 0;
}

.about-page-link-list {
    margin: 0;
}

.about-page-link-list li:not(:last-child) {
    padding-bottom: 1rem;
}

.about-page-contact.sidepanel-container p:not(:first-of-type) {
    padding-top: 1.5rem;
}

.accordion-body {
    padding: 1.5rem;
}

.accordion-button {
    padding: 1.5rem;
}

.accordion-item:not(:last-child) {
    padding-bottom: 1rem;
}

.accordion-section-title {
    color: var(--navy);
    margin: 0;
}

.about-page-accordion hr {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.about-page-accordion h5 {
    padding-bottom: 1.5rem;
    margin: 0;
}

.about-page-accordion h6 {
    padding-bottom: 1rem;
    margin: 0;
}

.about-page-definitions-accordion-section h5 {
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

/*
    Error Page Styling
*/
.error-title {
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--red);
    font-size: 4rem;
}

/* Fix for floating label overlap - https://github.com/twbs/bootstrap/issues/32800 */
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
    opacity: 1;
    color: rgba(0, 0, 0, 0.5);
    background-color: #fff;
    height: auto;
    padding: 0px;
    padding: 0px 0px 0px 10px;
    width: 100%;
    transform: scale(0.982) translateY(0.045rem) translateX(0.1rem);
    border-radius: 5px 0 0 0;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    opacity: 1;
    color: rgba(0, 0, 0, 0.5);
    background-color: #fff;
    height: auto;
    padding: 0px 0px 0px 10px;
    width: 100%;
    transform: scale(0.982) translateY(0.045rem) translateX(0.1rem);
    border-radius: 5px 0 0 0;
}
.form-floating > .form-control:-webkit-autofill ~ label {
    opacity: 1;
    color: rgba(0, 0, 0, 0.5);
    background-color: #fff;
    height: auto;
    padding: 0px;
    padding: 0px 0px 0px 10px;
    width: 100%;
    transform: scale(0.982) translateY(0.045rem) translateX(0.1rem);
    border-radius: 5px 0 0 0;
}

/* Mobile Styling */
@media screen and (max-width: 767px) {    
    .page-header{
        padding-left: .25rem;
        padding-right: .25rem;
        padding-bottom: 2rem;
    }

    .page-header-title {
        padding-bottom: 1rem;
    }

   .page-body{
        padding: 1rem .25rem; 
    }

    .navbar-brand-section {
        padding-left: 1rem;
    }

    .navbar > .container-fluid{
        padding-left: 0;
        padding-right: 0;
    }

    .navbar-nav {
        background-color: var(--navy);
        align-content: start;
        padding-bottom: 2rem;
    }

    .navbar-nav > .nav-item {
        padding-left: 1.5rem;
        padding-top: 1.5rem;
    }

    .footer-upper {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .footer-lower{
        padding: 1.5rem .5rem;
    }

    .footer-lower .col-sm-12:first-of-type > div {
        padding-bottom: 2rem;
    }

    .sidepanel-container{
        padding: 0;
    }

    .status-container {
        margin-top: 2rem;
    }

    .logo-container {
        width: calc(100% - 2rem);
        padding: 2rem;
    }


    .energy-logo {
        padding: 1.5rem 0;
        width: calc(100% - 2rem);
    }

    .dcr-logo {
        padding: 1.5rem 0;
        width: calc(100% - 2rem);
    }

    .deq-logo {
        padding: 1rem 0;
        width: calc(100% - 4rem);
    }

    .vdot-logo{
        padding: 2rem 0;
        width: calc(100%-1rem);
    }

    .vdh-logo {
        padding: 1.5rem 0;
        width: calc(100% - 2rem);
    }

    .vmrc-logo {
        padding: 1rem 0;
        width: calc(100% - 2rem);
    }

    /* Agency Pages */
    .agency-details-contact{
        padding-top: 2rem;
    }

    /* Search Page */
    .search-page-header{
        background: var(--light-blue);
        padding-bottom: 1.5rem;
    }

    #table-information{
        flex-direction: column-reverse;
    }

    #table-information > div {
        padding-bottom: 2rem;
    }

    #table-header{
        padding-bottom: 0;
    }
}

/* Mobile Styling - Vertical */
@media screen and (max-width: 568px) {
    .gantt-chart-container {
        visibility: hidden !important;
        max-height: 0;
    }

    #gantt-rotate-prompt {
        visibility: visible;
    }
}


/* target the brand link and nav links */
.navbar-brand,
.navbar-link,
.call-to-action-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
    padding: 10px 15px; /* Adjust padding to reach 44px height/width */
    text-decoration: none;
}

/* Specific fix for the brand text if it needs more vertical height */
.navbar-brand-section a {
    line-height: 44px;
}

/* Ensure the button also meets the requirement */
#navbar-menu-btn {
    min-width: 44px;
    min-height: 44px;
}

.accessible-link {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}




/*#google-translate-element .goog-te-gadget-simple span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 1.25rem !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}*/


/* Ensure the container is visible and has the white background */
/*#google-translate-element .goog-te-gadget-simple {
    background-color: var(--white) !important;
    border: 1px solid var(--gray-02) !important;
    border-radius: 4px;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 44px !important;
    text-decoration: none;
    cursor: pointer;
}*/

/* Ensure the "Select Language" text is actually displayed */
/*#google-translate-element .goog-te-menu-value {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    color: var(--black) !important;
}

    #google-translate-element .goog-te-menu-value span {
        text-decoration: none !important;
        font-weight: 400 !important;
    }*/

/* Show the icon but make it look clean, OR keep it hidden if you prefer */
/*#google-translate-element .goog-te-gadget-icon {
    display: inline-block !important;*/ /* Changed from none to ensure something is clickable */
    /*width: 20px !important;
    height: 20px !important;
    background-image: url('https://www.gstatic.com/images/branding/product/2x/translate_24dp.png') !important;
    background-size: 20px !important;
    margin-right: 8px !important;
}*/

/* Hide the vertical divider line Google inserts */
/*#google-translate-element .goog-te-gadget-simple img,
#google-translate-element .goog-te-menu-value span:nth-child(3) {
    display: none !important;
}*/

#google-translate-element .goog-te-gadget,
#google-translate-element .goog-te-gadget-simple,
#google-translate-element .goog-te-gadget-simple img {
    font-size: 0 !important;
    color: transparent !important;
}
#google-translate-element .goog-te-gadget-simple span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    width: 100% !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 1.25rem !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#google-translate-element .goog-te-gadget-simple {
    min-width: 44px !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 44px !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
}

#google-translate-element .goog-te-combo {
    min-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    font-size: 1.25rem !important;
    line-height: 44px !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
}

/*#google-translate-element .goog-logo-link,*/
/*#google-translate-element .goog-te-gadget {
    display: none !important;
}*/

/* Hide the 'Powered by' text and the Google logo image */
.goog-te-gadget span,
.goog-te-gadget img,
.goog-te-menu-value span:nth-child(3),
.goog-te-gadget-simple img {
    display: none !important;
}

/* Ensure the 'Select Language' text (or current language) stays visible */
#google-translate-element .goog-te-gadget-simple .goog-te-menu-value span:first-child {
    display: inline-block !important;
}

/* Remove the separator (the vertical line) if it appears */
/*.goog-te-gadget-simple .goog-te-menu-value span:nth-child(2) {
    display: none !important;
}*/




/* 1. The Breadcrumb Container */
.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

/* 2. The Item Wrapper */
.breadcrumb-item {
    display: flex;
    align-items: center;
}

    /* 3. The 44x44px Targets & High Contrast Links */
    .breadcrumb-item a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        text-decoration: underline;
        text-underline-offset: 4px;
        box-sizing: border-box;
        line-height: 1;
        /* Using a deep blue for links (approx 9:1 contrast) */
        color: #004aab;
        font-weight: 600;
    }

        .breadcrumb-item a:hover {
            color: #002d69;
            text-decoration-thickness: 2px;
        }

    /* 4. The Divider Alignment & Contrast */
    .breadcrumb-item + .breadcrumb-item::before {
        display: flex;
        align-items: center;
        height: 44px;
        padding-right: 8px;
        padding-left: 2px;
        /* CHANGED: Darkened from #6c757d to #525252 to hit 7:1 */
        color: #525252;
        content: var(--bs-breadcrumb-divider, ">");
        font-weight: bold; /* Bold makes the divider more visible */
    }

    /* 5. Active/Current Page (Non-clickable) */
    .breadcrumb-item.active {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        text-decoration: none;
        /* CHANGED: Darkened to #525252 to hit 7:1 */
        color: #525252;
        font-weight: 500;
    }



table.dataTable th .dt-column-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    min-height: 25px;
    vertical-align: middle;
    cursor: pointer;
}

/*use this if span needs 44 x44 

table.dataTable th .dt-column-order {
    min-width: 44px;
    min-height: 44px;
   
   
}
*/
/*table.dataTable th .dt-column-order {
    min-width: 44px;
    min-height: 44px;
}*/


.min-size-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px; /* Optional: improves click area */
}

.call-to-action-btn-min-contrast {
    /* Keep your original colors */
    background-color: var(--red);
    color: var(--white);
    /* Standard Layout */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex; /* Use inline-flex to fit the nav layout */
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.2rem;
    text-decoration: none;
    border-radius: .1rem;
    border: none;
    /* Contrast Enhancement */
    font-weight: 800; /* Extra Bold (slightly cleaner than 900 for lowercase) */
    font-size: 1.15rem; /* Larger size helps pass AAA contrast more easily */
    letter-spacing: 0.02rem;
    /* THE FIX: High-definition text shadow */
    /* This creates a 1px dark border around the white text */
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.9), -1px -1px 0px rgba(0, 0, 0, 0.9), 1px -1px 0px rgba(0, 0, 0, 0.9), -1px 1px 0px rgba(0, 0, 0, 0.9);
}

    .call-to-action-btn-min-contrast:hover {
        background-color: var(--deep-red);
        color: var(--white);
        text-decoration: underline;
        /* Keeps the shadow visible on hover */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
    }



.btn-primary,
.btn-primary:active,
.btn-primary:visited {    background-color: var(--bright-blue) !important;
    border-color: var(--bright-blue) !important;
    color: var(--white) !important;
    width: auto;
    height: 2rem; 
    padding: 0 1.25rem;
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    white-space: nowrap; 
    font-size: 0.9rem;
    font-weight: 800; 
    text-decoration: none;

    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8), -1px -1px 0px rgba(0, 0, 0, 0.8), 1px -1px 0px rgba(0, 0, 0, 0.8), -1px 1px 0px rgba(0, 0, 0, 0.8);
}

    .btn-primary:hover {
        background-color: var(--dark-blue) !important;
        border-color: var(--dark-blue) !important;
        text-decoration: underline;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
    }


/* Target the selectpicker button specifically */
/*.bootstrap-select .btn.btn-high-contrast {
    background-color: #ffffff !important;*/
    /* Dark gray/black text provides 21:1 contrast against white */
    /*color: #212529 !important;
    border: 1px solid #767676 !important;*/ /* Darker border for 4.5:1 visibility */
    /*font-weight: 500;
    height: 2.5rem;
    display: flex;
    align-items: center;
}*/

    /* Ensure the 'None Selected' placeholder also has high contrast */
    /*.bootstrap-select .btn.btn-high-contrast .filter-option-inner-inner {
        color: #212529 !important;
    }*/

    /* Fix the dropdown arrow contrast */
    /*.bootstrap-select .btn.btn-high-contrast .bs-caret {
        color: #212529 !important;
    }*/

    /* High contrast hover state */
    /*.bootstrap-select .btn.btn-high-contrast:hover {
        background-color: #f8f9fa !important;
        border-color: #000000 !important;
    }*/


/* 1. Global Button Styles for Selectpickers */
.bootstrap-select > .btn {
    background-color: #ffffff !important;
    /* Dark charcoal text provides 21:1 contrast against white */
    color: #212529 !important;
    /* Darker border to hit the 3:1 non-text contrast requirement */
    border: 1px solid #707070 !important;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

    /* 2. Ensure Placeholder & Selected Text are high contrast */
    .bootstrap-select > .btn .filter-option,
    .bootstrap-select > .btn .filter-option-inner-inner {
        color: #212529 !important;
    }

    /* 3. Dropdown Arrow (Caret) Contrast */
    .bootstrap-select > .btn .bs-caret {
        color: #212529 !important;
    }

    /* 4. Global Hover and Focus States */
    .bootstrap-select > .btn:hover {
        background-color: #f8f9fa !important;
        border-color: #000000 !important;
    }

    .bootstrap-select > .btn:focus,
    .bootstrap-select.show > .btn {
        outline: 2px solid #0056b3 !important;
        outline-offset: 1px;
        box-shadow: 0 0 0 0.25rem rgba(0, 86, 179, 0.25) !important;
    }

/* 5. Contrast for items inside the Open Dropdown Menu */
.bootstrap-select .dropdown-menu li a {
    color: #212529 !important;
}

    .bootstrap-select .dropdown-menu li a:hover,
    .bootstrap-select .dropdown-menu li.selected a {
        background-color: #0056b3 !important; /* High contrast blue */
        color: #ffffff !important; /* White text on blue (pass 4.5:1) */
    }