/*VARS*/

/******* FONT */
@font-face{
    font-family: "Atlanta";
    src: url('../fonts/Atlanta_.woff');
}

/******* COLORS */
:root {
    --air_quality_color: #29ABE2;
    --temperature_color: #A5DFDF;
    --atmospheric_pressure_color: #8CC63F;
    --noise_color: #D4455B;
    --humidity_color: #CCCCCC;
    --light_color: #F9CA01;
}

/***************************/

html, body {
    height: 100%;
}

body{
    font-family: 'Atlanta';
    font-size: 20px;
    color: #969696;
}



/******* CHART PANEL */
.main_panel_container{
    background: url('../images/v3/TIS_2.png') no-repeat top right;
    background-size: 15%; 
}

@media (max-height: 700px) and (max-width: 992px){ 
    .main_panel_container{
        width: 100vw;
        height: 600px !important;
        background: url('../images/v3/TIS_2.png') no-repeat top right;
        background-size:15%;
    }
    .chart_container_aq:nth-child(1){
        margin-top: 6%;
        position: relative;
        height: 250px;
    }
    .chart_container_aq:nth-child(2){
        margin-top: 1%;
        position: relative;
        height: 250px;
    }
    .chart_container{
        margin-top: 8%;
        position: relative;
        height: 450px;
    }
}

@media (max-height: 700px) and (min-width: 993px){ 
    .main_panel_container{
        width: 100vw;
        height: 57vh;
        background: url('../images/v3/TIS_2.png') no-repeat top right;
        background-size:12%;
    }
    .chart_container_aq{
        margin-top: 3%;
        position: relative;
        height: 49vh;
    }
    .chart_container{
        margin-top: 3%;
        position: relative;
        height: 49vh;
    }
}

@media (min-height: 701px) and (max-width: 992px){ 
    .main_panel_container{
        width: 100vw;
        height: 75vh;
        background: url('../images/v3/TIS_2.png') no-repeat top right;
        background-size:15%;
    }
    .chart_container_aq:nth-child(1){
        margin-top: 6%;
        position: relative;
        height: 32vh;
    }
    .chart_container_aq:nth-child(2){
        margin-top: 1%;
        position: relative;
        height: 32vh;
    }
    .chart_container{
        margin-top: 8%;
        position: relative;
        height: 60vh;
    }
}

@media (min-height: 701px) and (min-width: 993px){ 
    .main_panel_container{
        width: 100vw;
        height: 59vh;
        background: url('../images/v3/TIS_2.png') no-repeat top right;
        background-size:15%;
    }
    .chart_container_aq{
        margin-top: 8%;
        position: relative;
        height: 40vh;
    }
    .chart_container{
        margin-top: 8%;
        position: relative;
        height: 45vh;
    }
}

#chart_columns_container {
    height: 100%;
}


/******* REAL TIME VALUES PANEL */
.real_time_values_main_container{
    width: 100vw;
    background-color: #f0f0f0;
    min-height: 41vh;
}

.real_time_values_box{
    margin-top: 2%;
    margin-bottom: 1%;
}

.box_info{
    text-align: center;
    opacity: 0.6;
}

.img_container{
    height:110px;
}

.param_img{
    width: 80px;
    -webkit-transition:0.5s;
}

.param_img.clicked{
    width: 110px;
}

.name_container{
    margin-top: 3%;
    height: 56px;
}

/******* AIR QUALITY */
#air_quality_name_container{
    color: var(--air_quality_color);
}

#air_quality_box_tvc_container{
    margin-top: 14%;
}

#air_quality_co2_name, #air_quality_tvc_name{
    font-weight: 800;
}

#air_quality_co2_value_container, #air_quality_tvc_value_container{
    line-height: 2;
    background-color: var(--air_quality_color);
    border-radius: 6px;
    color: white;
    font-weight: 800;
}

#air_quality_co2_unit_container, #air_quality_tvc_unit_container{
    font-size: 16px;
}

/******* TEMPERATURE */
#temperature_name_container{
    color: var(--temperature_color);
}


/******* ATMOSPHERIC PRESSURE */
#atmospheric_pressure_name_container{
    color: var(--atmospheric_pressure_color);
}


/******* NOISE PRESSURE */
#noise_name_container{
    color: var(--noise_color);
}


/******* HUMIDITY PRESSURE */
#humidity_name_container{
    color: var(--humidity_color);
}


/******* LIGHT PRESSURE */
#light_name_container{
    color: var(--light_color);
}