html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	margin: 0 auto;
}

form {
	font-family: Nunito;
	font-size: 0.8em;
	color: #444;
	margin: 0 auto;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 100%;
	padding: 0px;
	width: 100%;
	line-height: 1.4em;
	overflow: hidden;
	background: #fff;
}

h1 { 
	margin-bottom:30px;
}

input { 
	font-family:Nunito;
	padding:3px 5px;
	border: solid 1px #ccc;
	border-radius:3px;
}

input:read-only  {
	background: #f8f8f8;
}

/* LOGIN */
.login {
	position: absolute;
	left: 50%;
	margin-left: -170px;
	top: 160px;
	border: solid 1px #ddd;
	padding: 10px;
	padding-bottom: 0px;
	width: 320px;
}

	.login h1 {
		background: #444;
		color: #fff;
		text-decoration: none;
		font-size: 1.2em;
		padding: 10px;
		margin-left: -10px;
		margin-top: -10px;
		width: 100%;
		text-align: center;
		margin-bottom: 20px;
	}

	.login .title {
		display:inline-block;
		vertical-align:middle;
		width: 70px;
	}

	.login .value {
		display: inline-block;
		vertical-align: middle;
		width: calc(100% - 100px);
	}

	.login .clear {
		clear: both;
		height: 10px;
	}

	.login .loginbutton {
		margin-top: 10px;
		margin-bottom: 25px;
		text-align: right;
		width: calc(100% - 8px);
	}

	.login .input {
		width: calc(100% - 20px);
	}

	.login .button {
		font-family: Nunito;
		background: #666;
		color: #fff;
		border: solid 0px #fff;
		border-radius: 3px;
		padding: 5px 15px;
		font-size: 1.0em;
		transition: 0.25s;
	}

		.login .button:hover {
			background: #222;
			cursor: pointer;
		}

	.login .warning {
		background: #cc0000;
		padding: 8px 10px;
		color: #fff;
		margin-top: 10px;
		margin-left: -10px;
		width: 100%;
		text-align: center;
	}

/* MENU */
.menu { 
	display: inline-block; 
	vertical-align:top;
	width:199px;
	border-right: solid 1px #ccc;
	background: #f8f8f8;
	height:100vh;
}

.menu .logo {
	width:calc(100% - 40px);
	padding:20px;
}

.menu .logo img {
	width:100%;
}

	.menu .item a:link, .menu .item a:active, .menu .item a:visited {
		padding: 10px;
		font-size: 1.2em;
		display: block;
		transition: 0.25s;
		background: #444;
		border-bottom: solid 1px #aaa;
		width: calc(100% - 20px);
		text-decoration:none;
		color: #fff;
		transition:0.25s;
	}

	.menu .item a:link:hover, .menu .item a:active:hover, .menu .item a:visited:hover {
		background: #222;
		cursor:pointer;
	}

/* MAiIN*/
.main { 
	display:inline-block;
	width:calc(100% - 245px);
	padding:20px;
}

.main .dashboard { 
	max-width:1600px;
	margin:0 auto;
}

.block { 
	display:inline-block;
	vertical-align:top;
	margin-right:20px;
	margin-bottom:20px;
	width:220px;
	background: green;
	height:auto;
	padding:20px 20px 50px 20px;
	border: solid 0px #fff;
	border-radius:5px;
	text-align:center;
	color: #fff;
	position:relative;
}

.block .button { 
	position:absolute;
	bottom:0px;
	right:0px;
}

	.block .button .input {
		background: #444;
		color: #fff;
		border: solid 0px #fff;
		border-bottom-right-radius: 5px;
		border-top-left-radius: 5px;
		padding: 8px 15px;
		transition:0.25s;
		text-transform:uppercase;
		font-size:0.9em;
	}

	.block .button .input:hover { 
		cursor:pointer;
		background:#222;
	}

/* Filters */
.filters {
	background: #f8f8f8;
	padding: 10px 15px;
	display: inline-block;
	border: solid 0px #fff;
	border-radius: 5px;
	max-width: calc(100% - 10px);
}

.input { 
	font-family:Nunito;
	font-size:1.0em;
	border: solid 1px #ccc;
	padding:5px 5px;
	border-radius:3px;
}

	.input.warning {
		border: solid 1px #ffa500;
		background: #FFF0D6;
	}

input[type="text"] { 
	padding:6px 5px;
}

input[type="button"] {
	padding: 5px 5px;
}

.input:focus { 
	outline:none;
}

.rowlight .button, .rowdark .button {
	font-family:Nunito;
	background: #f8f8f8;
	color: #222;
	padding:6px 15px;
	border: solid 1px #ccc;
	border-radius:3px;
	transition:0.25s;
	margin:3px;
} 

.rowlight .button:hover, .rowdark .button:hover { 
	background: #e8e8e8;
	cursor: pointer;
}

.label {
	display: inline-block;
	vertical-align: middle;
	margin: 5px 10px 5px 0px;
}

.box {
	display: inline-block;
	vertical-align: middle;
	margin: 5px 10px 5px 0px;
}

