.e-headertext {
    color: #4B4B4B;
    font-family: 'Segoe UI';
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    padding-left: 3px;
}

.e-rowcell {
    color: #1D1D1D;
    font-family: 'Segoe UI';
    font-weight: normal;
    font-size: 13px
}

.e-grid .e-gridheader {
    background-color: #E8E8E8;
}

.e-grid .e-headercell {
    background-color: #E8E8E8;
    height: 31px
}

.e-grid .e-rowcell {
    font-size: 13px;
    padding: 6px 10px;
}

.e-grid .e-rowcell:first-child,
.e-grid .e-summarycell:first-child {
    padding-left: 10px;
}

.e-headercell.e-leftalign.e-mousepointer {
    position: relative;
}

.e-headercell.e-mousepointer:not(.e-stackedheadercell)::after {
    content: '';
    position: absolute;
    left: 0;
    top: 27%;
    height: 50%;
    border-left: solid 1px black !important;
    opacity: 0.3;
    width: 1px;
}

/*To remove the weird line that appears on the first column of grid*/
[aria-colindex="1"].e-headercell.e-mousepointer:not(.e-stackedheadercell)::after, [aria-colindex="2"].e-headercell.e-mousepointer:not(.e-stackedheadercell)::after {
    border-left: none !important;
}

.e-headercelldiv.e-headerchkcelldiv {
    text-align: center !important;
}

.e-grid.e-headercell, .e-grid.e-detailheadercell {
    padding: 6px 8px 8px !important;
}

.e-rhandler.e-rcursor {
    border: none !important
}

.e-grid.e-gridheader {
    border-bottom: 1px solid rgba(112, 112, 112, 0.3);
}

.e-frame.e-icons.e-uncheck {
    border: solid 1.18px black !important;
}

.e-frame.e-icons.e-uncheck:hover {
    border: solid 1.18px black !important;
}

.e-frame.e-icons.e-uncheck:focus {
    border: solid 1.18px black !important;
}

.e-frame.e-icons.e-uncheck:active {
    border: solid 1.18px black !important;
}

.e-frame.e-icons.e-uncheck:focus-visible {
    border: solid 1.18px black !important;
}

.hover-container:hover .hover-image {
    display: block;
}

.hyper-link {
    text-decoration: none;
    color: #3B5EDA;
}

.hyper-link:hover {
    text-decoration: underline;
    color: #3B5EDA;
    cursor:pointer;
}

.e-headercelldiv.e-headerchkcelldiv {
    text-align: center !important;
}

.e-rowcell.e-gridchkbox {
    text-align: center !important;
}

/*ensure that the filter icon is not there by replacing the content with a dummy icon that does not exist but keeping all the other functionality linked to the icon*/
.e-grid .e-gridheader .e-sortfilter .e-rightalign.e-fltr-icon .e-headercelldiv {
    margin: -5px !important;
}


.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: "\e406";
}

.e-filtermenudiv.e-icons.e-icon-filter {
    background: none;
    position: relative;
}

.e-filtermenudiv.e-icons.e-icon-filter::after {
    content: "";
    background: url("../images/grid/Filter-Icon-Hover-15pts.svg");
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.e-filtermenudiv.e-icons.e-icon-filter:hover::after {
    opacity: 1;
}

.e-filtermenudiv.e-icons.e-icon-filter.e-filtered::after {
    background: url("../images/grid/Filter-Icon-Selected-15pts.svg");
    opacity: 1;
}

.e-grid .e-control.e-toolbar.e-lib.e-keyboard, .e-grid .e-control.e-toolbar.e-lib.e-keyboard .e-toolbar-items {
    background-color: #F3F4F5 !important;
}

.e-grid > .e-toolbar .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child,
.e-grid > .e-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:first-child {
    margin-left: 4px;
}

.e-grid > .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
    margin-left: 0px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 4px;
}

.sf-treegrid > .e-toolbar,
.e-grid > .e-toolbar {
    overflow: visible !important;
    border-top: none !important
}

/*This is to fix the split button not being exactly in line with the other toolbar buttons when 150% zoom*/
.e-grid > .e-toolbar:has(.e-toolbar-items .e-toolbar-item .outer-container) .e-toolbar-items .e-toolbar-item .outer-container {
    padding-top: 3px !important
}

.grid-container {
    overflow: hidden !important;
}

/*Column Chooser*/

.columnChooserCss {
    position: absolute !important;
    right: 5px;
}

.reset-state-buttonCss {
    position: absolute !important;
    right: 100px;
}

