/*
  You can add custom CSS rules or import files here.
*/

/* Radzen FormField rounded corners */
.rz-form-field {
    --rz-form-field-filled-border-radius: 16px;
    --rz-input-border-radius: 16px;
}

.rz-form-field .rz-form-field-content,
.rz-form-field .rz-form-field-content:before {
    border-radius: 16px !important;
}

/* Ensure a RadzenDatePicker wrapped in a RadzenFormField stretches to fill the form field
   (the .rz-calendar root is display: inline-block by default and otherwise collapses). */
.rz-form-field .rz-calendar {
    display: block;
    width: 100%;
}

/* DatePicker popup safety net */
.rz-datepicker-popup-container {
    min-width: var(--rz-datepicker-popup-width, 20rem) !important;
    width: var(--rz-datepicker-popup-width, 20rem) !important;
}

/* Ensure calendar body fills popup container */
.rz-datepicker-popup-container .rz-calendar {
    display: block !important;
}

.rz-datepicker-popup-container .rz-calendar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.rz-datepicker-popup-container .rz-calendar-title {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 0.25rem !important;
}

.rz-datepicker-popup-container .rz-calendar-prev,
.rz-datepicker-popup-container .rz-calendar-next {
    flex: 0 0 auto !important;
}

.rz-datepicker-popup-container .rz-calendar-month-dropdown,
.rz-datepicker-popup-container .rz-calendar-year-dropdown {
    min-width: 5rem !important;
    flex-shrink: 0 !important;
}

.rz-datepicker-popup-container .rz-calendar-year-dropdown .rz-dropdown-label,
.rz-datepicker-popup-container .rz-calendar-month-dropdown .rz-dropdown-label {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    padding-right: 1.25rem !important;
    padding-left: 0.5rem !important;
}

.rz-datepicker-popup-container .rz-calendar-year-dropdown,
.rz-datepicker-popup-container .rz-calendar-year-dropdown .rz-dropdown,
.rz-datepicker-popup-container .rz-calendar-year-dropdown .rz-dropdown-label {
    min-width: 5rem !important;
    width: 5rem !important;
}

.rz-datepicker-popup-container .rz-calendar-month-dropdown,
.rz-datepicker-popup-container .rz-calendar-month-dropdown .rz-dropdown,
.rz-datepicker-popup-container .rz-calendar-month-dropdown .rz-dropdown-label {
    min-width: 9rem !important;
    width: 9rem !important;
}

/* Legacy Radzen DatePicker header fallback (for older markup in custom theme) */
.rz-datepicker-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.rz-datepicker-prev,
.rz-datepicker-next {
    float: none !important;
    flex: 0 0 auto !important;
}

.rz-datepicker-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    height: auto !important;
    flex: 1 1 auto !important;
}

.rz-datepicker-title .rz-dropdown,
.rz-datepicker-title .rz-dropdown-label,
.rz-datepicker-title select {
    min-width: 5rem !important;
    width: auto !important;
}

.rz-datepicker-title select:first-of-type {
    min-width: 9rem !important;
}

.rz-datepicker-title select:last-of-type {
    min-width: 5rem !important;
}

.dashboard-date-filter {
    position: relative;
    width: 180px;
}

.dashboard-date-filter-label {
    position: absolute;
    top: 0.4rem;
    left: 0.75rem;
    z-index: 1;
    padding: 0 0.125rem;
    background-color: #ffffff;
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.75rem;
    line-height: 1;
    pointer-events: none;
}

.dashboard-date-filter .rz-datepicker {
    width: 100%;
}

.dashboard-date-filter .rz-datepicker .rz-inputtext {
    width: 100%;
    box-sizing: border-box;
    padding: 1.15rem 2.5rem 0.35rem 0.75rem !important;
    text-overflow: clip;
}

.app-date-filter {
    position: relative;
    width: 100%;
}

.app-date-filter-label {
    position: absolute;
    top: 0.4rem;
    left: 0.75rem;
    z-index: 1;
    padding: 0 0.125rem;
    background-color: #ffffff;
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.75rem;
    line-height: 1;
    pointer-events: none;
}

