/* Encorp Pacific (Canada) 2024 Site Design - Locations Page CSS */
/* Last Updated: 2025.04.11 ET */

@import url('encp_boilerplate.css');
@import url('encp_prodtypes_bev.css');

/* Material Icons */

ul.beveragetypes > li > label::before,
ul.locationlist > li > a::after,
label.typedetails-control::after,
div.iw::before,
div.bdl-note h4::before,
div.caps-note h4::before,
#mylocation {
	display: inline-block;
	vertical-align: text-top;
	font-family: 'Material Symbols' !important;
	font-weight: normal !important;
	font-style: normal !important;
	font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
	font-size: 1em;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'liga';
}

/* Element classes */

main {
	transition: margin 0.3s;
}

div.warning {
	position: relative;
	background-color: rgb(252,206,141);
	color: black;
	font-size: 1rem;
	padding: 16px;
	margin-top: 0;
	z-index: 2000;
}

div.bdl-note,
div.caps-note {
	/* display: block;
	padding-left: 64px;
	margin-bottom: 2em; */
}

/* div.bdl-note {
	background: url('/images/encp_icon_bdl-beer.png') no-repeat left top;
	background-size: 43px 60px;
}

div.caps-note {
	background: url('/images/encp_icon_caps-on.png') no-repeat left top;
	background-size: 45px 42px;
} */

div.bdl-note h4,
div.caps-note h4 {
	position: relative;
	background-color: rgb(255,241,193);
	color: rgb(36,36,36);
	font-size: 1rem;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: -0.02em;
	padding: 12px 16px 12px 64px;
}

div.bdl-note h4::before,
div.caps-note h4::before {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 16px;
	font-size: 32px;
}

div.bdl-note h4::before {
	content: '\F1F3';
}

div.caps-note h4::before {
	content: '\E268';
}

div.printernotes {
	display: block;
	min-height: 90px;
	max-width: 25em;
	background: url('/images/encp_icon_express-go-printer.svg') no-repeat left top;
	background-size: 73px 80px;
	padding: 1em 0 0 90px;
	margin-top: -1em;
	margin-bottom: 1em;
}

form.locsearch input[type="text"] {
	box-sizing: border-box;
	display: block;
	background: rgb(255,255,255) url('/images/encp_icon_search_grey_48px.png') no-repeat left 20px center;
	background-size: 24px 24px;
	width: 100%;
	height: calc(1.1em + 32px);
	color: rgb(14,44,109);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.1em;
	text-transform: capitalize;
	padding: 16px 24px 16px 52px;
	border-radius: 9999px;
}

form.locsearch input[type="checkbox"] {
	display: none;
}

form.locsearch input[type="checkbox"] + label {
	display: block;
	background: white url('/images/encp_icon_unchecked_blue_48px.png') no-repeat left 10px center;
	background-size: 28px 28px;
	color: rgb(14,44,109);
	font-weight: 400;
	font-size: 18px;
	line-height: 1;
	padding: 12px 12px 12px 48px;
	border: 1px solid rgb(179,195,227);
	border-radius: 4px;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
}

form.locsearch select {
	position: relative;
	overflow: hidden;
	background-color: rgb(0,51,160);
 	background-image: url('/images/encp_icon_expand-down_white_48px.png');
	color: white;
	border: none;
	border-radius: 16px;
}

form.locsearch.desktop {
	padding: 32px 32px 16px;
}

form.locsearch.desktop > h1 {
	font-size: 32px;
	margin-top: 0;
	margin-bottom: 16px;
}

form.locsearch.desktop input[type="checkbox"]:checked + label {
	background-color: rgb(244,247,255);
	background-image: url('/images/encp_icon_checked_blue_48px.png');
}

form.locsearch.desktop label > img {
	display: inline-block;
	vertical-align: middle;
	max-width: 24px;
	height: auto;
}

form.locsearch.desktop label > span {
	display: inline-block;
	vertical-align: middle;
	max-width: 80px;
}

form.locsearch.mobile {
	display: none;
}

form.locsearch p.buttonbar {
	display: flex;
	flex-direction: row;
	align-items: center;
}

form.locsearch a.ghost {
	flex: 1 1 auto;
	text-align: center;
}

