/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}


/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }

    /* #fluid-comparison{
        padding-right:40px;
        padding-left:405px;
    }
        */
}


/* EnergyLogs Page */
#elogtable{
    margin-top: 4px;
}

#mlistheader{
    min-height:100px;
}

.side-fixed {
    flex: 0 0 260px;
    padding-left:15px;
}

.fixed-w-280{
    min-width:280px;
    max-width:280px;
    padding-right:0px;
}

.fixed-w-260 {
    min-width: 270px;
    max-width: 270px;
    padding-right: 0px;
}

/* Monthly Comparison Page */
.page-content-div {
    margin-top: 15px;
    margin-right: 15px;
}

#MonthCompare {
    width: calc(100vw - 215px);
}


#bar-chart{
    height:100%;
    width:100%;
}

#line-chart {
    height: 100%;
    width: 100%;
}

#chart-panel {
    height: calc(100vh - 250px);
}

#chart-elog {
    min-height:100%;
}

.fluidrowheight {
    height: calc(100vh - 250px);
}

#chart-bldg {
    min-height: 100%;
}

.fluidrowwidth {
    width: calc(100vw - 500px);
}

.mlisting {
    min-height: calc(100vh - 280px);
}


/* Elog-Main Content div-row*/
.fluid-row-width {
    width: calc(100vw - 10px);
}

#panel-elog-right {
    width: calc(100vw - 340px);
}

#panel-bldg-right {
    width: calc(100vw - 340px);
}

#panel-bldgcomp-right {
    width: calc(100vw - 340px);
}

#chart-bldgcomp {
    min-height: 100%;
}

#area-chart {
    height: 100%;
    width: 100%;
}

/* default page divs */
.firstrowheight {
    height: 40vh;
    min-height:250px;
}


#sub-bar-chart {
    height: 100%;
    width: 100%;
}

#Demandtable td{
    width:120px;
}

canvas#DmdGaugeSub{
    width:100% !important;

}

#ah-pie-chart {
    height:100%;
    width:100%;
    max-width:35vh;
}

#oat-chart {
    /*height: 25vh;*/
    width: 100%;
}
/* FuelCell page divs */
    .centerimg {
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:99%;
}

.image-fluid {
    display: block;
    width: auto;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.stroke-dashed {
    stroke:#999;
    stroke-width:3;
    stroke-dasharray:2,3;
    fill:none;
}

.stroke-sunarc {
    /*transform-origin: 500px 450px;
    transform: scaleX(-1);*/
    stroke: #fcdb33;
    stroke-width: 3;
    stroke-dasharray: 1257;
    stroke-dashoffset: 1257;
    fill: none;
}

.svgtext{
    font-size: 1.5em;
    fill:white;
}

.cls-1 {
    fill: #fcdb33;
}

#sunarc {
    /*background-color:midnightblue;*/
    background-color:black;
    padding: 0px;
}

.backgroundsky{
    background-color:rgba(0,191,255,1);
    border:none;
}

.min-wdth260{
    min-width:260px;
}

.sunline {
    stroke: #fcdb33;
    stroke-linecap: round;
    stroke-width: 3;
}

.zeroline {
    stroke:darkslategray;
    stroke-linecap: round;
    stroke-width: 3;
}

.panel-backcolor-opacity {
    background-color: rgba(62, 62, 62, 0.3);
}

.footer {
    position:absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
}


.stroke-gray {
    stroke: gray;
    stroke-width: 30;
    stroke-linecap: round;
    fill: none;
}

.stroke-zero-line {
    stroke: gray;
    stroke-width: 30;
    stroke-linecap:butt;
    fill: none;
}

.stroke-grad {
    transform-origin: 125px 125px;
    transform: scaleX(-1);
    stroke-width: 30;
    stroke-linecap: round;
    fill: none;
    transition: stroke-dashoffset 0.5s;
}

.stroke-zero {
    transform-origin: 125px 125px;
    stroke-width: 30;
    stroke-linecap:round;
    fill: none;
    transition: stroke-dashoffset 0.5s;
}

@media (min-width: 992px) {
    .col-md-offset-1-and-half {
        margin-left: 12.5%;
    }
}

.svgtext {
    font-size: 2em;
    font-weight: bold;
    fill: whitesmoke;
}

.svgtextzero {
    font-size: 1.25em;
    font-weight: bold;
    fill: whitesmoke;
}

.weatherwiget{
    position:fixed;
    bottom:98px;
}

.featureimgheight {
    height: calc(100vh - 300px);
}

.image-features {
    position: absolute;
    top: 49px;
    left: 16px;
    bottom: 16px;
    right: 16px;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url(../images/BldgImages/buckleyfeatures.jpg)
}

.image-winter {
    display:none;
    position: absolute;
    top: 50px;
    left: 16px;
    bottom: 19px;
    right: 16px;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url(../images/BldgImages/winter.jpg)
}

.image-summer {
    display: none;
    position: absolute;
    top: 50px;
    left: 16px;
    bottom: 19px;
    right: 16px;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url(../images/BldgImages/summer.jpg)
}

.buttons-cetner {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: auto;
}

.panel-biggerfont {
    font-size:1.25em;
}

#sunpos-popup {
    display: none;
    position: absolute;
    top: 95px;
    right: 440px;
    z-index: 1;
    animation:ease-in-out;
}

#netzero-popup {
    display: none;
    position: absolute;
    top: 95px;
    left: calc(100vw *0.5 - 290px);
    z-index: 1;
    animation: ease-in-out;
}