html{
  background: rgb(137,212,207);
  background: radial-gradient(circle, rgba(137,212,207,1) 0%, rgba(84,181,252,1) 0%, rgba(0,0,1,1) 100%);}

.ol-attribution{
    visibility: hidden;
}
nav{
   z-index: 99999;
    display: flex;
    flex-direction: column;
    height: 55vh;
    width: 48px;
    display: block;
    background: #151525;
    overflow: hidden;
    transition-duration: 0.5s;
    border-radius:12px ;
    margin-left: 10px;
    margin-top: 10px;
}
a{
    text-decoration: none;
    width: 188px;
    color: #eee;
    height: 40px;
    display: inline-block;
    font-family: sans-serif;
    font-size: 20px;
    /* margin: 6px; */
    transition-duration: 0.4s;
    border-radius:16px ;
  
}
.viwepanela{
align-items: center;
}

a:hover{
    background: #e2e9f7;
    color: #151525;
}
a:active{
    transform: scale(0.7);
}
i{
    width: 40px;
    margin-right: 6px;
    padding: 10px;
}

#head{
    height: 70px;
    width: 200px;
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #eee;
    background: #04040f;
}
#logo{
    width: 66px;
    height: 40px;
    background: url();
    background-size: cover;
    margin-left: 12px;
    display: none;
}
#bars{
    display: inline-block;
    margin: 0;
    font-size: 22px;
    padding: 14px;
    width: 48px;
    height: 48px;
}
#times{
    position: relative;
    left: 24px;
    height: 36px;
}
#va{
    font-size: 22px;
    font-family: sans-serif;
    margin-top: 5px;
}
#sign{
    position: relative;
    top: 50px;
    background: #353545;

}
#sign:hover{
    color: #eee;
}

#timeline{
    z-index: 99999;
    display: none;
    position: absolute;
    width: 70%;
    bottom: 10px;
    margin-left: 2%;
   
    align-items: center;

 }


 #play {
    display: flex;
    background: rgb(255, 255, 255);
    border-radius: 50%;
    align-items: center;
    width: 40px;
    height: 40px;
}

#play .fas{
    display:grid;
    place-items:center;
    font-size:25px;
    color:gray;
  }

  #play .fa-pause{
    display:grid;
    place-items:center;
    font-size:25px;
    color:gray;
  }



#play:active{
    box-shadow: inset 10px 10px 10px rgba(0,0,0,0.1),
      inset -10px -10px 10px rgba(255,255,255,0.6);
  }
  #play:active .fas{
    color:#721efa;
}

#viewpanel{
    z-index: 99999;
    position: fixed;
    width: 130px;
    right: 5px;
    display: flex;
    align-items: center;
    border-radius: 10%;
   
   opacity: 0.8;

   
}

#ewlayerpanale{

    float: right;
    z-index: 99999;
    position: fixed;
    width: 130px;
    right: 5px;
    top:100px;
    display: flex;
    align-items: center;
    border-radius: 10%;
   
   opacity: 0.8;

}

.panalerow{
    background-color: #e2e9f7;
    display: block;
    float: right;
}


