@font-face {
    font-family: 'nexa_lightregular';
    src: url('/fonts/nexalight/nexa_light-webfont.woff2') format('woff2'),
         url('/fonts/nexalight/nexa_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


text{
    font-size:1.2vh !important;
}
  
.icon-clear-day{
    content: "1";
} 
.icon-clear-night{
    content: "6";
} 
.icon-rain{
    content: "I";
} 
.icon-snow{
    content: "I";
} 
.icon-sleet{
    content: "I";
} 
.icon-wind{
    content: "E";
} 
.icon-fog{
    content: "Z";
} 
.icon-cloudy{
    content: "3";
} 
.icon-partly-cloudy-day{
    content: "A";
} 
.icon-partly-cloudy-night{  
    content: "a";
}

html {
    position: relative;    
    font-family: 'nexa_lightregular', Arial, sans-serif;
    font-weight:bold;
    font-style:normal;
    position: relative;
    min-height: 100%;
}

#desktopmeterbuttons {
    position: absolute;
    top: 610px;
    left: 450px;
    width: 17vw;
    height: 9vh;
    padding-top: 16px;
    float: left;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 1vh;
    padding-top: 4vh;
    margin-right: 0px;
    font-family: 'nexa_lightregular', Arial, sans-serif;
    background-color: whitesmoke;   
    
}

    body > .maincontainer {
        margin-left: 0px;
        margin-top: 6.5vh;
        margin-right: 0px;
        width: 99.5vw;
        height:100%;
        border: 2vh solid white;       
        padding: 0px;        
        
       
        /*background-color: white;*/
        position: relative;
    }

    .container .text-muted {
        margin: 1.5vh 0;
    }

/*Nav bar stuff begin*/

.navbar {
    margin-bottom: 1.5vh;
    height: 11.5vh;
    background-color: #ffffff;
    min-height: 0vh;
}

.navbar-brand {
    padding: 0px;
    margin: 0px;
}

.navbar-brand > img {
    height: 10.2vh;
    padding: 0px;
    width: auto;
    position: absolute;
    left: 2.5vw;
    top: 1vh;
    z-index: 1000;
}

.navgrid {
    text-align: right;
    position: absolute;    
    top: 0px;
    right:2.0vw;
}
/*Nav bar stuff end*/

img {
    max-width: 100%;
}

#temp{
    position:absolute;
    left:80vw; 
    top: 2vh;
}

#insidetext{
    margin-right:1vw;
}
#indoortemp{
    margin-right:1vw;
}

.logo2{
    height: 7.5vh;
    padding: 0px;
    width: auto;
    position: absolute;
    left: 78vw;
    top: 1vh;
    z-index: 1000;
}

.logo3 {
    height: 6vh;
    padding: 0px;
    width: 15vw;
    position: absolute;
    left: 62vw;
    top: 2.2vh;
    z-index: 1000;
}
/* pie chart */
#piechart {
    text-align: left;
    position: absolute;
    left: -2.5vw;
    top: 3.2vh;
    z-index: 0;
    width: 33.9vw;
    height: 40vh;
    float: left;
}

#pieexport{
    text-align: left;   
    position: absolute;
    left: 25.6vw;
    top: 4vh;
    z-index: 1010;    
    background-color: #ffffff;
    color: black; 
    opacity: 1;
}


#pieexport a{
    height:4vh; 
    font-size:.8vw !important;    
}

#mainexport a{
    height:4vh; 
    font-size:.8vw !important;    
}




/*Meter stuff begin*/ 
.metertag {
    text-align: left;
    float: left;
    position: absolute;
    left: 4.2vw;
    top: 36.3vh;
    z-index: 1000;
}

.graphpanel {
    position: absolute;
    top: 3.3vh;
    left: 28.6vw;
    width: 60.5vw;
    height: 52.8vh;
    float: left;
}

.panel{
    background-color: white;
}

.panel-default>.panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.chartwrapper {
    width: 60.5vw;
    height: 44vh;
    padding: .7vh 1.3vw 0px 0px;
}


