@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');

/* reset */
#imgw-weatherWidget__container{
	margin:0;
	padding:0;
}
/* reset */

#imgw-weatherWidget__container{
	
	background-color:#ffffff;
	
	box-sizing:border-box;
	font-family: Arial, 'Open Sans', sans-serif;
	width:100%;
	max-width:400px;
	min-width:260px;
	height:auto;
	max-height:none;
	color:#757373;
	
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	
	/*line-height:18px;*/
	
	/*
	border:1px solid #e0e0df;
	padding:16px;
	max-width:360px;
	*/
	
}

#imgw-weatherWidget__container img{
	box-shadow:none !important;
}

/* ====================================================================================================== title */
h3#imgw-weatherWidget__title{
	font-size:24px;
	box-sizing:border-box;
	display: block;
	padding:16px;
	margin:0 auto;
	color:#182a54;
	font-weight:700;
	width:100%;
}

/* ====================================================================================================== search */
#imgw-weatherWidget__search{
	box-sizing:border-box;
	display: block;
	padding:16px;
	padding-top:0;
	margin:0 auto;
	width:100%;
}

#imgw-weatherWidget__search__Input{
	width:100% !important;
	padding:8px 16px;
	border-radius:2px;
	border:1px solid #e0e0df;
	font-family: 'Open Sans', sans-serif;
	box-sizing:border-box;
	display:block;
	height:auto;
}

/* ====================================================================================================== search result */

#imgw-weatherWidget__searchResult{
	position: relative;
	height:1px;
}

#imgw-weatherWidget__searchResult__list{
	font-family: 'Open Sans', sans-serif;
	box-sizing: border-box;
	width:100%;
	overflow-x: hidden;
	background-color:#ffffff;
	position: absolute;
	z-index:888;
	display:none;
	min-height: min-content;
	max-height: 160px;
	overflow-y: scroll;
	box-shadow: 0 1px 2px rgba(0,0,0,0.02), 
                0 2px 4px rgba(0,0,0,0.03), 
                0 4px 8px rgba(0,0,0,0.04), 
                0 8px 16px rgba(0,0,0,0.05);
}

#imgw-weatherWidget__searchResult__list ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#imgw-weatherWidget__searchResult__list ul li{
	padding-left:16px;
}

#imgw-weatherWidget__searchResult__list ul li.select-localization{
	cursor: pointer;
	padding: 4px;
}

#imgw-weatherWidget__searchResult__list ul li.select-localization:hover{
	cursor: pointer;
	background-color:#3ab7b6;
	color:#ffffff;
}

/* ====================================================================================================== data container */
#imgw-weatherWidget__data{
	position:relative;
}

/* ====================================================================================================== loader */
#imgw-weatherWidget__loader{
	/*display:none;*/
	box-sizing:border-box;
	position:absolute;
	background-color:rgba(255,255,255,.9);
	height:100%;
	width:100%;
	z-index:1200;
}

#imgw-weatherWidget__loader .imgw-loader-item{
	box-sizing:border-box;
	margin:0 auto;
	height: 100%;
	width: 100%;
	text-align: center;
	padding: 16px;
	display: inline-block;
	vertical-align: top;
}

#imgw-weatherWidget__loader svg path,
#imgw-weatherWidget__loader svg rect{
  fill: #3ab7b6;
}

/* ====================================================================================================== info */
#imgw-weatherWidget__info{
	box-sizing:border-box;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size:12px;
	padding:16px;
}

#imgw-weatherWidget__info__dt,
#imgw-weatherWidget__info__model{
	box-sizing:border-box;
	width:48%;
	font-size:12px;
}

#imgw-weatherWidget__info__dt{
	color: rgb(67, 186, 184);
	font-weight:700;	
}

#imgw-weatherWidget__info__dt > span{
	font-weight:300;
}

#imgw-weatherWidget__info__model{
	text-align:right;
	color: rgb(189, 189, 189);
}

/* ====================================================================================================== primary */
#imgw-weatherWidget__primary{
	box-sizing:border-box;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding:16px;
}

#imgw-weatherWidget__primary__icon,
#imgw-weatherWidget__primary__temp{
	box-sizing:border-box;
	width:48%;
	font-size:12px;
	font-size: 40px;
}

#imgw-weatherWidget__primary__temp{
	margin: auto;
	text-align:left;
}

#imgw-weatherWidget__primary__icon{
	text-align:center;
}

#imgw-weatherWidget__primary__icon img{
	height:80px;
	margin:auto;
}


/* ====================================================================================================== secondary */

#imgw-weatherWidget__secondary {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	padding:16px;
	font-weight:300;
}

