:root {
    --iSolve-Color: #336193;
    --rz-primary: #336193 !important;
    /* App-wide typography: Archivo for all UI text, JetBrains Mono for numbers.
       Radzen reads --rz-text-font-family for every text surface and keeps icons on
       --rz-icon-font-family, so overriding only the text var leaves icon fonts intact. */
    --rz-text-font-family: "Archivo", sans-serif;
    /* Archivo's width axis carries the display/dense roles so there's no second family.
       Apply with font-stretch, never font-variation-settings - the latter is inherited
       and silently beats font-stretch on every descendant. See docs/design-standards.md. */
    --font-width-display: 112%;
    --font-width-dense: 78%;
}
/* header-section styles */
html, body, #app {
    height: 100%;
}

.login-host {
    height: 100vh;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

:root {
    /*    --primary-color: #316094;
*/
    --primary-color: #336193;
}

/* Hover for grids report */
.grid-hover .rz-grid-table tbody tr:hover > td,
.sales-grid-hover .rz-grid-table tbody tr:hover > td {
    background-color: #d6e8ff !important;
    transition: background-color 0.15s ease-in-out;
    font-weight: 600 !important;
    cursor: pointer;
}

.rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data {
    background: #e8f2fc;
    color: var(--iSolve-Color) !important;
}
.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td {
    background: #e8f2fc;
    color: var(--iSolve-Color) !important;
}
.xBtn {
    padding: 5px 9px;
    border-radius: 3px;
    color: white;
    border: 1px solid transparent;
    background-color: var(--primary-color);
    cursor: pointer;
}

    .xBtn:hover, .xBtn:focus, .xBtn:active {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        background-color: var(--primary-color);
        color: white;
    }

    .xBtn:first-child:active {
        background-color: var(--primary-color);
        color: white;
    }

    .xBtn:disabled {
        opacity: 0.65;
        pointer-events: none;
        background-color: var(--primary-color);
        border-color: none;
        color: white;
    }

.rz-form-field-label {
    font-size: 0.70rem !important;
    color: #6c757d;
}

#header.header-section,
#header .search-icon {
    height: 50px;
}

#header #hamburger.icon-menu {
    font-size: 24px;
    float: left;
    line-height: 50px;
}

#header .right-header {
    height: 35px;
    padding: 7px;
    float: right;
}

#header .list {
    list-style: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 35px;
}

#header .header-list {
    padding-left: 15px;
    margin: 0;
}

/* end of text input styles */
/* end of header-section styles */
/* content area styles */
#maintext.main-content {
    height: 100vh;
    z-index: 1000;
}

/* end of content area styles */
/* menu styles */

/*end of button styles */
/* custom code start */
.center {
    text-align: center;
    display: none;
    font-size: 13px;
    font-weight: 400;
    margin-top: 20px;
}


.col-md-12, body {
    padding: 0;
}

.sidebar-menu {
    margin-left: -1px;
}
/*body styles */
body {
    margin: 0;
    height: 100%;
    font-family: "Archivo", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.e-dialog .e-dlg-header {
    white-space: normal !important;
}

.e-tab .e-content {
    padding-top: 10px;
}

/*#mainTab > .e-tab, #mainTab > .e-content {*/
/*   border-left: inset !important;
        border-right: inset !important;
        border-bottom: inset !important;*/
/*border: inset !important;
    border-color: #e3165b !important;
    border-radius: 6px;
    border-spacing: 10px;
    padding: 10px;
}*/

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/*end of body styles */
/* custom code end */

.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
    color: rgba(0, 0, 0, 0.87);
    font-family: "Archivo", sans-serif;
}

.e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text {
    color: rgba(37, 91, 148, 0.85) !important;
}

.e-tab .e-tab-header .e-indicator {
    background: rgba(37, 91, 148, 0.85) !important;
}

.e-tab .e-tab-header:not(.e-vertical) .e-indicator {
    color: rgba(37, 91, 148, 0.85) !important;
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    font-family: "Archivo", sans-serif !important;
}

.e-checkbox-wrapper .e-frame.e-check {
    background-color: rgba(37, 91, 148, 0.85) !important;
}

.e-pager .e-currentitem {
    background-color: rgba(37, 91, 148, 0.85) !important;
}


/* Radzen DataGrid css rules. use class='x-data-grid' */
.x-data-grid .rz-group-header-items {
    display: none !important;
}

.x-data-grid .rz-group-header, .my-custom-grid .rz-column-picker {
    display: block;
}

.x-data-grid .group-total {
    font-size: var(--rz-grid-cell-font-size);
    color: #202020;
    font-weight: bold;
}

.x-data-grid .rz-column-title {
    padding-right: 8px !important;
}

/* Dense role: condensed Archivo buys horizontal room in a fixed-width column header,
   so longer titles fit instead of truncating. Case and tracking are deliberately left
   alone - uppercasing or letter-spacing these would make them wider, not narrower. */
.rz-column-title,
.rz-column-title-content {
    font-stretch: var(--font-width-dense);
    font-weight: 600;
}

.x-grid-summary-row td {
    border-left: none !important;
    border-right: none !important;
    font-weight: bolder;
    background-color: whitesmoke !important;
}
    .x-grid-summary-row td.rz-col-icon {
        background-color: transparent !important; /* exclude this cell */
    }

/* focus-flow.js (Enter / Shift+Enter field navigation) marks every navigable
   field with .focus-flow-field. On the wrapper <div>s the class must not
   introduce a layout box of its own, or the wrapped control is pushed out of
   its parent's flex/inline flow (Radzen switch + label split onto two lines,
   RadzenFormField loses the child it sizes). Bootstrap has no `d-contents`
   utility — its display utilities stop at flex/grid/table — so the rule lives
   here. */
.focus-flow-field {
    display: contents;
}

/* ...except where the class sits directly on the focusable control instead of
   on a wrapper (the Accept/Cancel buttons on the Users page). Those must keep
   generating their own box. */
button.focus-flow-field {
    display: inline-block;
}

/* Radzen's own .rz-form-field-content > * rule strips a native control's own
   border/background/shadow so only the outer form-field chrome renders one
   border, not two. display:contents hides our wrapper's own box, but CSS's
   `>` combinator still matches against the real DOM tree, so once a
   focus-flow-field wrapper sits between .rz-form-field-content and the
   control, that rule no longer reaches the control (e.g. RadzenNumeric,
   RadzenPassword) and its native border shows up as an extra border around
   the field. Mirror the same reset one level deeper. */
.rz-form-field-content > .focus-flow-field > * {
    border: none;
    box-shadow: none;
    background-color: transparent;
    outline: none;
}