.dx-form-group-with-caption {
    padding-top: 15px;
}

    .dx-form-group-with-caption > .dx-form-group-content {
        padding-top: 0px;
    }

.dx-tab {
    padding: 1px 2px;
    min-width: 60px;
    vertical-align: bottom;
}

.dx-tab-text {
    font-size: 12px;
    line-height: 20px;
    max-width: 110px;
    white-space: normal;
}

.dx-form-group-content .dx-item .dx-box-flex {
    border-bottom: solid 0.5px #dfdfdf;
    min-height: 77px;
}

    .dx-form-group-content .dx-item .dx-box-flex .dx-box-item-content {
        transition: background 0.5s ease-in-out;
    }

        .dx-form-group-content .dx-item .dx-box-flex .dx-box-item-content:hover {
            background: aliceblue;
        }

.dx-form-group-content .dx-field-item {
    padding-left: 10px;
    padding-top: 10px;
}

.dx-field-item-label-location-top {
    padding: 0px 0 3px;
}

.dx-field-item-label-text {
    color: #7d7064;
}

.MasterData_Checkbox {
    position: relative;
}

    .MasterData_Checkbox label:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        cursor: pointer;
    }

.dx-button .dx-icon {
    color: inherit;
}

.site-navbar .navbar-header .navbar-brand-logo, .site-menubar-fold.site-menubar-hover .site-navbar .navbar-header .navbar-brand-logo {
    height: 50px;
}

.site-navbar-small .site-navbar .navbar-brand {
    padding: 8px;
}

.site-menubar-fold.site-menubar-hover .site-navbar .navbar-brand-logo {
    height: 50px;
}


.site-navbar {
    background-color: #fff;
    width: 100vw;
    padding: 0 15px;
}

.page-header-bordered, .page {
    background-color: #f5f5f5;
}

.dx-form > .dx-layout-manager > .dx-widget > .dx-box-flex.dx-collection {
    position: relative;
    padding-bottom: 50px;
}

.dx-form .dx-layout-manager .dx-box-flex.dx-collection .dx-last-col.dx-field-button-item {
    position: absolute;
    top: calc(100% - 40px);
    left: 0;
    padding: 0;
}

.site-navbar .navbar-header .navbar-brand-logo
{
    height:50px;
}

button {
    border:0px!important;
}

.page-header-bordered {
    margin-bottom:0px;
}



h1, h2, h3,h4 {
    color: #6d6e71;
}
.dx-theme-material-typography h3 {
    font-size: 20px !important;
    letter-spacing: normal;
}

.dx-theme-material-typography h2 {
    font-size: 22px !important;
    letter-spacing: normal;
}
.dx-theme-material-typography h4 {
    font-size: 18px !important;
    letter-spacing: normal;
    
}

.dx-theme-material-typography h5 {
    font-size: 14px !important;
    letter-spacing: normal;
}

.site-navbar {
    background-color: #fff;
}

.site-navbar-small .site-navbar .navbar-brand {
    height:4em;
    padding: 10px;
    padding-left: 25px;
}

.site-navbar .navbar-header .hamburger:before, .site-navbar .navbar-header .hamburger:after, .site-navbar .navbar-header .hamburger .hamburger-bar {
    background-color: #757575;
}

.site-navbar .navbar-header .navbar-toggler {
    color: #757575;
}

.dx-tab {
    padding: 1px 10px;
    vertical-align: bottom;
    padding-top:20px;
}
/*
.dx-button .dx-icon {

    color:white;
}
    */

.dx-item.dx-tab.dx-tab-selected .dx-icon {
    color: #22854a;
}


.dx-item.dx-tab .dx-icon {
    color: rgba(51, 51, 51, 0.54);
}





.dx-form-group-with-caption .dx-form-group-content {
    padding-bottom: 0px;
    padding-top: 0px;
    margin-top: 6px;
}

.dx-button-mode-text.dx-button-success .dx-icon {
    color: #666;
}

.noborder .dx-form-group-content {
    border: 0px;
}

