.pageTitleWithIcons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.btnLinkPrint {
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin-left: 14px;
}

.btnLinkExcel {
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin-left: 12px;
}

.csSkinField.e-input-group:not(.e-success):not(.e-warning):not(.e-error), .csSkinField.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: transparent;
    border-bottom: 2px solid !important;
    border-bottom-color: #ccc !important;
    color: #111827;
    background-color: #f5f8fb;
    padding: 10px 0 7px 10px;
    border-width: 0 0 2px;
    border-radius: 5px 5px 0 0;
    transition: all 0.2s ease-in-out;
    margin-right: 6px;
}

.csSkinField.e-input-group .e-input-group-icon, .csSkinField.e-input-group.e-control-wrapper .e-input-group-icon {
    background: rgba(0, 0, 0, 0);
    border-color: #d1d5db;
    color: #2c4070;
}

.csSkinField.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .csSkinField.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .csSkinField.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .csSkinField.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .csSkinField.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]), .csSkinField.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]), .csSkinField.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]), .csSkinField.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
    border-color: #2c4070;
}

.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: #0070c0;
    border-color: #0070c0;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #0070c0;
}

.csSkinField .e-dropdownbase .e-list-item.e-active, .csSkinField .e-dropdownbase .e-list-item.e-active.e-hover {
    background-color: #F5F8FB;
    border-color: #fff;
    color: #737373;
}


.csSkinField .e-dropdownbase .e-list-item {
    height: 50px;
    line-height: 24px;
    padding: 12px 16px 12px 16px;
    color: #737373;
    border-bottom: 1px solid #cccccc;
    text-align: left;
}

    .csSkinField .e-dropdownbase .e-list-item:hover {
        background-color: #F5F8FB;
    }

.linkButton {
    color: #0070C0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 21.79px;
    text-decoration: none;
    border: none !important;
    box-shadow: none !important;
}

    .linkButton:hover {
        background: none;
    }

/*grid styles*/
.e-grid {
    border: 2px solid #D4DADF;
    border-radius: 5px;
    font-family: "Open Sans", sans-serif;
}

    .e-grid .e-gridheader {
        border-bottom: 2px solid #D4DADF;
        border-top: 0 solid #D4DADF;
        font-family: "Open Sans", sans-serif;
    }

    .e-grid .e-columnchooserdiv::before, .e-grid .e-excl-filter-icon::before, .e-grid .e-icon-filter::before, .e-grid .e-icon-filter.e-filtered::before, .e-grid .e-resfilter-icon::before, .e-grid-menu .e-columnchooserdiv::before, .e-grid-menu .e-excl-filter-icon::before, .e-grid-menu .e-icon-filter::before, .e-grid-menu .e-icon-filter.e-filtered::before, .e-grid-menu .e-resfilter-icon::before {
        content: "\e7f7";
        font-size: 20px;
    }

    .e-grid .e-headercell, .e-grid .e-detailheadercell {
        background-color: #fff;
    }

    .e-grid .e-headertext {
        color: #2C4070;
        font-size: 16px;
        font-weight: 600;
        text-transform: capitalize;
    }

.e-pager .e-numericitem.e-currentitem {
    border: 1px solid #0070c0;
}

    .e-pager .e-numericitem.e-currentitem, .e-pager .e-numericitem.e-currentitem:hover {
        padding: 3.5px 11px 6.2px 10px;
    }

.e-pager .e-currentitem, .e-pager .e-currentitem:hover {
    background: #e5e7eb;
    color: #0070c0;
    opacity: 1;
}

.e-grid .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
    box-shadow: 0 0 0 1px #0070c0 inset;
}

.e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover {
    background-color: #e5e7eb;
    color: #111827;
}

.e-pager.sf-pager .e-pagercontainer .e-first, .e-pager.sf-pager .e-pagercontainer .e-prev, .e-pager.sf-pager .e-pagercontainer .e-next, .e-pager.sf-pager .e-pagercontainer .e-last {
    font-size: 18px;
    padding: 10.7px 15.48px 11.5px 15.1px;
}

.e-pager.sf-pager .e-numericcontainer a {
    font-size: 18px;
}

.e-pager .e-numericitem.e-currentitem, .e-pager .e-numericitem.e-currentitem:hover {
    padding: 10.7px 15.48px 11.5px 15.1px;
}

