/* MARR - Locations CSS */
/* Last Updated: 2023.08.21 ET */

@import url('marr_default.css');

ul.sites {
	list-style: none;
	text-align: center;
	padding: 0;
	margin: 1rem 0;
}

ul.sites > li {
	display: inline-block;
	vertical-align: top;
	width: 20rem;
	background-color: white;
	text-align: left;
	padding: 0 1rem 0.5rem;
	border-radius: 1rem;
	margin: 1rem;
}

dl.depotinfo {
	position: relative;
	overflow: hidden;
	clear: both;
}

dl.depotinfo > dt {
	float: left;
	clear: both;
	width: 4em;
	margin: 0 0 1.0666em 0;
}

dl.depotinfo > dd {
	font-weight: bold;
	padding-left: 5em;
	margin: 0 0 1.0666em 0;
}

dl.depotinfo p {
	margin-top: 0.5em;
}

dl.depotinfo p > a.button.dirs {
	margin-right: 16px;
	padding-left: 32px;
	padding-right: 32px;
}

table.hours {
	position: relative;
	margin-bottom: 1em;
	border-spacing: 0;
}

table.hours caption .notes {
	text-transform: none;
}

table.hours td {
	font-weight: normal;
	padding: 0 0.5em 0.3em 0;
}

table.hours td.time {
	white-space: nowrap;
}

table.hours tr.today td {
	color: black;
	font-weight: bold;
}

.open,
.opening,
table.hours td.open,
table.hours td.opening {
	color: rgb(80,161,71) !important;
	font-weight: bold;
	text-transform: uppercase;
}

.closing,
table.hours td.closing {
	color: rgb(180,180,30) !important;
	font-weight: bold;
	text-transform: uppercase;
}

.closed,
.holiday,
table.hours td.closed,
table.hours td.holiday {
	color: rgb(249,158,28) !important;
	font-weight: bold;
	text-transform: uppercase;
}

td.holiday.longtext {
	font-size: 0.75em;
}

.unknown {
	color: rgb(200,200,200) !important;
	font-weight: bold;
	text-transform: uppercase;
}

div.recycnotes {
	border: 1px solid rgb(178,196,229);
	padding: 0.5rem 1.5rem;
	margin: 1rem auto;
}

ul.regionlist {
	margin-top: 0;
}

ul.regionlist > li {
	margin-bottom: 0.2rem;
}

ul.regionlist a,
ul.regionlist a:visited {
	color: rgb(96,113,159);
	font-style: italic;
	font-weight: bold;
	text-decoration: none;
}

ul.regionlist > li.active::after {
	content: '\276F';
	float: right;
}

ul.regionlist > li.active a,
ul.regionlist > li.active a:visited {
	color: rgb(42,60,104);
}

ul.locationlist {
	list-style: none;
	padding: 0;
	margin-top: 0;
}

ul.locationlist > li {
	padding: 0;
	margin: 0 0 1rem 0;
}

ul.locationlist a,
ul.locationlist a:visited {
	display: block;
	box-sizing: border-box;
	background-color: white;
	text-align: left;
	text-decoration: none;
	padding: 1rem;
	border-radius: 0.5rem;
}

ul.locationlist > li > a:active,
ul.locationlist > li > a.active,
ul.locationlist > li > a.active:visited,
ul.locationlist > li > a:hover {
	box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
}

ul.locationlist h3 {
	font-size: 1.2rem;
	text-align: left;
	margin-top: 0;
}

ul.locationlist dl {
	position: relative;
	overflow: hidden;
	margin: 0.7em 0 0 0;
}

ul.locationlist dt {
	float: left;
	color: rgb(136,132,120);
	font-weight: 300;
	margin-right: 0.7em;
}

ul.locationlist dd {
	padding: 0;
	margin: 0;
}

ul.partners {
	position: relative;
	box-sizing: border-box;
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.partners > li {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: calc(33% - 3em);
	padding: 0 0 0 30px;
	margin: 0 1em 1em;
}

span.legendicon {
	position: absolute;
	left: 0;
	width: 20px;
	height: 20px;
	font-size: 1px;
	line-height: 1;
	border: 1px solid black;
	border-radius: 20px;
}

#findsites {
	background-color: rgb(237,239,248);
	padding: 1px 0 0 0;
	margin: 0;
}

#findsites > article {
	margin-top: 3rem;
}

#sitesearch {
	position: relative;
	text-align: center;
	margin: 1rem auto 2rem;
}

#sitesearch > input[type="text"] {
	width: 30rem;
	max-width: 90%;
	text-align: center;
	border: none;
	border-radius: 9999px;
	margin-bottom: 0.25rem;
}

#locationsnav {
	float: left;
	width: 20rem;
	height: calc(480px + 10vw);
	padding: 0.5rem;
	margin-bottom: 0;
	overflow-y: auto;
}

#map_canvas {
	position: relative;
	width: 100%;
	height: calc(480px + 10vw);
	margin: 0;
}

#map_canvas:not(.onesite) {
	width: calc(100% - 20rem);
	margin: 0 0 0 20rem;
}

div.notice + form #map_canvas {
	margin-top: 1em;
}

#map_canvas.onesite {
	height: 50vh;
	margin: 2rem 0 4rem;
}

#directionsPanel:not(:empty) {
	margin-bottom: 2em;
}

#directionsPanel:not(:empty)::before {
	content: 'Directions:';
	display: block;
	font-weight: 900;
	font-style: italic;
	font-size: 1.4rem;
	text-transform: uppercase;
	margin-bottom: 0.5em;
}

@media (max-width: 640px) {

	#locationsnav {
		width: 14rem;
	}

	#map_canvas:not(.onesite) {
		width: calc(100% - 14rem);
		margin-left: 14rem;
	}

}


/* Special Map Overrides */

/* Marker label which contains fontFamily "Arctic" in JS */
#map_canvas div[style*="Arctic"] {
	text-shadow: 1px 1px #1F3159,
		-1px 1px #1F3159,
		-1px -1px #1F3159,
		1px -1px #1F3159;
}

/* Container of the marker label which sets the position */
#map_canvas div[style="height: 100px; margin-top: -50px; margin-left: -50%; display: table; border-spacing: 0;"] {
	margin-top: -80px !important;
	margin-left: 32px !important;
}

/* Marker clusterer plus - now styled with CSS */

.custom-clustericon {
	display: flex;
	align-items: center;
	background: rgb(96,113,159);
	color: white;
	font-weight: bold;
	font-size: 1.43rem;
	border-radius: 100%;
}

button.gm-control-active {
	border-radius: 0 !important;
	min-height: auto;
}

div.gm-style-iw {
	color: rgb(100,100,100) !important;
	font-family: 'DIN', sans-serif !important;
	font-weight: normal !important;
	font-size: 1rem !important;
	line-height: 1.2;
}

div.gm-style-iw b {
	font-weight: 500 !important;
}

.iw {
	color: rgb(31,49,89);
	margin-top: 0.5rem !important;
	/* margin-bottom: 0.5rem; */
}

h4.iw {
	text-transform: uppercase;
	margin-bottom: 1em;
}

div.iw {
	font-weight: bold;
	/* padding-left: 5em; */
	padding-left: 2em;
	margin-bottom: 1rem;
}

div.iw.state {
	font-weight: bold;
	padding-left: 0;
	/* margin-bottom: 2rem; */
}

/* div.iw.state > span {
	float: left;
	margin-left: -5em;
} */

div.iw.state > span::after {
	content: ' - ';
	color: rgb(31,49,89);
}