.forecast-sticky-menu {
	position:relative;
}

.forecast-sticky-menu.subnav nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	background: #fff;
}

.forecast-sticky-menu nav::-webkit-scrollbar {
	display: none;
}

.forecast-sticky-menu a {
	font-size: 11px;
	font-weight: bold;
	padding: 3px 9px;
	border-radius: 30px;
	display: inline-block;
	color: #3c6498;
	border: 1px solid #dfe7f2;
	text-transform: uppercase;
	background: #f3f7fc;
	white-space: nowrap;
}

.forecast-sticky-menu a.active {
	background: #2661a5;
	border-color: #2661a5;
	color: #fff;
}

.sticky-climate-placeholder {
	height: 0;
}
.forecast-sticky-menu a[href="#"].active img {
	filter: brightness(0) invert(1);
}
.forecast-sticky-menu a[href="#"] {
	align-items: center;
	justify-content: center;
	display: none;
	padding: 0;
	min-width: 25.1px;
	min-height: 25.1px;
}
.forecast-sticky-menu a[href="#"] img {
	width: 10px;
	height: 10px;
}
.sticky-climate-menu.is-past-sections {
	visibility: hidden;
	pointer-events: none;
}
.sticky-climate-menu {
	position: relative;
	z-index: 1;
	background: #fff;
}
.sticky-climate-menu.is-fixed {
	position: fixed;
	top: 0;
	z-index: 999;
	left: var(--sticky-left);
	width: var(--sticky-width);
}
.sticky-climate-menu.is-fixed a[href="#"] {
	display: flex;
}
.sticky-climate-menu nav {
	padding: 15px 0 15px 0;
}
.sticky-climate-menu:after {
	content: "";
	position: absolute;
	left: 2%;
	right: 2%;
	bottom: 0;
	height: 8px;
	pointer-events: none;
	border-radius: 50%;
	z-index: -1;
	box-shadow: 0 0 16px rgba(0, 0, 0, .12);
}
.coords-box {
	position: relative;
	margin: -0.7rem 0 1.7rem 0;
	font-size: 14px;
	color: #64748b;
}
.coords-box .place-header-detail {
    display: inline-block;
    white-space: nowrap;
}
.coords-box .dot {
	color: var(--secondary-text-color);
	padding: 0 4px;
	font-weight: bold;
}
.coords-box.before-sticky {
	margin: -0.7rem 0 3px 0;
}

.poi-common-header {
	position: relative;
	z-index: 0;
	display: flow-root;
	margin: 0 0 3rem 0;
}

.poi-common-header:after {
	content: "";
	position: absolute;
	top: -1.5em;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: #f3f7fc;
	border-bottom: 1px solid #e6ecf4;
	z-index: -2;
}

.weather-tabs-container {
	margin: 3rem 0 0 0;
}

.weather-tabs {
	display: flex;
	list-style: none;
	margin: 0 -1rem;
	overflow: hidden;
	padding: 0 1rem;
}

.tab-item {
	flex: 1;
	max-width: 320px;
}

.tab-link {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	padding: 14px 1px 12px 1px;
	color: #909caa;
	border-top-right-radius: 12px;
	border-top-left-radius: 12px;
	transition: color 0.3s;
}

.tab-link.active {
	box-shadow: inset 0 2px 0 #ff4800, 0 12px 12px 0 #d8e0f1;
	color: #000;
	background-color: #fff;
}

.tab-icon {
	margin: 0 10px 0 0;
	transition: background 0.3s, opacity 0.3s, filter 0.3s;
	border-radius: 50%;
	position: relative;
	width: 32px;
	height: 32px;
	padding: 5px;
}

.tab-link.active .tab-icon {
	background: #fff4f0;
}

.tab-link:not(.active) .tab-icon {
	filter: grayscale(1);
	opacity: 0.6;
}

.tab-link img {
	width: 100%;
	height: 100%;
}

.tab-link:not(.active):hover {
	color: #000;
}

.tab-link:not(.active):hover .tab-icon {
	filter: none;
	opacity: 1;
	background: #fff;
}

