/***********************************BOX CONTAINER*****************************/

DIV.listoutputbox
{
	background:#FFFFFF;
	box-sizing:initial;
}


/***********************************CONTROLS****************************************/

/***********************************LISTOUTPUT CONTAINER*****************************/

.lo_container
{
	position:relative;
	padding:0px;
	margin:0px;
	width:100%;
	border-top:solid 1px #DDDDDD;
	height:0px;
	overflow:hidden;
	background: #FFFFFF;
	z-index:1;
}

.lo_container table
{
	border-collapse:collapse;
}

/***********************************DIV COLUMNS****************************************/

DIV#left, DIV#center, DIV#right
{
	background : #FFF !important;
	overflow:hidden;
}

DIV#center{position:absolute;top:0px;left:0px;z-index:20;height:10px;}
/*extends dark border all the way down the right column*/
DIV#right {position:absolute;top:0px;right:0px;width:10px;z-index:40;border-left:1px solid #777777;}

/*extends dark border all the way down the right column*/
DIV#left  {position:absolute;top:0px;left:0px; width:10px;z-index:10;border-right:1px solid #777777;}

/*this is not really a column but is at the same level as the columns*/
DIV#bottom_shadow{width:100%;height:6px;position:absolute;bottom:4px;left:0px;}

/***********************************DIV CONTAINERS****************************************/
DIV#left_container, DIV#center_container, DIV#right_container
{}

/*set the column containers overflows to auto*/
DIV.fixed_columns{overflow-x:auto;overflow-y:auto;}

/*right container should have the horizontal scrollbar displayed*/
#right_container{overflow-y:auto;}

/*add borders to the bottom of the containers, this is useful for when there is a horizontal scrollbar
underneath the center column*/
#left_container, #center_container, #right_container{border-bottom:1px solid #AAA;}

/***********************************DIV FLOATING CONTAINERS****************************************/
DIV#left_header_container, DIV#center_header_container, DIV#right_header_container,
DIV#left_footer_container, DIV#center_footer_container, DIV#right_footer_container
{}

DIV#left_header_container{overflow:hidden;width:100%;position:absolute;top:0px;left:0px;}
DIV#left_footer_container{overflow-x:hidden;width:100%;position:absolute;bottom:0px;}

DIV#center_header_container{overflow-x:hidden;width:100%;position:absolute;top:0px;}
DIV#center_footer_container{overflow-x:hidden;width:100%;position:absolute;}

DIV#right_header_container{overflow-x:hidden;width:100%;position:absolute;top:0px;left:-2px;}
DIV#right_footer_container{overflow-x:hidden;width:100%;position:absolute;bottom:0px;left:-2px;}

/*padding to fix display issue*/
#right_header_container, #right_footer_container{padding-left:2px;}

/*add a border to the floating footer containers so that they pop more*/
DIV#left_footer_container, DIV#center_footer_container, DIV#right_footer_container{border-top:1px solid #AAA;}

/***********************************LO TABLES****************************************/

TABLE#left_table,TABLE#left_table_head,TABLE#left_table_foot,
TABLE#center_table,TABLE#center_table_head,TABLE#center_table_foot,
TABLE#right_table,TABLE#right_table_head,TABLE#right_table_foot
{}

/*set all the floating listoutput tables to fixed layout so they display correctly
NOTE: the main lo tables #left_table, #center_table, #right_table will be changed to
layout fixed after their width information is gathered*/
#left_table_head, #left_table_foot, #right_table_head, #right_table_foot, #center_table_head, #center_table_foot{table-layout:fixed;}

TABLE.lo_table{}

#right_table_head, #right_table_foot, #center_table_head, #center_table_foot{position:absolute;}
#center_table_head, #center_table_foot{left:0px;}

/*handle the borders for the left and right tables*/
#left_table, #left_table_head, #left_table_foot{border-right:#777777 1px solid;border-left:#DDDDDD 1px solid;border-collapse:collapse;}
#right_table, #right_table_head, #right_table_foot{border-left:#777777 1px solid !important;border-right:#DDDDDD 1px solid;border-collapse:collapse;}


/***********************************LO TABLE ROW****************************************/
TR.lo_row{height:28px;}
TR#LO_header_row{}
TR#LO_header_upper_row{}
TR.LO_filter_row{}


