/* Settings Grid */

@media (max-width: 1240px) {
    .settings-grid {
        max-width: 734px !important;
    }
}

@media (max-width: 1200px) {
    .settings-grid {
        max-width: 660px !important;
    }
}

@media (max-width: 576px) {
    .settings-grid {
        max-width: 452px !important;
    }
}

@media (max-width: 480px) {
    .settings-grid {
        max-width: 365px !important;
    }
}


@media (max-width: 1240px) {
    .settings-grid.register-instrument-grid {
        max-width: 758px !important;
    }
}

.settings-grid.register-instrument-grid .e-grid .e-gridheader .e-headercontent .e-table.e-sortfilter {
    width: 758px !important;
}

.settings-grid .e-grid {
    border-style: none none none !important;
    font-family: 'MATTER' !important;
    border-collapse: separate;
    border-spacing: 0 10px !important;
    /* Adds margin between rows */
    overflow: hidden;
    padding: 1px;
    min-height: 200px;
}

.settings-grid .e-grid .e-headercelldiv {
    background-color: #F3F3F3;
    color: #2D2D2D;
    font-family: Matter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    margin: 0px;
}

/*Filter icon in settings page SFgrid*/
/* Make header cell position relative for absolute positioning */
.settings-grid .e-grid .e-headercell {
    position: relative !important;
}

/* Position the filter icon absolutely to the LEFT */
.settings-grid .e-grid .e-headercell .e-filtermenudiv.e-icon-filter {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    margin: 0 !important;
    float: none !important;
}

/* Position the sort icon absolutely to the RIGHT */
.settings-grid .e-grid .e-headercell .e-sortfilterdiv.e-icons {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    margin: 0 !important;
    float: none !important;
}

/* Add left padding to header text to make room for filter icon */
.settings-grid .e-grid .e-headercell .e-headercelldiv {
    padding-left: 28px !important;
    padding-right: 28px !important;
    /* Add right padding for sort icon */
}

/* Ensure text content is visible and properly positioned */
.settings-grid .e-grid .e-headercell .e-headercelldiv>div[e-mappinguid] {
    display: block !important;
    width: 100% !important;
}

/* Keep header text in normal flow */
.settings-grid .e-grid .e-headercell .e-headertext {
    position: relative !important;
    z-index: 1 !important;
}

/* When filtered, maintain same positioning on LEFT */
.settings-grid .e-grid .e-headercell.e-filtered .e-filtermenudiv.e-icon-filter {
    position: absolute !important;
    left: 8px !important;
}

/* When sorted, maintain same positioning on RIGHT */
.settings-grid .e-grid .e-headercell.e-sorted .e-sortfilterdiv.e-icons {
    position: absolute !important;
    right: 8px !important;
}

/*Filter icon in settings page SFgrid ends*/

.settings-grid .e-grid .e-gridheader {
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-radius: 12px;
}

.settings-grid .e-grid .e-gridheader .e-headercell {
    padding-top: 18px;
    padding-bottom: 18px;
}

.settings-grid .e-grid.e-default:not(.e-rtl) tr td:first-child:not(.e-xlsel-left-border, .e-fixedfreeze.e-freezeleftborder, .e-rowcell-firstchild, .e-addfreezefirstchildborder, .e-leftfreeze.e-freezeleftborder.e-focused),
.settings-grid .e-grid.e-default:not(.e-rtl) tr th.e-headercell:first-child:not(.e-firstcell, .e-headercell.e-frozen-left-border, .e-leftfreeze.e-freezeleftborder.e-focused),
.settings-grid .e-grid.e-default:not(.e-rtl) tr th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
    border-left-width: 0px;
    padding-left: 8px;
}

.settings-grid .e-grid .e-gridcontent .e-table {
    border-spacing: 0 8px !important;
}

.settings-grid td {
    background-color: #fff;
    padding: 12px 16px;
    font-family: 'MATTER' !important;
    font-size: 14px;
    vertical-align: middle;
}

.settings-grid tr {
    box-shadow: inherit !important;
    margin-top: 10px;
}

.settings-grid td {
    border-right: none;
    /* remove duplicate borders between cells */
    border-left: none;
    border-top: 1px solid #E9E9E9 !important;
    border-bottom: 1px solid #E9E9E9 !important;
}

.settings-grid td:nth-child(2) {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-left: 1px solid #E9E9E9 !important;
}

.settings-grid td:last-child {
    border-right: 1px solid #E9E9E9 !important;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.settings-grid .e-emptyrow td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-left: 1px solid #E9E9E9 !important;
}

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

