:root {
  --color-lg-bg-grey: #2d2c2c;
  --color-lg-bg-blue-grey: ##cccfd4;

}

html {}

body {
  font-family: 'Roboto', sans-serif;
  color: white;
  background: #09071a;
  background-image: url(../../images/bg.jpg);
  margin: 0px;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  /*overflow: hidden;*/
}

a {
  color: #343333;
  text-decoration: none;
}

a:hover {
  color: #ed0954;
  text-decoration: none;
}

.roboto {
  font-family: 'Roboto', sans-serif;
}

/********** START Customize scrollbar ******************/
/* width */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  margin: 0;

}

/* Track */
::-webkit-scrollbar-track {
  background: #343a40;
  border-radius: 50px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #b5b6b7;
  border-radius: 50px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ed0954;
}




/**************************************************************************************************/
/*** Commom START ******************************************************************************/
/**************************************************************************************************/

.border>div {
  border: 1px solid red;
}

.btn-gp {
  margin-top: 20px;
}

.ui-btn {
  font-size: 1rem;
  color: white !important;
  background: #2637b3;
  background: linear-gradient(180deg, #0575E6, #2637b3);
  padding: .58rem 1.95rem;
  margin: .5rem;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  outline: none !important;
  border-radius: 5px;
}

.ui-btn.purge {
  background: #4e73ff;
  color: white;
}

.ui-btn.ignore {
  background: #b0b1b3;
  color: black !important;
}


::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #706e6e;
  opacity: 1;
  /* Firefox */
  font-size: .9em;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #706e6e;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #706e6e;
}

.disable-click {
  pointer-events: none;
}

.title {
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 1.5em;
  color: rgba(255, 255, 255, 0.7);
}

.value-gp {
  color: white;
  text-shadow: 0 0 10px #17a2b8, 0 0 20px rgba(23, 162, 184, 0.4), 0 0 30px rgba(23, 162, 184, 0.4), 0 0 40px rgba(23, 162, 184, 0.5), 0 0 70px rgba(23, 162, 184, 0.5);
}

.value-m {
  font-size: 1.7em;
}

.value-l {
  font-size: 2.5em;
}

.value-xl {
  font-size: 3.8em;
}