.e-pager .e-numericitem.e-currentitem {
    border: none;
}

.e-pager .e-pagercontainer {
    border-style: none;
}

    .e-pager .e-pagercontainer .e-firstpage, .e-pager .e-pagercontainer .e-prevpage, .e-pager .e-pagercontainer .e-firstpagedisabled, .e-pager .e-pagercontainer .e-prevpagedisabled, .e-pager .e-pagercontainer .e-nextpage, .e-pager .e-pagercontainer .e-lastpage, .e-pager .e-pagercontainer .e-nextpagedisabled, .e-pager .e-pagercontainer .e-lastpagedisabled {
        border-right-style: none;
    }

.e-pager .e-pagerdropdown {
    margin-top: -36px;
}

.e-input-group:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
    /*height: 40px;*/
}

.e-pager .e-pagerconstant {
    margin: 5px 0 8px 8px;
}

input.e-input, .e-input-group input, .e-input-group.e-control-wrapper input, .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input {
    height: 38px;
}

.e-pager div.e-parentmsgbar {
    padding-top: 12px;
}

/* SF Card customized as a Dock */

.cardAsDock.e-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2);
    font-family: 'Open Sans', Sans-Serif;
}

    .cardAsDock.e-card .e-card-header {
        padding: 14px 14px 13px;
        background-color: #E3EDF7;
        color: #2C4070;
        font-size: 16px;
    }

cardAsDock.e-btn, .e-css.e-btn {
    padding: 5px;
    border-radius: 5px;
}

cardAsDock.e-card .e-card-content {
    background-color: #fff;
    color: #333;
    padding: 16px;
}

.cardAsDock.e-card .e-card-header .e-card-header-caption .e-card-header-title {
    font-size: var(--text-base);
    font-weight: 700;
}

.cardAsDock.e-card .e-card-header-caption .e-card-header-title {
    color: var(--color-darkblue);
}

.cardAsDock.e-btn {
    margin: 0;
}

    .cardAsDock.e-btn.e-outline {
        background: transparent;
    }

        .cardAsDock .e-btn.e-outline.btnicon {
            border-color: transparent;
        }

        .cardAsDock .e-btn.e-outline:hover, cardAsDock .e-btn.e-outline:focus, cardAsDock .e-btn.e-outline:active {
            background: transparent;
        }

        .cardAsDock .e-btn.e-outline:focus, cardAsDock .e-css.e-btn.e-outline:focus {
            box-shadow: 0 0 0 2px #0070c0;
        }

.cardAsDock.e-card:hover {
    background-color: transparent;
    border-color: transparent;
}

/*Tabstrip*/
.customTabstrip .e-toolbar.e-control[class*=e-toolbar] {
    padding-top: 30px;
    font-family: 'Open Sans', Sans-Serif;
}

.customTabstrip.e-tab .e-tab-header:not(.e-vertical) .e-indicator {
    padding: 29px 15px !important;
    border-radius: 8px 8px 0px 0px;
    border-style: solid;
    border-width: 1px 1px 3px 1px;
    border-color: #ccc #ccc #0070c0 #ccc;
}

.customTabstrip.e-tab .e-tab-header .e-toolbar-item.e-ileft .e-text-wrap, .customTabstrip.e-tab .e-tab-header .e-toolbar-item.e-iright .e-text-wrap {
    height: 25px;
}

.customTabstrip.e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-text-wrap, .customTabstrip.e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-text-wrap {
    height: 30px !important;
}

.customTabstrip.e-tab .e-tab-header .e-indicator {
    background: transparent;
}

.customTabstrip.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    color: #666666;
    margin-bottom: 5px;
}

.customTabstrip.e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text, .customTabstrip.e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-tab-text {
    color: #0070c0;
    margin-bottom: 5px;
}

.customTabstrip.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text, .customTabstrip.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
    color: #0070c0;
}

.customTabstrip.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text, .customTabstrip.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-icon {
    color: #0070c0;
}

.customTabstrip .e-tab-text {
    font-family: 'Open Sans', Sans-Serif !important;
}

/* CSS for placeholder fields only - use system classes [Start]*/
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(300px, 33%), 1fr));
    overflow: hidden;
    padding-bottom: 20px;
    color: #455a64;
}

.lblFieldName {
    text-align: left;
    font-weight: bold;
    font-size: large;
}

