/* ============================== RESPONSIVE LAYOUT CSS ========================= */
* {
	/*margin:0px;
    padding:0px;*/
    font-family: 'New Rail Alphabet Light', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
html, body {
	padding:0px;
	margin:0px;
	height: 100%;
	line-height:normal;
    font-family: 'New Rail Alphabet Light', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
    min-width:480px;
    /*overflow-x:hidden;*/
}
/*@media all and (max-height:1050px) {
    body {
        zoom: 95%;
    }
}
@media all and (max-height:900px) {
    body {
        zoom: 80%;
    }
}*/
#account-info {
	float:right; text-align:right;
}
#content-container {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: -190px auto -130px auto;
	padding:0px;
	width:100%;
	position:relative;
	/*z-index:2;*/
	max-width:1400px;
}
#content-wrapper {
	margin:20px;   
}
#header-bar {
    width:100%; height:65px; background-color:#707070;color:white;
}
#header-bar-content {
    max-width:1400px; padding:10px 20px 20px 20px; margin:0px auto 0px auto
}
#header-resp {
	width:100%; 
	height:190px;
	position:relative;
	top:0px;
	left:0px;
	z-index:3;
	background-color:#EFEFF0;
}
#header-content {
	margin:0px auto 0px auto;
	color:#4d4d4d;
	max-width:1400px;
	padding:20px;
    height:85px;
}
#header-offset {
	height:190px;
	margin-bottom:30px;
}
#footer {
	margin:0px auto 0px auto;
	width:100%;
	height:130px;
	max-height:130px;
	overflow:hidden;
	position:relative;
	z-index:2;
	background-color:#EFEFF0;	
}
#footer-content {
	margin:20px auto 20px auto;
	color:#999;
	max-width:1400px;
    padding:0px 20px 0px 20px;
}
#footer-offset {
	height:130px;
	margin-top:30px;
	clear:both;
}


/* ================= Every-Page Elements ==================== */

/* ----------------- Navigation Elements -------------------- */
a , a:hover {
   color:#F37021;
}

#account-menu {
    float:right; width:auto; font-size:12px; margin-bottom:15px;
}
#account-menu-dropdown {
    /*border-right:1px solid #cccccc;   */
}
#account-menu ul {
    list-style:none; padding:0px; margin:0px;
}
#account-menu ul li {
/*    float:left; margin-right:25px;*/    
}
#account-menu ul li a {
    color:#7a7c7e;
    text-decoration:underline;    
}
a.current-selection { 
    color:#5f6062; !important
}
a.current-selection:visited {
    color:#5f6062; !important
}
[class^="icon-"], [class*=" icon-"] {
    background-image:url(/static/bootstrap/img_moved/glyphicons-halflings.png);
}
.dropdown-menu {
    top:auto;
}
.dropdown-menu .divider {
    margin: 8px 1px 1px 0px;
}
.dropdown-menu li {
    border: none; padding-left: 0px; padding-right: 0px; width: 100%
}
#current-location {
    max-width: 250px;
    overflow:hidden;
    float:left;
    text-overflow:ellipsis;   
}
#current-site {
    max-width: 250px;
    overflow:hidden;
    float:left;
    text-overflow:ellipsis;   
}
.location-nav {
    float:right;
    color:#5f6062;
    font-size:11pt;
}
/*
#location.location-dropdown {
    width:250px;
    max-width:250px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}*/
