OpenStreetBrowser/src/category.css

.category {
  position: relative;
}
.category > .loadingIndicator {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 15px;
  display: none;
}
.category.loading > .loadingIndicator {
  padding-top: 2px;
  display: block;
}

.category > .loadingIndicator2 {
  display: none;
}

/* Source: http://tobiasahlin.com/spinkit/ */
.category.open.loading > .loadingIndicator2,
.category.open.loading > .content > .categoryWrapper > .category-list.open > .loadingIndicator2 {
  text-align: left;
  display: block;
  background: #efefef;
  padding-left: 40px;
}

.category.loading > .loadingIndicator2 > div,
.category.loading > .content > .categoryWrapper > .category-list.open > .loadingIndicator2 > div {
  width: 9px;
  height: 9px;
  margin-right: 9px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.category.loading > .loadingIndicator2 .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.category.loading > .loadingIndicator2 .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

.category header {
  padding-top: 3px;
  border-bottom: 1px dotted #999;
  user-select: none;
  font-size: 15px;
}
.category header > span.repoId {
  margin-left: 0.2em;
  font-size: 10px;
  line-height: 10px;
  color: #7f7f7f;
}
.category header > a.reload {
  float: right;
}
.category > .content,
.category > .tools,
.category > .status {
  display: none;
}
.category.open > .content,
.category.open > .tools,
.category.open > .status {
  display: block;
}
.category .info {
  position: relative;
}
.category .info > .closeButton {
  position: absolute;
  top: 0;
  right: 0;
  text-decoration: none;
  font-size: 12px;
}
.category > .status,
.category > .content > ul.overpass-layer-list {
  padding-top: 3px;
  background: #efefef;
}
.body h4 {
  margin-bottom: 0;
}
.body ul.overpass-layer-list {
  padding-left: 40px;
}

.category {
  margin-left: 1em;
}
#contentListBaseCategory {
  margin-left: -2em;
}
#contentListBaseCategory > .category > header {
  display: none;
}
#contentListAddCategories {
  margin-left: -1em;
}
.info > table > tr > td:first-of-type,
.info > table > tbody > tr > td:first-of-type {
  position: relative;
}
.info .sign {
  text-align: center;
  position: absolute;
  top: 3px;
  font-size: 15px;
  left: 0;
  right: 0;
  z-index: 1;
  display: inline-block;
}
.leaflet-popup-content {
  min-width: 300px;
  max-height: 300px;
  overflow: auto;
  word-wrap: break-word;
}
.leaflet-popup-content:after {
  content: ' ';
  clear: both;
  display: table;
}
.overpass-layer-icon div.sign {
  font-size: 15px;
}
.info .details {
  display: none;
}
.info .infoShowDetails .details {
  display: initial;
}
.info .infoShowDetails .summary {
  display: none;
}

dl > dd {
  position: relative;
}
.tag2link {
  position: absolute;
  top: 1em;
  left: 0;
  border: 1px solid black;
  padding: 0.25em;
  background: white;
  z-index: 1;
}
.tag2link > .closeButton {
  float: right;
}
.tag2link > ul {
  padding-left: 0;
  margin: 0;
}
.tag2link > ul > li {
  list-style: none;
}