.map {
  background-color: #ddd;
}

figure.hmlr-map-wrapper {
  margin: 0;
}

.hmlr-map-wrapper {
  /* Customise the ol zoom controls */
  .ol-zoom {
    position: relative;
    z-index: 12;
    top: 20px;
    left: calc(100% - 60px);
  }

  .ol-zoom-in {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Crect width='14' height='2' x='8' y='14' style='fill:%230b0c0c'/%3E%3Crect width='2' height='14' x='14' y='8' style='fill:%230b0c0c'/%3E%3C/svg%3E");
  }

  .ol-zoom-out {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Crect width='14' height='2' x='8' y='14' style='fill:%230b0c0c'/%3E%3C/svg%3E");
  }

  .ol-zoom-in,
  .ol-zoom-out {
    display: block;
    border: 0;
    outline: 2px solid rgba(0, 0, 0, 0.2);
    height: 40px;
    width: 40px;
    padding: 0;
    margin-top: 6px;
    cursor: pointer;
    background-color: #fff;
    background-size: 30px;
    background-position: 5px 5px;
    overflow: hidden;
    text-indent: -5000px;
  }

  .ol-zoom-in,
  .ol-zoom-out {
    display: block;
    border: 0;
    height: 40px;
    width: 40px;
    padding: 0;
    cursor: pointer;
    background-color: #fff;
    background-size: 30px;
    background-position: 5px 5px;
    overflow: hidden;
    text-indent: -5000px;
  }

  .ol-zoom-in:focus,
  .ol-zoom-out:focus {
    box-shadow: 0 0 0 2px #fff, inset 0 0 0 0 #0b0c0c, 0 0 0 5px #0b0c0c, 0 0 0 8px #ffdd00;
    outline: 3px solid #000000;
    z-index: 99;
  }

  .ol-zoom-in:hover,
  .ol-zoom-out:hover {
    background-color: #b1b4b6;
    outline: 3px solid #000000;
    background-clip: padding-box;
  }

  /* OpenLayers Scale Line Override */
  .ol-scale-line {
    background: rgba(255, 255, 255, .8) !important;
    border-radius: 5px !important;
    padding: 2px !important;
    position: absolute !important;
  }

  .ol-scale-line-inner {
    color: #000 !important;
    border: 1px solid #000 !important;
    border-top: none !important;
  }

  .ol-scale-line-inner {
    color: #0b0c0c;
    font-family: "GDS Transport", arial, sans-serif;
  }

  .ol-rotate-reset {
    visibility: hidden;
  }

  .ol-attribution {
    visibility: hidden;
  }
  .ol-control {
  background-color: transparent;
  }
}

.attribution{
  margin-top: 5px;
}