layout.css

html {
  min-height: 100%;
  position: relative;
}

body {
  padding: 0;
  margin: 0;
}

#map {
  width: 100%;
  padding-top: 75%;
}

#map * {
  cursor: crosshair
}

input[type="range"] {
  height: 100%;
  align-self: center;
}
.card-header > .btn.btn-sm{border:none;}
.card.info {
  flex-basis: 30%
}

.card.map {
  flex-basis: 70%
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

#myTab{margin-top:2px;}
#marker-list .dragger{cursor:ns-resize}
#marker-list .draggable-mirror{z-index:999;display:none!important}
#marker-list .draggable--original{
    opacity:0.3;
    transform:scale(0.95);
    z-index:0;
}

#get-derections{display:none;}
#marker-list:not(:empty) ~ #get-directions{
    display:inline-block;
}
#marker-list .list-group-item.highlighted{
    background-color:#f8f9fa;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 40px;
  line-height: 40px;
  /* Vertically center the text there */
  background-color: #f5f5f5;
}