@charset "utf-8";
body{
	font-family: 'Play', sans-serif;
	font-weight: bold;
}
.rem0-5{
	font-size: 0.5rem;
}
.rem0-6{
	font-size: 0.6rem;
}
.rem0-7{
	font-size: 0.7rem;
}
.rem0-8{
	font-size: 0.8rem;
}
.rem0-9{
	font-size: 0.9rem;
}
.rem1{
	font-size: 1rem;
}
.rem1-1{
	font-size: 1.1rem;
}
.rem1-2{
	font-size: 1.2rem;
}
.rem1-3{
	font-size: 1.3rem;
}
.rem1-4{
	font-size: 1.4rem;
}
.rem1-5{
	font-size: 1.5rem;
}
.bg-black{
	background-color:#000;
}
.bg-darkblue{
	background-color:#010b35;
}
.bg-violet{
	background-color:#2e255f;
}
.bg-green{
	background-color:#abcf9b;
}
.bg-darkgreen{
	background-color:#012103;
}
.bg-gray{
	background-color:#E6E6E6;
}
.bg-orenge{
	background-color:#ffd993;
}
.bg-lightviolet{
	background-color:#9bacda;
}
.bg-aqi-l1{
	background: linear-gradient(90deg, #012103 0%, #005035 50%, #012103 100%);
	color: #009966;
}
.border-aqi-l1{
	border: 0px;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #012103 0%, #009966 50%, #012103 100%);
    border-image-slice: 1;
	border-radius:.25rem;
}
.bg-aqi-l2{
	background: linear-gradient(90deg, #012103 0%, #473c00 50%, #012103 100%);
	color: #ffde33;
}
.border-aqi-l2{
	border: 0px;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #012103 0%, #ffde33 50%, #012103 100%);
    border-image-slice: 1;
	border-radius:.25rem;
}
.bg-aqi-l3{
	background: linear-gradient(90deg, #012103 0%, #572b00 50%, #012103 100%);
	color: #ff9933;
}
.border-aqi-l3{
	border: 0px;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #012103 0%, #ff9933 50%, #012103 100%);
    border-image-slice: 1;
	border-radius:.25rem;
}
.bg-aqi-l4{
	background: linear-gradient(90deg, #012103 0%, #570016 50%, #012103 100%);
	color: #cc0033;
}
.border-aqi-l4{
	border: 0px;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #012103 0%, #cc0033 50%, #012103 100%);
    border-image-slice: 1;
	border-radius:.25rem;
}
.bg-aqi-l5{
	background: linear-gradient(90deg, #012103 0%, #2d0044 50%, #012103 100%);
	color: #660099;
}
.border-aqi-l5{
	border: 0px;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #012103 0%, #660099 50%, #012103 100%);
    border-image-slice: 1;
	border-radius:.25rem;
}
.bg-aqi-l6{
	background: linear-gradient(90deg, #012103 0%, #3a0010 50%, #012103 100%);
	color: #7e0023;
}
.border-aqi-l6{
	border: 0px;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #012103 0%, #7e0023 50%, #012103 100%);
    border-image-slice: 1;
	border-radius:.25rem;
}
.border-violet{
	border-color:#2e255f !important;
}
.border-green{
	border-color:#548235 !important;
}
.border-blue{
	border-color:#0070c0 !important;
}
.btn-green{
	color:#000;
	background-color:#abcf9b;
	border-color:#70ad47;
}
.btn-green:hover{
	color:#000;
	background-color:#70ad47;
	border-color:#518230
}.btn-green.focus,.btn-green:focus{
	box-shadow:0 0 0 .2rem #518230
}
.btn-orenge{
	color:#000;
	background-color:#ffd993;
	border-color:#ffc000;
}
.btn-orenge:hover{
	color:#000;
	background-color:#ffc000;
	border-color:#d29500
}.btn-orenge.focus,.btn-orenge:focus{
	box-shadow:0 0 0 .2rem #d29500
}
.btn-lightviolet{
	color:#000;
	background-color:#9bacda;
	border-color:#4472c4;
}
.btn-lightviolet:hover{
	color:#000;
	background-color:#4472c4;
	border-color:#265099
}.btn-lightviolet.focus,.btn-lightviolet:focus{
	box-shadow:0 0 0 .2rem #265099
}

.bg-topic{
	background: linear-gradient(90deg, #012103 0%, #023a06 50%, #012103 100%);
	color: #ffffff;
}
.border-topic{
	border: 0px;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #012103 0%, #00c717 50%, #012103 100%);
    border-image-slice: 1;
	border-radius:.25rem;
}
.bg-sensor{
	background: linear-gradient(90deg, #012103 0%, #023a06 50%, #012103 100%);
	color: #ffffff;
}
.border-sensor{
	border: 0px;
	border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #012103 0%, #8bce92 50%, #012103 100%);
    border-image-slice: 1;
	border-radius:.25rem;
}
.bg-topic-max{
	background: linear-gradient(90deg, #012103 0%, #5e0404 50%, #012103 100%);
	color: #ffffff;
}
.border-topic-max{
	border: 0px;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #012103 0%, #f52a2a 50%, #012103 100%);
    border-image-slice: 1;
	border-radius:.25rem;
}
.bg-max{
	background: linear-gradient(90deg, #012103 0%, #015358 50%, #012103 100%);
	color: #ffffff;
}
.border-max{
	border: 0px;
	border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #012103 0%, #02a4af 50%, #012103 100%);
    border-image-slice: 1;
	border-radius:.25rem;
}
.bg-topic-min{
	background: linear-gradient(90deg, #012103 0%, #020158 50%, #012103 100%);
	color: #ffffff;
}
.border-topic-min{
	border: 0px;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #012103 0%, #0253af 50%, #012103 100%);
    border-image-slice: 1;
	border-radius:.25rem;
}
.bg-value{
	background: linear-gradient(90deg, #012103 0%, #5a5a5a 50%, #012103 100%);
	color: #ffffff;
}
.border-value{
	border: 0px;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #012103 0%, #b3b3b3 50%, #012103 100%);
    border-image-slice: 1;
	border-radius:.25rem;
}
.test-color{
	background-color:#000000 !important;
}


.area1{
	position: absolute;
	left: 21%;
	top: 61.8%;
	width: 2%;
}
.area2{
	position: absolute;
	left: 24%;
	top: 13.5%;
	width: 2%;
}
.area3{
	position: absolute;
	left: 43%;
	top: 31.8%;
	width: 2%;
}
.area4{
	position: absolute;
	left: 85%;
	top: 51.8%;
	width: 2%;
}
.area5{
	position: absolute;
	left: 68%;
	top: 22.8%;
	width: 2%;
}
.area6{
	position: absolute;
	left: 51.5%;
	top: 47%;
	width: 2%;
}
/*.modal-content{
	position: absolute;
	z-index: 10;
}*/
.popover{
	font-family: 'Play', sans-serif;
	font-weight: bold;
	position: absolute;
	font-size: 0.7rem;
	text-align: center;
	z-index: 0;
}
.popover-header{
	font-weight: bold;
	background-color: #00ff9d;
	color: #000000;
	font-size: 0.8rem;
}