html {
  scroll-behavior: smooth;
}

.main {padding: 2px;margin: 0;}
.sag_grid {/* border: 1px solid #c3c3c3; *//* overflow: hidden; */position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-sizing: border-box;box-sizing: border-box;}
.drag-div {padding: 2px 0px; background-color: #dadada; opacity: 0.7; border: 1px solid #BDC3C7; border-bottom: 0; height: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.parent_main {/* clear: both; *//* display: flex; *//* flex-wrap: wrap; *//* flex-direction: column; *//* width: 100%; *//* overflow-x: auto; *//* overflow-y: hidden; */}
.header_div {/* background-color: #efefef;height: 100px; display: flex; *//* flex-direction: row; */width: inherit;border-left: 1px solid #ccc;}
.child_header {position: relative;left: 0;/* flex-grow: 1; */height: 33px;/* border-top: 1px solid #c3c3c3; */}
.header_row {/*position: absolute;width: 2670px;*/display: -webkit-flex; display: -ms-flexbox; display: -moz-flex;  display: flex; height: 100%;align-items: center;/* border-top: 1px solid #c3c3c3;background-color: #efefef; */}
.header_cell {position: absolute;display: inline-block;flex-grow: 1;padding: 0 5px; height: 33px; display: -webkit-flex; display: -ms-flexbox; display: -moz-flex;  display: flex; align-items: center;border-right: 1px solid #bfbfbf; background: #efefef; border-top: 1px solid #c3c3c3; top: 0}
.header_cell input[type="text"] {width: 100%;}
.sag_grid_table_main {/* display: flex; *//* width: 2670px; *//* overflow-y: auto; *//* overflow-x: hidden; *//* height: 552px; *//* position: relative; *//* height: 100%; *//* min-width: 0px; *//* overflow: hidden; *//* -webkit-box-flex: 1; */-ms-flex: 1 1 auto;/* flex: 1 1 auto; *//* width: 100%; *//* overflow-x: auto; *//* height: calc(100% + 0px); */ width: inherit;}
.first_grid_tbody {/* flex: 1; *//* overflow: hidden; *//* flex-direction: row; *//* height: 100%; *//* display: flex; *//* overflow-x: hidden; *//* overflow-y: auto; *//* width: 2670px; */}
.table_body {display: block; position: relative; border-left:1px solid #ccc;}
.grid_row {/*position: absolute;width: 2670px;*/display: -webkit-flex; display: -ms-flexbox; display: -moz-flex;  display: flex; height: 100%;align-items: center;/* border-top: 1px solid #c3c3c3; */}
.grid_cell {position: absolute;display: inline-block;flex-grow: 1;padding: 0 5px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; border-right: 1px solid #bfbfbf; border-bottom: 1px solid #c3c3c3;top: 0px;}
.grid_row_header {position: absolute;left: 0;height: 20px;/* border-top: 1px solid #c3c3c3; */     width: 100%;}
.gridScroll {height: 530px; width: 16px;overflow-y: scroll;overflow-x: hidden; position: absolute; right:21px;top: 150px;}
.secondScroll {height: 1000px;}	
.table_main, .sml_headBody, .sml_innerHeadBody{ display: -webkit-flex; display: -ms-flexbox; display: -moz-flex;  display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; -moz-flex-direction: column; flex-direction: column; font-size: 12px; height: 100%;-moz-flex: 1; -ms-flex: 1;-webkit-flex: 1; flex : 1;overflow: hidden;overflow: hidden;}
.table_main .left-tbl{/* display: flex; width: 280px;max-width: 280px;min-width: 280px;*/position: relative;}
.table_main .center-tbl{/* display: flex; *//* width: 100vw; *//* flex: 1; */-moz-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex : 1;; }
.table_main .right-tbl{/* display: flex; *//* width: auto; width: 280px;max-width: 280px;min-width: 280px;*/position: relative;}
.table_main .left-tbl .header_row, .table_main .left-tbl .sag_grid_table_main{/* width:250px; */}
.table_main .center-tbl .header_row{}
.table_main .right-tbl .header_row, .table_main .right-tbl .sag_grid_table_main{}

.header_Blk {
    display: -webkit-flex;
     display: -ms-flexbox;
     display: -moz-flex;
     display: flex; 
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    -moz-flex-direction: row;
     flex-direction: row;
    width: 100%;
    white-space: nowrap;
    padding-right: 17px;
    background-color: #f1f1f1;
    border-bottom: 1px solid #c3c3c3;
}

.left-tbl-header {
    /* width: 280px;
    max-width: 280px;
    min-width: 280px; */
    display: inline-block;
    overflow: hidden;
}

.center-tbl-header {
  /*   position: relative;
    height: 100%;
    min-width: 0px;
    overflow: hidden;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto; */
    -moz-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
     flex : 1;
    /*  width: calc(100% - 420px);  */
     overflow-x: hidden;
    overflow-y: hidden;
}



.right-tbl-header {
    /* width: 280px;
    max-width: 280px;
    min-width: 280px; */
    display: inline-block;
    overflow: hidden;
}



.table_main .left-tbl {
    float: left;
    height: 3300px;
    overflow-x: hidden;
    overflow-y: hidden;
}



.table_main .center-tbl {
    float: left;
    height: 3300px;
    overflow-x: hidden;
    overflow-y: hidden;
}
.table_main .right-tbl {
    float: right;
    height: 3300px;
    overflow-x: hidden;
    overflow-y: hidden;
}


.mainDivTbody {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    -moz-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
     flex : 1;
}

.mainDivTbodySecond {
    display: -webkit-flex;
     display: -ms-flexbox;
     display: -moz-flex;
     display: flex; 
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    -moz-flex-direction: row;
     flex-direction: row;
    width: 100%;
    white-space: nowrap;

}


/* div#centerGrid {
    width:calc(100% - 420px)
} */

.fa{ font-size:auto}


:root {
	--clrInHover: #ccc;
}

/* 
div.grid_row:hover{
    background-color: var(--clrInHover);
} */

/* div.sagRow:active > div{
    background-color: #9999;
} */

.ui-state-active { 
    background-color: #968383b0; 
}


.table_main .left-tbl .sag_grid_table_main, .table_main .right-tbl .sag_grid_table_main {overflow: hidden;}

.gridLeftScroll {
    overflow-y: hidden;
    overflow-x: scroll;
    height: 17px;
}
.secondLeftScroll {
    display: block;
    height: 17px;
}


.gridCenterScroll {
    overflow-y: hidden;
    overflow-x: scroll;
    height: 17px;
     -moz-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
     flex : 1;
}

.secondCenterScroll {
    display: block;
    height: 17px;
}

.gridRightScroll {
    overflow-y: hidden;
    overflow-x: scroll;
    height: 17px;
}

.secondRightScroll {
    display: block;
    height: 17px;
}



/****filter****/

.tabLList {
    border: 1px solid #c9c8c7;
    margin-bottom: 5px;
    height: 12vh;
    overflow: auto;
}
.filterRow {
     display: -webkit-flex;
     display: -ms-flexbox;
     display: -moz-flex;
     display: flex; 
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    -moz-flex-direction: row;
     flex-direction: row;
    border-bottom: 1px solid #c9c8c7;
}

.filterRow .checkbox {
    width: 40px;
    text-align: center;
}
.dropdoenMenu {
    width: 18vw;
    box-shadow: 0px 2px 8px 2px #6f6f6f;
    position: fixed !important;
}
.filterRow .checkbox input.filterRowInput {
    opacity: 1; 
    margin:3px 0;
    position: inherit;
}
.filterRow .checkLabel {
    font-size: 0.85vw;
    width: calc(100% - 40px);
}
.blockDiv .form-check-label {
    padding: 0;
    font-size: 0.95vw;
}


/****filter****/

.masterdiv {
    overflow: hidden  !important;
}

.totalFooter, .scrollBar{
     display: -webkit-flex;
     display: -ms-flexbox;
     display: -moz-flex;
     display: flex; 
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    -moz-flex-direction: row;
     flex-direction: row;
    width: 100%;
    white-space: nowrap;

}

.leftTotalFooter {
    position: relative;
    height: 25px;
}

.totalField {
    display: inline-block;
    -webkit-flex-grow: 1;
     -ms-flex-grow: 1;
     -moz-flex-grow: 1;
    flex-grow: 1;
    padding: 0 5px;
    position: absolute;
    height: 25px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-flex;
    display: flex; 
    align-items: center;
    border-left: 1px solid #afafaf;
    border-bottom: 1px solid #afafaf;
    background-color: #f1f1f1;
    justify-content: flex-end;
    top:0px;
    overflow: hidden;
}

.totalField input {
    width: 100%;
}

.paginationBlk .btn-group .btn {
    border: 1px solid;
    height: auto;
}
.footerGrid {
    background: #eaeaea!important;
    border-top: 1px solid #b7b7b7;
    padding-right: 17px;
    background-color: #f1f1f1;
}

.totalFooter .child_header {
    height: 25px;
}
.totalFooter .child_header .header_row {
    border-top: none;
}

.footer_cell{ display: -webkit-flex;  display: -ms-flexbox;  display: -moz-flex;  display: flex;  align-items: center;height: 25px;}
.sagGridFilter {position: inherit; right: 5px; padding: 4px 7px;  border: 1px solid transparent;}

.header_Blk .child_header:first-child {
    border: none;
}
/*  .sag_grid{height: 70vh;}
 */
.sagGridResize {
    position: absolute;
    right: -3px;
    z-index: 1;
    cursor: col-resize;
    top: 8px;
}

.masterdiv{ 
	 display: -webkit-flex;
     display: -ms-flexbox;
     display: -moz-flex;
     display: flex; 
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    -moz-flex-direction: column;
     flex-direction: column;}

.masterdiv div[class^="col-"], .masterdiv .main, .sag_grid, .gridTheme, .gridPopupTheme, .gridIndexStop{
     display: -webkit-flex;
     display: -ms-flexbox;
     display: -moz-flex;
     display: flex; 
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    -moz-flex-direction: column;
     flex-direction: column;
    -moz-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
     flex : 1;
     overflow: hidden;
     height: 100%;
     z-index: 0;
}

.header_cell .filterActive {
    position: absolute ;
    right: 1px ;
    background-color: #fff ;
    height: 100% ;
    width: 40px ;
    padding: 8px ;
    border-left: 1px solid #ccc;
}

.dropdoenMenu {
    border-top: none !important;
    padding: 5px !important;
}

.dropdoenMenu {
    box-shadow: none;
}

.blockDiv input[type=checkbox] {
    position: inherit;
    margin: 7px;
    padding: 0;
}

.mr-1 {
    margin-right: 0.25rem;
}

.sml_slectedRow{
  background-color:#666b71 !important ;
  color:#fff; 
}

.header_cell .sagGridFilter.sml_activeFilter{
	background-color:#bdbdba;
}


.sml_hoverRow{
	background-color:#d8d8d8;
}
span.sml_totalRecord {
    padding: 5px;
}

.sml_header_text{white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; text-align: inherit; width: inherit;}
.masterdiv .form-control{padding:5px 10px; height:30px}
.masterdiv .tabLList{ min-height:120px}
.sml_active{    background: #fff;    border: #cecece 1px solid;}
.header_row .header_cell:last-child .sagGridResize{right: -1px;}
.scrollBar { height: 17px;}
.multiDropDown.open ul.dropdown-menu li a {display: block; border-bottom: 1px solid #ccc; padding: 5px;}
ul#showHideColUl {height: 155px; overflow: auto;}

.table_body .grid_cell select {text-align-last: center; text-align: center;}
.all-checkbox-checked {background: blue; height: 12px; width: 12px; position: inherit; margin: 7px; padding: 0;}
.form-check.checkBlkDiv {display: flex;}
.sag-column-drop-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}


span.sag-column-drop-cell {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #ffffff;
    border-radius: 16px;
    min-height: 24px;
    padding: 0px 2px 0 8px;
    margin: 0 10px;
}
span.sag-column-drop-cell i.fa.fa-times-circle-o {padding: 0 5px;}


.totalFooter { padding-right: 17px;  background-color: #f1f1f1;}
.totalField:last-child {  border-right: 1px solid #afafaf;}


/***********snapping Row group ***************/
.mainDivTbodySecond div {z-index: 0;}
.mainDivTbodySecond  div.sagGroupRow { z-index: 1;}
.sagGroupRow .cellGroupSelected {background: #fff; color: #000; display: flex; align-items: center;}

/***********snapping Row group ***************/

/**** pagination  ***/

.cd-pagination li {display: inline-block;}
.cd-pagination li {margin: 0 .2em;}
.cd-pagination.animated-buttons .button a {position: relative;padding: 0; transition: all linear 0.5s;}
.cd-pagination.animated-buttons a, .cd-pagination.animated-buttons span {padding: 0 0.4em;/* height: 30px; *//* line-height: 50px; */overflow: hidden;text-decoration: none;color: #000;}
.cd-pagination a {border: 1px solid #9e9e9e;border-radius: 0.25em;}
.cd-pagination a, .cd-pagination span {display: inline-block;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;padding: .6em .8em;/* font-size: 1.6rem; */}
.cd-pagination li.active a {background-color: #353535;color: #fff;}
.cd-pagination.custom-icons .button a i {padding: 0 0.4em;}
.cd-pagination.animated-buttons a:hover {background-color: #37a000; color: #fff;}


/**** pagination  ***/

/**  
Manage css by lavesh kaplana
**/

.center-tbl-header .header_row .header_cell:last-child {border-right: 1px solid #bfbfbf;}
.grid_row .grid_cell select, .grid_row .grid_cell input {border: none;}
/* .first_grid_tbody .grid_row_header:last-child .grid_row {border-bottom: 1px solid #c3c3c3;} */
.header_cell .sagGridFilter {position: absolute; right: 0px; width: 35px; height: 100%; padding: 7px; background-color: #ececec;top: 0}
.smlFullPageScreen {position: fixed; left: 18vw; right: 0; top: 6vh; bottom: 0; z-index: 9999; background: #fff; height:auto;}
.sidebar-hidden .smlFullPageScreen {left: 0;}

@-moz-document url-prefix(){
	.first_grid_tbody .grid_row_header:last-child .grid_row { border-bottom: 3px solid #c3c3c3;}
	.grid_row {border-top: none;}

}


@media screen and (max-width: 800px){
.footerGrid label { white-space: normal !important;}
.scrollBar {display: none;}
.footerGrid {padding: 5px 0;}
.sml_headBody {overflow-x: auto; overflow-y: hidden;}
.filterRow .checkLabel {font-size: 13px; margin-top: 10px;}
.blockDiv .form-check .form-check-label {line-height: 2.2 !important;}
.dropdoenMenu { width: 250px;}
.dropdown-menu.dropdoenMenu {position: absolute !important; margin: 0; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%);}
.header_Blk {padding-right: 0px;}
.covermaster{display: -webkit-flex;  display: -ms-flexbox; display: -moz-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; -moz-flex-direction: column; flex-direction: column;}     
 .masterdiv, .masterdiv .col-sm-12, .masterdiv .main, .sag_grid, .gridTheme, .gridPopupTheme{display: -webkit-flex; display: -ms-flexbox; display: -moz-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -moz-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex : 1; overflow: hidden; height: 100%;}    
.cd-pagination li {margin: 0;}

.center-tbl-header { overflow-x: initial; overflow-y: initial;}

}

@media screen and ( min-width:768px) and ( max-width:1024px){
	.center-tbl-header {overflow-x: initial;  overflow-y: initial;}
}



/* for tabbing in grid -- vaurn jain */
.grid_cell_selected:focus { border:2px solid #5bc0de;}
/* end varun  */ 


.sml_slectedRow .sml_disable{color: rgba(255,255,255,.6);}
.sml_disable{pointer-events: none;
    background: rgba(0,0,0,.05);
    color: rgba(0,0,0,.6);}
.grid_cell select, .grid_cell input{width:100%} 

.regexInvalid{
    border: 1px solid #ec8080;
}

.sml_comment_i{ border-left:5px solid #37a000}

/* popup Button for grid cell start */
.sml_btnComponent{display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;}
    
.sml_btnComponent span{flex: 1 1 auto;
    overflow: hidden;
    margin-right: 10px;}
.sml_btnComponent button{float: right;
    background: #aba8a8;
    border: 1px solid #d0d0d0;
    padding: 2px 3px;
    margin: 0px 1px;}

    
.sml_slectedRow .sml_btnComponent button{display:block!important}
/*
structure >>>>>

<div class="sml_con">
    <span>
        Constent of cell
    </span>
    <button type="button" class="fa fa-ellipsis-h"></button>
</div>
*/
/* Table placeholder Css Start */
.timt{margin:0 auto;max-width:472px}.bg{min-height:100%;opacity:.7;position:absolute;width:100%;top:0}.timz{background-color:#fff;border:1px solid;border-color:#e5e6e9 #dfe0e4 #d0d1d5;border-radius:3px;position:relative;margin:0 auto;max-width:100%;min-height:200px;display:flex;height:100%;box-sizing:border-box;flex-direction:column;border:10px solid #fff}@keyframes phspin{0%{background-position:-468px 0}100%{background-position:468px 0}}.abmk{animation-duration:1.5s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:phspin;background:#f6f7f8;background:linear-gradient(to right,#eee 8%,#ddd 18%,#eee 33%);background-size:800px 104px;height:100%;position:relative;overflow:hidden}.bkmk{background:#fff;position:absolute}.bkmk.header-bottom,.bkmk.header-top,.bkmk.subheader-bottom{top:0;left:40px;right:0;height:10px}.bkmk.header-left,.bkmk.header-right,.bkmk.subheader-left,.bkmk.subheader-right{top:10px;left:40px;height:8px;width:10px}.bkmk.header-bottom{top:18px;height:6px}.bkmk.subheader-left,.bkmk.subheader-right{top:24px;height:6px}.bkmk.header-right,.bkmk.subheader-right{width:auto;left:300px;right:0}.bkmk.subheader-right{left:230px}.bkmk.subheader-bottom{top:30px;height:10px}.bkmk.cfee,.bkmk.cfef,.bkmk.csls,.bkmk.ctee,.bkmk.ctle,.bkmk.ctop{top:40px;left:0;right:0;height:6px}.bkmk.ctop{height:20px}.bkmk.cfee,.bkmk.cfef,.bkmk.ctee{width:auto;left:380px;right:0;top:60px;height:8px}.bkmk.csls{top:68px}.bkmk.cfee{left:420px;top:74px}.bkmk.ctle{top:82px}.bkmk.ctee{left:300px;top:88px}.overlaydiv{background:#000}.loader{border:3px solid #d6d2d2;border-radius:50%;border-top:3px solid #0000006e;width:50px;height:50px;-webkit-animation:spin .5s linear infinite;animation:spin .5s linear infinite;position:absolute;left:50%;top:50%;margin-left:-25px;margin-top:-50px}.loding{font-size:20px;text-align:center;padding-top:10px;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;position:absolute;width:100%;top:50%}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}body,html{height:100%;width:100%;margin:0;padding:0}.mkbx{position:relative}.mkbx.mk-1{top:56px}.mkbx.mk-2{top:112px}.mkbx.mk-3{top:168px}.mkbx.mk-4{top:224px}.mkbx.mk-5{top:280px}.mkbx.mk-6{top:336px}.mkbx.mk-7{top:392px}.mkbx.mk-8{top:448px}.mkbx.mk-9{top:504px}.mkbx.mk-10{top:560px}.mkbx.mk-11{top:616px}
/* Table placeholder Css End */
/* popup Button for grid cell end */