.settings-grid .e-grid .e-row:hover td:not(.e-selectionbackground) {
    border-top: 1px solid rgba(242, 232, 255, 0.60) !important;
    border-bottom: 1px solid rgba(242, 232, 255, 0.60) !important;
    background-color: rgba(242, 232, 255, 0.60) !important;
}

.settings-grid .e-grid .e-row:hover td:not(.e-selectionbackground):nth-child(2) {
    border-left: 1px solid rgba(242, 232, 255, 0.60) !important;
}

.settings-grid .e-grid .e-row:hover td:not(.e-selectionbackground):last-child {
    border-right: 1px solid rgba(242, 232, 255, 0.60) !important;
}

.settings-grid .e-grid td.e-selectionbackground {
    border-top: 1px solid rgba(89, 30, 163, 0.35) !important;
    border-bottom: 1px solid rgba(89, 30, 163, 0.35) !important;
    background-color: rgba(242, 232, 255, 0.60) !important;
}

.settings-grid .e-grid td.e-selectionbackground:nth-child(2) {
    border-left: 1px solid rgba(89, 30, 163, 0.35) !important;
}

.settings-grid .e-grid td.e-selectionbackground:last-child {
    border-right: 1px solid rgba(89, 30, 163, 0.35) !important;
}

.settings-grid .e-grid td {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.settings-grid .e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: #380577;
    border-color: #380577;
    color: #fff;
}

.settings-grid .e-checkbox-wrapper:hover .e-frame.e-stop,
.e-css.e-checkbox-wrapper:hover .e-frame.e-stop {
    background-color: #380577;
    border-color: #380577;
}

.settings-grid .e-checkbox-wrapper:hover .e-frame.e-check,
.e-css.e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: #380577;
    border-color: #380577;
    color: #fff;
}

.settings-grid .e-checkbox-wrapper .e-frame.e-stop,
.e-css.e-checkbox-wrapper .e-frame.e-stop {
    background-color: #380577;
    border-color: #380577;
    color: #fff;
}


.settings-grid .e-grid .e-gridheader {
    border-bottom-style: solid;
    border-bottom-width: 0;
    border-top-style: solid;
    border-top-width: 1px;
}

.settings-grid .e-control,
.e-css,
.e-error {
    font-family: 'MATTER' !important;
}

/* Settings Gird Pagination Start */
.settings-grid .e-grid .e-pager {
    border-style: none;
    border-width: 1px;
    display: inline-block;
    font-size: 14px;
    white-space: normal;
    width: 100%;
}

@media (max-width: 769px) {
    .e-pager {
        padding: 7px 8px !important;
    }
}

.settings-grid .e-grid .e-pager .e-pagercontainer {
    float: right;
    border-width: 0;
    display: inline-block;
    overflow: hidden;
    border-spacing: 2px;
}

.settings-grid .e-grid .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;
    border-right-width: 1px;
    display: inline-block;
    margin-right: 5px;
    margin-top: 0;
    min-width: 26px;
    padding: 7px;
    border: 2px solid #dee2e6;
}

.settings-grid .e-grid .e-pager .e-pagercontainer .e-numericcontainer a.e-link.e-numericitem.e-spacing.e-currentitem.e-active {
    background: rgba(242, 232, 255, 1) !important;
}

.settings-grid .e-grid .e-pager .e-parentmsgbar {
    font-weight: 400;
    font-size: 12px;
    float: left;
    padding-top: 0;
}

@media (max-width: 769px) {
    .settings-grid .e-grid .e-pager div.e-parentmsgbar {
        text-align: left !important;
    }

    .settings-grid .e-grid .e-pager .e-parentmsgbar span.e-pagecountmsg {
        display: inline-block !important;
    }
}

.settings-grid .e-grid .e-pager .e-numericitem {
    border-right-style: none;
    border-right-width: 1px;
    display: inline-block;
    line-height: 1;
    margin-right: 0;
    min-width: 26px;
    padding: 4px;
    text-align: center;
    border: 2px solid #dee2e6;
    margin-right: 4px;
    border-radius: 2px;
    color: #495057;
}

.settings-grid .e-grid .e-pager .e-numericitem:hover {
    color: #380577;
    opacity: 1;
}

.settings-grid .e-grid .e-pager .e-numericitem.e-currentitem,
.e-pager .e-numericitem.e-currentitem:hover {
    border-right-color: transparent;
    padding: 5px;
}

