@charset "utf-8";
/* CSS Document */

/* 
#####container fixed position and size 
#####container fixed position and size 
<div class="data-headf t25 l5 w65">Start</div>
<div class="data-headf t25 l70 w65">End</div>
<div class="data-headf t25 l135 w167">Reason</div>
<div class="data-gridf t47 l5 w300 h127" id="XXXX"></div>
*/

/*
<div class="p-row">
<div class="data-head w65">Start</div>
<div class="data-head w65">End</div>
<div class="data-head w167">Reason</div>
</div>
<div class="p-row">
<div class="data-grid" id="XX"></div>
</div>
*/

/*------------------- Data Grid -----------------------------*/
.data-grid, .data-gridf{
display: flex;
flex-direction: column; /* stack children vertically */
align-items: stretch;   /* optional: make rows full width */
/*display: grid;
grid-template-columns: 1fr;
gap: 0px; /* Adds space between grid items */ 
background-color: rgba(232,232,232,1.00);
overflow-y: auto;
overflow-x: hidden;
}

.data-gridf{position: absolute; top:100px; left:20px; }

/*--------------------- Header Row -------------------------*/
.data-head, .data-headf{
font-size: 12px;
font-family: 'Helvetica', 'Tahoma', 'Geneva', sans-serif;
text-align: center;
height: 22px;
line-height: 22px;
border-right: solid;
border-right-color: rgba(127,126,126,1.00);
border-right-width: 1px;
background-color: rgba(168,168,168,1.00);
background-image: url("../img/backgrounds/datagrid_header_background.jpg");
background-repeat: repeat-x;
overflow: hidden;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Chrome, Edge, Opera and Firefox */
}

.data-head{display: inline-block;}
.data-headf{position:absolute;display: block;}


/*--------------------- Datagrid Row -------------------------*/
/* .row_dg  --Normal single line--*/ 
/* .row-2-line_dg  --multiple line--*/ 
/* .row-nh_dg  --normal single line no hoover--*/

.row_dg, .row-2-line_dg, .row-nh_dg{ /* Row */
display: flex;
width: 100%;
line-height: 20px;
background-color: rgba(233,233,233,1.00);
border-bottom: 1px solid rgba(0,0,0,0.10);
overflow: hidden;
margin: 0;
padding: 0;
}

.row_dg, .row-nh_dg{flex-direction: row; /* keep cells horizontal inside row */ min-height: 20px;}
.row-2-line_dg{flex-wrap: wrap; /* allows items to wrap to the next line */ min-height: 40px;}

.row_dg:hover, .row-2-line_dg:hover{
cursor: pointer;
background-color: rgba(143,198,203,1.00) !important;
}

/*--------------------- Datagrid Cells -------------------------*/
.cell_dg, .cell-b_dg{
flex: 0 0 auto; /* don't grow or shrink */
box-sizing: border-box;
font-size: 11px;
font-family: 'Helvetica', 'Tahoma', 'Geneva', sans-serif;
height: 20px;
line-height: 20px;
text-align: left;
text-indent: 2px;
overflow: hidden;
margin: 0;
padding: 1px;
}

.row_dg > .cell-b_dg, .row-2-line_dg > .cell-b_dg, .row-nh_dg > .cell-b_dg{
border-right: solid;
border-right-color: rgba(191,191,191,0.70);
border-right-width: 1px;
}
.row_dg > .cell-b_dg:last-child, .row-2-line_dg > .cell-b_dg:last-child, .row-nh_dg > .cell-b_dg:last-child{border-right: none;}