@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Montserrat');

/*DIV Definitions for flexible table*/

div.dbtable_container{
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 99%;
}

div.dbtable_header{
	flex: 0 0 auto;
	width: 95%;
}

div.dbtable_data{
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: visible;
	height: 100%;
	width: 100%;
}

div.dbtable_footer{
	flex: 0 0 auto;
	width: 100%;
}
/*END DIV Definitions for flexible table*/

table.data{
	border-collapse: collapse;
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	table-layout: fixed;
	/*box-shadow: 2px 2px 10px 3px gray;*/
}

table.data thead{
	border: 2px solid black;
	display: block;
}

table.data tfoot{
	border: 2px solid black;
	display: block;
}

table.data tbody{
	height: 100%;
	display: block;
	overflow-y: auto;
	border-left: 2px solid black;
	border-right: 2px solid black;
}	

table.data th,
table.data td
{
	overflow: hidden;
	white-space: nowrap;
	padding: 5px 6px;
	border: 1px solid hsla(100,0%,60%,1);
}

table.data thead th{
	background: hsla(180,75%,25%,1);
	color: white;
	font-size: 11pt;
	font-weight: normal;
}

table.dbform{
	padding: 4px 5px;
}

table.dbform td{
	padding: 2px 5px;
}

table.dbform p{
	font-size: 80%;
	padding: 0px;
}	

table.data tfoot tr{
	border-top: 2px solid black;
	border-bottom: 2px solid black;
	background: hsla(180, 50%, 80%, .5);	
}


/*Set Shading for every other row*/
table.data tbody tr:nth-child(odd){
	background: hsla(0, 0%, 80%, 0.8);
}

.data input,
.data textarea,
.data select{
	border: 1px solid hsla(0, 0%, 60%, .9);
	background: transparent;
	border-radius: 4px;
	/*margin: 3px 2%;*/
	padding: 2px 2%;
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	width: 95%;
	/*-webkit-appearance: none;*/
}

.data input.money{
	width: 80%;
	text-align: right;
	float: right;
}

span.money:before{
	font-style: italic;
	color: gray;
	content: "$ ";	
}

span.percent:after{
	font-style: italic;
	color: gray;
	content: " %";
}

.data input.percent{
	width: 80%;
	text-align: right;
	float: left;
}


.data input:disabled,
.data textarea:disabled, 
.data select:disabled,
.data input:read-only,
.data textarea:read-only,
.data textarea[readonly]{
	border: 1px dashed hsla(100, 0%, 0%, .2);
	color:	hsla( 0, 0%, 50%, 1);
}

.data input:hover,
.data textarea:hover,
.data select:hover{
	background: hsla(50, 100%, 50%, .15);
}

.data input:focus,
.data textarea:focus,
.data select:focus{
	border-color: hsla(200,100%, 50%, .75);
	background: hsla(200, 100%, 90%, .75);
}

.data input:read-only:focus,
.data textarea:read-only:focus,
.data select:read-only:focus
{
	border-color: red;
	/*border-color: hsla(50,100%, 50%, .75);*/
	background: hsla(50, 100%, 90%, .75);
}

.data input[type="button"], 
.data input[type="submit"],
.data button{
	box-shadow: 1px 1px 2px 1px hsla(0,0%, 0%, 0.25);
	max-width: 100%;
	margin: 0px;
	padding: 1px 2px;
}

.data input[type="button"]:hover, 
.data input[type="submit"]:hover,
.data button:hover{
	box-shadow: 1px 1px 2px 1px hsla(0,0%, 0%, 0.5);
	font-weight: bold;
	cursor: pointer;
}

.data input[type="button"]:disabled, 
.data input[type="submit"]:disabled,
.data button:disabled{
	box-shadow: none;
	font-weight: normal;
	cursor: default;
}

.data input::placeholder{
	color: hsla( 100, 30%, 60%, .5);
}


div.data{
	float: left;
	margin-right: 5px;
}

td.label{
	text-align: right;
	color: gray;
}

div.label{
	float: left;
	text-align: right;
	color: gray;
	font-size: 80%;
	margin-right: 5px;
}

