*, :after, :before {
	box-sizing: inherit;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	color: #000000;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	font-weight: 400;
	line-height: 1.618;
	margin: 0;
	padding: 0;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

a {
	color: #1e4b75;
	text-decoration: none;
	transition: all .14s ease-out;
	-webkit-transition: all .14s ease-out;
}

a:active, a:hover {
	outline: 0;
}

div {
	display: block;
}

#header-outer {
	background-color: #262626;
	border-bottom: 5px solid #dd3333;
	line-height: 13px;
}

.container {
	margin: 0 auto;
	max-width: 1248px;
}

#header-inner {
	display: table;
	width: 100%;
}

#header-logo {
	display: table-cell;
	max-width: 15%;
	padding: 0 .5em;
}

#header-logo a {
	display: inline-block;
	padding: 1em 0 .5em;
}

#header-logo a img {
	border-style: none;
	display: block;
	line-height: 1;
	max-width: 200px;
	width: auto;
}

#header-menu {
	display: table-cell;
	float: right;
	max-width: 80%;
	overflow: hidden;
	padding: 0 .5em;
	position: relative;
	text-align: right;
	vertical-align: bottom;
}

#header-menu .menu-items {
	display: block;
	float: right;
}

#header-menu a {
	align-items: center;
	background-color: #262626;
	color: rgba(255,255,255,.79);
	display: inline-flex;
	font-size: .875em;
	font-weight: 600;
	line-height: 1;
	margin: 0;
	padding: 12px 13px;
	text-align: center;
	text-transform: uppercase;
	vertical-align: middle;
	-webkit-box-align: center;
}

#header-menu a.menu-burger {
	float: right;
}

#header-menu a.menu-item {
	float: left;
}

#header-menu a:hover, #header-menu a.menu-item-active {
	background-color: #dd3333;
	color: #ffffff;
}

#header-menu a.menu-burger {
	display: none;
}

/*
	When the screen is less than 600 pixels wide, hide all links, except for the active one. Show the menu burger icon.
	The "responsive" class is added to the menu with JavaScript when the user clicks on the burger icon. 
	This class makes the menu look good on small screens (display the links vertically instead of horizontally)
*/
@media screen and (max-width: 600px) {
	#header-menu {
		overflow: visible;
	}
	
	#header-menu .menu-items {
		display: grid;
		position: absolute;
		right: 0px;
		top: 100%;
		width: 200px;
	}
	
	#header-menu a.menu-item {
		height: 0px;
		opacity: 0;
		transition: all 0.5s ease;
	}
	
	#header-menu a.menu-burger {
		display: block;
	}
	
	#header-menu a.menu-burger span {
		background: #cdcdcd;
		border-radius: 2px;
		display: block;
		height: 3px;
		margin: 5px 0px;
		opacity: 1;
		position: relative;
		transform-origin: 2px 0px;
		transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
		width: 25px;
	}
	
	#header-menu a.menu-burger span.menu-burger-top {
		margin-top: 0;
		transform-origin: 0% 0%;
	}
	
	#header-menu a.menu-burger span.menu-burger-bottom {
		margin-bottom: 0;
		transform-origin: 0% 100%;
	}
	
	#header-menu.responsive .menu-item {
		height: 1em;
		opacity: 1;
	}
	
	#header-menu.responsive span.menu-burger-top {
		transform: rotate(45deg) translate(3px, -4px);
	}
	
	#header-menu.responsive span.menu-burger-middle {
		opacity: 0;
		transform: rotate(0deg) scale(0.2, 0.2);
	}
	
	#header-menu.responsive span.menu-burger-bottom {
		transform: rotate(-45deg) translate(3px, 3px);
	}
}

#titlebar-outer {
	border-bottom: 1px solid #eaecee;
	background: #f9f9f9;
	padding: 21px 0 22px;
	width: 100%;
}

#titlebar-inner {
	text-align: center;
}

#titlebar-inner h1 {
	color: #2b2b2b;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	font-size: 1.41575em;
	font-weight: 400;
	line-height: 1.216;
	margin: 0 0 .5407911001em;
	margin-bottom: 0;
}

#service_clock {
	display: table;
	width: 100%;
}

.service_clock_row {
	display: flex;
}

.service_clock_item {
	border: 1px solid #eaecee;
	flex: 1;
	margin: 15px;
	text-align: center;
}

.service_clock_top {
	display: table-cell;
	height: 25%;
	width: 30%;
}

.service_clock_top h1 {
	font-size: 2vw;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

.service_clock_top p {
	font-family: monospace;
	font-size: 4.5vw;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

.service_clock_top input {
	background: transparent;
	border: 0;
	font-size: 4.5vw;
	font-weight: bold;
	margin: 0;
	padding: 0;
	width: 90%;
}

input#input_service_duration {
	width: 2em;
}

.service_clock_bottom {
	height: 75%;
	width: 100%;
}

.service_clock_bottom h1 {
	font-size: 2vw;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

.service_clock_bottom p {
	font-family: monospace;
	font-size: 20vw;
	font-weight: bold;
	line-height: 1em;
	margin: 0;
	padding: 0;
}

.timecard_sector td {
	
}

.timecard_sector img {
	margin: 3px;
	max-height: 2rem;
	max-width: 2rem;
}

.timecard_banner_left {
	background-color: black;
	color: white;
	font-weight: bold;
	text-align: center;
}

.timecard_banner_right {
	background-color: #fdf248;
}

.timecard_box {
	border: 1px solid black;
	font-size: x-small;
	height: 3rem;
	text-align: left;
	vertical-align: top;
	width: 3rem;
}

.timecard_box_last {
	border-right: 1px solid black;
	margin-right: .5rem;
}

.timecard_title {
	font-size: medium;
	font-weight: bold;
	text-align: left;
	vertical-align: top;
}

.timecard_subtitle {
	font-size: small;
	text-align: left;
	vertical-align: top;
}

.timecard_box_title {
	font-size: x-small;
	text-align: center;
}

.timecard_spacer {
	width: .2rem;
}

.form-floating>.timecard_input {
	border: none;
	border-radius: 0;
	font-size: xx-large;
	height: 2.625rem;
	line-height: 1;
	padding: .375rem;
	text-align: center;
	width: 2.625rem;
}

.form-floating>.timecard_input:focus, .form-floating>.timecard_input:not(:placeholder-shown) {
	padding: .375rem;
}

.form-floating>.timecard_input:focus~label, .form-floating>.timecard_input:not(:placeholder-shown)~label {
	transform: scale(.85) translateY(-1rem) translateX(-.5rem)
}

.form-floating>label {
	
}