*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html,
body {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  color: #ffffff;
  background-color: #232b2b;
  font-size: 1em;
}

.containerMain {
  height: 100%;
  width: 100%;
}

.scrollContainer {
  width: 99%;
  height: 100%;
  margin-right: 10px;
  overflow-y: auto;
}

/***********Login ***********************/

.meterTracLogo {
  width: 75%;
}

.meterTracLogo2 {
  padding: 5px;
  height: 90%;
}

.loginMain {
  color: #000;
  border-left: 2px solid #000000;
  border-right: 2px solid #000000;
  min-height: 100vh;
}

.loginInner {
  text-align: center;
  width: 40%;
  height: 50%;
  padding: 2.5rem;
  border-radius: 1em;
  border: 4px solid #444242;
}

.loginInput {
  width: 100%;
}

.inputNoMarginBottom {
  height: 35px;
  color: #fff;
  background-color: #222121;
  border-color: #444242;
  border-radius: 5px;
}

.errorMessage {
  color: #cc1520;
}

/***********main ***********************/

.borderGrey {
  border: 3px solid #c2bebe;
  margin: 5px;
}

.reportChartTitle {
  padding: 5px;
}

.innerPowerHeight {
  height: 93%;
  width: 100%;
}

.full-height {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.full-height2 {
  display: flex;
  height: 100%;
  width: 100%;
}

.header {
  position: relative;
  height: 8%;
  width: 100%;
}

.footer {
  padding: 5px;
  height: 5%;
  width: 100%;
  text-align: center;
}

.nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.powerNav {
  padding-left: 10px;
  display: flex;
  height: 7%;
  width: 100%;
}

.nav-btn {
  padding: 0 15px;
  height: 40px;
  background-color: #747474;
  border: none;
  color: #FFF;
  margin-right: 4px;
}

.nav-btn-active {
  padding: 0 15px;
  height: 40px;
  background-color: #ff7f0e;
  border: none;
  color: #FFF;
  margin-right: 4px;
}

.btn-organge {
  background-color: #000;
  height: 30px;
  width: 100px;
  border: 2px solid #ff7f0e;
  color: #FFF;
}

.btn-organge-small {
  background-color: #000;
  height: 30px;
  width: 30px;
  border: 2px solid #ff7f0e;
  color: #FFF;
}

.btn-organge-small-active {
  background-color: #ff7f0e;
  height: 30px;
  width: 30px;
  border: 2px solid #FFF;
  color: #FFF;
}

.mainMain {
  height: 87%;
  width: 100%;
}

.treeContainer {
  margin: 0px 10px;
  background-color: #444242;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 12.5%;
}

.contentContainer {
  height: 100%;
  flex: 1;
}

.treeTitle {
  background-color: #000;
  padding: 5px;
  padding-left: 20px;
}

.treeContent {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.treeNode {
  padding-top: 5px;
  padding-left: 20px;
}

.suvTreeNode {
  margin: 5px;
  border-left: 1px solid #FFF;
  border-right: 1px solid #FFF;
}

.subTreeNodeTitle {
  text-transform: uppercase;
  padding: 5px;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #FFF;
}

.subTreeNodeChild {
  padding: 5px;
  padding-left: 20px;
  border-bottom: 1px solid #FFF;
}

.sample {
  max-height: 1800px;
  overflow: hidden;
}

.sample.ng-hide-add {
  transition: max-height 0.5s ease-out;
}

.sample.ng-hide-remove {
  transition: max-height 0.5s ease-in;
}

.sample.ng-hide {
  max-height: 0;
}

.hover-pointer {
  cursor: pointer;
}

.treeNode:hover {
  cursor: pointer;
}

.childtreeNodePower,
.childTreeNodeWater,
.childTreeNodeGas,
.childTreeNodeCompare {
  padding: 5px;
  padding-left: 20px;
}

.childtreeNodePower:hover {
  background-color: #ff7f0e;
  color: #000 !important;
  opacity: 0.7;
}

.childTreeNodeWater:hover {
  background-color: #00BFFF;
  color: #000 !important;
  opacity: 0.7;
}

.childTreeNodeGas:hover {
  background-color: #fd2146;
  color: #000 !important;
  opacity: 0.7;
}

.childTreeNodeCompare:hover {
  background-color: #dbdb26;
  color: #000 !important;
  opacity: 0.7;
}

.selected {
  color: #ff7f0e !important;
}

.selected-water {
  color: #00BFFF !important;
}

.selected-gas {
  color: #fd2146 !important;
}

.selected-compare {
  color: #dbdb26 !important;
}


.expander {
  height: 10px;
  width: 10px;
}

/*********** home ***********************/

div.homepage {
  height: 100%;
  width: 100%;

}

.infoBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 7px;
  color: #ff7f0e;
  z-index: 1000;
  background: #000;
  border: 2px solid #FFF;
}

div.homeContentUpper {
  height: 60%;
  width: 100%;
}

div.homeContentLower {
  padding-top: 10px;
  height: 40%;
  width: 100%;
}

div.homeContentUpperLeft {
  height: 100%;
  width: 80%;
  float: left;
}

div.homeContentUpperRight {
  padding: 10px;
  padding-top: 30px;
  height: 100%;
  width: 20%;
  float: left;
}

div.homeuppercharttitle {
  height: 10%;
  width: 100%;
  text-align: center;
  color: white;
}

div.homeupperchartdiv {
  height: 90%;
  width: 100%;
}

#homeupperchart,
#homevoltschart,
#homeampschart,
#homepfchart,
#homeapchart {
  height: 100%;
  width: 100%;
}