form.locsearch p.buttonbar:not(:has(a.ghost)) > button {
	flex: 1 1 auto;
	margin-right: 0;
}

ul.locfilters,
ul.locfilters ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.locfilters {
	padding: 8px 24px;
	border: 1px solid rgb(111,110,120);
	border-radius: 28px;
	margin: 16px 0;
}

ul.locfilters ul {
	margin-bottom: 16px;
}

ul.locfilters > li:not(:first-child, :nth-child(2), .buttonbar) {
	padding-top: 16px;
	border-top: 2px dashed rgb(179,195,227);
	margin-top: 24px;
}

ul.locfilters li {
	padding: 0;
	margin: 8px 0;
}

ul.locfilters > li {
	font-weight: 700;
	font-size: 16px;
}

ul.locfilters label {
	display: block;
	color: rgb(14,44,109);
}

ul.locfilters > li:not(.heading) {
	display: none;
}

input[type="checkbox"].displaystate:checked + ul.locfilters > li:not(.heading) {
	display: block;
}

input[type="checkbox"].displaystate:checked + ul.locfilters > li.heading {
	display: none;
}

ul.locfilters li:not(.heading) label::before {
	content: '';
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	display: inline-block;
	vertical-align: text-bottom;
	width: 18px;
	height: 24px;
	margin-right: 6px;
}

ul.locfilters li.express label::before { background-image: url('/images/encp_map_single-expr.png'); }
ul.locfilters li.bev_depot label::before { background-image: url('/images/encp_map_single-bev.png'); }
ul.locfilters li.bev_grocer label::before { background-image: url('/images/encp_map_alt-marker-grocer.png'); }
ul.locfilters li.bev_liquor label::before { background-image: url('/images/encp_map_alt-marker-liquor.png'); }
ul.locfilters li.elec_depot label::before { background-image: url('/images/encp_map_single-elec.png'); }
ul.locfilters li.elec_vrr label::before { background-image: url('/images/encp_map_alt-marker-affiliate.png'); }
ul.locfilters li.elec_affiliate label::before { background-image: url('/images/encp_map_alt-marker-affiliate.png'); }
ul.locfilters li.lrgapp_depot label::before { background-image: url('/images/encp_map_single-lrgapp.png'); }

ul.locfilters li.heading label::after {
	content: '\25BE';
	float: right;
}

ul.locfilters li.buttonbar > button {
	width: 100%;
}

ul.activefilters {
	list-style: none;
	font-size: 14px;
	line-height: 1;
	padding: 0;
	margin: 0.5em 0;
	margin-bottom: 1.5rem;
}

ul.activefilters > li:not(.headline) {
	display: inline-block;
	background-color: rgb(244,247,255);
	padding: 0.2em 0.6em;
	border: 1px solid rgb(179,195,227);
	border-radius: 9999px;
	margin: 0.2em 0.2em 0.2em 0;
}

ul.activefilters > li.headline {
	display: inline-block;
	font-weight: 700;
	margin: 0.2em 0.2em 0.2em 0;
}

ul.regionlist,
ul.regionlist ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.regionlist {
	font-size: 16px;
	padding: 8px 24px;
	border: 1px solid rgb(111,110,120);
	border-radius: 28px;
	margin: 16px 0;
}

ul.regionlist ul {
	/* margin-bottom: 16px; */
}

ul.regionlist li.heading {
	color: rgb(111,110,120);
	font-size: 18px;
	margin-bottom: 0;
}

ul.regionlist > li:not(.heading) {
	display: none;
	background: linear-gradient(to right, rgb(179,195,227) 9px, transparent 10px, transparent 12px) repeat-x left top / 12px 2px;
	padding-top: 16px;
	margin-top: 16px;
}

ul.regionlist > li > a,
ul.regionlist > li > a:visited {
	font-weight: 700;
	text-decoration: none;
}

ul.regionlist ul a,
ul.regionlist ul a:visited {
	color: rgb(14,44,109);
	font-weight: 400;
	text-decoration: none;
}

ul.regionlist li.heading label {
	display: block;
	padding: 6px 0;
}

