.leaflet-control.opacity-control {
  background-color: #a9acb1;
  border-radius: 15px;
  color: black;
  font: bold 18px 'Lucida Console', Monaco, monospace;
  display: block;
  height: 200px;
  left: 11px;
  position: relative;
  top: 15px;
  width: 5px;
  
  .opacity-handle {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #eee;
    cursor: ns-resize;
    font-size: 10px;
    height: 26px;
    left: -11px;
    line-height: 26px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 26px;
    //@include map-control-shadow;
    
    &:hover {
      background-color: #f4f4f4;
    }
  }
  
  .opacity-arrow-up {
    color: #aaa;
    position: absolute;
    top: -11px;
    text-align: center;
    width: 100%;
    
    &:before {
      content: '=';
    } 
  }
  
  .opacity-arrow-down {
    bottom: -10px;
    color: #aaa;
    position: absolute;
    text-align: center;
    width: 100%;
    
    &:before {
      content: '=';
    }  
  }

  .opacity-bottom {
    background-color: #017afd;
    border-radius: 15px;
    display: block;
    height: 137px;
    left: 0px;
    position: relative;
    top: 63px;
    width: 5px;  
  }
  
  // Area underneath slider to prevent unintentioned map clicks
  .opacity-area {
    padding: 14px;
    cursor: default;
    height: 200px;
    left: -11px;
    position: absolute;
    top: 0px;
    width: 20px;
  }
}

.opacity-control.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