table.data th.label{
	background: hsla(180, 50%, 80%, .5);
	font-family: Montserrat, Tahoma, San-serif;
	color: black;
	font-size: 20pt;
	font-weight: bold;
	text-shadow: 2px 2px 4px hsla(180,50%,20%,.60);
	text-transform: uppercase;
	width: 100%;
	padding: 5px 20px;
	text-align: left;
}

table.data th.label p{
	padding: 0px;
	margin: 0px;
}

table.data th.label input.table_button{
	font-family: Montserrat, Tahoma, San-serif;
	background: hsla(0,0%, 90%, .75);
	color: hsla(0,0%,25%, 1);
	padding: 2px 10px;
	margin: 0px 5px 5px 5px;
}

table.data th.label input{
	width: auto;
	background: white;
}

table.data div.controls{
	font-size: 10pt;
	float: right;
	color: black;
	text-shadow: 1px 1px 2px gray;
	padding: 2px 5px;
}

table.data a:link, 
table.data a:visited, 
table.data Span.action{
	text-decoration: underline;
	color: inherit;
}

table.data a:hover, 
table.data span.action:hover{
	text-shadow: 1px 1px 4px hsla( 200, 100%, 50%, .9);
	cursor: pointer;
}

table.dbform a:link, 
table.dbform a:visited, 
table.dbform Span.action{
	text-decoration: underline;
	color: inherit;
}

table.dbform a:hover, 
table.dbform span.action:hover{
	text-shadow: 1px 1px 4px hsla( 200, 100%, 50%, .9);
	cursor: pointer;
}


.commit{
	box-shadow: 0 0 4px 2px hsla( 100, 100%, 50%, .75);
}


.error{
	box-shadow: 0 0 4px 2px hsla( 360, 100%, 50%, .75);
}

.edit{
	box-shadow: none;
	transition: box-shadow 2s ease-in-out;
}

.required{
	border: 2px solid red;
}



table.data tbody tr.commit_row:nth-child(odd),
table.data tr.commit_row{
	border: 1px solid green;
	background: hsla( 100, 100%, 50%, .2);
}

table.data tbody tr.delete_row:nth-child(odd),
table.data tr.delete_row{
	border: 1px solid red;
	background: hsla( 360, 100%, 50%, .2);
	transition: background 2s;
}

table.data tr.add{
	border-top: none;
	background: hsla(100,75%,80%,0.2);
}


table.data tr.filter{
	border-top: none;
	background: hsla(50,75%,50%,0.2);
}

table.data tr.filter input,
table.data tr.filter select
{
	font-size: 75%;
	font-style: italic;
	color: hsla(0,50%,50%,1);	
}

table.data tr.filter input[type='button'],
table.data tr.filter input[type='submit']
{
	color: black;
}


/**********************************/
/*BEGIN DROPDOWN SEARCH DEFINITION*/
/**********************************/

input.DBsearch{
	border-color: hsla( 160, 80%, 50%, .75 );
}

input.DBsearch:hover{
	background: hsla( 160, 80%, 50%, .15);
}

input.DBsearch:focus{
	background: hsla(160, 80%, 50%, .75);
	border-color: hsla( 160, 80%, 90%, .75);
}

div.search_dropdown{
	position: absolute;
	max-height: 500px;
	/*width: 100%;*/
	border: 2px solid hsla(160, 80%, 20%, 1);
	background: hsla(160, 80%, 75%, .9);
	z-index: 500;
	overflow: auto;
	display: none;
	padding: 2px;
}

div.search_entry{
	white-space: nowrap;
	text-align: left;
}

div.add_search_entry{
	font-style: italic;	
}

div.search_entry:hover{
	background: hsla(160, 80%, 20%, 1);
	color: white;
	cursor: pointer;
}
/********************************/
/*END DROPDOWN SEARCH DEFINITION*/
/********************************/

/*****************************/
/*BEGIN DATA_PAGER DEFINITION*/
/*****************************/
div.data_pager{
	float: right;
	font-family: 'Roboto', sans-serif;
	border: 1px solid black;
	background: hsla(60, 100%, 75%, 1);
	font-size: 9pt;
	margin: 1px;
	padding: 1px;
}

div.data_pager input[type='text']{
	width: 20px;
}

div.data_pager p{
	margin: 2px;
	padding: 0px;
}


div.form_column{
	padding: 5px 5px;
	float: left;
}

div.clear_column{
	clear: both;
	padding-top: 10px;
}