/*
*	[Amonit Monitoring Stylesheet file]
*	1.	Global Styles
*	2.	Templates styles
*	3.	Generic Styles
*/




/*
*-------------------------------------------------------
*	[1.	GLOBAL STYLES]
*-------------------------------------------------------
*/

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

*{
margin:0;
padding:0;
}
img{
border:0px;
}
a:link { color: #333 ; text-decoration: none; }
a:visited { color: #333 ; text-decoration: none; }
a:hover { color: #999 ; text-decoration: none; }
a:active { color: #333 ; text-decoration: none; }


body{
	background:#e8e8e8;
	color:#fff;	 
	font-family: 'Noto Sans', sans-serif;
	font-size:1em;
	padding:0;
	margin:0;
	overflow: hidden;
	display: flex;
	flex-direction:column;
	background-attachment: fixed;
	text-align: center;
}
.main {
	min-height: 100vh;
	transition: background 1s ease-out;
	background: rgb(142, 148, 167);
	background: linear-gradient(156deg, rgba(142, 148, 167,1) 0%, rgb(123, 130, 153) 100%);
}
.bg-error{
	background: rgb(195, 85, 85);
	background: linear-gradient(156deg, rgba(195, 85, 85) 0%, rgb(231, 126, 126) 100%);
}
.bg-weather-snowy,
.bg-weather-cloudy,
.bg-weather-rainy
 {
	background: rgb(109,122,160);
	background: linear-gradient(156deg, rgba(109,122,160,1) 0%, rgba(121,174,191,1) 100%);
}

.bg-weather-moon,
.bg-weather-mostlymoon {
	background: rgb(3 9 27);
	background: linear-gradient(156deg, rgb(3 9 27) 0%, rgb(27 38 67) 100%);
}
.bg-weather-mostlysunny,
.bg-weather-sunny {
	background: rgb(254,170,142);
	background: linear-gradient(156deg, rgba(254,170,142,1) 0%, rgba(254,190,142,1) 100%);
}
.bg-weather-stormy {
	background: rgb(89,49,136);
	background: linear-gradient(156deg, rgba(89,49,136,1) 0%, rgba(157,140,174,1) 100%);
}
html, body {
	width:100%;
	height: 100vh;
}


h1, h2, h4{
	text-transform:uppercase;
	font-weight: normal;
}

h1{
	font-size: 12em;
	line-height: 1em;
}
h2{
	font-size: 6em;
}
.chart{
	height: 100vh;
	width: 100vw;
}
input, textarea{
  background: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #b8b8b8;
  color: #5b5b5b;
  font-size: 15px;
  margin:10px 0;
  padding: 8px 0 8px 8px;
  width: 100%;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}
	input[type=submit],
	input[type=button]{
		  background: #ea9675;
		  color:#fff;
		  -webkit-border-radius: 6px;
		  -moz-border-radius: 6px;
		  -ms-border-radius: 6px;
		  -o-border-radius: 6px;
		  border-radius: 6px;
		  color: #fff !important;
		  display: inline-block;
		  font-size: 11px;
		  font-weight: bold;
		  padding: 2px 8px 3px;
		  text-decoration: none;
		  white-space: nowrap;
		  -webkit-transition: all 400ms ease;
		  -moz-transition: all 400ms ease;
		  -ms-transition: all 400ms ease;
		  -o-transition: all 400ms ease;
		  transition: all 400ms ease;
		   border: none;
		  height: 36px;
		  float: right;
		  font-size: 15px;
		  font-weight: bold;
		  margin-top: 10px;
		  width: 99px;
		  cursor: pointer;
	}
select{
	background:#fff;
	border-radius: 2px;
	color:#828282;
	font-weight:normal;
	font-size:1em;
	height:25px;
	margin-right:10px;
	margin-top:12px;
	padding:0 5px
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	/*padding:0 5px;*/
	
}
.center {
	text-align: center;
}
.button{
	float:right;
	height:25px;
	margin-right:0;
	margin-bottom:5px;
	width:140px;
}

.green{
	color:#8ac161;
}

.orange{
	color:#eb8f00;
}

.red{
	color:#e25353;
}
.flex {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
	justify-content: center
}
.mb20{
	margin-bottom: 20px
}
.mt20{
	margin-top: 20px
}

/*
*	[3.2] Classic Styles
*/
.clear{
	clear: both;
}
.text-justify {
	text-align: justify;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

.object-left {
	float: left;
}

.object-right {
	float: right;
}

.object-center {
    margin: 10px auto;
    text-align: center;
}

.underline {
    text-decoration: underline;
}

.strong {
    font-weight: bold;
}

.italic	{
	font-style: italic;
}
.noitalic{
	font-style: normal;
}

.hide {
    display: none;
}

.header-icon {
	width: 100vw;
	opacity: 0.6;
	margin: 4vw 0 5vw;
}
.weather-icon {
	max-width: 30vw;
}

.groupContainer {
	margin-top: 5vh;
}