.app-date-filter .rz-datepicker {
    width: 100%;
}

.app-date-filter .rz-datepicker .rz-inputtext {
    width: 100%;
    box-sizing: border-box;
    padding: 1.15rem 2.5rem 0.35rem 0.75rem !important;
    text-overflow: clip;
}


/* ---------------------------------------------------------------------------
   DataGrid edit-row DatePicker field-wrapper fix (Radzen 10.4.6).
   Inside a DataGrid edit template the picker wrapper still needs explicit
   layout so it sits inline with the other edit cells. */
.rz-datepicker:not(.rz-datepicker-inline):has(> .rz-inputtext) {
    position: relative !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    vertical-align: middle;
}

.rz-datepicker:not(.rz-datepicker-inline):has(> .rz-inputtext) > .rz-inputtext {
    width: 100%;
    box-sizing: border-box;
    padding-right: calc(1rem + var(--rz-datepicker-trigger-icon-width, 1.25rem));
}

.rz-datepicker:not(.rz-datepicker-inline):has(> .rz-inputtext) > .rz-datepicker-trigger {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    width: var(--rz-datepicker-trigger-icon-width, 1.25rem);
    height: var(--rz-datepicker-trigger-icon-height, 1.25rem);
    margin: 0;
    padding: 0;
}


/* Frozen columns styling - Light Theme */
.rz-datatable .frozen-column-1,
.rz-datatable .frozen-column-1 .rz-cell-data,
.rz-grid-table .frozen-column-1 {
    position: sticky !important;
    left: 0 !important;
    z-index: 10 !important;
    box-shadow: 2px 0 4px rgba(0,0,0,0.1);
}

.rz-datatable .frozen-column-2,
.rz-datatable .frozen-column-2 .rz-cell-data,
.rz-grid-table .frozen-column-2 {
    position: sticky !important;
    left: 250px !important;
    z-index: 10 !important;
    box-shadow: 2px 0 4px rgba(0,0,0,0.1);
}

/* Frozen column headers */
.rz-datatable-thead .frozen-column-1,
.rz-grid-table thead .frozen-column-1 {
    position: sticky !important;
    left: 0 !important;
    z-index: 20 !important;
}

.rz-datatable-thead .frozen-column-2,
.rz-grid-table thead .frozen-column-2 {
    position: sticky !important;
    left: 250px !important;
    z-index: 20 !important;
}

.ui-datalist-data > li, .ui-g > div {
    border-width: 0px;
}

.noteTextRow {
    white-space: pre-wrap;
    height:auto;
}

.noteTextRow > .rz-cell-data {
        overflow: visible !important;
        white-space: normal !important;
}