.lblFieldInfo {
    display: block;
    font-size: 18px;
    width: 100%;
}

.sampleField {
    padding: 10px;
}
/* CSS for placeholder fields only - use system classes [End]*/

.ddPrintExport .e-dropdown-btn, .e-dropdown-btn.e-btn {
    color: #0070c0;
    border: none;
}

.ddPrintExport.e-dropdown-popup ul .e-item {
    height: 50px;
    line-height: 24px;
    padding: 12px 16px 12px 16px;
    color: #737373;
    border-bottom: 1px solid #cccccc;
    text-align: left;
}

    .ddPrintExport.e-dropdown-popup ul .e-item:hover {
        background: #F5F8FB;
    }

.ddPrintExport.e-dropdown-btn:focus, .ddPrintExport.e-dropdown-btn.e-btn:focus {
    box-shadow: 0 0 0 2px hsla(0, 0%, 100%, .95), 0 0 0 4px #0070c0;
}

.sf-btn-icon {
    position: relative;
    top: 3px;
}

.me-2 {
    margin-inline-end: 0.5rem;
}

.fabric #target .e-dialog {
    height: 306px;
}

.material #target .e-dialog {
    height: 270px;
}

.bootstrap4 #target .e-dialog {
    height: 305px;
}

#target .e-dialog {
    height: 320px;
}

#target {
    height: 500px;
}

.e-dialog {
    background-color: #f5f5f5;
}

    .e-dialog .e-dlg-header-content + .e-dlg-content {
        padding-bottom: 0;
    }

    .e-dialog .e-dlg-header-content + .e-dlg-content {
        /* background-color: #f5f5f5; */
    }

.whiteBlock {
    align-items: center;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%) !important;
    margin: 10px 10px 30px 10px;
    padding: 10px;
}

.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: #0070C0;
    border-color: #0070C0;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #0070C0;
}

.e-footer-content .e-btn.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
    background: #0070C0;
    border-color: #0070C0;
    color: #fff;
}

.btn-save.e-btn.e-primary, .btn-save.e-css.e-btn.e-primary {
    background: #0070C0;
    border-color: #0070C0;
    color: #fff;
    padding: 6px 20px !important;
    border-width: 2px;
    border-radius: 4px;
    margin: 0px 0px 20px 10px;
    font-size: 16px;
    font-weight: 600;
    font-family: "Open Sans", Arial, sans-serif;
}

    .btn-save.e-btn.e-primary:focus, .btn-save.e-css.e-btn.e-primary:focus {
        background: #0070C0;
        border-color: #0070C0;
        color: #fff;
        outline: #fff 0 solid;
        box-shadow: 0 0 0 2px hsla(0, 0%, 100%, .95), 0 0 0 4px #0070C0;
    }

    .btn-save.e-btn.e-primary img, .btn-save.e-css.e-btn.e-primary img {
        margin-right: 6px;
    }

.e-btn.e-flat.e-primary:focus, .e-css.e-btn.e-flat.e-primary:focus {
    box-shadow: 0 0 0 2px hsla(0, 0%, 100%, .95), 0 0 0 4px #0070c0;
}

/* Common sample level styles */
#custom-control {
    margin: auto 0;
    text-align: center;
}

    #custom-control .col-lg-6 {
        margin-bottom: 20px;
    }

.container-color-picker {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.e-container .e-palette .e-row {
    display: flex;
    white-space: nowrap;
    justify-content: space-evenly;
    width: 800px;
}

body:not(.mobile) #custom-control .col-lg-6.e-circle-wrap {
    width: 25%;
}

body:not(.mobile) #custom-control .col-lg-6.e-square-wrap {
    margin-top: 37px;
    width: 22%;
}

body:not(.mobile) #custom-control .col-lg-6.e-rounded-wrap {
    margin-top: 35px;
    width: 20%;
}

body:not(.mobile) #custom-control .col-lg-6.e-scroll-wrap {
    width: 32%;
}
/* Preview area styles */
#custom-control #e-shirt-preview {
    background: transparent url(""https://cdn.syncfusion.com/blazor/images/color-picker/shirt.png"") no-repeat;
    height: 320px;
    margin: 20px auto;
    display: inline-block;
    width: 400px;
    background-position-x: center;
    background-color: rgb(244, 67, 54);
}

#custom-control #e-shirt-preview {
    margin-left: -21%;
    width: 320px;
}

