.outage-tab-list li a{
 color: #7B88A8;

}

.outage-tab-list li a:hover{
 cursor: pointer;

}

.outage-tab-list{
 position:relative;
 z-index: 1;
 width: 80%;
 margin: 0 auto !important;

}


.map-viewr-info{
  position:absolute;
  top:-6%;
  width:87%!important;
  width:100%;
  border-radius:10px;
}

.range-circle{
  max-width:50%;
  position:absolute;
  top:30%;
  left:33%;
}

.map-viewr-info img{
  max-width:100%;
}

.outage-card .card-body{
 padding:1%;
}


.outage-card-acive{
 background-color: #2D3958;
}

.outage-card-acive .outage-table-desc{
 color:rgba(255,255,255,.7);
}

.outage-card-acive .outage-table-title{
 color:rgba(255,255,255);
}

.outage-card:hover{
  background-color: #4d5f8e;
}

.outage-card:hover .outage-table-desc{
  color:rgba(255,255,255,.7);
}

.outage-card:hover .outage-table-title{
  color:rgba(255,255,255);
}

.outage-card-table tr td{
 border:0;
 padding-top: 1%;
 padding-bottom: 1%;
}

.outage-table-desc{
 font-size: 12px;
}

.outage-table-title{
  font-size:13px;
  font-weight: 400;
}

.acc-outages-info-card{
  height:30rem;
  overflow:hidden;
  overflow-y: scroll;
}



.main-container .my-reports-white-bg{
  background-color: #fff;
  margin:0;
  padding: 2.8%;
  border-radius:10px;
}

#activity-tab{
  box-shadow: 1px 2px 3px #bfbfbf;
  z-index: 999;
}

.first-child-my-report{
  margin: 5rem .5rem .5rem!important;
}

.my-reports-table tr td{
  border:0;
  padding-bottom: 0;
  padding-top:.2rem;
}

.outages-reports-info{
  font-size:.8rem;
}



.acc-outages-info-card::-webkit-scrollbar{
  width: 0px;
  border-radius: 10px;
}


.acc-outages-info-card{
   scrollbar-width: thin;
scrollbar-color:rgba(0, 0, 0, .3) rgba(255, 255, 255, 0.8) ;
}
/* Track */
.acc-outages-info-card::-webkit-scrollbar-track{
  background: rgba(0, 0, 0, .3);
}

/* Handle */
.acc-outages-info-card::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .5);
  border-radius: 5px;
}

/* Handle on hover */
.acc-outages-info-card::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.8);
}



.range-container-white-bg{
  background-color: #fff;
  margin:1rem 0 0 0;
  padding:2.8%;
  border-radius:30rem;
  position: absolute;
  top: 75%;
  left:15%;
}

/**/

.range {
  position: relative;
}


.range input[type="range"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  width: 100%;
  height: 22px;
  cursor: pointer;
  display: block;
}
.range input[type="range"]:focus {
  outline: none;
}
.range input[type="range"][disabled] {
  opacity: 0.3;
  cursor: default;
}
.range .rangeslider {
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.range .rangeslider:before {
  box-sizing: border-box;
  width: 100%;
  height: 4px;
  background: #e6e6e6;
  border-radius: 100px;
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.range input::-webkit-slider-runnable-track {
  box-sizing: border-box;
  width: 100%;
  height: 4px;
  background: #e6e6e6;
  border-radius: 100px;
  margin: 11px 0;
}
.range input::-moz-range-track {
  box-sizing: border-box;
  width: 100%;
  height: 4px;
  background: #e6e6e6;
  border-radius: 100px;
  margin: 11px 0;
}
.range input::-ms-track {
  box-sizing: border-box;
  width: 100%;
  height: 4px;
  background: #e6e6e6;
  border-radius: 100px;
  color: transparent;
  padding: 11px 0;
  background: transparent;
  border-color: transparent;
}
.range input::-ms-fill-lower,
.range input::-ms-fill-upper {
  box-sizing: border-box;
  width: 100%;
  height: 4px;
  background: #e6e6e6;
  border-radius: 100px;
}
.range input::-ms-fill-lower {
  background: #60cd18;
}
.range .rangeslider-fill-lower {
  background-color:#00AFF0;
  border-radius: 100px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 4px;
  will-change: width;
}
.range input::-webkit-slider-thumb {
  box-sizing: border-box;
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
  border: 6px solid #fff;
  height: 24px;
  width: 24px;
  border-radius: 100px;
  background: #333940;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  margin-top: 2px;
}
.range input::-moz-range-thumb {
  box-sizing: border-box;
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
  border: 6px solid #fff;
  height: 24px;
  width: 24px;
  border-radius: 100px;
  background: #333940;
  cursor: pointer;
}
.range input::-ms-thumb {
  box-sizing: border-box;
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
  border: 6px solid #fff;
  height: 24px;
  width: 24px;
  border-radius: 100px;
  background: #333940;
  cursor: pointer;
}
.range .rangeslider-thumb {
  box-sizing: border-box;
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
  border: 6px solid #003594;
  height: 15px;
  width: 15px;
  border-radius: 100px;
  background: #fff;
  cursor: pointer;
  position: absolute;
  touch-action: pan-x;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  will-change: left;
}
.range .range-output {
  position: absolute;
  left: 6px;
  top: 6px;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.range .range-output .output {
  display: block;
  position: absolute;
/*  height: 60px;
  line-height: 60px;
  min-width: 32px;
  padding: 0 20px;*/
  top: -5px;
    left: -4px;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  /*background: #383c42;*/
  color: #000;
  /*border-radius: 100px;*/
  white-space: nowrap;
  font-weight: bold;
  font-size: 1.2em;
  text-align: center;
}
.range .range-output .output:before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  /*border: 10px solid #383c42;*/
  border-bottom: none;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}


/*New Slider*/

.range-slider1 {
  width: 70%;
  margin: 0 auto;
}
.range-slider1 #range1 {
  -webkit-appearance: none;
  width: 100%;
}
.range-slider1 #range1:focus {
  outline: none;
}
.range-slider1 #range1::before,
.range-slider1 #range1::after {
  position: absolute;
  color: #333;
  font-size: 14px;
  line-height: 1;
  padding: 3px 5px;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 4px;
}
.range-slider1 #range1::before {
  left: 0;
  content: attr(data-min);
}
.range-slider1 #range1::after {
  right: 0;
  content: attr(data-max);
}
.range-slider1 #range1::-webkit-slider-runnable-track {
  width: 100%;
  height: .2rem;
  cursor: pointer;
  animate: 0.2s;
  background: linear-gradient(90deg, #00AFF0 var(--range-progress), #dee4ec var(--range-progress));
  border-radius: 1rem;
}
.range-slider1 #range1::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 6px solid #003594;
  box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  height: 15px;
  width: 15px;
  transform: translateY(calc(-90% + 8px));
}
.range-slider1 #tooltip1 {
  position: absolute;
  top: -.7rem;
}
.range-slider1 #tooltip1 span {
  position: absolute;
  text-align: center;
  display: block;
  line-height: 1;
  color: #000;
  border-radius: 0.125rem;
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
  left: 50%;
  transform: translate(-50%, 0);
}
.range-slider1 #tooltip1 span:before {
  position: absolute;
  content: "";
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  /*border: 4px solid transparent;*/
 /* border-top-color: #6BA132;*/
}


