/*********
    Custom CSS for Syncfusion UI Components 
**********/

/**** Left Column Page Data Grid ****/
.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;
    }
    .e-grid .e-headercell {
        background-color: #fff;
    }
    .e-grid .e-headercelldiv {
        color: #2C4070;
        text-transform: none;
        font-weight: 600;
        font-size: 16px;
    }
    .e-grid .e-headertext {
        color: #2C4070;
    }
.e-grid .e-altrow {
    background: #F5F8FB;
    border: 0;
}
    .e-grid .e-rowcell {
        border: 0;
        font-size:16px;
    }
    .e-grid.e-gridhover .e-frozenhover:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row.e-addedrow:not(.e-disable-gridhover):not(.e-detailrow):hover .e-dragindentcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
        background: #D9EAF6;
}
.e-grid .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
        box-shadow: 0 0 0 1px #2C4070 inset;
 } 
/*Grid Filter icon */
.e-icon-filter:before {
    color: #0070C0;
}
.e-grid .e-filtered::before {
    color: #2C4070;
}
.e-grid .e-icon-filter::before {
    position:absolute;
    top:50%;
    right:5px;
}
/*Grid sorting icon */
.e-grid .e-icon-ascending::before, .e-grid .e-icon-descending::before {
    /*position: absolute;*/
    top: 45%;
    color: #0070C0;
}
/*Grid filter popup*/
.e-dialog {
    background-color: #F5F8FB;
}
.e-grid .e-filter-popup .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;
    }
.e-grid .e-btn.e-flat.e-primary:focus, .e-grid .e-css.e-btn.e-flat.e-primary:focus {
    box-shadow: none;
}
.e-grid.e-wrap .e-columnheader .e-filtermenudiv, .e-grid.e-wrap .e-columnheader .e-sortfilterdiv .e-filtermenudiv {
    padding-top: 20px;
}
/*Grid Pager Style*/
.e-grid .e-pager {
    background: #fff;
    padding: 1.5rem 1rem;
    border-top: 2px solid #D4DADF;
    font-family: "Open Sans", sans-serif;
}

.e-pager .e-pagercontainer {
    border: 0;
}
.e-pager div.e-icons.e-pager-default {
    color: #2C4070;
}
.e-pager .e-pager-default:hover,
.e-pager .e-spacing.e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover {
    background: #F5F8FB;
    border-radius: 5px;
}
.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: 16px;
}
.e-pager.sf-pager .e-numericcontainer a {
    font-size: 14px;
}
.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,
.e-pager .e-numericitem, .e-pager .e-firstpage, .e-pager .e-prevpage, .e-pager .e-firstpagedisabled, .e-pager .e-prevpagedisabled, .e-pager .e-nextpage, .e-pager .e-lastpage, .e-pager .e-nextpagedisabled, .e-pager .e-lastpagedisabled {
    border-right: 0;
}
.e-pager .e-currentitem, .e-pager .e-numericitem.e-currentitem {
        border: 0;
        border-radius: 5px;
        background: #D9EAF6;
        color: #2C4070;
 }
.e-pager .e-currentitem.e-numericitem.e-focused {
    background: #D9EAF6;
}
.e-pager .e-pagerdropdown {
    background-color: #F5F8FB;
    border-radius: 5px;
}
.e-pager .e-input-group:hover:not(.e-disabled), .e-input-group.e-control-wrapper:hover:not(.e-disabled) {
    border-bottom: 2px solid #2C4070;
}
.e-pager .e-pagerconstant, .e-parentmsgbar {
    font-size: 16px;
    color: #2C4070;
    /* Removing this line height:  on mobile, it causes the text to be cut off. */
    /*line-height: 20px;*/
}
.e-pager div.e-icons.e-disable {
}

/* 
    MS : CSs for updated Tooltip
    Related to TFS #6871
*/
.e-tooltip-wrap {
    background-color: #2C4070;
    border-radius: 5px;
    opacity: 1;
}

    .e-tooltip-wrap.e-popup {
        background-color: #2C4070;
        border: 1px solid #2C4070;
    }

    .e-tooltip-wrap .e-tip-content {
        background-color: #2C4070;
        color: #FFFFFF;
        font-family: "Open Sans", sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 100%;
        padding: 15px;
    }

    .e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
        border-right-color: #2C4070;
    }

    .e-tooltip-wrap .e-arrow-tip-inner.e-tip-left {
        color: #2C4070;
    }

.e-cs-add {
    background-image: url("../images/icons/overhaul/add-darkblue.svg");
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle !important;
    margin-right: 10px !important;
}
.e-cs-delete {
    background-image: url("../images/icons/overhaul/delete-darkblue.svg");
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle !important;
    margin-right: 10px !important;
}
.e-cs-update {
    background-image: url("../images/icons/overhaul/save-darkblue.svg");
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle !important;
    margin-right: 10px !important;
}
.e-tbar-btn-text {
    color: #2C4070;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 100%;
}

/* Grid RTL handling */
.e-grid.e-rtl .e-icon-filter::before {
    left: 15px;
    right: revert;
}
.e-grid .e-sortfilterdiv {
    width: 25px !important;
    padding: 5px !important;
}

/* CSS adjustment to make all header cells without filter icons still have the same padding */
.e-grid .e-gridheader .e-headercelldiv {
    margin: -5px 20px -5px -1px;
}
/* CSS adjustment to make cell content align with the header */
.e-bigger .e-grid .e-rowcell, .e-bigger .e-grid .e-summarycell, .e-bigger .e-grid .e-groupcaption, .e-grid.e-bigger .e-rowcell, .e-grid.e-bigger .e-summarycell, .e-grid.e-bigger .e-groupcaption {
    padding-left: 13px;
}

/* MS : TFS 15615 : CSS adjustment to shift vertical scroll bar via RTL based on the app config setting "GridVerticalScrollPosition" */
.verticalScrollLeft .e-content, .verticalScrollLeft .e-headercontent {
    direction: rtl;
}
.verticalScrollLeft .e-content .e-table, .verticalScrollLeft .e-headercontent .e-table {
    direction: ltr;
    margin-left: 5px;
}
.verticalScrollLeft .e-gridheader {
    padding-right: 0px !important;
    padding-left: 14px !important;
}
.verticalScrollLeft .e-detailrow {
    position: relative;
    float: left;
}