/*add a top border to the colspan rows to make them distinguishable from the main rows*/
TR.lo_colspan_row{border-top:1px solid #DDD;}

/***********************************TABLE CELL FIELDS****************************************/
.LO_field {
	height: 26px;
	font-size: 12px;
	text-decoration: none;
	border-left: 1px solid #DDDDDD;
	white-space: nowrap;
	vertical-align:middle;
	padding: 0px 5px;
}

.LO_field_wrap {
	padding-left: 4px;
	padding-right: 4px;
	height: 26px;
	font-size: 12px;
	text-decoration: none;
	border-left: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
}

.LO_header {
	color:#333333;
	font-weight:bold;
	border-bottom: 1px solid #AAAAAA;
	border-left: 1px solid #DDDDDD;
	padding:5px;
	border-top: 0px solid #AAAAAA;
	background: #F6F6F6 repeat-x scroll left top;
	vertical-align:middle;
	-moz-background-clip: border;
	-moz-background-origin: padding;
	-moz-background-inline-policy: continuous;
}

TD.Upper_Header
{
	height:20px;
	width:0px;
	text-align:center;
	background:#B7B7FF repeat-x scroll 0% 0%;
}

.innerLO_field {
	color: inherit;
	font-size: 12px;
	text-decoration: none;
	vertical-align:middle;
}

.LO_field a:visited {
	color           : inherit !important;
	text-decoration : underline;
}

.LO_field a:link {
	color           : inherit !important;
	text-decoration : underline;
}
/****************************************MULTI**************************************************/
#left, #left_container, #left_header_container, #left_footer_container,
#center_table, #center_table_head, #center_table_foot
{
	width:100%;
}


/***********************************OTHER****************************************/
/*turn these off because they break listoutput*/
#ctime_div2, #ctime_div1, .time_picker_div
{
	display:none;
}

DIV#add_wraper DIV.lo_container
{
	border-right:1px solid gray;
}


DIV#LOy_layer_header
{
	position: absolute;
	visibility:hidden;
	top: 0;
	left: 0;
	margin:0px 0px 0px 0px;
	padding:0px;
	width:100%;
	height:0;
}

DIV#LOx_layer
{
	position: absolute;
	top: 0;
	visibility:hidden;
}

DIV#LOy_layer_header2
{
	position: absolute;
	z-index:10;
	visibility:hidden;
	top: 0;
	left: 0;
	margin:0px 0px 0px 0px;
	padding:0px;
	width:100%;
	height:0;
}

.right_buffer
{
	width:15px !important;
}

#LO_Body_Div
{
	z-index:100;
}

#lo_container
{
	z-index:300;
}

UL#lo_controls
{
	padding:0px;
	padding-left:10px;
	background-color:#FFFFFF;
	font-weight:600;
}
UL#lo_controls LI
{
	float:left;
	list-style-type: none;
	padding-right:10px;
	padding-left:0px;
	vertical-align:bottom;
}

UL#lo_controls LI#right
{
	float:right;
	list-style-type: none;
	padding-right:10px;
}

.LO_filterWrapper {
	position:relative;
	padding-left:18px;
	margin-bottom:2px;
	text-align:center;
}

TR.LO_filter_row .LO_header {
	vertical-align:top !important;
	border-left-color: transparent !important;
	background-color:#CDE !important;
	box-shadow: 0 -8px 2px -6px rgba(0, 0, 0, 0.2) inset !important;
}

TR.LO_filter_row input{width:100%;box-sizing:border-box;height:18px;min-width:50px;}

.LO_addFilter {
	background:url('DataTable/img/tiny_plus.png');
}
.LO_deleteFilter {
	background:url('DataTable/img/tiny_minus.png');
}
.LO_filterChange::before {
	content:'\25BC';
	color:#666;
}
.LO_addFilter, .LO_deleteFilter, .LO_filterChange {
	position:absolute;
	display:block;
	top:50%;
	left:0;
	width:16px;
	height:16px;
	line-height:16px;
	margin-top:-7px;
	cursor:pointer;
}

.LO_filterChange {
	left: auto;
	right:0;
	margin-top:-8px;
	width:20px;
	text-align:center;
}

.LO_filterList {
	position:absolute;
	z-index:99999;
	border:1px solid #AAA;
	border-radius:4px;
	background-color:#FEFEFE;
	box-shadow:5px 5px 4px 5px rgba(0,0,0,0.2);
	min-width:100px;
}

.LO_filterType {
	position: relative;
	padding-right: 40px;
	height: 20px;
	line-height: 20px;
	background: transparent;
	color: #000;
	cursor: pointer;
	white-space: nowrap;
}

.LO_filterType:hover {
	background-color: #34F;
	color: #FFF;
}

.LO_filterTypeText {
	padding: 0 10px;
	height: inherit;
	line-height: inherit;
}

.LO_filterTypeNegate {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 40px;
	line-height: 20px;
	border-left: 1px solid #AAA;
	background: #DDD;
	color: #000;
	text-align: center;
}

.LO_filterType + .LO_filterType .LO_filterTypeNegate {
	border-top: 1px solid #AAA;
}

.LO_filterTypeNegate:hover {
	background: #EEE;
}

.LO_filterToggle {
	display: inline-block;
	vertical-align: middle;
	margin-right: 2px;
	height: 18px;
	line-height: 16px;
	border: 1px solid #457;
	border-radius: 3px;
	background-color: #FFF;
	text-align: left;
	font-weight: normal;
	color: #000;
	cursor: pointer;
	overflow: hidden;
	margin-bottom:1px;
	margin-top:2px;
}

.LO_filterToggle:before,
.LO_filterToggle:after {
	content: 'OFF';
	display: inline-block;
	vertical-align: middle;
	padding: 0 5px;
	height: 100%;
	font-weight: bold;
}

.LO_filterToggle.es_MX:before,
.LO_filterToggle.es_MX:after {
	content: 'INACTIVO';
	display: inline-block;
	vertical-align: middle;
	padding: 0 5px;
	height: 100%;
	font-weight: bold;
}

.LO_filterToggle:before {
	content: 'Filters:';
	background-color: #6AD;
	color: #FFF;
	width:42px;
}

.LO_filterToggle.es_MX:before {
	content: 'Filtros:';
	background-color: #6AD;
	color: #FFF;
}

.LO_filterToggle.LO_filtering:after {
	content: 'ON';
}

.LO_filterToggle.LO_filtering.es_MX:after {
	content: 'ACTIVO';
}