.buttons {
    position: absolute;
    top: 1vh;
    right: 1vh;
}

.pointdiv {
    color: #3D8AAD;
    line-height: 4vh;
    font-size: 2.5vw;
}

.divinline {
    display: inline-block;
    vertical-align: top;
}

.meterlowandhigh {
    font-size: .55vw;
    line-height: 0px;
}

.meterlowandhighvalue {
    font-size: .8vw;
    line-height: 0px;
}

.metertitle {
    font-size: .9vw;
    color: black;
}

.inbetweenhighlow {
    margin: .2vh;
    padding: 0px;
    border: 0px;
    line-height: 0px;
}

.meterbetweenwords{
    margin-left: 1vw;
}

.metersize {
    width: 19.8vw;
    height: 37vh;
    float: left;
}

/*Meter stuff end */


.round-button {
    width: 80px;
    height: 80px;
    /*padding-bottom: 10%;*/
    border-radius: 50%;
    border: 2px solid #f5f5f5;
    overflow: hidden;
    box-shadow: 0 0 3px gray;
    margin: 0 auto;
    cursor: pointer;
}

.round-button-wind {
    background: #339545;
}

.round-button-solar {
    background: #385DAE;
}

.round-button-building {
    background: #C42F2C;
}

.round-button-wind:hover {
    background: #80b17a;
}

.round-button-solar:hover {
    background: #7c7cbb;
}

.round-button-building:hover {
    background: #d6785f;
}

.round-button > selected{
    background: #262626;
}


.round-button img {
    display: block;
    width: 80px;
    height: 80px;
    padding: 5%;
    padding-bottom: 8px;
}

.daydate {
    font-size: .8vw;
    color: #385DAE;
    font-weight: bold;
}

.time {
    font-size: 1.3vw;
    color: #3D8AAD;
    font-weight: bold;
}

.weathericon {
    color: white;  
    font-size: 5vw;
    font-weight: normal;
    font-style: normal;
    line-height: .2vh;
    text-transform: none;
    padding: 0;
    border: 0;
    margin: 0px auto;
}

img.drone {
    width: 98vw;
    height: 63.8vh;       
}


.datadronedefault {
    margin-left: 0px; 
    width: 98vw;
    /*width: 1830px;*/
    height: 72vh; 
    display: block;
    background: rgba(255, 255, 255, .75);
} 

.radiodrone{
    position: absolute;
    top: 67vh;
    left: 42vw;
    float: left;
}

input[type='radio'] {
    -webkit-appearance:none;
    width:1vw;
    height:1vw;
    border: .1vh solid darkgray;
    border-radius:50%;
    outline:none;
    box-shadow:0 0 .5vh 0px gray inset;
    margin-left: 1.75vw;    
}

input[type=checkbox], input[type=radio] {
    margin-top: 1.5vh;
    line-height: 3.1vh;
}

input[type='radio']:hover {
    box-shadow:0 0 .5vh 0px orange inset;
    
}
input[type='radio']:before {
    content:'';
    display:block;
    width:100%;
    height:100%;
    /*margin: 20% auto;    */
    border-radius:50%; 
    
    
}
input[type='radio']:checked:before {
    background:#385DAE;    
}


.datadroneclicked {
    width: 98vw;
    /*width: 1830px;*/
    height: 72vh;       
    display: block;
    background: rgba(255, 255, 255, .75);
}

.buttonwidth {
    width: 15vw !important;
    height: 70px;
}


.footerbuttonstext {
    font-size: 17px;
    font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}

.footerbuttons {
    padding-bottom:23px;
    padding-top:23px;
    position: absolute;
    top: 620px;
    left: 500px;   
}

.buildingdropdown{
    position: absolute;
    top: 3vh;
    left: 1.5vw;   
}

.buildingdropdown .btn{
    padding: 1vh 1vh; 
}


#buildingdropdowntext{
    font-size: 1.5vh;
}

