.ost-weatherPage{
	position:relative;
}

.ost-wsvg{
	display:block;
	width:1em;
	height:1em;
	color:inherit;
}
.ost-wsvg *{
	fill:currentColor !important;
	stroke:currentColor !important;
}
.ost-wimg{
	display:block;
	width:1em;
	height:1em;
}

/* =================== Controls ==================== */

.ost-weatherPage__controls{
	margin:6px 0 14px;
}

.ost-weatherControls{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-end;
	justify-content:space-between;
	gap:14px;
	padding:14px;
	background:var(--color-beige-light);
	border:1px solid var(--color-beige-dark);
	border-radius:10px;
}

.ost-weatherControls__left{
	min-width:min(520px,100%);
}
.ost-weatherControls__label{
	display:block;
	margin:0 0 6px;
	font-weight:600;
	font-size:14px;
	color:var(--color-blue-dark);
}
.ost-weatherControls__select{
	width:100%;
}

.ost-weatherControls__right{
	display:flex;
	align-items:center;
	gap:10px;
}

.ost-weatherBtn{
	border:0;
	background:var(--color-blue);
	color:#fff;
	border-radius:10px;
	padding:10px 12px;
	display:inline-flex;
	align-items:center;
	gap:10px;
	cursor:pointer;
	box-shadow:0 8px 18px rgba(0,0,0,.08);
	transition:transform .08s ease,opacity .12s ease;
}
.ost-weatherBtn:hover{background: var(--color-yellow)}

.ost-weatherBtn.is-loading{
	pointer-events:none;
}

.ost-weatherBtn__icon{
	display:inline-flex;
	width:20px;
	height:20px;
	align-items:center;
	justify-content:center;
}

.ost-weatherBtn .ost-weatherSpinner{
	width:18px;
	height:18px;
	border-width:2px;
	border-color:rgba(255,255,255,.35);
	border-top-color:#fff;
}

.ost-weatherHint{
	font-size:14px;
	color:var(--color-blue-dark);
	opacity:.9;
}

/* =================== Layout Grid ==================== */

.ost-weatherPage__grid{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(320px,360px);
	gap:16px;
	align-items:start;
}
.ost-weatherPage__grid > *{
	min-width:0;
}
@media (max-width:980px){
	.ost-weatherPage__grid{
		grid-template-columns:1fr;
	}
}

.ost-weatherShell{
	position:relative;
	background:#fff;
	border:1px solid var(--color-beige-dark);
	border-radius:10px;
	overflow:visible;
}

.ost-weatherShell__loading{
	display:none;
	align-items:center;
	gap:10px;
	padding:16px;
	background:var(--color-beige-light);
	border-bottom:1px solid var(--color-beige-dark);
}
.ost-weatherShell.is-loading .ost-weatherShell__loading{
	display:flex;
}
.ost-weatherShell__loadingText{
	color:var(--color-blue-dark);
	font-weight:600;
}

.ost-weatherSpinner{
	width:18px;
	height:18px;
	border-radius:50%;
	border:2px solid rgba(0,0,0,.12);
	border-top-color:rgba(0,0,0,.55);
	animation:ostSpin .8s linear infinite;
}
@keyframes ostSpin{to{transform:rotate(360deg)}}

.ost-weatherShell__content{
	padding:16px;
}
.ost-weatherShell.is-loading .ost-weatherShell__content{
	opacity:.45;
	pointer-events:none;
}

.ost-weatherShell__error{
	padding:14px 16px;
	border-top:1px solid var(--color-beige-dark);
	background:rgba(181,34,73,.06);
}
.ost-weatherError{
	display:flex;
	align-items:center;
	gap:10px;
	color:var(--color-red);
	font-weight:600;
}
.ost-weatherError__icon{
	width:22px;
	height:22px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}

/* =================== Widget (current) ==================== */