.location-dropdown {
    margin:25px 0px 0px 0px;;
}
.location-dropdown ul {
    list-style: inside none;
    margin:0px;
}
.location-dropdown ul li {
    font-weight:bold;
}
.header-bar-title{
    display:block; font-size:12px; color:#efeff0; margin-bottom:2px;
}
.my-account-menu {
    color: #707070 !important;
}
.my-account-menu:hover {
    color: #FFFFFF !important;
}
#page-menu a div.page-tab {
    display:inline-block; color:#EFEFF0; padding:18px 25px 12px 25px; margin:0px 15px 0px 15px; height:25px; font-size:12pt; text-decoration:none;
}
#page-menu a div.active-tab {
    color:#5F6062 ; background-color:white; font-weight:bold;
}
#page-menu a:hover {
    text-decoration:none;
}
#mobile-page-menu {
    display:none;
    color:#EFEFF0; padding:18px 25px 12px 25px; margin:0px 15px 0px 15px; height:25px; font-size:12pt; text-decoration:none;
}
#mysitecaret {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #F37021;
    content: "";
    display: inline-block;
    height: 0;
    vertical-align: top;
    width: 0;
    margin-left: 2px;
    margin-top: 10px;
}
#location-caret {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #FFFFFF;
    content: "";
    display: inline-block;
    height: 0;
    vertical-align: top;
    width: 0;
    margin-left: 2px;
    margin-top: 7px;
    float:left;
}
.orange-caret {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #F37021;
    content: "";
    display: inline-block;
    height: 0;
    vertical-align: top;
    width: 0;
    /*margin: 6px 25px 0px 5px;*/
    margin: 6px 0px 0px 5px;
    cursor:pointer;
}
#copyright-text {
    position:relative;
    top:10px;
}
#disclaimer {
    position:relative;
    top:20px;
    color:silver;
}
.footer-link {
    padding:2px 15px 0px 15px;
    
}
.footer-link.right-line {
    border-right:1px solid #B2B3B5;   
}
.footer-link a {
    color:#9a9a9a;
}
.site-menu-item {
    position:relative;
    max-width:48%;
    /*min-width:210px;*/
}
#site-menu-container {
    width:100%; height:60px; clear:both; margin-top:10px; text-align:right;
}
.site-menu-label {
    font-size:8pt; margin-bottom:10px;
}
.site-menu-value {
    font-size:10pt; height:20px;
}
.client-site-dropdown/* #site-menu-dropdown */ {
    position: absolute;
    top: 50px;
    left: -10px;
    display: none;
    background-color: #EFEFF0;
    padding: 5px 5px 10px 5px;
    -webkit-box-shadow: 0px 4px 2px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 4px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 4px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 0px 0px 3px 3px;
    moz-border-radius: 0px 0px 3px 3px;
    border-radius: 0px 0px 3px 3px;
    /*max-height: 500px;
    overflow-y: auto;*/
    width: 110%;
    z-index: 1;
}
.client-site-dropdown div /* #site-menu-dropdown div */ {
    padding:5px;
    border-top:thin solid #e3e3e3;
    cursor:pointer;
}
/* #site-menu-dropdown */ .client-site-dropdown div.cur-location {
    font-weight:bold;
    background-color:#d6d6d6;
    cursor:default;
}
/* #site-menu-dropdown */ .client-site-dropdown div:hover {
    background-color:#e3e3e3;
}
/* #site-menu-dropdown */ .client-site-dropdown div.cur-location:hover {
    background-color:#d6d6d6;
}
@media all and (max-width:600px) {
/* ----------------- RESPONSIVE HEADER --------------------------- */
    #site-menu-container{
        text-align:left;
    }
    .client-site-dropdown /* #site-menu-dropdown */ {
        width:100%;
    }
    .site-menu-item {
        width:48%;
        margin-top:10px;
    }
    #account-menu {
        float:none;
        display:block;
        height:30px;
        margin-bottom:0px;
        text-align:left;
    }
    #first-header-link {
        padding-left:0px;
    }
    #content-container {        
        margin: -230px auto -130px auto;        
    }
    #header-resp {
        height:230px;
    }
    #header-content {
        height:125px;
    }
    #header-offset {
        height:230px;
    }
    /*#mobile-page-menu{
        display:block;
    }
    #page-menu {
        display:none;
        position:absolute;
    }
    .active-tab {
        display:none !important;
    }
    #page-menu {
        -webkit-box-shadow: 0px 4px 2px 2px rgba(0, 0, 0, 0.3); 
        -moz-box-shadow: 0px 4px 2px 2px rgba(0, 0, 0, 0.3); 
        box-shadow: 0px 4px 2px 2px rgba(0, 0, 0, 0.3); 
        -webkit-border-radius: 0px 0px 3px 3px;
        moz-border-radius: 0px 0px 3px 3px; 
        border-radius: 0px 0px 3px 3px;
        width:100%;
        background-color:white;
    }*/
}
/* ----------------- Powerstore Status -------------------- */
#powerstore-status {
    max-width:100px;
    max-height:30px;
    padding:12px 10px 12px 10px;
    background-color:rgba(0,0,0,.15);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    float:right;
    margin:-4px 25px 0px 0px;
}
#ps-state {
    font-weight:bold;    
}
.ps-title {
    display:block; font-size:11px; color:#efeff0; margin-bottom:2px;
}
.ps-ready {
    color:#9ce241
}
@media all and (max-width:640px) {
    #account-menu {
        max-width:300px;
        margin-right:0px;
    }
    #account-menu ul li {
        margin-right:0px;
    }
    #powerstore-status {
        position:absolute;
        top:60px; 
        right: 15px;
        margin:0px;
        background-color: rgba(0, 0, 0, .50);
    }
    #my-account-caret {
        margin: 6px 15px 0px 5px;    
    }
}
/* ---------------------- Element Labels --------------------- */
h1{
    border-radius: 4px 4px 4px 4px;
    color: #F37021;
    font-size: 18pt;
    font-weight:bold;
    padding: 3px 0px 0px 6px;
    position: relative;
}
h2 {
    color:gray;
    font-size:10pt;
    font-weight:normal;
    text-transform:uppercase;
    padding-left:6px;
    line-height:normal;
}
.dollar-amount {
    color:#07b388;
    font-size:2em;
}
.period-label {
    margin-top:3px;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.date-label {
    font-size:0.75em;
    color:#666;
    display:block;
}
/* ====================== Content Layout ======================= */
/* ------------------- Dashboard - Conditions ---------------- */
#conditions-container {
    width:96%; height:75px; margin:20px auto 10px 0px;
}
.condition-box { 
    height:100%; background-color:#fafafa; border:1px #eeeeee solid; 
}
#conditions-weath {
    width:59%;
    float:right;    
}
#conditions-econ {
    width:39%;
    float:left;
}
.condition-title {
    width:210px;
    max-width:98%;
    margin:0px auto 0px auto; 
    height:auto; 
    background-color:#ffffff; 
    font-size:8pt; 
    text-transform:uppercase; 
    padding:0px; 
    border:1px solid #eeeeee; 
    color:#666;
}
.condition-econ-item {
    min-width:44%; max-width:44%; height:100%; padding:5px; margin:0px auto 0px auto;
}
#condition-econ-kw {
    float:left; 
}
#condition-econ-kwh {
    float:right;
}
.condition-price {
    font-size:18pt; font-weight:bold; color:#666;
}
.condition-weather {
    min-width:29%; max-width:29%; height:100%; padding:5px; margin:0px auto 0px auto;
}
.condition-label {
    font-weight:bold; font-size:10pt; color:#adadad;
}
.condition-text {
    font-weight:bold; color:#666; width:40%; min-width:40%; float:right; margin-left:10%; text-transform:uppercase; white-space:nowrap;
}
.condition-weather-row {
    width:100%; margin:5px auto 30px auto; clear:both;
}
.condition-weather-row-label {
    width:40%; 
    min-width:40%; 
    max-width:40%;
    float:left; 
    margin-right:10%; 
    text-transform:uppercase;
    clear:left;
}
.vertical-divider-2 {
    height:40px; width:1px; background-color:#d3d3d3; margin:10px 0px 0px 0px;
}
.sun-arrow { display:none; }
.sun-text { display:inline; }