.columnChooserMenuCss > .e-control.e-listview.e-lib.e-touch {
    z-index: 10000 !important;
    top: 57px;
    left: 0;
    border-radius: 4px;
    border: none;
    background-color: #f8f9fa;
}

.columnChooserMenuCss {
    position: absolute !important;
    right: 100px;
    z-index: 10000 !important;
}

.baseColumnChooserList {
    position: fixed !important;
    right: 20px !important;
    height: 150px !important;
    width: 150px !important;
    overflow: auto;
    left: 91% !important;
}

.poColumnChooserTopAdjustment {
    top: 22% !important;
}

.supplierAccountColumnChooserTopAdjustment {
    top: 19% !important;
}


/*Tooltip replaces normal header grid*/
.headerGrid {
    font-family: 'Segoe UI';
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    color: #4B4B4B;
    padding-left: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/*Tooltip on grid*/
.e-tooltip-wrap.e-griderror,
.e-control.e-tooltip-wrap.e-popup.e-griderror {
    background-color: #FCF6F6 !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    border: 0.5px solid #CB0D0D;
    transform: translateY(-7px);
}

.e-tooltip-wrap.e-griderror .e-tip-content,
.e-tooltip-wrap.e-griderror .e-tip-content label {
    color: #000000 !important;
    text-align: center !important;
    padding: 2.5px !important
}

.e-arrow-tip .e-tip-top {
    display: none !important;
}


/*Search button on grid - hide and show search*/
.hide-show-search-toolbarbuttonCss {
    position: absolute !important;
    right: 8px;
}

/*Sorting hack*/
.base-grid-wrapper .e-grid div.e-sortfilterdiv.e-icons::before {
    visibility: hidden;
}

.base-grid-wrapper .e-headercelldiv {
    padding: 0 !important;
}

.base-grid-wrapper .e-headercelldiv > .e-control.e-tooltip > .headerContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.custom-sort-icon {
    border: 1px solid transparent;
    height: 10px;
    width: 10px;
    min-height: 10px;
    min-width: 10px;
    max-height: 10px;
    max-width: 10px;
    visibility: hidden;
}

.base-grid-wrapper .e-headercelldiv:has(~.e-sortfilterdiv.e-ascending) > .e-tooltip > .headerContainer > .custom-sort-icon {
    visibility: visible;
    background: url("../images/grid/sort-arrow.svg");
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain;
    transform: rotate(0deg);
}

.base-grid-wrapper .e-headercelldiv:has(~.e-sortfilterdiv.e-descending) > .e-tooltip > .headerContainer > .custom-sort-icon {
    visibility: visible;
    background: url("../images/grid/sort-arrow.svg");
    background-repeat: no-repeat !important;
    background-position: center !important;
    transform: rotate(180deg);
}

/*Pager styling to ensure always visible*/


.sf-pager.e-control.e-pager.e-lib.e-gridpager {
    height: 55px !important;
    background-color: #F3F4F5 !important;
}

.e-grid > .e-toolbar {
    height: 49px !important;
    width: 100% !important;
}

.e-grid > .e-gridheader {
    height: 33px !important;
    width: 100%;
}

.e-grid > .e-gridcontent {
    width: 100% !important;
}

.e-content.e-yscroll {
    overflow: auto;
}

/*Group Header Grid Overrides*/
.grid-group-headers > .e-grid > .e-gridheader {
    height: 66px !important;
}

e-grid
.grid-group-headers > .e-grid:has( .sf-pager) > .e-gridcontent {
    height: calc(100% - 171px) !important;
}

/*grid blocks border*/
.e-grid .e-toolbar {
    border-bottom: 0.5px solid #C5C5C5;
}

.e-grid {
    border-top: 0.5px solid #C5C5C5;
    border-left: 0.5px solid #C5C5C5;
    border-right: 0.5px solid #C5C5C5;
    border-radius: 3px;
}

/*Fix color of header cell when using grouping*/
.e-grid .e-grouptopleftcell {
    background-color: #E8E8E8;
}


/*Align select all checkbox to match checkboxes in rows below*/
.e-headercell[aria-describedby="headerTitle-checkbox-col"] .e-checkbox-wrapper {
    padding-left: 6px !important;
}


.e-row.not-editable {
    background-color: #e9ecef !important;
    opacity: 0.75;
}

.e-row.not-editable:hover {
    background-color: #e9ecef !important;
    opacity: 0.75;
}

.e-detailheadercell {
    background-color: #E8E8E8 !important;

}

.e-headercell.e-leftalign.e-leftfreeze {
    background-color: #E8E8E8 !important;
}