.ost-weatherWidget__top{
	display:grid;
	grid-template-columns:1fr auto;
	gap:14px;
	align-items:center;
}
@media (max-width:740px){
	.ost-weatherWidget__top{
		grid-template-columns:1fr;
	}
}

.ost-weatherWidget__badge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:4px 10px;
	border-radius:999px;
	background:var(--color-yellow);
	color:#fff;
	font-weight:700;
	font-size:12px;
	width:fit-content;
}

.ost-weatherWidget__title{
	margin-top:6px;
	font-size:22px;
	line-height:1.15;
	font-weight:700;
	color:var(--color-blue);
	font-family:var(--font-heading,inherit);
}

.ost-weatherWidget__updated{
	margin-top:4px;
	font-size:13px;
	color:var(--color-blue-dark);
	opacity:.85;
}

.ost-weatherWidget__now{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:12px;
	background:var(--color-yellow);
	padding:12px;
	border-radius:10px;
}
@media (max-width:740px){
	.ost-weatherWidget__now{
		justify-content:flex-start;
	}
}

.ost-weatherWidget__icon{
	width:68px;
	height:68px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	color:#fff;
}
.ost-weatherWidget__icon .ost-wsvg,
.ost-weatherWidget__icon .ost-wimg{
	width:48px;
	height:48px;
}

.ost-weatherWidget__tempVal{
	font-size:34px;
	font-weight:700;
	color:#fff;
	line-height:1;
}
.ost-weatherWidget__tempUnit{
	font-size:16px;
	font-weight:600;
	color:#fff;
	margin-left:4px;
}
.ost-weatherWidget__desc{
	margin-top:4px;
	font-size:13px;
	color:#fff;
	text-transform:capitalize;
}

/* =================== Cards ==================== */

.ost-weatherWidget__cards{
	margin-top:14px;
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:10px;
}
@media (max-width:980px){
	.ost-weatherWidget__cards{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}
@media (max-width:560px){
	.ost-weatherWidget__cards{
		grid-template-columns:1fr;
	}
}

.ost-wCard{
	background:#fff;
	border:1px solid var(--color-beige-dark);
	border-radius:10px;
	padding:14px;
}
.ost-wCard__k{
	font-size:12px;
	font-weight:600;
	color:var(--color-yellow);
	opacity:.85;
}
.ost-wCard__v{
	margin-top:10px;
	font-size:24px;
	font-weight:700;
	color:var(--color-blue-dark);
	line-height:1.1;
}
.ost-wCard__sub{
	margin-top:8px;
	font-size:13px;
	color:var(--color-blue-dark);
	line-height:1.45;
}

/* =================== Next hours (Slick) ==================== */

.ost-weatherHours{
	margin-top:14px;
	padding-top:14px;
	border-top:1px solid var(--color-beige-dark);
	position:relative;
}

.ost-weatherHours__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:15px;
}
.ost-weatherHours__head .widget-title {
	font-size: 17px;
}
.ost-hoursSlider{
	position:relative !important;
}

.ost-hoursSlider .slick-list{
	margin:0 -6px;
}
.ost-hoursSlider .slick-slide{
	padding:0 6px;
}

.ost-hour{
	background:var(--color-beige-light);
	border:1px solid var(--color-beige-dark);
	border-radius:10px;
	padding:15px;
	min-height:132px;
	display:flex;
	flex-direction:column;
	gap:8px;
}

.ost-hour__time{
	font-weight:700;
	font-size:14px;
	color:var(--color-yellow);
}

.ost-hour__main{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}

.ost-hour__icon{
	width:34px;
	height:34px;
	display:inline-flex;
	color:var(--color-blue);
}
.ost-hour__icon .ost-wsvg{
	width:34px;
	height:34px;
	display:block;
}

.ost-hour__temp{
	font-weight:700;
	font-size:18px;
	color:var(--color-blue-dark);
	line-height:1;
}

