/**************************************************/
/** Application Grid Layout                      **/
/**************************************************/

/** BEGIN Grid Layout **/

.GridStyle 
{
    border: 1px solid #DDD; 
    margin-top: 1px;
    width: 100%;
    font-size: 11px;
}

.GridStyle tr
{
    
}

.GridStyle tr td
{
    border-color: transparent;
}


/** Columns style **/

.GridStyle tr th
{
    border: 0;
    white-space: nowrap;
}

.Hidden, .NotVisible
{
    width: 0%;
    display: none;
}


/** Rows style **/

.RowStyle, .AlternateRowStyle, .SelectedRowStyle, .EditRowStyle, .FooterStyle
{
    height: 22px;
    line-height: 22px;
    cursor: pointer;
}

.AlternateRowStyle
{
    background-color: #ECECEC;/*blue: #D6DBE1; /*green:#DEF3CA;*/
}

.SelectedRowStyle, .SelectedRowStyle:hover
{
    border-bottom-width: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
    background-color: #999;/*blue: #3F6897; /*green:#30B457;*/
    color: #111;
}

.RowStyle:hover, .AlternateRowStyle:hover
{
    border-bottom-width: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
    background-color: #F2F2F2;/*blue: #E1E6EB; /*green:#30B457;*/
}

.RowStyle td, .AlternateRowStyle td, .SelectedRowStyle td, .EditRowStyle td, .FooterStyle td
{
    margin: 0;
    padding: 0px 5px 0px 5px;
    
    border-bottom-width: 0px;
    border-left-width: 0px;
    
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: #FFF;
      
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #E1E6EB;/*blue: #E1E6EB; /*green: #80A06F;*/
    
    /*Ellispis can't accept this: white-space: nowrap;*/
    vertical-align: middle;
}

.EditRowStyle, .EditRowStyle td, .EditRowStyle:hover
{
    padding: 1px 1px 1px 1px;
    border: 0px 1px 0px 1px;
    background-color: #F2F2F2;
}

.RowStyle td
{
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #DDD;/*blue: #E1E6EB; /*green: #80A06F;*/
}

/* edit controls in row */
.EditRowStyle td input[type=text],
.EditRowStyle td select
{
    width: 100%;
}
.EditRowStyle td textarea
{
    /* not 100% because paddings*/
    width: 95%;
}

.EditRowStyle td .FormFieldReadonly, .EditRowStyle td .FormFieldTransitionReadonly
{
    background-color: transparent;   
}

/** END Grid Layout **/




/** BEGIN ToolBar Buttons **/

.RowStyle td.ToolBarColumn, 
.AlternateRowStyle td.ToolBarColumn, 
.SelectedRowStyle td.ToolBarColumn, 
.EditRowStyle td.ToolBarColumn 
{
    padding: 0;
    
    text-align: right;
}


.ToolBarColumn 
{
    width: auto;
	height: 22px;	
}


th.ToolBarColumn
{
    text-align: center;
    width: 54px;
}

.ToolBarColumn .Icon20x20, .ToolBarColumn .Icon20x20Inactive, .ToolBarColumn div
{
	float: right;
}

th.ToolBarColumn .Icon20x20, th.ToolBarColumn .Icon20x20Inactive, th.ToolBarColumn div
{
	float: none;
}

.ToolBarColumn div
{
    display: inline-block;
}

.ToolBarColumn .Icon20x20 img ,
.ToolBarColumn .Icon20x20 input[type=image] 
{
	width: 20px;
	height: 20px;
}

/** END Content Contextual Buttons **/




/** BEGIN Header Layout **/
    
.HeaderStyle, .EmptyDataRowStyle
{
    color: #333;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
}

.HeaderStyle
{
    line-height: 1em;    
    height: 25px;
}

.EmptyDataRowStyle
{
    height: 24px;
    line-height: 24px;
}

.HeaderStyle th, .EmptyDataRowStyle td
{
    margin: 0;
    /*border: 0;*/
    padding: 0px 5px 0px 5px;
    white-space: nowrap; 
    font-weight: normal;
    vertical-align: middle;
}


 .EmptyDataRowStyle td div
 {
     display: inline;
     text-align: center;
 }
 
 .EmptyDataRowStyle td div .Icon20x20
 {     
     position: relative;
     display: inline;
     vertical-align: middle;
     float: right;
 }