.dropdown-menu{
    font-size: 1.5vh;
   
}

.buildinfo{
    position: absolute;
    top: 10vh;
    left: 2.5vw; 
}
.buildinginforow{
    font-size: 1.9vh;
    font-weight: bold;
    padding-bottom: 1vh;
    padding-left: 2.5vw; 
}
.projectupgrades{
    padding-top: 1vh;
    font-weight: bold;
    padding-bottom: 1vh;
    padding-left: 5vw;
    font-size: 1.9vh;
}
.buildinginfolabel{
    font-weight: bold;
}

.buildinfovaluetext {
    font-size: 1.8vh;
}

.energydata{
    font-size: 1.9vh;
    font-weight: bold;
    
    color:rgb(89, 156, 42);  
}

.percentagedown{
    color:rgb(89, 156, 42);  
    font-size: 1.6vw;
    font-weight: normal;
    font-style: normal;
    font-weight: bold;
}

.percentageup{
    color:red;
    font-size: 1.6vw;
    font-weight: normal;
    font-style: normal;
    font-weight: bold;
}

.buildingdata{
    font-size: 1.9vh;
    font-weight: bold;
    
    color: rgb(89, 156, 42); 
}

.homefooter{
    padding-bottom:0px;
    padding-top:0px;
    position: absolute;
    top: 75vh;
    left: 24vw;
    
}

.btn-selected {
    color: #fff;
    background-color: #9DC349;
    border-color: #9DC349;
    padding: 1vh .8vw;
    font-size: 1.1vw;
    line-height: 3vh;
    border-radius: .3vw;
}

.meterdivpadding {
    padding-left: 0px;
}

.btn {
    border: .1vh solid transparent; 
    box-shadow: 0 0.5vh 1vh 0 rgba(0,0,0,.16), 0 0.5vh 2vh 0 rgba(0,0,0,.12);
}
.btn-custom {
    color: rgb(8, 8, 8);
    background-color: white;
    border-color: rgb(8, 8, 8);
    padding: 1vh .8vw;
    font-size: 1.1vw;
    font-weight: bold;
    line-height: 3vh;
    border-radius: .3vw;
}

    .btn-custom:focus,
    .btn-custom.focus {
        color: #fff;
        background-color: #9DC349;
        border-color:rgb(8, 8, 8);
    }

    .btn-custom:hover {
        color: #fff;
        background-color: #9DC349;
        border-color: rgb(8, 8, 8);
    }

    .btn-custom:active,
    .btn-custom.active,
    .open > .dropdown-toggle.btn-custom {
        color: #fff;
        background-color: #286090;
        border-color: #204d74;
    }

        .btn-custom:active:hover,
        .btn-custom.active:hover,
        .open > .dropdown-toggle.btn-custom:hover,
        .btn-custom:active:focus,
        .btn-custom.active:focus,
        .open > .dropdown-toggle.btn-custom:focus,
        .btn-custom:active.focus,
        .btn-custom.active.focus,
        .open > .dropdown-toggle.btn-custom.focus {
            color: #fff;
            background-color: #9DC349;
            border-color: #122b40;
        }

    .btn-custom:active,
    .btn-custom.active,
    .open > .dropdown-toggle.btn-custom {
        background-image: none;
    }

    .btn-custom.disabled:hover,
    .btn-custom[disabled]:hover,
    fieldset[disabled] .btn-custom:hover,
    .btn-custom.disabled:focus,
    .btn-custom[disabled]:focus,
    fieldset[disabled] .btn-custom:focus,
    .btn-custom.disabled.focus,
    .btn-custom[disabled].focus,
    fieldset[disabled] .btn-custom.focus {
        background-color: #337ab7;
        border-color: #2e6da4;
    }

    .btn-custom .badge {
        color: #337ab7;
        background-color: #fff;
    }

.buttons {
    display: none;
}

.weathermobile {
    display: none;
}

#percentagechangeimage {
    height: 5vh;
    padding: 0px;
    width: 2.9vw;
    top: 0px;
    z-index: 1000;
}

