@font-face {
  font-family: "Glyphicons Halflings";
  src: url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.woff2) format("woff2");
}

body{
	font-family: Helvetica, Arial, sans-serif !important;
	font-size: 15px;
	color: #333;
}

.h1, h1{
	font-size: 1.25rem;
	margin-bottom: 0;
	font-weight: bold;
	color: #0454A2;
}

.h2, h2{
	width: 100%;
	text-align: center;
	font-size: 1rem;
	color: white;
	background-color:#0454A2;
	padding: 5px;
	font-weight: bold;
}

.h3, h3{
	font-size: .9rem;
	margin-bottom: 0;
}

.hidden {
	display: none!important;
}


#navContainer {
	border-bottom: 5px solid #FEE502;
}

.navbar {
	padding: 0;
	font-size: .6rem;
	font-weight: bold;
	box-shadow: 0 5px 5px -5px rgba(0,0,0,0.16),0 10px 10px -10px rgba(0,0,0,0.12);
}

/* Anything -dark in nav isn't being used right now for Miami */
.navbar-dark, .bg-dark {
	background-color: #0454A2!important;
}

.navbar-dark .navbar-toggler {
	color: #ffffff;
}

.navbar-dark .navbar-nav .nav-link {
	padding-top: .25rem;
	padding-bottom: .25rem;
	color: rgba(255,255,255,1);
}

.navbar-brand{
	display: none;
	padding-top: 0;
	padding-bottom: 0;
	background-color: #fff;
}

.navbar-nav {
	text-align: right;
}

.nav-link {
	color: #333;
}

.jumbotron-fluid {
	padding: .25rem 0.125rem;
	/* background-color: #d72658; */
	/* color: #0454A2; */
}

.scenario-container,.scenario-btn-container{
	width: 100%;
}




/*FORM ELEMENTS*/

.mapboxgl-ctrl-geocoder{
	box-shadow: none !important;
	font-family: Helvetica, Arial, sans-serif !important; 
}

.mapboxgl-ctrl-geocoder--icon-search{
	display: none !important;
}

.mapboxgl-ctrl-geocoder--input{
	border-bottom: 1px solid dimgray !important;
	padding-left: 6px !important;
	font-weight: bold !important;
	font-style: italic !important;
	font-size: .8rem !important;
	height: 25px !important;
}


.mapboxgl-ctrl-geocoder--suggestion-title{
	font-size: .8rem !important;
}

.mapboxgl-ctrl-geocoder--suggestion-address{
	font-size: .8rem !important;
}

.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--pin-right > * {
	top: 3px !important;	
}


.form-control{
	border:0;
	/* font-style: italic; */
	font-weight: bold;
	font-size: .75rem;
	/*box-shadow:0 0 10px 2px rgb(0 0 0 / 10%);*/
}

input[type="time"] {
	position: relative;
}

input[type="time"]::-webkit-calendar-picker-indicator {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top:0;
	height: auto;
	width: auto;
	background: transparent;
	color: transparent;
}

#leaveArrInput{
	font-size: .75rem;
}

.btn-dark{
	background-color: #0454A2;
	border-color: #0454A2;
	font-size: 1rem;
	/* border-radius: .5rem; */
	border-radius: 0!important;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}

#backButton{
	background-color: dimgray;
	border-color: dimgray;
}

#fromField {
	z-index: 2;
	/* position: relative; */
}

#fromField .mapboxgl-ctrl-geocoder--icon-search {
	fill: #21965E;
}


#toField {
	z-index: 1;
	/* position: relative; */
}

#toField .mapboxgl-ctrl-geocoder--icon-search {
	fill: #DF2935;
}

#exploreButton{
	margin: auto;
}

#loadingBox{
	margin-top: 50px;
	padding-bottom: 50px;
}

.error-message, .dr-message {
	padding-bottom: .5rem;
	font-size: .8rem;
}