.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
   
    cursor: pointer;
    top: 0;
    left: 50px;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
 
    content: "";
    height: 26px;
    width: 26px;
    left: 50px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }
  



  * {
    --switch-height: 20px;
    --switch-padding: 8px;
    --switch-width: calc((var(--switch-height) * 2) - var(--switch-padding));
    --slider-height: calc(var(--switch-height) - var(--switch-padding));
    --slider-on: calc(var(--switch-height) - var(--switch-padding));
  }
  
  .layerswitch {
    position: relative;
    display: inline-block;
    width: var(--switch-width);
    height: var(--switch-height);
  }
  
  .layerswitch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .layerslider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .layerslider:before {
    content: "";
    position: absolute;
    height: var(--slider-height);
    width: var(--slider-height);
    left: calc(var(--switch-padding) / 2);
    bottom: calc(var(--switch-padding) / 2);
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked+.layerslider {
    background-color: #2196F3;
  }
  
  input:focus+.layerslider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked+.layerslider:before {
    transform: translateX(var(--slider-on));
  }

  .layerslider.layerround {
    border-radius: var(--slider-height);
  }
  
  .layerslider.layerround:before {
    border-radius: 50%;
  }

  #metpanel{
    position: absolute;
    display: inline-block;
    float: left;
    top: 50px;
    left: 5px;
    width: 45px;
    z-index: 9;
    overflow: hidden;
   transition: 0.5s;
  }

  #metpanel:hover{
    width: 200px;
  }

  .metpanelrow{
    display: inline-block;
   
    width: 220px;
    align-items: center;
  }
  .meticon{
    display: inline;
align-items: center;
  }

  .metides{
    display: inline;
    align-items: center;
    width: 50px;
    color: white;
    font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  }

  .meticon  i{
    color: #b5fff7;
    width: 15px;
    height: 20px;
    font-size: large;
    padding: 0.5em 0.6em;
}

  #ewlayerpanel{
    position: absolute;
    display: inline-block;
    float: right;
    border-radius: 25px;
    right: 5px;
    background:rgb(250 44 44 / 30%);
   font-size: small;
    top: 50px;
    width: 35px;
    overflow: hidden;
    align-items: center;
    /* transition: width 2s; */
    z-index: 2;
    padding-bottom: 10px;
    padding-top: 10px;
    color: white;
    height: 120px;
    overflow-y: scroll;
    overflow-x: hidden;
  }


  

/* ////////////////////scroll//////////////////////// */

/* width */
#ewlayerpanel::-webkit-scrollbar {
  width: 5px;
  height: 30px;
  padding-right: 15px; /* Add padding to create space between content and scrollbar */
            box-sizing: content-box; /* Ensure padding is not included in the width */
}

/* Track */
#ewlayerpanel::-webkit-scrollbar-track {
  /* box-shadow: inset 0 0 2px rgb(215, 215, 215);  */
  /* border-radius: 5px; */
  /* margin-left: 10px; */
  background: transparent;
}
 
/* Handle */
#ewlayerpanel::-webkit-scrollbar-thumb {
  background: rgb(141, 25, 13,0.56); 
  border-radius: 3px;

}

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

#ewlayerpanel::-webkit-scrollbar-track-piece:end {
  background: transparent;
  margin-bottom: 13px; 
}
#ewlayerpanel::-webkit-scrollbar-track-piece:start {
  background: transparent;
  margin-top: 15px;
}


/* ////////////////////scroll//////////////////////// */




  
  #ewlayerpanel:hover {
    width: 220px;
  }

.panelrow{
  display: inline-block;
 min-width: 200px;
 max-width: 350px; 
  /* width: 200px; */
  width: 100%;
  align-items: center;
}
.paneliconname{
display: inline;
align-items: center;
}

.paneliconnameleft{
  display: inline;
  align-items: center;
  }
.panelicondes{
  display: inline;
  align-items: center;
  width: 60px;
  font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
}
 

  .panelradio{
    display: inline;
    margin-top:10px;
    align-items: center;
    float: right;
    margin-right: 5px;
    }

    .paneliconname  i{
      color:#b5fff7;
      width: 27px;
      height: 10px;
      font-size: small;
  }
    

  .paneliconnameleft  i{
    color:#b5fff7;
    width: 27px;
    height: 20px;
    font-size: large;
}
 

.panelname{
    font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
    margin-left: 50px;
    overflow: hidden;
    width: 250px;
  }

  #replayerpanel{
    position: absolute;
    display: inline-block;
    float: right;
    border-radius: 25px;
    right: 5px;
    background:  rgb(14 74 86 / 56%);
    top: 200px;
    width: 35px;
    overflow: hidden;
    align-items: center;
    /* transition:  2s; */
    z-index: 2;
    padding-bottom: 10px;
    padding-top: 10px;
    color: white;
    font-size: small;
    height: 120px;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  


/* ////////////////////scroll//////////////////////// */