#imgw-weatherWidget__secondary__pressure-title { grid-area: 1 / 1 / 2 / 2; }
#imgw-weatherWidget__secondary__pressure-value { grid-area: 1 / 2 / 2 / 3; }
#imgw-weatherWidget__secondary__wind-direction-title { grid-area: 2 / 1 / 3 / 2; }
#imgw-weatherWidget__secondary__wind-direction-value { grid-area: 2 / 2 / 3 / 3; }
#imgw-weatherWidget__secondary__wind-speed-title { grid-area: 3 / 1 / 4 / 2; }
#imgw-weatherWidget__secondary__wind-speed-value { grid-area: 3 / 2 / 4 / 3; }

#imgw-weatherWidget__secondary__pressure-value,
#imgw-weatherWidget__secondary__wind-speed-value{
	font-weight:700;
}

/* ====================================================================================================== next */
#imgw-weatherWidget__next{
	box-sizing:border-box;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding:16px;
}

#imgw-weatherWidget__next__today,
#imgw-weatherWidget__next__tomorrow{
	border:1px solid #e0e0df;
	box-sizing:border-box;
	width:48%;
	padding:16px;
	text-align:center;
}

#imgw-weatherWidget__next__today p,
#imgw-weatherWidget__next__tomorrow p{
	margin: 0;
}

#imgw-weatherWidget__next__today img,
#imgw-weatherWidget__next__tomorrow img{
	display:block;
	margin:12px auto;
}

/* ====================================================================================================== footer */
#imgw-weatherWidget__footer{
	box-sizing:border-box;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding:16px;
	align-items: stretch;
}

#imgw-weatherWidget__footer__logo{
	box-sizing:border-box;
	flex-basis:30%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#imgw-weatherWidget__footer__logo img{
	width:80%;
}

#imgw-weatherWidget__footer__logo__meteo{
	/*transform: scale(2) translate(50%, 50%);*/
}

#imgw-weatherWidget__footer__more{
	box-sizing:border-box;
	font-size:12px;
	margin: auto 0;
	text-align:center;
	color:#9b9b9b;
	flex-basis:70%;
}

#imgw-weatherWidget__footer__more a{
	text-decoration: none;
	font-weight:bold;
	color:#9b9b9b;
}

#imgw-weatherWidget__footer__more__logos{
	display: flex;	
	/*flex-direction: column;*/
}

