#map { height: calc(100% - 3.5rem); width: 100%; padding: 0px;  } /* navbar is 3.5rem */
#app { padding: 0px; overflow-x: hidden; }

/* Chrome on Android doesn't want to work unless we set parent element heights... */
html, body, #app {
	height: 100%;
}


/* navbar stuff */
#navbar-container { padding: 0px; }
.navbar { padding-left: 20px; }
.navbar-brand small { font-size: 12px; }

#info-panel {
	padding-top: 10px;
	padding-right: 30px;
}

#map-panel {
	padding-right: 0px;
}

/* for x-small devices (col-xx) */
@media (max-width: 575.98px) {
	#map { height: calc(100% - 3.5rem - 200px); /* navbar is 3.5rem */ }
	#info-panel { margin-left: 15px; margin-top: calc(-3.5rem - 200px); }
}
/* for small devices (col-sm-xx) */
@media (max-width: 767.98px) {
	#info-panel h1 { font-size: 2.0rem; /* default is 2.5rem */ }
	#info-panel h2 { font-size: 1.75rem; /* default is 2.0 */ }
	#info-panel h3 { font-size: 1.5rem; /* default is 1.75 */ }
}

/* for medium devices (col-md-xx) */
@media (max-width: 991.98px) {

}


/* route styling */
.route-row {
	padding-bottom: 10px;
}

/* dots for routes */
.downtown-dot {
	height: 20px;
	width: 20px;
	background-color: #E70F47;
	border-radius: 50%;
	display: inline-block;
}

.bricktown-dot {
	height: 20px;
	width: 20px;
	background-color: #3C20AE;
	border-radius: 50%;
	display: inline-block;
}