/* WIDGETS */

html,
body.wf-widget-body {
	margin: 0;
	padding: 0;
	background: transparent;
	line-height: 1;
	width: 100%;
	height: 100%;
    font-family: 'Museo Cyrl 100';
    font-style: normal;	
}

.wf-widget{
    margin: 0 auto;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #FFF;
    display: block;
    padding: 0;
    width: 100%;
    height: 100%;
	position: relative;
	overflow: hidden;    
}

.wf-widget .wf-widget-container {
	padding: 10px;
}

.wf-widget.small .wf-widget-container {
	max-width: 300px;
	min-height: 250px;
	text-align: left;

	
}

.wf-widget-link {
	display: block; 
	width:100%; 
	height:100%; 
	position: absolute; 
	top:0; 
	left:0; 
	right:0; 
	bottom:0; 
	z-index:10; 
	background: transparent;	
}

.wf-widget .wf-widget-header .title {
	font-size: 18px;
	font-family: "Museo Cyrl 700";
	margin: 0;
	padding: 0; 
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;	
}

.wf-widget .wf-widget-header .title .icon {
	margin-right: 10px;
}

.wf-widget .wf-widget-header .title .divider {
	font-family: "Museo Cyrl 500";
}

.wf-widget .wf-widget-header .title small {
	font-family: "Museo Cyrl 300";
}

.wf-widget .wf-widget-header .btn-toggle {
	font-size: 22px;
    color: #000;
    float: right;
    line-height: 20px;
    width: 20px;
    height: 20px;
    text-align: right;
	text-decoration: none;
	position: relative;
	z-index:0;
}

.wf-widget .wf-widget-header .btn-toggle:hover {
	color: #999;
}

.wf-widget .wf-widget-header .btn-toggle[aria-expanded='true'] {
	color: #fff;
}

.wf-widget .wf-widget-search.collapse, .wf-widget .wf-widget-search.collapsing {    
    transition: none !important;
    display: none;
    border-radius: 10px;
}

.wf-widget .wf-widget-search.collapse.show {display: block;}

.wf-widget .wf-widget-search {
	position: absolute;
	z-index: 12;
	top:0;
	right: 0;
	left: 0;
	bottom: 0;	
	background: rgba(0,0,0,0.8);
	padding: 40px;
	height: 100%;
}

.wf-widget .wf-widget-search .clear {
	color: #FFF;
	padding: 0 5px;
	font-size: 12px;
	line-height: 12px;
	text-decoration: none;
}

.wf-widget .wf-widget-search-results .list-group-item {
    padding: .5rem;
    font-size: 12px;
}

.wf-widget .wf-widget-search-results .list-group-item img {
    margin-right: 10px;
    vertical-align: baseline;
    box-shadow: 0 0 7px rgba(0,0,0,0.3);
}

.wf-widget .wf-widget-body {
	display: flex;
	padding: 10px 0;
	max-height: 80px;
}

.wf-widget .wf-widget-pictocode {
	width: 40%;
    font-size: 80px;
    line-height: 80px;
    text-align: left;
}

.wf-widget .wf-widget-temperature { width: 70%; }

.wf-widget .wf-widget-temperature,
.wf-widget .wf-widget-temperature .temperature {
	line-height: 1;
	font-family: "Museo Cyrl 300";
	font-size: 60px;
	font-weight: normal;
}

.wf-widget .wf-widget-temperature .temperature {margin: 10px 0;}
.wf-widget .wf-widget-temperature .temperature .deg {
	font-size: 60%;
    position: relative;
    vertical-align: top;
    padding: 0 1px 0 3px;
    top: -6px;
}

.wf-widget .wf-widget-temperature .temperature .unit {
	font-size: 25px;
    position: relative;
    vertical-align: top;
    top: -7px;
    font-family: "Museo Cyrl 700";
    text-transform: uppercase;
}

.wf-widget .wf-widget-text {
	font-size: 14px;
	font-family: "Museo Cyrl 500";
	padding: 10px 0;
}

.wf-widget .wf-widget-forecasts {display: flex;}

.wf-widget .wf-widget-forecasts .wf-widget-forecast {width: 30%;}
.wf-widget .wf-widget-forecasts .wf-widget-forecast:nth-child(2) {margin: 0 4.5%;}

.wf-widget .wf-widget-forecasts .wf-widget-forecast .title {
	font-size: 12px;
	font-family: "Museo Cyrl 100";
	margin-bottom: 5px;
}

.wf-widget .wf-widget-forecast-body {display: flex; border-right: 1px solid rgba(0,0,0,0.1);}
.wf-widget .wf-widget-forecasts .wf-widget-forecast:last-child .wf-widget-forecast-body {border: none;}