.label {
  font-family: 'Raleway', sans-serif;
  font-size: 1.2em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.label-xs2 {
  color: #7c807f;
  font-size: 1.0em;
}

.label-xs {
  color: #7c807f;
  font-size: 0.8em;
}

.unit {
  font-family: 'Raleway', sans-serif;
  color: rgba(255, 255, 255, 0.7);
  padding-left: 5px;
}

.unit-l {
  font-size: 2em;
}

.unit-m {
  font-size: 1em;
}

.unit-s {

  font-size: 0.8em;
}

.legend-holder {
  position: relative;
}

.legend-gp {
  margin-top: 50px;
  /*   position: absolute;
   left:0;
   bottom:20px;*/
}

.legend-gp .itm-gp {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.legend-gp .itm-gp.target {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}


.legend-gp .itm .row>div {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}

.legend-gp .itm .icon {
  padding-right: 10px;
  padding-left: 15px;
}

.legent-txt {
  padding-left: 0;
  padding-right: 0;
  text-transform: uppercase;
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.5);
  padding-top: 3px;
}

.x-title {
  text-align: center;
  font-size: 1em;
  color: rgba(178, 131, 236, 0.75);
  text-transform: uppercase;
}

.box-reflect {
  background-image: url(../../images/box-reflect-long.png);
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 15px;
  text-align: center;
  margin-left: 10px;
}

.box {
  background: rgba(255, 255, 255, 0.04);
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
}

.box-title {
  font-family: 'Raleway', sans-serif;
  font-size: 2em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}

.box-sub-title {
  font-size: 1.2em;
  color: rgba(178, 131, 236, 1);
  text-align: center;
}

.hightlight-gp {
  margin-top: 20px;
  margin-left: 30px;
  margin-right: 30px;
}

.hightlight-gp .itm {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.hightlight-gp .itm:last-child {
  border-right: 0;
}

.hightlight-gp .itm:nth-child(5) {
  border-right: 0;
}

.hightlight-gp .label {
  font-family: 'Raleway', sans-serif;
  font-size: 1.2em;
  color: rgba(255, 255, 255, 0.5);
}

.hightlight-gp .value-gp {
  text-shadow: none;
}

.txt-desc {
  font-size: 1.2em;
  color: rgba(178, 131, 236, 0.75)
}


.main-holder {
  width: 1920px;
  height: 1080px;
  padding: 20px;
  position: relative;

}

.graph-holder {
  overflow-x: auto;
  display: flex;
}

/**************************************************************************************************/
/*** POWER: TODAY CONSUMPTION ******************************************************************************/
/**************************************************************************************************/

.power .today-info-gp {}

.power .today-info-gp .title {
  margin-bottom: 10px;
}

.power .today-info-gp .value-gp {
  margin-top: -5px;
}

.power .today-info-gp .itm-gp:first-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 10px;

}

.power .today-info-gp .itm {
  margin-bottom: 10px;
}

/**************************************************************************************************/
/*** POWER:EQUIP INFO ******************************************************************************/
/**************************************************************************************************/
.power .equip-info-gp {}

.power .equip-info-gp .box-round {
  background-image: url(../../images/box-round.png);
  background-size: cover;
  border-radius: 30px;
  padding: 15px;
  text-align: center;
  min-height: 230px;
  margin-bottom: 20px;
}

.power .equip-info-gp .label-gp>div {
  position: relative;
  -ms-flex-item-align: center !important;
  align-self: center !important;
}

.power .equip-info-gp .label-gp .label {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  text-align: left;
  padding-left: 5px;
  line-height: 1.2;
  /* height: 45px;*/
}

.power .equip-info-gp .label-gp img {
  width: 45px;
}

.power .equip-info-gp .value-gp {
  margin-top: 25px;
  text-shadow: none;
}

.power .equip-info-gp .value-gp:before {
  content: url('../../images/glow-red.png');
  position: absolute;
  top: -70px;
  left: -40px;

}

.power .equip-info-gp .compare-increase {
  font-size: 1.2em;
  color: #fa0b6a;
  margin-top: -10px;
}

.power .equip-info-gp .compare-decrease {
  font-size: 1.2em;
  color: #7fcb3b;
  margin-top: -10px;
}

.power .equip-info-gp .compare-label {
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.4);

}

.power .equip-info-gp .unit-statement {
  margin-top: 20px;
  font-size: 1em;
  color: #b283ec;

}

.power .bottom-pane {
  margin-top: 15px;
}

.power .bottom-pane .box {
  min-height: 770px;
  margin-bottom: 10px;

  margin-left: 10px;
}

.power .bottom-pane>div:first-child .box {
  margin-left: 0px;
}

.power .bottom-pane .box-title {
  padding-left: 50px;
  padding-right: 50px;
}

.power .power-consumption-gp, .seven-day-consumption-gp {
  m-flex: 0 0 29.5%;
  flex: 0 0 29.5%;
  max-width: 29.5%;
}

.power .power-consumption-gp .graph-holder {
  height: 580px;
}

.power .seven-day-consumption-gp .graph-holder {
  height: 530px;
}

.power .daily-consumption-gp .graph-holder {
  height: 445px;
}

.power .daily-consumption-gp .hightlight-gp {
  margin-top: 50px;
  justify-content: center !important;
  -ms-flex-pack: center !important;
}

.power .daily-consumption-gp .hightlight-gp .itm {
  margin-bottom: 10px;
}

.power .daily-consumption-gp .hightlight-gp .itm-gp {
  margin-left: 10px;
  margin-right: 10px;
}

.power .daily-consumption-gp .hightlight-gp .itm:last-child .itm-gp {
  margin-right: 0;
}

.power .daily-consumption-gp .hightlight-gp .itm:first-child(1) .itm-gp {
  margin-left: 0;
  margin-right: 0;
}

.power .daily-consumption-gp .hightlight-gp .itm:nth-child(2) .itm-gp {
  margin-left: 0;
  margin-right: 0;
}

.power .daily-consumption-gp .hightlight-gp .value-gp:before {
  content: url('../../images/glow-red-slim.png');
  position: absolute;
  top: -50px;
  left: -70px;
}

