/* !Warning: all css styles are shared by:
- Listings detail page widget (hidden for now but will be turned on later)
- Stand-alone custom widget
If updating for one, the other must be checked as well.
*/

.fnugg-logo-wrapper {
	height: 32px;
	float: right;
}

.fnugg-resort-detail-logo-description {
	margin-right: 4px;
	display: inline-block;
}

.fnugg-resort-detail-fnugg-link {
	background: url('/includes/client_public/weather-fnugg/fnugg-logo.svg');
	display: inline-block;
	width: 96px;
	height: 28px;
	background-size: 100% auto;
	vertical-align: middle;
}

.fnugg-resort-detail {
	border: 1px solid #dadada;
	border-width: 1px 0 1px 0;
	display: flex;
	color: #000;
	font-size: 14px;
	font-family: 'Embedded-DINWebPro-Medium', 'DIN Next W01 Medium', Arial, sans-serif;
	margin-bottom: 8em;
	clear: both;
}

.fnugg-resort-detail-toggle:link,
.fnugg-resort-detail-toggle:visited {
	display: inline-block;
	line-height: 32px;
	color: black;
	font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;
	padding-right: 36px;
	background-position: right -3px;
	background-repeat: no-repeat;
	background-size: 32px 32px;
	margin-right: 12px;
}
.fnugg-resort-detail-toggle.top {
	background-image: url('/includes/client_public/weather-fnugg/zone-top.svg');
	background-size: 33px 15px; /* for IE11 and firefox issues */
	background-position: center right;
}
.fnugg-resort-detail-toggle.top.is-active,
.fnugg-resort-detail-toggle.top:hover {
	background-image: url('/includes/client_public/weather-fnugg/zone-top-active.svg');
}
.fnugg-resort-detail-toggle.bottom {
	background-image: url('/includes/client_public/weather-fnugg/zone-bottom.svg');
	background-size: 33px 15px; /* for IE11 and firefox issues */
	background-position: center right;
}
.fnugg-resort-detail-toggle.bottom.is-active,
.fnugg-resort-detail-toggle.bottom:hover {
	background-image: url('/includes/client_public/weather-fnugg/zone-bottom-active.svg');
}
.fnugg-resort-detail-toggle.is-active,
.fnugg-resort-detail-toggle:hover {
	color: #00b8db;
}

.fnugg-resort-detail-section {
	padding-top: 16px;
}

.fnugg-resort-detail-section-title {
	text-transform: uppercase;
	font-family: 'Embedded-DINWebPro-Black', 'DIN Next W01 Black', Arial, sans-serif;
	font-size: 17px;
	line-height: 1;
}

.fnugg-resort-detail-snow .fnugg-resort-detail-section-title {
	margin-bottom: 1em;
}

.fnugg-resort-detail-label {
	text-transform: uppercase;
	font-family: 'Embedded-DINWebPro-Bold', 'DIN Next W01 Bold', Arial, sans-serif;
	color: #4c4c4c;
	margin-bottom: 30px;
}

.fnugg-resort-detail-value {
	line-height: 1;
	font-size: 26px;
	font-family: 'Embedded-DINWebPro-Bold', 'DIN Next W01 Bold', Arial, sans-serif;
}

.fnugg-resort-detail-conditions {
	border-right: 1px solid #dadada;
	width: 31%;
	line-height: 1.2;
	padding:16px 10px 0;
}

.fnugg-resort-detail-conditions .row {
	padding-bottom: 30px;
}

.fnugg-resort-detail-conditions .fnugg-condition-icon {
	margin-bottom: 8px;
}

.fnugg-resort-detail-wind {
	padding-top: 26px;
}

.fnugg-resort-detail-slope-quality {
	padding-right: 18px;
	line-height: 1.2;
}
.fnugg-resort-detail-slope-quality img.fnugg-detail-icon {
    margin-right: 10px;
}

.fnugg-resort-detail-snow {
	border-right: 1px solid #dadada;
	width: 28%;
}

.fnugg-resort-detail-lifts-and-slopes {
	width: 41%;
	padding-bottom: 5px;
}

.fnugg-resort-stat {
	display: table-row;
}

.fnugg-resort-stat > * {
	display: table-cell;
	vertical-align: middle;
}

.fnugg-detail-wind-icon {
	margin-right: 8px;
}

.fnugg-detail-wind-unit {
	font-size: 65%;
}

.fnugg-detail-wind-description {
	display: block;
	overflow: hidden; /* don't flow under the icon */
	line-height: 1.1;
	min-height: 2.2em;
}

.fnugg-detail-wind-description::first-letter {
	text-transform: uppercase;
}


.fnugg-detail-temp {
	display: inline-block;
	color: #00b8db;
	font-size: 48px;
	line-height: 48px;
	font-family: 'Embedded-DINWebPro-Bold','DIN Next W01 Bold', Arial, sans-serif;
	position: relative;
}

.fnugg-detail-temp.is-positive {
	color: #ed3426;
}

.fnugg-detail-temp.is-double-digits {
	font-size: 36px;
}

.fnugg-detail-temp:after {
	content: '°C';
	font-size: 50%;
	font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;
	top: -.5em;
	position: absolute;
	right: -1.2em;
}

.fnugg-resort-detail-chart-container {
	max-width: 144px;
	margin: 0 auto;
	position: relative;
}

.fnugg-resort-detail-chart-container .count {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -35%);
	font-size: 46px;
	line-height: 1;
}

@media (max-width: 1024px) {
	.fnugg-resort-detail {
		flex-wrap: wrap;
	}
	
	.fnugg-resort-detail-conditions {
		width: 55%;
		border-left: 1px solid #dadada;
	}
	
	.fnugg-resort-detail-snow {
		width: 45%;
	}
	
	.fnugg-resort-detail-lifts-and-slopes {
		width: 100%;
		border: 1px solid #dadada;
		border-bottom-width: 0;
	}
	
}

@media (max-width: 680px) {

	.fnugg-logo-wrapper {
		float: none;
		height: auto;
	}
	
	.fnugg-resort-detail {
		display: block;
		margin-left: -18px;
		margin-right: -18px;
		max-width: 100vw;
		margin-bottom: 6em;
	}
	
	.fnugg-resort-detail-section {
		max-width: 100vw;
		overflow: hidden;
	}
	
	.fnugg-resort-detail-conditions {
		width: 100%;
		border-bottom: 1px solid #dadada;
		border-left-width: 0;
		border-right-width: 0;
	}
	
	.fnugg-resort-detail-snow {
		width: 100%;
		border-left-width: 0;
		border-right-width: 0;
	}
	
	.fnugg-resort-detail-lifts-and-slopes {
		border-left-width: 0;
		border-right-width: 0;
		padding: 16px 10px 5px;
	}
	
	.fnugg-resort-detail-fnugg-link {
		width: 70px;
		height: 20px;
	}
	
}