.highcontrast #custom-control #e-shirt-preview {
    background: transparent url(""https://cdn.syncfusion.com/blazor/images/color-picker/shirt-highcontrast.png"") no-repeat;
    background-color: rgb(244, 67, 54);
}
/* Common sample level styles for mobile */
.mobile #custom-control .col-lg-6 {
    width: 55%;
}

    .mobile #custom-control .col-lg-6.e-square-wrap {
        margin-top: 37px;
    }

    .mobile #custom-control .col-lg-6.e-rounded-wrap {
        margin-top: 35px;
    }

@@media only screen and (min-width: 768px) {
    #custom-control .col-sm-12 {
        width: 25%;
    }
}

#custom-control #custom-content {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
}

    #custom-control #custom-content .col-xs-12 {
        flex: 0 0 auto;
    }
/* Circle palette customization */
.circle-palette .e-container .e-palette .e-tile {
    border: 0;
    height: 32px;
    width: 32px;
    border-radius: 20px;
    margin: 4px;
}

.mobile .circle-palette .e-container .e-palette .e-tile {
    height: 32px;
    width: 32px;
}

.circle-palette .e-container .e-palette .e-tile:hover {
    box-shadow: none;
    transform: scale(1.2);
    transition: transform .2s ease-out;
}

.circle-palette .e-container .e-palette .e-tile::before {
    content: '';
    height: 32px;
    width: 32px;
    border-radius: 20px;
    display: inline-block;
    transform: scale(0);
    transition: transform 1.2s ease-in;
}

.circle-palette .e-container .e-palette .e-tile.e-selected::before {
    transform: scale(0.8);
    background-color: #fff;
    transition: transform .2s ease-out;
}

.circle-palette .e-container,
.scroll-palette .e-container {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}
    /* Scrollable palette customization */
    .scroll-palette .e-container .e-custom-palette.e-palette-group,
    .mobile .scroll-palette .e-container .e-custom-palette.e-palette-group {
        height: 125px;
    }

    .scroll-palette .e-container .e-palette .e-tile {
        border: 0;
        color: #fff;
        line-height: 24px;
        font-size: 16px;
        height: 24px;
        width: 35px;
        margin-top: 2px;
        margin-left: 10px;
    }

.mobile .scroll-palette .e-container .e-palette .e-tile {
    height: 24px;
    width: 35px;
}

.scroll-palette .e-container .e-palette .e-tile.e-selected::before {
    content: '\e933';
}

.tailwind .scroll-palette .e-container .e-palette .e-tile.e-selected::before,
.tailwind-dark .scroll-palette .e-container .e-palette .e-tile.e-selected::before {
    content: '\e856';
}

.highcontrast .e-container .e-palette {
    border-bottom-color: transparent;
}

.scroll-palette .e-container .e-palette .e-tile {
    font-family: 'e-icons';
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-transform: none;
}

    .circle-palette .e-container .e-palette .e-tile.e-selected,
    .rounded-palette .e-container .e-palette .e-tile.e-selected,
    .square-palette .e-container .e-palette .e-tile.e-selected,
    .scroll-palette .e-container .e-palette .e-tile.e-selected {
        outline: none;
    }

.e-container.e-color-palette {
    width: auto !important
}

.e-btn.e-outline {
    background: #fff;
    color: #0070C0;
    border-color: #0070C0;
}


.form-control {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.login-form .csSkinField.e-input-group:not(.e-success):not(.e-warning):not(.e-error), .login-form .csSkinField.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: transparent;
    border-bottom: 2px solid !important;
    border-bottom-color: #ccc;
    color: #ccc;
    background-color: #f5f8fb;
    padding: 10px 0 7px 10px;
    border-width: 0 0 2px;
    border-radius: 5px 5px 0 0;
    transition: all 0.2s ease-in-out;
    margin-right: 6px;
}

.login-form .csSkinField.e-input-group .e-input-group-icon, .login-form .csSkinField.e-input-group.e-control-wrapper .e-input-group-icon {
    background: rgba(0, 0, 0, 0);
    border-color: #d1d5db;
    color: #2c4070;
}

.login-form .csSkinField.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .csSkinField.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .csSkinField.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .csSkinField.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .csSkinField.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]), .csSkinField.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]), .csSkinField.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]), .csSkinField.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
    border-color: #2c4070;
}