@media all and (max-width:1000px) {
    #conditions-container {
        height:170px;
    }
    #conditions-weath , #conditions-econ {
        width:98%;
        float:none;
        margin:0px auto 15px auto;
        height:75px;
    }    
}
@media all and (max-width:650px) {
    /*.sun-text {display:none;}
    .sun-arrow {display:inline;}
    .condition-weather-row-label.set-rise {
        width:10%;
        min-width:10%;
        max-width:10%;                
    }
    .condition-weather.set-rise {
        width:27%;
        min-width:27%;
        max-width:27%;                
    }
    .set-rise {
        float:left;
    }*/

}

/* ----------------------- Layout Boxes ---------------------- */
.box-35-100 {
    width:35%; height:auto; 
}
.box-65-100 {
    width:65%; height:auto; optimization-valuemargin-bottom:15px;
}
.box-45-100 {
    width:45%; height:auto; margin-bottom:15px;
}
.box-70-100 {
    width:70%; height:auto; margin-bottom:15px;
}
.box-75-100 {
    width:75%; height:auto; margin-bottom:15px;
}
.box-100-100 {
    width:100%; height:auto; clear:both; margin-bottom:15px;
}
.box-100-no-margin {
    width:100%;
}
.box-25-legend {
    width:25%;
}
.right {
    float:right;
}
.left {
    float:left;
}
.hidden {
    display:none;
}
.invisible {
    visibility:hidden;
}
.optimization-box {
    width:94%; margin:15px auto 0px auto;
}
.optimization-title {
    font-weight:bold; text-transform:uppercase; color:#c0c0c0; font-size:9pt;
}
.optimization-value {
    color:#07b388; font-weight:bold; font-size:30pt;
}
.optimization-value.potential {
    color:#c0c0c0; font-size:24pt;
}