ul.regionlist li.heading label.active {
	color: rgb(14,44,109);
	font-weight: 700;
}

ul.regionlist li.heading label::after {
	content: '\25BE';
	float: right;
}

input[type="checkbox"].displaystate:checked + ul.regionlist > li:not(.heading) {
	display: block;
}

input[type="checkbox"].displaystate:checked + ul.regionlist > li.heading {
	/* display: none; */
}

ul.locfilters li:not(.heading) label::before {
	content: '';
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	display: inline-block;
	vertical-align: text-bottom;
	width: 18px;
	height: 24px;
	margin-right: 6px;
}


/* Coverage reports */

ul.loctypes.drivetime label {
	display: block;
	background-position: 0.5em center;
	line-height: 1.2;
	padding: 0.5em 0.5em 0.5em 2.5em;
	margin-right: 0.5em;
	border-radius: 9999px;
}

ul.loctypes.drivetime label.dtdepot { border: 1px solid rgba(0,53,173,0.5); background-color: rgba(0,53,173,0.2); }
ul.loctypes.drivetime label.dtgrocer { border: 1px solid rgba(255,179,0,0.5); background-color: rgba(255,179,0,0.2); }
ul.loctypes.drivetime label.dtliquor { border: 1px solid rgba(255,0,0,0.5); background-color: rgba(255,0,0,0.2); }
ul.loctypes.drivetime label.dtmarr { border: 1px solid rgba(82,110,163,0.5); background-color: rgba(82,110,163,0.2); }
ul.loctypes.drivetime label.dtamarr { border: 1px solid rgba(186,206,236,0.5); background-color: rgba(186,206,236,0.2); }

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

ul.locationlist > li > a,
ul.locationlist > li > a:visited {
	display: block;
	position: relative;
	background-color: rgb(244,247,255) !important;
	color: rgb(14,44,109);
	font-weight: 500;
	text-decoration: none;
	padding: 20px;
	border: 1px solid rgb(179,195,227);
	border-radius: 8px;
	margin-bottom: 16px;
	transition: box-shadow 0.1s;
	cursor: pointer;
}

ul.locationlist dl {
	position: relative;
	overflow: hidden;
	color: black;
	font-weight: 700;
	font-size: 16px;
	margin: 0.7em 0 0 0;
}

ul.locationlist dt {
	display: inline-block;
	color: rgb(136,132,120);
	margin-right: 0.5em;
}

ul.locationlist dd {
	display: inline-block;
	padding: 0;
	margin: 0;
}

ul.locationlist dd.feature {
	float: right;
}

ul.locationlist dd.feature > img {
	height: 8px;
	width: auto;
}

ul.locationlist > li > a:active,
ul.locationlist > li > a.active,
ul.locationlist > li > a.active:visited {
	border: 2px solid rgb(0,51,160);
}

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);
	outline: none;
}

ul.locationlist dl + dl,
ul.locationlist dl + ul {
	margin-top: 1.5em;
}

dl.results {
	position: relative;
	overflow: hidden;
	color: rgb(14,44,109);
	padding-top: 32px;
	border-top: 2px dashed rgb(179,195,227);
	margin-top: -32px;
	margin-bottom: 16px;
}

dl.results dt {
	float: left;
	font-weight: 500;
	font-size: 32px;
	line-height: 1.07;
	letter-spacing: -0.03em;
	margin-right: 0.5em;
}

dl.results dd {
	font-size: 18px;
	text-align: right;
	margin-top: 8px;
	margin-left: 120px;
}

dl.depotinfo {
	position: relative;
	overflow: hidden;
	padding: 0 32px;
	border: 1px solid rgb(179,195,227);
	border-radius: 8px;
}

dl.depotinfo > dt {
	max-width: calc(20rem + 56px);
	color: rgb(14,44,109);
	font-weight: 500;
	font-size: 32px;
	letter-spacing: -0.03em;
	margin: 32px 0 12px;
}

dl.depotinfo > dt::before {
	margin-right: 24px;
}

dl.depotinfo > dt > span.openstatus {
	float: right;
	font-size: 1rem;
	letter-spacing: 0;
	margin-top: 14px;
}

