/* put your own styles to customize and override the theme */
.modal-dialog.modal-xxl { max-width: 1400px; }
.modal-dialog-scrollable .modal-header {
    z-index: 3;
}

.metric-box-container {
    display:flex;
    flex-wrap: wrap;
    gap:10px;
}

.metric-box {
    text-align: center;
    border: none;
    border-radius: 0.25rem;
    box-shadow: 0 0 0 1px rgba(20, 20, 31, 0.05), 0 1px 3px 0 rgba(20, 20, 31, 0.15);
    display: flex;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
}

.metric-icon {
    border: none;
    position:absolute;
    box-shadow: 0 0 0 1px rgba(20, 20, 31, 0.05), 0 1px 3px 0 rgba(20, 20, 31, 0.15);
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #ffffff;
    background-clip: border-box;
    z-index: 100;
}

.metric-icon-top {
    left:44%;
    top:-20px;
    padding: 12px;
    border-radius:50%;
}
.metric-icon-top span {
    width: 18px;
}
.metric-icon-help {
    right:10px;
    top:-10px;
    padding: 3px 2px;
    border-radius: 4px;
    color: #acacac;
}
.metric-icon-help:hover {
    color:#0179A8;
}

.metric-selected {
    border: 1px solid #346CB0!important;
    background-color: #f8f8fd;
}

.metric-box-small .metric-box {
    min-height: 4.5rem;
    overflow: hidden;
    min-width: 90px;
    padding:.5rem!important;
}

.metric-box-medium .metric-box {
    min-height: 4.5rem;
    overflow: hidden;
    min-width: 120px;
    padding:.5rem!important;
}

.metric-row .metric {
    min-height: 6.5rem;
    padding: 1rem 0.25rem;
}

.metric-small .metric-row .metric, .metric-xs .metric-row .metric {
    min-height: 5.5rem;
    overflow: hidden;
    min-width: 130px;
    padding:.5rem!important;
}

.metric-xs .metric-row .metric {
    min-height: 3.5rem;
}

.metric-small .metric-label {
    font-weight: 300;
}

a.metric-primary:hover {
    border-color: #346CB0!important;
}

.popup-help-text {
    display:none; position:absolute; top:20px; left: 50%; width:100%; transform: translateX(-50%); min-width: 300px; max-width: 100%; background: #f7f0e4; z-index: 200; border:1px solid #6a6a6a; color: #000;
}

.scrollable{
    overflow-y: auto;
    max-height: 300px;
}

.scrollable-menu {
    height: auto;
    max-height: 300px;
    overflow-x: hidden;
}

.breadcrumb-item + .breadcrumb-item::before {
    padding-right: 0;
    content: "";
}

.fullscreen-mode {
    position: fixed;
    left: 0;
    z-index: 1035;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color:white;
    transition: all 0.2s ease;
}

.no-scroll {
    overflow: hidden !important;
}

.card-metric-href {
    box-shadow: 0 0 0 1px rgb(81 81 149 / 54%), 0 1px 3px 0 rgba(20, 20, 31, 0.15)!important;
}

.card-metric-href a {
    border: 1px solid transparent;
    transition: border-color 0.1s ease;
}

.card-metric-href a:hover {
    border-color: #346CB0;
}

.card-metric-href a:active {
    border-color: #346CB0;
}

.card-metric-icon {
    position: relative;
    margin-top:16px!important;
}
.card-metric-icon .metric {
    padding-top: 24px!important;
}

.flatpickr {
    width:170px;
}