.panel-marketing {
    background: #ffffff;
    border-radius: 4px;
    padding: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

.panel-list-marketing > ul > li{
    border-radius: 4px;
    box-shadow: 0 8px 10px 0 rgb(0 0 0 / 1%);
    padding: 8px;
    border: 0;
    background-color: #ffffff;
}

.panel-list-marketing > ul {
    list-style: none;
    padding: 0rem; 
    margin: 0;
}


h1.rz-heading {
    font-size: 1.25rem !important;
  }

.rz-layout{
    height: 100%;
}

:root:not(.dark-mode) .rz-body {
    background: linear-gradient(180deg, #f4f7fa 0%, #edf2f6 100%);
}


.homepagereport .rz-legend{
    position: relative;
    z-index: 2;
}

.rz-sidebar{
    overflow-x: hidden;
}

.rz-panel-menu{
    padding-bottom:100px;
}

.rz-panel-menu .rz-navigation-item .rz-navigation-menu .rz-navigation-menu li {
    padding-left: 30px;
}

/* Sidebar menu container spacing only (leave interaction/layout to Radzen defaults) */
.rz-sidebar .rz-panel-menu {
    padding: 16px 12px 100px;
}

/* Restored sidebar menu styling (Radzen v9-safe) */
.rz-sidebar {
    background-color: #344753;
}

.rz-sidebar .rz-panel-menu > .rz-navigation-item {
    margin: 10px 0;
    border-bottom: none;
}

.rz-sidebar .rz-panel-menu > .rz-navigation-item > .rz-navigation-item-wrapper,
.rz-sidebar .rz-panel-menu > .rz-navigation-item > .rz-navigation-item-link,
.rz-sidebar .rz-panel-menu > .rz-navigation-item > a {
    background-color: #314452;
    border: 1px solid #6c8594;
    border-radius: 12px;
}

.rz-sidebar .rz-panel-menu > .rz-navigation-item:not(.rz-state-active) > .rz-navigation-item-wrapper:hover,
.rz-sidebar .rz-panel-menu > .rz-navigation-item:not(.rz-state-active) > .rz-navigation-item-link:hover,
.rz-sidebar .rz-panel-menu > .rz-navigation-item:not(.rz-state-active) > a:hover {
    background-color: #3f5664;
    border-color: #7e96a4;
    color: #ffffff;
}

.rz-sidebar .rz-panel-menu > .rz-navigation-item.rz-state-active > .rz-navigation-item-wrapper,
.rz-sidebar .rz-panel-menu > .rz-navigation-item.rz-state-active > .rz-navigation-item-link,
.rz-sidebar .rz-panel-menu > .rz-navigation-item.rz-state-active > a {
    background-color: #e6eaee;
    border-color: #d6dee4;
    color: #23313b;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item .rz-navigation-item-text {
    font-weight: 600;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item .rz-navigation-item-icon:not(.rz-navigation-item-icon-children),
.rz-sidebar .rz-panel-menu .rz-navigation-item .rz-panel-menu-item-icon,
.rz-sidebar .rz-panel-menu .rz-navigation-item .rz-menuitem-icon,
.rz-sidebar .rz-panel-menu .rz-navigation-item .rz-navigation-item-image {
    display: none;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item .rz-navigation-item-icon-children {
    color: #ffffff;
}

.rz-sidebar .rz-panel-menu > .rz-navigation-item.rz-state-active .rz-navigation-item-icon-children {
    color: #607380;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item .rz-navigation-menu {
    padding: 8px 10px 4px;
}

.rz-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item {
    margin: 6px 0;
    border-bottom: none;
}

.rz-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item > .rz-navigation-item-wrapper,
.rz-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item > .rz-navigation-item-link,
.rz-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item > a {
    background-color: #8fb7bf;
    border: 1px solid #9ec3ca;
    border-radius: 7px;
    color: #ffffff;
}

.rz-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item:not(.rz-state-active) > .rz-navigation-item-wrapper:hover,
.rz-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item:not(.rz-state-active) > .rz-navigation-item-link:hover,
.rz-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item:not(.rz-state-active) > a:hover {
    background-color: #7eaab4;
    border-color: #8fbac3;
    color: #ffffff;
}

.rz-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item.rz-state-active > .rz-navigation-item-wrapper,
.rz-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item.rz-state-active > .rz-navigation-item-link,
.rz-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item.rz-state-active > a {
    background-color: #dfe7ea;
    border-color: #d0dbe0;
    color: #1e2a33;
    box-shadow: inset 4px 0 0 #6fa4b1;
}

.rz-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item-active,
.rz-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active,
.rz-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link.rz-navigation-item-wrapper-active {
    background-color: #dfe7ea;
    border-color: #d0dbe0;
    color: #1e2a33;
    box-shadow: inset 4px 0 0 #6fa4b1;
}

.rz-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link.active,
.rz-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item a.rz-navigation-item-link.active,
.rz-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item a[aria-current="page"] {
    background-color: #dfe7ea !important;
    border-color: #d0dbe0 !important;
    color: #1e2a33 !important;
    box-shadow: inset 4px 0 0 #6fa4b1 !important;
}

/* Radzen 10 manages popup show/hide natively via inline display. The old v9
   ".rz-close { display:none !important }" workaround was removed: paired with
   themeHelper.js it permanently hid dropdown/popup panels after first use,
   because the !important rule beat Radzen's inline re-open and nothing ever
   cleared the stuck rz-close class. */

/* Name defined in grid Attributes */ 
div[name="dgProducts"] > div > table > thead > tr > th {
    background-color: #70B5AC !important;
}

fieldset[name="fldsetProducts"] > legend > a > span {
    color: #70B5AC;
    font-weight: bold;
    border-color: blue;
}

fieldset[name="fldsetProductDetails"] > legend > span {
    color: #70B5AC;
    font-weight: bold;
    border-color: #70B5AC;
}

div[name="dgSizes"] > div > table > thead > tr > th {
    background-color: #479cc8 !important;
    font-weight: bold;
}

div[name="QuoteBook"] > div > table > thead > tr > th {
    background-color: #4682B4 !important;
}

    div[name="QuoteBook"] > div > table > thead > tr > th > div > span {
        color: white !important;
        font-weight: bold !important;
    }

fieldset[name="fldsetQuickBook"] > legend > a > span {
    color: #4682B4;
    font-weight: bold;
    border-color: blue;
}


div[name="Unprocessed"] > div > table > thead > tr > th {
    background-color: #FF7F50 !important;
}

    div[name="Unprocessed"] > div > table > thead > tr > th > div > span {
        color: white !important;
        font-weight: bold !important;
    }

fieldset[name="fldsetUnprocessed"] > legend > a > span {
    color: #FF7F50;
    font-weight: bold;
    border-color: blue;
}

div[name="Confirmed"] > div > table > thead > tr > th {
    background-color: #2E8B57 !important;
}

    div[name="Confirmed"] > div > table > thead > tr > th > div > span {
        color: white !important;
        font-weight: bold !important;
    }

fieldset[name="fldsetConfirmed"] > legend > a > span {
    color: #2E8B57;
    font-weight: bold;
    border-color: blue;
}


div[name="OS"] > div > table > thead > tr > th {
    background-color: firebrick !important;
}

    div[name="OS"] > div > table > thead > tr > th > div > span {
        color: white !important;
        font-weight: bold !important;
    }

fieldset[name="fldsetOS"] > legend > a > span {
    color: firebrick;
    font-weight: bold;
    border-color: blue;
}

.rz-datalist-data {
    list-style: none;
    padding: 0.6875rem;
    margin: 0;
}


.createquote{
    position:relative;
}

.createquoteheader{
    position:absolute;
}



#grid_roadmap {
    margin-top: 20px;
    border: 0;
}

#grid_roadmap tr  td{
    border-bottom: 0;
}

    #grid_roadmap .rz-data-row td {
        border-bottom: 1px solid #dfe7eb;
        border-right: 0;
    }

    #grid_roadmap .rz-data-row td:nth-child(2) {
        padding-top: 10px;
        padding-bottom: 10px;
    }


    #grid_roadmap tr:not(.rz-data-row) td {
        border-right: 0;
        border-top: 1px solid #dfe7eb;
        border-bottom: 1px solid #dfe7eb;
        background-color: #efefef;
    }


    #grid_roadmap thead{
        display: none;
    }

