 #sidebar {
     text-align: center;
     padding: 1rem 1rem 1rem 0rem;
     background-color: #264653;
}
 @media (min-width: 768px) {
     #sidebar {
         padding: 2rem 1rem 1rem 0rem;
    }
}
 #sidebar h2 {
     text-align: left;
     margin-bottom: 0;
}
/* Hide the blurb on a small screen */
 #blurb {
     display: none;
}
 #sidebar-toggle {
     display: none;
}
 #collapse *:first-child {
     margin-top: 1rem;
}
/* add the three horizontal bars icon for the toggle */
 .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
 #page-content {
     padding: 2rem 1rem;
}

 #footer-sidebar {
     display: none;
}

 @media (min-width: 48em) {
     #sidebar {
         position: fixed;
         top: 0;
         left: 0;
         bottom: 0;
         width: 15rem;
         text-align: left;
         transition: margin 0.3s ease-in-out, padding 0.3s ease-in-out;
    }
     #sidebar-toggle {
         display: inline-block;
         position: relative;
         top: 0;
         transition: top 0.3s ease-in-out;
    }
    /* add negative margin to sidebar to achieve the collapse */
     #sidebar.collapsed {
         margin-left: -11rem;
         padding-right: 1rem;
    }
    /* move the sidebar toggle up to the top left corner */
     #sidebar.collapsed #sidebar-toggle {
         top: 0rem;
    }
    /* also adjust margin of page content */
     #sidebar.collapsed ~ #page-content {
         margin-left: 6.5rem;
    }
    /* move all contents of navbar other than header (containing toggle) further off-screen */
     #sidebar.collapsed > *:not(:first-child) {
         margin-left: -6rem;
         margin-right: 6rem;
    }
    /* reveal the blurb on a large screen */
     #blurb {
         display: block;
    }
    /* Hide the toggle on a large screen */
     #navbar-toggle {
         display: none;
    }
     #collapse {
         display: block;
    }
    /* set margins of the main content so that it doesn't overlap the sidebar */
     #page-content {
         margin-left: 17rem;
         margin-right: 2rem;
         transition: margin-left 0.3s ease-in-out;
    }

     #footer-sidebar {
         display: block;
    }
}
 body {
     font-family: 'Poppins', 'Open Sans', sans-serif;
     font-weight: 400;
     background-color: #E7E7E7;
     color: #1F2F36;
}
 h1, .h1 {
     font-family: 'Source Serif Pro', 'PT Serif', serif;
     font-weight: 700;
     font-size: min(calc(1.425rem + 2.1vw), 54px);
     color: #1F2F36;
}
 h2, .h2 {
     font-family: 'Source Serif Pro', 'PT Serif', serif;
     font-weight: 700;
     font-size: min(calc(1.375rem + 1.5vw), 44px);
     color: #1F2F36;
}
 h3, .h3 {
     font-family: 'Source Serif Pro', 'PT Serif', serif;
     font-weight: 700;
     font-size: min(calc(1.325rem + 0.9vw), 32px);
     color: #1F2F36;
}
 h4, .h4 {
     font-family: 'Source Serif Pro', 'PT Serif', serif;
     font-weight: 700;
     font-size: min(calc(1.275rem + 0.3vw), 28px);
     color: #1F2F36;
}
 h5, .h5 {
     font-family: 'Source Serif Pro', 'PT Serif', serif;
     font-weight: 700;
     font-size: 1.25rem;
     margin-top: 0.5rem;
     color: #1F2F36;
}
 h6, .h6 {
     font-family: 'Source Serif Pro', 'PT Serif', serif;
     font-weight: 700;
     font-size: 1rem;
     color: #1F2F36;
}
 .tooltip {
     font-family: 'Poppins', 'Open Sans', sans-serif;
}
 .popover {
     font-family: 'Poppins', 'Open Sans', sans-serif;
}
 .bg-primary {
     background-color: rgba(197, 54, 33), var(--bs-bg-opacity)) !important;
}
 .text-primary {
     --bs-text-opacity: 1;
     color: rgba(197, 54, 33, var(--bs-text-opacity)) !important;
}
 .btn-primary {
     height: calc(1.5em + 0.75rem + 2px) !important;
     color: #fff;
     background-color: #264653;
     border-color: #264653;
}
 .btn-primary:hover {
     color: #fff;
     background-color: #1F2F36;
     border-color: #1F2F36;
     font-weight: normal;
}
 .bg-secondary {
     --bs-bg-opacity: 1;
     background-color: rgba(176, 100, 75, var(--bs-bg-opacity)) !important;
}
 .text-secondary {
     --bs-text-opacity: 1;
     color: rgba(176, 100, 75, var(--bs-bg-opacity)) !important;
}
 .btn-secondary {
     color: #fff;
     background-color: #00bfb2;
     border-color: #00bfb2;
}
 .btn-secondary:hover {
     color: #fff;
     background-color: #00A699;
     border-color: #00A699;
}
 a {
     color: #1F2F36;
     font-weight: 600;
}
 a:hover {
     color: #264653;
     font-weight: 600;
}
 .nav-link-sidebar {
     display: block;
     padding: 0.5rem 1rem;
     color: #fff;
     text-decoration: none;
     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
     font-family: 'Source Serif Pro', 'PT Serif', serif;
     font-weight: 700;
     font-size: 1rem;
}
 .nav-link-sidebar:hover, .nav-link-sidebar:focus {
     color: #00BFB2;
}
 .nav-pills .nav-link {
     border-radius: 0rem 0.25rem 0.25rem 0rem;
}
 .nav-link-sidebar-tier2 {
     display: block;
     padding: 0.25rem 0rem 0rem 3.125rem;
     color: #fff;
     text-decoration: none;
     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
     font-family: 'Source Serif Pro', 'PT Serif', serif;
     font-weight: 700;
     font-size: 0.8rem;
}
 .nav-link-sidebar-tier2:hover, .nav-link-sidebar-tier2:focus {
     color: #00BFB2;
}
 .nav-pills .nav-link-sidebar.active, .nav-pills .show > .nav-link-sidebar {
     color: #1F2F36;
     background-color: #00BFB2;
}
 .nav-pills .nav-link-sidebar-tier2.active, .nav-pills .show > .nav-link-sidebar-tier2 {
     color: #1F2F36;
     background-color: #00BFB2;
}
 .navbar {
     box-shadow: 0px 0px 0px lightgrey;
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     display: flex;
}
 .navbar-light .navbar-nav .nav-link {
     color: #1F2F36;
}
 .dropdown-item {
     color: #1F2F36;
}
 .dropdown-item:hover, .dropdown-item:focus {
     color: #fff;
     background-color: #264653;
}
 .dropdown-header {
     color: #1F2F36 
}
/* https://github.com/sunilsm7/dash-oil-and-gas/blob/master/assets/styles.css */
 .dcc_control {
     margin: 0;
     padding-right: 16px;
     padding-bottom: 16px;
     width: min(33%, 500px);
     min-width: min(100%, 300px);
     max-width: 100%;
}
 .dcc_control_dropdown {
     margin: 0;
     padding-right: 16px;
     padding-bottom: 16px;
     width: min(calc(33%), 500px);
     min-width: min(calc(50vw), 300px);
}
 .dcc_control_half_screen {
     margin: 0;
     padding-right: 16px;
     padding-bottom: 16px;
     width: min(calc(45%), 350px);
     min-width: min(calc(100%), 250px);
}

 .dcc_control_half_screen_small {
     margin: 0;
     padding-right: 16px;
     padding-bottom: 16px;
     width: min(calc(45%), 350px);
     min-width: min(calc(50%), 250px)
}

 .dcc_control_large {
     margin: 0;
     padding-right: 16px;
     padding-bottom: 16px;
     width: min(calc(50%), 750px);
     min-width: min(calc(100%), 450px);
}
 .dcc_control_xl {
     margin: 0;
     padding-right: 16px;
     padding-bottom: 16px;
     width: min(calc(100%), 1000px);
}
 .padding_right {
     padding-right: 16px;
}
 .padding_bottom {
     padding-bottom: 16px;
}
 .padding_left {
     padding-left: 16px;
}
 .padding_top {
     padding-top: 16px;
}
 .padding {
     padding: 16px;
}

 .dcc_control_date {
     margin: 0;
     padding-right: 16px;
     padding-bottom: 16px;
     width: min(calc(33%), 350px);
     min-width: min(calc(100%), 300px);
}
 .dcc_control_small {
     margin: 0;
     width: min(calc(20%), 250px);
     min-width: min(calc(100%), 200px);
     padding-bottom: 7.5px;
     padding-right: 7.5px;
}
 .dcc_control_medium {
     margin: 0;
     width: min(calc(20%), 300px);
     min-width: min(calc(100%), 250px);
     padding-bottom: 7.5px;
     padding-right: 7.5px;
}
 .dcc_control_medium_padding {
     margin: 0;
     width: min(calc(20%), 350px);
     min-width: min(calc(100%), 250px);
     padding-bottom: 16px;
     padding-right: 16px;
}
 .dcc_control_small_padding {
     margin: 0;
     width: min(calc(20%), 250px);
     min-width: min(calc(100%), 200px);
     padding-bottom: 16px;
     padding-right: 16px;
}

 .dcc_control_small_dropdown_padding {
     margin: 0;
     width: min(calc(20%), 250px);
     min-width: min(calc(45%), 200px);
     padding-bottom: 16px;
     padding-right: 16px;
}

 .dcc_control_xs {
     margin: 0;
     width: min(calc(20%), 200px);
     min-width: min(calc(100%), 175px);
     padding-bottom: 7.5px;
     padding-right: 7.5px;
}
 .dcc_control_xxs {
     margin: 0;
     width: min(calc(20%), 150px);
     min-width: min(calc(100%), 125px);
     padding-bottom: 7.5px;
     padding-right: 7.5px;
}
 .dcc_control_xxs_padding {
     margin: 0;
     width: min(calc(20%), 150px);
     min-width: min(calc(100%), 125px);
     padding-bottom: 16px;
     padding-right: 16px;
}
 .dcc_control_date_single {
     margin: 0;
     width: min(calc(20%), 200px);
     padding-right: 16px;
     padding-bottom: 16px;
     min-width: min(calc(100%), 175px);
}
 .dcc_control_xs_padding {
     margin: 0;
     width: min(calc(20%), 200px);
     min-width: min(calc(100%), 175px);
     padding-bottom: 16px;
     padding-right: 16px;
}
 .button_small {
     height: calc(1.5em + 0.75rem + 2px);
     margin: 0;
     width: min(calc(20%), 250px);
     min-width: min(calc(80vw), 175px);
     padding-bottom: 7.5px;
}
 .button_xs {
     height: calc(1.5em + 0.75rem + 2px);
     margin: 0;
     width: 97.17px;
     padding-bottom: 7.5px;
}
 .button_medium {
     height: calc(1.5em + 0.75rem + 2px);
     margin: 0;
     width: min(calc(20%), 250px);
     min-width: min(calc(80vw), 200px);
     padding-bottom: 7.5px;
}
 .button_outline {
     background-color: #E7E7E7;
     color: #1F2F36;
}
 .button_outline:hover {
     background-color: #f0f0f0;
     color: #1F2F36;
}

 .button_outline:disabled {
     background-color: #f0f0f0;
     color: #1F2F36;
}

 .pretty_container {
     border-radius: 5px;
     background-color: #fff;
     margin-top: 10px;
     margin-bottom: 20px;
     margin-right: 10px;
     margin-left: 10px;
     padding: 16px;
     position: relative;
     box-shadow: 2px 2px 2px lightgrey;
}
 .pretty_container_half {
     border-radius: 5px;
     background-color: #fff;
     margin-top: 10px;
     margin-bottom: 10px;
     margin-right: 10px;
     margin-left: 10px;
     padding: 16px;
     position: relative;
     box-shadow: 2px 2px 2px lightgrey;
}
 .btn-link {
     color: #1F2F36;
     font-weight: 600;
}
 .btn-link:hover {
     color: #264653;
     font-weight: 600;
}
 .btn-link-left {
     text-align: left;
     padding: 0rem 0rem;
}
 .dash-bootstrap .rc-slider-handle {
     background-color: #264653;
}
 .form-control:disabled {
     background-color: #F9F9F9;
}
 .form-control {
     background-color: #fff;
     background-clip: padding-box;
     border: 1px solid #CED4DA;
     font-size: 0.9375rem;
     font-weight: 400;
     height: calc(1.5em + 0.75rem + 3.5px);
     line-height: 1.5;
     border-radius: 0.25rem;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
 .form-check-input:checked {
     background-color: #264653;
     border-color: #264653;
}
 .margin_right {
     margin-right: 16px;
}
 .margin_bottom {
     margin-bottom: 16px;
}
 .margin_left {
     margin-left: 16px;
}
 .margin_left_more {
     margin-left: 40px;
}
 .margin_top {
     margin-top: 16px;
}
 .margin {
     margin: 16px;
}
 .margin_bottom_small {
     margin-bottom: 8px;
}
 .padding_top_sidebar {
     padding-top: 30px;
}
 .padding_extra {
     padding-bottom: 44px;
}
 .container_nav, .container_nav-fluid, .container_nav-sm, .container_nav-md, .container_nav-lg, .container_nav-xl, .container_nav-xxl {
     width: 100%;
     padding-right: 0.5rem;
     padding-left: 1rem;
     margin-right: 0;
     margin-left: 0;
}
 @media (min-width: 576px) {
     .container_nav, .container_nav-sm {
         min-width: 100%;
    }
}
 @media (min-width: 768px) {
     .container_nav, .container_nav-sm, .container_nav-md {
         min-width: 100%;
    }
}
 @media (min-width: 992px) {
     .container_nav, .container_nav-sm, .container_nav-md, .container_nav-lg {
         min-width: 100%;
    }
}
 @media (min-width: 1200px) {
     .container_nav, .container_nav-sm, .container_nav-md, .container_nav-lg, .container_nav-xl {
         min-width: 100%;
    }
}
 @media (min-width: 1400px) {
     .container_nav, .container_nav-sm, .container_nav-md, .container_nav-lg, .container_nav-xl, .container_nav-xxl {
         min-width: 100%;
    }
}
 .navbar .dropdown-menu.show {
     display: block;
     margin-left: -125px;
}
 .dropdown-menu.show {
     display: block;
     margin-left: 0;
}
 .padding_top_sidebar {
     padding-top: 0px;
}
 .navbar-toggler {
     padding-top: 0rem;
}
 @media (min-width: 768px) {
     .padding_top_sidebar {
         padding-top: 30px;
    }
}
 @media (min-width: 768px) {
     .navbar-toggler {
         padding-top: 2rem;
    }
}
 .navbar .dropdown-toggle::after {
     color: #1F2F36;
     margin-left: 0;
     vertical-align: 0;
     font: bold normal normal 32px/1 'Font Awesome 5 Free';
     content: "\f2bd";
     border: none;
}

 .dropdown-item:hover, .dropdown-item:focus {
     background-color: #264653;
}
 .dropdown-item.active, .dropdown-item:active {
     background-color: #264653;
}
 .no_padding {
     padding: 0px;
}
 .no_margin {
     margin: 0px;
}
 .no_margin_bottom {
     margin-bottom: 0px;
}
 .no_padding_bottom {
     padding-bottom: 0px;
}
 .no_padding_top {
     padding-top: 0px;
}
 .no_padding_right {
     padding-right: 0px;
}
 .no_padding_left {
     padding-left: 0px;
}
 .accordion-body {
     background-color: #FFFFFF;
     border: 1px solid #CED4DA;
     border-radius: 0px;
     border-bottom-left-radius: 0.25rem;
     border-bottom-right-radius: 0.25rem;
}
 .accordion-body-last {
     background-color: #FFFFFF;
     border: 1px solid #CED4DA;
     border-radius: 0px;
     border-bottom-left-radius: 0.25rem;
     border-bottom-right-radius: 0.25rem;
     padding: 0;
}
 .accordion-item {
     background-color: transparent;
     padding-bottom: 16px;
     border: 0px;
}
 .accordion-button:not(.collapsed)::after {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
 .accordion-button {
     border-radius: 0.25rem;
     border: 1px solid #CED4DA;
}
 .accordion-button:not(.collapsed) {
     color: #FFFFFF;
     background-color: #264653;
     border: 0px;
     border-radius: 0px;
     border-top-left-radius: 0.25rem;
     border-top-right-radius: 0.25rem;
}
 .help_text {
     color: #95a5a6 
}
 .Select-value-label {
     color: #1F2F36 !important;
}
 .Select--multi .Select-value-label {
     color: #FFFFFF !important;
}
 .Select--multi .Select-value {
     background-color: #264653 !important;
     border-color: #264653 !important;
     color: #FFFFFF !important;
}
 .Select--multi .Select-value-icon {
     border-right: 0px !important;
}
 .Select--multi:hover .Select-value-icon {
     color: #FFFFFF !important;
     border-right: 0px !important;
}
 .is-focused:not(.is-open) > .Select-control {
     border-color: #264653 !important;
     box-shadow: 0 0 0 0.25rem rgba(38, 70, 83, 0.25) !important;
}
 .form-control:focus {
     border-color: #264653;
     color: #1F2F36;
     box-shadow: 0 0 0 0.25rem rgba(38, 70, 83, 0.25);
}
 .accordion-button:focus {
     border-color: #264653;
     box-shadow: 0 0 0 0.25rem rgba(38, 70, 83, 0.25);
}
 .tooltip {
     font-family: 'Poppins', 'Open Sans', sans-serif;
     font-size: 0.875rem;
     font-weight: 400;
     --bs-tooltip-opacity: 1 !important;  /* Override the default 0.9 */
     box-shadow: 0px 9px 20px 0px rgba(25,30,37,.2);
     position: absolute !important;
}
 .tooltip-inner {
     color: #FFFFFF;
     text-align: left;
     background-color: #264653;
     border-radius: 0.25rem;
     max-width: min(500px, 90vw);
     box-shadow: inherit;
     white-space: pre-wrap;  /* Ensures text wraps properly */
     word-break: normal;     /* Prevent mid-word breaks */
     overflow-wrap: anywhere; /* Smarter word wrapping */
}
 .bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
     border-top-color: #264653;
}
 .bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
     border-right-color: #264653;
}
 .bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
     border-bottom-color: #264653;
}
 .bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
     border-left-color: #264653;
}
 .card {
     background-color: transparent;
     padding-bottom: 16px;
     border: 0px;
}
 .card-body {
     background-color: #FFFFFF;
     border: 1px solid #CED4DA;
     border-radius: 0.25rem;
     padding: 1rem 1.25rem;
}
 .radio-group .form-check {
     padding-left: 0 !important;
}
 .radio-group .btn-group > .form-check:not(:last-child) > .btn {
     border-top-right-radius: 0 !important;
     border-bottom-right-radius: 0 !important;
}
 .radio-group .btn-group > .form-check:not(:first-child) > .btn {
     border-top-left-radius: 0 !important;
     border-bottom-left-radius: 0 !important;
     margin-left: -1px !important;
}
 .btn-group {
     height: calc(1.5em + 0.75rem + 2px);
}
 .btn-outline-primary {
     height: calc(1.5em + 0.75rem + 2px);
}
 .modal-header {
     background-color: #264653;
     border-bottom: 1px solid #CED4DA;
}

 .modal-title {
     color: #FFFFFF;
}

 .modal {
     top: 12.5vh;
}
 .modal .btn-close, .toast .btn-close {
     background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
}
 .alert {
     margin-bottom: 0;
}
 .dash-spreadsheet .Select:hover .Select-clear {
     color: #1F2F36 !important;
}
 .dash-spreadsheet .Select-control:hover .Select-arrow {
     border-top-color: #1F2F36 !important;
}
 .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
     --accent: #1F2F36 !important;
}
 td.dash-cell.cell--selected.focused {
     background-color: #dbdbdb !important;
}
 td.dash-cell.cell--selected {
     background-color: #dbdbdb !important;
}
 td.dash-cell {
     border-color: #dbdbdb !important;
}
 .dash-select-cell input[type=checkbox] {
     appearance: none;
     cursor: pointer;
     width: 16px;
     height: 16px;
     background-color: white;
     background-repeat: no-repeat;
     background-position: center center;
}
 .dash-select-cell input[type=checkbox]:checked {
     background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23264653'><path d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm10.03 4.97a.75.75 0 0 1 .011 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.75.75 0 0 1 1.08-.022z'/></svg>");
}
 .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-filter input.dash-filter--case--sensitive {
     border-color: #1F2F36 !important;
     color: #1F2F36 !important;
}

 @media (min-width: 48em) {
     .adjust-no-sidebar {
         margin-left: -15rem;
         width: calc(100% + 15rem);
    }
}

 .plan_card {
     margin: 0;
     width: min(calc(33%), 600px);
     min-width: min(calc(100%), 450px);
}

 .plan_card_small {
     margin: 0;
     width: min(calc(33%), 500px);
     min-width: min(calc(100%), 350px);
}

 .settings_text {
     font-weight: normal;
     font-size: 1rem;
     min-height: 50px;
}

 .breadcrumb-item {
     text-decoration: none;
}

 .breadcrumb-item.active {
     color: #8a8a8a;
}

 .breadcrumb-item * {
     text-decoration: inherit;
}