.geolocation-text {
	cursor: pointer;
	padding-left: 35px;
	font-style: italic;
	font-size: .75rem;
	color:#0454A2;
}

.geolocate-warning-text{
	font-style: italic;
	font-size: .75rem;
	padding-left: 35px;
}

.duration-min{
	font-size: 0.75rem;
}

.note{
	font-size: 0.8rem;
	margin-bottom: 0.125rem;
}

#map {
	/*margin-bottom: 1rem;*/
	height: 450px;
}

#mapControl{
	position: absolute;
	top: 5px;
	left: 15px;
	padding: 10px;
	background-color: rgba(255, 255, 255, 0.9);
	/*border: 1px solid #20425d;*/
	/* border-radius: 4px; */
	box-shadow:0 0 10px 2px rgb(0 0 0 / 10%);
	font-size: .6rem;
}

#mapControl input[type=radio] {
	margin-top: 0.1rem;
	height: .6rem;
}

/*#mapLegend{
	position: absolute;
	top: 5px;
	right: 20px;
	padding: 10px;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 4px;
	box-shadow:0 0 10px 2px rgb(0 0 0 / 10%);
}
*/

.special-note{
	display: none;
}

.legend-entry{
    font-size: 0.8rem;
}

.legend-line-short{
    display:inline-block;
    height:0.75rem;
    width:1.25rem;
    margin-right:0.125rem;
}

.legend-line{
    display:inline-block;
    height:0.75rem;
    width:1.525rem;
    margin-right:0.125rem;
}

.legend-line-long{
    display:inline-block;
    height:0.75rem;
    width:8.125rem;
    /*margin-right:2px;*/
}

.custom-marker {
	width: 24px;
	height: 24px;
}

/*
.mapboxgl-canvas {
	padding-left:15px!important;
	padding-right:15px!important;
}

.mapboxgl-ctrl-bottom-left {
	padding-left:15px!important;
}

.mapboxgl-ctrl-bottom-right {
	padding-right:15px!important;
}*/

/*More Info ACCORDION STYLES*/

.card-header {
	padding: .25rem;
}

.card-header .btn {
	font-size: .9rem;
}

.card-header .btn:before {   
    font-family: 'Material Icons Outlined';  
    content: "expand_more";
    color: dimgray; 
    font-size: 1.25rem;
	position:relative;
	bottom: -5px;
}

.card-header .btn.btn-secondary:before {
	color: white; 
}

.card-header .btn.collapsed:before {
    content: "expand_less"; 
}

/*.card-header .btn.collapsed.btn-secondary:before {
    color: white; 
}*/

.card-body{
	padding: .5rem 1rem .5rem 1rem;
	font-size: .75rem;
}


/*Itinerary Custom Accordion Styles*/
.i-card-header{
	cursor: pointer;
}

.i-active-line{
	width: 10px;
	background-color: white;
}
.i-active-line.active.new{
	background-color: #0454A2;
}
.i-active-line.active.old{
	background-color:dimgray;
}



.i-header-icon{
	align-self: center;
	font-size: 2.5rem !important;
	color: silver;
}

.i-header-icon.new{
	color: #0454A2;
}
.i-header-icon.old{
	color: dimgray;
}
.header-rt {
	break-inside: avoid;
}


.i-duration{
	margin-left: auto;
	/* margin-right: 5px; */
	font-size: .85rem;
	font-weight: bold;
	min-width: 50px;
}

.i-s-e-time{
	font-size: .8rem;
	font-style: italic;
	font-weight: bold;
}

.i-rts{
	font-size: .8rem;
	font-style: italic;
}

.i-rts .material-icons {
	font-size: 1.25rem;
	vertical-align: bottom;
}

.i-toggle-itinerary{
	font-size: .8rem;
	cursor: pointer;
	font-weight: bold;
}
.i-toggle-itinerary.new{
	color: #0454A2;
}
.i-toggle-itinerary.old{
	color: dimgray;
}

