.weather-wrapper {
    cursor: pointer;
	position: relative;
	margin-top: 4px;
}
.weather-wrapper .weather-icon {
	color: white;
	margin-right: 5px;
    font-size: 16px;
}
.weather-wrapper .deg {
    padding-left: 1px;
	padding-right: 2px;
	font-size: 15px;
}
.weather-wrapper > .weather {
	display: flex;
	align-items: center;
    position: relative;
    z-index: 30;
}
.weather-wrapper > .weather > .temp {
    color: white;
    font: 400 16px ibm-plex-sans-condensed, sans-serif;
}
.weather-wrapper > .weather > .temp > .fa {
	display: none;
}

.weather-wrapper > .weather-dropdown-wrapper {
    min-width: 320px;
    background-color: #fff;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 30;
	cursor: initial;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}
.weather-wrapper > .weather-dropdown-wrapper.open {
	opacity: 1;
	pointer-events: all;
}

.weather-wrapper > .weather-dropdown-wrapper > .weather-dropdown ul li {
	display: inline-block;
	font: 900 14px 'ibm-plex-sans-condensed', sans-serif;
	text-transform: uppercase;
	color: #250e62;
}
.weather-wrapper > .weather-dropdown-wrapper > .weather-dropdown ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.weather-wrapper > .weather-dropdown-wrapper > .weather-dropdown .top-section {
	text-align: center;
	padding: 10px;
	background-color: #250e62;
}

.weather-wrapper .icon-temp-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
}

.weather-wrapper > .weather-dropdown-wrapper > .weather-dropdown .top-section .forecast .weather-icon {
	margin-right: 7px;
	font-size: 26px;
}
.weather-wrapper > .weather-dropdown-wrapper > .weather-dropdown .top-section .forecast .temp {
	font: 900 26px 'ibm-plex-sans-condensed', sans-serif;
}

.weather-wrapper > .weather-dropdown-wrapper > .weather-dropdown .top-section .forecast .info {
	font: 900 14px 'ibm-plex-sans-condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

.weather-wrapper .header {
	color: white;
	font: 900 20px 'ibm-plex-sans-condensed', sans-serif;
	text-transform: uppercase;
}

.weather-wrapper .forecast {
	color: white;
}

.weather-wrapper .forecast .weather-icon {
	color: white;
}

.weather-wrapper > .weather-dropdown-wrapper > .weather-dropdown ul.forecast-list li.item {
    display: block;
    padding: 8px;
}

.weather-wrapper .weather-dropdown .forecast-list .item:not(:first-child) {
	border-top: 2px solid #d6deeb;
}
.weather-wrapper > .weather-dropdown-wrapper > .weather-dropdown ul.forecast-list li.item ul.item-details {
    font-size: 18px;
}
.weather-wrapper > .weather-dropdown-wrapper > .weather-dropdown ul.forecast-list li.item ul.item-details .data {
    float: right;
	position: relative;
	display: flex;
	align-items: center;
}

.weather-wrapper > .weather-dropdown-wrapper > .weather-dropdown ul li.day {
	margin-left: 11px;
}

.weather-wrapper > .weather-dropdown-wrapper > .weather-dropdown ul li.visual {
	margin-right: 3px;
}

.weather-wrapper > .weather-dropdown-wrapper > .weather-dropdown ul.forecast-list li.item ul.item-details .data li {
	font: 900 14px 'ibm-plex-sans-condensed', sans-serif;
	text-transform: uppercase;
	color: #250e62;
    position: relative;
    padding: 0px 10px;
}
.weather-wrapper > .weather-dropdown-wrapper > .weather-dropdown ul.forecast-list li.item ul.item-details li.sep {
    border-left: 1px solid #d6deeb;
    height: 26px;
	width: 1px;
	margin-left: 12px;
}

.weather-wrapper > .weather-dropdown-wrapper > .weather-dropdown ul.forecast-list li.item ul.item-details li.visual .weather-icon {
	font-size: 22px;
	color: #385e9d;
    display: inline-block;
    min-width: 35px;
}

@media screen and (min-width: 640px) {
	.weather-cont,
	.weather-cont > div {
		height: 100%;
	}

	.weather-wrapper {
		height: 100%;
		margin-top: 0;
		transition: height 200ms ease;
	}

	.weather-wrapper.active {
		background-color: #385e9d;
	}

	.weather-wrapper.active > .weather > .temp,
	.weather-wrapper.active .weather-icon {
		color: white;
	}

	.weather-wrapper .weather {
		display: flex;
		align-items: center;
		height: 100%;
		padding-left: 5px;
		padding-right: 5px;
	}

	.weather-wrapper .weather-icon {
		color: #250e62;
		font-size: 22px;
	}

	.weather-wrapper > .weather > .temp {
		display: flex;
		color: #250e62;
		font-size: 20px;
		font-weight: 600;
	}

	.weather-wrapper > .weather > .temp > .fa {
		display: inline-block;
		font-size: 10px;
		position: relative;
		align-self: flex-end;
		margin-left: -4px;
		padding-bottom: 2px;
	}

	.weather-wrapper.active .weather .temp .fa {
		transform: rotate(180deg);
	}
}