div.energyEquivalencyWrapper  {
    width:100%;
    height:100%;
    text-align:center;
}

div.energyEquivalencyWrapper table {
    table-layout: fixed;
    width: 100%;
    height: 100%;
    text-align: center;
}

div.energyEquivalencyWrapper table tr.firstRow {
    height: 75%;
    color: #626469;
    color: var(--detail-label-color);
}

div.energyEquivalencyWrapper table tr.secondRow {
    height: 25%;
    color: #9fa0a4;
    color: var(--text-color-subdued);
}

div.energyEquivalencyWrapper table td {
    padding: 2px 10px;
}

div.energyEquivalencyWrapper table .iconDiv {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

div.energyEquivalencyWrapper .description {
    white-space: normal !important;
}

/*Data Series*/
.dataSeries_SetupControl .gadgetOptionDataSeriesTable .energyEquivalencydataSeriesRowEntry {
    cursor: pointer;
    padding: 6px 0 6px 0;
}

.dataSeries_SetupControl .gadgetOptionDataSeriesTable .energyEquivalencydataSeriesRowEntry .dataSeriesTitle {
    float:left;
    width: 530px;
    display: inline-block;
    padding: 0 0 0 10px;
    vertical-align: middle;
}
.dataSeries_SetupControl .gadgetOptionDataSeriesTable .energyEquivalencydataSeriesRowEntry .dataSeriesUtility  {
    float:right;
    width: 190px;
    display: inline-block;
    padding: 0 10px 0 10px;
    vertical-align: middle;
    text-align:right;
}

.gadgetDataSeriesOptionsDialog .energyEquivalencyDataSeriesOptionProperties
{
    height: 80px;
    padding: 5px;
}

.gadgetDataSeriesOptionsDialog .energyEquivalencyDataSeriesOptionProperties .seriesOptionTitle, .gadgetDataSeriesOptionsDialog .energyEquivalencyDataSeriesOptionProperties .seriesOptionUnits
 {
    width: 99%;
}

/* Image Tab*/
.eegadgetFileManager.smallRender .filePreview {
    height: 185px;
} 

.eegadgetFileManager.smallRender  .fileList {
    height: 182px;
} 

#predefined-equivalency,
#energy-equivalency-setup-control-description {
    width: 758px;
}

div.energy-equivalency-setup-control-wrapper input.value-multiplier,

/* We want a small space between the value symbol and its placement */
div.energy-equivalency-setup-control-wrapper input.value-symbol {
    margin-top: 6.5px;
    width: 90px;
    margin-right: 2px;
}

/* Flush to the right edge*/
div.energy-equivalency-setup-control-wrapper select.symbol-placement {
    margin-top: 6.5px;
    width: 268px;
    margin-right: 0;
}

/* the unit text field would be one pixel down from the others without this */
div.energy-equivalency-setup-control-wrapper input { vertical-align: top;}

div.energy-equivalency-setup-control-wrapper input.button-primary {
    height: 45px;
    margin-left: 0;
    padding-left: 30px;
    padding-right: 30px;
    min-width: 178px;
}

.gridGadgetWrapper {
    padding: 10px 10px 10px 10px;
}

/* DataTables overrides */
.gridGadgetWrapper table.dataTable {
    border: none;
}

.gridGadgetWrapper .dataTable tr.even:hover, .gridGadgetWrapper .dataTable tr.odd:hover {
    background-color: #fff;
    background-color: var(--section-background-color);
}

.gridGadgetWrapper table.dataTable thead th {
    padding: 2px 0px 2px 4px;
    outline: none;
}
 
/* Override the table width, as it is set absolutely. */
.gridGadgetWrapper .dataTables_wrapper .dataTable {
    width: 100% !important;
}

/* Position the scroll body, so we respect the column width */
.gridGadgetWrapper .dataTables_scroll {
    position: absolute;
    top: 0px;
    left: 0px;
    max-width:100%;
    width: 100%;
}

.gridGadgetWrapper .DTFC_LeftBodyLiner{
    overflow-x: hidden;
}

.gridGadgetWrapper table.dataTable tbody tr td:last-child {
    border-right: 1px solid #CBCBCB;
    border-right-color: var(--border-color-subdued);
}

/* header row */
.gridGadgetWrapper table.dataTable thead th {
    border-top: 1px solid #CBCBCB;
    border-top-color: var(--border-color-subdued);
    border-right: 1px solid transparent;
    background-color: #e4e4e4;
    background-color: var(--main-background-color);
}


.gridGadgetWrapper .dataTable th .ggHeaderCell {
    width: 100%;
    float: right;
    text-align: right;
    padding-right: 24px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    border-right: solid 1px #CBCBCB;
    border-right-color: var(--border-color-subdued);
}

.gridGadgetWrapper .dataTables_scrollHead .dataTable th:last-of-type .ggHeaderCell {
    border-right: none;
}

/* Very top left cell.  Blank (titles) */
.DTFC_LeftHeadWrapper table.dataTable thead th {
    border-left: 1px solid #CBCBCB;
    border-left-color: var(--border-color-subdued);
}

/* First column (titles) */
.gridGadgetWrapper .DTFC_LeftBodyWrapper table tr > td:first-of-type {
    border-left: 1px solid #CBCBCB;
    border-left-color: var(--border-color-subdued);
}