.settings-grid .e-grid .e-pager.sf-pager .e-numericcontainer a {
    font-size: 12px;
    font-weight: 400;
    padding: 5px;
}

.settings-grid .e-grid .e-pager div.e-icons.e-disable {
    color: #495057;
}

.settings-grid .e-grid .e-pager div.e-icons.e-pager-default {
    color: #380577;
}

.settings-grid .e-grid .e-pager .e-pp,
.e-pager .e-np,
.e-pager .e-pp:hover,
.e-pager .e-np:hover {
    font-size: 10px;
    padding: 7px;
    font-weight: bold;
    letter-spacing: 0;
}

/*  All selectors scoped to settings-grid */
.settings-grid .e-grid .e-pager .e-mfirst,
.settings-grid .e-grid .e-pager .e-mprev,
.settings-grid .e-grid .e-pager .e-mnext,
.settings-grid .e-grid .e-pager .e-mlast {
    display: none !important;
}

/* Settings Gird Pagination End */


/* Common Grid Filter Section Start */
/* filter icon acitve color */
.e-grid .e-filtered::before {
    color: #5207ac !important;
}

/* filter dropdown start */
/* selected item */
.e-dropdownbase .e-list-item.e-active:not(.e-hover) {
    background-color: #380577 !important;
    color: white !important;
}

/* hovering over selected item */
.e-dropdownbase .e-list-item.e-active.e-hover {
    background-color: #4b0a9e !important;
    color: white !important;
}

/* hovering over non-selected item */
.e-dropdownbase .e-list-item.e-hover:not(.e-active) {
    background-color: rgba(242, 232, 255, 0.60) !important;
    color: #111 !important;
}

/* filter dropdown end */

/* inputbox */
.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) {
    border-color: #380577 !important;
}

.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: rgba(56, 5, 119, 0.3) !important;
    box-shadow: 0 0 0 2px rgba(56, 5, 119, 0.3) !important;
}

.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: rgba(56, 5, 119, 0.3) !important;
    box-shadow: 0 0 0 2px rgba(75, 10, 158, 0.3) !important;
}

/* filter button */
.e-footer-content .e-btn.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
    background: #380577 !important;
    border-color: #380577 !important;
    color: #fff !important;
}

.e-footer-content .e-btn:hover.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
    background: #5207ac !important;
}

.e-footer-content .e-btn:active.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
    border-color: none !important;
    box-shadow: none !important;
}

.e-footer-content .e-btn:focus.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
    border-color: none !important;
    box-shadow: none !important;
}


/* clear button */
.e-footer-content .e-btn.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
    background: #ffffff !important;
    border-color: #380577 !important;
    color: #380577 !important;
}

.e-footer-content .e-btn:hover.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
    background: #f2e8ff !important;
}

.e-footer-content .e-btn:active.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
    border-color: none !important;
    box-shadow: none !important;
}

.e-footer-content .e-btn:focus.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
    border-color: none !important;
    box-shadow: none !important;
}

/*Common Grid Filter Section End */



.settings-grid .sf-grid-btn {
    width: 100%;
    border-radius: 7.09px;
    border: 1.182px solid #E6D5FB;
    background: #F2E8FF;
    color: #380577;
    font-size: 14px;
    font-weight: 500;
    transition: 0.5s ease;
    padding: 14px !important;
}

.settings-grid .sf-grid-btn:active {
    background: #380577;
}

.settings-grid .sf-grid-btn:hover {
    background: #380577;
    color: #fff;
}

.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5 {
    fill: #380577;
    stroke: #380577;
}

.e-spinner-pane .e-spinner-inner .e-spin-label {
    color: #380577;
    font-family: 'MATTER';
    font-size: 18px;
    margin-top: 10px;
    text-align: center;
}


/* notification-style */
.notification-table td {
    background-color: #fff;
    padding: 12px 16px;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    vertical-align: middle;
}

.notification-table tr {
    box-shadow: inherit !important;
}

.notification-table .row-warning td {
    border: 1px solid #f1c40f;
    /* Light red border */
    border-right: none;
    /* remove duplicate borders between cells */
    border-left: none;
    border-top: 1px solid #f1c40f !important;
}


.notification-table .row-warning td:last-child {
    border-right: 1px solid #f1c40f;
}


.notification-table .row-warning td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-left: 1px solid #f1c40f;
}

.notification-table .row-warning td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.notification-table {
    overflow-x: auto;
    width: 100%;
}



.notification-table .row-acknolg td {
    border: 1px solid #2ecc71;
    border-right: none;
    border-left: none;
    border-top: 1px solid #2ecc71 !important;
}