div.homeContentLowerOneChart {
  height: 100%;
  width: 25%;
  float: left;
  padding-right: 10px;
}

div.homeContentLowerOneChartTitle {
  padding-left: 15px;
  height: 10%;
  width: 100%;
  color: white;
}

div.homelowerchart {
  height: 80%;
  width: 100%;
}

div.homeContentLowerOneChartFooter {
  height: 10%;
  width: 100%;
  text-align: center;
  color: white;
}

/*********** summary.html ***********************/

.summaryContainer {
  height: 100%;
  width: 100%;
  padding: 10px;
}

.circuitsChart {
  padding: 15px;
  height: 100%;
  width: 20%;
}

.chart {
  height: 100%;
  width: 100%;
}

.chartHalf {
  height: 50%;
  width: 100%;
}

.chartHalf2 {
  height: 45%;
  width: 100%;
}

.chartHalf2Title {
  height: 5%;
  width: 100%;
}

.consLeftTitle {
  width: 100%;
  height: 10%;
}

.consLeftChart {
  width: 100%;
  height: 65%;
}

.consLeftStats {
  width: 100%;
  height: 25%;
}

.chartWidthOnly {
  width: 100%;
}

.datepickerbuttonInner {
  width: 100%;
  height: 100%;
  background-color: #dddddd;
  border: 1px solid #000000;
}

.datepickerbuttonInner td {
  border: 1px solid #000000;
  vertical-align: middle;
  text-align: center;
}

.datepickerbuttonleft {
  width: 14%;
  height: 100%;
  font-size: 1.6vmin;
  padding-top: 1%;
}

.datepickerbuttonmiddle {
  width: 72%;
  height: 100%;
}

.datepickerbuttonright {
  width: 14%;
  height: 100%;
  font-size: 1.6vmin;
  padding-top: 1%;
}

.intervalContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 15px;
  height: 100%;
  width: 10%;
}

.chartleftchart {
  height: 100%;
  width: 70%;
}

.chartleftchartBig {
  height: 100%;
  width: 80%;
}

.chartrightlegend {
  height: 100%;
  width: 30%;
  overflow-y: auto;
  overflow-x: hidden;
}

.chartrightlegendSmall {
  height: 100%;
  width: 20%;
  overflow-y: auto;
  overflow-x: hidden;
}

.thechart {
  background-color: #FFFFFF;
  height: 100%;
  width: 100%;
}

