/* Change flex-direction to column-reverse to move dropdown to bottom of map */
.thematic-map .stage {
	display: flex;
	flex-direction: column;
}

.thematic-map {
	--font-family-title: var(--font-display);
	--font-family-body: var(--font-body);
	--text-color-title: var(--gray-900);
	--text-color-body: var(--gray-900);

	--btn-bg-color: var(--sw-button-secondary-bg);
	--btn-bg-color-hover: var(--sw-button-secondary-bg-hover);
	--btn-text-color: var(--sw-button-secondary-color);
	--btn-text-color-hover: var(--sw-button-secondary-color-hover);

	width: 100%;
	max-width: var(--width-feature);
	margin: 0 auto var(--space-12);
	padding-top: var(--space-8);
	color: var(--text-color-body);
}
.thematic-map .title-section{
	text-align: center;
	padding: 0 20px;
}
.thematic-map .title {
	margin: 0;
	color: var(--text-color-title);
	font-family: var(--font-display-script);
	font-size: var(--text-5xl);
	font-weight: 400;
	padding: 0 var(--space-5);
}
.thematic-map .subtitle {
	margin: 0;
	color: #9CAEAF;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 400;
	padding: 0 var(--space-5);
}
.thematic-map .map-description{
	line-height: 1.3;
    font-style: italic;
    font-size: 18px;
    padding-bottom: 20px;
}

/***
	Map Stage
****/
.thematic-map .stage {
	position: relative;
	width: 100%;
}

.thematic-map.top-dropdown .stage {
	flex-direction: column;
}

/***
	Map List
****/

.thematic-map .list ul {
	display: none;
	align-items: flex-start;
	justify-content: space-between;
	flex-direction: column;
	flex: 0 1 auto;
	padding: var(--space-5);
	padding-right: var(--space-3);
}

.thematic-map .list ul.active {
	display: flex;
	justify-content: flex-start;
	position: absolute;	
	z-index: 2;
	width: 260px;
    margin: 0 auto;
    background: #353D43;
    border-radius: 10px;
}

.thematic-map .mobile-dropdown-close {
	display: none;
}

.thematic-map .mobile-dropdown-buttons {
	display: flex;
    position: relative;
    justify-content: center;
    padding: var(--space-1) 0;
}

.thematic-map .mobile-dropdown-trigger {
	display: flex;
	gap: 10px;
	padding: var(--space-3) var(--space-6);
	font-size: var(--text-base);
	font-weight: 600;
	color: #fff;
	border-radius: 10px;
	font-family: var(--font-body);
	text-transform: uppercase;
	background: #67777A;
	font-style: italic;
	width: 260px;
    justify-content: center;
}

.thematic-map .mobile-dropdown-trigger i {
	position: relative;
	top: 2px;
}

.thematic-map .mobile-dropdown-buttons i.fa-caret-up {
	display: none;
}

.thematic-map .mobile-dropdown-buttons.active i.fa-caret-down {
	display: none;
}

.thematic-map .mobile-dropdown-buttons.active i.fa-caret-up {
	display: block;
}

.thematic-map .mobile-dropdown-buttons i.fa-caret-down {
	display: block;
}

.thematic-map .list ul {
	height: auto;
	overflow-y: auto;
	margin-bottom: var(--space-6);
}

.thematic-map .list li {
	margin-bottom: var(--space-2);
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

.thematic-map .list li .poi-toggle {
	font-family: var(--font-family-body);
    font-size: 20px;
	text-align: left;
    background-color: transparent;
    color: #fff;
    font-weight: 400;
    line-height: 1;
    flex: 1 1 auto;
}

.thematic-map .list li .poi-toggle.hover,
.thematic-map .list li .poi-toggle.active {
	text-decoration: underline;
}

.thematic-map a.view-all {
	color: var(--btn-text-color);
	font-family: var(--font-family-body);
	font-size: var(--text-base);
	font-weight: 500;
	text-transform: uppercase;
	border-radius: var(--rounded-full);
	background-color: var(--btn-bg-color);
	padding: var(--space-1) var(--space-5) var(--space-1) var(--space-4);
}

.thematic-map .list li .qv-btn {
	display: inline;
	color: var(--btn-text-color);
	background: var(--btn-bg-color);
	font-size: var(--text-sm);
	display: inline-block;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--rounded-full);
	white-space: nowrap;
}

/***
	Map SVG
****/
.thematic-map .map {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.thematic-map .map svg {
	position: relative;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
	transform: none;
	margin: 0px;
}

.thematic-map .map svg [data-map-beacon] {
	cursor: pointer;
}

.thematic-map .region-list-cont {
	display: flex;
	justify-content: center;
	align-items: center;
}

.thematic-map .region-list-cont a.view-all {
	margin-right: var(--space-5);
}


.thematic-map [data-map-poi].hover .uuid-adba9c5f-1dd0-4dfa-ada2-372989a376e2,
.thematic-map [data-map-poi].hover .uuid-04def505-7768-4a42-8b16-2777329a31ad,
.thematic-map [data-map-poi].hover .uuid-a362e797-4d74-4f82-8ff3-e2388fa12b6e,
.thematic-map [data-map-poi].hover .uuid-a8bdabd5-9c25-46cd-9e11-76b676615fc2p,
.thematic-map [data-map-poi].hover .uuid-962f2b4a-a596-4ef1-961c-c1d102e62b11{
	fill: #9e864a;
	stroke: #9e864a;
}
/*
	Desktop Overwrites
*/

@media (min-width: 64em) {
	.thematic-map .list li .poi-toggle:hover{
		text-decoration: underline;
	}
	.thematic-map .title-section{
		display: flex;
		text-align: unset;
		align-items: center;
		max-width: 1360px;
		margin:  0 auto;
	}
	.thematic-map .title{
		font-size: 70px;
	}
	.thematic-map .map-description{
		flex: 1;
		line-height: 1.2;
		padding: 0 40px 0 0;
	}
	.thematic-map .list li .poi-toggle {
		font-style: italic;
	}

}