@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;

}

@viewport {
    width: 1920px;
    height: 1080px;
}
  

.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;
    min-height: 900px;
    min-width: 1900px;
    font-family: 'nexa_lightregular', Arial, sans-serif;
    font-weight:bold;
    font-style:normal;
}

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

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

    body > .maincontainer {
        margin-left: 0px;
        margin-top: 30px;
        margin-right: 0px;
        width: 1920px;
        border: 15px solid white;       
        padding: 0px;
        
       
        /*background-color: white;*/
        position: relative;
    }

.container .text-muted {
    margin: 20px 0;
}

/*Nav bar stuff begin*/

.navbar {
    margin-bottom: 20px;
    height: 110.422px;
    background-color: #ffffff;
}

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

    .navbar-brand > img {
        height: 98.828px;
        padding: 0px;
        width: auto;
        position: absolute;
        left: 40px;
        top: 10px;
        z-index: 1000;
    }

    .logo3 {
        height: 58.13px;
        padding: 0px;
        width: 300.8px;
        position: absolute;
        left: 1200px;
        top: 2vh;
        z-index: 1000;
    }
   

.nav > li > a {
    padding-top: 30px;
    padding-bottom: 30px;
}

.navbar-toggle {
    padding: 10px;
    margin: 25px 15px 25px 0;
}

.navgrid {
    text-align: right;
    position: absolute;    
    top: 0px;
    right:40px;
}
/*Nav bar stuff end*/
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
}

    .footer > .container {
        padding-right: 15px;
        padding-left: 15px;
    }

code {
    font-size: 80%;
}

img {
    max-width: 100%;
}

/* pie chart */
#piechart {
    text-align: left;
    position: absolute;
    left: -50px;
    top: 35px;
    z-index: 1000;
    width: 650px;
    height: 400px;
    float: left;
}

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



/*Meter stuff begin*/ 
.metertag {
    text-align: left;
    float: left;
    position: absolute;
    left: 80px;
    top: 360px;
    z-index: 1000;
}

.graphpanel {
    position: absolute;
    top: 35px;
    left: 550px;
    width: 1150px;
    height: 500px;
    float: left;
}

.chartwrapper {
    width: 1150px;
    height: 420px;
    padding: 5px 20px 0px 0px;
}


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

.pointdiv {
    color: #3D8AAD;
    line-height: 45px;
    font-size: 45px;
}

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

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

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

.metertitle {
    font-size: 18px;
    color: black;
}

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

.metersize {
    width: 370px;
    height: 370px;
    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: 15px;
    color: #385DAE;
    font-weight: bold;
}

.time {
    font-size: 24px;
    color: #3D8AAD;
    font-weight: bold;
}

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

img.drone {
    width: 1900px;
    height: 620px;       
}


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

.radiodrone{
    position: absolute;
    top: 650px;
    left: 800px;
    float: left;
}

input[type='radio'] {
    -webkit-appearance:none;
    width:20px;
    height:20px;
    border:1px solid darkgray;
    border-radius:50%;
    outline:none;
    box-shadow:0 0 5px 0px gray inset;
    margin-left: 30px;
}
input[type='radio']:hover {
    box-shadow:0 0 5px 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: 1890px;
    /*width: 1830px;*/
    height: 700px;       
    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: 25px;
    left: 35px;
    font-size: 18px;   
}

#buildingdropdowntext{
    font-size: 18px;
}

.buildinfo{
    position: absolute;
    top: 100px;
    left: 35px;   
}
.buildinginforow{
    font-size: 18px;
    font-weight: bold;
    padding-bottom:10px;
    padding-left:0px;   
}
.projectupgrades{
    padding-top:10px;
    font-weight: bold;
    padding-bottom:10px;
    padding-left:30px; 
    font-size: 18px;
}
.buildinginfolabel{
    font-weight: bold;
}

.buildinfovaluetext{
    font-size: 16px;
}

.energydata{
    font-size: 18px;
    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: 18px;
    font-weight: bold;
    
    color: rgb(89, 156, 42); 
}

.homefooter{
    padding-bottom:23px;
    padding-top:23px;
    position: absolute;
    top: 705px;
    left: 450px;
    
}

.btn-selected {
    color: #fff;
    background-color: #9DC349;
    border-color: #9DC349;
    padding: 10px 16px;
    font-size: 20px;
    line-height: 1.3333333;
    border-radius: 6px;
}

.meterdivpadding {
    padding-left: 0px;
}

.btn-custom {
    color: rgb(8, 8, 8);
    background-color: white;
    border-color: rgb(8, 8, 8);
    padding: 10px 16px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.3333333;
    border-radius: 6px;
}

    .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: 50px;
    padding: 0px;
    width: 50px;
    top: 0px;
    z-index: 1000;
}

#percentagechange {
    position: absolute;
    top: 550px;
    left: 1160px;
    width: 415px;
    height: 100px;
    padding-top: 16px;
    float: left;
        
}

.percentagechangetitle {
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-weight: bold;
}

#percentagechangeimagediv{
    width: 100px;    
    float: left; 
    padding-right: 40px;
    padding-top: 25px;
}

#percentagechangetextdiv{
    width: 200px;
    float: left;
}

#percentagechangevalue{
    font-size: 30px;
    font-weight: normal;
    font-style: normal;
    font-weight: bold;
}

.percentagechangevalue{
    font-size: 30px;
    font-weight: normal;
    font-style: normal;
    font-weight: bold;
}


#whatdoesthismeanimage {
    height: 50px;
    padding: 0px;
    width: 50px;
    top: 0px;
    z-index: 1000;
}

#whatdoesthismean {
    position: absolute;
    top: 550px;
    left: 550px;
    width: 500px;
    height: 100px;
    padding-top: 16px;
    float: left;    
}

.whatdoesthismeantitle {
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-weight: bold;
}

#whatdoesthismeanimagediv{
    width: 100px;    
    float: left; 
    padding-right: 40px;
    padding-top: 25px;
}

#whatdoesthismeantextdiv{
    width: 400px;
    float: left;
}

#creditdiv{
    position: absolute;
    padding-top:15px;
    top: 625px;
    left: 1720px;
    width: 150px;
    height: 100px;    
}

#chartmenu span {
    text-decoration: none;
    padding-bottom: 2px;
    padding-top:10px;
    padding-left: 7px;
    padding-right: 7px;
    text-align: right;
    cursor: pointer;
}

.hidden {
    display: none;
}

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

.timeframebar {
    text-align: center;
    font-size: 16px;
}

.timeframearrows {
    font-size: 20px;
    display: inline;
}

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

.panelmenu {
    height: 50px;
}

#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:10px;
    margin-left: 10px;
}

#timecontainer{
    position:absolute;
    left:1700px; 
    top: 19px;
}

#temp{
    position:absolute;
    left:1550px; 
    top: 19px;
}

#insidetext{
    margin-right:15px;
}
#indoortemp{
    margin-right:15px;
}

.footermessage {
    width: 1700px;
    font-size: 17px;
    float: left;
    line-height: 10px;
    position: absolute;
    left: 85px;
}
.sitename {
    width: 750px;
    font-size: 40px;
    float: left;
    line-height: 40px;
    position: absolute;
    left: 155px;
    top: 10px;
}

.sitetagline {
    width: 500px;
    font-size: 18px;
    float: left;
    line-height: 40px;
    position: absolute;
    left: 155px;
    top: 77px;
}