.roadmap_dl li{
    border: 0;
}



.rdm_row {
    display: flex;
    align-items: center;
}


.rdm_row > div {
    text-align: center;
}


.rdm_tag {
    background-color: #497fa3;
    color: #fff;
    font-size: 12px;
    position: relative;
    height: 20px;
    margin-left: 10px;
    line-height: 20px;
    padding-left: 8px;
    padding-right: 8px;
    margin-right: 10px;
}


    .rdm_tag:before {
        content: "";
        border-width: 10px;
        border-color: transparent #497fa3 transparent transparent;
        border-style: solid;
        position: absolute;
        left: -20px;
        top: 0;
    }

    .rdm_tag:after {
        content: "";
        width: 4px;
        height: 4px;
        background-color: #fff;
        position: absolute;
        left: -3px;
        top: 8px;
        z-index: 10001;
        border-radius: 50%;
    }



.rdm_title {
    color: #333;
    font-size: 18px;
}

.SSISDarkHeader {
    background-color: #c8cfd3 !important;
}

.rz-header.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--rz-header-background-color);
    min-height: var(--rz-header-min-height);
    border-bottom: var(--rz-header-border);
    color: var(--rz-header-color);
    box-shadow: var(--rz-header-shadow);
}


.edit-homepage-edit{
    position:absolute;
    right:25px;
    top:10px;
    cursor:pointer;
}