dl.depotinfo > dd {
	padding: 0;
	margin: 12px 0 12px 56px;
}

dl.depotinfo p {
	color: rgb(36,36,36);
	margin-top: 0.5em;
}

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

dl.depotinfo span.distance {
	font-size: 0.7em;
}

dl.depotinfo span.adminlink {
	opacity: 0;
	transition: opacity 0.1s;
}

dl.depotinfo:hover span.adminlink {
	opacity: 1;
}

div.recycnotes {
	margin: 1em 0;
}

ul.acceptedtypes {
	position: relative;
	list-style: none;
	max-width: 768px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 24px;
	padding: 0;
	margin: 1em 0
}

ul.acceptedtypes > li {
	box-sizing: border-box;
	width: 174px;
	background-color: rgb(244,247,255);
	color: rgb(14,44,109);
	font-weight: 400;
	text-align: center;
	padding: 24px;
	border: 1px solid rgb(179,195,227);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	justify-content: space-between;
}

ul.acceptedtypes.stypeid-8 > li {
	width: 240px;
}

ul.acceptedtypes > li > img {
	display: block;
	height: 60px;
	width: auto;
	object-fit: contain;
	margin: 0 auto;
	/* border: 1px dashed red; */
}

ul.acceptedtypes > li > img + img {
	margin-top: 16px;
}

ul.acceptedtypes > li > span {
	display: block;
	line-height: 1.2em;
	letter-spacing: -0.02em;
	padding-top: 16px;
}

ul.acceptedtypes > li > label.button {
	display: block;
	width: 100%;
	margin: 16px 0 0 0;
}

/* ul.acceptedtypes > li > span.longtext {
	font-size: 0.8em;
} */

/* ul.acceptedtypes > li > label: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);
} */


@media (max-width: 1000px) {

	ul.acceptedtypes {
		display: block;
		overflow-x: scroll;
		white-space: nowrap;
		padding-left: 60px;
		padding-right: 35px;
		margin-left: -60px;
		margin-right: -60px;
	}

	ul.acceptedtypes > li {
		display: inline-block;
		margin-right: 24px;
	}

}

ul.beveragetypes {
	position: relative;
	list-style: none;
	padding: 0;
	margin: 1em 0;
}

ul.beveragetypes > li {
	display: inline-block;
	color: rgb(14,44,109);
	padding: 12px 16px;
	border: 1px solid rgb(179,195,227);
	border-radius: 8px;
	margin: 0 8px 12px 0;
}

ul.beveragetypes > li > img {
	display: inline-block;
	vertical-align: middle;
	width: 48px;
	height: 48px;
	object-fit: contain;
}

ul.beveragetypes > li > span {
	display: inline-block;
	vertical-align: middle;
	margin-left: 1em;
	margin-right: 1em;
}

ul.beveragetypes > li > label.button {
	vertical-align: middle;
	padding-left: 12px;
	padding-right: 12px;
	margin: 0;
}

ul.beveragetypes div.morelink a {
	width: 100%;
}

table.hours {
	position: relative;
	width: 100%;
	max-width: 20rem;
	margin-bottom: 1em;
	border-spacing: 0;
}

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

table.hours td {
	color: rgb(111,110,120);
	font-weight: 400;
	padding: 0 0.5em 0.5em 0;
}

table.hours td.time {
	text-align: right;
	white-space: nowrap;
	padding: 0 0 0.5em 0.5em;
}

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,
table.hours td.closed {
	color: rgb(255,163,0) !important;
	font-weight: bold;
	text-transform: uppercase;
}

.holiday,
table.hours td.holiday {
	color: rgb(43,77,152) !important;
	font-weight: bold;
}


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

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

/* Specific elements */

/* body > main {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

@media (min-width: 768px) {
	body > main {
		flex-direction: row-reverse;
		justify-content: flex-end;
	}
} */

/* body > main > div {
	display: none;
} */

main > header > h1 > img.express {
	width: 160px;
	height: auto;
}