.gridGadgetWrapper .dataTables_scrollHead .dataTable tr > th:last-of-type {
    border-right: 1px solid #CBCBCB;
    border-right-color: var(--border-color-subdued);
}

.gridGadgetWrapper .dataTable td .ggFirstColumnCell {
    padding: 0px 24px 0px 5px;
    font-weight:bold;
    text-align: right;
    float: right;
}


/* Actual Cell values */
.gridGadgetWrapper .dataTable td {
    padding: 0px;
    height: 36px;
    border-bottom: 1px solid #CBCBCB;
    border-bottom-color: var(--border-color-subdued);
}

.gridGadgetWrapper .dataTable td .ggIcon {
    width: 24px;
    height: 24px;
    float: right;
    margin: 6px 0px 0px 0px;
}

.gridGadgetWrapper .dataTable td .ggValue {
    margin: 0px;
    display: inline-block;
}

/* Standard Cell Rendering */
.gridGadgetWrapper .dataTable td .ggCell, .gridGadgetWrapper .simpleDataTable td {
    text-align: right;
    color: #000000;
    color: var(--text-color-strong);
    font-size: 12px;
}

.gridGadgetWrapper .simpleDataTable td {
    padding-right: 5px;
}

.gridGadgetWrapper .dataTable td .ggCell {
    
    height: 36px;
    line-height: 36px;    
}

/* Special case, as Dates can be long */
.gridGadgetWrapper .dataTable td .ggCellDate {
    font-size: 11px;
}


.gridGadgetWrapper .dataTable td .ggCellInvalid {
    color: #9fa0a4;
    color: var(--text-color-subdued);
}

.gridGadgetWrapper .dataTable td .ggCellWarningValue {
    color: #9fa0a4;
    color: var(--text-color-subdued);
}

/* Error state*/
.gridGadgetWrapper .dataTable td.networkIssues, .gridGadgetWrapper .dataTable td.networkIssues div {
    background-color:#EFD5DB;
}


div.liveValueGadgetWrapper  {
    width:100%;
    height:100%;
    text-align:center;
}

div.liveValueGadgetWrapper table {
    table-layout: fixed;
    width: 100%;
    height: 100%;
    text-align: center;
}

div.liveValueGadgetWrapper table tr.thirdRow {
    height: 10%;
    color: #626469;
}

div.liveValueGadgetWrapper table tr.secondRow {
    height: 70%;
    color: #626469;
}

div.liveValueGadgetWrapper table tr.firstRow {
    height: 20%;
    color: #9fa0a4;
}

div.liveValueGadgetWrapper table td {
    padding: 10px;
}

div.liveValueGadgetWrapper table .iconDiv {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

div.liveValueGadgetWrapper .description {
    white-space: normal !important;
}

/*Data Series*/
.dataSeries_SetupControl .gadgetOptionDataSeriesTable .energyEquivalencydataSeriesRowEntry {
    cursor: pointer;
    padding: 6px 0 6px 0;
}

.dataSeries_SetupControl .gadgetOptionDataSeriesTable .energyEquivalencydataSeriesRowEntry .dataSeriesTitle {
    float:left;
    width: 530px;
    display: inline-block;
    padding: 0 0 0 10px;
    vertical-align: middle;
}
.dataSeries_SetupControl .gadgetOptionDataSeriesTable .energyEquivalencydataSeriesRowEntry .dataSeriesUtility  {
    float:right;
    width: 190px;
    display: inline-block;
    padding: 0 10px 0 10px;
    vertical-align: middle;
    text-align:right;
}
.networkissues{
    background-color:dimgrey;
}

.gadgetDataSeriesOptionsDialog .energyEquivalencyDataSeriesOptionProperties
{
    height: 80px;
    padding: 5px;
}

.gadgetDataSeriesOptionsDialog .energyEquivalencyDataSeriesOptionProperties .seriesOptionTitle, .gadgetDataSeriesOptionsDialog .energyEquivalencyDataSeriesOptionProperties .seriesOptionUnits
 {
    width: 99%;
}
#livevalue-setup-control-description {
    width: 550px;
}

div.livevalue-setup-control-wrapper input.value-multiplier {
    margin-top: 6.5px;
    width: 280px;
    margin-right: 14px;
}

div.livevalue-setup-control-wrapper input.value-precision {
    margin-top: 6.5px;
    width: 120px;
    margin-right: 14px;
}

/* We want a small space between the value symbol and its placement */
div.livevalue-setup-control-wrapper input.value-symbol {
    margin-top: 6.5px;
    width: 90px;
    margin-right: 2px;
}

/* Flush to the right edge*/
div.livevalue-setup-control-wrapper select.symbol-placement {
    margin-top: 6.5px;
    width: 227px;
    margin-right: 0;
}

/* the unit text field would be one pixel down from the others without this */
div.livevalue-setup-control-wrapper input { vertical-align: top;}

div.livevalue-setup-control-wrapper input.button-primary {
    height: 45px;
    margin-left: 0;
    padding-left: 30px;
    padding-right: 30px;
    min-width: 178px;
}

div.livevalue-setup-control-wrapper label.formula {
    width: 198px;
    float: left;
}

div.livevalue-setup-control-wrapper input.value-formula {
    width: 198px;
    float: left;
}


div.livevalue-setup-control-wrapper label.decimal-places {
    width: 139px;
    padding-left: 14px;
    float: left;
}

