@charset "utf-8";
/* CSS Document */

body{
	margin: 0px;
	width: 100%;
}
#top-header{
	width: 100vw;
	height: 50px;
	overflow: hidden;
	display: block;
	position: fixed;
	top: 0;
	background-color: #000;
	z-index: 99;
}
#top-nav{
	display: flex;
	flex-direction: row;
	align-content: flex-start;
	align-items: center;
	width: 100%;
	height: 50px;
}
#logo{
	padding: 0px 10px;
	flex: 1 0 80px;
	order: 0;
	font-size: 32px;
	color: #CCC;
}
main{
	display: block;
	position: relative;
	top: 50px;  /*Relative to header*/
	left: 0px;
	width: 100vw;
}

#search{
	display: block;
	order: 10;
	background-image: url("/images/search.svg");
}
#searchbox{
	display: none;
	position: absolute;
	top: 0px;
	right: 0px;
	height: 24px;
	border-radius: 24px;
	padding: 5px 10px;
	margin: 8px 0px;
	background-color: rgba(255,255,255,0.2);
	order: 9;
}
#searchtext{
	border: none;
	background: none;
	outline: none;
	float: left;
	padding: 0;
	color: #FFFFFF;
	font-size: 16px;
	transition: 0.5s;
	line-height: 24px;
}
nav .spotting{
	background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjRjNGM0YzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEuOCAzMi4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MS44IDMyLjI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48dGl0bGU+QXNzZXQgNTk8L3RpdGxlPjxnPjxnPjxwYXRoIGQ9Ik01MS44LDEzLjlsLTMuMiwyLjRDNDguNSwxNi4yLDM5LjEsNCwyNS45LDRTMy4zLDE2LjIsMy4yLDE2LjRMMCwxMy45QzAuNCwxMy40LDEwLjcsMCwyNS45LDBTNTEuNCwxMy40LDUxLjgsMTMuOXogICAgIE0yNS45LDkuN2MtNi4yLDAtMTEuMiw1LTExLjIsMTEuMmMwLDYuMiw1LDExLjIsMTEuMiwxMS4yYzYuMiwwLDExLjItNSwxMS4yLTExLjJDMzcuMiwxNC43LDMyLjEsOS43LDI1LjksOS43eiI+PC9wYXRoPjwvZz48L2c+PC9zdmc+");
}
nav .nearby{
	background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjRjNGM0YzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPkFydGJvYXJkIDIgQ29weSAxMzwvdGl0bGU+PGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+PGcgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0YzRjNGMyI+PHBhdGggZD0iTTQ4LjYyNzA2MzgsOTMuMDg1NDg3MiBDNDkuNDg4MjQyNiw5NC41MDMxMjI5IDUwLjkwMjc2OTUsOTQuNTA4Nzg3MSA1MS43NzM1Njk1LDkzLjEwMTkzOTMgQzUxLjc3MzU2OTUsOTMuMTAxOTM5MyA3OC4wMzU4MTQsNTEuNzE1NjI3NCA3OC4wMzU4MTQsMzYuNTE3OTA3IEM3OC4wMzU4MTQsMjEuMzIwMTg2NiA2NS43MTU2Mjc0LDkgNTAuNTE3OTA3LDkgQzM1LjMyMDE4NjYsOSAyMywyMS4zMjAxODY2IDIzLDM2LjUxNzkwNyBDMjMsNTEuNzE1NjI3NCA0OC42MjcwNjM4LDkzLjA4NTQ4NzIgNDguNjI3MDYzOCw5My4wODU0ODcyIFogTTUwLjI1NjI2NTEsNDYuNTEyNTMwMSBDNTUuOTIwNjQzOSw0Ni41MTI1MzAxIDYwLjUxMjUzMDEsNDEuOTIwNjQzOSA2MC41MTI1MzAxLDM2LjI1NjI2NTEgQzYwLjUxMjUzMDEsMzAuNTkxODg2MyA1NS45MjA2NDM5LDI2IDUwLjI1NjI2NTEsMjYgQzQ0LjU5MTg4NjMsMjYgNDAsMzAuNTkxODg2MyA0MCwzNi4yNTYyNjUxIEM0MCw0MS45MjA2NDM5IDQ0LjU5MTg4NjMsNDYuNTEyNTMwMSA1MC4yNTYyNjUxLDQ2LjUxMjUzMDEgWiI+PC9wYXRoPjwvZz48L2c+PC9zdmc+");
}
#top-nav .icon{
	width: 40px;
	height: 40px;
	border-color: #000000;
	border-style: solid;
	border-width: 5px 0px 5px 0px;
	flex: 0 0 40px;
	background-size: 25px 25px;
	background-repeat: no-repeat;
	background-position: center;
}
#top-nav .icon:hover, #top-nav .icon.current{
	border-bottom: 5px solid #FFF;
}
/* FONT SETTINGS */
h1, h2, h3, h4, h5, h6, service, #logo, nodecode{
	font-family: 'Bebas Neue', cursive;
}
main, vehicleplate, #searchbox, #searchtext, #nav-links, nodename, road, .nodepin{
	font-family: 'Montserrat', sans-serif;
}
.mapwrapper{
	display: block;
	position: relative;
	width: calc(100% - 360px);
	height: 100vh;
	float: right;
	z-index: 10;
}
#mapmain{
	display: block;
	position: relative;
	width: 100%;
	height: 100vh;
	/*max-height: 640px;Until other functions activated*/ 
}
#controls{
	display: block;
	position: relative;
	width: 360px;
	height: 100px;
	float: left;
	background-color: #F0F0F0;
}
#controls nav{
	display: flex;
	flex-direction: row;
	width: 100%;
}
#viewer{
	display: flex;
	flex-basis: auto;
	flex-direction: column;
	position: relative;
	width: 360px;
	height: calc(100vh - 100px);
	/*max-height: 640px;*/
	overflow-y: scroll;
	float: left;
}
#spot-add{
	display: block; position: fixed;
	width: 60px; height: 60px;
	bottom: 70px;
	right: 50px;
	border: 5px solid #71C2E3;
	border-radius: 100%;
	background-color: #289dcc;
	font-size: 52px; font-weight: bold;
	text-align: center;
	color: #FFF;
}
.spot-entry{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 3px 8px;
	width: calc(100% - 16px);
	height: 40px;
	background-color: #FEFEFE;
	border-bottom: 1px solid gray;
}
.spot-entry vehicleplate{
	flex: 0 0 120px;
	font-size: 18px;
}
.spot-entry service{
	font-size: 16px;
	font-weight: bold;
	padding: 2px 10px;
	border-radius: 5px;
	/*background-color: #97d700;*/
	border: 0.5px solid grey;
	/*text-align: center;*/
	margin-right: 5px;
}
.spot-entry remarks, .spot-entry user{display: none;}
iframe#add-entry{
	display: block;
	position: relative;
	top: 0;
	width: 100%;
	height: 340px;
}
#iframe-close{
	display: block; position: fixed;
	top: calc(80px);
	right: 0;
	border-radius: 100%;
	width: 40px;
	height: 40px;
	background-color: #FFF;
}
@media only screen and (orientation:landscape) and (min-width: 500px){
	#top-header{
		width: 50px;
		height: 100vh;
		left: 0;
	}
	#top-nav{
		flex-direction: column-reverse;	
		width: 100%;
		height: 100vh;
	}
	#logo{
		transform: rotate(180deg);
		writing-mode: vertical-lr;
		padding: 10px 0px;
	}
	main{
		top: 0px;
		left: 50px;
		width: calc(100% - 50px);
	}
	#top-nav .icon{
		border-width: 5px;
	}
	#top-nav .icon:hover, #top-nav .icon.current{
		border-bottom: 5px solid #000;
		border-right: 5px solid #FFF;
	}
}
@media only screen and (max-width: 768px) and (orientation: portrait){
	.mapwrapper{
		display: block;
		position: sticky;
		top: 50px;
		width: 100%;
		height: 30vh;
		max-height: none;
		float: none;
	}
	#mapmain{
		width: 100%;
		height: 30vh;
	}
	#controls{
		display: block;
		position: sticky;
		width: 100%;
		height: 30px;
		top: calc(30vh + 50px);
		float: none;
		z-index: 10;
	}
	#viewer{
		display: flex;
		flex-basis: auto;
		flex-direction: column;
		position: relative;
		width: 100%;
		height: auto;
		max-height: 100%;
		overflow-y: auto;
		float: none;
	}
	#spot-add{
		display: block; position: fixed;
		width: 60px; height: 60px;
		bottom: 70px;
		right: 50px;
		border: 5px solid #71C2E3;
		border-radius: 100%;
		background-color: #289dcc;
		font-size: 52px; font-weight: bold;
		text-align: center;
		color: #FFF;
	}
	.spot-entry{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 3px 8px;
		width: calc(100% - 16px);
		height: 40px;
	}
	.spot-entry vehicleplate{
		flex: 0 0 120px;
		font-size: 18px;
	}
	.spot-entry service{
		font-size: 16px;
		font-weight: bold;
		padding: 2px 10px;
		border-radius: 5px;
		/*background-color: #97d700;*/
		border: 0.5px solid grey;
		/*text-align: center;*/
		margin-right: 5px;
	}
	.spot-entry remarks, .spot-entry user{display: none;}
	iframe#add-entry{
		display: block;
		position: relative;
		top: 0;
		width: 100%;
		height: 340px;
	}
	#iframe-close{
		display: block; position: fixed;
		top: calc(80px);
		right: 0;
		border-radius: 100%;
		width: 40px;
		height: 40px;
		background-color: #FFF;
	}
}