@import url("/3rdparty/fontawesome/css/all.min.css");
 .type_informer {
background: none;
border: none;
}
.type_switch.state_on,
.type_mode.state_on,
.type_button.style_light,
.type_navgo {
border: 1px solid rgba(0, 233, 233, 0.6);
 background-color: rgb(13, 156, 155);
color:white;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.type_switch.state_off,
.type_mode.state_off {
border: 1px solid rgba(0, 233, 233, 0.6);
  background-color: rgba(79, 171, 171, 0.6);
color:white;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
/* -----------------------------------------------------------------------*/
/* ОБЩЕЕ СОБРАНИЕ КОДА ДЛЯ АНИМАЦИИ */
/* -----------------------------------------------------------------------*/
.element_38 { animation: fortime 1s ease-out; } /* - блок времени */
//.element_232 { animation: fortime 1s ease-out; } /* - блок времени */
.element_37 { animation: forweather 1.6s ease-out; } /* - блок погоды */

.element_44 { animation: forweather 1.6s ease-out; } /* - блок трафика */

.element_53 { animation: forweather 1.4s ease-out; } /* - блок STATUS SYSTEM  */
//.element_242 { animation: forweather 1.4s ease-out; } /* - блок STATUS SYSTEM  */
//.element_243 { animation: forweather 1.4s ease-out; } /* - блок STATUS SYSTEM  */

.element_244 { animation: forshowing 1.2s ease-out; } /* - блок отображения - panel-showing1 */
.element_247 { animation: forshowing 1.4s ease-out; } /* - блок отображения - panel-showing2 */
.element_178 { animation: forshowing 1.6s ease-out; } /* - блок отображения - panel-showing3 */
.element_179 { animation: forshowing 1.8s ease-out; } /* - блок отображения - panel-showing4 */

.element_36 {animation: forlog 1.2s ease-out; } /* - ,блок отображения - log_alice */

.element_55  { animation: forfunctions 1s ease-out; }  /*  - блок - panel-functions1 */
.element_39  { animation: forfunctions 1.2s ease-out; } /*  - блок - panel-functions2 */
.element_40  { animation: forfunctions 1.1s ease-out; } /*  - блок - panel-functions3 */
.element_41  { animation: forfunctions 1.4s ease-out; } /*  - блок - panel-functions4 */
.element_43  { animation: forfunctions 1.3s ease-out; } /*  - блок - panel-functions5 */
.element_42  { animation: forfunctions 1.5s ease-out; } /*  - блок - panel-functions6 */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */
 .element_242 {
background-color:rgba(0,0,0,0);
border: 0px;
}
 .element_243 {
background-color:rgba(0,0,0,0);
border: 0px;
}

/* -----------------------------------------------------------------------*/
/* контейнер - log_alice */ 
/* -----------------------------------------------------------------------*/
 .element_36 {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px;
border-radius: 10px 10px 10px 10px;
padding: 10px;
}
/* -----------------------------------------------------------------------*/
/* контейнер - status_system_icons */ 
/* -----------------------------------------------------------------------*/
.element_53 {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px;
border-radius: 10px 10px 10px 10px;
padding: 2px;
}

/* -----------------------------------------------------------------------*/
/* панель погоды  */
/* -----------------------------------------------------------------------*/
.panel-weather {
 box-sizing: border-box;
 color: white;
 background-color: rgba(0, 0, 0, 0.4);
 text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);

/* выше общее */
  position: absolute;
 /* top: 0px; */
/*  right: 0px; */
  width: 240px;
  text-align: center;
  cursor: pointer;
  -moz-border-radius: 10px 0px 0px 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px 0px 0px 10px;
}

.panel-weather .location {
background-color: rgba(0, 233, 233, 0.6);
  font-size: 22px;
  line-height: 1.2;
  text-align: center;
 font-family: arial;
 font-weight: 100;
  -moz-border-radius: 10px 0px 0px 0px;
  -webkit-border-radius: 10px;
  border-radius: 10px 0px 0px 0px;
}

.panel-weather img {
  width: 80px;
  margin: 10px 0px 0 0;
}
.panel-weather .temp-weather {
  font-family: arial;
  font-weight: 600;
  display: inline-block;
  vertical-align: top;
  font-size: 80px;
  line-height: 1.4;
 height:137px;
}
.panel-weather .temp-weather .degree {
 font-family: arial;
 font-weight: 600;
  font-size: 32px;
  line-height: 1.4;
  vertical-align: top;
}
.panel-weather .text-weather {
 background-color: rgba(0, 233, 233, 0.6);
 font-family: arial;
 font-weight: 100;
  font-size: 14px;
  height:26px;
width:240px;
  line-height: 1.2;
display: table-cell;
vertical-align: middle;
  -moz-border-radius: 0px 0px 0px 10px;
  -webkit-border-radius: 10px;
  border-radius: 0px 0px 0px 10px;
}

/* -----------------------------------------------------------------------*/
/* панель трафика */
/* -----------------------------------------------------------------------*/
.traff {
 box-sizing: border-box;
 color: white;
 background-color: rgba(0, 0, 0, 0.4);
 text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  position: absolute;
  width: 240px;
  text-align: center;
  cursor: pointer;
}

.traff .title {
background-color: rgba(0, 233, 233, 0.6);
  font-size: 22px;
  line-height: 1.2;
  text-align: center;
 font-family: arial;
 font-weight: 100;
 cursor: pointer;
  -moz-border-radius: 0px 10px 0px 0px;
  -webkit-border-radius: 10px;
  border-radius: 0px 10px 0px 0px;
}

.traff img {
  width: 80px;
  margin: 15px 15px 0 0px;
}
.traff .level {
  font-family: arial;
  font-weight: 600;
  display: inline-block;
  vertical-align: top;
  font-size: 80px;
  line-height: 1.4;
 height:137px;
}

.traff .info {
width: 240px;
  background-color: rgba(0, 233, 233, 0.6);
  font-family: arial;
  font-weight: 100;
  text-align: center;
  font-size: 14px;
  height:26px;
  line-height: 1.2;
display: table-cell;
vertical-align: middle;
  -moz-border-radius: 0px 0px 10px 0px;
  -webkit-border-radius: 10px;
  border-radius: 0px 0px 10px 0px;
}

/* -----------------------------------------------------------------------*/
/* панель времени  */
/* -----------------------------------------------------------------------*/
.panel-time {
 box-sizing: border-box;
 color: White;
 background-color: rgba(0, 0, 0, 0.4);
 text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);

/* выше общее */
 position: absolute;
 top: 0px;
 width: 480px;
 -moz-border-radius: 0px 10px 10px 0px;
 -webkit-border-radius: 0px;
 border-radius: 0px 10px 10px 0px;
 /* animation: fortime 1s ease-out;*/
}
.panel-time .time {
 font-size: 125px;
 line-height: 1.1;
 text-align: center;
 font-family: arial;
 font-weight: 600;
}
.panel-time .time .blnk {
 font-size: 125px;
 line-height: 1.1;
 text-align: center;
 font-family: arial;
 font-weight: 600;
animation: blink 1s ease infinite;
}
.panel-time .date {
  background-color: rgba(0, 233, 233, 0.6);
  font-size: 22px;
  line-height: 1.2;
  text-align: center;
 font-family: arial;
 font-weight: 100;
  -moz-border-radius: 10px 10px 0px 0px;
  -webkit-border-radius: 0px;
  border-radius: 10px 10px 0px 0px;
}
.panel-time .mon {
  width: 480px;
  background-color: rgba(0, 233, 233, 0.6);
  font-family: arial;
  font-weight: 100;
  text-align: center;
  font-size: 14px;
  height:26px;
  line-height: 1.2;
  display: table-cell;
  vertical-align: middle;
  -moz-border-radius: 0px 0px 10px 10px;
  -webkit-border-radius: 10px;
  border-radius: 0px 0px 10px 10px;
}