li > article {
	box-sizing: border-box;
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 424px;
	transform: translate(-50%,-50%);
	background: white;
	font-weight: normal;
	line-height: 1.6;
	text-align: left;
	white-space: wrap !important;
	padding: 24px;
	border: 1px solid rgb(179,195,227);
	border-radius: 8px;
	box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14),
		0 3px 14px 2px rgba(0,0,0,0.12),
		0 5px 5px -3px rgba(0,0,0,0.20);
	z-index: 10000;
}

@media (max-width: 480px) {

	li > article {
		width: 320px;
	}

}

li > article h3 {
	margin-bottom: 0;
}

li > article > header {
	padding-bottom: 1.0666rem;
	border-bottom: 1px solid rgb(204,204,204);
	margin-bottom: 0.833rem;
}

li > article > p {
	line-height: 1.6em;
}

li > article > img {
	display: block;
	height: 90px;
	width: auto;
	margin: 0 auto 16px;
}

li > article > div.morelink {
	margin-bottom: 0;
}

table.bevinfo {
	margin-bottom: 16px;
}

label.typedetails-control {
	position: absolute;
	top: 16px;
	right: 16px;
}

label.typedetails-control::after {
	content: 'close';
	display: inline-block;
	vertical-align: middle;
	color: rgb(255,163,0);
	font-size: 24px;
	margin-left: 0.2em;
}

label.typedetails-control > span {
	color: rgb(0,51,160);
	font-weight: 500;
	font-size: 12px;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.1s;
}

label.typedetails-control:hover > span {
	color: rgb(179,195,227);
}

li > article:hover > label.typedetails-control > span {
	opacity: 1;
}

input.typedetails-radio:checked + article {
	display: block;
}

section.myloc {
	/* background: linear-gradient(to bottom, rgba(255,255,255,1) calc(100% - 7px), rgba(0,0,0,0.1) calc(100% - 6px), rgba(255,255,255,1) 100%) !important; */
	padding-top: 16px !important;
	padding-bottom: 24px !important;
}

section.myloc > p {
	font-size: 18px;
	line-height: 1.2;
	margin: 0;
}

section.internal {
	box-sizing: border-box;
	border: 2px dashed red;
	padding: 1em;
}

section.internal dl.info img {
	max-height: 50px;
	width: auto;
}

section.adminlinks,
table.cfdump_query {
	position: relative;
	z-index: 1001;
}

#mylocation {
	position: absolute;
	font-size: 24px;
	text-decoration: none;
	margin-top: -38px;
	margin-left: 294px;
}

#mainmap {
	position: fixed !important;
	top: 128px;
	bottom: 0;
	left: 0;
	right: 0;
}

#locationdetails {
	border: 1px dashed red;
}

/* #locationdetails > article {
	float: none;
	overflow: visible;
	max-width: 1024px;
	margin: 32px 64px 16px;
} */

#locationdetails > article > section {
	display: inline-block;
	vertical-align: top;
	width: 448px;
	margin-right: 60px;
}

#locationsnav {
	position: relative;
	width: 400px;
	min-height: calc(100vh - 128px);
	background: rgb(255,255,255);
	/* box-shadow: 2px 0 6px 0 rgba(0,0,0,0.2); */
	z-index: 1000;
	transition: margin 0.3s;
}

#locationsnav > div:first-child {
	text-align: center;
	padding: 32px;
}

#locationsnav > div > a.cta {
	margin: 0;
}

#locationsnav > section {
	background: white;
	padding: 32px;
}

#locationsnav > section > div:last-of-type {
	text-align: center;
	padding-bottom: 32px;
}

#locationsnav h2 {
	font-weight: 500;
	font-size: 32px;
	line-height: 1.07;
}

#locationsnav h2 + h2 {
	margin-top: -1em;
}

#locationsnav h2 + ul.locationlist {
	padding-top: 0;
}

#locationsnav h2 > small {
	display: block;
}

#locationsnav ul.sectionnav > li ul {
	top: auto;
	bottom: -32px;
}

#directionsPanel {
	font-size: 16px;
	padding: 0 32px 32px;
}

#directionsPanel:not(:empty)::before {
	content: 'Directions';
	display: block;
	color: rgb(14,44,109);
	font-weight: 500;
	font-size: 24px;
	padding-top: 16px;
	border-top: 2px dashed rgb(179,195,227);
	/* margin: 0 32px; */
}