/*********** overview ***********************/
div.overviewpage {
  width: 100%;
  height: 100%;
}

.orange {
  background-color: #ff7f0e !important;
}

div.overviewContentControl {
  height: 8%;
  width: 100%;
  padding-top: 10px;
  padding-left: 10px;
}

div.overviewContentMain {
  height: 92%;
  width: 100%;
  padding: 10px;
}

div.overviewContentLeft {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 80%;
  float: left;
  padding-left: 10px;
}

div.overviewContentRight {
  position: relative;
  height: 100%;
  width: 20%;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
}

.overviewStateInner {
  position: absolute;
  height: 100%;
  width: 100%;
}

div.overviewonerow {
  padding-top: 20px;
  height: 20%;
  width: 100%;
}

div.ovrowleftbuttons {
  user-select: none;
  color: #ff7f0e;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  height: 100%;
  width: 10%;
  float: left;
}

.ovrowleftUnit-single {
  font-size: 0.8em;
}

.ovrowleftUnit-multi {
  font-size: 0.8em;
  color: #FFF;
}

.ovrowleftUnit-multi:hover {
  cursor: pointer;
}


div.ovrowrightchart {
  height: 100%;
  width: 90%;
  float: left;
}

#kwhchart,
#rpchart,
#pfchart,
#currentchart,
#vlnchart {
  height: 100%;
  width: 100%;
}

.datepickerbutton {
  height: 30px;
  float: left;
  color: #FFF;
}

div.datepickerbuttonInnerC {
  float: left;
  border: 2px solid #FF7F50;
}

div.datepickerbuttonleftC {
  padding: 4px;
  float: left;
  border-right: 1px solid;
}

div.datepickerbuttonmiddleC {
  padding: 4px;
  float: left;
}

div.datepickerbuttonrightC {
  padding: 4px;
  float: left;
  border-left: 1px solid;
}

/*********** charts ***********************/
div.historypage {
  width: 100%;
  height: 100%;
}