.csSkinField.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error), .csSkinField.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: #0070c0 !important;
    border-color: #0070c0 !important;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #0070c0 !important;
}

.login-form .csSkinField .e-dropdownbase .e-list-item.e-active, .login-form .csSkinField .e-dropdownbase .e-list-item.e-active.e-hover {
    background-color: #F5F8FB;
    border-color: #fff;
    color: #737373;
}


.login-form .csSkinField .e-dropdownbase .e-list-item {
    height: 50px;
    line-height: 24px;
    padding: 12px 16px 12px 16px;
    color: #737373;
    border-bottom: 1px solid #cccccc;
    text-align: left;
}

    .login-form .csSkinField .e-dropdownbase .e-list-item:hover {
        background-color: #F5F8FB;
    }

.modal-signature .e-input-group:not(.e-success):not(.e-warning):not(.e-error), .modal-signature .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
    height: 40px;
}

.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: #0070c0 !important;
    border-color: #0070c0 !important;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #0070c0 !important;
}

/*.login-form .e-input-group input.e-input, .login-form .e-input-group.e-control-wrapper input.e-input, .login-form .e-float-input input, .login-form .e-float-input.e-control-wrapper input, .login-form .e-input-group textarea.e-input, .login-form .e-input-group.e-control-wrapper textarea.e-input, .login-form .e-float-input textarea, .login-form .e-float-input.e-control-wrapper textarea, .login-form .e-input-group .e-input[disabled], .login-form .e-input-group.e-control-wrapper .e-input[disabled], .login-form .e-input-group.e-disabled input.e-input, .login-form .e-input-group.e-control-wrapper.e-disabled input.e-input, .login-form .e-input-group.e-disabled textarea.e-input, .login-form .e-input-group.e-control-wrapper.e-disabled textarea.e-input {
    color: #111827;
}*/

/*.e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input, .e-float-input input, .e-float-input.e-control-wrapper input, .e-input-group textarea.e-input, .e-input-group.e-control-wrapper textarea.e-input, .e-float-input textarea, .e-float-input.e-control-wrapper textarea, .e-input-group .e-input[disabled], .e-input-group.e-control-wrapper .e-input[disabled], .e-input-group.e-disabled input.e-input, .e-input-group.e-control-wrapper.e-disabled input.e-input, .e-input-group.e-disabled textarea.e-input, .e-input-group.e-control-wrapper.e-disabled textarea.e-input {
    color: #111827;
}*/

.e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input, .e-float-input input, .e-float-input.e-control-wrapper input, .e-input-group textarea.e-input, .e-input-group.e-control-wrapper textarea.e-input, .e-float-input textarea, .e-float-input.e-control-wrapper textarea, .e-input-group .e-input[disabled], .e-input-group.e-control-wrapper .e-input[disabled], .e-input-group.e-disabled input.e-input, .e-input-group.e-control-wrapper.e-disabled input.e-input, .e-input-group.e-disabled textarea.e-input, .e-input-group.e-control-wrapper.e-disabled textarea.e-input {
    color: #111827 !important;
}

.info-cards-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 60px;
    margin-top: 35px;
}

.footer-card-help {
   
}

.e-card .e-card-actions {
    background-color: #0070C0;
    padding: 12px !important;
    border-radius: 0 0 6px 6px;
}

.info-card-caption {
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
}

.e-btn:focus, .e-css.e-btn:focus {
    box-shadow: 0 0 0 2px hsla(0, 0%, 100%, .95), 0 0 0 4px #0070c0 !important;
}

.e-query-builder .e-btn-group input:checked + label.e-btn, .e-query-builder .e-btn-group .e-btn.e-qb-toggle.e-active-toggle {
    background: #0070c0 !important;
    border-color: #0070c0 !important;
}

.modalFilesAttachments .e-upload .e-file-select-wrap {
    display: flex;
    flex-direction: column;
}

.modalFilesAttachments .e-upload {
    background-image: url(images/icons/DropzoneBackground.png);
    background-repeat: no-repeat;
    background-size: contain;
    border: 4px dashed #ccc;
}

.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: #0070C0;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #0070C0;
}

.whiteBlockFilesAttachments {
    align-items: center;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%) !important;
    margin: 10px 10px 40px 10px;
    padding: 15px;
}