.notification-table .row-acknolg td:last-child {
    border-right: 1px solid #2ecc71;
}


.notification-table .row-acknolg td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-left: 1px solid #2ecc71;
    border-top: 1px solid #2ecc71 !important;
}

.notification-table .row-acknolg td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}


.notification-table .row-critical td {
    border: 1px solid #e74c3c;
    border-right: none;
    border-left: none;
    border-top: 1px solid #e74c3c !important;
}

.notification-table .row-critical td:last-child {
    border-right: 1px solid #e74c3c;
}


.notification-table .row-critical td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-left: 1px solid #e74c3c;
    border-top: 1px solid #e74c3c !important;
}


.notification-table .row-critical td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.notification-table {
    overflow-x: auto;
}

.notification-table .table-container {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}


.notification-table .table-container th,
.notification-table .table-container td {
    word-wrap: break-word;
    white-space: normal;
    padding: 12px 16px;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    vertical-align: middle;
    text-align: left;
}


.notification-table .table-container th:first-child,
.notification-table .table-container td:first-child {
    width: 30%;
    max-width: 400px;
}

.notification-table tr .detail-alrm {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-table tr .detail-alrm p {
    margin: 0;
}

.notification-table .text-ellipsis {
    display: inline-block;
    overflow: hidden;
    max-width: 90%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*sf  notification grid*/
@media (min-width: 770px) {

    body {
        overflow-x: hidden;
    }

    .notification-grid .e-grid .e-pager .e-pagercontainer {
        float: right;
    }

    .notification-grid .e-grid .e-pager .e-parentmsgbar {
        float: left;
        padding-top: 0;
    }

    .notification-grid .e-grid .e-pager .e-parentmsgbar {
        float: left;
        padding-top: 0;
    }

    .notification-grid .e-pager .e-parentmsgbar {
        font-weight: 400;
        font-size: 12px
    }



    .notification-grid .e-pager .e-pagercontainer {
        border-width: 0;
        display: inline-block;
        overflow: hidden;
        border-spacing: 2px;
    }

    .notification-grid .e-pager {
        border-style: none;
        border-width: 1px;
        display: inline-block;
        font-size: 14px;
        white-space: normal;
        width: 100%;
    }

    .notification-grid .e-pager .e-numericitem.e-currentitem,
    .e-pager .e-numericitem.e-currentitem:hover {
        border-right-color: transparent;
        padding: 5px;
    }



    .notification-grid .e-pager .e-numericitem {
        border-right-style: none;
        border-right-width: 1px;
        display: inline-block;
        line-height: 1;
        margin-right: 0;
        min-width: 26px;
        padding: 4px;
        text-align: center;
        border: 2px solid #dee2e6;
        margin-right: 4px;
        border-radius: 2px;
        color: #495057;
    }

    .notification-grid .e-pager.sf-pager .e-numericcontainer a {
        font-size: 12px;
        font-weight: 400;
        padding: 5px;
    }

    .notification-grid .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;
        border-right-width: 1px;
        display: inline-block;
        margin-right: 5px;
        margin-top: 0;
        min-width: 26px;
        padding: 7px;
        border: 1px solid #dee2e6;
    }


    .notification-grid .e-pager .e-pp,
    .e-pager .e-np,
    .e-pager .e-pp:hover,
    .e-pager .e-np:hover {
        font-size: 10px;
        padding: 7px;
        font-weight: bold;
        letter-spacing: 0;
    }

    .notification-grid .e-pager .e-numericitem:hover {
        color: #380577;
        opacity: 1;
    }

    .notification-grid .e-grid .e-headercell {
        height: 40px;
    }
}

/* Active arrows - violet color */
.notification-grid .e-pager div.e-icons.e-pager-default {
    color: #380577 !important;
}

/* Disabled arrows - grey color */
.notification-grid .e-pager div.e-icons.e-disable {
    color: #495057 !important;
}

.notification-grid .e-grid .e-table {
    background-color: #fff;
    border-spacing: 0 8px !important;
}

.notification-grid .e-grid {
    border-style: none none none !important;
    font-family: 'MATTER' !important;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px !important;
    /* Adds margin between rows */
    overflow: hidden;
    padding: 1px;
    min-height: 200px
}

.notification-grid .e-grid .e-gridheader {
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-radius: 10px;
}

.notification-grid .e-grid.e-default:not(.e-rtl) tr td:first-child:not(.e-xlsel-left-border, .e-fixedfreeze.e-freezeleftborder, .e-rowcell-firstchild, .e-addfreezefirstchildborder, .e-leftfreeze.e-freezeleftborder.e-focused),
.e-grid.e-default:not(.e-rtl) tr th.e-headercell:first-child:not(.e-firstcell, .e-headercell.e-frozen-left-border, .e-leftfreeze.e-freezeleftborder.e-focused),
.e-grid.e-default:not(.e-rtl) tr th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
    border-left-width: 1px;
}