#percentagechange {
    position: absolute;
    top: 58vh;
    left: 60vw;
    width: 16vw;   
    padding-top: 1.5vh;
    float: left;
        
}

.percentagechangetitle {
    font-size: .85vw;
    font-weight: normal;
    font-style: normal;
    font-weight: bold;
}

#percentagechangeimagediv{
    width: 5vw;    
    float: left;    
    padding-top: 2.2vh;
}

#percentagechangetextdiv{
    width: 10vw;
    font-size:.7vw;
    float: left;
}

#percentagechangevalue{
    font-size: 1.6vw;
    font-weight: normal;
    font-style: normal;
    font-weight: bold;
}

.percentagechangevalue{
    font-size: 1.6vw;
    font-weight: normal;
    font-style: normal;
    font-weight: bold;
}


#whatdoesthismeanimage {
    height: 5vh;
    padding: 0px;
    width: 2.9vw;
    top: 0px;
    z-index: 1000;
}

#whatdoesthismean {
    position: absolute;
    top: 58vh;
    left: 28.9vw;
    width: 30vw;    
    padding-top: 1.5vh;
    float: left;    
}

.whatdoesthismeantitle {
    font-size: .85vw;
    font-weight: normal;
    font-style: normal;
    font-weight: bold;
}

#whatdoesthismeanimagediv{
    width: 5vw;    
    float: left;    
    padding-top: 2.2vh;
}

#whatdoesthismeantextdiv{
    width: 22vw;
    font-size:.7vw;
    float: left;
    line-height: 2.1vh;
}

#creditdiv{
    position: absolute;
    padding-top:1.6vh;
    top: 65vh;
    left: 89.5vw;
    width: 8vw;         
}

#chartmenu span {
    text-decoration: none;
    padding-bottom: .3vh;    
    padding-left: .3vw;
    padding-right: .3vw;
    text-align: right;
    cursor: pointer;
}

.hidden {
    display: none;
}

.redline {
    border-bottom: red solid .3vh;
    
}

.timeframebar {
    text-align: center;
    font-size: .85vw;
}

.mainchart {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    padding: .5vh 0px .5vh .5vh;
    margin: 0px 0px 0px 0px;
}

.amcharts-balloon-div div{
    font-size:1.3vh !important;
}


.panelmenu {
    height: 4.8vh;
    font-size:.73vw
}

#data{
    display:none;
}

#chartmenu span{color: #000000;}

.timeframecursor
{
    cursor: pointer;
}

#equ{
    position: absolute;
    top: 25px;
    left: 20px;    
    padding-top: 16px;
    float: left;  
    padding-right: 20px;
}

.equheader{
    position: absolute;
    top: 2px;
    left: 20px;    
    padding-top: 16px;
    float: left;  
    padding-right: 20px;
    font-size: 16px;
    font-weight: bold;
}

.footerbtn{
    margin-bottom:.6vh;
    margin-left: .6vw;
}

#timecontainer{
    position:absolute;
    left:88.5vw; 
    top: 2vh;
}

.footermessage{
    width: 90vw;
    font-size:.9vw;
    float: left;
    line-height: 2.1vh;
    position:absolute;
    left:5vw; 
    
}

.sitename{
    width: 40vw;
    font-size:2vw;
    float: left;
    line-height: 4.1vh;
    position:absolute;
    left:10.5vw; 
    top:1vh;
    
}

.sitetagline{
    width: 30vw;
    font-size:.9vw;
    float: left;
    line-height: 2.1vh;
    position:absolute;
    left:10.5vw; 
    top:9vh;
    
}

.amcharts-label-PRODUCTION_TITLE{
    position:absolute;
    left:10.5vw; 
}

.amcharts-graph-AmGraph-3{
    margin-right:15px;
}

.amcharts-graph-AmGraph-1{
    margin-right:15px;
}
.amcharts-graph-AmGraph-2{
    margin-right:15px;
}