:root {
	--default: #00a8ff;
	--login: #00a8ff;
	--register: #00a8ff;
	--save: #00a8ff;
	--cancel: #00a8ff;
	--delete: #00a8ff;
	--addnew: #00a8ff;
	--print: #00a8ff;
	--find: #00a8ff;
	/*--clear: #e84118;*/
	--clear: #00a8ff;
	--showreport: #00a8ff;
	--excel: #00a8ff;
	--header: #F8EFBA;
	/*--headerto: #00a8ff;*/
	--headerto: #dff9fb;
	--tab: #CAD3C8;
	--tabselected: #ffdd59;
}

* {
	margin: 1px;
	font-family: Verdana;
	font-size: 11px;
	box-sizing: border-box;
}

.block {
	display: block;
}

.inline {
	display: inline-block;
}

/*.table {
	border: 1px solid grey;
	border-radius: 7px;
	min-width: 200px;
	min-height: 60px;
	vertical-align: top;
}

.header {
	border: 1px solid grey;
	border-radius: 7px;
	min-height: 25px;
	vertical-align: top;
	background-color: aquamarine;
}

.filter {
	border: 1px solid grey;
	border-radius: 7px;
	min-height: 25px;
	vertical-align: top;
}

.navigation {
	border: 1px solid grey;
	border-radius: 7px;
	min-height: 25px;
	vertical-align: top;
}

.row {
	border: 1px solid grey;
	border-radius: 7px;
	min-height: 25px;
	vertical-align: top;
}
.footer {
	border: 1px solid grey;
	border-radius: 7px;
	min-height: 25px;
	vertical-align: top;
}
*/

.cell {
	min-width: 25px;
	min-height: 25px;
	vertical-align: top;
	text-align: left;
}

.template {
	border: 1px solid grey;
	border-radius: 7px;
	min-height: 25px;
	vertical-align: top;
}

.label {
	width: 150px;
	font-weight: normal;
	padding: 5px 5px;
}

/*.textbox {
	width: 150px;
	border-radius: 3px;
	padding: 5px 10px;
	border: 1px solid #ccc;
}

.dropdown {
	width: 150px;
	border-radius: 3px;
	padding: 5px 10px;
	border: 1px solid #ccc;
}
.button {
	min-width:100px;
	background-color:aquamarine;
	border-radius:3px;
	padding:5px 10px;
	border:1px solid #ccc;
}*/
.textarea {
	width: 150px;
	height: 50px;
	border-radius: 3px;
	padding: 5px 10px;
	border: 1px solid #ccc;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.top {
	vertical-align: top;
}

.middle {
	vertical-align: middle;
}

.bottom {
	vertical-align: bottom;
}

.hidden {
	display: none;
}

.deleted {
	display: none;
}

.required {
	border-color: red !important;
}

.invalid {
	border-color: red;
	background-color: #fbf470;
}

/*.tab {
	border: 1px solid grey;
	border-radius: 5px;
	cursor: pointer;
}

.tabbody {
	border: 1px solid grey;
	border-radius: 5px;
	width: 100%
}

.tabselected {
	background-color: aquamarine;
}*/

.tabclose {
	margin-left: 15px;
	cursor: pointer;
}

.button {
	border: none;
	color: white;
	min-width: 100px;
	padding: 7px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 11px;
	transition-duration: 0.4s;
	cursor: pointer;
	background-color:var(--default);
}

	.button:hover {
		background-color: white;
		color: var(--default);
		border: 1px solid var(--default);
	}

