/**
Theme Name: Inspiro
Theme URI: https://www.wpzoom.com/free-wordpress-themes/inspiro-lite/
Author: WPZOOM
Author URI: https://www.wpzoom.com/
Description: Inspiro is a professional & lightweight photo and video-focused WordPress theme with a modern design. Packed with features including a fullscreen area that supports Vimeo, YouTube & self-hosted video background, Page Builder integration, Inspiro is perfect for showing off your photography and video portfolio. Moreover, the theme is compatible with WooCommerce and popular Page Builders such as Elementor, Beaver Builder. The theme is fully GDPR-compliant and doesn't use any external Google Fonts. All fonts are locally hosted. Learn more and check out our powerful PREMIUM version at https://www.wpzoom.com/themes/inspiro/
Tags: one-column, two-columns, right-sidebar, flexible-header, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready, e-commerce, wide-blocks, portfolio, blog, custom-background, featured-image-header, full-width-template, theme-options, block-styles, block-patterns
Version: 1.8.7
Requires at least: 6.0
Requires PHP: 7.2
Tested up to: 6.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: inspiro
Domain Path: /languages/

Inspiro is based on Twenty Seventeen https://wordpress.org/themes/twentyseventeen/, (C) 2012-2020 Automattic, Inc.
Twenty Seventeen is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/

/* Note: The CSS files are loaded from assets/css/ folder. */

body {
	background: radial-gradient(at center center, var(--e-global-color-secondary) 27%, var(--e-global-color-primary) 85%);
}

.elementor-location-header section {
	z-index: 9999;
}

.section-header {
	color: #FFF !important;
    font-family: var(--bs-font-sans-serif);
    font-weight: 400;
    font-size: 26px !important;
	padding: 15px 10px 10px 30px !important;
    background-color: #C00 !important;
	text-align: center  !important;
	margin-top: 40px;
    margin-bottom: 20px;
	border-radius: 0 !important;
	border: 0 !important;
}
.accordion-item {
	border-color: #C00 !important;
}
.accordion-item:hover {
	border-color: #B00 !important;
}
.accordion-item h2 {
	color: #FFF;
}
.accordion-item .section-header {
	margin-top: 0 !important;
    margin-bottom: 0 !important;
	box-shadow: none !important;
	padding: 0 15px
}
.accordion-item .section-header:hover {
	color: #FFF !important;
}

.sub-title {
	margin-bottom: 20px;
}

.aqi-row {
	padding: 10px;
}
.station-header-row {
	padding: 10px;
}
.monitoring-stats-panel-row {
	padding: 10px;
}
.station-header-row .header-background {
	position: fixed;
	top:0;
	right: 0;
	bottom:0;
	left: 0;
	background-color: transparent;
    background-image: radial-gradient(at center center, var(--e-global-color-secondary) 27%, var(--e-global-color-primary) 85%);
    opacity: 0.6;
	z-index: -1;
}

#submit {
		margin-top: 30px;
	}

	#chartContainer {
		margin-top: 5px;
		height: 350px;
		width: 100%;
	}

	.card-header {
		background-color: #C00 !important;
		text-align: center;
		padding: 5px;
	}
 
	.card-header h3 {
		color: #FFF !important;
}

	.circle-div {
		height: 150px;
		width: 150px;
		border-radius: 50%;
		background-color: #CCC;
		display: flex;
		justify-content: center;
		/* Horizontal alignment */
		align-items: center;
		/* Vertical alignment */
	}

	span.green-level {
		padding: 0px 10px;
		margin: 4px;
		background-color: #40ae49;
	}

	.levels li {
		height: 32px;
		margin: 5px 0px;
		list-style: none;
	}

	.entry-content ul li {
		list-style-type: none !important;
	}

	span.Readiness-level {
		padding: 0px 10px;
		margin: 4px;
		background-color: #fff101;
	}

	span.Alarm-level {
		padding: 0px 10px;
		margin: 4px;
		background-color: #fbb416;
	}

	span.HealthRisk-level {
		padding: 0px 10px;
		margin: 4px;
		background-color: #d1232a;
	}

	.distrclabel {
		font-weight: 700;
	}

	#sites {
		color: #40ae49;
	}

	ul.levels {
		padding-left: 0px;
	}

    .textClass {
		margin-left: 8px;
	}