/* width */
#replayerpanel::-webkit-scrollbar {
  width: 5px;
  height: 30px;
  padding-right: 15px; /* Add padding to create space between content and scrollbar */
            box-sizing: content-box; /* Ensure padding is not included in the width */
}

/* Track */
#replayerpanel::-webkit-scrollbar-track {
  /* box-shadow: inset 0 0 2px rgb(215, 215, 215);  */
  /* border-radius: 5px; */
  /* margin-left: 10px; */
  background: transparent;
}
 
/* Handle */
#replayerpanel::-webkit-scrollbar-thumb {
  background: rgb(141, 25, 13,0.56); 
  border-radius: 3px;

}

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

#replayerpanel::-webkit-scrollbar-track-piece:end {
  background: transparent;
  margin-bottom: 13px; 
}
#replayerpanel::-webkit-scrollbar-track-piece:start {
  background: transparent;
  margin-top: 15px;
}


/* ////////////////////scroll//////////////////////// */

  
  #replayerpanel:hover {
    width: 100%; 
    min-width: 220px;
    max-width: 302px;
  }

  #replayerpanel  .paneliconname  i{
    width: 27px;
    height: 10px;
    font-size: small;
    color: #b5fff7;
  }

/* hzpanel */

  #hzlayerpanel{
    position: absolute;
    display: inline-block;
    float: right;
    border-radius: 25px;
    right: 5px;
    
    background:  rgba(14, 74, 86, 0.89);;
    top: 500px;
    width: 35px;
    overflow: hidden;
    align-items: center;
    /* transition:  2s; */
    z-index: 2;
    padding-bottom: 10px;
    padding-top: 10px;
    color: white;
    font-size: small;
    height: 90px;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  #hzlayerpanel:hover {
    width: 100%; 
    min-width: 240px;
    max-width: 322px;
  }

  #hzlayerpanel  .paneliconname  i{
    width: 27px;
    height: 10px;
    font-size: small;
    color: #b5fff7;
  }



  /* ////////////////////scroll//////////////////////// */

/* width */
#hzlayerpanel::-webkit-scrollbar {
  width: 5px;
  height: 30px;
  padding-right: 15px; /* Add padding to create space between content and scrollbar */
            box-sizing: content-box; /* Ensure padding is not included in the width */
}

/* Track */
#hzlayerpanel::-webkit-scrollbar-track {
  /* box-shadow: inset 0 0 2px rgb(215, 215, 215);  */
  /* border-radius: 5px; */
  /* margin-left: 10px; */
  background: transparent;
}
 
/* Handle */
#hzlayerpanel::-webkit-scrollbar-thumb {
  background: rgb(141, 25, 13,0.56); 
  border-radius: 3px;

}

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

#hzlayerpanel::-webkit-scrollbar-track-piece:end {
  background: transparent;
  margin-bottom: 13px; 
}
#hzlayerpanel::-webkit-scrollbar-track-piece:start {
  background: transparent;
  margin-top: 15px;
}


/* ////////////////////scroll//////////////////////// */



  .meticonselectod{
    background-color: #e2b80e;
  
  border-radius: 60px;
  box-shadow: 0 0 2px #888;
  padding: 0.5em 0.6em;
  width: 15px;

  }


  .metpanelrow:hover  #meticonwind{
    background-color: #e2b80e;
  
    border-radius: 60px;
    box-shadow: 0 0 2px #888;
    padding: 0.5em 0.6em;
    width: 15px;
}

.metpanelrow:hover  #meticontemp{
  background-color: #e2b80e;

  border-radius: 60px;
  box-shadow: 0 0 2px #888;
  padding: 0.5em 0.6em;
  width: 15px;
}

.metpanelrow:hover  #meticonflood{
  background-color: #e2b80e;

  border-radius: 60px;
  box-shadow: 0 0 2px #888;
  padding: 0.5em 0.6em;
  width: 15px;
}