div.livevalue-setup-control-wrapper label.units {
    width: 120px;
    padding-left: 20px;
    float: left;
}

div.livevalue-setup-control-wrapper label.description-label {
    width: 550px;
    padding-left: 0px;
    float: left;
}

div.livevalue-setup-control-wrapper label.update-interval-label {
    width: 190px;
    padding-left: 20px;
    float: left;
}

div.livevalue-setup-control-wrapper select.update-interval {
    margin-top: 6.5px;
}

.sampleCalcTable {
    border: solid 1px #CBCBCB;
    border-color: var(--border-color-subdued);
    overflow-x: hidden;
}

    .sampleCalcTable th {
        background-color: #e4e4e4;
        background-color: var(--main-background-color);
        border: solid 1px #CBCBCB;
        border-color: var(--border-color-subdued);
    }

        .sampleCalcTable th.FirstCell, .sampleCalcTable th .ColumnHeader0, .sampleCalcTable td .RowHeader {
            width: 96px;
            height: 30px !important;
        }

        .sampleCalcTable th.ColumnHeader1, .sampleCalcTable td.SecondCol {
            width: 285px;
        }

        .sampleCalcTable th.ColumnHeader2, .sampleCalcTable td.ThirdCol {
            width: 290px;
        }

    .sampleCalcTable td, .sampleCalcTable th {
        height: 30px;
        text-align: left;
        border-bottom: solid 1px #CBCBCB;
        border-bottom-color: var(--border-color-subdued);
        padding-left: 20px;
        width: 85px;
    }

    .sampleCalcTable tr {
        display: block;
        width: 100%;
    }

    .sampleCalcTable tbody {
        width: 670px;
        max-height: 150px;
        overflow-y: auto;
        display: block;
    }
.disablediv{
    pointer-events: none;
    opacity: 0.4;
}
.EnableApplyThresholdColors {
    width: 50px;
    display: inline-block;
}
.EnableDisplayTarget {
    width: 50px;
    display: inline-block;
}
.toggle-apply-thresholds {
    width: 680px;
    display: inline-block;
    margin-top: 4px;
    float: right;
}
.toggle-label {
    width: 680px;
    display: inline-block;
    margin-top: 4px;
    float: right;
}
target {
    width: 200px;
    display: inline-block;
    margin-top: 4px;    
}
.target-label-name-input {    
    display: block;    
    width: 400px !important;
}

.general {
    display: inline-block;
    vertical-align: top !important;    
}

.indicators {
    display: inline-block;
    margin-top: 4px;
}

.color-low {
    width: 140px;    
    float: left;
}

.target {
    width: 115px;
    padding-left: 20px;
    float: left;
}

.color-mid {
    width: 155px;
    padding-left: 20px;
    float: left;
}

.upper-target {
    width: 154px;
    padding-left: 4px;
    float: left;
}

.color-upper {
    width: 120px;
    padding-left: 3px;
    float: left;
}
.powerQualityProcessImpactWrapper {
    width:100%;
    height:100%;
    text-align:center;
}

.powerQualityProcessImpactWrapper table {
    table-layout:fixed;
    width:100%;
    height:100%;
    text-align:center;
}

.powerQualityProcessImpactWrapper table .topRow {
    height: 65%;    
}

.powerQualityProcessImpactWrapper table .topRow .fillerCell {
    width:10%; 
}

.powerQualityProcessImpactWrapper table .topRow .iconCell {
    width:80%;
}

.powerQualityProcessImpactWrapper table .topRow .iconDiv {
    width:100%;
    height:100%;
    background-size:contain;
    background-position:center;
    background-repeat: no-repeat;
}


.powerQualityProcessImpactWrapper table .topRow .countCell {
    width:20%;
    color: #b10043;
    padding-right: 25px;
}

.powerQualityProcessImpactWrapper table .middleRow {
    height: 10%;    
}

.powerQualityProcessImpactWrapper table .descriptionCell {
    /*padding: 0px 5% 0px 5%;*/
    /*Set VIA js, due to IE bug*/
    color: #b10043;
}

.powerQualityProcessImpactWrapper table .bottomRow {
    height: 10%;    
}


.powerQualityProcessImpactWrapper table .totalEventCell {
    /*padding: 0px 20% 0px 20%;*/
    /*Set VIA js, due to IE bug*/
    color: #c3c3c8;
}

.powerQualityProcessImpactWrapper .chartContainer {
    width: 100%;
    height: 100%;
}


.powerQualityPowerFactorImpactWrapper {
	position:relative;
    display: inline-block;
    width:100%;
    height:100%;
    overflow: hidden;
    cursor: default;
    padding: 0 2% 2% 2%;
}

.powerQualityPowerFactorImpactWrapper .topSection {
    width: 100%;
    height: 50%;
    vertical-align: bottom;
    text-align: center;
}

.powerQualityPowerFactorImpactWrapper .bottomSection {
    width: 100%;
    height: 50%;
}