.notification-grid .e-grid .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
    box-shadow: 0 0 0 0 inset;
}

.e-grid .green-selection-row td.e-selectionbackground {
    background-color: #f0fff4 !important;
}

.e-grid .red-selection-row td.e-selectionbackground {
    background-color: #fff5f5 !important;
}

.e-grid .yellow-selection-row td.e-selectionbackground {
    background-color: #fffbea !important;
}

.e-grid .green-row-hover.e-row:hover .e-rowcell {
    background-color: #f0fff4 !important;
}

.e-grid .red-row-hover.e-row:hover .e-rowcell {
    background-color: #fff5f5 !important;
}

.e-grid .yellow-row-hover.e-row:hover .e-rowcell {
    background-color: #fffbea !important;
}

/*filter issue of notification page*/
/* Make header cell position relative */
.notification-grid .e-grid .e-headercell {
    position: relative !important;
    height: 56px !important;
    min-height: 56px !important;
}

/*  Hide ONLY the header checkbox (not row checkboxes) */
.notification-grid .e-grid .e-gridheader .e-headercell:first-child * {
    display: none !important;
}

/* Make the header checkbox column very narrow but keep structure */
.notification-grid .e-grid .e-gridheader .e-headercell:first-child {
    width: 1px !important;
    max-width: 1px !important;
    min-width: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* This will hide checkboxes ONLY for rows with .hide-checkbox class */
.notification-grid .e-grid .e-row.hide-checkbox .e-gridchkbox .e-checkbox-wrapper {
    opacity: 0;
    pointer-events: none;
}

/*  Keep the first column narrow for rows (checkbox column) */
.notification-grid .e-grid .e-row .e-rowcell:first-child {
    width: 40px !important;
    max-width: 40px !important;
    min-width: 40px !important;
    padding: 0 8px !important;
}

/*  Position filter icon to the LEFT */
.notification-grid .e-grid .e-headercell .e-filtermenudiv.e-icon-filter {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    margin: 0 !important;
    float: none !important;
}

/* Position sort icon to the RIGHT */
.notification-grid .e-grid .e-headercell .e-sortfilterdiv.e-icons {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    margin: 0 !important;
    float: none !important;
}

/* Header cell div styling - CRITICAL FIX FOR TOOLTIP */
.notification-grid .e-grid .e-headercelldiv {
    background-color: #F3F3F3 !important;
    color: #2D2D2D !important;
    font-family: Matter !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    margin: 0px !important;
    padding-left: 28px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    padding-right: 28px !important;
    /* Add right padding for sort icon */
    height: 56px !important;
    line-height: 20px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

/* Text content container - LET SYNCFUSION HANDLE IT */
.notification-grid .e-grid .e-headercell .e-headercelldiv>div[e-mappinguid] {
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 20px !important;
}

/* Header text styling - MINIMAL INTERFERENCE */
.notification-grid .e-grid .e-headercell .e-headertext {
    font-family: Matter !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: #2D2D2D !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: normal !important;
}

/* When filtered, maintain positioning on LEFT */
.notification-grid .e-grid .e-headercell.e-filtered .e-filtermenudiv.e-icon-filter {
    position: absolute !important;
    left: 8px !important;
}

/* When sorted, maintain positioning on RIGHT */
.notification-grid .e-grid .e-headercell.e-sorted .e-sortfilterdiv.e-icons {
    position: absolute !important;
    right: 8px !important;
}

/* Match gridheader styling */
.notification-grid .e-grid .e-gridheader {
    border-bottom-color: transparent !important;
    border-top-color: transparent !important;
    border-radius: 12px !important;
}

.notification-grid .e-grid .e-gridheader .e-headercell {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/*  Remove conflicting overflow settings */
.notification-grid .e-grid .e-gridheader .e-headercontent {
    overflow: visible !important;
}

.notification-grid .e-grid .e-gridheader .e-table {
    overflow: visible !important;
}

/* Fix for last column */
.notification-grid .e-grid .e-headercell:last-child {
    overflow: hidden !important;
}

.notification-grid .e-grid .e-headercell:last-child .e-headercelldiv {
    overflow: hidden !important;
}

/* Update last column icon positions */
.notification-grid .e-grid .e-headercell:last-child .e-filtermenudiv.e-icon-filter {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
}

.notification-grid .e-grid .e-headercell:last-child .e-sortfilterdiv.e-icons {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
}

/* Ensure spans truncate properly */
.notification-grid .e-grid .e-headercell .e-headercelldiv>div[e-mappinguid]>span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
    max-width: 100% !important;
    line-height: normal !important;
    vertical-align: middle !important;
}

/* Remove default margin/padding */
.notification-grid .e-grid .e-headercell .e-headercelldiv * {
    margin: 0 !important;
}

/* Keep original checkbox styling */
.notification-grid .e-checkbox-wrapper .e-frame.e-check,
.notification-grid .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: #380577;
    border-color: #380577;
    color: #fff;
}

.notification-grid .e-checkbox-wrapper:hover .e-frame.e-stop,
.notification-grid .e-css.e-checkbox-wrapper:hover .e-frame.e-stop {
    background-color: #380577;
    border-color: #380577;
}

.notification-grid .e-checkbox-wrapper:hover .e-frame.e-check,
.notification-grid .e-css.e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: #380577;
    border-color: #380577;
    color: #fff;
}

