@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
}

body, html, * body, * body html, main {
  height: 100%;
  overflow: hidden;
}

main {
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  font-family: 'Roboto', sans-serif;
}

.overflow-el {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.hidden {
  visibility: hidden;
}

.leaderboard-section {
  flex: 1 0 66%;
  background-color: #aaa;
  display: flex;
  flex-flow: column nowrap;
  font-size: 3.2vh;
}

.leaderboard-section.hidden {
  display: none;
}

.leaderboard-container {
  flex: 1 1 auto;
}

.leaderboard-section table {
  width: 100%;
  height: 100%;
  background-color: #ccc;
  border-collapse: collapse;
  border-spacing: 0;
}

table .head-row {
  background-color: SteelBlue;
  color: #fff;
}

th, td {
  padding: 0 10px;
  text-align: left;
}

.leaderboard-section tr td:nth-child(2), .leaderboard-section tr th:nth-child(2) {
  width: 25%;
  text-align: right;
}

.leaderboard-section tr td:nth-child(3), .leaderboard-section tr th:nth-child(3) {
  width: 15%;
  text-align: right;
}

.leaderboard-section table tr:nth-of-type(2n) {
  background-color: #fff;
}

.leader-header {
  flex: 0 0 auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  color: #fff;
  background-color: #18486B;
  font-size: 1.2em;
  font-weight: 700;
  padding: 10px;
}

.leader-header .header-team {
  flex: 1 1 auto;
  margin-right: 10px;
}

.leader-header .header-rank {
  flex: 0 0 auto;
}

.slot-section {
  flex: 1 0 34%;
  background-color: #122838;
  font-size: 1.3em;
}

.slot-bounds {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  padding: 20px;
}

.slot-section.hidden,
.slot-section .minimal-slot-info,
.slot-bounds.too-many-slots .hide-on-tms {
  display: none;
}

.slot-bounds.too-many-slots .minimal-slot-info {
  display: block;
}

.slot-bounds.too-many-slots {
  font-size: 0.8em;
}

.slot {
  background-color: #fff;
  padding-bottom: 0;
  flex: 1 0 250px;
  overflow: hidden;
  margin: 7px;
}

.slot-bounds.too-many-slots .slot {
  flex-basis: 200px;
}

.slot .text-content {
  margin: 10px;
}

.slot .progress-bar {
  background-color: #ccc;
  min-height: calc(1.2em + 6px);
  position: relative;
  overflow: hidden;
}

.slot .progress-bar .slot-progress {
  display: inline-block;
  padding: 3px 10px;
  white-space: nowrap;
}

.slot .progress-bar .progress-inner {
  background-color: #158800;
  color: #fff;
  height: 100%;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 1px 1px 1px #000;
}

.slot .progress-bar .progress-inner.paused {
  background-color: #FFD700;
  color: #000;
  text-shadow: none;
}

.slot .progress-bar .progress-inner.waiting {
  background-color: #008B8B;
}

.slot-title {
  font-weight: 700;
  font-size: 1.1em;
}

.slot-state {
  text-transform: capitalize;
}