html, body { height: 100%; margin: 0px; background: #000000; padding: 0px}

.energyup {
    background: rgba(40, 40, 40, 1);
}

#energy_burn{
    position: absolute;
    width: 55vw;
    height: 30vh;
    bottom: 7vh;
    left: 0vh;
    opacity: 0.9;
}

.energy_save{
    position: absolute;
    width: 99vw;
    height: 99vh;
    top: 0vh;
    left: 0vh;
    z-index: 1000;
    background: #000000;
    border: red 0px solid;
    opacity: 0.6;
    pointer-events: none;
}


#layout {
    /*border: solid 1px red;*/
    margin-top: -10px;
    margin-left: -9px;
    height: 99%;
    width: 100%;
    position: absolute;
}

#layout div {
    border: solid 0px red;
    position: absolute;
    display: block;
    font-family:helvetica;
    color:#aaaaaa;
}


#console div{
 position: relative;  
 color: #0f0 !important;
 font-family: 'Courier New', Courier, monospace;
 font-size: 12px;
 background: rgba(0, 0, 0, 0.7);
}

#console {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 60vw;
  height: 3vh;
  /* background: rgba(0, 0, 0, 0.4); */
  color: #0f0 !important;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  padding: 8px;
  border: 1px solid red;
  overflow: none;
  z-index: 9999;
  box-sizing: border-box;
}

/* 🔹 Fullscreen mode for #console only */
#console.fullscreen_on {
  width: 95vw !important;
  /* height: 100vh !important; */
  bottom: 0 !important;
  left: 0 !important;
  /* border: none !important; */
  /* resize: none !important;  */
  z-index: 49 !important;
}


#placeholders div {
    font-size: 9vw;
    width: 10vw !important;;
    text-align: right;
}

/* buttons  */

div#fullscreen, div#reload  {
    position: absolute;
    display: block;
    z-index: 50;
    opacity: 0.05;
    background: #FFFFFF;
    width:25vw;
    height:33vh;
    left: 1vw;
    top: 7vh;
    border-radius: 5vw;
}

div#reload {  left: 33vw;}

/*src='images/full-screen-svgrepo-com.svg'*/
/*src='images/reload-ui-svgrepo-com.svg'*/
/* buttons  */

canvas#weatherChart {
    display: block;
    position: absolute;
    right: 1vh;
    bottom: -2vh;
}


.weatherChart-fullscreen {
    width: 98vw !important;
    height: 98vh !important;
    background-color: #000000ee;
}

.weatherChart-normal {
    width:45vw !important; 
    height:55vh !important;
}


#chart-container {
    width: 90%;
    height: 400px;
}


span[field_name] {
    position: absolute;
    display: block;
    right: 2px;
    top: -1px;
    opacity: 0;
    font-size: 1vw;
}

div[id=battery] {
    right: 0vw;
    top: 1vh;
    text-align: right ;
    width: 11vw;
    height: 2vw;
    font-size: 3vw !important;
    /*border: solid 1px red !important;*/
}


.battery-low    {    color: red !important;}
.battery-medium {    color: #ffaa00 !important;}
.battery-high   {    color: #00cc00 !important;}

div[id*=clock] {
    left: 0vw;
    top: 3vh;
    text-align: center ;
    width: 59vw;
    height: 20vw;
    font-size: 23vw !important;
    /*border: solid 1px red !important;*/
}

#clock_seconds {
    font-size: 5vw !important;
    text-align: center ;
    left: 0vw;
    top: 22vh;
    text-align: center;
}


#day {
    left: 2vw;
    top: 38vh;
    font-size: 16vw;
}

#weekday {
    left: 22vw;
    top: 37.5vh;
     /*width:150px;*/
     font-size: 102px;
 }

#month {
    left: 22vw;
    width:16vw;
    text-align: center;
    top: 54.5vh;
    font-size: 42px;
}


div#moon_phase {
    position: absolute;
    left: 41vw;
    bottom: 41vh;
    height: 13vh;
    font-size: 7vw !important;
}

/*placeholders */

/* fact */

[id*='fact_']    {  bottom: 17vh; }
[id*='forecast_']{  bottom: -2vh; }


/* div[id*=_temp] {
    left: 0vw;
    color: #dd0000  !important;
} */


div#temp 
{
    position: absolute;
    left:32vw;
    bottom:0vw;
}

/* Temp */
 
div#temp div{ color: #ff4e07  !important; font-size: 11vw;}
div#fact_feels_like {  left: 10vw; font-size: 7vw !important; bottom: 19vh ;}

div#forecast_1_feels_like {   left: 10vw; font-size: 7vw !important; bottom: -0.5vh ;}

div[id*=pressure_mm]{  left: 15vw; color: #31e378 !important;}


/* Humidity */

div#humidity 
{
    color: #55ccff !important;
    position: absolute;
    left:2vw;
    bottom:0vw;
}

div#humidity div
{
    color: #55ccff !important;
}


div[id*=prec_prob] {
    right: 0vw;
    width: 15vw;
    height: 10vh;
    text-align: center;
    color: #a0ffef !important;
    font-size: 8vw !important;
    
}

div[id*=prec_prob].v100
{
    font-size:6vw !important;
}

div#fact_prec_prob { top: 7vh}
div#forecast_1_prec_prob {top: 21vh}

/* wind speed direction*/

div#fact_wind_speed       {    top: 1vw;}
div#forecast_1_wind_speed {    top: 13vw;}

div[id*=wind_speed] {
    right: 21vw;
    width: 5vw !important;
    text-align: center !important;
    font-size:9vw !important;
    color: #aaaaaa !important;
}



div#fact_wind_dir_a        {    top: 0vw;  left: 59vw;  }
div#forecast_1_wind_dir_a  {    top: 10vw; left: 59vw; }

div[id*=_wind_dir_a]  {
    width: 13vw;
    height: 13vw;
    opacity: 90%;
    background: url("/static/images/compass_a.png") no-repeat;
    background-size: 12vw auto;
}



/* div[id*=_wind_dir_b] {
    width: 10vw;
    height: 10vw;
    background: url("/static/images/compass_b.png") no-repeat;
    background-size: 10vw auto;
} */


img[id*=condition] {
    right: 10.5vw;
    opacity: 0.9;
    width: 10vw;
    display: block;
    z-index: 0;
    position: absolute;
}

img#fact_condition {    top:1.5vh;}
img#forecast_1_condition {    top:21.5vh;}



#sunrise   {left:2vw;  top: 2vh; font-size: 5vw !important;}
#daylight  {left:23vw; top: 2vh; font-size: 5vw !important;}
#sunset    {left:42vw; top: 2vh; font-size: 5vw !important;}



[id*= popup] {position: absolute;}

#open-popup, #close-popup{
    right: 10vw;
    height: 10vh;
    width: 20vw;
    background: #ffffff22;
    border-radius: 3vw;
    z-index: 10000;
    border: solid 0px red ;
}

#popup, #overlay { display: none; }

#volumeChart { 
    width: 46vw !important; 
    height: 20vh !important; 
    position: absolute;
    top: 32vh;
    right: 0vw;}

/* #overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.1); z-index: 999;
    display:none;
} */


#volumeChart.fullscreen_on {
    position: fixed !important;
    /* inset: 0 !important; */
    top: 0vh;
    width: 100vw !important;
    height: 100vh !important;
    background: #000000cc; 
}