/*---------------------- Chart Elements ---------------------- */
.html-reset-zoom {
    margin-top: 10px;
    margin-left: 10px;
    z-index: 200;
    border:1px solid silver;
    cursor:pointer;
    position: absolute;
    font-size: 9pt;
    padding: 4px;
    background-color:#ffffff;
    display:none;
}
.html-reset-zoom:hover {
    color:#ffffff;
    background-color:#F37021;
}
#data-controls {
    width:100%; min-height:50px; position:relative; top:25px; z-index:999;
}
.chart-legend-title {
    text-transform:uppercase; color:#c0c0c0; font-size:9pt; margin-bottom:5px; text-align:left;
}
.chart-legend-wrap {
    margin:-10px 5% 0px 5%;
}
.chart-legend {
    margin-bottom:25px;
    
}
.chart-option {
    border:1px solid #e6e6e6; padding:5px; height:17px; min-width:126px;
}
.chart-option.horz {
    float:left; width:25%; margin-right:5px; height:15px; min-width: 126px; overflow: hidden; text-overflow: ellipsis;
}
.legend-icon { height:100%; }
.legend-icon div {
    height:12px; width:12px; margin-right:10px; border-radius:5px; border:1px solid #e6e6e6; 
}
.clickable , .clickable-plotline {
    cursor:pointer;
}
.seriesHid {
    cursor:pointer;
    background-color:#f4f4f4;
    color:#c0c0c0;
}
.seriesHid .legend-icon {
    opacity:0.3;
}
.legend-text {
    width:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.disabled { 
    opacity:0.5;
}
#cost-chart-summer {
    border-right:1px solid #CCC; margin-right:4%;
}
.chart-button-container {
    margin-left:10px;
}
.chart-button {    
    border:1px solid #e6e6e6;
    text-align:center;
    padding:2px 8px 2px 8px;
    float:left;
    white-space:nowrap;
}
.chart-button.res-l-side , .chart-button.range-l-side {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.chart-button.res-r-side , .chart-button.range-r-side {
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.chart-button.res-mid {
    
}
.data-grouping-disclaimer {
    display:none;
    font-size:8pt; 
    margin:5px 25px 0px auto;
}
@media all and (max-width:970px) {
    #data-controls {
        top:0px;
    }
    .box-75-100 , .box-70-100 {
        width:98%; height:auto; margin:10px auto 30px auto; float:none; clear:both;
    }
     .box-25-legend {
        float:none;
        width:98%;
        margin:10px auto 10px auto;
    }    
    .chart-legend-box , .chart-description-box {
        width:98%;
        margin:10px auto 10px auto;
        float:none;
        clear:both;
    }
    .chart-description-box  {
        position:relative;
        top:10px;
    }
    .chart-legend {
        border:none;
        clear:both;
    }
    .chart-option {
        width:46%;
        float:left;
    }    
}
@media all and (max-width:750px) {  
    .box-45-100 {
        width:98%; height:auto; margin:10px auto 30px auto; float:none; clear:both;
    }
    #cost-chart-summer {
        margin-right:auto;
        border-right:none;
        border-bottom: 1px solid #CCC;
        padding-bottom:25px;
    }
}
@media all and (max-width:615px) {    
    .box-35-100 {
        width:98%; height:auto; margin:10px auto 30px auto; float:none; clear:both;
    }
    .box-65-100 {
        width:98%; height:auto; margin:10px auto 30px auto; float:none; clear:both;
    }    
    .optimization-box {
        border-bottom:1px solid #CCC;
    }
    #curDemand {
        height:300px;
        margin-top:45px;
    }   
}
/* ------------------------ Specific Element Boxes ------------------- */
#alert-box {
    /* max-height:150px; overflow:hidden;width:96%; height:auto; */
    width:94%; height:auto; margin-left:3%;
}
#alerts-count {
    font-weight:bold;
    color:#c0c0c0;
}
#alerts-count.new {
    color:#F37021;
    cursor:pointer;
}
.alert-item {
    width:95%; border-bottom:1px solid #efefef; position:relative;
}
.expandable-arrow {
    width:9px; height:11px; background-image:url(../DST/images/alert-arrows.png); display:inline-block; margin-left:10px;
}
.expandable-arrow.closed {
    background-position:left top;
}
.expandable-arrow.open {
    background-position:right top;
}
.alert-item-inner {
    margin:10px;
    font-size:11pt;
}
.alert-item-inner a {
    font-size:10pt;
}
.alert-overview {
    margin:20px 10px 20px 10px;
}
.alert-close {
    height:100%;
    min-height:50px;
    width:15px;
    margin-left:5px;
}
.alert-close-img {
    position: absolute;
    top: 0%;
    right:5px;
    /*height: 30%;
    width: 50%;*/
    /*margin: -15% 0 0 -25%;*/
    cursor:pointer;
}
#curDemand {
    position:relative; top:-50px;
}
#curDemand {
    height:340px;
}
.arrow-button {
    cursor:pointer;
    width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
    position:relative;
    top:-20px;
    z-index:999;
}
.arrow-left {	
	border-right:10px solid #999999;
    float:left;
    left:30px;
}
.arrow-right {
	border-left:10px solid #999999;
    float:right;
    left:3px;
}
.arrow-left:hover {
    border-right:10px solid #f5a564; 
}
.arrow-right:hover {
    border-left:10px solid #f5a564; 
}
.cost-chart-title {
    text-transform:uppercase; color:#999; padding-left:6px; font-size:8pt;
}
.cost-chart-title.upper {
    text-transform:uppercase; font-size:10pt; margin:15px 0px 0px 0px;;
}
.cost-legend {
    float:right; width:30%;
}
.cost-legend-box {
    width:70%; margin:0px auto 10px auto; background-color:#f4f4f4; border:1px solid #d1d1d1; font-weight:bold;
}
.cost-legend-wrap {
    margin:0px 5px 10px 5px;
}
.cost-legend-title {
    color:white; text-transform:uppercase; padding:2px; border:1px solid #9EAEB0; font-size:7pt; margin:0px auto 3px auto;
}
.costlegend-kw {
    color:#626365;
}
.costlegend-kwh {
    color:#ABABAB;
}
.cost-chart-img {
    height:auto; width:60%; margin:15px;
}
.peak {
    background-color:#074C94;
}
.mid-peak {
    background-color:#16699C;
}
.off-peak {
    background-color:#14B1BA;
}
/* ================================================ DST STYLES ================================================ */
.section-hider {
    font-size:8pt; color:#f0f0f0; cursor:pointer; float:left; position:absolute; z-index: 100000;
}
#result-toggle-list {
    position: absolute;
    top: 53px;
    right: 0px;
    display: none;
    background-color: #707070;
    padding: 5px 10px 10px 10px;
    -webkit-box-shadow: 0px 4px 2px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 4px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 4px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 0px 0px 3px 3px;
    moz-border-radius: 0px 0px 3px 3px;
    border-radius: 0px 0px 3px 3px;
}
#result-toggle-list label {
    cursor: pointer;
}
.list-button {
    color:#0092b6;
    font-weight:bold;
}
.client-locations , .location-address {
    font-size:9pt; color:#999; float:right
}
.create-form-list {
    list-style:none;
    width:100%;
    margin:0px;
    padding:0px;
}
.create-form-list li {
    width:49%; 
    min-height: 50px;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align:top;
    margin-bottom:15px;
}
.general-result-box {
    width: 90%; 
    max-width:538px;
    margin:20px auto 0px auto;
}
.info-box {
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    background-color:#F3F3F3;
    -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0), inset -1px -1px 2px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0), inset -1px -1px 2px 2px rgba(0, 0, 0, 0.05);
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0), inset -1px -1px 2px 2px rgba(0, 0, 0, 0.05);
    margin:0px auto 0px auto;
    padding:20px;
    width: 90%; 
    max-width:500px;
}
.info-box-inner {    
    width:95%; margin:10px auto 12px auto; max-width:900px;
}
.input-div {    
    margin:8px 0px 8px 0px;
    width:100%;
    position: relative;
    left: -8px;
}
legend {
    font-size:11pt; font-weight:bold; color:#666;
}