.table {
    --bs-table-hover-bg: #E7E7E7;
}

video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto; /* Maintain aspect ratio */
}

/* Media Queries for Responsive Design */
@media (max-width: 2048px) {
    video {
        max-width: 80%;
    }
}

@media (max-width: 1024px) {
    video {
        max-width: 100%;
    }
}

 .page-item.active .page-link {
     background-color: #00BFB2;
     border-color: #00BFB2;
     font-weight: 600;
}

 .page-item .page-link {
     background-color: #264653;
     border-color: #264653;
     font-weight: 600;
}

 .page-item:not(.active) .page-link:hover {
    background-color: #1F2F36;
    border-color: #1F2F36;
    font-weight: 600;
}

 .onboarding_container {
    max-width: 1080px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}

/* Make dbc.Button look exactly like dcc.Link */
.link-button {
    background: none;       /* Remove background */
    border: none;           /* Remove border */
    color: #FFFFFF;         /* Bootstrap primary link color */
    text-decoration: underline;  /* Remove underline initially */
    cursor: pointer;        /* Pointer cursor on hover */

    /* Fix text alignment issues */
    font-size: inherit;     /* Keep default text size */
    font-weight: normal;    /* Ensure normal text weight */
    line-height: 1.2;       /* Match dcc.Link's line height */
    display: inline-flex;   /* Ensures proper vertical alignment */
    align-items: center;    /* Centers text vertically */
    vertical-align: middle; /* Further refines vertical alignment */

    /* Remove button-like padding */
    padding: 0;
    margin-top: -2.25px;
    height: auto !important;
    font-weight: 600;
}

