@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

body {
	background:#ddd;
	color:#333;
	font-family: 'Montserrat', sans-serif;
	margin:0;
}

a:link, a:visited {
	color:#004d5e;
}
a:hover {
	color:#a00;
}

.contain {
	margin:auto 5%;
}

.content {
	display:flex;
}
.content .basic {
	flex-grow:1;
}

.smallcontain {
	box-shadow: 0 0 2em 0 rgba(0, 0, 0, 0.2);
	margin:2em 15%;
}

.basic {
	background:#fcfcfc;
	padding:15px;
}
.center {
	text-align:center;
}

.boxcontainer {
	display:flex;
	align-content:stretch;
	align-items:stretch;
	flex-wrap:wrap;
	justify-content:center;
	margin:auto 5%;
}
.box {
	background:#fcfcfc;
	box-shadow: 0 0 2em 0 rgba(0, 0, 0, 0.2);
	flex-grow: 1;
	margin: 25px;
	padding:15px 25px;
}
.box.max350 {
	max-width:350px;
}

.btnrow {
	margin:10px 0;
}
.btnrow .right {
	float:right;
}

form {
	margin:0 25px;
	font-size:0.9em;
}
form label.formlabel {
	display:block;
	font-size:1.15em;
	margin:20px 0 4px 0;
}
form input {
	border:1px solid #444;
	font-size:1.2em;
	padding:8px;
}
form input:read-only {
    background:#eee;
}
form input.inp_time {
	width:100px;
	text-align:center;
}
form input.inp_long {
	width:250px;
}
form input.inp_email {
	width:400px;
}
form input.savepending {
	border:1px solid #f00;
}
form input.error {
	background-color:#fdd;
	color:#a00;
}

#dlg_loading {
	text-align:center;
}

header#top {
	background:#fff;
	border-bottom:2px solid #004d5e;
	margin-bottom: 2em;
	padding-top:10px;
}
header#top .logo {
	color:#004d5e;
	text-decoration:none;
}
header#top .logo img {
	height:60px;
	width:60px;
	vertical-align:bottom;
}
header#top .logo h1 {
	display:inline;
	font-weight:700;
	padding:0 16px;
}
header#top .login {
	float:right;
	line-height:60px;
}
header#top .info {
	float:right;
	padding:12px 0 0 0;
}
header#top nav {
	background:#004d5e;
	clear:both;
	color:#fff;
	font-size:1em;
	margin-top:10px;
	padding:16px;
}
header#top nav ul {
	list-style:none;
	margin:0;
	padding:0;
	text-align:center;
}
header#top nav ul.breadcrumbs {
	text-align:left;
}
header#top nav ul.breadcrumbs li {
	display:inline;
	margin:15px 10px;
}
header#top nav ul.breadcrumbs li:not(:first-of-type)::before {
	content: '\00BB';
	margin-left: -10px;
	margin-right: 10px;
}
header#top nav ul.breadcrumbs li.count:not(:first-of-type)::before {
	content: '\25C8';
	margin-left: 0px;
	margin-right: 20px;
}
header#top nav ul.links li {
	display:inline;
	margin:15px 25px;
}
header#top nav a {
	border-bottom:2px solid #004d5e;
	color:#fff;
	font-weight:500;
	padding:2px;
	text-decoration:none;
}
header#top nav a:hover {
	border-bottom:2px solid #fff;
}


footer#bottom {
	color:#004d5e;
	clear:both;
	font-weight:500;
	margin-top: 2em;
	padding:1em 0;
}

ul li {
	padding:0.2em 0;
}	

/* Messages */
.message {
	border-bottom:2px solid #666;
	padding:5px 10px;
}
.message.error {
	background-color:#edd;
	border-color:#d00;
	color:#d00;
}
.message.warning {
	background-color:#fea;
	border-color:#860;
	color:#860;
}
.message.ok {
	background-color:#ded;
	border-color:#0a0;
	color:#0a0;
}
.message.open {
	background:#ddf;
	border-color:#00d;
	color:#00d;
}

.noshow {
	display:none;
}
.noopacity {
	opacity:0;
}