.modalFilesAttachments .e-upload {
    border: 4px dashed #ccc;
}

    .modalFilesAttachments .e-upload .e-file-select-wrap {
        padding: 65px 0 20px 12px;
        text-align: center;
    }

.modalFilesAttachments.e-float-input, .e-float-input.e-control-wrapper {
    margin-top: 0px;
}

.modalFilesAttachments .btn-icon-only .e-btn, .btn-icon-only .e-css.e-btn {
    border-color: transparent;
    box-shadow: none;
}

.modalFilesAttachments .btn-primary-action {
    padding: 4px 14px 4px 14px !important;
}

.modalFilesAttachments .e-btn.e-outline.negative {
    background: #fff;
    color: #D23D4F;
    border: 2px solid #D23D4F;
    padding: 4px 14px 4px 14px !important;
    border-radius: 5px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 8px 16px 8px 0;
}

.modalFilesAttachments .img-download {
    position: relative;
    left: 162px;
    bottom: 92px;
}

.modalFilesAttachments .e-upload .e-file-select-wrap .e-file-drop {
    margin-left: 0px;
    margin-top: -24px;
    color: #2C4070;
}

.modalFilesAttachments .container-file-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
}

.modalFilesAttachments .file-info {
    margin: 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.modalFilesAttachments .e-upload .e-file-select-wrap .e-btn, .e-upload .e-upload-actions .e-btn {
    width: 106px;
    margin: 0 auto;
}

.status-error {
    color: #dc2626;
}

.status-success {
    color: #15803d;
}

.modalFilesAttachments .e-float-input, .modalFilesAttachments .e-float-input.e-control-wrapper {
    margin-top: 0px !important;
}

.e-grid .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
    box-shadow: 0 0 0 1px #0070c0 inset !important;
}

.help-header h1 {
    font-size: 2.2rem;
    color: #2C4070;
    margin-bottom: 8px;
    font-weight: 700;
    text-align: center;
}

.contact-section h2 {
    font-size: 1.8rem;
    color: #2C4070;
    margin-bottom: 30px;
}

.e-card > .e-card-image {
    background-repeat: no-repeat;
}

.info-card.e-card {
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

    .info-card.e-card .e-card-image {
        background-size: cover;
        position: relative;
        width: 100%;
        height: 140px !important;
    }

.info-card-caption {
    background-color: #0070C0;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
}

    .info-card-caption.e-card .e-card-actions {
        width: 100%;
    }

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease-in-out;
}

.contact-section {
    text-align: center;
}

.contact-cards-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.contact-card.e-card {
    border: 2px solid #0070C0;
    border-radius: 8px;
    padding: 20px;
    width: 350px;
    text-align: left;
    align-items: stretch;
    background-color: #f9f9f9;
    cursor: pointer;
    font-family: "Open Sans", sans-serif;
}

    .contact-card.e-card > * {
        -ms-flex-pack: start;
        justify-content: left;
    }

.contact-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: left;
}

.contact-card h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #0070C0;
}

.contact-card p {
    color: #333333;
    font-size: 16px;
    font-weight: 600;
    margin: 10px 0;
}

.contact-card .cardText {
    color: #2C4070;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.contact-card .e-card {
    display: block !important;
}

    .contact-card.e-card:active {
        background-color: #f9f9f9;
        border-color: #0070c0;
    }

    .contact-card.e-card:hover {
        background-color: #f9f9f9;
        border-color: #0070c0;
    }


@media (max-width: 768px) {
    .info-cards-container, .contact-cards-container {
        flex-direction: column;
        align-items: center;
    }
}
.details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.back-button {
    align-items: center;
    background-color: #fff;
    border: 2px solid #0070c0;
    border-radius: 6px;
    color: #0070c0;
    cursor: pointer;
    display: flex;
    font-size: 16px;
    font-weight: 600;
    gap: 10px;
    padding: 10px 22px;
}

.is-floating-label {
    position: relative;
    width: 95%;
    margin: 10px 5px;
}
.field-row, .cc-button-row {
    display: flex;
    align-items: center;
}

.remove-link {
    color: #dc3545;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    line-height: 1;
    padding: 0 0 0 10px;
    margin-left: 10px;
}
.action-link {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    padding: 0 10px;
    margin-left: 10px;
}