.power .daily-consumption-gp .hightlight-gp .txt-desc {
  margin-top: -5px;
}


/**************************************************************************************************/
/*** CHILLER:COMMOM ******************************************************************************/
/**************************************************************************************************/
.chiller {}

.chiller .unit {
  text-shadow: none;
}

.chiller .label {
  font-size: 1.4em;
  color: #8393f5;
  font-weight: 500;
}

.chiller .value {
  text-shadow: 0 0 10px #ee0abb, 0 0 20px rgba(238, 10, 187, 0.4), 0 0 30px rgba(238, 10, 187, 0.4), 0 0 40px rgba(238, 10, 187, 0.5), 0 0 70px rgba(238, 10, 187, 0.5);
}

.chiller .left-pane {
  width: 1100px;
}

.chiller .right-pane {
  width: 800px;
}

.chiller .top-pane {
  margin-top: 20px;
}

.chiller.thai .top-pane .logo .thai {
  display: inline-block !important;
}

.chiller.my .top-pane .logo .my {
  display: inline-block !important;
}

.chiller .top-pane .time-date-gp {}

.chiller .top-pane .time-date-gp .time {
  font-size: 4.3em;
  color: white;
  text-shadow: 0 0 10px #17a2b8, 0 0 20px rgba(23, 162, 184, 0.4), 0 0 30px rgba(23, 162, 184, 0.4), 0 0 40px rgba(23, 162, 184, 0.5), 0 0 70px rgba(23, 162, 184, 0.5);
  margin-top: -10px;
}