.metpanelrow:hover  #meticonwater{
  background-color: #e2b80e;

  border-radius: 60px;
  box-shadow: 0 0 2px #888;
  padding: 0.5em 0.6em;
  width: 15px;
}
.metpanelrow:hover  #meticonair{
  background-color: #e2b80e;

  border-radius: 60px;
  box-shadow: 0 0 2px #888;
  padding: 0.5em 0.6em;
  width: 15px;
}

#sensorpanale{
  position: absolute;
  display: inline-block;
  float: right;
  left: 5px;
  border-radius: 25px;
  /* left: 15px;
  background: rgb(250 44 44 / 30%); */
 overflow: hidden;
 top:300px;

  width: 45px;
 
  align-items: center;
  transition: width 2s;
  z-index: 2;
  padding-bottom: 10px;
  padding-top: 10px;
  color: white;
  transition: 0.5s;

}

#sensorpanale:hover{
  width: 220px;
}

#countourspanel{
  position: absolute;
  display: inline-block;
  float: right;
  left: 5px;
  border-radius: 25px;
  /* left: 15px;
  background: rgb(250 44 44 / 30%); */
 overflow: hidden;
 top:500px;

  width: 45px;
 
  align-items: center;
  transition: width 2s;
  z-index: 2;
  padding-bottom: 10px;
  padding-top: 10px;
  color: white;
  transition: 0.5s;

}

.rightpanelrow{
  height: 10px;

}

.prdselectincd{
  background: transparent;
  color: white;
}

.prdselectincdoptions{
  background:  rgb(14 74 86 / 95%);
}

.prdselectincd-selected{
  background: transparent;
  color: white;
}


#countourspanel:hover{
  width: 200px;
}


#popupdescription{
 height: 200px;
 overflow-y: scroll;
 -ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
}



#sensorpanale .panelrow{
  width: 210px;
}


#countourspanel .panelrow{
  width: 200px;
}




.para{
margin: 0px;
 padding-left: 10px;
}







/* 
////////////////////////////////////////////////// */

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  border-radius: 15px !important;
  z-index: 99999; /* Sit on top */
  padding-top: 10px; /* Location of the box */
 margin: auto;
  width: 365px; /* Full width */
  height: 700px; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
  position: absolute;
  left: 50%;
  top: 50%;
  cursor: move;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  clip-path: polygon( 0 2%, 2% 0, 98% 0, 100% 2%, 100% 98%, 98% 100%, 2% 100%, 0% 98%, 0% 2% );
}

.modalchart {
  display: none; /* Hidden by default */
  border-radius: 15px !important;
  z-index: 99999; /* Sit on top */
  padding-top: 10px; /* Location of the box */
  padding-right: 5px;
 margin: auto;
  width: 700px; /* Full width */
  height: 500px; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  clip-path: polygon( 0 2%, 2% 0, 98% 0, 100% 2%, 100% 98%, 98% 100%, 2% 100%, 0% 98%, 0% 2% );
}

.bdmodalchart {
  display: none; /* Hidden by default */
  border-radius: 15px !important;
  z-index: 99999; /* Sit on top */
  padding-top: 10px; /* Location of the box */
  padding-right: 5px;
  padding-bottom: 20px;
 margin: auto;
  width: 270px; /* Full width */
  height: auto; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
  position: absolute;
  left: 50%;
  top: 50%;
  color: white;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  clip-path: polygon( 0 2%, 2% 0, 98% 0, 100% 2%, 100% 98%, 98% 100%, 2% 100%, 0% 98%, 0% 2% );
}


.ewmodalchart {
  display: none; /* Hidden by default */
  border-radius: 15px !important;
  z-index: 99999; /* Sit on top */
  padding-top: 10px; /* Location of the box */
  padding-right: 5px;
  padding-bottom: 20px;
 margin: auto;
  width: 400px; /* Full width */
  height: auto; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
  position: absolute;
  left: 50%;
  top: 50%;
  color: white;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  clip-path: polygon( 0 2%, 2% 0, 98% 0, 100% 2%, 100% 98%, 98% 100%, 2% 100%, 0% 98%, 0% 2% );
}


