/* thermostatgauge.css */
/* Global block of an indicator*/
@media all {

    .flexcenter {
        display: flex;
        justify-content: center;
        align-items: center;
        border:1px dotted red;
        padding-left:2px;
        padding-right:2px;
    }
    .flexleft {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border: 1px dotted orange;
    }
    .flexright {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        border: 1px dotted blue;
    }

    .flexcentertop {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        border: 1px dotted green;
    }
    .flexcenterbottom {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        border: 1px dotted green;
    }

    div.gauge {
        border: solid;
        border-color: #292929;
        display: inline-block;
        overflow: hidden;
        position: relative;
        border-radius:40px;
    }
        /***** Text *****/
        div.gauge .icontext {
            font-size: 20px;
            text-align: center;
            color: white;
            position: absolute;
        }
        /***** Text *****/

        /***** Icons *****/
        div.gauge .iconcommon {
            height: 48px;
            width: 48px;
        }

        /***** Icons *****/

        /***** Current *****/
        div.gauge .ctcommon2 {
            font-size: 96px;
            text-align: center;
            color: white;
        }
        div.gauge .ctcommon {
            font-size: 96px;
            text-align: center;
            color: white;
           
        }
        div.gauge .currentunit {
            font-size: 48px;
            text-align: center;
            color: white;
        }

        div.gauge .currentunit2 {
            font-size: 48px;
            text-align: center;
            color: white;
            padding-bottom: 30px;
        }
        /***** Current *****/


        /***** Setpoint *****/
        div.gauge .setpoint {
            font-size: 48px;
            color: white;
        }

        div.gauge .setpointunit {
            font-size: 24px;
            color: white;
        }
        /***** Setpoint *****/

        /***** Fanspeed *****/
     
        div.gauge .fanspeed {
            font-size: 48px;
            text-align: center;
            color: white;
        }
        div.gauge .fanspeed0 {
            font-size: 18px;
            text-align: center;
            color: white;
        }
        div.gauge .fanspeed100 {
            font-size: 18px;
            text-align: center;
            color: white;
        }

        div.gauge .fanspeedauto {
            font-size: 18px;
            text-align: center;
            color: white;
        }

        /***** Fanspeed *****/

        div.gauge .orb {
            left: 3%;
            bottom: 3%;
        }
 }


@media (min-width:500px) and (min-height:800px) {
    div.gauge .icontext {
        font-size: 28px;
        line-height:1;
    }
    div.gauge .iconcommon {
        height: 64px;
        width: 64px;
    }
    div.gauge p {
        font-size:32px;
        line-height:1;
    }

}

    /******** REVISED calculated positioning of information  **************/
    div.gauge {
        /*width: calc(100vw - 50px);*/
        width:100%;
        height: calc(100vh - 100px);
        min-width: 350px;
        min-height: 500px;
        font-size: 1.25rem;
    }

    @media(max-width: 400px) {
        div.gauge {
            font-size:0.75rem; 
        }
    }
    div.gauge .currenttemp {
        font-size: 144px;
    }

    div.gauge .currenttempsingle {
        font-size: 120px;
    }

    div.gauge .currenttempsingleneg {
        font-size: 120px;
    }

    div.gauge .currenttempneg {
        font-size: 90px;
    }


    div .gauge .currentunit {
    }

    div.gauge .currenthumid {
        font-size: 24px;
        text-align: center;
        color: white;
    }

    @media (min-height:800px) {
    }

    @media (min-width:801px) {
        div.gauge {
            width: calc(100vw - 50px - 225px);
        }


            div.gauge .currenttempneg {
                font-size: 90px;
            }

            div.gauge .currenttempsingleneg {
                font-size: 120px;
            }
    }