.block-hover:hover {background-color: #f3f3f3;}
.block-hover-primary:hover {background-color: rgba(52, 108, 176, 0.08);}

table.dataTable.compact thead th, table.dataTable.compact thead td {
    padding: 4px 17px 4px 4px;
}

.min-width-40 {min-width: 40px;}
.min-width-50 {min-width: 50px;}
.min-width-60 {min-width: 60px;}
.min-width-80 {min-width: 80px;}
.min-width-90 {min-width: 90px;}
.min-width-100 {min-width: 100px;}
.min-width-120 {min-width: 120px;}
.min-width-200 {min-width: 200px;}

.min-height-100 {min-height: 100px;}

.w40 {width: 40px;}
.w50 {width: 50px;}
.w60 {width: 60px;}
.w70 {width: 70px;}
.w80 {width: 80px;}
.w100 {width: 100px;}
.w120 {width: 120px;}
.w200 {width: 200px;}

.w-33 {width:33%;}

.kyn-popover {
    cursor: pointer;
    color: #346CB0!important;
}

.popover {
    pointer-events: none;
}

.fs-90 {font-size: 90%;}
.fs-80 {font-size: 80%;}
.fs-70 {font-size: 70%;}
.fs-60 {font-size: 60%;}

.fs-10 {font-size: 0.8333333333rem !important;}

.fw-semibold {font-weight: 600 !important;}
.fw-medium {font-weight: 500 !important;}
.fw-normal {font-weight: 400 !important;}

.trend-up {color:#57ad2a;}
.trend-down {color:#cd3a3a;}

.user-select-none {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.message-box {padding: 10px; border: 1px solid #dddddd; background-color: #f0f5fb;}

.radio-buttons label {
    display: block;
    cursor: pointer;
    font-weight: 400;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.1em;
}

.radio-buttons label input {
    position: absolute;
    left: -9999px;
}

.radio-buttons label input:checked + span {
    background-color: rgba(52,108,176,.12);
    color: #2e609c;
    border:1px solid #2e609c;
}

.radio-buttons label input:checked + span:before {
    box-shadow: inset 0 0 0 0.4em #2e76ff;
}

.radio-buttons label span {
    display: flex;
    align-items: center;
    padding: 0.275em 0.65em 0.275em 0.375em;
    border:1px solid white;
    border-radius: 4px;
    transition: 0.25s ease;
    color: #363642;
}

.radio-buttons label span:hover {
    background-color: rgba(52,108,176,.12);
}

.radio-buttons label span:before {
    display: flex;
    flex-shrink: 0;
    content: "";
    background-color: #fff;
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    margin-right: 0.375em;
    transition: 0.25s ease;
    box-shadow: inset 0 0 0 0.075em #363642;
}

.grid .metric {
    min-height: 6.5rem;
    min-width: 120px;
    padding: 1rem 0.25rem;
}

.grid-6 {--bs-columns: 6;}
.grid-5 {--bs-columns: 5;}
.grid-4 {--bs-columns: 4;}
.grid-2 {--bs-columns: 2;}

.grid-recall {

    gap: 0!important;
    --bs-columns: 6 !important;
    div:last-child p,
    div:last-child h5 {
        border-right: none;
    }



    div p, div h5 {
        border-right: 1px solid #ccc;
    }


    @media (max-width: 768px) {
        --bs-columns: 3 !important;
        div:nth-child(3n) p,
        div:nth-child(3n) h5 {
            border-right: none;
        }

        div:nth-child(-n+3) {
            border-bottom: 1px solid #ccc;
        }
    }
}

.g-2, .gy-2 {
    --bs-gutter-y: 0.5rem;
}
.g-2, .gx-2 {
    --bs-gutter-x: 0.5rem;
}

.grid {
    display: grid;
    grid-template-rows: repeat(var(--bs-rows, 1), 1fr);
    grid-template-columns: repeat(var(--bs-columns, 12), 1fr);
    gap: var(--bs-gap, 1.5rem);
}

.border-gray {border-color: #c6c6c6 !important;}

.bg-light-blue {background-color:#e9f4ff;}

a .metric-label {color:#346CB0!important;}

.d-flex-between {display: flex;justify-content: space-between;align-items: center!important;}

.btn-secondary-blue:not(:disabled):not(.disabled):active, .btn-secondary-blue:not(:disabled):not(.disabled).active,

.btn-success-light {background-color: #dee9e6;}

.btn-warning-light {background-color: #f6f0e7;}

.opacity-80 {opacity: 0.8!important;}

.show > .btn-secondary-blue.dropdown-toggle {
    background: #285489;
    color: white;
    box-shadow: none;
    border-color: #285489;
}

.table-align-middle-all td,
.table-align-middle-all th {
    vertical-align: middle;
}

.table-link {
    padding: 12px;
    display: block;
    width: 100%;
    height: 100%;
}
.table-zero-grey tbody td[data-raw="0"] {
    color: #c6c6c6 !important;
}
.table-enhanced {
    margin-bottom: 0;
}

.table-enhanced-fixed-first tr>th:first-child, .table-enhanced-fixed-first tr>td:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
}

.table-enhanced-fixed-header.table-enhanced-fixed-first thead th:first-child {
    z-index: 15;
}

.app {
    overflow-x: clip;
}

.app-main {
    overflow-x: clip;
    overflow-y: visible;
}

.table-responsive:has(.table-enhanced-fixed-header),
.table-responsive:has(.table-virtual-scroll) {
    max-height: calc(100vh - 12rem);
    overflow: auto;
}

.table-virtual-spacer td {
    padding: 0 !important;
    border: none !important;
    line-height: 0;
}

.table-enhanced.table-enhanced-fixed-header {
    border-collapse: separate;
    border-spacing: 0;
}

.table-enhanced-fixed-header thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
}

.table-enhanced tbody tr:nth-child(odd) td {
    background: #f9f9f9!important;
}

.table-enhanced tbody tr:nth-child(even) td, .table-enhanced th {
    background: white!important;
}

.table-enhanced th {
    border-bottom: 1px black solid!important;
}

.table-enhanced tfoot td {
    border-top: 1px black solid!important;
    background: white!important;
    font-weight: bold;
}
.table-enhanced tbody tr:hover td {
    background-color: #ececec !important;
}
/* Ensure compare indicators remain hoverable during row hover */
.table-enhanced tbody tr:hover td .compare-indicator {
    pointer-events: auto;
}
.table-enhanced-bordered tbody td {
    border: 1px solid #dee2e6;
}
.table-enhanced .onclick {
    cursor: pointer;
    color: #346CB0;
    font-weight: 500;
}
.table-border-right {
    border-right: 1px solid #cfcfcf !important;
    padding-right: 6px !important;
}
.table-enhanced tbody tr:nth-child(odd) td .clipboard-icon {
    color: #f9f9f9;
}
.table-enhanced tbody tr:nth-child(even) td .clipboard-icon {
    color: #ffffff;
}
.table-enhanced tbody tr:hover td .clipboard-icon {
    color: #ececec;
}
.table-group-first-column thead th:first-child,
.table-group-first-column tbody td:first-child,
.table-group-first-column tfoot td:first-child {
    display: none;
}
.table-cell-persistent {
    display: table-cell !important;
}
.group-header {
    font-weight: bold;
}
.clipboard-container:hover .clipboard-icon {
    color: #9e9e9e!important;
}
.clipboard-icon {
    margin-left: 0.25rem;
    cursor: pointer;
    color: inherit;
}
.clipboard-icon:hover, .clipboard-container .clipboard-icon:hover {
    color: #346CB0 !important;
}
.clipboard-icon i {
    transition: transform 0.2s ease;
    display: inline-block;
}

.nav-item.has-notified-success::before,
.nav-link.has-notified-success::before {
    background-color: #59c259;
}

.nav-item.has-notified-danger::before,
.nav-link.has-notified-danger::before {
    background-color: #b64545;
}

.mini-chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.mini-chart-bar {
    transition: fill 0.2s ease-in-out;
}

.mini-chart-bar:hover {
    fill: #2e4d1d;
}
.mini-chart-column svg {
    color: #637930;
    margin: auto;
}

.table-chart-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.table-chart-area {
    flex: 1;
}

.table-chart-sidebar {
    width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.table-chart-btn {
    background: none;
    border: none;
    color: #353535;
    cursor: pointer;
    font-size: 18px;
    padding: 5px;
    transition: color 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-chart-btn:hover {
    color: #007bff;
}
.table-chart-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}
.table-chart-expanded-row canvas {
    width: 100% !important;
    height: 200px !important;
    display: block;
    margin: auto;
}

.expandable-help-text {
    transition: all 0.3s ease;
}

.expandable-help-text.collapsed {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #888c9b;
}

.expandable-help-text.expanded {
    white-space: pre-line;
    overflow: visible;
}

.custom-sort-icon {
    display: inline-block;
    margin-left: 3px;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #333;
    transition: transform 0.2s ease;
}

.sort-asc {
    transform: rotate(180deg);
}

.sort-desc {
    transform: rotate(0deg);
}

.color-box {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #BDDD93;
    margin-right: 6px;
    vertical-align: middle;
    border-radius: 3px;
}

.custom-dropdown-icon {
    display: inline-block;
    margin-left: 0.2em;
    vertical-align: 0.2em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 4px;
}
.loading-content {
    min-width: 280px;
    min-height: 50px;
    background-color: #f3fbff;
    justify-content: center !important;
    align-items: center !important;
}

@keyframes whiteToBlack {
    from {
        color: #ffffff;
    }
    to {
        color: #000000;
    }
}

@media (max-width: 1366px) {
    .grid-6 {
        --bs-columns: 3;
    }
}
@media (max-width: 1400px) {
    .grid-5 {--bs-columns: 2;}
}
@media (max-width: 992px) {
    .grid {--bs-columns: 3;}
    .grid-5 {--bs-columns: 2}
}
@media (max-width: 768px) {
    .grid {--bs-columns: 2;}
}

.fa-fw {
    text-align: center;
    width: 1.25em;
}

.icon-lg {
    font-size: 1.25em;
    line-height: .05em;
    vertical-align: -.075em;
}
.icon-xl {
    font-size: 1.5em;
    line-height: .04167em;
    vertical-align: -.125em;
}
.icon-xxl {
    font-size: 2em;
    line-height: .03125em;
    vertical-align: -.1875em;
}
.icon-dark {
    color: #424242;
}
.icon-darkgrey {
    color: #616170;
}
.fa-spin {
    -webkit-animation: fa-spin 2s linear infinite;
    animation: fa-spin 2s linear infinite;
}

@font-face {
    font-family: 'icomoon';
    src:
            url('fonts/icomoon.woff2?x3jinp') format('woff2'),
            url('fonts/icomoon.ttf?x3jinp') format('truetype'),
            url('fonts/icomoon.woff?x3jinp') format('woff'),
            url('fonts/icomoon.svg?x3jinp#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-visible:before {
    content: "\e906";
}
.icon-hidden:before {
    content: "\e907";
}
.icon-virtual:before {
    content: "\e905";
}
.icon-dashboard-customize:before {
    content: "\e904";
}
.icon-sliders-h:before {
    content: "\e903";
}
.icon-document:before {
    content: "\e902";
}
.icon-settings:before {
    content: "\e901";
}
.icon-receipt:before {
    content: "\f543";
}
.icon-arrow-up:before {
    content: "\f062";
}
.icon-arrow-down:before {
    content: "\f063";
}
.icon-copy:before {
    content: "\f0c5";
}
.icon-sort-down:before {
    content: "\f0dd";
}
.icon-angle-left:before {
    content: "\f104";
}
.icon-sign-out:before {
    content: "\f2f5";
}
.icon-clipboard:before {
    content: "\f328";
}
.icon-heart-rate:before {
    content: "\f5f8";
}
.icon-globe:before {
    content: "\f57c";
}
.icon-city:before {
    content: "\f64f";
}
.icon-network:before {
    content: "\f6ff";
}
.icon-pencil:before {
    content: "\f040";
}
.icon-question-circle:before {
    content: "\f059";
}
.icon-users:before {
    content: "\f0c0";
}
.icon-code:before {
    content: "\f121";
}
.icon-ellipsis-v:before {
    content: "\f142";
}
.icon-moon:before {
    content: "\f186";
}
.icon-building:before {
    content: "\f1ad";
}
.icon-file-image:before {
    content: "\f1c5";
}
.icon-calculator:before {
    content: "\f1ec";
}
.icon-hospital-user:before {
    content: "\f80d";
}
.icon-home:before {
    content: "\f015";
}
.icon-trash:before {
    content: "\f2ed";
}
.icon-info-circle:before {
    content: "\f05a";
}
.icon-times:before {
    content: "\f00d";
}
.icon-check:before {
    content: "\f00c";
}
.icon-resize:before {
    content: "\f31e";
}
.icon-compress:before {
    content: "\f78c";
}
.icon-user:before {
    content: "\f007";
}
.icon-plus:before {
    content: "\f067";
}
.icon-minus:before {
    content: "\f068";
}
.icon-question:before {
    content: "\e900";
}
.icon-exclamation:before {
    content: "\f071";
}
.icon-at:before {
    content: "\f1fa";
}
.icon-bars:before {
    content: "\f0c9";
}
.icon-calendar:before {
    content: "\f073";
}
.icon-address-card:before {
    content: "\f2bb";
}
.icon-shield-alt:before {
    content: "\f3ed";
}
.icon-circle:before {
    content: "\f111";
}
.icon-circle-filled:before {
    content: "\f112";
}
.icon-lock:before {
    content: "\f023";
}
.icon-unlock-alt:before {
    content: "\f13e";
}
.icon-file-pdf:before {
    content: "\f1c1";
}
.icon-file-excel:before {
    content: "\f1c3";
}
.icon-file-csv:before {
    content: "\f6dd";
}
.icon-paste:before {
    content: "\f0ea";
}
.icon-filter:before {
    content: "\f0b0";
}
.icon-search:before {
    content: "\f002";
}
.icon-spinner:before {
    content: "\f110";
}
.icon-mail:before {
    content: "\f0e0";
}
.icon-inbox-out:before {
    content: "\f311";
}
.icon-user-plus:before {
    content: "\f234";
}
.icon-user-remove:before {
    content: "\f235";
}
.icon-user-edit:before {
    content: "\f4ff";
}
.icon-book:before {
    content: "\f02d";
}
.icon-book-open:before {
    content: "\f518";
}
.icon-book-medical:before {
    content: "\f7e6";
}
.icon-plus-square:before {
    content: "\f0fe";
}
.icon-minus-square:before {
    content: "\f146";
}
.icon-download:before {
    content: "\f019";
}
.icon-chart-bar:before {
    content: "\f080";
}
.icon-chart-pie:before {
    content: "\f200";
}
.icon-chart-line:before {
    content: "\f201";
}
.icon-analytics:before {
    content: "\f643";
}
.icon-user-dentist:before {
    content: "\f0f0";
}
.icon-user-hygienist:before {
    content: "\f82f";
}
.icon-female:before {
    content: "\f182";
}
.icon-male:before {
    content: "\f183";
}
.icon-user-owner:before {
    content: "\f508";
}
.icon-user-receptionist:before {
    content: "\f82d";
}
.icon-phone:before {
    content: "\f095";
}
.icon-money:before {
    content: "\f53a";
}
.icon-percentage:before {
    content: "\f541";
}
.icon-phone-rotary:before {
    content: "\f8d3";
}
.icon-question-basic:before {
    content: "\f128";
}
.icon-phone-slash:before {
    content: "\f3dd";
}
.icon-angle-down:before {
    content: "\f107";
}
.icon-times-circle:before {
    content: "\f057";
}
.icon-angle-up:before {
    content: "\f106";
}
.icon-find-replace:before {
    content: "\e929";
}
.icon-puzzle:before {
    content: "\f12e";
}
.icon-tools:before {
    content: "\f7d9";
}
.icon-wrench:before {
    content: "\f0ad";
}
.icon-copy-alt:before {
    content: "\f0c6";
}
.icon-tooth:before {
    content: "\f5c9";
}
.icon-tooth-alt:before {
    content: "\f5ca";
}
.icon-exchange-alt:before {
    content: "\f362";
}
.icon-user-friends:before {
    content: "\f500";
}
.icon-credit-card:before {
    content: "\f09d";
}

/* Column selector drag & drop */
.column-item {
    display: flex;
    align-items: center;
    padding: 2px 0;
    user-select: none;
}

.column-item.dragging {
    opacity: 0.4;
    background: #f0f0f0;
}

.column-item .drag-handle {
    color: #ccc;
    margin-right: 6px;
    font-size: 0.9em;
    padding: 4px 6px;
}

.column-item:hover .drag-handle {
    color: #888;
}

.column-item .custom-control {
    flex: 1;
}

.column-item label {
    cursor: grab;
}

.column-item label::before {
    cursor: pointer;
}

/* Year-over-year comparison toggle button */
.comparison-toggle {
    user-select: none;
}

.comparison-toggle.active {
    background-color: #0056b3;
    border-color: #004494;
    color: #fff;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Reusable toggle chip — metric-style toggleable pill */
.toggle-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(20,20,31,0.12);
    background: #fff;
    color: #363642;
    border-radius: 4px;
    font-size: 0.8125rem;
    padding: 0.25em 0.6em;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
button.toggle-chip:focus,
button.toggle-chip:active,
button.toggle-chip:focus-visible {
    outline: none;
    box-shadow: none;
}
.toggle-chip:hover {
    background-color: rgba(52,108,176,.12);
}
.toggle-chip.active {
    border-color: #346CB0;
    background-color: #f8f8fd;
    color: #346CB0;
}
.toggle-chip.loading {
    pointer-events: none;
    opacity: 0.7;
}
.btn-group > .toggle-chip { border-radius: 0; }
.btn-group > .toggle-chip:first-child { border-radius: 4px 0 0 4px; }
.btn-group > .toggle-chip:last-child { border-radius: 0 4px 4px 0; }

/* Comparison indicators - hidden by default */
.compare-indicator {
    display: none;
    font-size: 0.75em;
    margin-left: 4px;
    white-space: nowrap;
    min-width: 44px;
    text-align: right;
    vertical-align: middle;
}

/* Show when toggle is active */
.table-enhanced.show-comparison .compare-indicator {
    display: inline-block;
}

.compare-indicator.compare-up {
    color: #28a745;
}

.compare-indicator.compare-down {
    color: #dc3545;
}

.compare-indicator.compare-neutral {
    color: #6c757d;
}

.compare-indicator.compare-no-data {
    opacity: 0.2;
    text-align: center;
}