.chiller .top-pane .time-date-gp .date {
  font-size: 1.5em;
  color: rgba(255, 255, 255, 0.5);
  margin-top: -10px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.chiller .top-pane .temp-hum-gp {
  margin-left: 30px;
  margin-right: 30px;
  margin-top: -10px
}

.chiller .top-pane .temp-hum-gp .temp-gp>div,
.chiller .top-pane .temp-hum-gp .hum-gp>div {
  margin-left: 20px;
}

.chiller .top-pane .temp-hum-gp .txt-desc {
  margin-top: -10px;
  text-transform: uppercase;
  font-size: 1.1em;
}

.chiller .top-pane .temp-hum-gp .txt-desc span {
  display: block;
  margin-top: -5px;
}

.chiller .top-pane .temp-hum-gp .value-xl {
  font-size: 4.3em;
  font-weight: 100;
}

.chiller .top-pane .temp-hum-gp .temp-gp {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.chiller .top-pane .temp-hum-gp .temp-gp .value-gp {
  position: relative;
}

.chiller .top-pane .temp-hum-gp .temp-gp .unit {
  text-shadow: none;
  font-weight: 400;
  position: absolute;
  top: 15px;
}


.chiller .top-pane .temp-hum-gp .value-xl {
  font-size: 4.3em;
  font-weight: 100;
}

/**************************************************************************************************/
/*** CHILLER:DAILY PLANT CONSUMPTION **************************************************************/
/**************************************************************************************************/
.chiller .daily-plant-cons-gp {
  margin-top: 20px;
}

.chiller .daily-plant-cons-gp .box-title {
  margin-bottom: 20px;
}

.chiller .daily-plant-cons-gp .itm {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.chiller .daily-plant-cons-gp .itm:last-child {
  border-right: 0;
}

.chiller .daily-plant-cons-gp .itm .label {
  /*      font-size: 1.3em;*/
  margin-bottom: 10px;
}

.chiller.thai .daily-plant-cons-gp .txt-desc.thai,
.chiller.my .daily-plant-cons-gp .txt-desc.my {
  display: block !important;
  margin-top: 10px;
  font-size: 1.5em;
}

.chiller .daily-plant-cons-gp .progress-bar-gp {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 20px;
  height: 10px;

}

.chiller .daily-plant-cons-gp .progress-bar-gp .fill {
  height: inherit;
  border-radius: 20px;

}

.chiller .daily-plant-cons-gp .ch .progress-bar-gp .fill {
  background: #7e0f68;
}

.chiller .daily-plant-cons-gp .chwp .progress-bar-gp .fill {
  background: #ae3709;
}

.chiller .daily-plant-cons-gp .cdwp .progress-bar-gp .fill {
  background: #30590c;
}

.chiller .daily-plant-cons-gp .ct .progress-bar-gp .fill {
  background: #2c439a;
}


/**************************************************************************************************/
/*** CHILLER:TOTAL SYSTEM EFFECIENCY **************************************************************/
/**************************************************************************************************/
.chiller .total-sys-eff {}

.chiller .total-sys-eff .box {
  min-height: 620px;
}

.chiller .total-sys-eff .itm {
  margin-top: 25px;
  text-align: center;
  margin-bottom: 20px;
}

.chiller .total-sys-eff .itm .chart-gp {
  margin-top: 10px;
  min-height: 100px;
}

.chiller .total-sys-eff .itm .txt-desc {
  margin-top: 10px;
  font-size: 1.3em;
}

/**************************************************************************************************/
/*** CHILLER:COOLINGLAOD **************************************************************/
/**************************************************************************************************/

.chiller .cooling-load-gp {}

.chiller .cooling-load-gp .box-title {
  text-align: left;
  margin-bottom: 20px;
}

.chiller .cooling-load-gp .box-title span {
  color: #177acd;
  font-weight: 800;
}

.chiller .cooling-load-gp .cooling-load-arrow {
  margin-top: -10px;
}

.chiller .cooling-load-gp .cooling-load-bar {
  border-radius: 30px;
  background-image: url(../../images/cooling-load-color-chart.png);
  background-repeat: no-repeat;
  background-size: 100%;
  height: 26px;
  width: 100%;
}

.chiller .cooling-load-gp .color-bar .txt-desc {
  margin-top: 25px;
  height: 26px;
}

.chiller .cooling-load-gp .grey-bar-gp-title {
  margin-top: 22px;
}

.chiller .cooling-load-gp .grey-bar-gp {
  margin-top: 3px;
  height: 25.6px;
}

.chiller .cooling-load-gp .grey-bar-gp>div {
  text-align: center;
  padding: 2px;
}

.chiller .cooling-load-gp .grey-bar-gp>div:nth-child(1) {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  background-image: url(../../images/heat-balance-indicator-rect1.png);
}

.chiller .cooling-load-gp .grey-bar-gp>div:nth-child(2) {
  background-image: url(../../images/heat-balance-indicator-rect2.png);
}

.chiller .cooling-load-gp .grey-bar-gp>div:nth-child(3) {
  background-image: url(../../images/heat-balance-indicator-rect3.png);
}

.chiller .cooling-load-gp .grey-bar-gp>div:nth-child(4) {
  background-image: url(../../images/heat-balance-indicator-rect4.png);
}

.chiller .cooling-load-gp .grey-bar-gp>div:nth-child(5) {
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  background-image: url(../../images/heat-balance-indicator-rect5.png);
}

.chiller .cooling-load-gp .grey-bar-gp>div>span {
  /* padding:9px;*/
}

.chiller .cooling-load-gp .grey-bar-gp>div:after, .chiller .cooling-load-gp .grey-bar-gp>div:before {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8em;
  position: absolute;
  bottom: -25px;
}

.chiller .cooling-load-gp .grey-bar-gp>div:nth-child(1):after {
  content: '-10';
  left: 45px;
}

.chiller .cooling-load-gp .grey-bar-gp>div:nth-child(2):after {
  content: '-5';
  left: 48px;
}

.chiller .cooling-load-gp .grey-bar-gp>div:nth-child(3):after {
  content: '5';
  left: 51px;
}

.chiller .cooling-load-gp .grey-bar-gp>div:nth-child(4):after {
  content: '10';
  left: 48px;
}

.chiller .cooling-load-gp .grey-bar-gp>div:nth-child(5):after {
  content: '';
  left: 45px;
}

.chiller .cooling-load-gp .grey-bar-gp>div:nth-child(1):before,
.chiller .cooling-load-gp .grey-bar-gp>div:nth-child(2):before,
.chiller .cooling-load-gp .grey-bar-gp>div:nth-child(4):before,
.chiller .cooling-load-gp .grey-bar-gp>div:nth-child(3):before {
  content: '|';
  color: white;
  font-size: 0.5em;
  font-weight: 300;
  right: -2px;
  bottom: -10px;
}


/**************************************************************************************************/
/*** CHILLER:HEADER TEMP**************************************************************/
/**************************************************************************************************/
.chiller .header-temp-gp .box {
  min-height: 747px;
}

.chiller .header-temp-gp .box-sub-title {
  text-transform: uppercase;
}

.chiller.thai .header-temp-gp .box-sub-title.thai {
  display: block !important;
}

.chiller .header-temp-gp .chiller-water.itm-gp {
  margin-top: 30px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chiller .header-temp-gp .info-gp>.value-label {
  margin-bottom: 30px;
}

.chiller .header-temp-gp .chiller-water .info-gp {
  margin-top: 30px;
}

.separator {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  width: 1px;
  padding-left: 0;
  padding-right: 0;
}

.chiller .header-temp-gp .info-gp .label {
  text-align: center;
  margin-left: -20px;
}

.chiller .header-temp-gp .info-gp>.value-label {
  margin-top: 20px;

  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.chiller .header-temp-gp .itm-gp .temp-round {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 280px;
  text-align: center;
  padding: 41% 30px 0;
}

.chiller .header-temp-gp .chiller-water .temp-round {
  background-image: url(../../images/circle-chiller.png);

}

.chiller .header-temp-gp .condenser .temp-round {
  background-image: url(../../images/circle-condenser.png);
}

.chiller .header-temp-gp .chiller-water .temp-round>div>span:first-child {
  text-shadow: 0 0 10px #17a2b8, 0 0 20px rgba(23, 162, 184, 0.4), 0 0 30px rgba(23, 162, 184, 0.4), 0 0 40px rgba(23, 162, 184, 0.5), 0 0 70px rgba(23, 162, 184, 0.5);
}

.chiller .header-temp-gp .condenser .temp-round>div>span:first-child {
  text-shadow: 0 0 10px #ee0abb, 0 0 20px rgba(238, 10, 187, 0.4), 0 0 30px rgba(238, 10, 187, 0.4), 0 0 40px rgba(238, 10, 187, 0.5), 0 0 70px rgba(238, 10, 187, 0.5);
}

.chiller .header-temp-gp .itm-gp .temp-round>div {
  position: relative;
}

.chiller .header-temp-gp .itm-gp .temp-round .unit {
  position: relative;
  top: -10px;
}



.chiller .header-temp-gp .itm-gp .itm {
  margin-top: 29px;
  margin-bottom: 10px;
}

.chiller .header-temp-gp .itm-gp .itm .value-label {
  color: rgba(255, 255, 255, 0.5);

}

.chiller .header-temp-gp .itm-gp .itm>.value-gp>.unit {
  position: relative;
  top: -10px;
}

.chiller .header-temp-gp .itm-gp .itm>.compare-value {
  margin-top: 10px;
}

.chiller .header-temp-gp .itm-gp .itm>.txt-desc {
  /* text-align: center;*/
}


/**************************************************************************************************/
/*** WATER:BUILDING INFO **************************************************************/
/**************************************************************************************************/
.water {}

.water .top-pane {
  margin-top: 20px;
}

.water .top-pane .building-gp {
  margin-bottom: 30px;
}

.water .top-pane .title {
  font-size: 2em;
  -ms-flex-item-align: end !important;
  align-self: flex-end !important;
}

.water .building-info .extra-height {
  height: 225px;
}

.water .building-info>div {
  -ms-flex-item-align: end !important;
  align-self: flex-end !important;
}

.water .building-info .itm {
  position: relative;
  margin-bottom: 10px;
}

.water .building-info .building-gp>div:last-child {
  /*margin-right: 5px;*/

}

.water .building-info .itm .box-gp>div {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}

.water .building-info .itm .label {
  font-size: 1em;
  font-weight: 500;
  text-transform: capitalize;
}

.water .building-info .itm .value {
  font-size: 2em;
}

.water .building-info .itm .value.orange {
  color: #f78e06;
}

.water .building-info .itm .value.red {
  color: #fa2307;
}

.water .building-info .itm .value:after {
  content: url('../../images/glow-red.png');
  position: absolute;
  top: -70px;
  left: -10px;
}

.water .building-info .itm .txt-desc {
  font-size: 0.9em;
  margin-top: -5px;
}

.water .building-info .itm-1 {
  -ms-flex: 0 0 12.666667%;
  flex: 0 0 13.666667%;
  max-width: 13.666667%;
  padding-right: 0;
  margin-right: 0;
}

.isPC.water .building-info .itm-1 .box-gp {
  height: 195px;
}

/**************************************************************************************************/
/*** WATER:CONSUMPTION BY DAY **************************************************************/
/**************************************************************************************************/
.water .bottom-pane {
  margin-top: 22px;
}

.water .bottom-pane>div:first-child .box {
  margin-left: 0px;
}

.water .bottom-pane .box {
  min-height: 770px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.water .bottom-pane .box-title {
  padding-left: 50px;
  padding-right: 50px;
}


.water .water-consumption-byday-gp {
  m-flex: 0 0 28.5%;
  flex: 0 0 28.5%;
  max-width: 28.5%;
}

.water .seven-day-water-consumption-gp {
  m-flex: 0 0 27%;
  flex: 0 0 27%;
  max-width: 27%;
}

.water .seven-day-water-consumption-gp .graph-holder {
  height: 523px;
}

.water .water-consumption-equ-gp .graph-holder {
  height: 519px;
}

.water .water-consumption-equ-gp .hightlight-gp .itm-gp {
  margin-left: 35px;
}

.water .water-consumption-byday-gp .value-gp {
  text-align: center;
}

.water .water-consumption-byday-gp .circle {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 280px;
  text-align: center;
  padding: 31% 30px 0;

}

.water .water-consumption-byday-gp .circle.water {
  background-image: url(../../images/circle-pink.png);
}

.water .water-consumption-byday-gp .circle.rain {
  background-image: url(../../images/circle-orange.png);
}

.water .water-consumption-byday-gp .circle.flushing {
  background-image: url(../../images/circle-green.png);
}

.water .water-consumption-byday-gp .circle.cooling {
  background-image: url(../../images/circle-blue.png);
}

.water .water-consumption-byday-gp .circle .label {
  text-transform: capitalize;
  font-size: 2em;
}

.water .water-consumption-byday-gp .circle .label>span {
  display: block;
  margin-top: -5px;
}

.water .water-consumption-byday-gp .circle.water .label {
  color: #fa2307;
}

.water .water-consumption-byday-gp .circle.rain .label {
  color: #f4b406;
}

.water .water-consumption-byday-gp .circle.flushing .label {
  color: #4cbd84;
  margin-top: 15px;
  margin-bottom: 20px;
}

.water .water-consumption-byday-gp .circle.cooling .label {
  color: #06bff4;
}

.water .water-consumption-byday-gp .circle.water .value {
  text-shadow: 0 0 10px #ee0abb, 0 0 20px rgba(238, 10, 187, 0.4), 0 0 30px rgba(238, 10, 187, 0.4), 0 0 40px rgba(238, 10, 187, 0.5), 0 0 70px rgba(238, 10, 187, 0.5);
}

.water .water-consumption-byday-gp .circle.rain .value {
  text-shadow: 0 0 10px #f3990b, 0 0 20px rgba(243, 153, 11, 0.4), 0 0 30px rgba(243, 153, 11, 0.4), 0 0 40px rgba(243, 153, 11, 0.5), 0 0 70px rgba(243, 153, 11, 0.5);
}

.water .water-consumption-byday-gp .circle.flushing .value {
  text-shadow: 0 0 10px #d8e50f, 0 0 20px rgba(216, 229, 15, 0.4), 0 0 30px rgba(216, 229, 15, 0.4), 0 0 40px rgba(216, 229, 15, 0.5), 0 0 70px rgba(216, 229, 15, 0.5);
}

.water .water-consumption-byday-gp .circle.cooling .value {
  text-shadow: 0 0 10px #17a2b8, 0 0 20px rgba(23, 162, 184, 0.4), 0 0 30px rgba(23, 162, 184, 0.4), 0 0 40px rgba(23, 162, 184, 0.5), 0 0 70px rgba(23, 162, 184, 0.5);
}