#imgw-weatherWidget__footer__more__logos img{
	max-width:90%;
	height:54px;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: media queries */
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 1415 */
@media only screen and (max-width: 1415px) {

	#imgw-weatherWidget__container{
	
	background-color:#ffffff;
	
	box-sizing:border-box;
	font-family: Arial, 'Open Sans', sans-serif;
	width:100%;
	height:auto;
	max-height:600px;
	color:#757373;
	
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	
	/*line-height:18px;*/
	
	/*
	border:1px solid #e0e0df;
	padding:16px;
	max-width:360px;
	*/
	
	}
	
	/* ====================================================================================================== title */
	h3#imgw-weatherWidget__title{
		font-size:18px;
		box-sizing:border-box;
		display: block;
		padding:12px;
		margin:0 auto;
		color:#182a54;
		font-weight:700;
		width:100%;
	}
	
	/* ====================================================================================================== search */
	#imgw-weatherWidget__search{
		box-sizing:border-box;
		display: block;
		padding:12px;
		padding-top:0;
		margin:0 auto;
		width:100%;
	}
	
	
	#imgw-weatherWidget__search__Input{
		font-size:14px;
		width:100% !important;
		padding:4px 16px;
		border-radius:2px;
		border:1px solid #e0e0df;
		font-family: 'Open Sans', sans-serif;
		box-sizing:border-box;
		display:block;
		height:auto;
	}
	
	/* ====================================================================================================== search result */
	
	#imgw-weatherWidget__searchResult{
		position: relative;
		height:1px;
	}
	
	#imgw-weatherWidget__searchResult__list{
		font-family: 'Open Sans', sans-serif;
		box-sizing: border-box;
		width:100%;
		overflow-x: hidden;
		background-color:#ffffff;
		position: absolute;
		z-index:888;
		display:none;
		min-height: min-content;
		max-height: 160px;
		overflow-y: scroll;
		box-shadow: 0 1px 2px rgba(0,0,0,0.02), 
	                0 2px 4px rgba(0,0,0,0.03), 
	                0 4px 8px rgba(0,0,0,0.04), 
	                0 8px 16px rgba(0,0,0,0.05);
	}
	
	#imgw-weatherWidget__searchResult__list ul{
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	
	#imgw-weatherWidget__searchResult__list ul li{
		padding-left:16px;
	}
	
	#imgw-weatherWidget__searchResult__list ul li.select-localization{
		cursor: pointer;
		padding: 4px;
	}
	
	#imgw-weatherWidget__searchResult__list ul li.select-localization:hover{
		cursor: pointer;
		background-color:#3ab7b6;
		color:#ffffff;
	}
	
	/* ====================================================================================================== data container */
	#imgw-weatherWidget__data{
		position:relative;
	}
	
	/* ====================================================================================================== loader */
	#imgw-weatherWidget__loader{
		/*display:none;*/
		box-sizing:border-box;
		position:absolute;
		background-color:rgba(255,255,255,.9);
		height:100%;
		width:100%;
		z-index:1200;
	}
	
	#imgw-weatherWidget__loader .loader{
		box-sizing:border-box;
		margin:0 auto;
		height: 100%;
		width: 100%;
		text-align: center;
		padding: 16px;
		display: inline-block;
		vertical-align: top;
	}
	
	#imgw-weatherWidget__loader svg path,
	#imgw-weatherWidget__loader svg rect{
	  fill: #3ab7b6;
	}
	
	/* ====================================================================================================== info */
	#imgw-weatherWidget__info{
		box-sizing:border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size:12px;
		padding:16px;
	}
	
	#imgw-weatherWidget__info__dt,
	#imgw-weatherWidget__info__model{
		box-sizing:border-box;
		width:48%;
		font-size:12px;
	}
	
	#imgw-weatherWidget__info__dt{
		color: rgb(67, 186, 184);
		font-weight:700;	
	}
	
	#imgw-weatherWidget__info__dt > span{
		font-weight:300;
	}
	
	#imgw-weatherWidget__info__model{
		text-align:right;
		color: rgb(189, 189, 189);
	}
	
	/* ====================================================================================================== primary */
	#imgw-weatherWidget__primary{
		box-sizing:border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding:12px;
	}
	
	#imgw-weatherWidget__primary__icon,
	#imgw-weatherWidget__primary__temp{
		box-sizing:border-box;
		width:48%;
		font-size: 32px;
	}
	
	#imgw-weatherWidget__primary__temp{
		margin: auto;
		text-align:left;
	}
	
	#imgw-weatherWidget__primary__icon{
		text-align:center;
	}
	
	#imgw-weatherWidget__primary__icon img{
		height:80px;
		margin:auto;
	}
	
	
	/* ====================================================================================================== secondary */
	
	#imgw-weatherWidget__secondary {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		padding:16px;
		font-weight:300;
	}
	
	#imgw-weatherWidget__secondary__pressure-title { grid-area: 1 / 1 / 2 / 2; font-size:14px; }
	#imgw-weatherWidget__secondary__pressure-value { grid-area: 1 / 2 / 2 / 3; }
	#imgw-weatherWidget__secondary__wind-direction-title { grid-area: 2 / 1 / 3 / 2; font-size:14px; }
	#imgw-weatherWidget__secondary__wind-direction-value { grid-area: 2 / 2 / 3 / 3; }
	#imgw-weatherWidget__secondary__wind-speed-title { grid-area: 3 / 1 / 4 / 2; font-size:14px; }
	#imgw-weatherWidget__secondary__wind-speed-value { grid-area: 3 / 2 / 4 / 3; }
	
	#imgw-weatherWidget__secondary__pressure-value,
	#imgw-weatherWidget__secondary__wind-speed-value{
		font-weight:700;
	}
	
	/* ====================================================================================================== next */
	#imgw-weatherWidget__next{
		box-sizing:border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding:12px;
		font-size:14px;
	}
	
	#imgw-weatherWidget__next__today,
	#imgw-weatherWidget__next__tomorrow{
		border:1px solid #e0e0df;
		box-sizing:border-box;
		width:48%;
		padding:12px;
		text-align:center;
	}
	
	#imgw-weatherWidget__next__today p,
	#imgw-weatherWidget__next__tomorrow p{
		margin: 0;
	}
	
	#imgw-weatherWidget__next__today img,
	#imgw-weatherWidget__next__tomorrow img{
		display:block;
		margin:12px auto;
	}
	
	/* ====================================================================================================== footer */
	#imgw-weatherWidget__footer{
		box-sizing:border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding:16px;
	}
	
	#imgw-weatherWidget__footer__logo{
		box-sizing:border-box;
	}
	
	#imgw-weatherWidget__footer__logo img{
		width:40px;
	}
	
	#imgw-weatherWidget__footer__more{
		box-sizing:border-box;
		font-size:12px;
		margin: auto 0;
		text-align:right;
		color:#9b9b9b;
	}
	
	#imgw-weatherWidget__footer__more a{
		text-decoration: none;
		font-weight:bold;
		color:#9b9b9b;
	}

}
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 1415 */


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 740 - 1200 */
@media only screen and (min-width: 740px) and (max-width: 1200px) {
	
	/* ====================================================================================================== next */
	#imgw-weatherWidget__next{
		/*display:none;*/
	}
	
}
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 740 - 1200 */

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: media queries */