@CHARSET "UTF-8";
/***********************************************************************************/
* {
	position:relative;
	margin:0px;
	padding:0px;
}
html {
	position:relative;
	height:100% !important;
}
body { 
	position:relative !important;
	margin:0px !important;
	min-width:320px;
	height:100% !important;
	font-family: 'Tahoma';
	color: #464646;
	font-size: 14px;
	line-height: 20px;
	overflow:hidden;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
a:focus, img {outline:none;}
img, a::-moz-focus-inner {border:0;}
input[type="submit"]::-moz-focus-inner {border:0;}
table {
	margin:auto;
}
a {
	cursor:pointer;
	color:dimgray;
	text-decoration:none;
}
a:hover {
	color: lightgray;
}
.clear {
	clear:both;
}
.center {
	text-align:center;
}
.vcenter {
	vertical-align:middle;
}
.bold {
	font-weight:bold;
}
.redborder {
	border-color:#ce3036 !important;
}
.red {
	color:red;
}
.error {
	color:#ce3036;
}
.small {
	font-size:10px;
}
.go_bottom {
	display:none;
}
.page {
	margin:0px auto;
	padding:0px 30px;
	max-width:1200px;
}
.page:after,
.after:after {
	content:"";
	display:block;
	clear:both;
}
#test {
	position:fixed;
	top:0px;
	padding:0px 10px;
	color:white;
	background:rgba(255,0,0,0.5);
	z-index:1000;
}
.center {
	text-align: center;
}

/********************************************************************/
body {
	
}
#log_in_div {
	
}
#log_in_form {
	position: absolute;
	display:table;
	width: 300px;
	height: 150px;
	left: 50%;
	top: 50%;
	margin-left: -150px;
	margin-top: -150px;	
	border-collapse:separate;
	border-spacing:20px;
	background:dimgray;
}
#log_in_form.hide {
	display:none;
}
.input_div {
	display:table-row;
}
.input_td {
	display:table-cell;
	width:50%;
	color:white;
	text-align:left;
	vertical-align:middle;
}
.input_td:first-child {
	text-align:right;
}
input {
	height: 22px;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.login {
	display:inline-block;
	padding:0px 20px;
	min-height:22px;
	line-height:22px;
	background:white;
}

#header_line {
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	background:rgba(255,255,255,0.5);
}
#header_line:after {
	content:"";
	display:block;
	clear:both;
}
button,
select,
#max_speed,
#last_speed {
	display:inline-block;
	float:left;
	margin: 2px 0px 2px 2px;
	padding:0px 5px;
	height:20px;
	color:inherit;
	font-family: inherit;
	text-decoration: none;
	
	border: 1px solid #dddddd;
	border-right-color: #464646;
	border-bottom-color: #464646;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
	border-radius: 2px;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
button {	
}
button.active,
#max_speed,
#last_speed {
	border: 1px solid #464646;
	border-right-color: #dddddd;
	border-bottom-color: #dddddd;
}
#max_speed:before {
	content:"↑ ";
}
#last_speed:before {
	content:"→ ";
}
#gps_day option[week_day="6"] {
	color:pink;
}
#gps_day option[week_day="7"] {
	color:red;
}

#status {
	display:inline-block;
	float:right;
	margin: 2px 2px 0px 2px;
	width:20px;
	height:20px;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
}

#map {
	/*display:none;*/
	position: absolute;
	top: 0px;
	left:0px;
	right:0px;
	bottom: 0px;
}
.marker {
	margin-top:-19px;
	width:48px;
	height:48px;	
	background-position:center;
	background-repeat:no-repeat;
	background-image:url("/css/images/favicon.svg?");
	background-size:contain;
	opacity:0.7 !important;
}
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
	display:none !important;
}
.mapboxgl-popup-content {
	bottom:42px;
	color:white;
	text-align:center;
	background: rgba(0,0,0,0.2) !important;	
	padding: 0px 2px !important;
	box-shadow: none !important;
	
	white-space: pre-line;
}
.mapboxgl-popup-anchor-left .mapboxgl-popup-content,
.mapboxgl-popup-anchor-right .mapboxgl-popup-content {
	bottom:62px;
}
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content {
	/*bottom:32px;*/
}
.mapboxgl-popup-close-button {
	display:none !important;
}
.mapboxgl-ctrl-top-right {
	top: 156px !important;
}

#right_line {
	position:absolute;
	top:24px;
	right:0px;
}
#right_line .speed_example {
	margin:2px;
	padding:0px 5px;
	text-align:right;
	background:rgba(255,255,255,0.5);
}

#footer_line {
	display:none;
	position:absolute;
	left:0px;
	right:0px;
	bottom:0px;
	background:rgba(255,255,255,0.5);
}
/*
#footer_line:before {
	content:"";
	position:absolute;
	margin-top:-1px;
	top:50px;
	left:0px;
	right:0px;
	
	border-top:1px dashed #464646;
	border-bottom:1px dashed #464646;
	opacity:0.5;
	z-index:1;
}
#footer_line:after {
	content:"";
	position:absolute;
	margin-top:-1px;
	top:25px;
	left:0px;
	right:0px;
	height:50px;
	
	border-top:1px dashed #464646;
	border-bottom:1px dashed #464646;
	opacity:0.5;
	z-index:1;
}
*/
.hours {
	border-bottom:20px solid transparent;
}
.hours:after {
	content:"";
	display:block;
	clear:both;
}
.hour {
	float:left;
	
	width:4.166666666666666%;
	height:100px;
	border-left:1px dashed #464646;
	border-right:1px dashed #464646;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.hour:first-child {
	border-left-color:transparent;
}
.hour:last-child {
	border-right-color:transparent;
}
.hour .time {
	position:absolute;
	margin-left:-1px;
	left:-30px;
	top:100%;
	width:60px;
	height:20px;
	text-align:center;
}
.hour:first-child .time {
	display:none;
}
.hour fieldset {
	position:absolute;
	margin-bottom:-5px;
	left:0px;
	right:0px;
	bottom:0px;
	line-height:10px;
	font-size:10px;
	text-align:center;
	border:none;
	border-top:1px dashed #464646;
	opacity:0.5;
}
.hour fieldset[speed="25"] {
	bottom:25px;
}
.hour fieldset[speed="50"] {
	bottom:50px;
}
.hour fieldset[speed="75"] {
	bottom:75px;
}
.hour fieldset legend {
	padding:0px 3px;
}
#footer_line lines {
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	height:100px;
	z-index:2;
}
#footer_line lines line {
	position:absolute;
	margin-left:-0.5px;
	bottom:0px;
	width:1px;
	
	background-image: linear-gradient(
					to top,
					rgb(255,255,255)0px,
					rgb(51,204,255)	27.5px,
					rgb(0,216,0)	55px,
					rgb(255,255,0)	82.5px,
					rgb(255,0,0)	110px
				);
	
	left:50%;	/* variable */
	height:0px;	/* variable */
}
@media screen and (max-width: 900px) {
	.hour .time {
		left:-10px;
		width:20px;
	}
	.hour .time span {
		display:none;
	}
}