@CHARSET "ISO-8859-1";
.notSelectable{
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}
.dN{
	display:none;
}
.dB{
	display:block;
}
.dI{
	display:inline;
}
.cB{
	clear:both;
}
.fL{
	float:left;
}
.fR{
	float:right;
}
.taL{
	text-align:left;
}
.taR{
	text-align:right;
}
.taC{
	text-align:center;
}
.childDataHead{
	float:left;
	clear:both;
	font-size:1.5em;
}
.dataGrid{
	float: left; clear: both;
	width: 98%;
}

.field-group{
	width: 30%;
	padding: 0.5% 1% ;
	float: left;
	position:relative;
}
.field-group .controls{
	position:relative;
}

.list_data_row .field-group{
	width: 20%;
} 
.list_data_row .column:first-child, .list_head_row .columnhead:first-child{
	width: 25%;
}

.list_data_row .column, .list_head_row .columnhead{
	float:left;
	padding: 2px;
	width: 15%;
}

.list_head_row{
	font-size: 1.04em;
	font-weight: bold;
	
}
.list_head_row, .list_data_row{
	width: 100%;
		
	height: 100%;
}

.list_data_row .controls{
	padding-top: 0.3em;
}

/**********
Button related
*********/
.remChildRow{
	 border: 0px;
	background-size: 1.03em;
	margin-top: 6px;
}

.addChildRow{
	float:left;
	padding-left: 0.5em;
	font-size: 1.3em;
	cursor: pointer;
	text-decoration:underline;
	color: blue;
	
}

/*************
Font size related
**************/
.fs1-5em{
	font-size: 1.5em;
}
.fs2em{
	font-size: 2em;
}
/************/
.error{
	color: #c00909;
	display: inline;
    
}
label.error{
	position:absolute;
	right: 16px;
	top: 0px;
}
.error:hover:after {
    background: #111;
    background: rgba(0,0,0,.8);
    border-radius: .5em;
    bottom: 1.45em;
    color: #fff;
    content: attr(errmsg);
    display: block;
    right: -1em;
    padding: .3em 1em;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    z-index: 98;
    font-size: 0.8em;
}

.error:hover:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0,0,0,.8) transparent;
    border-width: .4em .4em 0 .4em;
    bottom: 1.1em;
    content: "";
    display: block;
    left: -0.1em;
    position: absolute;
    z-index: 99;
    font-size: 0.8em;
}

div[id^='childTemplate_']{
	display:none;
}

/*** Div size for fields ***/
.field-size4ch{
	width: 4ch !important;
}

.field-size6ch{
	width: 6ch !important;
}

.field-size8ch{
	width: 8ch !important;
}

.field-size12ch{
	width: 12ch !important;
}

.field-size20ch{
	width: 20ch !important;
}

.field-size40ch{
	width: 40ch !important;
}

.fieldInputCheckbox > ul > li, .fieldInputRadio > ul > li{
	list-style-type: none;
	float:left;
	padding-left: 1%;
}





.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid blue; 
}

	.hasAutocomplete , .hasAutocomplete + div{
		float:left;
		
	}
	.hasAutocomplete + div{
		margin-left: -14px;
		margin-top:8px;
		left: 99%;
		top: 0px;
		z-index: 10;
		position:absolute;
	}
  /* Required for Down Triangle */
  .hasAutocomplete + div:before, .hasAutocomplete + div:after {
    content: "";
    position: relative;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-bottom: 0;
    
  }

  /* Stroke */
  .hasAutocomplete + div:before {
    bottom: -6px;
    right: 10px;

    /* If 1px darken stroke slightly */
    border-top-color: #f3f3f3;
    border-width: 8px;
  }

  /* Fill */
  .hasAutocomplete + div:after {
    bottom: -5px;
    right: 23px;
    border-top-color: #777;
    border-width: 5px;
  }
  
  .fieldSelect{
  	margin-top:4px;
  }
 
/*----------------------TAB UI specific style ---------------------*/
#loader{transition:all .3s ease-in-out;opacity:1;visibility:visible;position:fixed;height:50vmin;width:50vmin;background:#fff;z-index:90000}

#loader.fadeOut{opacity:0;visibility:hidden}

.spinner{width:40px;height:40px;position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);background-color:#333;border-radius:100%;-webkit-animation:sk-scaleout 1s infinite ease-in-out;animation:sk-scaleout 1s infinite ease-in-out}

@-webkit-keyframes sk-scaleout{0%{-webkit-transform:scale(0)}100%{-webkit-transform:scale(1);opacity:0}}

@keyframes sk-scaleout{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}