.treeInner_charts {
  height: 25%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.treeInnerLower_charts {
  height: 30%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 10px;
  background: #fff;
  border-top: 2px solid #343536;
  border-bottom: 2px solid #343536;
  overflow-y: auto;
}

.tree_submeasurement_charts {
  height: 45%;
  width: 100%;
  background: #fff;
  overflow-y: auto;
}

.collapselisttitle {
  cursor: pointer;
}

.submeasurementsul {
  height: 100%;
  width: 100%;
  list-style: none;
  text-align: center;
  padding-left: 0px;
  overflow-y: auto;
  margin-bottom: 0px;
}

.chartsubli {
  padding-top: 1px;
  padding-bottom: 1px;
  cursor: pointer;
}

.chartsubli:hover {
  background-color: #eeeeee;
}

div.historypage_content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.historypage_content_chart {
  height: 50%;
  width: 100%;
}

.chartsMainControlsC {
  width: 100%;
  height: 5%;
  padding: 2px;
}

.charts_m_ctrl_dropdown_interval {
  height: 100%;
  float: left;
  position: relative;
  height: 1.8em;
}

.elspace {
  margin-left: 0.25em;
}

.titlebutton {
  height: 30px;
  color: #FFF;
  background-color: #000;
  border: 2px solid #ff7f0e;
}

div.intervalbuttondivC {
  float: left;
  height: 1.8em;
}

div.charttitlebuttondivLeft {
  height: 1.8em;
  float: left;
}

.kpibuttonOff1 {
  width: 100%;
  height: 100%;
  padding: 0px;
}

div.chartTopButtons {
  float: left;
  height: 1.8em;
}

.btnTopBar {
  height: 100%;
  width: 1.8em;
  float: left;
  background-color: #40a2d3;
  color: #e6e6e6;
}

.btnTopBar:hover {
  background-color: #40a2d3;
}

.btnTopBar:active {
  background-color: #40a2d3;
}

.btnTopBarOff {
  width: 4.5vmin;
  height: 100%;
  float: left;
  background-color: #266c8e;
  color: #e6e6e6;
}

.btnTopBarOff:hover {
  background-color: #40a2d3;
}

.btnTopBarOff:active {
  background-color: #40a2d3;
}

div.chartsArea {
  width: 100%;
  height: 1%;
}

.charts_m_stats_area {
  font-size: 0.7em;
  height: 38%;
  padding: 0px 10px;
  color: #FFF;
  width: 100%;

  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.noData {
  font-size: 1.8rem;
  font-weight: bold;
}

.stats_item {
  margin-bottom: 5px;
  border: 1px solid #e6e6e6;
  width: 23%;
}

.stats_item-content {
  padding: 2px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stats_item-content-inner {
  width: 50%;
}

div.numberdiv {
  width: 8%;
  text-align: center;
  font-weight: bold;
  float: left;
  margin: auto;
}

div.statTitleSpan {
  font-size: 0.9em;
  width: 86%;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  font-weight: bold;
  float: left;
  margin: auto;
}

.stats-fold-select {
  background-color: #000;
  width: 100px;
}

div.closediv1 {
  width: 6%;
  padding: 1px;
  top: 0px;
  right: 0px;
  cursor: pointer;
  text-align: center;
  float: right;
  margin: auto;
  position: relative;
}

div.charts_m_stats_row_cell_measurement {
  width: 100%;
  position: relative;
}

div.charts_m_stats_row_cell_unit {
  width: 100%;
  display: flex;
  position: relative;
}

.charts_m_stats_dropdownbutton {
  background-color: transparent;
  border: none;
  height: 100%;
  padding-top: 0px;
}

div.charts_m_stats_row_cell_unit_column {
  width: 50%;
  margin: auto;
  text-align: center;
}

div.datapickerLabel {
  width: 8%;
  height: 100%;
  float: left;
  padding-right: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: center;
  font-size: 0.9em;
  font-weight: bold;
}

.series0_color {
  color: #ea4335;
}

.series1_color {
  color: #4285f4;
}

div.datepickerbutton1 {
  height: 30px;
  float: left;
}

div.chartsStatsButtonsDiv {
  width: 6%;
  height: 100%;
  float: left;
  padding-right: 4px;
}

button.btnstatsright:hover {
  background-color: #afd8ed;
}

button.btnstatsright:focus {
  background-color: white;
}

button.btnstatsright:active {
  background-color: white;
}

/***********Utility styles ***********************/

.flexBoxCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.col50 {
  width: 50%;
  height: 100%;
}

.alignLeft {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.chartOptionBtn {
  height: 20px;
  width: 20px;
}

.inputStyle {
  margin: 5px;
  padding: 3px;
  width: 50px;
  height: 30px;
  background-color: #000;
  border: 2px solid #ff7f0e;
  color: #FFF;
}

.btn-day-active {
  height: 30px;
  margin-right: 5px;
  padding: 3px;
  background-color: #000;
  border: 2px solid #00FF7F;
  color: #00FF7F;
}

.btn-day-inactive {
  height: 30px;
  margin-right: 5px;
  padding: 3px;
  background-color: #000;
  border: 2px solid #ff0000;
  color: #ff0000;
}

.alignRight {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.marginBot {
  margin-bottom: 1.0rem;
}

.margin-right {
  margin-right: 1.0rem;
}

.margin-left {
  margin-left: 1.0rem;
}

.flex-column {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.flex-row {
  display: flex;
  align-items: center;
}

.pointerIcon {
  cursor: pointer;
}

.itemhidden {
  visibility: hidden;
}

/*******************************************
REPORTS styles
*******************************************/

.reportsPage {
  height: 100%;
  width: 100%;
}

.reportsControl {
  padding: 5px;
  padding-left: 10px;
  max-height: 7%;
  width: 100%;
}

.reportsTemplateContainer {
  min-height: 86%;
  width: 99%;
}

.reportGeneralVScoll {
  height: 10%;
  width: 100%;
}

.reportGeneralHScoll {
  border: 2px solid #ff7f0e;
  height: 12%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.reportGeneralVScoll_title {
  width: 8%;
  height: 100%;
}

.reportGeneralVScoll_content {
  width: 92%;
  height: 100%;
  overflow-x: auto;
  display: flex;
}

.reportGeneralVScoll_item {
  margin: 5px;
  width: 15%;
  border: 2px solid #fff;
  height: 100%;
}

.reportGeneralChartsContainer {
  height: 100%;
  width: 100%;
}

.rgcSplit {
  height: 100%;
  width: 50%;
}

.rgcStat {
  width: 100%;
  height: 6%;
}

.fc-orange {
  color: #ff7f0e;
}

.fc-yellow {
  color: #F5F500;
}

.rgcChart {
  width: 100%;
  height: 88%;
}

.rgcChartContainer {
  height: 100%;
  width: 75%;
}

.rgcStatContainer {
  height: 100%;
  width: 25%;
}

.rgcStat-col {
  height: 100%;
  width: 33.3333333333%;
}

.demandLeftContainer {
  border: 2px solid #ff7f0e;
  width: 20%;
  height: 100%;
  user-select: none;
  justify-content: space-between;
}

.demandRightContainer {
  width: 80%;
  height: 100%;
}

.chartStatDemand {
  width: 20%;
  height: 100%;
}

.titleVscroll {
  font-weight: bold;
  padding: 5px;
  height: 4%;
  width: 95%;
}

.ctrlVscroll {
  padding: 5px;
  height: 7%;
  width: 100%;
}

.ctrlVscroll:hover {
  cursor: pointer;
}

.contentVscroll {
  font-size: 14px;
  height: 80%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.vBarItem {
  width: 95%;
  height: 10%;
}

.hBarItem {
  padding: 5px;
  text-align: center;
  width: 10%;
  height: 100%;
}

.hBarContent {
  height: 10%;
  width: 100%;
}


.titleHscroll {
  font-weight: bold;
  padding: 5px;
  height: 100%;
  width: 5%;
}

.contentHscroll {
  font-size: 13px;
  width: 80%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.ctrlHscroll {
  padding: 5px;
  height: 100%;
  width: 7%;
}

.ctrlHscroll:hover {
  cursor: pointer;
}

/************************
SETTINGS STYLES
*************************/



.settings_input {
  color: #000;
  margin: 7px;
  height: 35px;
}

.settings_input-title {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  width: 100%;
}

.settings-row {
  width: 45%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.settings_title {
  width: 100%;
  padding: 7px 10px;
  color: #FFF;
}

.padding-sm {
  padding: 10px 0px;
}

.settings_btn {
  padding: 5px 20px;
  background-color: #a5a3a3;
  border: none;
  color: #000;
}

.settings_padding {
  padding: 25px 150px;
}

@media only screen and (max-width: 1300px) {

  html,
  body {
    font-size: 0.8em;
  }

  .nav-btn {
    height: 30px;
  }

  .nav-btn-active {
    height: 30px;
  }

  .settings-row {
    width: 75%;
  }

  .hBarItem {
    width: 15%;
    font-size: 0.8em;
  }

  .vBarItem {
    text-align: center;
    font-size: 0.8em;
  }
}


/* 27 June 2025 */

.reportGeneralHScoll{ 
  height: 20%;
  overflow-y: auto;
  align-items: center;
}

.hBarItem{ 
  height: 100%;
    display: flex;
    align-items: center;
}
.treeContent.treeFullWidth{
  height: 100%;
}
div.h-full{
  height: 100%;
  width: 100%;
  max-width: 100%;
  display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.stats_item{
  height: 49%;
}
.main-full-height{
  max-height: 90%;
  height: 100%;
}
.main-full-height .charts_m_stats_area{
  height: 41%;
}
.main-full-height .stats_item{
  max-width: 24.5%;
  width: 100%;
  font-size: 10px;
}
@media(max-width:1400px){
  .stats_item-content{
    font-size: 9px;
  }
}