#loading-image {
 position: fixed;
 display: none;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(0,0,0,0.5);
 z-index: 9999;
 cursor: pointer;
}

#text{
 position: absolute;
 top: 50%;
 left: 50%;
 font-size: 300px;
 color: white;
 transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
}

#text img{
 max-width:100%;
}

.required 
      {
        font-family: Tahoma;
        font-size: 9pt;
        color: red;
        text-align: left;
        padding: 3pt;
      }
      .error 
      {
        font-family: Tahoma;
        font-size: 9pt;
        color: red;
        display:none;
        text-align: left;
        padding: 3pt;
      }
	  
.dropdown-chart-update{
     position: absolute;
   top: 7%;
   right: 5%;

}

.dropdown-chart-update select{

   border: 0;
}
.dropdown-chart-update select:hover{

   cursor: pointer;
}

.click-event-hide{
 pointer-events: none;
}

.click-event-show{
 pointer-events: auto;
}


.arrow-click:hover{cursor: pointer;}

.dropdown-class:focus{ box-shadow:none;}

.usage-current-range-slider,.usage-projected-range-slider {
width: 100%;
padding: 5px;
}
.usage-current-range-slider .range-values,.usage-projected-range-slider .range-values{
display: flex;
justify-content: space-between;
width: 100%;
font-size: 10px;
font-weight: 400;
line-height: 32px;
}
.rangeslider {
margin: 4px auto;
position: relative;
}
.rangeslider.rangeslider--horizontal {
height: 3px;
background-color: #e5e5e5;
border-radius: 0;
box-shadow: none;
}
.rangeslider.rangeslider--horizontal.rangeslider--active .rangeslider__handle {
background-color: #2D3958;
}
.rangeslider .rangeslider__fill {
height: 5px;
background-color: #00aff0;
border-radius: 10px;
box-shadow: none;
}
.usage-projected-range-slider .rangeslider .rangeslider__fill {
height: 5px;
background-color: #FBD504;
border-radius: 10px;
box-shadow: none;
}
.rangeslider .rangeslider__handle {
width: 25px;
height: 25px;
border: 3px solid #fff;
background-color: #2D3958;
border-radius: 50%;
position: absolute;
top: -11px;
}
.rangeslider .rangeslider__handle:after {
color:#fff;
margin-left:4px;
/* content:"5";*/
}
output {
display: block;
padding: 0;
text-align: center;
font-size: 12px;
line-height: 18px;
font-weight: 400;
}
output .output {
margin-right: 3px;
font-size: 14px;
}
output .output1 {
margin-right: 3px;
font-size: 14px;
}
input[type="range"] {
width: 100%;
}