.wf-widget .wf-forecast-temperature {font-size: 16px; padding-top: 3px;  padding-left: 5px;}
.wf-widget .wf-forecast-temperature .deg {top: -4px; position: relative;}
.wf-widget .wf-forecast-temperature .wf-temperature-max {font-family: "Museo Cyrl 500"; line-height: 20px;}
.wf-widget .wf-forecast-temperature .wf-temperature-min {font-family: "Museo Cyrl 100"; line-height: 20px; color: #666666;}
.wf-widget .wf-forecast-pictocode {
	font-size: 43px;
	line-height: 40px;
	flex: 0 0 60%;
}

.wf-widget .wf-widget-footer {text-align: right; padding-top: 5px;}
.wf-widget .wf-widget-logo-dark,
.wf-widget .wf-widget-footer .wf-widget-logo-dark {
	display: inline-block;
}
.wf-widget .wf-widget-logo-light,
.wf-widget .wf-widget-footer .wf-widget-logo-light {
	display: none;
}

.wf-widget a,
.wf-widget a:hover {
	text-decoration: none;
	color: inherit;
	display: block;
}

/* DARK WIDGET */

.wf-widget.dark {
	background: #1a1a1a;
	color: #FFF;
}

.wf-widget.dark .wf-widget-forecast-body {
    border-right: 1px solid rgba(255,255,255,0.1);
}

.wf-widget.dark .wf-widget-header .btn-toggle {color: #FFF;}
.wf-widget.dark .wf-forecast-temperature .wf-temperature-min {color: #999999;}

.wf-widget.dark .wf-widget-logo-dark,
.wf-widget.dark .wf-widget-footer .wf-widget-logo-dark {
	display: none;
}
.wf-widget.dark .wf-widget-logo-light,
.wf-widget.dark .wf-widget-footer .wf-widget-logo-light {
	display: inline-block;
}

/* AIR QUALITY WIDGET */

.wf-widget-aqi .wf-widget-body {
	padding: 10px;
}

.wf-widget-aqi .wf-widget-footer {position: absolute; bottom: 10px; right: 10px; display: none;}
.wf-widget-aqi.branded .wf-widget-footer {display: block;}
.wf-widget-aqi .aqi-index {
	text-align: right;
	flex: 40%;
	font-family: 'Museo Cyrl 700';
    font-weight: 700;	
}

.wf-widget-aqi .aqi-index h1 {text-align: center; display: inline-block;}

.wf-widget-aqi .aqi-info {
	flex: 60%;
}

.wf-widget-aqi .aqi-info p.section-title {font-size: 14px; font-family: 'Museo Cyrl 100'; line-height: 17px; width: 50%;}
.wf-widget-aqi .aqi-info p.aqi-title {font-size: 16px; font-family: 'Museo Cyrl 700'; margin-bottom: 5px;}
.wf-widget-aqi .aqi-info p.fdp-title {font-size: 10px; font-family: 'Museo Cyrl 100'; margin-bottom: 0;}

.wf-widget-aqi .hex {
	margin-top: 23px;
    width: 86px;
    height: 50px;
    background-color: #e4e4e4;
    position: relative;
    line-height: 50px;
    font-size: 38px;
}

.wf-widget-aqi .hex:before {
    content: " ";
    width: 0; height: 0;
    border-bottom: 23px solid #e4e4e4;
    border-left: 43px solid transparent;
    border-right: 43px solid transparent;
    position: absolute;
    top: -23px;
    left: 0;
}

.wf-widget-aqi .hex:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -23px;
    left: 0;
    border-top: 23px solid #e4e4e4;
    border-left: 43px solid transparent;
    border-right: 43px solid transparent;
}

.wf-widget-aqi .hex span {
	font-size: 10px;
    display: block;
    position: absolute;
    bottom: 0;
    height: 20px;
    width: 100%;
    z-index: 3;
    font-family: 'Museo Cyrl 100';
}

/* 0 - 50 */
.wf-widget-aqi .good .hex {
    background: #009965;
    color: #FFF;
}

.wf-widget-aqi .good .hex:before {border-bottom-color: #009965;}
.wf-widget-aqi .good .hex:after {border-top-color: #009965;}

/* 51 - 100 */
.wf-widget-aqi .moderate .hex {
    background: #ffdd33;
    color: #000;
}

.wf-widget-aqi .moderate .hex:before {border-bottom-color: #ffdd33;}
.wf-widget-aqi .moderate .hex:after {border-top-color: #ffdd33;}


/* 101 - 150 */
.wf-widget-aqi .unhealthy-sensitive .hex {
    background: #ff9933;
    color: #FFF;
}

.wf-widget-aqi .unhealthy-sensitive .hex:before {border-bottom-color: #ff9933;}
.wf-widget-aqi .unhealthy-sensitive .hex:after {border-top-color: #ff9933;}


/* 151 - 200 */
.wf-widget-aqi .unhealthy .hex {
    background: #cd0033 !important;
    color: #FFF;
}

.wf-widget-aqi .unhealthy .hex:before {border-bottom-color: #cd0033;}
.wf-widget-aqi .unhealthy .hex:after {border-top-color: #cd0033;}

/* 201 - 300 */
.wf-widget-aqi .very-unhealthy .hex {
    background: #650099;
    color: #FFF;
}

.wf-widget-aqi .very-unhealthy .hex:before {border-bottom-color: #650099;}
.wf-widget-aqi .very-unhealthy .hex:after {border-top-color: #650099;}


/* 300+ */
.wf-widget-aqi .hazardous .hex {
    background: #571536;
    color: #FFF;
}

.wf-widget-aqi .hazardous .hex:before {border-bottom-color: #571536;}
.wf-widget-aqi .hazardous .hex:after {border-top-color: #571536;}

/* AQI WIDGET BRANDED */

.wf-widget.branded {
	background-position: 50% 0%;
	background-color: transparent;
	color: #FFF;
	background-repeat: no-repeat;
	max-width: 300px;
	max-height: 600px;
}

.wf-widget.branded.b1 {
	background-image: url('/img/banners/philips/banner-01.png');
}

.wf-widget.branded.b2 {
	background-image: url('/img/banners/philips/banner-02.png');
}

.wf-widget.branded.b3 {
	background-image: url('/img/banners/philips/banner-03.png');
}

.wf-widget.branded.b4 {
	background-image: url('/img/banners/philips/banner-04.png');
}

.wf-widget.branded.b1 .wf-widget-footer .wf-widget-logo-dark,
.wf-widget.branded.b4 .wf-widget-footer .wf-widget-logo-dark {
	display: none;
}

.wf-widget.branded.b1 .wf-widget-footer .wf-widget-logo-light,
.wf-widget.branded.b4 .wf-widget-footer .wf-widget-logo-light {
	display: inline-block;
}

.wf-widget.branded.b2 .wf-widget-footer .wf-widget-logo-dark,
.wf-widget.branded.b3 .wf-widget-footer .wf-widget-logo-dark {
	display: inline-block;
}

.wf-widget.branded.b2 .wf-widget-footer .wf-widget-logo-light,
.wf-widget.branded.b3 .wf-widget-footer .wf-widget-logo-light {
	display: none;
}

/* SMALL SLIDER WIDGET */

.wf-widget.small.slider.light,
.wf-widget.small.slider.dark {
	background: transparent;
}

.wf-widget.small.slider {
	width: 110px;
	height: 45px;
	border-radius: 0;
}

.wf-widget.small.slider .wf-widget-container {
	padding: 0;
}

.wf-widget.small.slider .wf-widget-container {
	max-width: inherit;
    min-height: auto;
    width: 100%;
    height: 100%;
}

.wf-widget.small.slider .wf-widget-body {
	display: flex;
    padding: 0;
    justify-content: center;
    align-items: center;
    width: 100%;
	height: 100%;
}

.wf-widget.small.slider .wf-widget-forecast {
	display: flex;
	align-items: center;
	text-align: center;
	height: 45px;
}

.wf-widget.small.slider .wf-widget-text {
    width: 70px;
    font-size: 12px;
    font-family: "Museo Cyrl 300";
    padding: 0;
}

.wf-widget.small.slider .wf-widget-pictocode {
	font-size: 30px;
	width: 40px;
    text-align: center;	
    line-height: 32px;
}

.wf-widget.small.slider .wf-widget-temperature {
    line-height: 32px;
    font-family: "Museo Cyrl 300";
    font-size: 22px;
    text-align: center;	
    width: 40px;
}

.wf-widget.small.slider .wf-widget-link {
	line-height: 40px;
	text-align: center;
}

.wf-widget.small.slider .wf-widget-link img {
	width: 90%;
}

/* WIDE FORECAST WIDGET - stadiums */

.wf-widget.wide {
	background: url('../img/backgrounds/widgets/stadium.jpg') 50% 50% no-repeat #000;
	color: #FFF;
}

.wf-widget.wide .wf-widget-body {
	display: flex;
	padding: 15px 0 0 0;
	max-height: none;
	justify-content: space-between;
	align-items: center;
}

.wf-widget.wide .wf-widget-forecast-current,
.wf-widget.wide .wf-widget-forecasts {
	display: flex;
	width: 35%;
}

.wf-widget.wide .wf-widget-forecasts .wf-widget-forecast .title {
    font-size: 14px;
    font-family: "Museo Cyrl 300";
    margin-bottom: 10px;
}

.wf-widget.wide .wf-widget-forecast { width: 50%; }
/*.wf-widget.wide .wf-widget-forecast:last-child { margin-right: 0; }*/

.wf-widget.wide .wf-widget-forecast-body {
    display: flex;
    align-items: center;
    border-right: 1px solid rgba(255,255,255,0.5);
}

.wf-widget.wide .wf-widget-forecasts .wf-widget-forecast:last-child .wf-widget-forecast-body {
    border-right: 1px solid rgba(255,255,255,0.5);
}

.wf-widget .wf-widget-forecasts .wf-widget-forecast .title { text-align: center; }

.wf-widget.wide .wf-widget-pictocode,
.wf-widget.wide .wf-widget-temperature { width: 50%; }

.wf-widget.wide .wf-widget-text { padding: 0 10px; }
.wf-widget.wide .wf-widget-footer {
	text-align: right;
    padding-top: 5px;
    padding-right: 10px;
}