.card-header {
		background-color: #40ae49;
		color: rgb(0, 0, 0);
		text-align: center;
	}

	.excellentCls {
		text-align: center;
		font-size: 12px;
		font-weight: bold;
		background-color: #B2D45E;
		padding: 2px 20px;
		border: 1px solid rgba(128, 128, 128, 0);
	}

	.excellentborder {
		font-size: 12px;
		font-weight: bold;
		background-color: #B2D45E;
		padding: 3px;
		width: 70%;
		margin: auto;
		border-radius: 20px;

	}

	.goodCls {
		text-align: center;
		font-size: 12px;
		font-weight: bold;
		background-color: #e8da42;
		padding: 2px 6px !important;
		border: 1px solid rgba(128, 128, 128, 0);
	}

	.goodborder {
		font-size: 12px;
		font-weight: bold;
		background-color: #e8da42;
		padding: 3px;
		width: 70%;
		margin: auto;
		border-radius: 20px;

	}

	.fairCls {
		text-align: center;
		font-size: 12px;
		font-weight: bold;
		background-color: #fbb349;
		padding: 2px 6px !important;
		border: 1px solid rgba(128, 128, 128, 0);
	}

	.fairborder {
		font-size: 12px;
		font-weight: bold;
		background-color: #fbb349;
		padding: 3px;
		width: 70%;
		margin: auto;
		border-radius: 20px;

	}

	.unhealthyCls {
		text-align: center;
		font-size: 12px;
		font-weight: bold;
		background-color: #f06376;
		padding: 2px 6px !important;
		border: 1px solid rgba(128, 128, 128, 0);
	}

	.unhealthyborder {
		font-size: 12px;
		font-weight: bold;
		background-color: #f06376;
		padding: 3px;
		width: 70%;
		margin: auto;
		border-radius: 20px;

	}

	.badCls {
		text-align: center;
		font-size: 12px;
		font-weight: bold;
		background-color: #ae72af;
		padding: 2px 6px !important;
		border: 1px solid rgba(128, 128, 128, 0);
	}

	.badborder {

		font-size: 12px;
		font-weight: bold;
		background-color: #ae72af;
		padding: 3px;
		width: 70%;
		margin: auto;
		border-radius: 20px;

	}


	.vbadCls {
		font-size: 12px;
		font-weight: bold;
		background-color: #91426e;
		padding: 2px 6px !important;
		border: 1px solid rgba(128, 128, 128, 0);
		text-align: center;
	}

	.vbadborder {
		font-size: 12px;
		font-weight: bold;
		background-color: #91426e;
		padding: 3px;
		width: 70%;
		margin: auto;
		border-radius: 20px;

	}

	.fairname,
	.unhealthyname,
	.excellentname,
	.badname,
	.vbadname,
	.goodname {
		font-size: 12px !important;
		font-weight: 600 !important;
	}

	.fairname,
	.unhealthy,
	.excellentname,
	.badname,
	.vbadname,
	.goodname {
		font-size: 12px !important;
		font-weight: 600 !important;
	}

	.card,
	.card-header,
	.card-body {
		border-radius: 0px !important;
	}

	.light-color {
		opacity: 0.2;
	}

	.card-header h3 {
		font-weight: 400 !important;
	}

	@media only screen and (max-width: 1640px)and (min-width: 992px) {
		.samecards {
			height: 63vh !important;
			overflow: auto;
		}
	}

	@media only screen and (max-width: 1920px) and (min-width: 1641px) {
		.samecards {
			height: 45vh !important;
			overflow: auto;
		}
	}

	@media only screen and (max-width: 2600px) and (min-width: 1921px) {
		.samecards {
			height: 37vh !important;
			overflow: auto;
		}
	}

	@media only screen and (min-width: 2601px) {
		.samecards {
			height: auto !important;
			overflow: auto;
		}
	}

#form-monitoring-stats-panel {
	margin: 30px 0;
}
#monitoring-stats-panel-graph {
	width: 100%;
	height: 420px;
}

.district-info {
	display: flex;
    align-items: end;
    margin-left: 10px;
}
.district-name {
	margin-left: 10px;
    font-size: 26px;
    line-height: 32px;
    font-weight: 500;
    color: green;
}

/*~~~~~~~~~~~~ AQI Row ~~~~~~~~~~~~~~~~~~~*/
.totalNumber h3 {
	font-size: 2.5rem;
}
.totalaqiimage {
	padding: 10px;
}
.btn-date:hover,
.btn-date.selected {
	background: var(--e-global-color-primary) !important;
	border: 1px solid var(--e-global-color-primary) !important;
	color: #FFF !important;
}

/*~~~~~~~~~~~ Parameter Chart ~~~~~~~~~~~*/
.chart-container {
	border: 1px solid #DDD;
}
.no-content {
	display: flex;
    align-items: center;
    justify-content: center;
}

/*~~~~~~~~~~~ MAP CSS ~~~~~~~~~~~~~~~~~~~*/
.map-container {
	position: relative;
}
.map-container .time-picker {
	display: flex;
	position: absolute;
    top: 10px;
    right: 69px;
    z-index: 999;
}
.map-container .time-picker {
	line-height: 26px;
}
.time-picker .btn-minus-time,
.time-picker .btn-plus-time {
	line-height: 28px;
    background: #FFF;
    width: 40px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
	cursor: pointer;
}
.map-container .time-picker .dropdown-toggle {
	background: #FFF;
    color: #222;
	border: #FFF;
    line-height: 28px;
    border-radius: 3px;
	margin: 0 5px;
}
.map-container .time-picker .dropdown-menu {
	height: 200px;
    overflow: auto;
}
.map-container .time-picker .dropdown-item {
	cursor: pointer;
}
#thessaloniki-districts-map {
	margin-top: 35px;
	width: 100%;
}
path.leaflet-interactive:focus {
	outline: none;
}
.map-view {
	width: 100%;
	height: 400px;
}
.param-map .leaflet-interactive {
    cursor: default;
}
@media screen and (max-width: 991px) {
	#thessaloniki-districts-map {
		height: 420px;
	}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	#thessaloniki-districts-map {
		height: 63vh;
	}
}
@media screen and (min-width: 1200px) {
	#thessaloniki-districts-map {
		height: 46vh;
	}
}

#rome-districts-map {
	height: 480px;
}
.gm-style-iw {
    display: flex !important;
	flex-direction: row-reverse !important;
	align-items: center !important;
	background: #a6e5ff !important;
	height: 30px !important;
	border-radius: 0 !important;
}
.gm-style-iw-chr {
	width: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gm-style-iw-chr span {
	width: 20px !important;
	height: 20px !important;
}
.gm-style-iw-d {
	overflow: hidden !important;
	font-weight: bold !important;
}
.gm-style-iw-tc:after {
	background: #a6e5ff !important;
}

#expert-panel-data h3 {
	text-align: center;
    margin: 20px 10px;
}