.dt-inline-input{
	width: 98%;
}
.dt-inline-input-cell{
	padding: 0px !important;
}
.header .header-container .nav-left>li>a, .header .header-container .nav-right>li>a{
		 line-height: 20px;
		 min-height: 20px;
		 font-size: 0.8em;
	}
	.dropdown-item{
		font-size: 0.8em;
	}
	#mainContent{
		min-height: calc(100vh - 55px);
		width: 100%;
	}
	#mainContent .divSection{
		height: calc(100vh - 50px);
		position:absolute;
		top: 50px;
		width: 100%;
	}
	#mainContent .dataRecords{
		width: calc(100% - 285px);
		height:  calc(100vh - 20px);
		position: absolute;
		top: 20px;
		left: 285px;
	}
	
	.nav-tabs{
		margin-left: 30px;
	}
	.nav-tabs li{
		background: #dddddd;
		cursor: pointer;
	}
	.nav-tabs li.active{
		background: #3333DD;
		cursor: pointer;
		color: white;
		padding: 3px;
		font-size: 0.9em;
		border: 1px solid #5555FF;
		border-radius: 5px 5px 0 0;
	}
	.page-container{
		padding-left:0px;
	}
	.header{
		width: 100%;
		height: 49px;
	}
	.header .header-container .nav-left > li > a {
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-ms-border-radius: 3px;
		-o-border-radius: 3px;
		border-radius: 3px;
		padding: 0px 2px;
		margin: 2px;
		border: 1px solid transparent;
		background-color: transparent;
	}
	.header .header-container .nav-left > li > a:hover {
		border-color: #81a4d0;
		background-image: none;
		background-color: #dbeeff;
		background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #dbeeff), color-stop(48%, #d0e7ff), color-stop(52%, #bbd2f0), color-stop(0%, #bed6f5));
		background-image: -webkit-linear-gradient(top, #dbeeff, #d0e7ff 48%, #bbd2f0 52%, #bed6f5);
		background-image: -moz-linear-gradient(top, #dbeeff, #d0e7ff 48%, #bbd2f0 52%, #bed6f5);
		background-image: -o-linear-gradient(top, #dbeeff, #d0e7ff 48%, #bbd2f0 52%, #bed6f5);
		background-image: -ms-linear-gradient(top, #dbeeff, #d0e7ff 48%, #bbd2f0 52%, #bed6f5);
		background-image: linear-gradient(top,#dbeeff, #d0e7ff 48%, #bbd2f0 52%, #bed6f5);
	}
	#mainTabs{

		clear:left;height:23px; width: calc(100% - 20px); border:1px solid #99bce8;  
		margin-left: 0px;
	background-color: #cbdbef;
	background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #dde8f5), color-stop(0%, #cbdbef));
	background-image: -webkit-linear-gradient(top, #dde8f5, #cbdbef);
	background-image: -moz-linear-gradient(top, #dde8f5, #cbdbef);
	background-image: -o-linear-gradient(top, #dde8f5, #cbdbef);
	background-image: -ms-linear-gradient(top, #dde8f5, #cbdbef);
	background-image: linear-gradient(top,#dde8f5, #cbdbef);

  }
  
  .page-title{
    display: none;
  }
  .row .bgc-white{
    padding: 0px !important;
    margin: 0px !important;
  }
  #div-tab1 .row .bgc-white{
    padding: 20px !important;
    margin: 0px !important;
  }
  
  
  .frameDivrecord, .frameDivlist{
		width:100%;height:100%
	}
	.x-splitter{
		height:100%;
		width: 7px; margin: 0px; right: auto; 
		left: 278px; top: 0px;
		z-index: 300;
	}

	.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter
	{
		float:none;
	}
	 .dataTabsNavContainer{

		
		width: calc(100% - 428px);
		height:  20px;
		position: absolute;
		top: 0px;
		left: 285px;
		overflow:hidden;
	
	}
	.dataTabsNav{
		position:absolute;
		width: calc(100% - 49px);
		height:  20px;
		position: absolute;
		top: 0px;
		left: 18px;
		overflow:hidden;
	}
	.dataTabsNav .dataTabs{

		
		width: 100% ;
		height:  20px;
		position: absolute;
		top: 0px;
		left: 0px;
		overflow:hidden;
	
	}

	.dataTabsNav .x-tab-bar-default-top{
		height: 25px;
		width: 19px;
		display: none;
	}
	.slimSelect{

		background-color: #fff; padding: 4px 0;
	}
	.x-box-scroller-tab-bar-default.x-box-scroller-left, .x-box-scroller-tab-bar-default.x-box-scroller-right{
		z-index: 20;
	}