html {
  min-height: 100%;
}

body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  color: #101010;
  background: #efefef;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

strong {
  font-weight: 700;
}

#mainContent {
  flex: 1;
}

#siteFooter {
  padding-bottom: 20px;
}

#languageChooser {
  display: flex;

  .language-choice {
    display: block;
    margin-right: 20px;
    text-decoration: none;
  }
}

.brand-link {
  text-decoration: none;
}

.badge-container {
  width: 50px;
  height: 50px;
  border: 1px solid #dee2e6;
  display: flex;
  justify-content: center;
  align-items: center;
}

#trackImageShowcase .carousel-item img {
  max-height: 700px;
  max-width: 100%;
  margin: auto;
}

.track-image-caption {
  text-align: center;
}

#trackImageList {
  display: flex;
  flex-wrap: wrap;
}

.track-image-preview {
  .delete-image {
    position: absolute;
    z-index: 5;
    background-color: white;
    right: 0px;
  }

  .edit-image-description {
    position: absolute;
    z-index: 5;
    right: 0px;
    top: 2em;
    width: 1em;
    height: 1em;
    border-radius: 0.375em;
    border: 0;
    box-sizing: content-box;
    color: #000;
    opacity: 0.5;
    padding: 0.25em 0.25em;
  }

  .edit-image-description i {
    position: relative;
    top: -0.25em;
  }

  img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  position: relative;
  width: min(317px, 100%);
  height: calc(9 / 16 * 317px);
  border: 1px solid grey;
  margin-right: 5px;
  margin-bottom: 5px;
}

.track-description img {
    max-width: 100%;
}

.summary-toggler {
  cursor: pointer;
}

.admin-badge-list * {
  margin-left: 5px;
  margin-right: 5px;
}

.badge-container img {
  max-width: 100%;
  max-height: 100%;
}

.tooltip-inner {
  max-width: 400px;
}

.friendlist-control {
  padding: 0px;
  display: flex;
  align-items: center;

  button {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  span {
    padding-left: 1em;
  }
}

.favourite-star, .favourite-star-ni {
  color: orange;
}

.favourite-star {
  cursor: pointer;
}

.count-field {
  width: 50px;
  display: inline-block;
  text-align: right;
}

.calendar-title {
  text-align: center;
}
.calendar-controls {
  text-align: center;
  margin-bottom: 50px;
}
.profile-calendar {
  width: 100%;

  thead {
    text-align: center;
    font-size: 120%;
  }

  .calendar-cell, .calendar-cell-empty {
    height: 150px;
    width: calc(100%/7);
  }

  .calendar-cell {
    border: 1px solid gray;
    vertical-align: top;

    .calendar-date {
      font-size: 140%;
      font-weight: bold;
    }

    ul {
      list-style: none;
      text-align: center;
    }
  }

  .cell-length-0 {
    color: gray;
  }
  .cell-length-1 {
    background-color: #8FF0A4;
    ul {
      font-size: 110%;
    }
  }
  .cell-length-2 {
    background-color: #75DD95;
    ul {
      font-size: 120%;
    }
  }
  .cell-length-3 {
    background-color: #5BC987;
    ul {
      font-size: 130%;
    }
  }
  .cell-length-4 {
    background-color: #40B678;
    ul {
      font-size: 140%;
    }
  }
  .cell-length-5 {
    color: white;
    background-color: #26A269;
    ul {
      font-size: 150%;
    }
  }

  a {
    text-decoration: none;
    color: inherit;
  }
}

/* Ensure a consistent width of the cells in the browse view. */
.browse-summary th, .browse-summary td {
  width: 25%;
}

.chart-title {
  text-align: center;
}

.list-group.list-group-root {
  padding: 0;
  overflow: hidden;
}

.list-group.list-group-root .list-group {
  margin-bottom: 0;
}

.list-group.list-group-root .list-group-item {
  border-radius: 0;
  border-width: 1px 0 0 0;
}

.list-group.list-group-root > .list-group-item:first-child {
  border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
  padding-left: 30px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
  padding-left: 45px;
}