/****************************************************************** SCSS Variables ******************************************************************/
 section#service-map-wrapper {
	 background-color: #424242;
	 padding: 0px;
}
 section#service-map-wrapper #service-header {
	 background: #262626;
	 color: #e6e6e6;
	 font-weight: bold;
	 text-transform: uppercase;
	 font-size: 14px;
	 padding: 8px 0px;
}
 section#service-map-wrapper #service-header .container {
	 display: flex;
	 justify-content: space-evenly;
	 flex-wrap: wrap;
}
 section#service-map-wrapper #service-header span.brand-name, section#service-map-wrapper #service-header span#all-locations {
	 cursor: pointer;
	 padding: 8px 15px;
	 transition: color 0.24s ease;
}
 section#service-map-wrapper #service-header span.brand-name.selected, section#service-map-wrapper #service-header span#all-locations.selected {
	 color: #ffcc30;
}
 section#service-map-wrapper #service-header span.brand-name:hover, section#service-map-wrapper #service-header span#all-locations:hover {
	 color: #424242;
}
 section#service-map-wrapper #service-map {
	 height: 600px;
	 width: 100%;
	 max-width: 1200px;
	 margin: auto;
}
 section#service-map-wrapper #service-map #layer-toggle {
	 padding: 8px 16px 8px 8px;
	 position: absolute;
	 right: 0px;
	 bottom: 20px;
	 background-color: rgba(250, 250, 250, 0.6);
	 z-index: 5;
}
 section#service-map-wrapper #service-map #layer-toggle #visibility-title {
	 text-transform: uppercase;
	 font-weight: 600;
	 color: #424242;
	 letter-spacing: 1px;
}
 section#service-map-wrapper #service-map #layer-toggle .visibility-toggle {
	 cursor: pointer;
	 display: block;
	 padding-left: 25px;
	 position: relative;
	 user-select: none;
}
 section#service-map-wrapper #service-map #layer-toggle .visibility-toggle:before {
	 content: '';
	 position: absolute;
	 left: 0px;
	 top: 2px;
	 border-radius: 50%;
	 border: 1px solid #888;
	 width: 15px;
	 height: 15px;
	 transition: background-color 0.14s ease-in-out;
}
 section#service-map-wrapper #service-map #layer-toggle .visibility-toggle#brand:before {
	 background-color: #ffcc30;
}
 section#service-map-wrapper #service-map #layer-toggle .visibility-toggle#brand.disabled:before {
	 background-color: transparent;
}
 section#service-map-wrapper #service-map #layer-toggle .visibility-toggle#service:before {
	 background-color: #424242;
}
 section#service-map-wrapper #service-map #layer-toggle .visibility-toggle#service.disabled:before {
	 background-color: transparent;
}
 .mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
	 border-bottom-color: #ffcc30 !important;
}
 .mapboxgl-popup {
	 width: 400px;
	 max-width: 100%;
}
 .mapboxgl-popup .mapboxgl-popup-content {
	 width: 400px;
	 max-width: 100%;
	 padding: 0px !important;
}
 .mapboxgl-popup .mapboxgl-popup-content .mapboxgl-popup-close-button {
	 font-size: 25px;
	 font-weight: bold;
	 top: 6px !important;
}
 .mapboxgl-popup .mapboxgl-popup-content .locationTitle {
	 background-color: #ffcc30;
	 line-height: 1;
	 margin: 0px;
	 padding: 12px;
	 margin-bottom: 0px;
}
 .mapboxgl-popup .mapboxgl-popup-content .row {
	 margin-left: 0px;
	 margin-right: 0px;
}
 .mapboxgl-popup .mapboxgl-popup-content .row div[class^="col"] {
	 padding-left: 12px;
	 padding-right: 12px;
}
 .mapboxgl-popup .mapboxgl-popup-content .row p {
	 margin-bottom: 0px;
	 font-size: 14px;
}
 .mapboxgl-popup .mapboxgl-popup-content .row .description {
	 padding-top: 12px;
	 padding-bottom: 12px;
}
 .mapboxgl-popup .mapboxgl-popup-content .row .contactContainer .locationPhone, .mapboxgl-popup .mapboxgl-popup-content .row .contactContainer .locationWebsite {
	 font-weight: 500;
}
 .mapboxgl-popup .mapboxgl-popup-content .row .contactContainer a.locationWebsite {
	 color: #424242;
}
 .mapboxgl-popup .mapboxgl-popup-content .row .brandLogoContainer {
	 width: 150px;
	 height: auto;
	 margin: auto;
}