:root {
	--width-map: 260px;
	--width-locations: 250px;
	--width-directions: 150px;
}

.locationsection {
	display: flex;
	flex-direction: column;
  min-width: var(--width-locations);
	height: 70vh;
	max-height: 70vh;
  flex: 1 1 var(--width-locations);
  order: 1;
}


.mapcontainer {
	display: flex;
	position: relative;
  flex-direction: row;
  height: auto;
	max-width: max(200vh, calc(var(--width-locations) + var(--width-map) + var(--width-directions)));
	margin-left: auto;
	margin-right: auto;
  border: 1px solid black;
}

.mapsection {
	height: 70vh;
	min-width: var(--width-map);
	flex: 7 7 var(--width-map);
	order: 2;
	overflow: hidden;
	box-shadow: -3px 0 3px -3px black;
}

.popup {
	display: none;
	flex: 1 1 50%;
  flex-direction: column;
	box-shadow: 0px -3px 3px -3px black;
}

@media screen and (max-width: calc(260px + 250px + 200px)),
screen and (max-height: calc((260px + 250px + 200px) / 2)) and (max-width: calc((260px + 250px + 200px) * 2)) {
	.mapcontainer {
		flex-direction: column;
	}

	.mapsection {
		flex: unset;
		height: 50vh;
		box-shadow: 0px -3px 3px -3px black;
	}

	.locationsection {
		flex-direction: row;
		flex: 1 1 30%;
		height: 30vh;
		max-height: 30vh;
	}

	.popup {
		box-shadow: -3px 0 3px -3px black;
	}
}

.mapcontainer, .ol-viewport {
	border-radius: 5px;
}

.wrapper-table {
  overflow-y: scroll;
	flex: 1 1 50%;
  padding-left: 5px;
  padding-right: 5px;
}

.wrapper-table table {
	width: 100%;
}

.wrapper-table tbody > :not(:last-child) {
	border-bottom: 1px solid gray;
}

.locationitem td {
	cursor: pointer;
	padding-bottom: 10px;
}

.locationitem h2 {
	font-size: 30px;
	margin-top: 20px;
  margin-bottom: 10px;
}

.map {
	position: relative;
	width: 100%;
	height: 100%;
	transition: width 300ms ease-in-out;
	z-index: 2;
}

.map.has-menu {
  width: min(80%, calc(100% - var(--width-directions)));
}

.popupcontent {
	overflow: scroll;
	flex-grow: 1;
	padding-left: 5px;
  padding-right: 5px;
}

.popupcontent h2 {
	font-size: 1.6rem;
	text-align: center;
}

.directionsbutton {
	margin-left: auto;
  margin-right: auto;
  display: block;
	margin-top: 5px;
  margin-bottom: 5px;
}

.buttonwrapper {
	box-shadow: 0px -3px 3px -3px black;	
}

.directions {
  position: relative;
  float: right;
  z-index: 2;
	width: 0%;
	min-width: var(--width-directions);
  height: 100%;
  transform: translate(100%, -100%);
  overflow: auto;
	transition: transform 300ms ease-in-out;
}

.directions.open {
	display: block;
  transform: translate(0, -100%);
  width: 20%;
	box-shadow: -3px 0 3px -3px black;
}

.menucontent {
	height: 100%;
}

.directionhowto {
	text-align: center;
	font-size: 1.5rem;
  position: relative;
	top: 50%;
  transform: translateY(-50%);
}

.routinglist tr {
	border-bottom: 1px solid black;
}

.routinglist {
  border-collapse: collapse;
  width: 100%;
}

.routing-icon {
	background-image: url('/images/routing-icons-68bb3d8e7f349b1423f2bff96f252053.svg?vsn=d');
	-webkit-background-size: 455px 20px;
	background-size: 455px 20px;
	background-repeat: no-repeat;
	margin: 0;
	content: '';
	display: inline-block;
	vertical-align: top;
	width: 20px;
	height: 20px;
}

.routing-icon.lanes.invalid {
	filter: invert(50%);
}

.routing-alt-minimized .routing-icon {
	background-image: url('/images/routing-icons-68bb3d8e7f349b1423f2bff96f252053.svg?vsn=d');
}

.routing-icon-continue         { background-position: 2px 0px; }
.routing-icon-sharp-right      { background-position: -24px 0px; }
.routing-icon-turn-right       { background-position: -50px 0px; }
.routing-icon-bear-right       { background-position: -74px 0px; }
.routing-icon-u-turn           { background-position: -101px 0px; }
.routing-icon-sharp-left       { background-position: -127px 0px; }
.routing-icon-turn-left        { background-position: -150px 0px; }
.routing-icon-bear-left        { background-position: -175px 0px; }
.routing-icon-depart           { background-position: -202px 0px; }
.routing-icon-enter-roundabout { background-position: -227px 0px; }
.routing-icon-arrive           { background-position: -253px 0px; }
.routing-icon-via              { background-position: -278px 0px; }
.routing-icon-fork             { background-position: -305px 0px; }
.routing-icon-ramp-right       { background-position: -331px 0px; }
.routing-icon-ramp-left        { background-position: -352px 0px; }
.routing-icon-merge-left       { background-position: -376px 0px; }
.routing-icon-merge-right      { background-position: -403px 0px; }
.routing-icon-end              { background-position: -429px 0px; }