/* #directionsPanel > * {
	padding: 16px !important;
} */

#map_canvas {
	display: block;
	position: relative;
	background-color: #f7f6f4;
}

#mainmap #map_canvas {
	position: absolute;
	height: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 910;
}

#primaryinfo > #map_canvas {
	border: 1px solid rgb(179,195,227);
	border-radius: 8px;
}

#acceptedproducts h2 {
	margin-bottom: 1.5em;
}

#acceptedproducts > aside > h3 {
	margin-bottom: 1em;
}

/* From 2011 design */

img.statuslogo {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 300;
}

div.adminonly {
	clear: both;
}

div.adminonly {
	border: 1px dashed red;
	background-color: rgb(255,245,230);
	padding: 1em 1.5em;
}

div.adminonly h4:first-child {
	margin-top: 0 !important;
}

div.ritwievent {
	background-color: rgb(217,196,149)!important;
	border: 3px solid rgb(141,68,51)!important;
	width: 210px;
	font-size: 12px;
	line-height: 120%;
	font-weight: bold;
	text-align: center;
	padding: 0.25em 0.5em 0.5em;
	margin: 0.5em auto 1em auto;
}

div.ritwievent div.intro {
	color: rgb(35,80,102);
	text-transform: uppercase;
	font-size: 9px;
	font-weight: bold;
	margin-bottom: 0.5em;
}

div.ritwilogo {
	margin: 0 auto;
}

div.ritwilogo a,
div.ritwilogo a:visited {
	text-decoration: none;
}

div.ritwilogo img,
div.ritwiicon img {
	vertical-align: middle;
	margin-right: 10px;
	margin-bottom: 10px;
}

div.ritwiad {
	float: right;
	padding-left: 30px;
	text-align: center;
	z-index: 3000;
}

div.elecevents {
	width: 15em;
	float: right;
	padding: 0.25em;
	border: 3px solid rgb(102,155,63);
}

div.elecevents div.intro {
	color: white;
	background-color: rgb(102,155,63);
	text-transform: uppercase;
	font-size: 9px;
	font-weight: bold;
	line-height: 120%;
	padding: 0.5em 1em;
}

div.elecevents ul {
	margin: 0.5em 0;
	padding-left: 1.5em;
}

div.colleft h1 {
	color: black;
	font-size: 1.8em;
}

div.colleft h4,
div.colright h4 {
	border-top: 3px solid rgb(220,220,220);
	padding: 0.4em 0 0;
}

div.serviceicons img {
	vertical-align: middle;
}

table.grid a.morelink {
	padding-left: 0;
}

#depotlist {
	clear: right;
}

ul.photos {
	position: relative;
	overflow: hidden;
	clear: both;
	list-style-type: none;
	padding: 14px 10px;
	margin: 1em -10px;
}

ul.photos li {
	display: inline-block;
	vertical-align: middle;
	padding: 0;
	border: 5px solid white;
	box-shadow: 0 0 6px rgba(0,0,0,0.4);
	margin: 0 1em 0.5em 0;
}

ul.photos li img {
	display: block;
}

dl.depotusers {
	position: relative;
	overflow: hidden;
}

dl.depotusers dt {
	font-weight: bold;
	clear: left;
	float: left;
	width: 9em;
	padding: 0;
	margin: 0 0 0.5em 0;
}

dl.depotusers dd {
	padding: 0 0 0 9em;
	margin: 0 0 0.5em 0;
}

/* Special Map Overrides */

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

/* 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;
}

/* "Pegman" button for Street View */
button.gm-svpc img {
	object-fit: contain;
}

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

.custom-clustericon {
	display: flex;
	align-items: center;
	background: rgb(255,163,0);
	color: white;
	font-weight: bold;
	font-size: 24px;
	border-radius: 100%;
	border: 1px solid white;
}

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

div.gm-style-iw {
	width: 356px !important;
	max-width: 356px !important;
	background-color: white !important;
	color: rgb(36,36,36) !important;
	font-family: 'DIN', sans-serif !important;
	font-weight: normal !important;
	font-size: 18px !important;
	line-height: 1.2;
	padding: 0 !important;
	border: 1px solid rgb(179,195,227) !important;
	border-radius: 8px;
	box-shadow: none !important;
}

