/*===========================================================
'  DOMOS myPanel
'
'  NAME:    style.css
'  VERSION: 0.2
'  DATE:    10/10/2025
'  AUTHOR:  Luca Maroglio
'  COPY:    Zenity (c) 2025
'===========================================================*/

body { 
   margin: 14px auto; 
   padding: 0px;
   text-align: center;
   color:#ffffff;
   background-color: #304d66;

   background-image: url('../img/BG/MeteoBg1.jpg');
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;

   transition: background-image 1s;

   -webkit-touch-callout: none;
   -webkit-text-size-adjust: none;
}

.BoxArea {
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.5s ease;

   display: inline-flex;
	position: fixed;
	top: 20px;
	width: 822px;
}
.BoxAreaHide {
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.5s ease, visibility 0s 0.5s;
}
.BoxAreaShow {
   visibility: visible;
   opacity: 1;
   transition-delay: 0s;
}


/*----------------------------------------------------------------------------------------------------*/
/*  BOX METEO
/*----------------------------------------------------------------------------------------------------*/

#BoxMeteo {
	left: calc((100vw - 820px) / 2);
}

.BoxMeteo-Left {
   width: 286px;
	height: 495px;
   padding: 15px 25px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;

   background-color: #161f2cd0;
   border:1px solid rgb(87, 87, 87);
}

.BoxMeteo-Right {
   width: 190px;
   height: 486px;
   margin-left: 10px;
   padding: 20px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;

   background-color: #161f2cd0;
   border:1px solid rgb(87, 87, 87);
}




.BoxMeteo-Text {
   display: block;
   align-items: center;
   justify-content: center;
   text-align: center;
   font-family: 'Roboto', sans-serif;
   font-size: 14px;
   padding: 5px 30px;
   text-decoration:none;
   color:#c8c8c8;
}

.BoxMeteo-TextTime {
   font-size: 22px;
   color: #dddddd;
   font-weight: bold;
   margin-bottom: 20px;
}

.BoxMeteo-TextMeteo {
   /* ZZZZZ */
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.5s ease;

   text-align: left;
   font-size: 16px;
   color: #b8b8b8;
   font-weight: normal;
}
.BoxMeteo-TextMeteoHide {
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.5s ease, visibility 0s 0.5s;
}
.BoxMeteo-TextMeteoShow {
   visibility: visible;
   opacity: 1;
   transition-delay: 0s;
}

.BoxMeteo-TextTitle {
   display: flex;
   padding-bottom: 10px;
   height: 48px;
}
.BoxMeteo-TextTitle div {
   display: inline-flex;
   padding-top:5px;
   line-height: 43px;
   font-size: 23px;
   position: relative;
   left: -10px;
}
.BoxMeteo-TextTitle img {
   display: inline-flex;
   height: 50px;
   position: relative;
   left: -10px;
}

.BoxMeteo-MeteoParam {
   display: inline-block;
   width: 104px;
}

.BoxMeteo-MeteoValue {
   display: inline-block;
   width: 90px;
}

.BoxMeteo-Sensor {
   /* ZZZZZ */
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.5s ease;

   display:block;
   width:150px;
   height:150px;
   margin: 0px 20px 10px 20px;
   font-family: 'Roboto', sans-serif;
   text-decoration:none;
   cursor: default;
   background: rgba(53,69,87,1);
   background: -moz-linear-gradient(top, rgba(53,69,87,1) 0%, rgba(21,27,38,1) 100%);
   background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(53,69,87,1)), color-stop(100%, rgba(21,27,38,1)));
   background: -webkit-linear-gradient(top, rgba(53,69,87,1) 0%, rgba(21,27,38,1) 100%);
   background: linear-gradient(to bottom, rgba(53,69,87,1) 0%, rgba(21,27,38,1) 100%);
   border:1px solid rgba(70, 70, 70, 0.61);
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
}
.BoxMeteo-SensorHide {
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.5s ease, visibility 0s 0.5s;
}
.BoxMeteo-SensorShow {
   visibility: visible;
   opacity: 1;
   transition-delay: 0s;
}