.navbar-toolbar .nav-link {
    padding-top: 18px;
    padding-bottom: 18px;
    line-height: 20px;
}

.site-menubar .dx-treeview-item .dx-treeview-item-content span {
    color: rgba(158, 158, 158, 0.9) !important;
}

.site-menubar .dx-treeview-toggle-item-visibility {
    font: 14px/1 DXIcons;
    font-size: 24px;
    text-align: center;
    line-height: 24px;
    color: rgba(158, 158, 158, 0.9) !important;
    width: 24px;
    height: 48px;
    top: 0;
    left: 0;
}

.dx-datagrid .dx-row-lines > td {
    border-bottom: 1px solid #ccc;
}

/* Tighten grid cell padding beyond what the compact theme provides — the
   default compact-build cell padding is still generous for our dense
   condition-assessment grids. 4px/8px keeps text legible while fitting
   ~30% more rows on a 1080p viewport. */
.dx-datagrid .dx-data-row > td,
.dx-datagrid-rowsview .dx-data-row > td {
    padding: 4px 8px;
}

.dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    color: #286e3c;
    font-weight:bold;
    padding: 4px 8px;
}

.dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    border-bottom: 1px solid #ccc;
}



.dx-logo {
    height:120px;
    padding:10px;
    background-color:white;
    margin:auto;
    text-align:center;

}

.dx-logo img {
    
    max-height:100px;
    width:auto;
    margin:auto;
    max-width: 240px;


}

.dx-menubar {
    position: fixed;
   overflow-y:auto;
   overflow-x:hidden;
    z-index: 1400;
    width: 260px;
    height: 100%;
    height: calc(100%);
    font-family: Arial;
    color: white!important;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: width .25s, opacity .25s, -webkit-transform .25s;
    transition: width .25s, opacity .25s, transform .25s;
    transition: width .25s, opacity .25s, transform .25s, -webkit-transform .25s;
    background-color:#22854a;

}

    .dx-menubar .dx-widget {
        color:#fff;
        line-height:1em;
    }

    .dx-menubar .dx-treeview-item {
        padding: 10px 4px;
        min-height: 24px;
        line-height: 1em;
    }

    .dx-menubar .dx-treeview-item.dx-state-hover {
        background-color: rgba(0,0,0,.04);
        color: rgba(255,255,255,.87);
    }
    .dx-page {
        margin-left: 260px;
        transition: margin-left .25s;
    }

.dx-menubar .dx-treeview-toggle-item-visibility {
    line-height: 12px;
}