.footer-align-top
{
    vertical-align: top;
}
:root:not(.dark-mode) {
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-base: #dadfe2;
    --rz-base-50: #ffffff;
    --rz-base-100: #f6f7fa;
    --rz-base-200: #e9edf0;
    --rz-base-300: #dadfe2;
    --rz-base-400: #c1c9cb;
    --rz-base-500: #95a4a8;
    --rz-base-600: #77858b;
    --rz-base-700: #545e61;
    --rz-base-800: #3a474d;
    --rz-base-900: #28363c;
    --rz-base-light: #e9edf0;
    --rz-base-lighter: #f6f7fa;
    --rz-base-dark: #77858b;
    --rz-base-darker: #28363c;
    --rz-primary: #598087;
    --rz-primary-light: #6d8f95;
    --rz-primary-lighter: rgba(89, 128, 135, 0.16);
    --rz-primary-dark: #52767c;
    --rz-primary-darker: #436065;
    --rz-secondary: #80a4ab;
    --rz-secondary-light: #8fafb5;
    --rz-secondary-lighter: rgba(128, 164, 171, 0.2);
    --rz-secondary-dark: #76979d;
    --rz-secondary-darker: #607b80;
    --rz-info: #2cc8c8;
    --rz-info-light: #4ed1d1;
    --rz-info-lighter: rgba(44, 200, 200, 0.2);
    --rz-info-dark: #25a8a8;
    --rz-info-darker: #219696;
    --rz-success: #5dbf74;
    --rz-success-light: #77c98a;
    --rz-success-lighter: rgba(93, 191, 116, 0.16);
    --rz-success-dark: #4ea061;
    --rz-success-darker: #468f57;
    --rz-warning: #fac152;
    --rz-warning-light: #fbcb6e;
    --rz-warning-lighter: rgba(250, 193, 82, 0.2);
    --rz-warning-dark: #d2a245;
    --rz-warning-darker: #bc913e;
    --rz-danger: #f9777f;
    --rz-danger-light: #fa8d93;
    --rz-danger-lighter: rgba(249, 119, 127, 0.2);
    --rz-danger-dark: #d1646b;
    --rz-danger-darker: #bb595f;
    --rz-on-base: #28363c;
    --rz-on-base-light: #28363c;
    --rz-on-base-lighter: #28363c;
    --rz-on-base-dark: #ffffff;
    --rz-on-base-darker: #ffffff;
    --rz-on-primary: #ffffff;
    --rz-on-primary-lighter: #598087;
    --rz-on-primary-light: #ffffff;
    --rz-on-primary-dark: #ffffff;
    --rz-on-primary-darker: #ffffff;
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-lighter: #80a4ab;
    --rz-on-secondary-light: #ffffff;
    --rz-on-secondary-dark: #ffffff;
    --rz-on-secondary-darker: #ffffff;
    --rz-on-info: #ffffff;
    --rz-on-info-lighter: #2cc8c8;
    --rz-on-info-light: #ffffff;
    --rz-on-info-dark: #ffffff;
    --rz-on-info-darker: #ffffff;
    --rz-on-success: #ffffff;
    --rz-on-success-lighter: #5dbf74;
    --rz-on-success-light: #ffffff;
    --rz-on-success-dark: #ffffff;
    --rz-on-success-darker: #ffffff;
    --rz-on-warning: #ffffff;
    --rz-on-warning-lighter: #fac152;
    --rz-on-warning-light: #ffffff;
    --rz-on-warning-dark: #ffffff;
    --rz-on-warning-darker: #ffffff;
    --rz-on-danger: #ffffff;
    --rz-on-danger-lighter: #f9777f;
    --rz-on-danger-light: #ffffff;
    --rz-on-danger-dark: #ffffff;
    --rz-on-danger-darker: #ffffff;
    --rz-card-border-radius: 12px;
    --rz-card-background-color: #F8FAFC;
}