/* Hover effect like a real link */
.link-button:hover {
    background: none;       /* Remove background */
    border: none;           /* Remove border */
    color: #264653;         /* Bootstrap primary link color */
    text-decoration: underline;  /* Remove underline initially */
    cursor: pointer;        /* Pointer cursor on hover */

    /* Fix text alignment issues */
    font-size: inherit;     /* Keep default text size */
    font-weight: normal;    /* Ensure normal text weight */
    line-height: 1.2;       /* Match dcc.Link's line height */
    display: inline-flex;   /* Ensures proper vertical alignment */
    align-items: center;    /* Centers text vertically */
    vertical-align: middle; /* Further refines vertical alignment */

    /* Remove button-like padding */
    padding: 0;
    margin-top: -2.25px;
    height: auto !important;
    font-weight: 600;
}

/* Prevent visual glitches when keeping button pressed */
.link-button:active,
.link-button:focus {
    background: none !important; /* Remove active background */
    box-shadow: none !important; /* Remove focus outline */
    outline: none !important;    /* Remove default focus */
    color: #264653 !important;   /* Keep hover color */
}

._dash-loading {
    background-color: #264653;
    color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full-page height */
    width: 100vw; /* Full-page width */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999; /* Make sure it overlays all app content */
}

._dash-loading::after {
    content: ""; /* Your custom text */
    color: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Poppins', 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    z-index: 10; /* Ensure it appears above the background */
}

.bi-info-circle {
    color: rgba(31, 47, 54, 0.50);
    transition: color 0.2s ease;
}

.bi-info-circle:hover {
    color: #1F2F36;
}