.tab-label {
	text-transform: uppercase;
	letter-spacing: 0.2px;
	font-weight: bold;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
}

.page-container {
	position: relative;
	display: flex;
}

.page-content {
	flex: 0 0 calc(100% - 360px);
	max-width: calc(100% - 360px);
}

.page-sidebar {
	flex: 0 0 300px;
	max-width: 300px;
	margin-left: 60px;
}

.page-sticky {
	position: sticky;
	top: 1rem;
}

.data-info p {
	color: #6a7787;
	font-size: 13px;
	font-style: italic;
	line-height: 1.5;
}

.data-info p + p {
	margin-top: 1rem;
}

.summary-data-map {
	position: relative;
	min-height: 220px;
	background: #f6faff;
	border-radius: 0.7rem;
	overflow: hidden;
}
.summary-data-map:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background:
		radial-gradient(circle,
			#fff 0 3px,
			#ff4800 3.5px 8px,
			transparent 8.5px),
		radial-gradient(circle,
			rgba(255, 72, 0, 0.28) 0 15px,
			transparent 15.5px),
		radial-gradient(circle,
			rgba(255, 72, 0, 0.12) 0 22px,
			transparent 22.5px);
	pointer-events: none;
}

.summary-data-map > img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.world-map-expand {
	position: absolute;
	border: 0;
	background: rgba(0, 0, 0, 0.4);
	padding: 0;
	border-radius: 0.7rem;
	top: 5px;
	right: 5px;
	cursor: pointer;
	width: 34px;
	height: 34px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: opacity 0.3s;
	opacity: 0.7;
}

.world-map-expand img {
	width: 10px;
	height: 10px;
}

.world-map-expand:hover {
	opacity: 0.95;
}



@media (max-width: 1200px) {
	.page-content {
		flex: 0 0 calc(100% - 330px);
		max-width: calc(100% - 330px);
	}

	.page-sidebar {
		margin-left: 30px;
	}
}

@media (max-width: 999px) {
	.forecast-sticky-menu.subnav.sticky-climate-menu nav {
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
		scrollbar-width: none;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		gap: 10px;
	}

	.sticky-climate-menu nav:before,
	.sticky-climate-menu nav:after {
		content: "";
		position: absolute;
		top: 0;
		width: 26px;
		height: 100%;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.2s ease;
		z-index: 2;
	}

	.sticky-climate-menu nav:after {
		right: 0;
		background: linear-gradient(to left, #fff, transparent);
	}

	.sticky-climate-menu nav:before {
		left: 0;
		background: linear-gradient(to right, #fff, transparent);
	}

	.sticky-climate-menu.has-left-fade nav:before,
	.sticky-climate-menu.has-right-fade nav:after {
		opacity: 1;
	}

	.forecast-sticky-menu a[href="#"] {
		min-width: 31.1px;
		min-height: 31.1px;
		padding: 0;
	}

	.forecast-sticky-menu a[href="#"] img {
		width: 12px;
		height: 12px;
	}
	
	.tab-label {
		font-size: 13px;
	}

	.tab-icon {
		width: 30px;
		height: 30px;
	}

	.forecast-sticky-menu a {
		scroll-snap-align: center;
		padding: 6px 14px;
	}

	.forecast-sticky-menu {
		max-width: none;
	}

	.page-container,
	.page-content,
	.page-sidebar,
	.page-sticky {
		position: relative;
		display: block;
		top: auto;
		max-width: none;
		flex: unset;
		margin-left: 0;
	}

	.page-sidebar {
		margin-top: 3rem;
		margin-bottom: 2rem;
	}
}

@media (max-width: 639px) {
	.coords-box .hidden {
		display: initial;
	}
	.coords-box .place-header-detail span {
		font-weight: bold;
	}
	.coords-box .dot {
		padding: 0 4px 0 0;
	}
}

@media (max-width: 600px) {
	.tab-icon {
		display: none;
	}
}

@media (max-width: 419px) {
	.coords-box {
		margin: -0.5rem 0 1.5rem 0;
		font-size: 13px;
	}
}