.range-slider2 {
  width: 70%;
  margin: 0 auto;
}
.range-slider2 #range2 {
  -webkit-appearance: none;
  width: 100%;
}
.range-slider2 #range2:focus {
  outline: none;
}
.range-slider2 #range2::before,
.range-slider2 #range2::after {
  position: absolute;
  color: #333;
  font-size: 14px;
  line-height: 1;
  padding: 3px 5px;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 4px;
}
.range-slider2 #range2::before {
  left: 0;
  content: attr(data-min);
}
.range-slider2 #range2::after {
  right: 0;
  content: attr(data-max);
}
.range-slider2 #range2::-webkit-slider-runnable-track {
  width: 100%;
  height: .2rem;
  cursor: pointer;
  animate: 0.2s;
  background: linear-gradient(90deg, #00AFF0 var(--range-progress), #dee4ec var(--range-progress));
  border-radius: 1rem;
}
.range-slider2 #range2::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 6px solid #003594;
  box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  height: 15px;
  width: 15px;
  transform: translateY(calc(-90% + 8px));
}
.range-slider2 #tooltip2 {
  position: absolute;
  top: -.7rem;
}
.range-slider2 #tooltip2 span {
  position: absolute;
  text-align: center;
  display: block;
  line-height: 1;
  color: #000;
  border-radius: 0.125rem;
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
  left: 50%;
  transform: translate(-50%, 0);
}
.range-slider2 #tooltip2 span:before {
  position: absolute;
  content: "";
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  /*border: 4px solid transparent;*/
  /*border-top-color: #6BA132;*/
}

.range-container-white-bg-1{
  background-color: #fff;
  margin:1rem 0 0 0;
  padding: 0 2.8%;
  border-radius:30rem;
  position: absolute;
  top: 72%;
  left:15%;

  width: 75%;
}





/**/


.range-slider {
  display: inline-block;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
.range-slider > input {
  opacity: 0;
  width: 100%;
  position: relative;
  z-index: 5;
  -webkit-appearance: none;
}
.range-slider > input::-webkit-slider-thumb {
  -webkit-appearance: none;
  z-index: 100;
  position: relative;
  width: 50px;
  height: 30px;
  -webkit-border-radius: 10px;
}
.range-slider > span.slider-container {

  display: inline-block;
  position: absolute;
  left: -8px;
  right: 46px;
  z-index: 3;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.range-slider > span.slider-container > span.bar {
  background-color: #f6f6f6;
  display: inline-block;
  position: absolute;
  z-index: 1;
  top: 18px;
  width: 100%;
    margin-right: auto;
    margin-left: auto;
  left: 10px;
  right: -42px;
  height:5px;
  overflow: hidden;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.range-slider > span.slider-container > span.bar > span {
  background: #00AFF0;
  display: inline-block;
  float: left;
  height: 11px;
  width: 0%;
}
.range-slider > span.slider-container > span.bar-btn {
  display: inline-block;
  position: absolute;
  width: 46px;
  height: 30px;
  padding-top: 8px;
  font-weight: bold;
  text-align: center;
  /*background: #fff;*/
  left: -25px;
  top: -15px;
  /*border-radius: 3px;*/
  /*border: #333 2px solid;*/
 /* -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);*/
}
.range-slider > span.slider-container > span.bar-btn:after {
  content: "";
  border: 6px solid #003594;
  background-color:  #fff;
  border-radius: 20px;
  width: 15px;
  height: 15px;
  display: inline-block;
  position: absolute;
  left: 12px;
  top: 28px;
  z-index: 3;
  /*-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);*/
}
.range-slider > span.slider-container > span.bar-btn > span:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
/*  border-width: 25px;
  border-style: solid;
  border-color: #333 transparent transparent;*/
  position: absolute;
  top: 39px;
  left: -2px;
}
.range-slider > span.slider-container > span.bar-btn > span:after {
  content: "km";
}