.HeaderStyle th a
{
    color: #333;
    z-index: 100;
}

.HeaderStyle th .header-button
{
    font-size: 15px;
    line-height: 22px !important;
    display: inline-block;
    position: absolute;
    margin-left: 5px;
}

.HeaderStyle th .header-button input
{
    display: none;
}

/** END Header Layout **/




/** BEGIN Footer Layout **/

.FooterStyle
{
    border-bottom-width: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
    
    background-color: #CDD5DE;
    color: #777;
    font-weight: bold;
}

.FooterStyle td table tr td
{
    border-bottom-width: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
    
    padding: 0;
    margin: 0;
}

/** END Footer Layout **/





/** BEGIN GRID ELLIPSIS **/

th > div.C-L.C-LG
{
    padding-right: 20px;
}

th > div.C-L,
td > div.C-L:not(.FormCheckBox)
{
    position: relative;
    overflow: hidden;
    height: 2em;
}

td > div.C-L.FormCheckBox
{
	overflow: hidden;
	height: 2em; 
}

/* visible content */
th > div.C-L > span,
th > div.C-L > a,
td > div.C-L > span,
td > div.C-L > a
{
	display: block !important;
	position: absolute;	
	max-width: 100%;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 2em;		/* for vertical align of text */
	o-text-overflow: ellipsis;
}

td > div.C-L.FormCheckBox > span
{
    display: flex !important;
}

th > div.C-L > img
{
    position: absolute;
    right: 48%;
    top: -2px;
    height: 8px;
}

th > div.C-LG > a
{
    display: inline-block !important;
    position: relative;
    width: auto !important;
}

/* cell stretching content */
th > div.C-L:after,
td > div.C-L:after
{
    content: attr(title);
    overflow: hidden;
    height: 0;
    display: block;
}

/* fot dates/datetimes and booleans */
td > div.C-F:after
{
    white-space: nowrap;
}

/** END GRID ELLIPSIS **/

.GridStyle tr:not(.EmptyDataRowStyle)
{
    height: 36px;
    border-bottom: 1px solid #DFE2E5;
    background: #FFF;
    color: transparent;
}

.GridStyle tr.HeaderStyle,
.GridStyle tr.PagerStyle
{
    height: 45px;
    background: #F9FAFB;
}

.GridStyle tr:not(.EmptyDataRowStyle) th,
.GridStyle tr:not(.EmptyDataRowStyle) td
{
    color: #003D57;
}

.GridStyle tr.HeaderStyle th
{
    border-bottom: 1px solid #DFE2E5;
}

.GridStyle tr.HeaderStyle th.ToolBarColumn
{
    text-align: right;
}

.Container ~ div .GridStyle tr.HeaderStyle th.ToolBarColumn
{
    width: 20px;
}

.FormBox .GridStyle tr.HeaderStyle th.ToolBarColumn
{
    width: 80px;
}

.GridStyle tr.HeaderStyle th.ToolBarColumn:hover
{
    background: #F9FAFB;
    color: #003D57;
}

.GridStyle th > div.C-L > span, 
.GridStyle th > div.C-L > a, 
.GridStyle td > div.C-L > span, 
.GridStyle td > div.C-L > a
{
    font-size: 12px;
    padding-left: 0px;
}

.GridStyle th > div.C-L > span, 
.GridStyle th > div.C-L > a
{
    color: #003D57;
    font-weight: 800;
}

.HeaderStyle th:hover a
{
    color: #FFF;
}

.GridStyle th > div.C-L > a:hover
{
    color: #729CAE;
    text-decoration: underline;
}

.GridStyle tr.RowStyle:hover,
.GridStyle tr.SelectedRowStyle,
.GridStyle tr.SelectedRowStyle:hover,
.GridStyle tr.AlternateRowStyle
{
    background: #F9FAFB;
}

.GridStyle tr.RowStyle:hover,
.GridStyle tr.AlternateRowStyle:hover
{
    border-bottom-width: 1px;
}