div.gm-style-iw-chr > button {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	/* border: 1px dashed red !important; */
}

div.gm-style-iw-d {
	padding: 0 20px !important;
	/* border: 1px dashed red; */
}

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

h3.iw {
	width: calc(100% - 40px);
	margin-top: 0 !important;
	/* border: 1px dashed red; */
}

ul.iw.pgms {
	list-style: none;
	text-align: left;
	padding: 0;
	margin: 8px 0;
	/* display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between; */
}

ul.iw.pgms > li {
	display: inline-block;
	padding: 0;
	margin: 0 12px 6px 0;
}

img.pgmicon {
	display: block;
	width: 92px;
	height: auto;
	margin-bottom: 2px;
}

div.iw {
	position: relative;
	margin-bottom: 16px;
}

div.iw::before {
	position: absolute;
	left: 0;
	color: rgb(0,51,160);
}

div.iw.hours,
div.iw.address {
	padding-left: 1.5em;
}

div.iw.hours::before {
	content: 'schedule';
}

div.iw.address::before {
	content: 'location_on';
}

div.iw span {
	display: inline-block;
	margin-right: 0.5em;
}

.iw.hours span.state,
.iw.address span.dist {
	font-weight: 700;
}

/* div.iw > b {
	padding-left: 0.3em;
} */

.iw.cta {
	text-align: center;
}

/* a.button.dtls,
a.button.dtls:visited,
a.button.dirs,
a.button.dirs:visited {
	color: white;
	font-size: 14px;
	line-height: 14px;
	padding: 9px 24px;
	border-radius: 16px;
	margin: 4px;
	box-shadow: none;
}

a.button.dtls,
a.button.dtls:visited {
	background-color: rgb(255,163,0);
}

a.button.dirs,
a.button.dirs:visited {
	background-color: rgb(0,51,160);
} */

.iw a.dirs {
	display: inline-block;
	font-weight: 500;
	font-size: 14px;
	text-decoration: underline;
	white-space: nowrap;
}

#bcrecycles img {
	max-width: 100%;
	height: auto;
}

/* Responsive Adjustments */

@media (min-width: 1041px) {

	#acceptedproducts {
		display: flex;
		flex-direction: row;
		gap: 90px;
	}
	
	#acceptedproducts > aside {
		width: 460px;
		padding-top: 12px;
	}

}

@media (min-width: 901px) {

	main > header > h1 > img.express {
		float: right;
		margin-left: 30px;
		margin-top: 30px;
	}

	#primaryinfo {
		display: flex;
		flex-direction: row;
		align-items: stretch;
	}
	
	#primaryinfo > * {
		margin-top: 0;
		margin-bottom: 0;
	}

	#primaryinfo > #map_canvas {
		border: 1px solid rgb(179,195,227);
		border-radius: 8px;
		margin-right: 24px;
		flex: 1 1 auto;
	}
	
}

@media (max-width: 900px) {

	#primaryinfo > #map_canvas {
		height: 70vw;
	}

	main > header > h1 > img.express {
		display: block;
		margin-top: 12px;
	}

}

@media (min-width: 769px) {

	#mainmap {
		left: 400px;
	}

}

@media (max-width: 768px) {

	ul.beveragetypes > li {
		padding: 8px 12px;
	}

	ul.beveragetypes > li > img {
		width: 24px;
		height: 24px;
	}

	ul.beveragetypes > li > label.button {
		padding: 4px;
	}

	dl.depotinfo {
		padding: 0 20px;
	}

	dl.depotinfo > dt {
		max-width: calc(20rem + 40px);
		font-size: 24px;
	}

	dl.depotinfo > dt::before {
		margin-right: 16px;
	}

	dl.depotinfo > dd {
		margin-left: 40px;
	}

	#locationsnav {
		margin-top: 400px;
		z-index: 900;
	}

	#mainmap {
		width: 100%;
		height: 400px;
		z-index: 1000;
	}

}

@media (max-width: 720px) {

	#locationsnav {
		min-height: calc(100vh - 64px);
	}

	#mainmap {
		top: 64px;
	}

}