.button[value="Login"] {
	background-color: var(--login);
	color: white;
	border: 1px solid white;
}

		.button[value="Login"]:hover {
			background-color: white;
			color: var(--login);
			border: 1px solid var(--login);
		}

	.button[value="Reload Captcha"] {
		background-color: var(--login);
		color: white;
		border: 1px solid white;
	}

		.button[value="Reload Captcha"]:hover {
			background-color: white;
			color: var(--login);
			border: 1px solid var(--login);
		}


	.button[value="Register"] {
		background-color: var(--register);
		color: white;
		border: 1px solid white;
	}

		.button[value="Register"]:hover {
			background-color: white;
			color: var(--register);
			border: 1px solid var(--register);
		}

	.button[value="Save"] {
		background-color: var(--save);
		color: white;
		border: 1px solid white;
	}

		.button[value="Save"]:hover {
			background-color: white;
			color: var(--save);
			border: 1px solid var(--save);
		}

	.button[value="Cancel"] {
		background-color: var(--cancel);
		color: white;
		border: 1px solid white;
	}

		.button[value="Cancel"]:hover {
			background-color: white;
			color: var(--cancel);
			border: 1px solid var(--cancel);
		}

	.button[value="Delete"] {
		background-color: var(--delete);
		color: white;
		border: 1px solid white;
	}

		.button[value="Delete"]:hover {
			background-color: white;
			color: var(--delete);
			border: 1px solid var(--delete);
		}

	.button[value="Add New"] {
		background-color: var(--addnew);
		color: white;
		border: 1px solid white;
	}

		.button[value="Add New"]:hover {
			background-color: white;
			color: var(--addnew);
			border: 1px solid var(--addnew);
		}

	.button[value="Find"] {
		background-color: var(--find);
		color: white;
		border: 1px solid white;
	}

		.button[value="Find"]:hover {
			background-color: white;
			color: var(--find);
			border: 1px solid var(--find);
		}

	.button[value="Print"] {
		background-color: var(--print);
		color: white;
		border: 1px solid white;
	}

		.button[value="Print"]:hover {
			background-color: white;
			color: var(--print);
			border: 1px solid var(--print);
		}

	.button[value="Clear"] {
		background-color: var(--clear);
		color: white;
		border: 1px solid white;
	}

		.button[value="Clear"]:hover {
			background-color: white;
			color: var(--clear);
			border: 1px solid var(--clear);
		}

	.button[value="Show Report"] {
		background-color: var(--showreport);
		color: white;
		border: 1px solid white;
	}

		.button[value="Show Report"]:hover {
			background-color: white;
			color: var(--showreport);
			border: 1px solid var(--showreport);
		}

	.button[value="Excel"] {
		background-color: var(--excel);
		color: white;
		border: 1px solid white;
	}

		.button[value="Excel"]:hover {
			background-color: white;
			color: var(--excel);
			border: 1px solid var(--excel);
		}

	.button[value="Log Out"] {
		background-color: var(--cancel);
		color: white;
		border: 1px solid white;
	}

		.button[value="Log Out"]:hover {
			background-color: white;
			color: var(--cancel);
			border: 1px solid var(--cancel);
		}

.table {
	/*border: 1px solid grey;*/
	min-width: 200px;
	min-height: 60px;
	vertical-align: top;
}

.header {
	border-bottom: 1px solid grey;
	min-height: 25px;
	vertical-align: top;
	background: linear-gradient(to right,var(--header), var(--headerto));
}
	.header .label {
		font-size: 12px;
		font-weight: bold;
		color: black;
	}

.filter {
	border: 1px solid grey;
	border-radius: 7px;
	min-height: 25px;
	vertical-align: top;
}

.navigation {
	border-bottom: 1px solid grey;	
	min-height: 25px;
	vertical-align: top;
}

.row {
	/*border-bottom: 1px solid grey;*/	
	min-height: 25px;
	vertical-align: top;
}
.footer {
	border-bottom: 0px solid grey;
	min-height: 25px;
	vertical-align: top;
}

.tab {
	border: 1px solid var(--tab);
	cursor: pointer;
	transition-duration: 0.4s;
}

	.tab:hover {
		background-color: var(--tabselected);
		cursor: pointer;
	}

.tabbody {
	border: 1px solid white;
	width: 100%
}

.tabselected {
	background-color: var(--tabselected);
	color:black;
	outline-style:none;
}
.textbox {
	width: 150px;
	padding: 5px 10px;
	border: 1px solid #ccc;
}
	.textbox:focus {
		outline-style: solid;
		outline-color: var(--addnew);
		outline-width: thin;
	}

.dropdown {
	width: 150px;
	padding: 5px 10px;
	border: 1px solid #ccc;
}
	.dropdown:focus {
		outline-style: solid;
		outline-color:var(--addnew);
		outline-width:thin;
	}

input[type="checkbox"]:focus {
		outline-style: solid;
		outline-color: var(--addnew);
		outline-width: thin;
	}