.notification-grid .e-checkbox-wrapper .e-frame.e-stop,
.notification-grid .e-css.e-checkbox-wrapper .e-frame.e-stop {
    background-color: #380577;
    border-color: #380577;
    color: #fff;
}

.notification-grid .e-grid .type-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* prevents vertical centering effect */
    justify-content: flex-start;
    line-height: 1.25;
}
.notification-grid .e-grid .start-date-cell {
    padding-top: 4.5px;
    line-height:1.25;
}

/* Align cell content padding with header padding */
.notification-grid .e-grid .e-row .e-rowcell {
    padding-left: 28px !important;
}

/*  Notification filter issue*/
.settings-grid .e-switch-wrapper .e-switch-off,
.e-css.e-switch-wrapper .e-switch-off {
    background-color: #eeeeee !important;
    color: #2d2d2d !important;
    border: 0;
    width: 61px;
}

.settings-grid .e-switch-wrapper .e-switch-on,
.e-css.e-switch-wrapper .e-switch-on {
    background-color: #d9ffd4 !important;
    color: #2d2d2d !important;
    border: 0;
    width: 58px;
}

.settings-grid .e-switch-wrapper .e-switch-inner,
.e-css.e-switch-wrapper .e-switch-inner {
    background-color: #d9ffd4 !important;
    border: 0 !important;
    width: 60px;
}

.settings-grid .e-switch-wrapper .e-switch-inner.e-switch-active,
.e-css.e-switch-wrapper .e-switch-inner.e-switch-active {
    background-color: #d9ffd4 !important;
}

