* {
    box-sizing: border-box
}

body{
    margin: 0;
    padding: 0;
    font-family: Arial;
}

.container-fluid {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.map {
    width: 100%;
    height:100%;
}
  
p.nopading {
    margin: 0;
    padding: 0
}

.scroll-sidebar{
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 200px; /* Set the width of the sidebar */
    background-color :#cfd4d2;
    color: #ffffff;
    position: fixed!important; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    overflow-y: scroll;
    overflow-x: hidden; /* Disable horizontal scroll */
    top: 0; /* Stay at the top */
    left: 0;
    padding-top: 20px;
}

#js-map {
    z-index: 10;
    position: relative;
}
    
#radio-group {
    position: relative;  
    margin-top: -20px;
    z-index: 20;
    background: #ffffff;
    color: #000000;
    width:29%;
}

#ol-mouse-position {
    position: relative;  
    margin-top: -40px;
    margin-left: 35%;
    z-index: 20;
    color: #000000;
    width: 18%;
    font-size: 14;
}

#round-label {
    border-radius: 25px;
    background: #6b9eb4;
    padding: 10px;
    margin-left: 2%; 
    margin-right: 2%; 
    height: auto;
  }

#square-label {
    background: #6b9eb4;
    padding: 8px;
    margin-left: 2%; 
    margin-right: 2%; 
    height: auto;
  }

/* Feature Popup Overlay */
.ol-popup-id{
    position: absolute;
    background-color: #6b9eb4;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    padding: 5px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 6px;
    left: -25px;
    width: auto;
}
.ol-popup-id-card{
    position: absolute;
    background-color: #6b9eb4;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 6px;
    left: -25px;
    width: auto;
}
.ol-popup-id-card-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}
.ol-popup-id-card-closer:after {
    content: "X";
}
  
.dot {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    display: inline-block;
}

.ol-dragbox {
    background-color: rgba(255,255,255,0.4);
    border-color: rgba(100,150,0,1);
  }

  /* Search button */
  * {
    box-sizing: border-box;
  }
  
  form.search-button input[type=text] {
    padding: 6px;
    font-size: 14px;
    border: 1px solid grey;
    float: left;
    width: 81%;
    background: #f1f1f1;
    margin-left: 2%;
  }
  
  form.search-button label {
    float: left;
    width: 15%;
    padding: 7px;
    background: #6b9eb4;
    color: white;
    font-size: 15px;
    border: 1px solid grey;
    border-left: none;
    cursor: pointer;
    margin-right: 2%; 
  }
  
  form.search-button label:hover {
    background: #0b7dda;
  }
  
  form.search-button::after {
    content: "";
    clear: both;
    display: table;
  }
  
  div.ol-search-radio-group {
    color: #2b2d2f;
  }

  p.search-response {
    color: red;
    margin-left: 3%;
  }