.windpopup {
  display: none; /* Hidden by default */
  border-radius: 15px !important;
  z-index: 99999; /* Sit on top */
  /* padding-top: 10px;
  padding-right: 5px;
  padding-bottom: 20px;
 margin: auto; */
  width: 180px; /* Full width */
  height: 40px; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-image: linear-gradient(to top, #020f22 0%, #21272cde 5%);
  position: absolute;
  left: 50%;
  top: 50%;
  color: white;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  clip-path: polygon( 0 2%, 2% 0, 98% 0, 100% 2%, 100% 98%, 98% 100%, 2% 100%, 0% 98%, 0% 2% );
}

.windpopupsm {
  display: none; /* Hidden by default */
  border-radius: 15px !important;
  z-index: 99999; /* Sit on top */
  /* padding-top: 10px;
  padding-right: 5px;
  padding-bottom: 20px;
 margin: auto; */
  width: 70px; /* Full width */
  height: 20px; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-image: linear-gradient(to top, #020f22 0%, #21272cde 5%);
  position: absolute;
  left: 50%;
  top: 50%;
  color: white;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  clip-path: polygon( 0 2%, 2% 0, 98% 0, 100% 2%, 100% 98%, 98% 100%, 2% 100%, 0% 98%, 0% 2% );
}


.modal-contentchart {
  color: white;
 
   margin: auto;
 
  
   width: 98%;
   height: 100%;
 
   overflow: hidden;
  
 }
 
 #chart-header{
  font-family: "ReithSerif,Helvetica,Arial,freesans,sans-serif";
  font-weight: 600;
  text-align: center;
  font-size: x-large;
  padding: 10px;
  cursor: move;
  color: white;
 }

 #bd-header{
  font-family: "ReithSerif,Helvetica,Arial,freesans,sans-serif";
  font-weight: 600;
  text-align: center;
  font-size: larger;
  padding: 10px;
  cursor: move;
  color: white;
 }

/* Modal Content */
.modal-content {
 color: white;

  margin: auto;

 
  width: 98%;
  height: 100%;

  overflow: hidden;
 
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
 
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}




/* * {box-sizing: border-box} */
/* body {font-family: Verdana, sans-serif; margin:0} */
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 500px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  visibility: hidden;
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {

  right: 34%;
  color: red;
  border-radius: 3px 0 0 3px;

}

.prev {

  left: 34%;
  color: red;
  border-radius: 3px 0 0 3px;

}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

#popuptitle{
  font-family: "ReithSerif,Helvetica,Arial,freesans,sans-serif";
  font-weight: 400;
  text-align: center;
  font-size: x-large;
  padding: 10px;
}

.ewheader{
  font-family: "ReithSerif,Helvetica,Arial,freesans,sans-serif";
  font-weight: 600;
  text-align: center;
  font-size: x-large;
  padding: 10px;
}

.lightTheme{
  color: #000;
}



.slidecontainer .rs-value {
	position: absolute;
	top: -20px;
	background: #1c2126;
	padding: .25em 1em;
  margin-left: 30px;
	color: #fff;
  width: 165px;
  text-align: center;
  background: rgb(255,18,51);
background: radial-gradient(circle, rgba(255,18,51,0.919502835313813) 0%, rgba(236,118,22,1) 100%);
border-radius: 25px;
visibility: hidden;
}
.slidecontainer .rs-value:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;

	position: absolute;
	pointer-events: none;
	border-color: rgba(28, 33, 38, 0);
	border-top-color: rgb(255,18,51);
	border-width: 10px;
	margin-left: -10px;
  
  

}

#popupchat{
  height: 150px;
  margin-top: 15px;
  margin-left: 10px;
  overflow-y: scroll;

}

/* Hide scrollbar for Chrome, Safari and Opera */
#popupchat::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#popupchat {
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
}

#popupdescription::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */








.mb-4, .my-4 {
  margin-bottom: 1.5rem!important;
}
.justify-content-start {
  -ms-flex-pack: start!important;
  justify-content: flex-start!important;
}

.d-flex {
  display: -ms-flexbox!important;
  display: flex!important;
}