.BoxMeteo-Sensor div{
   display:block;
   width:150px;
   align-items: center;
   justify-content: center;
   text-align: center;
   font-size: 40px;
   color: rgba(194, 210, 220, 1);
   font-weight: bold;
   margin-top:40px;
}
.BoxMeteo-Sensor span{
   display:block;
   position: relative;
   top:-6px;
   width:150px;
   align-items: center;
   justify-content: center;
   text-align: center;
   font-size: 17px;
   color: rgba(130, 140, 148, 1);
   margin-top:0px;
}
.BoxMeteo-Sensor:hover {
   background: rgba(91,106,125,1);
   background: -moz-linear-gradient(top, rgba(91,106,125,1) 0%, rgba(21,27,38,1) 100%);
   background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(69,85,104,1)), color-stop(100%, rgba(21,27,38,1)));
   background: -webkit-linear-gradient(top, rgba(69,85,104,1) 0%, rgba(21,27,38,1) 100%);
   background: linear-gradient(to bottom, rgba(69,85,104,1) 0%, rgba(21,27,38,1) 100%);
}


/*----------------------------------------------------------------------------------------------------*/
/*  BOX SERVER
/*----------------------------------------------------------------------------------------------------*/

#BoxServer1,
#BoxServer2 {
	left: calc((100vw - 820px) / 2);

   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;

	background-color: #161f2c80;   
   border:1px solid rgb(87, 87, 87);

}
#BoxServer1 {
   display: block;
   width: 800px;
   padding: 10px;
}
#BoxServer2 {
   display: flex;
   width: 800px;
   padding: 10px 10px 0px 10px;
}

.BoxServer-Left {
   padding: 15px 25px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;

   background-color: #161f2cd0;
   border:1px solid rgb(87, 87, 87);
}
.BoxServer-Right {
   margin-left: 10px;
   padding: 20px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;

   background-color: #161f2cd0;
   border:1px solid rgb(87, 87, 87);
}
.BoxServer-Sensor {
   display:block;
   width:150px;
   height:150px;
   margin-bottom:10px;
   font-family: 'Roboto', sans-serif;
   text-decoration:none;
   cursor: default;
   background: rgba(53,69,87,1);
   background: -moz-linear-gradient(top, rgba(53,69,87,1) 0%, rgba(21,27,38,1) 100%);
   background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(53,69,87,1)), color-stop(100%, rgba(21,27,38,1)));
   background: -webkit-linear-gradient(top, rgba(53,69,87,1) 0%, rgba(21,27,38,1) 100%);
   background: linear-gradient(to bottom, rgba(53,69,87,1) 0%, rgba(21,27,38,1) 100%);
   border:1px solid rgba(70, 70, 70, 0.61);
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
}


/*----------------------------------------------------------------------------------------------------*/
/*  CHART STYLES                                                                                      */
/*----------------------------------------------------------------------------------------------------*/

.ChartBlock {
	margin: 0 auto 10px auto;
	padding: 20px 10px; 

	width: 80%;

	min-width:620px;
	max-width:630px;
	height: 206px;

	min-width:355px;
	max-width:355px;
	height: 464px;

   background-color: #141414a6;
	border:1px solid #303030;
	border-radius: 10px;
	transition: 0.5s;
}

.PieBlock {
	float:left;
	margin:0.4%;
	padding:0px;

	width:19%;

	min-width:191px;
	height: 185px;

	min-width:191px;
	max-width:191px;
	height: 246px;

   background-color: #141414a6;
	border:1px solid #303030;
	border-radius: 10px;
	transition: 0.5s;
}

.PieArea {
	margin: 0 auto;
}



@media (min-height: 680px) and (min-width: 1200px) {
   body {
      zoom: 1.2;
   }
   #BoxMeteo {
      left: calc((100vw - 1030px) / 2);
   }
   #BoxServer1, #BoxServer2 {
      left: calc((100vw - 1030px) / 2);
   }   
}

@media (min-height: 792px) and (min-width: 1540px) {
   body {
      zoom: 1.4;
   }
   #BoxMeteo {
      left: calc((100vw - 1250px) / 2);
   }
   #BoxServer1, #BoxServer2 {
      left: calc((100vw - 1250px) / 2);
   }   
}

@media (min-height: 900px) and (min-width: 1760px) {
   body {
      zoom: 1.5;
   }
   #BoxMeteo {
      left: calc((100vw - 1500px) / 2);
   }
   #BoxServer1, #BoxServer2 {
      left: calc((100vw - 1500px) / 2);
   }   
}

@media (min-height: 1080px) and (min-width: 1920px) {
   body {
      zoom: 1.6;
   }
   #BoxMeteo {
      left: calc((100vw - 1530px) / 2);
   }
   #BoxServer1, #BoxServer2 {
      left: calc((100vw - 1530px) / 2);
   }   
}

/* 904 x 572 */