body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

#player {
  margin-right: 5px;
}

#buildings {
  color: #4198d4;
}

.dark.button {
  background-color: rgba(0, 12, 26, 0.41);
}

.button:hover, .button.active {
  background-color: #52a1d8;
}

.fill-bg {
  background-color: #222630;
}

.fill-control {
  background-color: #505050;
}

.flag {
  display: inline;
  max-width: 30px;
  padding-top: 2px;
  padding-right: 5px;
}

@media (max-width: 700px) {
  .projects {
    display: none;
  }
}

.projects .button {
  display: inline-block;
  min-width: 120px;
  margin-right: 5px;
  margin-bottom: 10px;
  text-align: left;
}

.control-container {
  padding: 0 0 0 40px;
}

.playback {
  background-image: url(img/play.svg);
  background-color: transparent;
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  border-color: rgba(0, 0, 0, 0.75);
}

.playback.pause {
  background-image: url(img/pause.svg);
}

.playback:hover {
  background-color: #373737;
}

.lifted {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}

#counter {
  width: 100%;
}

.sidebar {
  min-height: 50px;
}

@media (min-width: 700px) {
  .sidebar {
    position:absolute;
    top:0;
    bottom:0;
    width: 305px;
  }
  .sidebar-inner {
    display:-webkit-box;
    display:flex;
    -webkit-box-orient:vertical;
    flex-direction:column;
    height:100%;
  }
  .sidebar-inner .flex-scroll {
    overflow-y:scroll;
    min-height:0;
    -webkit-box-flex:1;
    flex:1;
  }
}


.mapboxgl-ctrl-group {
  background: #222630;
}

.mapboxgl-ctrl-group > button {
  background-color: #222630;
  border-color: rgb(28, 31, 36);
}

.mapboxgl-ctrl-group > button:hover {
  background-color: rgb(86, 83, 83);
}

.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%238e8e8e%3B%27%20d%3D%27M%2010%206%20C%209.446%206%209%206.4459904%209%207%20L%209%209%20L%207%209%20C%206.446%209%206%209.446%206%2010%20C%206%2010.554%206.446%2011%207%2011%20L%209%2011%20L%209%2013%20C%209%2013.55401%209.446%2014%2010%2014%20C%2010.554%2014%2011%2013.55401%2011%2013%20L%2011%2011%20L%2013%2011%20C%2013.554%2011%2014%2010.554%2014%2010%20C%2014%209.446%2013.554%209%2013%209%20L%2011%209%20L%2011%207%20C%2011%206.4459904%2010.554%206%2010%206%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A")
}

.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%238e8e8e%3B%27%20d%3D%27m%207%2C9%20c%20-0.554%2C0%20-1%2C0.446%20-1%2C1%200%2C0.554%200.446%2C1%201%2C1%20l%206%2C0%20c%200.554%2C0%201%2C-0.446%201%2C-1%200%2C-0.554%20-0.446%2C-1%20-1%2C-1%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A")
}

.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > span.arrow {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%0A%09%3Cpolygon%20fill%3D%27%238e8e8e%27%20points%3D%276%2C9%2010%2C1%2014%2C9%27%2F%3E%0A%09%3Cpolygon%20fill%3D%27%23CCCCCC%27%20points%3D%276%2C11%2010%2C19%2014%2C11%20%27%2F%3E%0A%3C%2Fsvg%3E")
}