.rounded-circle {
  border-radius: 50%!important;
}




.user_img {
	height: 60px;
	width: 60px;
	border: 1.5px solid #f5f6fa;
}

.user_img_msg {
	height: 40px;
	width: 40px;
	border: 1.5px solid #f5f6fa;
}

.img_cont {
	position: relative;
	height: 70px;
	width: 70px;
}

.img_cont_msg {
	height: 40px;
	width: 40px;
}
.msg_cotainer {
	margin-top: auto;
	margin-bottom: auto;
	margin-left: 10px;
	border-radius: 25px;
	background-color: #82ccdd;
	padding: 10px;
	position: relative;
}

.msg_cotainer_send {
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 10px;
	border-radius: 25px;
	background-color: #78e08f;
	padding: 10px;
	position: relative;
}

.msg_time {
	position: absolute;
	left: 0;
	bottom: -15px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 10px;
}

.msg_time_send {
	position: absolute;
	right: 0;
	bottom: -15px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 10px;
}

.msg_head {
	position: relative;
}

#ramp{
  float: right;
  right: 5px;
  width: 25%;
  position: absolute;
  z-index: 99999;
  bottom:30px;
}

#ramp img{
  width: 100%;
  max-width: 400px;
  float: right;
}

#powered{
  font-size: small;
  float: right;
  bottom: 3px;
  z-index: 99999;
  color: white;
  position: fixed;
  right: 15px;
}

#exploserpanel{
  position: absolute;
  display: inline-block;
  float: right;
  border-radius: 25px;
  right: 5px;
  background:  rgba(238, 73, 8, 0.56);
  top: 350px;
  width: 35px;
  /* overflow: hidden; */
  align-items: center;
  /* transition: width 2s; */
  z-index: 2;
  padding-bottom: 10px;
  padding-top: 10px;
  color: white;
  font-size: small;
  height: 120px;
  overflow-y: scroll;
  overflow-x: hidden;
}
/* ////////////////////scroll//////////////////////// */

/* width */
#exploserpanel::-webkit-scrollbar {
  width: 5px;
  height: 30px;
  padding-right: 15px; /* Add padding to create space between content and scrollbar */
            box-sizing: content-box; /* Ensure padding is not included in the width */
}

/* Track */
#exploserpanel::-webkit-scrollbar-track {
  /* box-shadow: inset 0 0 2px rgb(215, 215, 215);  */
  /* border-radius: 5px; */
  /* margin-left: 10px; */
  background: transparent;
}
 
/* Handle */
#exploserpanel::-webkit-scrollbar-thumb {
  background: rgb(141, 25, 13,0.56); 
  border-radius: 3px;

}

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

#exploserpanel::-webkit-scrollbar-track-piece:end {
  background: transparent;
  margin-bottom: 13px; 
}
#exploserpanel::-webkit-scrollbar-track-piece:start {
  background: transparent;
  margin-top: 15px;
}


/* ////////////////////scroll//////////////////////// */

 
#exploserpanel:hover {

  width: 100%; 
    min-width: 220px;
    max-width: 302px;
}


.my-legend .legend-title {
  text-align: left;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 90%;
  }
.my-legend .legend-scale ul {
  margin-left: 40px;
  margin-top: 32px;
  margin-bottom: 5px;
  padding: 0;
  float: left;
  list-style: none;
  }
.my-legend .legend-scale ul li {
  display:inline;
  font-size: 80%;
  list-style: none;
  margin-left: 0;
  line-height: 18px;
  margin-bottom: 2px;
  }
.my-legend ul.legend-labels li .color {
  display: block;
  float: left;
  height: 8px;
  width: 38px;
  margin-top: 5px;
  margin-right: 5px;
  margin-left: 0;
  border: 1px solid #999;
  }
 .my-legend ul.legend-labels li  .legend {
  display: block;
  float: left;
  height: 16px;
  width: 120px;
  margin-right: 5px;
  margin-left: 0;
  color: white;
  font-size: medium;
  }

.my-legend a {
  color: #777;
  }