@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


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

}


html {
    overflow-x: hidden;
}

body{
    font-family: "Open Sans", serif;
    background: white;
    padding:0px;
    margin:0px;
    font-size:14px;
/*    letter-spacing: 1px;*/
    background: linear-gradient(to Bottom, #f0eeee, #deeaf6); 
    background-color: #deeaf6;
}


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


/*.hide{display: none!important;}*/
.hide{opacity: 0!important;}
.hide-display {display: none!important;}

/********** 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; 
}



/********** End Customize scrollbar ******************/
/************************************************/




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

.border > div{
    border:1px solid red;
}
.no-border{
    border:0!important;
}
.border-top{
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.border-bottom{
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.bg{
    position: absolute;
    z-index: 1;
    top:0;
    left:0;
}

::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;}

.isPC .main{
    overflow: hidden;
}

.main-holder{
    width: 1920px;
    /*height: 960px;*/
    position: relative; 
    transform-origin: 0 0;
}

.ui-btn{
    background: #a6e473;
    border-radius: .3rem;
    padding: 0.2rem 2rem;
    font-weight: 700;
}

.icon-more{
    transform: translateY(-3px)
}

/*TEXT DISPLAY*/
.value{
    color:black;
    font-weight: 700;
}
    .value-xxl{
        font-size: 2.5em;
    }
    .value-xl{
        font-size: 2em;
    }
    .value-l{
        font-size: 1.5em;
    }
    .value-m{
        font-size: 1.2em;
    }
    .value-s{
        font-size: 0.9em;
    }

.unit{
    color:#b4b5b1;
    margin-left: 5px;
    font-weight: 600;
}
    .unit-xxl{
        font-size: 1.5em;    
    }

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

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

    .unit-s{
        font-size: 0.65em;     
    }

.label{
    color:rgba(0,0,0,0.5);
    font-weight: 600;
    text-transform: uppercase;
    margin-top: -3px;
}
    .label-l{
        font-size: 1.1em;
    }
    .label-m{
        font-size: 0.8em;
    }

    .label-s{
        font-size: 0.75em;
    }
    .label-xs{
        font-size: 0.7em;
    }

.note{
    color:#b283ec;
    font-size: 0.9em;
}
.txt-name {
    font-weight: bold;
    color: black;
}
.txt-desc {
    color: #8393f5;
    font-weight: 500;
}

.txt-desc-dim{
    color:rgba(0,0,0,0.5);
    font-size: 0.85em;
    font-weight: 600;
}

/*Title Start*/
.box-title{
    text-transform: uppercase;
    color: #2c2c2c;
    font-weight: 600;
    font-size: 0.9em;
}
.section-title{
    text-transform: uppercase;
    font-weight: 600;
    font-size:1.1em;
    color:#8393f5;
}
.subtitle{
    color:#797373;
    font-size: 0.8em;
    font-weight: 600;
}
.title-value{
    color: #177acd;
    font-size: 1.5em;
    font-weight: 700;
    margin-left: 1rem;
}

.title-label{
    color:#8393f5;
    font-weight: 600;
}
.sub-label{
    color:rgba(0,0,0,0.5);
    font-size: 1em;
    font-weight: 600;
}

.page-title{
     text-transform: uppercase;
    font-size: 1.5em;
    font-weight: 600;
    margin-bottom: 1rem;
}

.color-cold{
    color:#24abf9;
}
.color-hot{
    color:#f983ca;
}

.color-orange{
    color:#faab14;
}
.color-increase{
    color:#fa0b6a;
    font-weight: 700;
}

.color-decrease{
    color:#68b826;
    font-weight: 700;
}
.color-good{
    background: linear-gradient(to Right, #abe77a, #64be1a);
    color:white;
}

.tag{
    border-radius: 1rem;
    padding:0.1rem 0.5rem!important;
    margin:0 0.5rem;
    font-size: 1em;
    /*line-height: 1rem;*/
}


.arrow-s img{
    width:10px;
    margin-right: 5px;
    transform: translateY(-1px);
}
.arrow-m img{
    width:12px;
    margin-right: 5px;
    transform: translateY(-2px);
}

.watermark{
    position: absolute;
    bottom:10px;
    left:10px;
}


.page-gap{
    width:2rem;
}
.side-menu-bg{
    position: absolute;
    top:0;
    width:70px;
    bottom:0;
    left: 0;
    background: white;
    transform-origin: 0 0;
}
.side-menu-gp{
    background: white;
}
.side-menu {
    margin-top: 3.5rem;
}
    .side-menu .extra{
        display: none;
    }
/*        .side-menu:hover .extra{
            display: block !important;
            transition: all 2s;
        }*/
.side-menu a{
    color:rgba(0,0,0,0.5);
}



    .side-menu .itm{
        margin:0.7rem 0.5rem;
    }
        .side-menu .itm .icon{
            padding:0.6rem 0.7rem;
        }

        .side-menu .itm .icon img{
             width:30px;
        }
        .side-menu .itm.active .icon{
            background: #a6e473;
            border-radius: 100%;
            padding:0.6rem 0.7rem;
        }

    .side-menu .seperator > div:nth-child(2){
        border-top:1px solid #c0c6d5;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }


.logo{
    margin-right: 1rem;
}
    .logo img{
         width:55px;
    }

.top-menu{
    margin-top: 0.5rem;
    margin-bottom: 0.3rem;
}
    .top-menu .label{
        margin-right: .5rem;
        line-height: 0.6rem;
    }

.vline{
    margin-left: 1.5rem;
   /* border-right:1px solid rgba(0,0,0,0.3);*/
    width:1px;
    background-color: rgba(0,0,0,0.3);
    height: 10px;
    display: inline-block;
}
.vline-bg{
    background-color: rgba(0,0,0,0.1);
    width:1px;
}

.hline{
    width:100%;
    background-color: rgba(0,0,0,0.1);
    height: 1px;
    margin:1rem 0;
}

.box{
   background: white;
   border-radius: 1rem;
   padding: 1rem;  
   margin-right: 0.7rem;
   margin-bottom: 0.7rem;
}

/*Title END*/

.list-table{
    font-weight: 600;
}
.list-table-m .itm > div{
    padding:.5rem;
}
.list-table .table-header > div{
    text-transform: uppercase;
    font-size: 0.8em;
    color:rgba(0,0,0,0.5)!important;
}
    .list-table .itm > div, .list-table .table-header > div{
       /* -ms-flex-item-align: center !important;
        align-self: center !important;*/
    }

    .list-table .itm{
        background: #f9f9f9;
        font-size: 0.9em;
       
    }
        /* .list-table .itm > div {
              padding: 0.3rem;
         }*/
        .list-table .itm,  .list-table .table-header{
             margin:0.5rem 0;
        }
        .list-table .table-header{
            margin-bottom: 0!important;
        }
        .list-table .itm .column-1{
            color:#2c2c2c;
            font-weight: 700;
        }
      
        .list-table .column-color{
            width:7px;
        }
        .list-table .itm span,  .list-table .table-header span{
            padding: 0.3rem;
            display: inline-block;
        }

    .list-table span {
        margin-left: 10px;
    }



.alt-row.list-table .itm:nth-child(odd){
   background: #eef2f5;
}

.box .inner-scroll{
    overflow-y: auto;
    height: calc(100vh - 245px);
}

.sort-ascending{
    position: relative;
}

.sort-ascending:after, .sort-descending:after{
    position: absolute;
    top: 6px;
    margin-left: 3px;
}
    .sort-ascending:after{
        content:url(../../images/sort-arrow-dw.png);

    }
    .sort-descending:after{
        content:url(../../images/sort-arrow-up.png);
    }


.status-good{
   color:#13c556;
   cursor: pointer;
}

.status-check{
    color:#f7bc08;
    cursor: pointer;
}

.dot{
    width:8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    margin-right: 5px;
    margin-left:10px;
}

.dot-green{
    background:#13c556;
}
.dot-orange{
    background:#f7bc08;
}

.dot-red{
    background: #fb565d;
}



/* Form START */
input{
    background: white;
    border: rgba(0,0,0,0.6);
    border-radius: 3rem;
    
}
.custom-input-icon{
   position: relative;
    margin-right: 1rem;
}
.custom-input-icon:before{
   position: absolute;
    top:0px;
    left:10px;
   
}
.custom-input-icon input{
     padding: 0.4rem  0.4rem 0.4rem 2rem ;
}

.custom-input-icon.icon-search:before{
     content: url(../../images/input-icon-search.png);
}

/*TOGGEL START*/
.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 15px;
    transform: translateY(3px);
}
label.switch{
    margin-bottom: 0;
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 2px;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.switch .slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 0px;
    bottom: 0px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.switch input:checked + .slider {
  background-color: #81cf42;
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #81cf42;
}

.switch input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}


/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/*TOGGEL END*/
.radio-gp{
    margin-top: 2px;
}
.radio-gp label{
    margin-right: 1rem;
}
.radio-gp input[type="radio"] ~ span{
    padding-left: 0.5rem;
    position: relative;
}

input[type="radio"]{
    color:#81cf42;
    width: 18px;
    height: 18px;
    border: 3px solid white;
    border-radius: 50%;
    outline: 2px solid #ccc;
    background-color: white;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    transform: translateY(4px);
}
    input[type="radio"]:checked  {
        background-color: #81cf42;
        outline: 2px solid #81cf42;
        border: 3px solid white;
    }

.custom-checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
 /* margin-bottom: 12px;*/
  cursor: pointer;
  font-size: 1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    border-radius: 0.3rem;
    background-color: #f0f1f1;
}
.box .checkmark{
    border:1px solid #ced1d3;
}

/* On mouse-over, add a grey background color */
.custom-checkbox:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a Green background */
.custom-checkbox input:checked ~ .checkmark {
  background-color: #81cf42;
}
.box .custom-checkbox input:checked ~ .checkmark {
  border:0;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.custom-checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 3rem;
    border:0;
    padding: 0.1rem 2rem 0rem 1.2rem;
    color: rgba(0, 0, 0, 0.6);
    min-width:80px;
}

.box select{
    border:1px solid #cfd5db;
    margin-left:0.5rem;
}
.custom-select-box{
    position: relative;
}
.custom-select-box:after {
    content: url(../../images/arrow-dw.png);
    position: absolute;
    top: 0;
    right: 0.8em;
    pointer-events: none;
}

.top-menu select{
    font-size: 0.85em;
}

/* Form END */

.icon-ai{
    position: absolute;
    bottom: 0;
    right:0;
}




.legend-gp{
    margin-top: 1rem;
}
    .legend-gp > div.col-auto{
        margin:0 10px;
    }
    .legend-icon{
        margin-right: .5rem;
    }
    .legend-line{
        height: 5px;
        width: 15px;
        display: inline-block;
        margin-right: .3rem;
    }
    .legend-dot-line{
        transform: translateY(-4px);
        display: inline-block;
        margin-right: .3rem;
        font-weight: 700;
    }
    .legend-dot{
        height: 10px;
        width: 10px;
        display: inline-block;
        margin-right: .3rem;
        border-radius: 100%;
    }
    .legend-txt{
        font-size: .85em;
        font-weight: 600;
        text-transform: uppercase;
        color:rgba(0,0,0,0.4);
    }

/**************************************************************************************************/
/*** MAIN START ******************************************************************************/
/**************************************************************************************************/

/*Building Info */
.builiding-info, .left-gp{
    width:15%;
}
    .builiding-info .icon-building{
        margin-top:1rem;
        margin-bottom: 1rem;
        text-align: center;
    }
    .builiding-info .icon-building img{
        height: 55px;
    }
    .builiding-info .itm-gp .itm{
        margin:0.7rem 0;
    }

    .builiding-info .icon img{
        transform: translateY(2px);

    }


/*** DATA QUALITY START ******************************************************************************/

.data-quality .box{
    height:290px; 
}
.data-quality .box-title{
    margin-bottom: 10px;
}
.data-quality .list-table .column-1{
    
}

.data-quality .list-table .column-2{
    width:30%;
    color:#1ca9ea;
}

.data-quality .list-table .column-3{
    width:25%;
    color:#6a6c6b;
}

.data-quality .list-table .itm .column-2, .data-quality .list-table .table-header .column-2{
    text-align: right;
}
.data-quality .list-table .itm .column-3, .data-quality .list-table .table-header .column-3{
    text-align: right;
}

.data-quality .list-table .column-1 span{
    margin-left: 10px;
     color:#2c2c2c !important;
}



/*** DATA SOURCES START ******************************************************************************/

.data-sources .box{
    height:290px; 
}
.data-sources .box-title{
    margin-bottom: 10px;
}
.data-sources .list-table .column-1{
}

.data-sources .list-table .column-2{
    width:25%;
    color:#1ca9ea;
    font-weight: 700;
  /*  text-align: left;*/
}

.data-sources .list-table .column-3{
    width:25%;
    color:#6a6c6b;
}

.data-sources .list-table .column-1 span{
    margin-left: 10px;
}


/*** LEFT GP : TOP INCOMING CONNECTIONS START ********************************************************/

.incoming-connection{
    height: 370px;
}

.incoming-connection .txt-desc{
    margin-top:5px;
}

/*** LEFT GP : TOP OUTGOING CONNECTIONS START ********************************************************/

.outgoing-connection{
    height: 370px;
}

.outgoing-connection .txt-desc{
    margin-top:5px;
}



/*** DEVICE START ********************************************************/

.device-gp{
    margin-top: 0.55rem;
}
.device-list{
    margin-top: 0.3rem;
    width: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.device-list .itm{
    margin: 0.3rem 0;
}

.device-list .itm .icon{
    margin-right: 1rem;
}

.device-list .itm .icon img{
    width:34px;
}



.data-quality-score .summary-gp{
     width: 300px;
    margin-top: 2rem
}

.data-quality-score .summary-gp .itm{
    margin: 0.5rem 0;
    padding:0.5rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}



/**************************************************************************************************/
/*** ELECTRICA: START ********************************************************/
/**************************************************************************************************/

.device-summary .icon{
    text-align: right;
    margin-bottom: 0.7rem;
}

.peak-summary-gp{
    margin-top: 3rem;
    margin-bottom: 2rem;
}
.peak-summary-gp .itm{
    border-left:1px solid  rgba(0, 0, 0, 0.1);
    width:23%;
}

.peak-summary-gp> div:nth-child(2){
    border-left:0;
}



/**************************************************************************************************/
/*** CHILLER: START ********************************************************/
/**************************************************************************************************/


.progress-bar-gp{
    background: #f0f1f1;
    border-radius: 3rem;
    height: 10px;
}

.progress-bar-gp .fill{
    height: inherit;
    border-radius: 3rem;
}

.ch .progress-bar-gp .fill{
    background: linear-gradient(to Right, #fab1e1, #f86ebf); 
}
.chwp .progress-bar-gp .fill{
    background: linear-gradient(to Right, #f4be5c, #fa7009); 
}
.cdwp .progress-bar-gp .fill{
    background: linear-gradient(to Right, #abe77a, #64be1a); 
}
.ct .progress-bar-gp .fill{
    background: linear-gradient(to Right, #7be8e2, #10c8ca); 
}

.daily-plant-consumption .summary-gp > div{
    border-right: 1px solid  rgba(0, 0, 0, 0.1);
    padding: 0 40px;
}
.daily-plant-consumption .summary-gp > div:last-child{
    border:0;
}
.daily-plant-consumption .summary-gp > div:first-child{
    padding-left: 0;
}

.daily-plant-consumption .summary-gp .label{
    margin-bottom: .3rem;
    margin-top: 0;
}

.cooling-load .grey-bar-gp {
    margin-top: 3px;
    height: 25.6px;
}
.grey-bar-gp > div {
    text-align: center;
    padding: 5px;
    font-size: 0.9em;
    font-weight: 600;
    color:black;
}
.grey-bar-gp > div:nth-child(1) {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    background: linear-gradient(to Right, #e3e5e2, #e3e4e1); 
}
.grey-bar-gp > div:nth-child(2) {
    background: linear-gradient(to Right, #c5c8c4, #b9bab8); 
}
.grey-bar-gp > div:nth-child(3) {
    background: linear-gradient(to Right, #ade87d, #6ac025); 
}
.grey-bar-gp > div:nth-child(4) {
    background: linear-gradient(to Right, #d4d5d3, #c8c9c6); 
}
.grey-bar-gp > div:nth-child(5) {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    background: linear-gradient(to Right, #d5d6d4, #cbccca); 
}

.cooling-load .grey-bar-gp > div:after, .cooling-load .grey-bar-gp > div:before {
    color:#797373;
    font-size: 0.9em;
    position: absolute;
    bottom: -25px;
}
.cooling-load .grey-bar-gp > div:nth-child(5):before {
    content: '>+10';
    right: 0;
}
.cooling-load .grey-bar-gp > div:nth-child(1):before, .cooling-load .grey-bar-gp > div:nth-child(2):before, .cooling-load .grey-bar-gp > div:nth-child(4):before, .cooling-load .grey-bar-gp > div:nth-child(3):before {
    content: '|';
    color:#797373;
    font-size: 0.5em;
    font-weight: 300;
    right: -2px;
    bottom: -10px;
}
.cooling-load .grey-bar-gp > div:nth-child(1):after {
    content: '>10';
    left: 0;
}
.cooling-load .grey-bar-gp > div:nth-child(2):after {
    content: '>10';
    left: 0;
}
.cooling-load .grey-bar-gp > div:nth-child(3):after {
    content: '-5';
    left: -3px;
}
.cooling-load .grey-bar-gp > div:nth-child(4):after {
    content: '+6';
    left: -3px;
}
.cooling-load .grey-bar-gp > div:nth-child(5):after {
    content: '+10';
    left: -5px;
}

.total-system-eff .donut-pie{
    text-align: center;
}

.header-temp .temp-value{
    position: absolute;
    width: 100%;
    top: 6.2rem;
    left: 8.4rem;

}

.header-temp .temp-value span{
    color: white;
}

.header-temp .temp-c{
    transform: translateY(-10px);
    display: inline-block;
    color:rgba(255,255,255,0.5)!important;
}

.unit-l.temp-dark-c{
     display: inline-block;
    transform: translateY(-5px);
    
}

.top-menu .custom-select-box{
    margin-right: 0.5rem;
}

/**************************************************************************************************/
/*** EMISSION: START ********************************************************/
/**************************************************************************************************/
.emission-hotspot .itm>div:nth-child(1){
    color:rgba(0,0,0,0.45);
    width:5%;
    font-weight: 500;
}
.emission-hotspot .itm{
    margin-bottom: 0.6rem;
}
.emission-hotspot .itm>div:nth-child(2){
     color:rgba(0,0,0,0.45);
    width:30%;
    font-weight: 500;
}
.emission-hotspot .itm>div:last-child{
    width:13%;
    text-align: right;
}
.emission-hotspot .progress-bar-gp{
    height: 13px;
}
.emission-hotspot .progress-bar-gp >.fill{
    background: linear-gradient(to Right, #fab1e1, #f86ebf);
}

/**************************************************************************************************/
/*** WATER: START ********************************************************/
/**************************************************************************************************/
.water-summary .box{
    text-align: center;
}

.water-summary .box .label{
    margin-bottom: 1rem
}

.consumption-by-eq-hl-gp .itm {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    width: 25%;
}
.today-water-consumption .circle  {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 220px;
    text-align: center;
    padding: 18% 30px 0;
}
.today-water-consumption .circle.cold {
    background-image: url(../../images/circle-cold-water.png);
}
.today-water-consumption .circle.rain {
    background-image: url(../../images/circle-rain-water.png);
}
.today-water-consumption .circle.flush {
    background-image: url(../../images/circle-flush-water.png);
}
.today-water-consumption .circle.cool {
    background-image: url(../../images/circle-cooling-water.png);
}

.today-water-consumption .circle .label{
    padding-top: 2rem;
}
.today-water-consumption .circle .label, .today-water-consumption .circle .value  {
    color:white!important;
}

/**************************************************************************************************/
/*** MANAGE: START ********************************************************/
/**************************************************************************************************/
.dashboard-project .txt-name {
    margin-top: 3px;
}
.dashboard-project .icon img {
    width: 50px;
    margin-right: 1rem;
}

.dashboard-project .extra-info {
    margin-top: 20px;
}
.dashboard-project  .extra-info > .itm:nth-child(1) {
    border-left: 0;
}
.dashboard-project .extra-info > .itm {
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    padding-right: 0.45rem;
    padding-left: 0.45rem;
    margin-bottom: 0.7rem;
}

.legend-gp .itm {
    margin: 7px 0;
}

.legend-gp .itm .value-gp{
    text-align: right;
}

.occupancy-summary-gp .itm {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    width: 23.5%;
}

.occupancy-summary-gp {
    padding-bottom: 1rem;
}

.bar-gp {
    margin-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.bar-gp .itm .value-gp {
    position: relative;
}
.bar-gp .itm .line {
    position: absolute;
    top: -7px;
    right: 0;
    width: 2px;
    height: 25px;
    background: #a9a5a5;
}
.bar-gp .itm .note {
    margin-top: 0px;
}

.bar-gp > .itm:nth-child(1) .bar {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.bar-gp > .itm:last-child .bar {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.bar-gp .itm .bar {
    margin: 7px 0;
    height: 40px;
    border-right: 2px solid white;
}
.bar-gp .itm.bar-blue .bar{
      background: linear-gradient(to Right, #10c8ca, #73e5e0);
}
.bar-gp .itm.bar-green .bar{
      background: linear-gradient(to Right, #5cb910, #aee97e);
}
.bar-gp .itm.bar-pink .bar{
      background: linear-gradient(to Right, #f86cbf, #fab0e1);
}
.bar-gp .itm.bar-orange .bar{
      background: linear-gradient(to Right, #fa7008, #f4c05e);
}

.note img{
    width:10px;
}

/**************************************************************************************************/
/*** ENEGy: START ********************************************************/
/**************************************************************************************************/
.weather-gp .temp-c{
    transform: translateY(-3px);
    display: inline-block;
}

.cat-consumption .list-table .itm .icon img{
    /*padding: 0 .5rem;*/
    width:28px;
}
.cat-consumption .list-table .itm > div{
    -ms-flex-item-align: center !important;
    align-self: center !important;
    padding: 0.1rem 0.3rem;
    font-size: 1em;
    font-weight: 700;
}
.cat-consumption .list-table .itm .column-2, .cat-consumption .list-table .itm .column-3, .cat-consumption .list-table .itm .column-4{
    text-align: right;
}
.cat-consumption .list-table .itm .column-1{
    font-weight: 700;
    width:20%;
}
.cat-consumption .list-table .itm .column-2{
    width:25%;
    color:rgba(0,0,0,0.55);
}
.cat-consumption .list-table .itm .column-3{
    width:20%;
    color:rgba(0,0,0,0.55);  
}
.cat-consumption .list-table .itm .column-4{
    font-weight: 500;  
}

 .cat-consumption .list-table .itm span{
     padding: 0;
}

.reduction-gp .info-gp > div{
    margin: .4rem 0;  
    width: 100%;

}
.reduction-gp .info-gp .label{
   line-height: 1;
}

.heat-balance-gp .grey-bar-gp {
    height: 25.6px;
}

.heat-balance-gp .grey-bar-gp > div:nth-child(1) {
    background: linear-gradient(to Right, #c5c8c4, #b9bab8); 
    border-right: 1px solid white;
}
.heat-balance-gp .grey-bar-gp > div:nth-child(2), .heat-balance-gp .grey-bar-gp > div:nth-child(4), .heat-balance-gp .grey-bar-gp > div:nth-child(5) {
    background: linear-gradient(to Right, #e3e5e2, #e3e4e1);
    border-right: 1px solid white;
}
.heat-balance-gp .grey-bar-gp > div:nth-child(3) {
    border-right: 1px solid white;
}
.heat-balance-gp .grey-bar-gp > div:nth-child(2):after {
    content: '-10%';
    left: 0;
}
.heat-balance-gp .grey-bar-gp > div:nth-child(3):after {
    content: '-5%';
    left: -3px;
}
.heat-balance-gp .grey-bar-gp > div:nth-child(4):after {
    content: '5%';
    left: -3px;
}
.heat-balance-gp .grey-bar-gp > div:nth-child(5):after {
    content: '10%';
    left: -5px;
}

.heat-balance-gp .grey-bar-gp > div:after, .heat-balance-gp .grey-bar-gp > div:before {
    color:#797373;
    font-size: 0.9em;
    position: absolute;
    bottom: -25px;
}

.color-bar {
    background-image: url(../../images/color-bar.png);
    background-size:100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 20px;
    font-weight: 700;
    border-radius: 3rem;
}
    .color-bar > div{
        -ms-flex-item-align: center !important;
        align-self: center !important;
        font-size: 0.9em;
        transform: translateY(2px)
    }
    .color-bar > div:last-child{
        width:10%;
    }
    .color-bar > div:first-child span{
        padding-left: 0.5rem;
    }
    .color-bar > div:last-child span{
        padding-right: 0.5rem;
        text-align: right;
    }
.indicator-gp {
    position: relative;
    height: 100px;
}
    .indicator {
        margin-top: -27px;
        position: absolute;
    }
   .indicator:before {
        content: attr(data-value);
        position: absolute;
        top: 48px;
        width: 100%;
        text-align: center;
        color: white;
        font-size: 0.9em;
    }
.historical-icon{
    margin-left: .5rem;
}
.historical-icon img{
    width:32px;
}
.experience-gp .list-table .itm > div:nth-child(1){
    width:10%;
}
.experience-gp .list-table .itm:nth-child(odd){
    background: #eef2f5;
}
.experience-gp .list-table .column-1{
    -ms-flex-item-align: center !important;
    align-self: center !important;
        text-transform: uppercase;
}
.experience-gp .list-table .column-2{
    width:46%;
    padding-right: 18px;    
}
.experience-gp .list-table .tag{
    margin-right: 0;
    width: 2.9rem;
    text-align: center;
}
.connection-bar{
    height: 14px;
    position: relative;
}
    .connection-bar:before{
        content:attr(data-hr-value);
        position: absolute;
        top:14px;
        left:0;
        font-size: 0.8em;
        color:#b4b9bf;
    }
    .connection-bar:after{
        content:attr(data-min-value);
        position: absolute;
        top:12px;
        right:0;
        font-size: 0.8em;
        color:#b4b9bf;
    }

.connection-bar.good{
    background: url(../../images/connection-bar-good.png);
}
.connection-bar.check{
    background: url(../../images/connection-bar-check.png);
}

.modal-body .inner-scroll{
    overflow-y:auto;
}

.experience-gp .inner-scroll{
    height: calc(100vh - 290px);
}


.modal .close{
    cursor: pointer;
}
.modal-desc{
    color: #83868d;
}

.modal-confirm{}
    .modal-confirm .modal-dialog{
        max-width: 500px;
    }
    .modal-confirm .modal-content{
        /*width: 500px;*/
        min-height: 300px;
        box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
    }
    .modal-confirm .modal-header{
        position: relative;
        height: 100px;
        background: #ecf7e2 ;/* #f9ecf2 #bff196;*/
        border:0;
      /*  background: linear-gradient(to Bottom, #aee97e, #5cb910);*/
        border-top-right-radius: 1rem;
        border-top-left-radius: 1rem;
    }
    .modal-confirm .modal-header:before{
        content:url(../../images/icon-dialog-confrirm.png);
        position:absolute;
        text-align: center;
        width: calc(100% - 30px);
    }
    .modal-confirm .modal-body{
        text-align: center;
    }
    .modal-confirm .modal-title{
        margin-top:2rem;
        margin-bottom: 0.5rem;
        font-weight: 600;
    }
    .modal-confirm .modal-footer{
        margin-top: 2rem;
}   



/**************************************************************************************************/
/*** DETALS DATA QUALITY : DATA CLEANSE START ********************************************************/
/**************************************************************************************************/
.data-cleanse {}
.data-cleanse .list-table .column-1 {
    width:8%;
}
    .data-cleanse .list-table .column-1 label{
        transform: translateY(3px);
    }

.data-cleanse .list-table .column-2  {
    
}
    .data-cleanse .list-table .column-2 .icon img{
        width:25px;
    }

.data-cleanse .list-table .column-3 {
    width:30%;
}

.data-cleanse .list-table .itm{
    padding: 0.3rem 0;
}

.data-cleanse .list-table .column-1 {
    width:8%;
}

.data-error{}  
.data-error .list-table .itm> div{
    padding: 0.02rem 0;
    -ms-flex-item-align: center !important;
    align-self: center !important;
}
.data-error .list-table .column-1 {
    width:50%;
}
.data-error .list-table .column-2 {
    width:20%;
}

.list-table .action-gp > span{
    margin-left:0;
    cursor: pointer;
}

/**************************************************************************************************/
/*** DETALS TOP CONNECTION : START ********************************************************/
/**************************************************************************************************/
.system-heartbeat {}
.system-heartbeat .list-table .itm> div{
    padding: 0.8rem 0;
    -ms-flex-item-align: center !important;
    align-self: center !important;
}
.system-heartbeat .list-table .column-1 {
    width:50%;
}
.system-heartbeat .list-table .column-2 {
    width:30%;
}

.beat-bar-gp{
    position: relative;
    padding-left: 1rem;
}
.beat-bar-gp span{
    display: inline-block;
    width: 5px;
    height: 16px;
    margin: 1px;
    background-color: #5cdd8b;
    border-radius: 50rem;
    padding: 0!important;
    transition: allease-in-out .15s;
}
    .beat-bar-gp span:hover{
        transform: scale(1.5);
    }
.beat-bar-gp:before{
    content:attr(data-left-value);
    position: absolute;
    top:17px;;
    left:17px;
    color:#a19e9e;
    font-size: 0.9em;
}
.beat-bar-gp:after{
    content: attr(data-right-value);
    position: absolute;
    top: 17px;
    right: 32px;
    color: #a19e9e;
    font-size: 0.9em;
    text-align: right;
}

.beat-bar-gp > span.red{
    background-color: #fa0b6a;
}

.beat-bar-gp > span.orange{
    background-color: #f4b906;
}