/* Fix menu alignment and position expand icons on right */
.dx-menubar .dx-treeview-item {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

.dx-menubar .dx-treeview-item-content {
    flex-grow: 1;
    text-align: left;
}

.dx-menubar .dx-treeview-toggle-item-visibility {
    position: relative;
    order: -1;
    margin-left: auto;
    margin-right: 0;
}

/* Menu divider — renders as a thin translucent horizontal rule between sections.
   The parent tree-item is kept but stripped of hover/expand affordances. */
.dx-menubar .menu-divider-row,
.dx-menubar .menu-divider-row:hover,
.dx-menubar .menu-divider-row.dx-state-hover {
    background: transparent !important;
    cursor: default !important;
    padding: 0 !important;
    min-height: 0 !important;
}
.dx-menubar .menu-divider-row .dx-treeview-toggle-item-visibility {
    display: none !important;
}
.dx-menubar .menu-divider {
    height: 1px;
    margin: 6px 12px;
    background: rgba(255, 255, 255, 0.15);
}

/* Menu item icon — inherit link colour so it reads white on the dark nav. */
.dx-menubar .dx-treeview-item .dx-icon {
    color: inherit;
}

/* Nested sub-menu items — tighter vertical rhythm and slightly smaller text so
   a long admin list or a big template collection doesn't overwhelm the sidebar.
   !important is needed because the .dx-menubar .dx-treeview-item rules above
   also set padding / min-height (without the nested-node qualifier) and win on
   source order with equal specificity otherwise. */
.dx-menubar .dx-treeview-node .dx-treeview-node .dx-treeview-item,
.dx-menubar .dx-treeview-node-container .dx-treeview-node-container .dx-treeview-item {
    padding: 8px 4px !important;
    min-height: 20px !important;
    font-size: 13px !important;
}
.dx-menubar .dx-treeview-node .dx-treeview-node .dx-treeview-item-content,
.dx-menubar .dx-treeview-node-container .dx-treeview-node-container .dx-treeview-item-content {
    font-size: 13px !important;
}
.dx-menubar .dx-treeview-node .dx-treeview-node .dx-treeview-item-content span,
.dx-menubar .dx-treeview-node-container .dx-treeview-node-container .dx-treeview-item-content span {
    font-size: 13px !important;
}

.breadcrumb {
    background-color:transparent;
}

.dx-theme-material-typography h2 {
    font-weight: 300;
    font-size: 28px;
    letter-spacing: -.5px;
}

.btn-success {
    background-color: #22854a;
    border-radius: 2px;
    background-color: #22854a;
    color: #fff;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.24);
    box-shadow: 0 1px 3px rgba(0,0,0,.24);
    border:0px;
}

.panel-action {
    float:right;

    font-size:18px;

}

.panel-body {
    clear:both;
}

.dx-form-group-caption {
    font-size: 18px;
}

.dx-form-group-with-caption > .dx-form-group-content {
    border-top: 1px solid #22854a;
}

.dx-popup-content {
    overflow-y: scroll;
}

.dx-popup-content { overflow-y: auto; }

.dx-button {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -moz-user-select: none;
    -ms-user-select: none;
    border: 1px solid transparent;
    line-height: 1.5rem;

    font-size: 0.8rem;
    
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    height: 2.5rem;
}

.btn {
    font-size: 0.8rem;
}


.dx-item-content .dx-button {
    padding:0px;
}

/* ========== Menu Toggle & Zoom Controls ========== */

/* Top Right Controls Container */
#topRightControls {
    position: fixed;
    top: 16px;
    right: 25px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 1500;
}

/* Menu Toggle Button */
#menuToggleBtn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #22854a;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
}

#menuToggleBtn:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 8px -2px rgba(0,0,0,0.25), 0 8px 14px 1px rgba(0,0,0,0.18), 0 3px 22px 3px rgba(0,0,0,0.15);
}

#menuToggleBtn .dx-icon {
    font-size: 24px;
}

/* Scanner Ready Indicator - same style as menuToggleBtn */
#scannerReadyIndicator {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #22854a;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
}

#scannerReadyIndicator:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 8px -2px rgba(0,0,0,0.25), 0 8px 14px 1px rgba(0,0,0,0.18), 0 3px 22px 3px rgba(0,0,0,0.15);
}

#scannerReadyIndicator .dx-icon {
    font-size: 24px;
}

/* Menu Hidden State */
body.menu-hidden .dx-menubar,
html.menu-hidden .dx-menubar {
    transform: translateX(-100%);
}

body.menu-hidden .dx-page,
html.menu-hidden .dx-page {
    margin-left: 0;
}

/* Mobile: menu hidden by default, toggle still works */
@media (max-width: 768px) {
    .dx-page { margin-left: 0 !important; }
    .dx-dashboard-container { left: 0 !important; }
}

body.menu-hidden .dx-dashboard-container {
    left: 0 !important;
}

.dx-tabs {
    padding: 0;
    background-color: #f5f5f5 !important;
    position: relative;
    border-bottom:1px solid #ccc;
}
.dx-tab {
    padding: 1px 10px;
    vertical-align: bottom;
    padding-top: 20px;
    background-color:unset;
}

.dx-tab-content, .dx-tab-text {
    vertical-align: middle;
    text-transform: uppercase;
    line-height: 24px;
    font-weight: 500;
}

.quick_jump { 
    display:none;
}

.dx-button-text {
    display: inline;
    vertical-align: middle;
    line-height: 23px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: .04em;
}

.dx-form-group-with-caption > .dx-form-group-content {
    border-top: 1px solid #22854a;
}