.GridStyle tr td
{
    border: 0;
}

.HeaderStyle th[align="left"]:first-child
{
    padding-left: 10px;
}

.GridStyle tr:not(.PagerStyle) td
{
    padding: 0 5px;
}

.GridStyle tr:not(.PagerStyle) td.ToolBarColumn
{
    padding: 0;
}

.GridStyle tr:not(.PagerStyle) td[align="left"]:first-child
{
    padding-left: 10px;
}

.HeaderStyle th[align="right"]:not(.ToolBarColumn):last-child,
.GridStyle tr:not(.PagerStyle) td[align="right"]:not(.ToolBarColumn):last-child
{
    padding-right: 10px;
}

.GridStyle tr:not(.PagerStyle) td.ToolBarColumn
{
    height: 35px;
    border-bottom: 0;
    /*display: flex;*/
    align-items: center;
    justify-content: center;
}

.GridStyle tr:not(.PagerStyle) td.ToolBarColumn .grid-button
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    padding: 0;
    border-left: 1px solid #DFE2E5;
}

.GridStyle tr:not(.PagerStyle) td.ToolBarColumn .grid-button,
.GridStyle tr:not(.PagerStyle) td.ToolBarColumn .grid-button:before
{
    outline: 0;
}

.GridStyle tr:not(.PagerStyle) td.ToolBarColumn .Icon20x20:hover,
.GridStyle tr:not(.PagerStyle) td.ToolBarColumn .Icon20x20WithMargin:hover
{
    background: initial;
}

.GridStyle tr.PagerStyle .PagerInfoBox
{
    padding-left: 10px;
    height: 45px;
    line-height: 45px;
}

.GridStyle tr.PagerStyle .PagerNavigatorBox,
.GridStyle tr.PagerStyle .PagerNavigatorBox div
{
    height: 45px;
    line-height: 45px;
}

.GridStyle tr.PagerStyle .PagerNavigatorBox div
{
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #DFE2E5;
}

.GridStyle tr.PagerStyle .PagerNavigatorBox div.glyphicon
{
    font-size: 20px;
}

.GridStyle tr.PagerStyle .PagerNavigatorBox div > span
{
    padding-left: 5px;
    padding-right: 5px;
}

.GridStyle tr.PagerStyle .PagerNavigatorBox div.PagerFirstStyle,
.GridStyle tr.PagerStyle .PagerNavigatorBox div.PagerFirstDisableStyle,
.GridStyle tr.PagerStyle .PagerNavigatorBox div.PagerPreviousStyle,
.GridStyle tr.PagerStyle .PagerNavigatorBox div.PagerPreviousDisableStyle,
.GridStyle tr.PagerStyle .PagerNavigatorBox div.PagerNextStyle,
.GridStyle tr.PagerStyle .PagerNavigatorBox div.PagerNextDisableStyle,
.GridStyle tr.PagerStyle .PagerNavigatorBox div.PagerLastStyle,
.GridStyle tr.PagerStyle .PagerNavigatorBox div.PagerLastDisableStyle
{
    width: 45px;
}

.GridStyle tr.PagerStyle .PagerNavigatorBox div.PagerFirstDisableStyle.glyphicon,
.GridStyle tr.PagerStyle .PagerNavigatorBox div.PagerPreviousDisableStyle.glyphicon,
.GridStyle tr.PagerStyle .PagerNavigatorBox div.PagerNextDisableStyle.glyphicon,
.GridStyle tr.PagerStyle .PagerNavigatorBox div.PagerLastDisableStyle.glyphicon
{
    opacity: 0.6;
}

.GridStyle tr.PagerStyle .PagerNavigatorBox div input
{
    width: 20px;
    margin-left: 12px;
}

.GridStyle tr.PagerStyle .PagerNavigatorBox div .FormDropDownList
{
    margin-top: -7px !important;
}

.GridStyle tr.PagerStyle .PagerNavigatorBox div .CustomSelectContainer
{
    width: auto;
}

.EmptyDataRowStyle td .EmptyText
{
    margin-left: 10px;
}

.EmptyDataRowStyle td div .Icon20x20 
{
    margin-right: 5px;
}