:root {
  touch-action: pan-x pan-y;
  height: 100%
}

body
{

	font-family: sans-serif;
	color: #ddd;

	overflow: hidden;
	overscroll-behavior: contain;

}

.pretty-menu > div.pretty_min
{
	display: none;
}
.pretty-menu
{

/* Shape */
	display: flex;
	flex-direction: column;
	border-radius: 2em;
	overflow-y: hidden;

/* Coloring */
	color: #111;
	background-color: #eee;
	box-shadow: 2px 2px 15px #000;
	pointer-events: auto;

}

.pretty-menu-hidden
{

/* Shape */
	display: flex;
	flex-direction: column;
	border-radius: 2em;
	overflow-y: hidden;

/* Coloring */
	color: #111;
	background-color: #eee;
	box-shadow: 2px 2px 15px #000;


}
.pretty-menu > header
{
/* Shape */
	flex: 1;
    margin: 0px;
    padding: 0.75em 0.75em;
/* Coloring */
	background-color: #444;
}


.pretty-menu > div
{
	flex-grow: 100;
	margin: 0px;
	padding: 1em;
	overflow-y: hidden;
	overflow-y: auto;
}
.pretty-menu > div.nopad
{
	padding: 0em;
}
.pretty-menu > header > h3
{
/* Shape */
    margin: 0px;
    padding: 0em 0em;
    padding-left: 1em;
/* Coloring */
	color: #fd2;
	text-shadow: 3px 3px #222;
	background-color: #222;
	background-image: url("tire_stripe.svg");

	background-color: #444;
	background-position-y: center;
        opacity: 1
}
.pretty-menu section
{
	gap: 1rem;
/* Shape */
	display: flex;
	height: 100%;
	flex-direction: column;
/* Coloring */
	color: #111;
	background-color: #eee;
}
.pretty-menu input[type='file'],
.pretty-menu input[type='checkbox']
{
	display: none;
}
.pretty-menu table,
.pretty-menu table
{
/* Shape */
	width: 100%;
}
.pretty-menu td > .fakeButton
{
/* Shape */
	display: block;
	margin: auto;
	width: calc(100%-1em);
}
.pretty-menu .flexFill input[type='button'],
.pretty-menu td > input[type='button']
{
/* Shape */
	display: block;
	margin: auto;
	width: 100%;
}

.pretty-menu .fakeButton ,
.pretty-menu input[type='button']
{
/* Text */
	font-weight: bold;
	font-size: 0.8em;
	text-align: center;

/* Shape */
	border-radius: 1em;
	padding: 0.25em 0.75em;

	border-top: solid 1px #338;
	border-bottom: solid 3px #004;
	border-right: none;
	border-left: none;
/* Coloring */
	color: #eee;
	background-color: #116;
}
.pretty-menu .fakeButton:hover ,
.pretty-menu input[type='button']:hover
{
/* Shape */
	border-top: solid 1px #fb0;
	border-bottom: solid 3px #820;
/* Coloring */
	color: #eee;
	background-color: #b40;
}
.pretty-menu .fakeButton:active ,
.pretty-menu input[type='checkbox']:checked + label.fakeButton,
.pretty-menu input[type='button']:active
{
/* Shape */
	border-top: solid 3px #333;
	border-bottom: solid 1px #888;
/* Coloring */
	color: #eee;
	background-color: #555;
}

.pretty-menu input[type='text']
{
/* Text */
	font-weight: bold;
	font-size: 0.8em;

/* Shape */
	width: calc(90%);
	border-radius: 1em;
	padding: 0.25em 0.75em;
	border-top: solid 2px #999;
	border-bottom:  solid 2px #ddd;
	border-right:  solid 2px #ddd;
	border-left: solid 2px #999;
/* Coloring */
	color: #000;
	background-color: #fff;
}
.pretty-menu input[type='text']::placeholder
{
/* Coloring */
	color: #555;
}

.pretty-menu section fieldset
{
/* Shape */
	flex: 1;
	margin: 0px;
	padding: 0.5em;
	border-radius: 1em;
	border: none;
/* Coloring */
	color: #111;
	background-color: #d0d0d0;
}
.pretty-menu fieldset > legend
{
/* Shape */
	margin: 0px;
	padding: 0.1em 2em;
	border-radius: 1em;
	border-radius: 1em;
/* Coloring */
	color: #eee;
	background-color: #222f;
}
.pretty-menu fieldset > legend a,
.pretty-menu fieldset > legend a:link,
.pretty-menu fieldset > legend a:visited
{
	color: #999; text-decoration: none;
}
.pretty-menu fieldset a,
.pretty-menu fieldset a:link,
.pretty-menu fieldset a:visited
{
	color: #bbf; text-decoration: none;
}
.pretty-menu section fieldset.flexFill
{
	flex-grow: 100;
	overflow-y: hidden;
	min-height: 10em;
}
.pretty-menu fieldset td label.fakeButton
{
	height: 100%;
}