/* Timeclock Specific CSS */
.clock {
	background:#004d5e;
	color:#fff;
	font-size:8em;
	height:180px;
	line-height:180px;
}
.clock img {
	display:block;
	height:120px;
	margin:0 auto;
	padding:30px;
	width:120px;
}
.clock .sec {
	display: inline-block;
	font-size:50%;
	padding-left:15px;
	text-align:left;
	width: 1.25em;
}
.date {
	background:#004d5e;
	color:#fff;
	height:30px;
}
.infopanel {
	height:300px;
}
#clockstatus {
	font-size:1.75em;
}
#eventmessage {
	font-size:2.5em;
	padding:0.25em;
}

/* Left Nav Links */
nav.leftlinks {
	background:#fff;
	border-bottom:1px solid #004d5e;
	border-left:1px solid #004d5e;
	border-right:1px solid #004d5e;
	margin:-2em 35px 0 0;
	min-width:175px;
	padding:20px 10px 20px 0;
	width:175px;
}

nav.leftlinks a {
	display:block;
	padding:10px 25px;
}
nav.leftlinks a:hover {
	background:#c2eaf3;
	border-radius:0 20px 20px 0;
}
nav.leftlinks a.current {
	background:#004d5e;
	border-radius:0 20px 20px 0;
	color:#fff;
	margin-right:-25px;
}
nav.leftlinks hr {
	border-top:1px solid #004d5e;
	margin-left: 10px;
}

/* Content head */
header.contentdetails {
	margin:5px 0 20px 0;
}
header.contentdetails h2 {
	font-size:1.4em;
	font-weight:bold;
	margin: 8px 0;
}
header.contentdetails h3 {
	font-size:1.1em;
	font-weight:500;
	margin:8px 0;
}
header.contentdetails .tags a {
	background:#eee;
	border-top:2px solid #aaa;
	border-bottom:2px solid #aaa;
	border-left:2px solid #aaa;
	border-radius:10px 0 0 10px;
	font-size:0.8em;
	padding:2px 0 2px 6px;
	text-decoration:none;
}
header.contentdetails .tags a.addtag::after {
	background:#aaa;
	border:2px solid #aaa;
	border-radius: 0 10px 10px 0;
	content:'+';
	color:#fff;
	font-weight:bold;
	padding:2px 6px;
	margin:0 -20px 0 6px;
	text-decoration:none;
}

/* Common table */
table.commontable {
	border-collapse:collapse;
}
table.commontable.full {
	width:100%;
}
table.commontable.smalltext {
	font-size:12px;
}
table.commontable thead th {
	background:#999;
	color:#fff;
	font-weight:bold;
	padding:6px 12px;
}
table.commontable tbody td {
	border-bottom:1px solid #ddd;
	padding:6px 12px;
	vertical-align:top;
}
table.commontable tbody tr:nth-child(even) {
	background-color:#f2f2f2;
}
table.commontable tbody tr:hover {
	background-color:#c2eaf3;
}
table.commontable tbody tr.newrow {
	display:none;
}
table.commontable tfoot td {
	background:#004d5e;
	border-bottom:1px solid #ddd;
	color:#fff;
	padding:6px 12px;
	vertical-align:middle;
}

table.commontable .actionlinks a {
	background:#eee;
	border:1px solid #aaa;
	border-radius:6px;
	font-size:0.8em;
	line-height:30px;
	padding:5px 10px;
	white-space:nowrap;
}
table.commontable .actionlinks img {
	height:16px;
	width:16px;
}

/* Save Panel */
.pnl_savestate {
	box-shadow: 0 0 2em 0 rgba(0, 0, 0, 0.2);
	color:#fff;
	height:65px;
	padding:6px 10px;
	position:fixed;
	right:5%;
	top:10px;
	width:300px;
}
.pnl_savestate.success {
	background:#090;
}
.pnl_savestate.error {
	background:#900;
}
.pnl_savestate_closeicon {
	display:block;
	float:right;
}
.pnl_savestate_message {
	margin-right:24px;
}

/* Timeclock specific */
table.commontable .actual {
	color:#0a0;
	font-size:0.8em;
	font-weight:bold;
	padding:4px 0;
}