.noborder .dx-form-group-content {
    border: 0px;
}

.dx-form-group-with-caption .dx-form-group-content {
    padding-bottom: 0px;
    padding-top: 0px;
    margin-top: 6px;
}

.dx-button {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -moz-user-select: none;
    -ms-user-select: none;
    border: 1px solid transparent;
    line-height: 1.5rem;
    font-size: 0.8rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    height: 2.5rem;
}

/* Ensure button icon and text stay on same line */
.dx-button-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Theme: replace Bootstrap default blue (#007bff) with brand orange.
   The bundled dx.bundle.css carries vanilla Bootstrap whose --primary is
   #007bff, so .text-primary / .bg-primary / .btn-primary / default <a>
   links all bleed blue across the app. The brand accent (#fb8c00 / hover
   #e68900) is already used in wwwroot/skins/orange.css and _LayoutPre.cshtml
   — these overrides bring everything else into line.

   Province dashboard pages (.province-dashboard) keep their green primary
   because Tailwind generates `.province-dashboard .text-primary { … }`
   which has higher selector specificity than the rules below — Tailwind
   wins inside the dashboard, this override wins everywhere else.
   ───────────────────────────────────────────────────────────────────────── */
:root {
    --blue: #fb8c00;
    --primary: #fb8c00;
}

.text-primary {
    color: #fb8c00 !important;
}

a.text-primary:hover,
a.text-primary:focus {
    color: #e68900 !important;
}

.bg-primary {
    background-color: #fb8c00 !important;
}

.border-primary {
    border-color: #fb8c00 !important;
}

.btn-primary {
    color: #fff;
    background-color: #fb8c00;
    border-color: #fb8c00;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #e68900;
        border-color: #e68900;
    }

    .btn-primary:focus,
    .btn-primary.focus,
    .btn-primary:not(:disabled):not(.disabled):active:focus,
    .btn-primary:not(:disabled):not(.disabled).active:focus,
    .show > .btn-primary.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(251, 140, 0, 0.5);
    }

    .btn-primary.disabled,
    .btn-primary:disabled {
        color: #fff;
        background-color: #fb8c00;
        border-color: #fb8c00;
    }

.btn-outline-primary {
    color: #fb8c00;
    border-color: #fb8c00;
}

    .btn-outline-primary:hover,
    .btn-outline-primary:not(:disabled):not(.disabled):active,
    .btn-outline-primary:not(:disabled):not(.disabled).active,
    .show > .btn-outline-primary.dropdown-toggle {
        color: #fff;
        background-color: #fb8c00;
        border-color: #fb8c00;
    }

    .btn-outline-primary:focus,
    .btn-outline-primary.focus {
        box-shadow: 0 0 0 0.2rem rgba(251, 140, 0, 0.5);
    }

.badge-primary {
    color: #fff;
    background-color: #fb8c00;
}

.alert-primary {
    color: #844800;
    background-color: #fee4c2;
    border-color: #fcd6a8;
}

.page-link {
    color: #fb8c00;
}

.page-item.active .page-link {
    background-color: #fb8c00;
    border-color: #fb8c00;
}

.list-group-item.active {
    background-color: #fb8c00;
    border-color: #fb8c00;
}

/* Default anchor — Bootstrap's base `a { color: #007bff }` from the bundle.
   Skin file already overrides this to #fb8c00 but only when the skin CSS
   is dynamically loaded; nailing it here removes the blue flash on pages
   that never trigger the skin loader. */
a {
    color: #fb8c00;
}

    a:hover,
    a:focus {
        color: #e68900;
    }

/* Tailwind utilities scoped to .province-dashboard set their own colour
   palette; the above link override would otherwise win on !important via
   Bootstrap inheritance. Re-anchor anchors inside the province dashboard
   so they inherit the surrounding text colour like the rest of the
   Material-style cards do. */
.province-dashboard a {
    color: inherit;
}

    .province-dashboard a.text-primary,
    .province-dashboard a:hover.text-primary {
        color: inherit;
    }

.dx-button-text {
    white-space: nowrap !important;
}