@media all and (orientation:portrait) {
 /* Styles for Portrait screen */
    #chart_buttons_container{
        flex-direction: column;
      
        display: flex;
        width: 100%;
        height: 100%;
    }

    .button {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        text-align: center;
        text-decoration: none;

        font-size: 40;
        width: 100%;
        height: 100%;
    }


    .button_div{
       padding-left: 10px;
       padding-right: 10px;
       width: 25%;
    }
    #buttons_div{
        height: 100px;
        width: 100%;
        display: flex;
    }
    #chart_div{
        width: 100%; 
        height: 100%;

    }
    #data_div {
        height: 120px;
    }     
    #data_div .data_series {
        
        display: flex;
        width: 33%;
        flex-direction: column;
    }
    .seriesName {
    
        width: 100%;
        height: 40%;
        font-size: 40;
        text-align: center;

    }
    .seriesVALUE {
        width: 100%;
        height: 60%;
        font-size: 60;
        text-align: left;

    }

    
}

@media all and (orientation:landscape) {
 /* Styles for Landscape screen */

    #chart_buttons_container{
       display: flex;
       width: 100%;
       height: 100%;
   }

    #buttons_div{
        width: 200px;
        height: 100%;
    }
    #chart_div{
        width: 100%;
        height: 100%;
    }
    .button_div{
        height: 20%;
        width: 100%;
        margin-top: 10%;
        margin-bottom: 10%;
    }
    .button {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        text-align: center;
        text-decoration: none;

        font-size: 40;
        width: 100%;
        height: 100%;
        
    }
    #data_div {
        height: 60px;
    }

    #data_div .data_series {

        display: flex;
        width: 33%;
    }
    
    .seriesName {

        width: 50%;
        
        height: 100%;
        font-size: 40;
        text-align: right;
    
    }
    .seriesVALUE {
        width: 50%;
        height: 100%;
        font-size: 40;
        text-align: left;

    }
    
    

    
}
body {
    text-size-adjust: none;
    margin:0;
    padding:0;
    }
html, body {
    height:100%;
    width:100%;
}
.loaded_button{
    background-color: lightgreen; /* Green */
}


#container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#data_div {
    
    width: 100%;
    display: flex;
}






#data_div .lastDateValue {
    
    
    text-align: left;
}



#bottom_div {
    
    width: 100%;
    height: 50px;
    
}

#bottom_div .cont{
    display: flex;
    width: 100%;
    height: 50px;
    font-size: 35;
    position:absolute;                  /* added */
    bottom:0;                           /* added */
    left:0;                           /* added */
}

    
#lastDataValueHeader {
    
}

.calendar_container {
    
    
    display: none;
    z-index:999;
    position: absolute;
    
}

.calendar_container .ui-datepicker {
    
    width: 100%;
    height: 100%;
    
    
}
.calendar_container .ui-datepicker td a
{    
 
}

.ui-icon {
  -ms-transform: scale(2); /* IE 9 */
  -webkit-transform: scale(2); /* Chrome, Safari, Opera */
  transform: scale(2);
}


input[type='checkbox'] {
    width:45px;
    height:45px;
}