/* -----------------------------------------------------------------------*/
/* блоки отображения данных  */
/* -----------------------------------------------------------------------*/
.panel-showing1,
.panel-showing2,
.panel-showing3,
.panel-showing4  {
 box-sizing: border-box;
 color: white;
 background-color: rgba(0, 0, 0, 0.4);
 /* text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); */
  position: absolute;
  width: 480px;
  overflow: hidden;
  cursor: pointer;
  background-color: initial;
}
.panel-showing1 ul,
.panel-showing2 ul,
.panel-showing3 ul,
.panel-showing4 ul {
  padding: 0;
}
.panel-showing1 ul li,
.panel-showing2 ul li,
.panel-showing3 ul li,
.panel-showing4 ul li {
  padding: 0;
  background-color: rgba(0, 0, 0, 0.5);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.panel-showing1 ul li .sense_snowing_1, 
.panel-showing1 ul li .title, 
.panel-showing1 ul li .sense_snowing_0,
.panel-showing2 ul li .sense_snowing_1, 
.panel-showing2 ul li .title, 
.panel-showing2 ul li .sense_snowing_0,
.panel-showing3 ul li .sense_snowing_1, 
.panel-showing3 ul li .title, 
.panel-showing3 ul li .sense_snowing_0,
.panel-showing4 ul li .sense_snowing_1, 
.panel-showing4 ul li .title, 
.panel-showing4 ul li .sense_snowing_0 {
  display: inline-block;
  font-size: 20px;
  line-height: 1.6;
  padding: 3px 8px;
 font-family: monospace;
 font-weight: lighter;
}
.panel-showing1 ul li .sense_snowing_1,
.panel-showing2 ul li .sense_snowing_1,
.panel-showing3 ul li .sense_snowing_1,
.panel-showing4 ul li .sense_snowing_1 {
  float: right;
  width: 180px;
  text-align: center;
  font-family: monospace;
  font-weight: lighter;
  background-color: rgba(0, 233, 233, 0.6);
  color: white;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.panel-showing1 ul li .sense_snowing_0,
.panel-showing2 ul li .sense_snowing_0,
.panel-showing3 ul li .sense_snowing_0,
.panel-showing4 ul li .sense_snowing_0 {
  float: right;
  width: 180px;
  text-align: center;
  font-family: monospace;
  font-weight: lighter;
  background-color: rgba(0, 40, 40, 0.6);
  color: rgba(190, 190, 190, 1);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
/* -----------------------------------------------------------------------*/
/* блоки кнопок функций */
/* -----------------------------------------------------------------------*/
.panel-functions {
 box-sizing: border-box;
 color: white;
 /* background-color: rgba(0, 0, 0, 0.4); */
 /* text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); */
 position: absolute;
  width: 100%;
  bottom: 0px;
  padding: 0px;
  align-items: center;
  justify-content: space-around;
}
.panel-functions .icon:hover {
-webkit-transform: scale(1.4, 1.4);
-ms-transform: scale(1.4, 1.4); 
transform: scale(1.4, 1.4);
}
.panel-functions .icon {
  position:relative  ;
  margin: 0;
  width: 110px;
  height: 110px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  border: 3px solid rgba(0, 233, 233, 0.6);
  -moz-border-radius: 82px;
  -webkit-border-radius: 82px;
  border-radius: 82px;
  -o-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  overflow: hidden;
}
.panel-functions .icon .fa {
 margin: 5px 0px 0px 5px;
 font-size: 60px;
padding-bottom:5px;
}
.panel-functions .icon .title {
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
  /* display: none; */
}


.panel-functions .icon::after {
 opacity: 1;
 transition-delay: .15s;
}

.pulse {
 border-radius: 50%;
 animation: pulse 0.7s ease-out;
 transform: scale(0);
 position: absolute;
}
@keyframes pulse {
 to {
  transform: scale(2);
  background-color: #fff;
  opacity: 0;
 }
}


/* ------------------------------------------------------------------------ */