.attachment-wrapper {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background-color: #F5F5F5;
    overflow: hidden;
}
.attachment-section {
    cursor: pointer;
}
.attachment-header {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #495057;
}
.paperclip {
    background-image: url('../images/icons/overhaul/paperclip.svg');
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
    margin-right: 10px;
}
.file-list-container {
    padding: 10px 20px;
    background-color: #fff;
    border-top: 1px solid #dee2e6;
}
.file-list-item {
    padding: 5px 0;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 8px;
}
    .file-list-item i {
        color: #6c757d;
    }
.file-remove-button {
    margin-left: auto;
    color: #dc3545;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
}
.tag {
    background-color: #D9EAF6;
    border: 1px solid #D9EAF6;
    border-radius: 5px;
    color: #2C4070;
    font-size: 14px;
    font-weight: 700;
    padding: 6px;
}
.e-dialog .e-icon-dlg-close::before {
    right: 7px;
    bottom: 5px;
}
.e-spinner-pane .e-spinner-inner .e-spin-tailwind .e-path-circle {
    stroke: #D9EAF6 !important;
}

.e-spinner-pane .e-spinner-inner .e-spin-tailwind .e-path-arc {
    stroke: #0070c0 !important;
}
*, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
}
.filter-section {
    margin-left: 4px;
}
.login-form .e-float-input input:focus ~ label.e-float-text, .login-form .e-float-input input:valid ~ label.e-float-text, .login-form .e-float-input input ~ label.e-label-top.e-float-text, .login-form .e-float-input input[readonly] ~ label.e-label-top.e-float-text, .login-form .e-float-input input[disabled] ~ label.e-label-top.e-float-text, .login-form .e-float-input input label.e-float-text.e-label-top, .login-form .e-float-input.e-control-wrapper input:focus ~ label.e-float-text, .login-form .e-float-input.e-control-wrapper input:valid ~ label.e-float-text, .login-form .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text, .login-form .e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text, .login-form .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text, .login-form .e-float-input.e-control-wrapper input label.e-float-text.e-label-top, .login-form .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text, .login-form .e-float-input.e-input-focus input ~ label.e-float-text {
    margin-top: -8px;
}
.e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day, .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day {
    background-color: #0070C0 !important;
}

.e-calendar .e-content td.e-today span.e-day, .e-calendar .e-content td.e-focused-date.e-today span.e-day {
    box-shadow: inset 1px 0 #0070C0, inset 0 1px #0070C0, inset -1px 0 #0070C0, inset 0 -1px #0070C0 !important;
}

.e-daterangepicker.e-popup .e-footer .e-apply.e-flat.e-primary:not(:hover):not(:disabled) {
    background-color: #0070C0 !important;
    border-color: #0070C0 !important;
}

