@charset "UTF-8";
.map {
  width: 100%;
  height: 600px;
}
#map .ol-zoom {
  left: auto;  
  right: 8px;
  margin-top: 20px;
}
#map .ol-zoom .ol-zoom-out {
  margin-top: 200px;
}
#map .ol-zoomslider {
  background-color: transparent;
  /*
  Zoom control top: 0.5em
  Zoom control padding: 2px
  Zoom in button margin top: 1px
  Zoom in button height: font size 1.14em * 1.375 height
  */
  left: auto;
  right: 8px; 
  top: calc(0.5em + 2px + 1px + 1.14 * 1.375em);
   
}

#map .ol-touch .ol-zoom .ol-zoom-out {
  margin-top: 212px;
}
#map .ol-touch .ol-zoomslider {
  top: 2.75em;
}

#map .ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
#map .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] {
  top: 3px;
}

#map .ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
#map .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] {
  top: 232px;
}

.overlay{
  position:absolute;
  color:white;
  background: rgba(255,0,0,.5);
  width:200px;
  height:20px;
  padding-bottom:5px;
  font-family:Arial;
  font-size: 12px;
}

.sliderOverlay{
  position:absolute;		
  background: rgba(255,0,0,.5);		
  width:30px;
  height:320px;		
}

.scale-overlay{
  position:absolute;		
  background: rgba(255,0,0,.5);		
  width:auto;
  height:auto;		
  color:white;
  font-family:Arial;
  font-size: 12px;
  padding: 3px;
  border-radius: 3px;
  margin-top: -80px;
  margin-left: 8px;
}

.side-panel-overlay{
  position: fixed;		
  background-color: #f8f9fa;
  width:470px;
  height:100px;		
  color:black;
  transition: 0.5s;
  font-size: 14px;
  padding: 3px;
  border-radius: 3px;
  margin-top: 8px;
  margin-left: 8px;
  z-index: 1;
}


.open-btn {
  font-size: 20px;
  cursor: pointer;
  background-color: transparent;
  color: white;
  padding: 4px;
  border: none;    
}

.roll-btn {  
  font-size: 12px;
  cursor: pointer;
  background-color: white;
  color: black;
  padding: 4px;
  border: none;    
  border-radius: 25%;
  margin-left: 230px;
  margin-top: 0px;
  transition: 0.5s;
  position: absolute;
  display: block;  
}

.child-panel {
  display: none;
  background-color: transparent;  
}

.details-panel {
  width: 100%; 
  height: 356px; 
  overflow-y: scroll;
}

.photos-panel {
  width: 100%; 
  height: 186px; 
  overflow-y: scroll;
}
.tool-label {
  color: rgb(133, 133, 133);
  font-size: 10px;
  font-family: Arial;
}

.dropbtn {
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
  border-radius:100%;
}

.dropdown {
  position: relative;
  display: inline-block;  
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  min-width: 240px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {display: block;}
/*.dropdown:hover .dropbtn {background-color: #3e8e41;} */


.img-container-thumbnail {
  position: relative;      
}

.img-container-thumbnail img {
  max-width: 120px;
  max-height: 90px;
  border: 1px solid #ddd; /* Gray border */
  border-radius: 4px;  /* Rounded border */
  padding: 5px; /* Some padding */
}

.img-container-thumbnail img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}


.img-container-thumbnail .button {
  position: absolute;
  top: 12px;
  left: 25px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: rgb(199, 83, 83);
  color: white;
  font-size: 12px;
  border: none;
  cursor: pointer;
  border-radius: 100%;
  opacity: 70%
}

.img-container-thumbnail .button:hover {
  background-color: rgb(151, 10, 10);
  opacity: 100%
}

.img-container-thumbnail p {  
  position:absolute;
  top: 2px;
  left: 40px;
  color: rgb(155, 41, 41);
  font-size: 10px;
  font-family: Arial;
  background-color: white;
  opacity: 80%;
  padding-left:2px;
  padding-right:2px;
}