.settings-grid .e-switch-wrapper .e-switch-inner.e-switch-active,
.e-css.e-switch-wrapper .e-switch-inner.e-switch-active {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.settings-grid .e-switch-wrapper .e-switch-handle,
.e-css.e-switch-wrapper .e-switch-handle {
    background-color: #fff !important;
    width: 15px !important;
}

.settings-grid .e-switch-wrapper .e-switch-handle.e-switch-active,
.e-css.e-switch-wrapper .e-switch-handle.e-switch-active {
    left: 100%;
    margin-left: -7px;
}

.notification-history .e-grid .e-gridheader {
    position: relative !important;
    /* Override the sticky from notification-grid */
}

.notification-history .e-headercontent {
    border-right-width: 0px !important;
}

.notification-history .e-grid.sf-grid .e-gridcontent .e-content.e-yscroll {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.notification-history .e-grid .e-rowcell {
    padding: 2px 8px !important;
    line-height: 18px !important;
}

/* Keep header as table */
.notification-history .e-grid .e-gridheader,
.notification-history .e-grid .e-headercontent,
.notification-history .e-grid .e-headertable {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
}

/* Header cells stay aligned */
.notification-history .e-grid .e-headercell {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 8px !important;
    vertical-align: middle !important;
}

/* Header text */
.notification-history .e-grid .e-headertext {
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}


.notification-grid .e-grid .e-gridheader {
    position: sticky;
}

.notification-grid .e-grid .e-gridcontent {
    max-height: 60vh;
    overflow-y: auto;
}

.notification-grid .e-grid.sf-grid .e-gridcontent .e-content.e-yscroll {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.notification-grid .e-grid .e-gridcontent::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.notification-grid .e-grid .e-gridcontent::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 6px;
}

.notification-grid .e-grid .e-gridcontent::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

.notification-history .e-grid .e-gridcontent {
    max-height: 55vh !important;
    overflow-y: auto;
}

.notification-history .e-lastcell {
    padding-left: 3px !important;
}

.notification-history .e-grid .e-headercell {
    min-height: 36px !important;
    /* Ensure header height */
    padding: 8px !important;
}

.notification-history .e-grid .e-headercelldiv {
    line-height: normal !important;
}


.notification-history .e-grid .e-table.e-headertable {
    display: table !important;
    width: 100% !important;
}

.notification-history.notification-grid .e-grid .e-headercell .e-headertext {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    font-weight: 500 !important;
    overflow: hidden !important;
    /* Make sure to explicitly override overflow */
}

.notification-history.notification-grid .e-grid .e-gridheader .e-headercell:first-child * {
    display: block !important;
}

.notification-history.notification-grid .e-grid .e-gridheader .e-headercell:first-child {
    width: auto !important;
    max-width: none !important;
    min-width: auto !important;
    padding: 8px !important;
    overflow: visible !important;
}

/*sf  audit log grid*/
@media (min-width: 770px) {

    body {
        overflow-x: hidden;
    }

    .audit-log-grid .e-grid .e-pager .e-pagercontainer {
        float: right;
    }

    .audit-log-grid .e-grid .e-pager .e-parentmsgbar {
        float: left;
        padding-top: 0;
    }

    .audit-log-grid .e-grid .e-pager .e-parentmsgbar {
        float: left;
        padding-top: 0;
    }

    .audit-log-grid .e-pager .e-parentmsgbar {
        font-weight: 400;
        font-size: 12px
    }



    .audit-log-grid .e-pager .e-pagercontainer {
        border-width: 0;
        display: inline-block;
        overflow: hidden;
        border-spacing: 2px;
    }

    .audit-log-grid .e-pager {
        border-style: none;
        border-width: 1px;
        display: inline-block;
        font-size: 14px;
        white-space: normal;
        width: 100%;
    }

    .audit-log-grid .e-pager .e-numericitem.e-currentitem,
    .e-pager .e-numericitem.e-currentitem:hover {
        border-right-color: transparent;
        padding: 5px;
    }
}

.assignclaims-grid .e-gridheader {
    display: none !important;
}

.assignclaims-grid td:last-child {
    border-right: 1px solid #E9E9E9 !important;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}

.assignclaims-grid td:nth-child(2) {
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
    border-left: 1px solid #E9E9E9 !important;
}

.assignclaims-grid td {
    background-color: #FAFAFA !important;
}

.user-role-management .e-grid .e-gridheader .e-headercell {
    padding-top: 15px !important;
    padding-bottom: 12px !important;
}

.user-role-management .e-grid .e-gridheader .e-headercell.no-filter-icon .e-filtermenudiv {
    display: none !important;
}

.row-recently-acked,
.row-recently-acked td {
    background-color: #f5f5f5 !important;
    border-color: #ccc !important;
    color: #888 !important;
    opacity: 0.7;
    cursor: not-allowed !important;
}

.row-recently-acked img {
    filter: grayscale(100%);
    opacity: 0.6;
}

.row-recently-acked .e-checkbox-wrapper {
    pointer-events: none !important;
    opacity: 0.5;
}




.orientation-stepper-control:has(.e-vertical) {
    min-height: 450px;
}

.orientation-stepper-control .stepper-container {
    height: 100%;
    min-height: 400px;
}

.e-stepper.e-vertical {
    height: 100%;
}

.e-stepper.e-vertical .e-stepper-progressbar {
    left: 14px;
}

/* CRITICAL FIX: Progress bar background color */
.e-stepper .e-stepper-progressbar>.e-progressbar-value {
    background-color: #4A148C !important;
}

/* CRITICAL FIX: Selected and completed step text/label color */
.e-stepper .e-step-selected:not(.e-step-error) .e-text,
.e-stepper .e-step-selected:not(.e-step-error) .e-label,
.e-stepper .e-step-completed:not(.e-step-error) .e-text,
.e-stepper .e-step-completed:not(.e-step-error) .e-label {
    color: #4A148C !important;
}

/* REMOVE OUTER CIRCLE - Remove the box-shadow that creates the ring effect */
.e-stepper:not(.e-steps-focus) .e-step-selected .e-step,
#orientation-stepper:not(.e-steps-focus) .e-step-selected .e-step,
.e-stepper .e-step-inprogress .e-step,
.e-stepper .e-step-completed .e-step {
    box-shadow: none !important;
}

/* COLOR CUSTOMIZATION - Purple theme */
/* Active/Current step - Dark purple filled circle */
.e-stepper .e-step-inprogress .e-indicator,
.e-stepper .e-step-inprogress .e-step,
.e-stepper .e-step-selected .e-indicator,
.e-stepper .e-step-selected .e-step {
    background: #4A148C !important;
    /* Dark purple */
    color: #fff !important;
    border-color: #4A148C !important;
}

/* Completed steps - Grey/Light grey circle with checkmark */
.e-stepper .e-step-completed .e-indicator,
.e-stepper .e-step-completed .e-step {
    background: #E0E0E0 !important;
    /* Light grey */
    color: #757575 !important;
    /* Dark grey for icon */
}

/* Not started/Inactive steps - Light grey outline circle with white background */
.e-stepper .e-step-notstarted .e-indicator,
.e-stepper .e-step-notstarted .e-step {
    background: #fff !important;
    /* White background to cover line */
    border: 2px solid #E0E0E0 !important;
    color: #9E9E9E !important;
}

/* PROGRESS LINE STYLING */
/* Completed step lines - Solid purple line */
.e-stepper.e-vertical .e-step-completed .e-stepper-progressbar {
    border-left-style: solid !important;
    border-left-width: 2px !important;
    border-left-color: #4A148C !important;
    /* Purple to match active */
    z-index: 0 !important;
}

/* Active/In-progress/Selected step line - Solid purple line */
.e-stepper.e-vertical .e-step-inprogress .e-stepper-progressbar,
.e-stepper.e-vertical .e-step-selected .e-stepper-progressbar {
    border-left-style: solid !important;
    border-left-width: 2px !important;
    border-left-color: #4A148C !important;
    /* Purple */
    z-index: 0 !important;
}

/* Not started/Inactive step lines - Dashed grey line with shorter dashes */
.e-stepper.e-vertical .e-step-notstarted .e-stepper-progressbar,
.e-stepper.e-vertical .e-step-container:not(.e-step-completed):not(.e-step-inprogress):not(.e-step-selected) .e-stepper-progressbar {
    border-left: 2px dashed #E0E0E0 !important;
    z-index: 0 !important;
}

/* Alternative approach for more dashes - using background instead of border */
.e-stepper.e-vertical .e-step-notstarted .e-stepper-progressbar::before,
.e-stepper.e-vertical .e-step-container:not(.e-step-completed):not(.e-step-inprogress):not(.e-step-selected) .e-stepper-progressbar::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(to bottom, #E0E0E0 0px, #E0E0E0 6px, transparent 6px, transparent 12px);
    z-index: 0;
}

/* Hide the original border when using pseudo-element */
.e-stepper.e-vertical .e-step-notstarted .e-stepper-progressbar,
.e-stepper.e-vertical .e-step-container:not(.e-step-completed):not(.e-step-inprogress):not(.e-step-selected) .e-stepper-progressbar {
    border-left: none !important;
    position: relative;
}

/* Ensure circles are above lines with higher z-index */
.e-stepper.e-vertical .e-step-container .e-indicator,
.e-stepper.e-vertical .e-step-container .e-step {
    position: relative !important;
    z-index: 10 !important;
}

/* Specifically ensure inactive step circles cover the dashed line */
.e-stepper.e-vertical .e-step-notstarted .e-indicator,
.e-stepper.e-vertical .e-step-notstarted .e-step {
    background: #fff !important;
    z-index: 10 !important;
}

/* TEXT/LABEL COLOR CUSTOMIZATION */
/* Active/Selected step label - Dark purple */
.e-stepper .e-step-inprogress .e-step-label,
.e-stepper .e-step-selected .e-step-label {
    color: #4A148C !important;
    font-weight: 500 !important;
}

/* Completed step label - Normal grey */
.e-stepper .e-step-completed .e-step-label {
    color: #616161 !important;
}

/* Not started step label - Light grey */
.e-stepper .e-step-notstarted .e-step-label {
    color: #9E9E9E !important;
}

/* Override any default blue colors from Syncfusion */
.e-stepper .e-step-container .e-step-label-container,
.e-stepper .e-step-text-container {
    color: inherit !important;
}

/* Force remove any default blue styling */
.e-stepper .e-step-selected,
.e-stepper .e-step-inprogress {
    color: #4A148C !important;
}