body
{
	margin			: 0;
	height			: 100vh;
	width			: 100vw;
	overflow		: hidden;
}

*
{
	font-family     : Helvetica, sans-serif;
}

div.container {
	display			: block;
	width			: 100%;
	height			: 100%;
	overflow		: hidden;
	background-color: white;
	position        : absolute;
	align-items		: center;
	justify-content : center;
}

svg.map {
	z-index			: 1;
	width			: 100%;
	height			: 100%;
	position        : absolute;
}

.spinner {
	z-index         : 2;
	font-size		: 3em;
	font-weight		: 900;
	color			: black;
	background-color: rgba(0, 0, 0, 0);
	aspect-ratio	: 1/1;
	animation		: spinner 1.2s infinite;
	position		: absolute;
	top				: calc(50% - 10px);
	right			: calc(50% - 15px);
}

@keyframes spinner 
{
	0% 
	{ 
		transform: rotate(0deg); 
	}
	100% 
	{
		transform: rotate(360deg);
	}
}

div.user {
	position		: absolute;
	right			: 5px;
	top				: 5px;
	z-index			: 3;
	text-wrap       : nowrap;
}

button.toolbar {
	font-size: 25px;
	width: 50px;
	height: 50px;
}

div.toolbar {
	position		: absolute;
	right			: 5px;
	top				: 50px;
	z-index			: 3;
	text-wrap       : nowrap;
}

button.upload
{
	position		: absolute;
	left			: 5px;
	top				: 5px;
	z-index			: 3;
}

button.filter 
{
	position		: absolute;
	left			: 5px;
	top				: 50px;
	z-index			: 3;
}

a:link,
a:visited
{
	color : #ff7300;
}

div.filter_tags
{
	position        : absolute;
	display         : block;
	z-index			: 4;
	height          : 0px;
	width           : 0px;
	left            : 50px;
	top             : 50px;
	transition      : height 1s ease,width 1s ease;
	background-color: rgba(0, 0, 0, 0.8);
	color           : #ff7300;
	overflow   		: hidden;
	display         : block;
}

div.filter_tags.show
{
	height			: 400px;
	max-height      : 80%;
	width           : 400px;
	max-width       : 80%;
	overflow   		: auto;
}

div.filter_tags ul
{
	list-style: none;
}

.map_container > circle.current_item
{
	fill: yellow;
	z-index:10;
}

.map_container > polyline.current_item
{
	stroke: yellow;
	z-index:10;
}

div.current
{
	position:    absolute;
	display:     none;
	min-height:  250px;
	min-width:   320px;
	right:       0px;
	top:         110px;
	z-index:     9;
	background-color: rgba(0, 0, 0, 0.8);
	color:  #ff7300;
	text-align: center;
}

div.current_gpx
{
	display:     none;
}

div.current_image
{
	display:     none;
	align-content:center; 
}

div.current_overlay
{
	display:  block;
	position: absolute;
	top: 40px;
	left: 0px;
	width: 100%;
	height: calc(100% - 40px);
	z-index:10;
}

button.previous_btn,
button.next_btn
{
	position: absolute;
	width:30px;
	height: calc(100% - 40px);
	top: 40px;
	opacity:0;
	z-index:10;
}

button.previous_btn
{
	left: 0px;
}

button.next_btn
{
	left:calc(100% - 30px);
}

button.previous_btn:hover,
button.next_btn:hover
{
	opacity : 1;
}

img,
video
{
	height:100%;
	width:100%;
	object-fit: contain;
}

div.current_video
{
	display:     none;
}

div.current_show
{
	display: block;
}

.popup_title h1
{
  text-align:center;
  font-size:1em;
  vertical-align:middle;
}

.popup_title
{
  display:grid;
  grid-template-columns: auto 1fr auto;
}

button.close_btn,
button.resize_btn
{
	text-align:center;
	font-size:15px;
	height:30px;
	width:30px;
	margin-top:5px;
}

li.tag_filter
{
	display:none;
}

li.tag_filter_expanded
{
	display:list-item;
}

button.tag_filter
{
	border: none;
	background-color:inherit;
	color:inherit;
}

button.tag_filter:after
{
	content: "▼"
}

button.tag_filter_expanded:after
{
	content: "▲"
}