body {margin: 0; padding: 0; background: #E0E0E0; font-family: 'Barlow', sans-serif;/**/}
form {margin: 0; padding: 0;}
hr {margin: 0; height: 1px; border: none; background-color: #000000; color: #000000;}
a {outline: none;}
img {border: none;}
.hidden {display: none;}
.right {text-align: right;}

/*------  Header  ------------------------------------------------------------------------------*/
header {background-color: #494949; padding: 10px 20px; display: flex; justify-content: space-between; background: url(images/header-bg3.jpg) repeat-x; box-shadow: inset 0 0 5px #4c3a2d;/**/}
	@media screen and (max-width: 650px) {header {position: fixed; top: 0; width: 100%; box-sizing: border-box; /* prevents padding from oversizing div */}}
.logo img {width: 155px;}
.menu_icon {display: none; font-weight: bold; color: #3f3f3f; cursor: pointer; font-size: 28px;}
	@media screen and (max-width: 650px) {.menu_icon {display: block;}}



/*------  Layout  ------------------------------------------------------------------------------*/
.layout {display: flex;} 
	@media screen and (max-width: 650px) {.layout {flex-direction: column; padding-top: 49px; /* height of header */ }}
#sidebar {
	display: block;
	min-width: 200px;
	background-color: #2d2d2d;
	padding: 10px 20px 20px 20px;
	
	/* animation properties */
	animation-duration: 0.15s;
	animation-direction: normal;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards; /* stay on last frame; don't reset */
}
	@media screen and (max-width: 650px) {#sidebar {display: none; position: fixed; overflow-y: scroll; height: 400px; width: 100%; box-sizing: border-box; border-radius: 0 0 10px 10px;}}
	@keyframes open-menu {
	  from {height: 0;}
	  to {height: 400px;}
	}
.main {
	flex-grow: 1;	/* stretch */
}

/*------  Menu  ------------------------------------------------------------------------------*/
.menu {}
	.menu a {
		display: block;
		margin: 10px 0;
		color: #c9c9c9;
		margin: 20px 0; 
		font-size: 20px;
		text-decoration: none;
	}
	@media screen and (max-width: 650px) {.menu a {font-size: 22px;}}

/*------  Content  ------------------------------------------------------------------------------*/
.content {
	margin: 20px 40px 20px 40px;
	padding: 20px 40px;
	background-color: #FFFFFF;
	border-radius: 10px;
	box-shadow: 0 0 5px #2d2d2d;
	
	/* animation properties */
	animation-name: fade-in;
	animation-duration: 0.15s;
	animation-direction: normal;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
}
	@keyframes fade-in {
	  from {opacity: 0;}
	  to {opacity: 1;}
	}
	@media screen and (max-width: 650px) {.content {margin-left: 0px; margin-right: 0px; padding: 20px 20px; animation-name: none;}}
	h1 {margin-top: 0;}

/*------  Dashboard  ------------------------------------------------------------------------------*/
.dash_buttons {display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;}
.dash_button {
	display: inline-block; 
	font-size: 45px; 
	text-decoration: none; 
	color: #FFFFFF;	/* icons that can be colored */
	text-shadow: 0 1px 2px #051833;
	text-align: center;
	border-radius: 10px;
	padding: 10px 40px;
	margin: 10px 0;
	border-top: 1px solid #4c4c4c;
	border-left: 1px solid #4c4c4c;
	border-bottom: 2px solid #4c4c4c;
	border-right: 1px solid #4c4c4c;
	background-color: #105bbc;
	background: linear-gradient(355deg, #105bbc 0%, #3d81db 100%);
	box-shadow: inset -2px -2px 2px #0e4184, inset 2px 2px 2px #6caafc, 2px 2px 6px #aaaaaa; /* bottom, top, shadow */
	-webkit-tap-highlight-color: transparent;
}
	.dash_button:active { box-shadow: inset 0 0 5px #092854; padding: 11px 40px 9px 40px;}
	.dash_button:hover .dash_label {color: #FFFFFF;}
.dash_label {font-size: 28px; font-weight: bold; color: #c3d9f7; }
.info_icon {font-size: 30px; display: inline-block;}

/*------  Tables / Forms ------------------------------------------------------------------------------*/
.top_buttons {text-align: right; margin-bottom: 5px;}

.form label {font-size: 14px; font-weight: bold; display: block;}
.form input {border-radius: 5px; width: 250px; padding: 5px; margin: 3px 0 10px 0; border: none; background-color: #EAEAEA; font-family: 'Barlow', sans-serif;}
.form input[type=checkbox] {width: 20px; height: 20px;}
.input_div {border-radius: 5px; width: 250px; padding: 5px; margin: 3px 0 10px 0; border: none; background-color: #EAEAEA; display: inline-block;}
.form select {border-radius: 5px 0 0 5px; width: 250px; padding: 5px; margin: 3px 0 10px 0; border: none; background-color: #EAEAEA; font-family: 'Barlow', sans-serif;}
.form textarea {width: 450px; height: 120px; border-radius: 5px 0 0 5px; padding: 5px; margin: 3px 0 10px 0; border: none; background-color: #EAEAEA; font-family: 'Barlow', sans-serif;}
	@media screen and (max-width: 650px) {.form textarea {width: 100%;}}
.form .checkbox_on {background-color: #338ae8; display: inline-block; width: 20px; height: 20px; border-radius: 10px; margin: 0 5px;}
.form .checkbox_off {background-color: #c9c9c9; display: inline-block; width: 20px; height: 20px; border-radius: 10px; margin: 0 5px;}
	@media screen and (max-width: 650px) {.form .checkbox_on, .form .checkbox_off {height: 30px; width: 30px; border-radius: 15px;}}
.form_error {color: #CC0000; font-weight: bold; font-size: 16px; margin-bottom: 20px; display: none;}

.date_picker {
	background-color: #f2f2f2; 
	color: #2d2d2d; 
	padding: 10px; 
	border: 1px solid #c9c9c9; 
	border-radius: 5px 0 0 5px;
}

.table {border-collapse: collapse; width: 100%;}
	.table td {padding: 10px; border: 1px dotted #B5B5B5;}
	.table tr:nth-child(even) {background-color: #f2f2f2;}
	.table tr:not(:first-child):hover {cursor: pointer; background-color: #5ab253; color: #FFFFFF;}
	.table th {padding: 10px 5px; text-align: left; font-size: 18px;}
	.table_header {border: 1px solid #B5B5B5; background: linear-gradient(0deg, #E2E2E2 0%, #FFFFFF 35%, #F1F1F1 100%); }
	.table_footer {pointer-events: none;} /* no hover */
	
.table_no_hover {border-collapse: collapse; width: 100%;}
	.table_no_hover td {padding: 10px; border: 1px dotted #B5B5B5;}
	.table_no_hover tr:nth-child(even) {background-color: #f2f2f2;}
	.table_no_hover th {padding: 10px 5px; text-align: left; font-size: 18px;}
	
fieldset {padding: 20px 10px; border-radius: 5px;}
legend {font-weight: bold; font-size: 24px;}

.form_align {display: inline-block;}	/* horizontal for desktop */
	@media screen and (max-width: 650px) {.form_align {display: block;}}	/* vertical for mobile */

/*------  Notification  ---------------------------------------------------------------------------*/
#message {background-color: #522b68; color: #FFFFFF; font-weight: bold; font-size: 18px; text-align: center; padding: 10px 0; border-radius: 10px; 
		/* animation properties */
		  animation-name: notification-open;
		  animation-duration: 0.25s;
		  animation-direction: normal;
		  animation-iteration-count: 1;
		  animation-fill-mode: forwards; /* stay on last frame; don't reset */
		  animation-timing-function: ease-out;}
		    @keyframes notification-open {
			  from {width: 0px; margin: 0 auto;}
			  to {width: 100%; margin: 0 auto;}
			}
			@keyframes notification-close {
			  from {width: 100%; margin: 0 auto;}
			  to {width: 0; margin: 0 auto; white-space: nowrap;}	/* hide it; don't wrap text or div will get taller */
			}
#message a {color: #FFFFFF; font-weight: normal;}
	
		
/*------  Buttons  ---------------------------------------------------------------------------*/
.button {
	display: inline-block;
	background-color: #2d2d2d;
	border: none;
	padding: 5px 20px;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 16px;
	border-radius: 5px;
	text-decoration: none;
	cursor: pointer;
}
	.button:hover {background-color: #341c37;}

.button_add {
	display: inline-block;
	background-color: #105bbc;
	border: none;
	padding: 5px 20px;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 16px;
	border-radius: 5px;
	text-decoration: none;
	cursor: pointer;
}
	.button_add:hover {background-color: #1265d1;}
	
.button_save {
	display: inline-block;
	font-family: 'Barlow', sans-serif;
	background-color: #29aa2b;
	border: none;
	padding: 5px 20px;
	color: #FFFFFF;
	text-shadow: 0 0 3px #124f13;
	font-weight: bold;
	font-size: 16px;
	border-radius: 5px;
	text-decoration: none;
	cursor: pointer;
}
	.button_save:hover {background-color: #2dbc2f;}
	
.button_cancel {
	display: inline-block;
	background-color: #2d2d2d;
	border: none;
	padding: 5px 20px;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 16px;
	border-radius: 5px;
	text-decoration: none;
	cursor: pointer;
}
	.button_cancel:hover {background-color: #212121;}
	
.button_delete {
	display: inline-block;
	background-color: #6D6D6D;
	border: none;
	padding: 5px 20px;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 16px;
	border-radius: 5px;
	text-decoration: none;
	cursor: pointer;
	font-size: 12px;
}
	.button_delete:hover {background-color: #930000; color: #FFFFFF;}

.button_back_top {
	width: 100%;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	background-color: #2d2d2d;
	margin-left: -10px;
	padding: 10px;
	color: #FFFFFF;
} .button_back_top:hover {background-color: #212121;}
.button_cancel_top {
	width: 100%;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	background-color: #2d2d2d;
	margin-right: -10px;
	padding: 10px;
	color: #FFFFFF;
} .button_cancel_top:hover {background-color: #212121;}
	
.back_button {
	display: inline-block;
	transform: rotate(180deg);
	cursor: pointer;
	font-size: 42px;
	text-decoration: none;
	color: #000000;
}

.stopwatch_button {font-size: 28px; display: inline-block; cusor: pointer; text-decoration: none; color: #000000; font-weight: bold;}
.send_message_button {text-decoration: none; color: #000000; font-size: 28px;}

/*------  Clock  ----------------------------------------------------------------------------*/
#clock_status {background-color: #444444; font-weight: bold; font-size: 20px; text-align: center; padding: 10px 0; border-radius: 5px;}
#clock_status_jobtask {margin-top: 5px; color: #BABABA; font-size: 14px; text-shadow: none;}
	.clocked_in {
		color: #A4EA72;
		text-shadow: 0 0 8px #5dce0c, 0 0 2px #1d1d1d; 
		/* animation properties */
		animation-name: clock-status-in;
		animation-duration: 0.50s;
		animation-direction: normal;
		animation-iteration-count: 1;
		animation-timing-function: linear;
	}
	.clocked_out {
		color: #F9F9F9;
		/* animation properties */
		animation-name: clock-status-out;
		animation-duration: 0.50s;
		animation-direction: normal;
		animation-iteration-count: 1;
		animation-timing-function: ease-out;
	}
	
	@keyframes clock-status-in {
	  from {transform: rotate3d(0,1,0,-180deg);}
	  to {transform: rotate3d(0,0,0,0);}
	}
	@keyframes clock-status-out {
	  from {#F9F9F9; transform: rotate3d(0,1,0,-180deg);}
	  to {transform: rotate3d(0,0,0,0);}
	}

.button_clock_big {
	margin: 25px auto;
	width: 150px;
	height: 90px;	/* first half of width */
	padding-top: 60px;	/* the other half of width */
	border-radius: 75px;  /* half of width */
	
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	color: #2b2a29;
	background: linear-gradient(0deg, #c8c7c1 0%, #FFFFFF 63%, #e3dfd6 100%);
	border-top: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	border-bottom: 2px solid #9b9b98;
	border-right: 1px solid #9b9b98;
	box-shadow: inset 2px 2px 1px #f7f3ea, inset -2px -2px 1px #adada9, 2px 2px 6px #A0A0A0;
	-webkit-tap-highlight-color: transparent;
}
	.button_clock_big:active {padding-top: 61px; height: 90px; background: linear-gradient(0deg, #b7b6b2 0%, #e5e5e5 63%, #d3cfc6 100%); box-shadow: inset 0 0 15px 8px #0066ed, 0 0 5px 2px #0066ed; border: 1px solid #0ba1c6; color: #006ce0; text-shadow: 0 0 14px rgba(73, 150, 252, 1);}
	
.button_clock_small {
	max-width: 300px;
	padding: 10px 0px;
	border-radius: 15px;
	margin: 25px auto;
	
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	color: #2b2a29;
	background: linear-gradient(0deg, #c8c7c1 0%, #FFFFFF 63%, #e3dfd6 100%);
	border-top: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	border-bottom: 2px solid #7c7c79;
	border-right: 1px solid #7c7c79;
	box-shadow: inset 2px 2px 1px #f7f3ea, inset -2px -2px 1px #adada9, 2px 2px 6px #A0A0A0;
	-webkit-tap-highlight-color: transparent;
}
	.button_clock_small:active {padding: 11px 0 9px 0; background: linear-gradient(0deg, #b7b6b2 0%, #e5e5e5 63%, #d3cfc6 100%); box-shadow: inset 0 0 5px 1px #8c8c8c;}

#offlineBox {background-color: #F9F9F9; color: #2d2d2d; font-weight: bold; font-size: 18px; text-align: center; padding: 10px 0;}


/*------  Signing  ----------------------------------------------------------------------------*/
.sign_green_button {
	display: inline-block;
	background-color: #48c435;
	background: linear-gradient(0deg, rgba(0,105,32,1) 0%, rgba(100,226,138,1) 65%, rgba(0,215,65,1) 100%); 
	text-shadow: 0 1px 2px #006915;
	border-radius: 10px;
	font-size: 28px;
	color: #FFFFFF;
	padding: 15px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.sign_red_button {
	display: inline-block;
	background-color: #c44f35;
	background: linear-gradient(0deg, rgba(105,0,0,1) 0%, rgba(226,100,100,1) 65%, rgba(215,0,0,1) 100%); 
	text-shadow: 0 1px 2px #68000c;
	border-radius: 10px;
	font-size: 28px;
	color: #FFFFFF;
	padding: 15px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

	@media screen and (max-width: 650px) {#signing_form {text-align: center;}}

/*------  Timesheet  ----------------------------------------------------------------------------*/
.break_total {text-indent: 20px; color: #757575;}
.record_input {border-radius: 5px; padding: 5px; margin: 3px 0 10px 0; border: 1px solid #c9c9c9;}
.record_input_select {margin: 3px 0 10px 0;}
.record_label {display: block; font-weight: bold;}
.timesheet_user {display: inline-block; padding: 5px; border: 2px solid #b26763; border-radius: 3px; background-color: #F4F4F4;}
	

/*------  Timesheet Log ----------------------------------------------------------------------------*/
.map_button {display: inline-block; cursor: pointer; font-size: 20px; margin: 0 10px;}
.edit_button {display: inline-block; transform: rotate(90deg); cursor: pointer; padding: 2px 5px; margin: 0 10px; font-size: 20px; text-decoration: none; color: #000000;}
.sign_button {display: inline-block; cursor: pointer; padding: 2px 5px; margin: 0 10px; text-decoration: none; font-size: 20px;}
.delete_button {display: inline-block; cursor: pointer; padding: 2px 5px; margin: 0 10px; font-size: 20px;}
	.edit_button:hover {border-radius: 5px; background-color: #297a0e; color: #FFFFFF;}
	.sign_button:hover {border-radius: 5px; background-color: #105bbc; color: #FFFFFF;}
	.delete_button:hover {border-radius: 5px; background-color: #7a0e29; color: #FFFFFF;}
.signed_yes {display: inline-block; font-size: 20px; margin: 0 10px;}
.injured_yes {display: inline-block; font-size: 20px; margin: 0 10px;}
.changes_button {display: inline-block; cursor: pointer; font-size: 24px; margin: 0 10px;}
	@media screen and (max-width: 650px) {
		.map_button {display: block; font-size: 28px;  margin: 10px 0;}
		.edit_button {display: block; font-size: 28px;  margin: 10px 0;}
		.sign_button {display: block; font-size: 28px;  margin: 10px 0;}
		.delete_button {display: block; font-size: 28px;  margin: 10px 0;}
		.signed_yes {display: block; font-size: 28px;  margin: 10px 0;}
		.injured_yes {display: block; font-size: 28px;  margin: 10px 0;}
		.changes_button {display: block; font-size: 28px; margin: 10px 0;}
	}
.review_button_row th {text-align: right;}
	.review_notification {border-radius: 5px; padding: 2px 10px; display: inline-block; border: 1px solid #fca016; box-shadow: 0 0 10px #c66701;}
	
/*------  Map  ----------------------------------------------------------------------------*/
.mapBox {height: 250px;} /* height must be specified for map to show */

/*------  Real-Time  ----------------------------------------------------------------------------*/
.green_light {display: inline-block; height: 20px; width: 20px; border-radius: 20px; background: #02dd2e; background: radial-gradient(circle, #02dd2e 50%, #003817 100%); box-shadow: 0 0 10px #00FF33;}
.green_light_off {display: inline-block; height: 20px; width: 20px; border-radius: 20px; background: #30754f; background: radial-gradient(circle, #30754f 30%, #143321 100%);}

/*------  Schedule  ----------------------------------------------------------------------------*/
.calendar {border-collapse: collapse; margin: 0 auto;}
	.calendar th {}
	.calendar td {width: 85px; height: 85px; vertical-align: top; border: 1px dotted #828282; padding: 5px 10px 10px 5px;}
	.calendar_date {display: inline-block;}
.calendar_title {font-size: 24px;}
.calendar_button {
	display: inline-block; 
	padding: 3px 10px; 
	background-color: #c9c9c9; 
	background: linear-gradient(180deg, rgba(204,204,204,1) 0%, rgba(149,149,149,1) 100%);
	box-shadow: 1px 1px 2px #2d2d2d;
	text-decoration: none; 
	color: #000000; 
	border: 1px solid #9b9b9b; 
	border-radius: 5px;
}
	.calendar_button:active {
		background: linear-gradient(180deg, rgba(149,149,149,1) 0%, rgba(149,149,149,1) 100%);
	}

	@media screen and (max-width: 650px) {
		.calendar {width: auto;}
		.calendar td {width: auto; height: auto;}
	}

.week_name {font-weight: bold; font-size: 22px; background-color: #F4F4F4; color: #1d4191; display: inline-block; padding: 5px 15px; border-radius: 5px; border: 2px solid #2d2d2d;}
.schedule_date_range {margin: -15px 0 20px 0; color: #515151; font-size: 20px;}
.week_selector {margin-top: 5px;}

.shift_box {display: flex; margin-bottom: 20px;}
.shift_day {width: 100px; font-size: 20px; display: inline-block; padding: 10px; background: linear-gradient(0deg, rgba(43,43,43,1) 0%, rgba(68,68,68,1) 100%); border-radius: 10px 0 0 10px; box-shadow: 0 2px 4px #2d2d2d; color: #ffffff; font-weight: bold; margin-top: 10px; align-self: flex-start;}
.shift_day_current {width: 100px; font-size: 20px; display: inline-block; padding: 10px; background: linear-gradient(0deg,rgba(21, 61, 77, 1) 0%, rgba(42, 123, 155, 1) 50%, rgba(33, 97, 122, 1) 100%); border-radius: 10px 0 0 10px; box-shadow: 0 2px 4px #2d2d2d; color: #ffffff; font-weight: bold; margin-top: 10px; align-self: flex-start;}
	.shift_date {font-size: 16px; font-weight: normal; padding-left: 10px; color: #afafaf;}
.shift_details {display: inline-block; padding: 10px; background: linear-gradient(0deg, rgba(198,198,198,1) 0%, rgba(229,229,229,1) 100%); border-radius: 10px; box-shadow: 0 2px 4px #2d2d2d;}
	.shift_time {font-weight: bold; font-size: 20px;}
	.shift_job_details {display: none; background-color: #ffffff; border-radius: 3px; padding: 6px; margin: 5px 0px 5px 5px; box-shadow: inset 2px 0 8px #2d2d2d;}
	.shift_job_button {
		display: inline-block; 
		cursor: pointer;
		padding: 1px 5px; 
		text-decoration: none; 
		color: #000000; 
		font-weight: bold;
		font-size: 18px;
	}
	.shift_indent {margin-left: 120px;}	/* Width + Padding of shift_day */
	
	@media screen and (max-width: 650px){
		.schedule_date_range{text-align: center;}
		.shift_box {display: block;}
		.shift_day, .shift_day_current {display: block; width: auto; border-radius: 10px 10px 0 0;}
		.shift_details {display: block; width: auto; border-radius: 0 0 10px 10px;}
		.shift_indent {margin-left: 0; border-radius: 10px;}
	}

.edit_schedule_button {display: inline-block; transform: rotate(90deg); cursor: pointer; padding: 2px 5px; margin: 0 10px; font-size: 20px; text-decoration: none; color: #000000;}

/*------  Weather  ----------------------------------------------------------------------------*/
.forecast {display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; display: none;}
.forecast_box {padding: 10px 20px; margin: 10px 20px; text-align: center; background: linear-gradient(-30deg, #c1bdb8 0%, #f4ede6 30%, #f4ede6 60%, #c1bdb8 100%); border-radius: 10px; box-shadow: 1px 2px 4px #7D7D7D;}
	.forecast_day {font-size: 24px;}
	.forecast_date {font-size: 16px; color: #666666; font-style: italic;}
	.forecast_temp {font-size: 40px; font-weight: bold; margin-top: 8px;}
	.forecast_icon {}
		.forecast_icon img {filter: drop-shadow(1px 1px 2px #000000);}
	.forecast_temp_min {font-size: 16px; font-weight: bold; margin-top: 0px;}
	.forecast_precipitation {font-size: 14px; margin-top: 10px;}
	/* Daily Report */
	.forecast_description {font-size: 18px; margin-top: 5px;}
	.forecast_extra_details {font-size: 14px; margin-top: 5px;}

.forecast_hourly {display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; padding: 10px 20px; background: linear-gradient(to bottom right, #88BDE1, #37326b/*#32496A*/); border-radius: 5px; display: none;}
.forecast_hourly_box {padding: 10px 20px; margin: 10px 5px; text-align: center; background: #F7F7F7; border-radius: 5px; box-shadow: 1px 2px 4px #7D7D7D;}

.forecast_jobs {font-size: 20px;}


/*------  Daily Report  ----------------------------------------------------------------------------*/
.report_desk {background: url(images/report-desk.jpg); border-radius: 20px;}
.report_page {width: 900px; margin: 20px auto 20px auto; padding: 20px 40px; box-shadow: 2px 1px 6px #666666; background: linear-gradient(to bottom right, #f8f8f8, #f8f8f8, #e8e8e8);}
.report_page_pdf {width: 736px; padding: 20px 40px; background: #FFFFFF;}	/* Letter Size: 816 x 1054;  */
	.report_title {font-size: 18px; color: #444444; text-align: center;}
	.report_job_name {font-size: 28px; font-weight: bold; text-align: center;}
	.report_date {font-size: 18px; color: #444444; text-align: center; margin-bottom: 15px;}
	.report_business_name {font-size: 18px; font-weight: bold; letter-spacing: 2px; margin: 10px 0; padding: 5px 0; border-radius: 3px; text-align: center; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(56,183,113,1) 15%, rgba(56,183,113,1) 50%, rgba(56,183,113,1) 85%, rgba(255,255,255,0) 100%); color: #FFFFFF;}
	.report_heading {margin-top: 10px; padding: 2px 5px; /*background-color: #2f456c; border-radius: 5px 0 0 5px;*/ border-bottom: 1px solid #2d2d2d; color: #2d2d2d; font-weight: bold; font-size: 18px;}
	.report_summary {margin: 10px 0; border: none; width: 100%;}
	.report_notes {display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;}
		.report_note_box {padding: 5px; width: 260px; text-align: center;}
		.report_note_box img {max-height: 250px; max-width: 250px; border-radius: 5px;}
		.report_note_box p {}
	.report_safety {}
	.report_weather {}
	.report_signature {margin-top: 40px; border-bottom: 1px solid #000000;}
	.report_signature_name {margin-top: 5px;}
	.report_saved_date {margin: 10px 0; font-size: 14px; font-style: italic; color: #666666; text-align: center;}

@media screen and (max-width: 650px) {
	.report_desk {background: none;}
	.report_page {width: auto;}
}

/*------  Signature  ----------------------------------------------------------------------------*/
#signature_box {width: 500px; height: 150px; border: 1px dotted #2d2d2d; border-radius: 5px;}
#signature_clear {width: 500px; text-align: right;}
#signature_current_box {width: 500px; padding: 0; border: 1px dotted #2d2d2d;}
#signature_current {width: 500px;}
#signature_delete {width: 500px; text-align: right;}

@media screen and (max-width: 650px) {#signature_box, #signature_clear, #signature_current, #signature_current_box, #signature_delete {width: 100%;}}

/*------  Help  ----------------------------------------------------------------------------*/
.help_link {display: block; padding: 5px 0 5px 20px; font-size: 22px;}

/*------  Overlay  ----------------------------------------------------------------------------*/
#overlay {
	display: none;
	position: fixed; /* on top of the page content */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: rgba(0,0,0,0.75); /* Black background with opacity */
	z-index: 100; /* Specify a stack order in case you're using a different order for other elements */
	
	text-align: center;
}
	.loading_box {
		display: none;
		width: 220px;
		height: 220px;
		border-radius: 110px;	/* half the diameter */
		background-color: #1F1F1F;
		background: radial-gradient(circle, rgba(57,56,55,1) 0%, rgba(31,31,31,1) 65%, rgba(31,31,31,1) 100%);
		box-shadow: 2px 2px 6px 4px #1d1d1d, 2px 2px 0px #000000, -3px -3px 0px #3d3d3d;	/* shadow, bottom bezel, top bezel */
		
		position: fixed;
		z-index: 101;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
		.loading_label {
			text-align: center;
			color: #FFFFFF;
			font-size: 32px;
			
			/* animation */
			  animation-name: loading-animation;
			  animation-duration: 0.35s;
			  animation-direction: alternate;
			  animation-iteration-count: infinite;
			  animation-timing-function: linear;
			
			width: 180px;
			height: 180px;
			line-height: 160px;	/* line height, minus a bit */
			border-radius: 90px;
			position: fixed;
			z-index: 101;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		@keyframes loading-animation {
		  from {
			box-shadow: inset 0 0 0 #009632, 0 0 0 #009632;
			border: 4px solid rgba(16, 243, 29, 0.0);	/* transparent, hidden */
		  }
		  to {
			box-shadow: inset 0 0 20px 0px #009632, 0 0 20px 0px #009632;
			border: 4px solid #10f31d; 
		  }
		}
	#loading, #syncing {
		position: fixed;
		z-index: 101;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.popup {
		position: fixed;
		z-index: 105;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		
		box-shadow: 2px 2px 2px 2px #303030, -2px -2px 2px 2px #353535, 2px 2px 10px 5px #000000;	/* bottom bezel, top bezel, shadow */
		
		overflow: auto;
		background-color: #FFFFFF;
		padding: 0 10px 10px 10px;
		border-radius: 5px;
		
		/* animation  */
		animation-name: popup-on;
		animation-duration: 0.25s;
		animation-direction: normal;
		animation-iteration-count: 1;
		animation-timing-function: ease-out;
	}
		@keyframes popup-on {
		  from {
			opacity: 0;
			top: 30%;
		  }
		  to {
			opacity: 1;
			top: 50%;
		  }
		}
	.popup_buttons {
		display: flex;
		justify-content: space-between;
	}
	.popup p {cursor: pointer;}
	
/*------  Login  ----------------------------------------------------------------------------*/
.login_holder {
	position: absolute;
	width: 350px;
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
}
	#login {
		width: 100%;
		height: 100%;
		padding: 40px 0;
		text-align: center;
		border-radius: 10px;
		box-shadow: 0 5px 10px #090909;
		background: #393838;
		background: linear-gradient(to bottom, #393838 0%, #1e1e1e 100%);
		
		/* animation  */
		animation-name: login-blur;
		animation-duration: 0.35s;
		animation-direction: normal;
		animation-iteration-count: 1;
		animation-timing-function: ease-out;
	}
		#login label {margin-left: 45px; font-size: 12px; font-weight: bold; color: #c9c9c9; display: block; text-align: left;}
		#login input {border-radius: 5px; width: 250px; padding: 5px; margin: 3px 0 10px 0; border: none; background-color: #EAEAEA;}
		#login_title {font-size: 18px; color: #C9C9C9; margin-bottom: 15px;}
		
		@keyframes login-blur {
		  from {filter: blur(20px);}
		  to {filter: blur(0);}
		}
	
/*------  Footer  ----------------------------------------------------------------------------*/
footer {
	background-color: #98799e;
	color: #ffffff;
	text-align: center;
}

/*--------- Print ---------------------------------------------------------------------------------*/
@media print {
	body {background: none;}
	header {display: none;}
	#sidebar {display: none;}
	.top_buttons {display: none;}
	.content {box-shadow: none; padding: 0;}
	/* Report Page */
	.report_controls {display: none;} 
	.report_page {box-shadow: none; border: none; background: none; padding: 0;} 
	.report_desk {background: none; padding: 0; margin: 0;}
	/* Schedule */
	.week_selector {display: none;}
}