.location-result {
    margin:1px 3px 1px 3px; padding:3px 15px 3px 0px; border-top: thin solid #cccccc; cursor:pointer;
}
.location-result:hover{
    background-color:#ffffff;
}
.req {
    color:#ff0000;
}
.results a:hover {
    text-decoration:none;
}
.results-title {
    margin:0px 0px 1px 0px; padding:3px 3px 3px 3px; font-weight:bold; color:#cccccc; display:none;
}
.search-result  {
   padding:6px 20px 6px 20px; /*border-bottom: thin solid #CCC;*/ cursor:pointer;
}
a .search-result {
    color:#000000;
}
.search-result:hover {
    background-color:#4fbdd8;
}
.loc-match-item {
    color:#919191; margin-left:20px;
}
.search-result:hover , a .search-result:hover , .search-result:hover .loc-match-item {
    color:#ffffff;
}
.result-hover , .result-hover  .loc-match-item {
    background-color:#4fbdd8;
    color:#ffffff;
}
.result-hover .location-address , .result-hover .client-locations , .search-result:hover .client-locations , .search-result:hover .location-address{
    color:#f5f5f5;
}
.search-result-box {
    margin:5px auto 0px auto;
    padding:0px;
    width:100%;
    overflow-x:hidden;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    border: thin solid #CCC;
}
.small-box {    
    position: relative;
    left: -8px;
}
.error-alert {
    color:#ff4f4f; background-color:#ffdede; border-color:#ffc9c9; padding:5px; display:none
}
.view-all {
    font-size:8pt; 
    color:#0092B6; 
    cursor:pointer;
    margin:5px auto 0px auto;
    padding:0px;
}
.view-all:hover {
    color:#F37021;
}
.stem-input {
    width:90%;
}
.gap {
    cursor:pointer;
}


#filedrag  
{  
    display: none;
    text-align: center;  
    padding: 1em 0;  
    margin: 1em 0;  
    color: #555;  
    border: 2px dashed #bebebe;  
    border-radius: 7px;  
    cursor: default;  
}  
#filedrag.hover  
{  
    color: #F27002;  
    border-color: #F27002;  
    border-style: solid;  
    box-shadow: inset 0 3px 4px #888;  
}  
.stat-cell-large {
    width:50%; display:inline-block; padding:0px 1% 0px 1%;
}
.stat-cell-small {
    width:20%; display:inline-block; padding:0px 1% 0px 1%;
}
.stat-value {
    font-size:12pt; font-weight:bold; color:#07b388; margin-bottom:10px;
}
.stat-row-chart-int {
    cursor:pointer;
    border-top:thin solid #e2eae1;
    padding:5px 0px 5px 0px;
}
.cat-div {
     border-bottom:thin solid #CCC; clear:both;
}
.cat-title {
    padding-left:0px; cursor:pointer;
    font-size: 11pt;
    line-height: 27px;
    margin: 0;
    font-family: inherit;
    font-weight: bold;
    color: inherit;
    text-rendering: optimizelegibility;
    display:inline-block;    
}
.cat-title-text {
    font-size:14pt;
    margin-top:15px;
}
#gap-info .stat-row-chart-int .stat-value {
    color:#ef7272;
}
.stat-row-chart-int:hover {
    background-color:#ffe3e3;
}
.expand {
    cursor:pointer; display:inline-block; font-weight:normal; font-size:10pt; vertical-align:top
}
.stat-group {
    display:inline-block; vertical-align:top; margin:0px 10px 0px 10px;
}
.stat-item {
    padding:10px; vertical-align:top;
}
.stat-label {
    margin:10px 0px 10px 10px;
    width:75px;
    display:inline-block;
}
.stat-item span {
    margin:10px 0px 10px 0px;
}
.clickable-stat {
    cursor:pointer;
}
.clickable-stat:hover {
    background-color:#dbfff6;
}
.clickable-stat.clicked {
    background-color:#cdebf2;
}
.inline {
    display:inline-block;
}
.header-link {
    padding:0px 10px 0px 10px; border-right:thin solid #d6d6d6; display:inline-block;
}
.header-link.last {
    border:none;
}
.modal { 
    width:85% !important;
    max-width:1000px !important;
}
/* ============================= DST STYLES ============================== */
.parser-sample-list {
    list-style-type:none;
}
.parser-sample-list li {
    float:left;
    margin:10px;
    vertical-align: top;
}
#data-info {
    width:95%; margin:-30px 0px 0px -5px; padding: 10px 25px 10px 25px; border:thin solid #b4b4b4; color:#b4b4b4; display:none; font-size:8pt;
}
.loaded-data-info {
    margin-right:2%;
    display:inline-block;
}
.loaded-data-label {
    font-weight:bold; margin-right:10px;
}
.chart-navigator {
    padding:10px 0px 5px 0px;
    height:25px;
}
.box-top {
    margin:5px auto 0px auto;
    width:100%;
    overflow-x:hidden;
    -webkit-border-radius: 7px 7px 0px 0px;
    -moz-border-radius: 7px 7px 0px 0px;
    border-radius: 7px 7px 0px 0px;
    border-top: thin solid #CCC;
    border-left: thin solid #CCC;
    border-right: thin solid #CCC;
    background-color:#f5f5f5;
}
.box-bottom {
    margin:0px auto 0px auto;
    padding:0px 5px 0px 5px;
    width:100%;
    overflow-x:hidden;
    -webkit-border-radius: 0px 0px 7px 7px;
    -moz-border-radius: 0px 0px 7px 7px;
    border-radius: 0px 0px 7px 7px;
    border: thin solid #CCC;
}
.boxed-chart {
    padding:10px 0px 10px 0px;
}
.boxed-chart-renderer {
    width: 100%; margin: 0px 0px 10px 0px; border: thin solid silver; padding: 0px;
}
/* #loadviewer , #analysisresult , */.dst-chart {
    padding:30px 0px 10px 0px;
    /*height:25px;*/
}