.e-btn.e-flat.e-primary:disabled, .e-btn.e-flat.e-primary.e-disabled, .e-css.e-btn.e-flat.e-primary:disabled, .e-css.e-btn.e-flat.e-primary.e-disabled {
    background-color: color-mix(in srgb, #ffffff 50%, #0070c0) !important;
}

.e-calendar .e-content td.e-selected span.e-day {
    background-color: #0070C0 !important;
}
.customTabstrip.e-tab .e-tab-header .e-toolbar-item.e-active {
    padding-bottom: 5px;
}

.edit-pencil-icon {
    position: absolute !important;
    left: 68px !important;
    top: 12px !important;
}
.floatRightSectionButton {
    margin-bottom: 10px;
    margin-top: 27px;
}
/* ============== RESET ANY PREVIOUS TRIANGLE PSEUDOS ============== */
.signup-stepper .step::after,
.signup-stepper .step::before {
    content: none !important;
    display: none !important;
}

/* ===================== CONTAINER ===================== */
.signup-stepper {
    display: flex;
    align-items: stretch;
    border-radius: 6px;
    overflow: hidden; /* rounds both ends */
    font-family: "Open Sans", Arial, sans-serif;
    user-select: none;
    width: 100%; /* keep if you want the whole row filled */
    background: #f7f7f7; /* prevents see-through AA behind seams */
}

    /* ===================== STEP BASE ===================== */
    .signup-stepper .step {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        /* full-row distribution */
        flex: 1 1 0;
        min-width: 0; /* prevents overflow on long labels */
        /* HEIGHT + TYPOGRAPHY */
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        /* SPACING — keep right padding in sync with chevron width */
        /* chevron = 14px; buffer ~ +20px => 34px total on right */
        padding: 0 34px 0 14px; /* 14 tip + ~20 buffer */
        /* VISUALS (inactive) */
        color: #333;
        background: linear-gradient(#ffffff, #f0f0f0);
        border: 1px solid #d5d5d5;
        /* Borders that can cause hairlines; disable inside joins */
        border-right: none; /* chevron join */
        border-top: none; /* avoids top hairline */
        border-left: none; /* avoid double vertical line on non-first steps */
        background-clip: padding-box; /* avoid background bleeding into borders */
        /* CHEVRON SHAPE (RIGHT tip, stubby 14px) */
        clip-path: polygon( 0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100% );
        /* subtle top/bottom bevel like Telerik */
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), inset 0 -1px 0 rgba(0,0,0,0.06);
        z-index: 1; /* baseline layer */
    }

        /* Rounding + borders at the ends */
        .signup-stepper .step:first-child {
            border-left: 1px solid #d5d5d5; /* outer left border only */
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
        }

        .signup-stepper .step:last-child {
            /* last step has NO chevron */
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            border-right: 1px solid #d5d5d5; /* outer right border only */
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
            /* keep top border on the LAST step only (your preference) */
            border-top: 1px solid #d5d5d5;
        }

        /* ===================== DIVIDER / BEVEL BETWEEN STEPS ===================== */
        /* Default: one thin highlight seam */
        .signup-stepper .step + .step {
            box-shadow: inset 2px 0 0 rgba(255,255,255,0.88), inset 0 1px 0 rgba(255,255,255,0.90), inset 0 -1px 0 rgba(0,0,0,0.06);
        }

        /* SPECIAL CASE: when previous step is active, flatten the left edge of this step
	   so no line shows under the arrow tip */
        .signup-stepper .step.active + .step {
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), inset 0 -1px 0 rgba(0,0,0,0.06);
            border-left: none;
            background-clip: padding-box;
        }

        /* ===================== STATES ===================== */
        .signup-stepper .step.active {
            color: #fff;
            text-shadow: 0 1px 0 rgba(0,0,0,0.25);
            border-color: #4f4f4f;
            background: linear-gradient(#8e8e8e 0%, #737373 100%); /* your chosen gradient */
            /* ultra-soft bevel (optional) */
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.12);
            z-index: 2; /* sit slightly above neighbors for crisp edges */
        }

        .signup-stepper .step.completed {
            color: #333;
            background: linear-gradient(#ffffff, #e9e9e9);
            border-color: #cfcfcf;
        }

        .signup-stepper .step.disabled {
            color: #9a9a9a;
            background: linear-gradient(#fafafa, #f3f3f3);
            border-color: #e2e2e2;
            cursor: not-allowed;
        }

        /* ===================== FOCUS (if steps are interactive) ===================== */
        .signup-stepper .step:focus {
            outline: none;
        }

        .signup-stepper .step:focus-visible {
            position: relative;
            z-index: 3;
            box-shadow: inset 0 0 0 2px rgba(0,120,212,0.4);
        }

/* ===================== RESPONSIVE (Blazor) ===================== */
@@media (max-width: 520px) {
    .signup-stepper {
        flex-wrap: wrap;
    }

        .signup-stepper .step {
            height: 28px;
            line-height: 28px;
            font-size: 13px;
            /* scale chevron down (≈ stubby 12px) */
            padding: 0 32px 0 12px;
            clip-path: polygon( 0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100% );
        }

            .signup-stepper .step:last-child {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
}



.i18n-wait {
    opacity: 0;
}

.i18n-ready {
    opacity: 1;
    transition: opacity .05s linear;
}

/*fieldset width adjustment form desktop*/
.grid-fieldwidth {
    max-width: 33%;
}

@media (max-width: 1024px) {
    .grid-fieldwidth {
        max-width: unset;
    }
}
.custom-scroll-fix
{}
/* Only applies when the grid has the .custom-scroll-fix class */
/*.custom-scroll-fix.e-grid .e-gridcontent .e-content.e-yscroll {
    direction: rtl;
}

    .custom-scroll-fix.e-grid .e-gridcontent .e-content.e-yscroll .e-table {
        direction: ltr;
    }

.custom-scroll-fix.e-grid .e-gridheader .e-headercontent .e-table {
    direction: ltr;
}

.custom-scroll-fix.e-grid .e-gridheader .e-headercontent {
    direction: rtl;
}*/