.ost-hour__meta{
	margin-top:auto;
	margin-top:5px;
	font-size:12px;
	color:var(--color-blue-dark);
	display:block;
}
.ost-hour__metaPart{
	display:block;
}
.ost-hour__meta strong{
	font-weight:700;
}
.ost-hour__dot{
	display:none;
}

.ost-slickArrow{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:100;
	width:36px;
	height:36px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	color:var(--color-blue);
	background:#fff;
	border:1px solid var(--color-beige-dark);
	border-radius:10px;
	transition:transform .08s ease,opacity .12s ease;
}
.ost-slickArrow--prev{left:-28px}
.ost-slickArrow--next{right:-28px}

/* =================== Forecast ==================== */

.ost-weatherWidget__forecast{
	margin-top:14px;
	padding-top:14px;
	border-top:1px solid var(--color-beige-dark);
}
.ost-weatherWidget__sectionTitle {
	margin-bottom: 15px;
}
.ost-weatherWidget__sectionTitle .widget-title {
	font-size: 17px;
}
.ost-weatherForecast{
	margin-top:10px;
	display:grid;
	grid-template-columns:repeat(5,minmax(0,1fr));
	gap:10px;
}
@media (max-width:980px){
	.ost-weatherForecast{
		grid-template-columns:repeat(3,minmax(0,1fr));
	}
}
@media (max-width:560px){
	.ost-weatherForecast{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

.ost-weatherDay{
	background:var(--color-beige-light);
	border:1px solid var(--color-beige-dark);
	border-radius:10px;
	padding:10px;
	display:flex;
	flex-direction:column;
	gap:8px;
	min-height:108px;
}
.ost-weatherDay__top{
	display:flex;
	justify-content:space-between;
	align-items:baseline;
}
.ost-weatherDay__dow{
	font-weight:700;
	color:var(--color-blue-dark);
}
.ost-weatherDay__date{
	font-size:12px;
	font-weight:600;
	color:var(--color-yellow);
}
.ost-weatherDay__icon{
	color:var(--color-blue);
	display:inline-flex;
	width:34px;
	height:34px;
}
.ost-weatherDay__icon .ost-wsvg,
.ost-weatherDay__icon .ost-wimg{
	width:34px;
	height:34px;
}
.ost-weatherDay__temps{
	margin-top:auto;
	display:flex;
	align-items:baseline;
	gap:8px;
}
.ost-weatherDay__max{
	font-weight:700;
	color:var(--color-blue-dark);
	font-size:18px;
}
.ost-weatherDay__min{
	font-weight:700;
	color:var(--color-yellow);
	font-size:14px;
}

/* =================== Header Now Chip ==================== */

.page-header--weather .page-header__weatherNow{
	margin:25px auto 0;
	display:flex;
	justify-content:center;
}
@media (max-width:700px){
	.page-header--weather .page-header__weatherNow{
		width:calc(100% - 28px);
	}
}

.ost-weatherHeaderNow{
	display:inline-flex;
	align-items:center;
	gap:12px;
	padding:10px 14px;
	border-radius:10px;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.1);
	color:#fff;
}
.ost-weatherHeaderNow__icon{
	width:48px;
	height:48px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	color:var(--color-yellow);
}
.ost-weatherHeaderNow__icon .ost-wsvg,
.ost-weatherHeaderNow__icon .ost-wimg{
	width:48px;
	height:48px;
}
.ost-weatherHeaderNow__text{
	display:flex;
	flex-direction:column;
	gap:2px;
}
.ost-weatherHeaderNow__temp{
	font-weight:700;
	font-size:24px;
	line-height:1;
	display:flex;
	align-items:baseline;
	gap:4px;
}
.ost-weatherHeaderNow__tempUnit{
	font-weight:700;
	font-size:16px;
}
.ost-weatherHeaderNow__desc{
	margin-top:2px;
	font-size:14px;
	text-transform:capitalize;
}

/* =================== Weather Side ==================== */
@media (max-width:700px){
	.ost-hint {
	    margin-top: 10px;
     }
}