.boxgap {
	display: inline-block;
	vertical-align: middle;
	margin: 5px 40px 5px 0px;
}

.box .info {
	color: #888;
	font-size: 0.9em;
	margin-bottom: 3px;
}

.gap {
	display: inline-block;
	margin-right: 30px;
}

.box input[type="text"] {
	border: solid 1px #ddd;
	border-radius: 3px;
}

	.box input[type="text"]:read-only {
		background: #FFFB9E;
	}

.box input[type="submit"] {
	border: solid 1px #aaa;
	border-radius: 3px;
	padding: 6px 20px;
	transition: 0.25s;
	background: #f4f4f4;
	color: #444;
}

	.box input[type="submit"]:hover {
		border: solid 1px #444;
		background: #444;
		color: #fff;
		cursor: pointer;
	}

	.box input[type="submit"]:disabled {
		opacity: 0.5;
	}

		.box input[type="submit"]:disabled:hover {
			opacity: 0.5;
			background: #f4f4f4;
			border: solid 1px #aaa;
			cursor: default;
			color: #444;
		}

.clear {
	clear: both;
	height: 30px;
}

.segments table, .segments td { 
	border: solid 1px #ddd;
	border-collapse:collapse;
}

.segments td {
	padding: 10px;
	background: #f8f8f8;
}

.note { 
	padding:20px;
	margin-bottom:20px;
	background: #f8f8f8;
	display:inline-block;
}

/* TABLES */
.itemtable { 
	margin-bottom:20px;
}
.rowheader { 
	background: #444;
	color: #fff;
}

.rowheader td {
	padding:10px 5px;
}

.rowlight, .rowdark {
	background: #fff;
	transition: 0.25s;
	height: 40px;
}

	.rowlight td, .rowdark td {
		border-bottom: solid 1px #ccc;
		padding: 5px;
	}

.rowlight:hover, .rowdark:hover { 
	background:#f8f8f8;
}

.rowtotal { 
	background: #eee;
	font-size:1.2em;
}

	.rowtotal td {
		padding: 12px 10px;
		border-bottom: solid 1px #ccc;
	}

.results { 
	margin-left:-2px;
	margin-bottom:20px;
}

.results .pagenumber {
	display: inline-block;
	vertical-align: middle;
	padding: 4px 0px 3px 0px;
	background: #f8f8f8;
	transition: 0.25s;
	margin: 2px;
	text-align: center;
	width:25px;
}

	.results .pagenumber:hover {
		cursor: pointer;
		background: #ddd;
	}

.results .pagenumber.selected {
	background: #444;
	color: #fff;
}

.title { 
	display:inline-block;
	vertical-align:middle;
	width:130px;
	margin-right:10px;
	color: #888;
}

.value {
	display: inline-block;
	vertical-align: middle;
	width: calc(100% - 150px);
	color: #444;
}

.value .checkboxlist td {
	min-width:140px;
	padding-right:20px;
}

	.value .checkboxlist.four td {
		min-width:300px;
	}

.value .checkboxlist input[type="checkbox"] {
	width:1.4em;
	height:1.4em;
	vertical-align:middle;
}

.value .checkboxlist label { 
	padding-left:5px;
	vertical-align:middle;
}

.customer .value {
	max-width: 520px;
}

.customer .clearline { 
	max-width:650px;
}

.clearline { 
	clear:both;
	height:0px;
	padding-bottom:10px;
	margin-bottom:10px;
	border-bottom:solid 1px #ddd;
	width:100%;
}

.customer .cleardeep {
	clear:both;
	height:40px;
}

.customer .tabs { 
	margin-bottom:20px;
	width:100%;
	max-width:650px;
	border-bottom: solid 1px #ccc;
}

.customer .tab { 
	display:inline-block;
	vertical-align:middle;
	margin-right:0px;
	background: #f8f8f8;
	border: solid 1px #ccc;
	border-bottom:none;
	padding:10px 20px;
	color: #444;
	transition:0.25s;
}

	.customer .tab:hover {
		background: #444;
		color: #fff;
		border: solid 1px #444;
		border-bottom: none;
		cursor:pointer;
	}

.customer .tab.selected {
	background: #444;
	color: #fff;
	border: solid 1px #444;
	border-bottom:none;
}

.controls  {
	margin:40px 0px;
}

.controls .button { 
	font-size:1.2em;
	padding:7px 20px;
	border: solid 1px #ccc;
	background: #f8f8f8;
	border-radius:5px;
	color: #444;
	transition:0.25s;
	margin-right:10px;
}

.controls .fade { 
	opacity:0.75;
}

.controls .button:hover { 
	background: #444;
	color: #fff;
	border: solid 1px #444;
	cursor:pointer;
}

.light {
	color: #888;
	font-size: 0.85em;
}

.confirmed, .open {
	background: #54E24F
}

.cancelled, .expired {
	background: #DDD;
}

.checkedin {
	background: #48BC42;
}

.checkedout, .used { 
	background: #444;
}