.powerQualityPowerFactorImpactWrapper .linearGauge {
	width: 60%;
    height: 8px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.powerQualityPowerFactorImpactWrapper .gradient {
	width: 100%;
	height: 5px;
    top: 3px;
    background: linear-gradient(to right, #ff3908, #ff8c03, #ffba01, #efdd00, #a8de00, #6bde00, #a8de00, #efdd00, #ffba01, #ff8c03, #ff3908);
	position: relative;
}

.powerQualityPowerFactorImpactWrapper .leftTick {
    width: 2px;
    height: 8px;
    border: 0px solid #000;
    background-color: #9fa0a4;
    left: 0px;
    z-index: 1;
    position: absolute;
}

.powerQualityPowerFactorImpactWrapper .leftTickLabel {
    color: #9fa0a4;
    left: -2px;
    top: -15px;
    z-index: 1;
    position: absolute;
}

.powerQualityPowerFactorImpactWrapper .leftCenterTick {
    width: 2px;
    height: 8px;
    border: 0px solid #000;
    background-color: #9fa0a4;
    left: 25%;
    z-index: 1;
    position: absolute;
}

.powerQualityPowerFactorImpactWrapper .leftCenterTickLabel {
    color: #9fa0a4;
    width: 50%;
    text-align: center;
    top: -15px;
    z-index: 1;
    position: absolute;
}

.powerQualityPowerFactorImpactWrapper .centerTick {
    width: 2px;
    height: 8px;
    border: 0px solid #000;
    background-color: #000;
    left: 50%;
    z-index: 1;
    position: absolute;
}

.powerQualityPowerFactorImpactWrapper .centerTickLabel {
    color: #9fa0a4;
    width: 100%;
    text-align: center;
    top: -15px;
    z-index: 1;
    position: absolute;
}

.powerQualityPowerFactorImpactWrapper .rightCenterTick {
    width: 2px;
    height: 8px;
    border: 0px solid #000;
    background-color: #9fa0a4;
    left: 75%;
    z-index: 1;
    position: absolute;
}

.powerQualityPowerFactorImpactWrapper .rightCenterTickLabel {
    color: #9fa0a4;
    width: 50%;
    left: 50%;
    text-align: center;
    top: -15px;
    z-index: 1;
    position: absolute;
}

.powerQualityPowerFactorImpactWrapper .rightTick {
    width: 2px;
    height: 8px;
    border: 0px solid #000;
    background-color: #9fa0a4;
    left: 100%;
    z-index: 1;
    position: absolute;
}

.powerQualityPowerFactorImpactWrapper .rightTickLabel {
    color: #9fa0a4;
    left: calc(100% - 2px);
    top: -15px;
    z-index: 1;
    position: absolute;
}

.powerQualityPowerFactorImpactWrapper .laggingLabel {
    width: 50%;
    text-align: center;
    color: #d7d8d9;
    top: -35px;
    z-index: 1;
    position: absolute;
}

.powerQualityPowerFactorImpactWrapper .leadingLabel {
    width: 50%;
    left: 50%;
    text-align: center;
    color: #d7d8d9;
    top: -35px;
    z-index: 1;
    position: absolute;
}

.powerQualityPowerFactorImpactWrapper .gaugeLabel {
    width: 100%;
    position: absolute;
    color: #9fa0a4 !important;
    font-weight: normal !important;
    overflow: hidden;
    line-height: initial;
}

.powerQualityPowerFactorImpactWrapper .costSection {
    bottom: -10px;
    position: relative;
    width: 100%;
    height: 50%;
    text-align: center;
    color: #626469 !important;
    line-height: initial;
}

.powerQualityPowerFactorImpactWrapper .costSection div{
    position: relative;
    line-height: initial;
}

.powerQualityPowerFactorImpactWrapper .costLabelSection {
    top: 10px;
    position: relative;
    width: 100%;
    height: 40%;
    text-align: center;
    color: #9fa0a4 !important;
    line-height: initial;
}

.powerQualityPowerFactorImpactWrapper div .pointer {
	top: 50%;
	position: absolute;
	width: 100px;
	height: 25px;
	background-image: url('/Slideshow/Content/Gadgets/PowerQualityPowerFactorImpact/pointer.png');
	background-size: contain;
	background-repeat: no-repeat;
    background-position: 50%;
    z-index: 4;
}

.powerQualityPowerFactorImpactWrapper div .pointerLabel {
	top: 88%;
	position: absolute;
    z-index: 4;
    font-weight: bold;
    font-size: 1.2em;
}

.powerQualityPowerFactorImpactWrapper .pointer-scale {
	position: relative;
	height: 100%;
    width: 100%;
}

.powerQualityPowerFactorImpactWrapper .targetZone {
	width: 112px;
	height: 8px;
	background: url('/Slideshow/Content/Gadgets/PowerQualityPowerFactorImpact/target-repeat-bg.png') repeat;
	position: absolute;
	top: 9px;
	float: left;
}

.powerQualityPowerFactorImpactWrapper .containerTable{
    width: 100%;
    height: 100%;
}
.powerQualityRatingWrapper {
	position:relative;
	width:100%;
	height:100%;
}

.powerQualityRatingWrapper .ratingLabel {
	font: 18px Arial;
	color: #9FA0A4;
	line-height: 2em;
}

.powerQualityRatingWrapper .ratingValue {
	font: 18px Arial;
	color: #636468;
}

.powerQualityRatingWrapper .ratingGrade {
	font-size: 200%;
	font-weight: bold;
	padding: 0.3em;
	width: 2em;
	text-align: center;
}

.powerQualityRatingWrapper .gaugeBox {
	width: 40px;
	height: 50px;
	border: 1px #9fa0a4 solid;
	border-top: 0;
	font: 24px Arial;
	color: #d7d8d9;
	text-align: center;
	padding-top: 9px;
    background-color: #fff;
}

.powerQualityRatingWrapper .boxA {
	border-top: 1px #9fa0a4 solid;
	border-radius: 10px 10px 0px 0px;
}

.powerQualityRatingWrapper .boxF {
	height: 49px;
	border-radius: 0px 0px 10px 10px;
}

.powerQualityRatingWrapper .gaugeBoxes {
	float: left;
	top: 10px;
	position: relative;
}

.powerQualityRatingWrapper .targetZone {
	width: 5px;
	height: 112px;
	background: url('/Slideshow/Content/Gadgets/PowerQualityRating/target-repeat-bg.png') repeat;
	left: 13px;
	position: relative;
	top: 10px;
	float: left;
}

.powerQualityRatingWrapper .targetZoneLabel {
	left: -32px;
	position: relative;
	top: 50px;
	float: left;
}

.powerQualityRatingWrapper .gadgetWrapper {
    border-radius: 6px;
    float: left;
    padding: 12px 0px 12px 0px;
    margin-left: 65px;
    transform-origin: 0 0;
}

.powerQualityRatingWrapper .contributors {
	float: right;
	width: 50%;
    height: 100%;
    padding-right: 24px;
    padding-bottom: 24px;
}

.powerQualityRatingWrapper .linearGauge {
	left: 5px;
	width: 50px;
	top: 9px;
	float: left;
    position: relative;
}

.powerQualityRatingWrapper .gradient {
	width: 3px;
	height: 300px;
	/*border: 1px solid black;*/
	background: linear-gradient(#6bde00, #a8de00, #efdd00, #ffba01, #ff8c03, #ff3908);
	position: relative;
}

.powerQualityRatingWrapper div .pointer {
	top: 100%;
	left: -6px;
	position: relative;
	width: 100px;
	height: 11px;
	background-image: url('/Slideshow/Content/Gadgets/PowerQualityRating/pointer.png');
	background-size: contain;
	background-repeat: no-repeat;
}

.powerQualityRatingWrapper .pointerLabel{
    left: 25px;
    position: absolute;
    font-weight: bold;
    font: 24px Arial;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.powerQualityRatingWrapper .pointer-scale {
	position: relative;
	top: -5px;
	height: 100%;
}

/*---- Start Compact View Styles ----*/

.powerQualityRatingWrapper .compactRatingLetterContainer{
    width: 33.3%;
    height: 100%;
    margin: auto;
    line-height: normal;
    border-radius: 10px;
    color: #fff;
    border: 1px solid #9fa0a4;
}

.powerQualityRatingWrapper .compactViewWrapper{
    width: 100%;
    height: 100%;
    padding: 24px 24px 12px 24px;
}

.powerQualityRatingWrapper .compactViewTable{
    width: 100%;
    height: 100%;
    text-align: center;
}

.powerQualityRatingWrapper .topCell {
    width: 100%;
    height: 80%;
}

.powerQualityRatingWrapper .bottomCell {
    width: 100%;
    height: 20%;
}

.powerQualityRatingWrapper .compactContributorsContainer {
    width: 100%;
    height: 100%;
}

.powerQualityRatingWrapper .compactDetails {

}

.powerQualityRatingWrapper .details {
    color: #9fa0a4 !important;
}
/*---- End Compact View Styles ----*/

/********************** Shared Styles **********************/
.webGadgetProper {
    width: 100%;
    height: 100%;
    transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
}

.webGadgetPadding {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.webGadgetProper .viewPort, 
.webGadgetProper .webGadgetIframe {
    overflow: hidden;
    border: none;
}

.webGadget_SetupControl {
    margin-top: -1px;
}

.webGadget_SetupControl #setup-control-uri-input {
    width: 390px;
}

.webGadget_SetupControl #setup-control-refreshInterval-input {
    margin: 0.5em 1em 0 0;
    width: 170px;
}

.webGadget_SetupControl #setup-control-frameWidth-input {
    width: 155px;
    margin-right: 0px;
}

.webGadget_SetupControl .detailsPanel {
    display: inline-block;
    height: 59px;
}


.webGadget_SetupControl .se-gadget-setup label {
   margin-top: 3px;
}

.webGadget_SetupControl .displayModeOption {
    display: inline-block;
    margin-right: 30px;
    margin-top: 5px;
}

/********************** Crop Table **********************/

.webGadget_SetupControl .cropControls{
    margin-top: 20px;
    float: left;
}

.webGadget_SetupControl .left-offset {
    width: 87px;
    padding-top: 17px;
}

.webGadget_SetupControl .left-crop {
    height: 74px;
    padding-top: 0px;
    vertical-align: top;
    width: 87px;
}

.webGadget_SetupControl .left-crop input,
.webGadget_SetupControl .left-offset input {
    margin-right: 0px;
}

.webGadget_SetupControl .top-offset {
    padding-left: 43px;
    width: 153px;
}
.webGadget_SetupControl .top-crop {
    padding-left: 26px;
    width: 160px;
}

.webGadget_SetupControl .crop-image {
    background: url('/Slideshow/Content/Gadgets/WebGadget/webgadget-crop.png') center no-repeat;
    width: 320px;
    height: 156px;
}

.webGadget_SetupControl #setup-control-offsetX-input,
.webGadget_SetupControl #setup-control-offsetY-input,
.webGadget_SetupControl #setup-control-viewPortHeight-input,
.webGadget_SetupControl #setup-control-viewPortWidth-input {
    margin-top: 0px;
}

/********************** Preview Area **********************/

.webGadget_SetupControl .previewControls{
    width: 335px;
    float: right;
}

.webGadget_SetupControl .buttonPreviewUrl {
    width: 100%;
    margin-left: 0px;
}

.webGadget_SetupControl .iframePreview {
    width: 100%;
    height: 193px;
    border: 1px #9f9fa3 solid;
    border-color: var(--border-color);
    margin-left: 0px;
}

.webGadget_SetupControl .iframePreviewSmall {
    height: 173px;
}

.webGadget_SetupControl.smallRender .cropControls {
    margin-top: 0px;
}

.webGadget_SetupControl.smallRender .se-gadget-setup {
    margin-bottom: 0px;
}
.azzo-chart {
    padding: 4px 0px 0px 15px;
}
.azzo-common-totals {
    height: 25px;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    padding: 4px 0px 0px 15px;
    color: #9fa0a4;
    color: var(--text-color-subdued);
}
.azzo-common-errors {
    height: 35px;
    font-style: italic;
    font-size: 11px;
    width: 100%;
    padding: 4px 0px 0px 15px;
    color: #9fa0a4;
    color: var(--text-color-subdued);
}
.azzo-consumption-chart-radio-header {
    margin-bottom: 0px;
}
.azzo-consumption-chart-radio{
    margin-left: 25px;
}
.amcharts-amexport-top {
    top: 50px !important;
    right: 15px !important;
    color: black !important;
}
.amcharts-amexport-item {
    opacity: 1 !important;
}
.amcharts-amexport-item.amcharts-amexport-item-level-1 {
    right: 30px !important;
}
input[type="number"]:disabled {
    cursor: default;
    background-color: #fff;
    background-color: var(--input-background-color);
    border: 1px solid #ededed;
    border-color: var(--button-color-hover-strong);
    box-shadow: none;
    opacity: 0.6;
}
.sankey-label-fixed {
    display: block;
    float: left;
    width: 200px;
}
.sankey-label-long {
    display: block;
    float: left;
    width: 175px;
}
.sankey-short-input {
    width: 200px !important;
}
.sankey-very-short-input {
    width: 80px;
}
.leftbox {
    float: left;
    width: 50%;
}
.rightbox {
    float: right;
    width: 50%;
}


.centerText {
    text-align:center;
}


/* This is the base gadget panel that wraps all gadgets*/
.gadget-panel
{
    padding:0px;
    width: 100%;
    height: 100%;
}

.gadget-draggable {
    cursor: move;
}

/* Gadget Spacing panel wrapper */
.gadget-spacing {
    width: 100%;
    height: 100%;
    padding: 5px;    
}

/* Gadget Content panel (gadget will own this) */
.gadget-content {
    height: 100%;
    width: 100%;
    border: #9f9fa3 1px solid;
    border-color: var(--border-color);
    border-radius: 5px;
    background-color: #fff;
    background-color: var(--section-background-color);
}

/* Gadget Content panel */
.gadget-displaystatustext {
    text-align: center;
    font-size: 18px;
    font-family: sans-serif;
    color: #9fa0a4;
    color: var(--text-color-subdued);
    vertical-align: middle;
    position: relative;
    overflow: hidden;
}

.content-size-compact .gadget-displaystatustext {
    font-size: 12px;
}

.gadget-displaystatustext div {
    margin: 0;
    width:90%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}


.gadget-content .gadget-header {
    width:100%;
    height:40px;
}

.gadget-content .gadget-proper {
    height: 100%;
    width: 100%;    
}

.gadget-proper .gadget-render {
    width: 100%;
}

/* Ensure that iframes have no border */
.gadget-content .gadget-proper iframe {
    border: none;
}

.gadget-content .gadget-title {
    float: left;
    height: 35px;
    font-size: 20px;
    font-weight: bold;
    color: #626469;
    color: var(--detail-label-color);
    padding: 5px 0px 0px 15px;
}

/* Position Max/Min icons */

.gadget-panel .gadget-header div.gadget-maximize, .gadget-panel .gadget-header div.gadget-minimize {
    float: right;
    margin: 8px 8px 0px 0px;
}

.mainContentContainerFullScreen .gadget-panel .gadget-header div.gadget-maximize, .mainContentContainerFullScreen .gadget-panel .gadget-header div.gadget-minimize {
    display: none;
}

/* Position the gadget menu */
.gadget-panel .gadget-header nav.gadget-menu-nav {
    float: right;
    margin: 8px 10px 0px 0px;
}

.mainContentContainerFullScreen .gadget-panel .gadget-header nav.gadget-menu-nav {
    display: none;
}

.menu-gadget-menu {
    position:absolute;
    z-index: 1000;
}

.gadget-menu {
    display:block;
    cursor:default;
}

.gadget-menu {
    display: block;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-size: 0;
    text-indent: -9999px;
    border-radius: 0;
    border: none;
    cursor: pointer;
}

.gadget-menu span::before
{
    top: -6px;
}

.gadget-menu span::after
{
    top: 6px;
}

/* Position the viewing period dropdown */
.gadget-viewing-periods {
    float: right;
    margin: 8px 8px 0px 0px;
}

.mainContentContainerFullScreen .gadget-viewing-periods {
    display: none;
}

.gadget-proper .gadget-sub-title {
    height: 20px;
    font-size: 12px;
    width: 100%;
    padding: 0px 0px 0px 15px;
    color: #9fa0a4;
    color: var(--text-color-subdued);
    margin: 4px 0px 0px 0px;
}

.content-size-max .gadget-proper .gadget-sub-title {
    height: 26px;
    font-size: 14px;
}

.content-size-max .gadget-proper .gadget-sub-title {
    height: 26px;
    font-size: 14px;
}
.realtime-data-status .statusText,
.realtime-data-status .updateIcon {
    display:inline-block;
}

.realtime-data-status .statusText {
    display: inline-block;
    vertical-align: top;
    padding: 3px 0px 0px 0px;
}

.realtime-data-status .updateIcon {
    margin: 4px 0px 0px 2px;
}

.realtime-data-status .lastUpdateTime,
.realtime-data-status .logWarning {
    float: left;
}

.realtime-data-status .updatesPaused,
.realtime-data-status .updateInProgress,
.realtime-data-status .nextUpdateTime {
    float: left;
    margin: 0px 0px 0px 10px;
}


.realtime-data-status .updateResumeThisItem {
    cursor:pointer;
}

.content-size-compact .realtime-data-status .logWarning {
    display:none;
}

.content-size-standard .realtime-data-status .logWarning {
    margin: 0px 0px 0px 10px;
}

.content-size-max .realtime-data-status .logWarning {
    margin: 0px 0px 0px 10px;
}

.gadget-header .gadget-viewing-periods {
    /* Ensure we do not blow outside our frame */
    max-width: 50%;
    overflow: hidden;    
}

.gadget-header .viewing-period-select {
    /* Ensure we do not blow outside our frame */
    max-width:100%; 
    height: 24px;
    margin-right: 2px;
}

.gadget-header .viewing-period-placeholder {
    cursor: pointer;
}   
/***************************** Series Selector Settings ********************/
.dataSeries_SetupControl {
    width: 758px;
    height: 375px;
}

.dataSeries_SetupControl .gadgetOptionDataSeriesButtons {
    height: 45px;
    padding-top: 8px;
    padding-left: 5px;
    border: 1px solid #9f9fa3;
    border-color: var(--border-color);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.dataSeries_SetupControl .gadgetOptionDataSeriesButtons .buttonMoveSeriesUp div, .dataSeries_SetupControl .gadgetOptionDataSeriesButtons .buttonMoveSeriesDown div
{
    width: 13px;
    height:9px;
    margin-left: 13px;
    margin-top: 9px;
}

.dataSeries_SetupControl .gadgetOptionDataSeriesButtons .buttonMoveSeriesUp, .dataSeries_SetupControl .gadgetOptionDataSeriesButtons .buttonMoveSeriesDown {
    width: 40px;
}

.dataSeries_SetupControl .gadgetOptionDataSeriesButtons .buttonMoveSeriesUp 
{
    margin-left: 5px;
}

.dataSeries_SetupControl .gadgetOptionDataSeriesTable, .dataSeries_SetupControl .gadgetOptionDataSeriesTableEmpty {
    height: 330px;
    width: 100%;
    border-top: none;
    border-left: 1px solid #9f9fa3;
    border-left-color: var(--border-color);
    border-right: 1px solid #9f9fa3;
    border-right-color: var(--border-color);
    border-bottom: 1px solid #9f9fa3;
    border-bottom-color: var(--border-color);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 5px;
}

.dataSeries_SetupControl .gadgetOptionDataSeriesTableEmpty {
    text-align: center;
    line-height: 325px;
    color: #9fa0a4;
    color: var(--text-color-subdued);
    font-size: 16px;
    font-weight: bold;
    padding: 0px;
    overflow: hidden;
}

.dataSeries_SetupControl .gadgetOptionDataSeriesTableSmall, .dataSeries_SetupControl .gadgetOptionDataSeriesTableSmallEmpty {
    height: 230px;
}

.dataSeries_SetupControl .gadgetOptionDataSeriesTableSmallEmpty {
    line-height: 225px;
}

.dataSeries_SetupControl .gadgetOptionDataSeriesTable .dataSeriesRowEntry
{
    cursor: pointer;
    padding: 6px 0px 6px 0px;
}

.dataSeries_SetupControl .gadgetOptionDataSeriesTable .dataSeriesTitle {
    display: inline-block;
    width: 650px;
    padding: 0px 0px 0px 10px;
    vertical-align: middle;
}

.dataSeries_SetupControl .gadgetOptionDataSeriesTable .dataSeriesColorSwatch {
    display: inline-block;
    text-align: center;
    margin-left: 10px;
    width: 18px;
    height: 14px;
    border: solid 1px #cbcbcb;
    border-color: var(--border-color-subdued);
    vertical-align: top;
    margin-top: 2px;
}


/***************************** Series Dialog Settings ********************/

.gadgetDataSeriesOptionsDialog .ddArrow {
    margin-top: -6px;
    background: none;
    font-size: 10px;
    left: 43px;
}

.gadgetDataSeriesOptionsDialog .customValueCheck {
    position: relative;
    top: -2px;
}

.gadgetDataSeriesOptionsDialog .customValueCheck input{
    position: relative;
    left: 2px;
    top: 2px
}

.gadgetDataSeriesOptionsDialog .seriesOptionTitle
{
    width: 560px;
}

.gadgetDataSeriesOptionsDialog .seriesOptionUnits 
{
    width: 225px;
}


.gadgetDataSeriesOptionsDialog .dialogValidationErrorMessage
{
    width:600px;
    padding-left: 20px;
}

.gadgetDataSeriesOptionsDialog .dataSeriesOptionTopicSection
{
    margin-left: 15px;    
}

.gadgetDataSeriesOptionsDialog .dataSeriesOptionDeviceSection, .gadgetDataSeriesOptionsDialog .dataSeriesOptionTopicSection {
    float: left;
    padding: 10px;
    width: 395px;
    height: 320px;
    border-radius: 8px;
    font-family: Arial;
    font-size: 13.333333px;
}

.gadgetDataSeriesOptionsDialog .dataSeriesOptionSectionSmall {
    height: 220px;
}

.gadgetDataSeriesOptionsDialog .dataSeriesOptionPropertiesSection
{
    width: 805px;
    margin-top: 10px;
    border-radius: 8px;
}
 
.gadgetDataSeriesOptionsDialog .dataSeriesOptionProperties
{
    height: 150px;
    padding: 5px;
}

.gadgetDataSeriesOptionsDialog .dataSeriesProperties select, .gadgetDataSeriesOptionsDialog .dataSeriesProperties input[type=number]
{
    border-radius:5px;
    height:28px;
}

.gadgetDataSeriesOptionsDialog .seriesOptionNumberOfDecimals
{
    width: 70px;
}

.gadgetDataSeriesOptionsDialog .seriesOptionLineWidth
{
    width: 80px;
}


.gadgetDataSeriesOptionsDialog .seriesOptionAxis
{
    width: 100px;
}

.gadgetDataSeriesOptionsDialog input.seriesOptionMultiplier
{
    width: 100px;
}


.gadgetDataSeriesOptionsDialog .seriesOptionsOverlayWrapper {
    border: 1px solid #9f9fa3;
    border-color: var(--border-color);
    border-radius: 5px;
    width: 223px;
    height: 24px;
    margin-right: 5px;
    background-color: #fff;
    background-color: var(--section-background-color);
    padding-left: 2px;
}

.gadgetDataSeriesOptionsDialog .seriesOptionsOverlayWrapper label {
    position: relative;
    top: 1px;
}

.gadgetDataSeriesOptionsDialog .seriesMultiplierWrapperseriesOptionsOverlayWrapper input{
    position: relative;
    top: 2px
}

.gadgetDataSeriesOptionsDialog .ddTitle 
{
    border-radius: 5px;
}

.gadgetDataSeriesOptionsDialog .seriesMultiplierWrapper label {
    position: relative;
    top: 1px;
}

.gadgetDataSeriesOptionsDialog .seriesMultiplierWrapper input {
    position: relative;
    height: 24px;
}

.gadgetDataSeriesOptionsDialog .seriesOptionPlaceholderDevice, .gadgetDataSeriesOptionsDialog .seriesOptionPlaceholderDatalog, .gadgetDataSeriesOptionsDialog .seriesOptionPlaceholderDeviceDatalog
{
    height: 28px;
    width: 76px;
    display:inline-block;
    margin-top:1px;    
}

.gadgetDataSeriesOptionsDialog .seriesOptionDeviceOnly
{
    cursor:pointer;
    background:url('/Slideshow/Content/Gadgets/images/data_source_01_28.png') 0 -28px;
}

.gadgetDataSeriesOptionsDialog .seriesOptionDeviceOnly:hover
{
    background:url('/Slideshow/Content/Gadgets/images/data_source_01_28.png') 0 0;
}

.gadgetDataSeriesOptionsDialog .seriesOptionDeviceOnlyActive, .gadgetDataSeriesOptionsDialog .seriesOptionDeviceOnlyActive:hover
{
    background:url('/Slideshow/Content/Gadgets/images/data_source_01_28.png') 0 -56px;
}

.gadgetDataSeriesOptionsDialog .seriesOptionDatalogOnly
{
    cursor:pointer;
    background:url('/Slideshow/Content/Gadgets/images/data_source_02_28.png') 0 -28px;
}

.gadgetDataSeriesOptionsDialog .seriesOptionDatalogOnly:hover
{
    background:url('/Slideshow/Content/Gadgets/images/data_source_02_28.png') 0 0;
}

.gadgetDataSeriesOptionsDialog .seriesOptionDatalogOnlyActive, .gadgetDataSeriesOptionsDialog .seriesOptionDatalogOnlyActive:hover
{
    background:url('/Slideshow/Content/Gadgets/images/data_source_02_28.png') 0 -56px;
}

.gadgetDataSeriesOptionsDialog .seriesOptionDeviceAndDatalog
{
    cursor:pointer;
    background:url('/Slideshow/Content/Gadgets/images/data_source_03_28.png') 0 -28px;
}

.gadgetDataSeriesOptionsDialog .seriesOptionDeviceAndDatalog:hover
{
    background:url('/Slideshow/Content/Gadgets/images/data_source_03_28.png') 0 0;
}

.gadgetDataSeriesOptionsDialog .seriesOptionDeviceAndDatalogActive, .gadgetDataSeriesOptionsDialog .seriesOptionDeviceAndDatalogActive:hover
{
    background:url('/Slideshow/Content/Gadgets/images/data_source_03_28.png') 0 -56px;
}