/* Preserve the portal's established spacing while using Bootstrap 5 components. */
html { font-size: 10px; }
body { font-size: 14px; line-height: 1.42857143; }
html, body { max-width: 100%; overflow-x: hidden; }
:root { --bs-body-font-size: 1.4rem; --bs-border-radius: .4rem; }
.form-control, .form-select, .btn, .dropdown-menu, .input-group-text { font-size: 14px; }
.form-control, .form-select { min-height: 34px; padding: 6px 12px; }
textarea.form-control { height: auto; }
.form-group { margin-bottom: 15px; }
.control-label { font-weight: 700; }
.form-horizontal .control-label { padding-top: 7px; }
.form-horizontal .form-group { display: flex; flex-wrap: wrap; margin-right: -12px; margin-left: -12px; }
.radio, .checkbox { position: relative; display: block; margin: 10px 0; }
.radio label, .checkbox label { min-height: 20px; padding-left: 20px; cursor: pointer; }
.radio input, .checkbox input { margin-left: -20px; }
.panel { margin-bottom: 20px; background: #fff; border: 1px solid #ddd; border-radius: 4px; }
.panel-heading { padding: 10px 15px; border-bottom: 1px solid #ddd; }
.panel-body { padding: 15px; }
.panel-footer { padding: 10px 15px; border-top: 1px solid #ddd; background: #f5f5f5; }
.panel-title { margin: 0; font-size: 16px; }
.well { min-height: 20px; padding: 19px; margin-bottom: 20px; background: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; }
.close { float: right; font-size: 21px; font-weight: bold; line-height: 1; color: #000; opacity: .5; background: transparent; border: 0; }
.modal-header .close { margin-left: auto; }
.modal-title { font-size: 18px; }
.modal.fade .modal-dialog { transform: translate(0, -25%); }
.modal.show .modal-dialog { transform: none; }
.modal-backdrop { --bs-backdrop-opacity: .5; }
.nav-tabs > li > a, .nav-pills > li > a { display: block; padding: 10px 15px; }
.nav-tabs .active > a { background: #fff; border-bottom-color: #fff; }
.tab-content > .active { display: block; }
.breadcrumb { padding: 8px 15px; margin-bottom: 20px; }
.breadcrumb > li + li::before { padding: 0 5px; color: #ccc; content: '/'; }
.label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: 700; color: white; border-radius: .25em; }
.label-default { background: #777; } .label-primary { background: #337ab7; }
.label-success { background: #5cb85c; } .label-warning { background: #f0ad4e; } .label-danger { background: #d9534f; }
.input-group-addon { padding: 6px 12px; background: #eee; border: 1px solid #ccc; border-radius: 4px; }
.img-responsive { max-width: 100%; height: auto; display: block; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.dt-container .dt-layout-row { font-size: 14px; }
.dt-container select, .dt-container input { font-size: 14px; }
.datepicker { font-size: 14px; }
.dt-container table.dataTable thead th,
.dt-container table.dataTable thead th .dt-column-title,
.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable thead th .dt-column-title { color: #fff !important; background-color: #3876d0 !important; opacity: 1 !important; visibility: visible !important; }
.dt-container table.dataTable thead th,
.dataTables_wrapper table.dataTable thead th { white-space: nowrap; }
.table > :not(caption) > * > * { padding: 8px; }
.hide { display: none !important; }
.navbar-fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; }
.top-bar.navbar { display: block; height: 50px; min-height: 50px; padding: 0; }
.top-bar .navbar-header { float: left; display: flex; align-items: center; height: 50px; }
.top-bar .navbar-brand { margin: 0; padding: 0; }
.top-bar .toggle-bar {
    display: flex;
    flex: 0 0 50px;
    align-items: stretch;
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.top-bar .toggle-bar > li {
    display: flex;
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
}
.top-bar .toggle-bar > li > .sidebar-toggle-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    color: #fff;
    background: #3876d0;
    text-decoration: none;
}
.top-bar .toggle-bar > li > .sidebar-toggle-button:hover,
.top-bar .toggle-bar > li > .sidebar-toggle-button:focus {
    color: #fff;
    background: #2f68bd;
    outline: 0;
}
.top-bar .toggle-bar > li > .sidebar-toggle-button > i {
    width: auto;
    margin: 0;
    padding: 0 !important;
    font-size: 16px;
    line-height: 1 !important;
}
.top-bar .top-nav { display: flex; align-items: center; height: 50px; }
.side-nav { display: block; height: calc(100vh - 50px); overflow-x: hidden; overflow-y: auto; }
.main, #wrapper { box-sizing: border-box; min-width: 0; max-width: 100%; }
.main { min-height: 100vh; }
.dt-container, .dataTables_wrapper, .table-responsive { width: 100%; max-width: 100%; overflow-x: auto; }
body.sidebar-collapsed .side-nav,
body.sidebar-collapsed .side-nav:hover { width: 64px !important; margin-left: 0 !important; float: none; overflow-x: hidden; overflow-y: auto; }
body.sidebar-collapsed .side-nav > li > a { width: 64px !important; height: 42px; padding: 11px 0 !important; font-size: 0 !important; line-height: 20px; text-align: center; white-space: nowrap; overflow: hidden; }
body.sidebar-collapsed .side-nav > li > a > i:not(.fa-caret-down) { display: inline-block; width: 100%; margin: 0; padding: 0 !important; font-size: 16px !important; line-height: 20px; }
body.sidebar-collapsed .side-nav > li > a > i.fa-caret-down,
body.sidebar-collapsed .side-nav > li > ul { display: none !important; }
body.sidebar-collapsed main.main { width: calc(100% - 64px) !important; margin-left: 64px !important; }
body.sidebar-mobile-open .side-nav,
body.sidebar-mobile-open .side-nav:hover { width: 225px !important; margin-left: 0 !important; float: none; overflow-x: hidden; overflow-y: auto; box-shadow: 4px 0 18px rgba(0,0,0,.2); }
.side-nav > li > a { display: block; padding: 10px 15px; }
.nav > li { position: relative; }
.nav > li > a { text-decoration: none; }
.top-nav > li > a, .dropdown-menu > li > a { display: block; padding: 10px 15px; }
.top-nav > li > .header-icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    color: #dbe8f7;
    background: transparent;
    text-decoration: none;
}
.top-nav > li > .header-icon-button:hover,
.top-nav > li > .header-icon-button:focus {
    color: #fff;
    background: #184a80;
    outline: 0;
}
.top-nav > li > .header-icon-button > i {
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1;
}
.top-nav > .show > a, .top-nav > .show > a:hover, .top-nav > .show > a:focus { color: #fff; background-color: #184074; }
.top-nav > .show > .dropdown-menu { float: left; position: absolute; margin-top: 0; border: 1px solid rgba(0,0,0,.15); border-top-left-radius: 0; border-top-right-radius: 0; background-color: #fff; box-shadow: 0 6px 12px rgba(0,0,0,.175); }
.top-nav > .show > .dropdown-menu > li > a { white-space: normal; }
.top-nav .account-menu-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
}
.top-nav .account-menu-toggle .caret { margin-left: 1px; }
.top-nav .user-dropdown {
    right: 6px !important;
    left: auto !important;
    min-width: 170px;
    margin-top: 2px !important;
    padding: 7px;
    border: 1px solid #d7e0ea !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 22px rgba(15, 42, 70, .16) !important;
}
.top-nav .user-dropdown > li > .user-menu-link {
    display: flex !important;
    align-items: center;
    gap: 11px;
    min-height: 40px;
    padding: 9px 11px !important;
    border-radius: 6px;
    color: #174a82;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
}
.top-nav .user-dropdown > li > .user-menu-link > i {
    flex: 0 0 18px;
    width: 18px;
    margin: 0;
    padding: 0;
    color: #2876d2;
    font-size: 15px;
    text-align: center;
}
.top-nav .user-dropdown > li > .user-menu-link:hover,
.top-nav .user-dropdown > li > .user-menu-link:focus {
    color: #0f3b6d;
    background: #eef5ff;
}
.top-nav .user-dropdown > li > .logout-link > i { color: #dc3545; }
.top-nav .user-dropdown > .divider {
    height: 1px;
    margin: 5px 4px;
    background: #e4eaf1;
}
.navBar-search {
    position: fixed;
    top: -76px;
    right: 0;
    left: 0;
    z-index: 1101;
    display: flex;
    align-items: center;
    width: 100%;
    height: 64px;
    padding: 10px 58px;
    background: #fff;
    border-bottom: 1px solid #dbe3ec;
    box-shadow: 0 5px 18px rgba(15, 42, 70, .18);
    transition: top .25s ease;
}
.navBar-search.open { top: 0; }
.navBar-search .search-input-box {
    width: 100%;
    margin: 0;
    padding: 0;
}
.navBar-search .search-input {
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid #cbd7e4;
    border-radius: 8px;
    background: #f8fafc;
    box-shadow: none;
    color: #18395f;
    font-size: 16px;
}
.navBar-search .search-input:focus {
    border-color: #3876d0;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(56, 118, 208, .14);
    outline: 0;
}
.navBar-search .icon {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
}
.navBar-search .search-icon {
    left: 12px;
    color: #3876d0;
    pointer-events: none;
}
.navBar-search .close-icon {
    right: 10px;
    border: 0;
    border-radius: 50%;
    color: #52677d;
    background: transparent;
    cursor: pointer;
}
.navBar-search .close-icon:hover,
.navBar-search .close-icon:focus {
    color: #173f6c;
    background: #eaf1f8;
    outline: 0;
}
.navBar-search .list_result {
    top: 64px !important;
    right: 58px;
    left: 58px;
    max-height: min(55vh, 420px);
    overflow-y: auto;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 18px rgba(15, 42, 70, .15);
}
.search-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(7, 18, 31, .72);
    opacity: 0;
    transition: opacity .25s ease;
}
.search-backdrop.open {
    z-index: 1100;
    opacity: 1;
    cursor: pointer;
}
.top-nav .alert-dropdown {
    position: fixed !important;
    top: 50px !important;
    right: 8px !important;
    left: auto !important;
    width: min(320px, calc(100vw - 16px)) !important;
    min-width: 0;
    max-height: min(60vh, 420px);
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    transform: none !important;
    z-index: 1040;
    background: #fff;
    border: 1px solid #d5dce5;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 6px 16px rgba(10, 40, 76, .18);
}
.top-nav .alert-dropdown > li > a {
    display: block;
    padding: 10px 14px;
    color: #184074;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
}
.top-nav .alert-dropdown > li:first-child > a {
    color: #18395f;
    font-weight: 600;
    background: #f3f6fa;
    border-bottom: 1px solid #e1e6ee;
}
.highcharts-background, .highcharts-plot-background { fill: #fff !important; }
.highcharts-root .highcharts-title,
.highcharts-root .highcharts-subtitle,
.highcharts-root .highcharts-axis-title,
.highcharts-root .highcharts-axis-labels text,
.highcharts-root .highcharts-legend-item text,
.highcharts-root .highcharts-legend-title { fill: #374151 !important; }
.highcharts-root .highcharts-title { fill: #263238 !important; }
.highcharts-root text,
.highcharts-root tspan { fill: #202124 !important; }
.dropdown-menu .divider { height: 1px; margin: 9px 0; background: #e5e5e5; }
@media (max-width: 767.98px) { .hidden-xs { display: none !important; } }
@media (max-width: 767.98px) {
    .side-nav, .side-nav:hover { width: 0 !important; margin-left: 0 !important; }
    body.sidebar-mobile-open .side-nav,
    body.sidebar-mobile-open .side-nav:hover { width: 225px !important; }
    body.sidebar-collapsed main.main,
    body.sidebar-mobile-open main.main { width: 100% !important; margin-left: 0 !important; }
    body.sidebar-mobile-open .side-nav,
    body.sidebar-mobile-open .side-nav:hover { position: fixed; top: 50px; bottom: 0; left: 0; height: calc(100vh - 50px); }
}