.flexScroll
{
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
}
.flexScrollNormal
{
	flex: 1;
}
.flexScrollScroll
{
	flex-grow: 100;
    overflow: auto;
	min-height: 5em;
}
.flexScrollLimit
{
	max-height: 5em;
	overflow-y: auto;
}



.error
{

	background-color: #f003;
}

.highlight
{

	background-color: #f403;
}

.marker
{
	display: block;
	width: 32px;
	height: 32px;
}

.marker.spoil
{
	background-image:none;
}

.marker_panel
{
	background-image: url("marker_panel_new.svg");
}
.marker_panel.complete
{
	background-image: url("marker_panel_old.svg");
}
.marker_medal
{
	background-image: url("marker_medallion_new.svg");
}
.marker_medal.complete
{
	background-image: url("marker_medallion_old.svg");
}

.marker_cart
{
	background-image: url("marker_cart.svg");
}

.marker_track
{
	background-image: url("marker_track.svg");
}

.marker_custom
{
	background-image: url("marker_custom.svg");
}
.marker_pswitch
{
	background-image: url("marker_ps_new.svg");
}

.marker_pswitch.complete
{
	background-image: url("marker_ps_old.svg");
}

.marker_pswitch.selected
{
	margin: -5px;
	border: solid 5px #00f;
	border-radius: 32px;

}
.marker_track.selected
{
	margin: -3px;
	border: solid 3px #f00;
	border-radius: 12px;
}

.marker_custom.selected
{
	margin: -3px;
	border: solid 3px #f00;
	border-radius: 12px;
}

.marker_cart.selected
{
	margin: -5px;
	border: solid 5px #f80;
	border-radius: 32px;
}

.marker_medal.selected
{
	margin: -5px;
	border: solid 5px #ff0;
	border-radius: 32px;
}
.marker_panel.selected
{
	margin: -3px;
	border: solid 3px #34f;
	border-radius: 12px;
}

.markerList li
{
  display: list-item;
  list-style-position: inside;
}

.markerList
{
    margin: 0px;
    padding: 0px;
}


.marker_imgs
{
    list-style:none;
    margin: 0px;
    padding: 0px;
}

#menu_main
{
	z-index: 1000;
	min-height: 10em;
}

#menu_left
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0em;
	padding: 1em;
	position: absolute;
	left: 0px;
	top:  0px;
	height: calc(100% - 2em);
	width: 408px;
	overflow-y: hidden;
	pointer-events: none;
}
#menu_right
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0em;
	padding: 1em;
	position: absolute;
	right: 0px;
	top: 0px;
	height: calc(100% - 2em);
	width: 408px;
	pointer-events: none;
}
#menu_right #route_segments
{
	list-style:none;
	margin: 0px;
	padding: 0px;
}
#menu_right #route_splits input[type='checkbox']:checked + label
{
	color: #f00;

}
#menu_right #route_splits input[type='checkbox']:not(:checked) + label
{
	color: #555;

}
#menu_right #route_splits input[type='checkbox']
{
	display: none;

}
#menu_right #route_splits
{
	list-style:none;
	margin: 0px;
	padding: 0px;
}
#menu_right #route_splits label
{
	margin-right: 0.5em;

}

#route_segments li.selected
{
	background-color: #00f3;
}
#route_splits li.selected
{
	background-color: #00f3;
}
#route_splits li.higlight
{
	background-color: #f403;
}

.markerList li a:link,
.markerList li a:visited ,
#menu_right  li a:link,
#menu_right li a:visited{
color: #222; text-decoration: none;
}
.markerList li a:hover,
#menu_right li a:hover
{
	background-color: #00f4;
}


.marker_imgs > div
{
	position: absolute;

}

#location
{
	height: 230px;
	margin-bottom:-0.2em;
}

#title
{
	height: 230px;
	margin-bottom:-0.2em;

}

#map_bottom
{
	position: absolute;
	z-index: 100;
	bottom: 0px;
	left: 0;
	right: 0;
	padding:0.15em 0.3em;
	margin-inline: auto;
	width: fit-content;
	font-size: 1em;
	background-color: #000c;
}