body {
  font-family: RubikLight;/*, Verdana, Geneva, sans-serif;*/
  font-size: 16px;
  line-height: 1.42857143;
  min-height: 100%;
  height:100vh; 
  width:100vw;
  vertical-align:top; 
  overflow:hidden !important; /**/
  background: linear-gradient(177.63deg, #353A40 -84.18%, #181A1D 267.9%);/**/
  color:#e1e1e1;
  margin:0px; 
  padding:0px;;
  position: fixed;/*ipad dont scroll*/
}

/*audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(112%);
    width: 300px;
    height: 25px;
    transform: scale(1.5);
    outline: none;
}*/

#qr_container{
    z-index: 1;
    position:absolute;
    top:-1000px;
    left:0px;
    width:auto;
    height:auto;
    margin: 20px; 
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;    
    align-items: flex-start; 
    border-radius: 10px;
    background: #ffffff;
    transition: all 0.2s linear;
}


#weatherChart,.weatherChart{
    position:absolute; 
    left:15vw; 
    top:25vh; 
    width:50vw; 
    height:50vh; 
    display:none; 
    box-shadow:#3C4652 0px 5px 17px; 
    z-index:16; 
    background:#ffffff;
}
.weatherChart>div>div{
        margin: 20px;
}

#center_container{
    height:auto;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    opacity:0;
    transition: opacity,transform 0.35s ease-in-out;
}
#odometer_container{
    background: linear-gradient(356.43deg, #131415 19.32%, #202020 88.64%);
    border-radius: 30px;
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    width:auto;
    height:auto;
    padding: 20px;
    padding-left: 40px;
    padding-right: 40px;
    /*margin-top: 20px;
    margin-bottom: 20px;*/
    opacity:0;
    transition: opacity 0.5s linear;
}
#odometer_container>div{
    display:flex;
    flex-direction: row;
    align-items: center;
}
.odometer_item{
    display:flex;
    flex-direction: column;
    align-items: flex-start;
}
#dinamik{
    height:100%;
    z-index: 1;
    margin-top: 20px;
    margin-left: 35px;
    /*cursor:pointer;*/
    transform: scale(1.0);
    opacity:0;
    transition: opacity,transform 0.35s linear;
}
.dinamik_anim {
  animation: pulsate 3.5s ease-out infinite;
}
@keyframes pulsate {
  0% {
    transform: scale(1);
  }
    75% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}
@media screen and (max-width: 600px) {
}



#vk_div{
    position:absolute; 
    top:100px; 
    right:-500px; 
    height:100%; 
    background: #353535;
    min-width: 300px;
    box-shadow: -10px 9px 17px 1px #000000;
    display:none;
    transition: all 0.35s ease-in-out;
}
#vk_groups{
}

/*radio*/
#radioVolumeSlider{
    width:45px;
    height:100%;
    background:url("/img/tuning_ruler.svg") no-repeat;
    background-size: contain;
    background-position: center;
    flex-shrink: 0;
    z-index: 1;
}
#radioVolumeSlider.horizontal{
    background:url("/img/tuning_ruler_h.svg") no-repeat;
    background-size: contain;
    background-position: center;
}
/*Стиль слайдера*/
.ui-slider .ui-slider-range{
    background: transparent;
}
.ui-widget-content {
    border:0 !important;
}
.ui-slider-handle {
    width:65px !important;
    height:65px !important;
    margin-left:-6px !important;
    margin-bottom: -32px !important;
    /*background:url(/img/slider_th.svg) !important;/*для буферизации картинки*/
    background:url(/img/playbutton.png) !important;
    background-size: contain !important;
    border-radius: 100%;
    border:0 !important;
    cursor:pointer !important;
    outline: none;
}
.ui-slider-handle.horizontal {
    margin-top: -7px !important;
}
.ui-slider-handle.off {
    /*background:url(/img/slider_th_off.svg) !important;*/
    background:url(/img/playbutton_play.png) !important;
    background-size: contain !important;
    border-radius: 100%;
}
.ui-slider-handle.on {
    /*background:url(/img/slider_th.svg) !important;*/
    background:url(/img/playbutton_pause.png) !important;
    background-size: contain !important;
    border-radius: 100%;
}
.ui-slider-handle.load {
    background:url(/img/playbutton_load.png) !important;
    background-size: contain !important;
    border-radius: 100%;
  animation: rotatte 1.5s linear infinite;
}
@keyframes rotatte {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* end of radio */

.incity{
    font-size:15px; 
    color: #C0E1E8; 
    white-space: nowrap;
}

#header_container{
    /*position:absolute; 
    right: 0px; left:0px; top:0px; /**/
    padding:40px; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;font-size:16px;
    width: 100%;
}
#header_container a{
  color:#C0E1E8; 
  cursor:pointer;  
  margin:0px 20px;
}
#podval{
    position:absolute; bottom:0px;right:0px; left:0px; padding: 20px; display: flex; flex-direction: row; justify-content: space-between;flex-wrap: wrap;color: #C0E1E855;
}
@media screen and (max-width: 600px) {
    #header_container{
        /*font-size:15px;*/
        padding:10px; 
        /*flex-direction: column; */
        flex-wrap: nowrap;
    }
    #header_container div{
        display:flex;
        flex-direction: column;
    }
    #header_container a{
      margin:5px 0px;
    }
    #podval{
        font-size:10px;
        padding:10px; 
    }
}


#announce{
    display:flex; 
    justify-content:flex-start; 
    align-items:center;
    background: linear-gradient(356.43deg, #131415 19.32%, #202020 88.64%);
    border-radius: 20px;
    position: relative;
}
#announce.hide{
    display: none;
}
#announce span{
    font-size: 20px;
    margin: 20px;
}
#announce label{
    margin-bottom: -50px;
    font-size: 14px;
    margin-right: 10px;
}
#announce a{
        position: absolute;
    right: 15px;
    top: 0px;
        font-size: 12px;
        cursor:help;
}