.i-leg-s-time{
	min-width: 70px;
	font-size: .8rem;
	font-style: italic;
	font-weight: bold;
}

.i-icon{
	margin-right: 5px;
	font-size: 1.25rem;
}
.i-icon.new{
	color: #0454A2;
}
.i-icon.old{
	color: dimgray;
}

.i-step-text{
	font-size: .8rem;
}


.i-step-text .i-icon{
	display: none;
}

.od-link {
	font-size: .8rem;
	font-weight: bold;
	cursor: pointer;
}

.o-link {
	color: #21965E;
}

.d-link {
	color: #DF2935;
}


@media (max-width:640px){
	.mapboxgl-ctrl-geocoder--icon-close {
		margin: 0 !important;
	}
}

@media (min-width: 576px){
	.h1, h1{
		font-size: 1.5rem;
	}

	.h2, h2{
		font-size: 1.1rem;
		padding: 5px;
	}

	.h3, h3{
		font-size: 1rem;
	}

	.navbar{
		font-size: .75rem;
	}

	.navbar-dark .navbar-nav .nav-link {
		padding-top: .5rem;
		padding-bottom: .5rem;
	}

	.jumbotron-fluid {
	    padding: .5rem 0.5rem;
	}

	.form-control{
		font-size: 1rem;
	}

	.custom-marker {
		width: 36px;
		height: 36px;
	}

	.btn-dark{
		font-size: 1.25rem;
	}


	#map {
		height: 600px;
	}

	.mapboxgl-ctrl-geocoder--input{
		height: 40px !important;
	}

	.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--pin-right > * {
		top: 7px !important;	
	}
	
	#mapControl{
		font-size: .8rem;
	}
	
	#mapControl input[type=radio] {
		height: .8rem;
		margin-top: 0.2rem;
	}
	

	.bi{
		font-size: 1.5rem !important;
	}

	#leaveArrInput{
		font-size: 1.25rem;
	}

	.i-s-e-time{
		font-size: .9rem;
	}
	
	.i-rts{
		font-size: .9rem;
	}

	.i-rts .material-icons {
		font-size: 1.25rem;
		margin-right: 0;
	}
	
	.i-toggle-itinerary{
		font-size: .9rem;
	}

	.i-duration{
		font-size: 1rem;
		min-width: 50px;
	}

	.i-leg-s-time{
		min-width: 80px;
		font-size: 1rem;
	}

	.i-step-text{
		font-size: .9rem;
	}
}

@media (min-width: 768px){
	.h1, h1{
		font-size: 33px;
	}

	.h2, h2{
		font-size: 1.25rem;
		padding: 10px;
	}

	.h3, h3{
		font-size: 1.2rem;
	}


	.navbar-brand{
		max-width: 250px;
		margin-right: 0;
	}

	.navbar-brand img {
		/* max-width:100%; */
		height: 75px;
	}

	.navbar{
		font-size: .86rem;
	}

	#textContainer{
		/* height: calc(100vh - 90px); */
		overflow-y: auto;
		max-width: 400px;
	}

	#map {
		height: calc(100vh - 95px);
	}

	#mapControl{
		left: 5px;
	}

	#mapControl{
		font-size: 1rem;
	}
	
	#mapControl input[type=radio] {
		height: 1rem;
		margin-top: .3rem;
	}

	.mapboxgl-ctrl-geocoder {
		min-width: 210px!important;
		max-width: 210px!important;
	}

}

@media (min-width: 780px){
	.navbar{
		font-size: .86rem;
	}

	.mapboxgl-ctrl-geocoder {
		min-width: 220px!important;
		max-width: 220px!important;
	}

	.mapboxgl-ctrl-geocoder--input{
		font-size: .9rem !important;
	}
}

@media (min-width: 800px){
	.mapboxgl-ctrl-geocoder {
		min-width: 240px!important;
		max-width: 360px!important;
	}

	.mapboxgl-ctrl-geocoder--input{
		font-size: 1rem !important;
	}
}