.box-85-100 {
    width:85%;
}
.box-50-100 {
    width:48%;
}
.box-35-100 {
    width:35%;
}
.box-30-100 {
    width:30%;
}
.box-25-100 {
    width:24%;
}
.box-20-100 {
    width:19%;
}
.box-15-100 {
    width:14%;
}
@media all and (max-width:1050px) {
    .box-50-100 {
        width:100%;
    }
    .box-35-100 {
        width:48%;
    }
    .box-25-100 {
        width:48%;
        margin-right:0px !important;
    }
}
.data-summary-title {
    font-weight:bold;
    padding: 5px;
    color:#acacac;
}
.data-summary-stat {
    text-align: center;
    display:inline-block;

}
.data-summary-stat-title {
    font-weight:bold;
    margin:10px auto 5px auto;
}
.data-summary-box {
    margin-right:2%;
}
.stat-value.issue {
    color:#0092B6;
}
.chart-nav-button {
    margin:0px 5px 0px 5px;
}
.result-input {
    margin:10px 5px 5px 5px;
}
.result-input-title {
    font-weight:bold; font-size:10pt; margin-bottom:0px;
}
.analysis-date {
    font-size: 8pt;
    font-weight: normal;
    color: #a6a6a6;
    top: -5px;
    position: relative;
}
.analysis-close-button {
    margin-top: -15px;
    position: absolute;
    margin-left: 5px;
}
li select {
    width:85%;
}
.chart-tab {
    margin: -4px 0px 0px 10px;
    background-color: whiteSmoke;
    padding: 9px 9px 8px 9px;
    border: thin solid silver;    
    display: inline-block;
    -webkit-border-radius: 7px 7px 0px 0px;
    -moz-border-radius: 7px 7px 0px 0px;
    border-radius: 7px 7px 0px 0px;
    cursor:pointer;
    position:absolute;
}
.chart-tab.displayed {
    background-color:white;
    border-bottom:thin solid white;
    cursor:default;
}
.dst-table {
    padding:0px;
}
.stat-value.large {
    font-size:14pt;
}
td .stat-value {
    margin-bottom:0px;
}
.single-cell {
    border:thin solid silver;
    width:10%;
}
.left-cell {
    border-left:thin solid silver;
    border-top:thin solid silver;
    border-bottom:thin solid silver;
}
.right-cell {
    border-right:thin solid silver;
    border-top:thin solid silver;
    border-bottom:thin solid silver;
}
.mid-cell {
    border-top:thin solid silver;
    border-bottom:thin solid silver;
}
.header-cell {
    border-left: thin solid silver; border-right:thin solid silver;
}
.max {
    color:#e5b700;
}
.max-bg {
    background-color:#fffae6;
}
.partpeak {
    color:#91c130;
}
.partpeak-bg {
    background-color:#f3ffdc;
}
.peak {
    color:#27c2c3;
    background-color:transparent;
}
.peak-bg {
    background-color:#e9ffff;
}
.peak-button:hover {
    cursor:pointer;
    color:#F37021;
}
#analysis-date-dropdown {
    position: absolute;
    padding: 10px;
    margin: 0px 0px 0px 0px;
    font-size: 9pt;
    font-weight: normal;
    z-index: 10;
    background-color: white;
    -webkit-box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 3px 3px 3px 3px;
    moz-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
}
#analysis-date-dropdown-title {
    border: thin solid silver;
    padding: 0px 5px 0px 5px;
    margin: -11px -11px 0px -11px;
    background-color: whiteSmoke;
    font-weight: bold;
    color: #777;
    -webkit-border-radius: 3px 3px 0px 0px;
    moz-border-radius: 3px 3px 0px 0px;
    border-radius: 3px 3px 0px 0px;
}
.analysis-date-option {
    padding:5px;
}
.analysis-date-option:hover {
    background-color:#E9FFFF;
}
#open-analysis-date {
    font-size:10pt; color:#777; margin-bottom:10px;
}
.analysis-result-row {
    cursor:pointer;
}
.analysis-result-row:hover , .selected-analysis-result {
    background-color:#0092B6;
    color:#ffffff;
}
.selected-analysis-result {
    font-weight:bold;
}
.table-per-kw {
    font-size:10pt;
    color:#88cdbc;
}
#dst-results-basic-details {
    position: fixed;
    top: -1px;
    background-color: white;
    padding: 10px;
    -webkit-box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.3);
    margin: 0px;
    -webkit-border-radius: 0px 0px 5px 5px;
    moz-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
    z-index:1;
}
.basic-savings-title {
    font-weight: bold;
    font-size: 12pt;
    margin-top: 10px;
}
/* ============================= OPS DASHBOARD STYLES ============================== */
.latency-container {
    background-image:url(../images/ops-load-sparkline-bg.png);
    background-repeat:repeat-x;
}
.chart-100px {
    height:100px;    
    background-repeat:repeat-x;
    background-position: 0 0;
    margin:25px 0px 25px 0px;
}
.chart-50px {
    height:50px;    
    background-repeat:repeat-x;
    background-position: 0 0;
    margin:25px 0px 25px 0px;
}
.chart-100px.percentage {
    background-image:url(../images/ops-100px-chart-percentage.jpg);
}
.chart-100px.latency {
    background-image:url(../images/ops-100px-chart-latency.jpg);
}
.multiple-days .ops-right , .multiple-days .chart-100px {
    height:50px;
}
.chart-50px.percentage {
    background-image:url(../images/ops-50px-chart-percentage.jpg);
}
.chart-50px.latency {
    background-image:url(../images/ops-50px-chart-latency.jpg);
}
.multiple-days .ops-right .ops-right-inner .ops-right-values .num-large {
    font-size:2em;
}
.ops-summary {
    height:90px;
    margin-bottom:10px;
}
.ops-summary .summary-category {
    border:thin solid silver;
    height:90px;
    width:49%;
}
#ops-navigator {
    width: 100px;
    margin: 0px;
    padding: 0px;
    border: thin solid silver;
    position: fixed;
    right: 15px;
    background-color: #ffffff;
    color:#000000;
    top:179px;
}
#ops-status-container {
    margin-right:110px;
}
.summary-category.left .num-container {
    width:16%;
    min-width:60px;
}
.summary-category.right .num-container {
    width:25%;
    min-width:60px;
}
.power-chart div canvas {
    width: 100% !important;
    height: 35px !important;
    margin: 10px 0px 0px 3%;
}
.header-bar-title {
    font-size: 18pt;
    font-weight: bold;
    padding: 3px 0px 0px 6px;
    position: relative;
    color:#ffffff;
}
.online-text {
    color:#4cb118;
}
.online-bg {
    background-color:#4cb118;
    color:#ffffff;
}
.acknowledge-bg {
    background-color:#cdeef9;
}
.delayed-text {
    color:#ffb32c;
}
.delayed-bg {
    background-color:#ffb32c;
    color:#ffffff;
}
.offline-text {
    color:#ff4b4a;
}
.offline-bg {
    background-color:#ff4b4a;
    color:#ffffff;
}
.disabled-text {
    color:#bebebe;
}
.disabled-bg {
    background-color:#bebebe;
    color:#ffffff;
}
.monitor-status {
    font-size:1.5em;
    float:left; width:55%;
    height:45px;
    overflow:hidden;
}
.monitor-status.labels {
    font-size:1.15em;
    line-height:45px;
}
.monitor-row {
    margin:3px 0px 3px 0px;
    /*overflow:hidden;*/
    border-bottom: thin solid #f0f0f0;
}
.monitor-row.labels{
    border-bottom:none;
    height:52px;
}
.num-container .inner-num-container {
    margin:10px 15px 9px 15px;
}
.num-label {
    font-weight:bold;
}
.num-large {
    font-weight: bold;
    font-size: 2.5em;
}
.navigation-block {
    border:thin solid white; width:18px; height:18px; float:left;
    opacity:.4;
    cursor:pointer;
    transition: opacity 0.5s;
    -moz-transition: opacity 0.5s; /* Firefox 4 */
    -webkit-transition: opacity 0.5s; /* Safari and Chrome */
    -o-transition: opacity 0.5s; /* Opera */;
}
.navigation-block:hover {
    border-color:#0092B6;
}
#navigate-title {
    margin: 10px 10px 6px 10px;height: 55px;font-weight: bold;font-size: 1.3em;padding-top: 6px;
}
#navigator-slider {
    position:absolute; 
    width:106px; 
    left:-5px; 
    top:0px; 
    height:40px; 
    cursor:move;
    display:none;
}
.status-charts-container {
    margin: 0px 0px 0px 55%;
}
.status-field {
    white-space:nowrap; 
    text-overflow:ellipsis; 
    margin:10px 0.5% 10px 0.5%;
    overflow:hidden;
    float:left;
}
.client-field {
    font-weight:bold;
    width:24%;
}
.labels .client-field , .labels .location-field {
    font-weight:normal;
}
.location-field {
    width:59%;
    font-weight:bold;
}
.latency-field , .completeness-field {
    width:19%;
    text-align: center
}
.ops-chart-container , .ops-chart-container-tabs {
    height:45px;
    line-height:45px;
}
.power-container , .monid-container {
    display:none;
}
.power-chart-container {
    width:100%; height:100%; float:left; /* change width to 50% for battery */
    overflow:hidden;
}
.power-chart {
    width:60%; height:100%; float:left;
}
.monid-txt {
    margin-left:25px; font-weight:bold; font-size:1.52em;
}
.power-label {
    width: 40%;
    height: 45px;
    float: left;
    line-height: 45px;
    font-weight: bold;
    font-size: 2em;
    text-align: right;
    overflow:hidden;
    text-overflow:ellipsis;
}
.summary-title {
    font-weight: bold;
    color: #333333;
    margin: -15px 0px 15px 0px;
    font-size: 1.25em;
}
.label-padding {
    display:block; margin:0px 10px 0px 10px;
}
.label-padding.lower {
    line-height:25px;
}
.monitor-status.labels {
    border-bottom:thin solid silver;
}
.label-tab {
    float:left; 
    /*width:49.7%; */
    width:32%;
    overflow:hidden;
    text-overflow:ellipsis;
    height:25px; 
    line-height:25px; 
    cursor:pointer;
    border-bottom:thin solid silver;
    font-weight:bold;
    color:#0092B6;
    font-size:1.15em;
}
.label-tab:hover {
    color:#F37021;
}
.active-label , .active-label:hover {
    border-top:thin solid silver; 
    border-right:thin solid silver; 
    border-left:thin solid silver; 
    border-bottom:none;

    -webkit-border-radius: 5px 5px 0px 0px;
    moz-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;

    color:#333;
    cursor:default;
}
.active-sort {
    background: #feffff; /* Old browsers */
    background: -moz-linear-gradient(top, #feffff 0%, #ddf1f9 16%, #a0d8ef 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(16%,#ddf1f9), color-stop(100%,#a0d8ef)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #feffff 0%,#ddf1f9 16%,#a0d8ef 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #feffff 0%,#ddf1f9 16%,#a0d8ef 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #feffff 0%,#ddf1f9 16%,#a0d8ef 100%); /* IE10+ */
    background: linear-gradient(to bottom, #feffff 0%,#ddf1f9 16%,#a0d8ef 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=0 ); /* IE6-9 */
}
.power-row-label {
    float:left; width:50%; font-weight:bold;
}
#labels-upper {
    height:25px;
}
#labels-lower {
    height:20px; border-left:thin solid silver; /*border-right:thin solid silver;*/
}
.latency-container {
    position:relative;
}
.latency-datapoint {
    width:0.34%;
    float:right;
    margin:0;
    padding:0;
}
.detail-latency-datapoint {
    width:0.334%;
    float:right;
    margin:0;
    padding:0;    
}
.latency-datapoint .point-info , .detail-latency-datapoint .point-info {
    display:none;
    position:absolute;
    top:0px;
    color:black;
}
.latency-datapoint:hover .point-info , .detail-latency-datapoint:hover .point-info {
    display: block;
}
.latency-date {
    position: absolute;
    white-space: nowrap;
    left: -54px;
    top: -15px;
    width: 110px;
    overflow: hidden;
}
.latency-datapoint.online-bg {
    margin-top:30px;
    height:15px;
}
.latency-datapoint.delayed-bg {
    margin-top:15px;
    height:30px;
}
.latency-datapoint.offline-bg {
    margin-top:0px;
    height:45px;
}
.latencychart {
    position:relative;
}
#navigation-block-container {
    padding:1px 0px 0px 0px; position:relative;
}
#last-checked-date {
    line-height: 32px;
    font-weight: bold;
    margin-right: 15px;
}
.sort-button {
    font-weight:bold;
    cursor:pointer;
    color:#0092B6;
}
.sort-button.active {
    color:#333333;
}
span[rel="desc"] i {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 4px 6px 4px;
    border-color: transparent transparent #0092B6 transparent;
    position: relative;
    top: -11px;
    margin-right: 5px;
}
span[rel="desc"].active i {
    border-color: transparent transparent #333333 transparent;
}
span[rel="asc"].active i {
    border-color: #333333 transparent transparent transparent;
}
span[rel="asc"] i {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 6px 4px 0 4px;
    border-color: #0092B6 transparent transparent transparent;
    position: relative;
    top: 13px;
    margin-right: 5px;
}
.large-units {
    font-size:0.5em;
}
.battery-hide {
    display:none;
}
.vis-toggle {
    font-size:0.8em;
    margin-left:10px;
    cursor:pointer;
    float:right;
}
.vis-toggle.hiddenMon {
    color:silver;
}
.vis-toggle.visibleMon {
    color:#0092B6;
    font-weight:bold;
}
.status-def {
    font-size:0.8em;
}
.ops-right {
    width:24%; margin-left:1%; border:thin solid silver; height:100px;
}
.ops-right-inner {
    margin:5px;
}
.ops-right-values {
    margin:0px auto 0px auto;
}
.chart-row {
    clear:both;
    margin:10px 0px 20px 0px;
    border-bottom:thin solid silver;
}
.ops-chart-labels-100px {
    height:100px;
    width:30px;
}
.ops-chart-labels-50px {
    height:50px;
    width:30px;
}
@media all and (max-width:1275px) {
    .ops-summary {
        height:auto;
    }
    .ops-summary .summary-category {
        float:none;
        width:auto;
    }
    .ops-summary .summary-category.right {
        margin-top:10px;
    }
    .detail-latency-datapoint {
        width:0.33%;
    }
}
@media all and (max-width:950px) {
    .ops-summary {
        height:auto;
    }
    .ops-summary .summary-category {
        float:none;
        width:auto;
    }
    .ops-summary .summary-category.right {
        margin-top:10px;
    }
    #ops-status-container {
        margin-right:0px;
    }
    #ops-navigator {
        font-size: 0.75em;
        bottom:0px;
        left:0px;
        width:100%;
        top:auto;
    }
    #navigate-title {
        height: 40px;
        display:none;
    }
    .detail-latency-datapoint {
        width:0.328%;
    }
}
@media all and (max-width:825px) {
    .ops-summary {
        height:450px;
    }
    .monitor-status.labels {
        border:none;
    }
    .monitor-row.labels {
        float:none;
        height:90px;
    }
    .status-charts-container , .monitor-status.labels , .ops-chart-container , .monitor-status, .ops-chart-container-tabs  {
        float:none;
        width:100%;
        margin:0px;
    }
    #monitor-status-container .monitor-row {
        padding: 5px;
        margin-bottom: 10px;
        border: 2px solid gray;
        background-color: #f0f0f0;
    }
    #power-labels .power-row-label {
        float:right;
    }
    .ops-summary .summary-category.left {
        height: 255px;
    }
    .ops-summary .summary-category.right {
        height:185px;
    }
    .summary-category.left .num-container , .summary-category.right .num-container {
        width: 50%;
    }
    #last-checked-date {
        position: absolute;
        top: 45px;
        right: 10px;
        color: #707070;
    }
    .detail-latency-datapoint {
        width:0.321%;
    }
}
@media all and (max-width:615px) {
    #header-content {
        height: 70px;
    }
    #header-resp, #header-offset {
        height: 145px;
    }
    #last-checked-date {
        top: 70px;
    }
    .detail-latency-datapoint {
        width:0.313%;
    }
}