@font-face {
  font-family: 'Vincent Praise';
  src: url('VincentPraise.woff2?v=8') format('woff2');
}
@font-face {
  font-family: 'Vincent Praise Monospace';
  src: url('VincentPraiseMono.woff2?v=0e') format('woff2');
}

* {
  font-family: 'Vincent Praise', 'Comic Sans MS';
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smoothing: unset;
}

.mono {
  font-family: 'Vincent Praise Monospace', 'Vincent Praise', 'Unifont';
}

.no-soap, .no-soap-children>* {
  image-rendering: optimizeSpeed;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -webkit-crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

html {
  height: 100%
}
body {
  margin: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  color: #fff;
  font-size: 1rem;
}

body>header {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  background: linear-gradient(#777, #fff);
  border-bottom-right-radius: 8px;
}
body>header>a {
  width: 72px;
  height: 72px;
  padding: 6px;
  margin: 6px;
  border-radius: 8px;
  opacity: 0.5;
  background-size: 100%;
  background-origin: content-box;
  background-repeat: no-repeat;
}
body>header>a:hover {
  opacity: 1;
  background-color: #ccc;
  filter: invert();
}

.logo-yoab {
  background-image: url('../res/logos/yoab.png');
}
.logo-discord {
  background-image: url('../res/logos/discord.png');
}
.logo-2ch {
  background-image: url('../res/logos/2ch.png');
}
.logo-reddit {
  background-image: url('../res/logos/reddit.png');
}

@keyframes px-spin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to { transform: translate(-50%,-50%) rotate(360deg); }
 }

.spinner {
  background-image: url('../res/spinner.png');
  background-color: #222;
  border-radius: 50%;
  width: 128px;
  height: 128px;
  margin: 0 auto;
  background-size: 96px;
  background-repeat: no-repeat;
  background-position: center;
  animation: px-spin 0.6s steps(4, end) infinite;
  position: relative;
  left: 64px;
  top: 80px;
}

body>main#content {
  margin: 0 96px;
  display: flex;
  flex-wrap: wrap;
}
#eventStats {
  flex-basis: 700px;
  flex-grow: 1.5;
}
#statsRecent {
  flex-grow: 1;
}
.section-group {
  flex-basis: 420px;
  flex-grow: 1;
}
#statsLeaderboard {
  flex-basis: 700px;
  flex-grow: 1.5;
}
#statsGraphs {
  flex-basis: 700px;
  flex-grow: 1.5;
}
#statsColors {
  flex-basis: 400px;
  flex-grow: 1;
}
body>main#content>.section-group {
  display: flex;
  flex-direction: column;
}
body>main#content>section>main,
body>main#content>.section-group>section>main  {
  visibility: hidden;
  height: calc(100% - 36px);
}

section {
  margin: 10px;
  border-radius: 8px;
  background: linear-gradient(#777, #aaa 1rem, #fff);
  padding: 4px;
}

section>header {
  width: 100%;
  text-align: center;
}

h2 {
  margin: 0;
  text-shadow: 0 4px #222;
}

section>main {
  background: #555;
  border-radius: 8px;
  padding: 4px;
}

ul {
  margin: 0;
}

.table-scroller {
  max-height: 500px;
  overflow-y: scroll;
}
.table-scroller thead {
  position: sticky;
  top: 0;
}
#statsRecent .table-scroller {
  max-height: 300px;
}

table {
  width: 100%;
  border-spacing: 0;
}

th {
  background: linear-gradient(#ccc, #fff);
  border: 2px solid transparent;
  border-color: #fff #777 #777 #fff;
  color: #222222;
}
th[onclick] {
  cursor: pointer;
  user-select: none;
}
th[onclick]:after {
  content: '⇅';
  float: right;
}
th.asc, th.desc {
  background: linear-gradient(#fff, #ccc);
  border-color: #777 #fff #fff #777;
}
th.asc:after {
  content: '↑';
}
th.desc:after {
  content: '↓';
}

tr>.numeric {
  text-align: right;
  font-family: 'Vincent Praise Monospace', 'Vincent Praise', 'Unifont';
}
td {
  border: 0.5px solid #777;
  padding: 0 8px;
}
tr:nth-child(2n) td {
  background-color: #666;
}

p {
  margin: 8px 0;
}
select, input {
  font-size: 1rem;
  color: #222222;
}
option {
  font-size: 1rem;
}

label {
  white-space: nowrap;
}

.label-container {
  min-width: 75px;
  width: 75px;
  max-width: 75px;
  position: relative;
}
.label-container-horizontal {
  position: relative;
  height: 1rem;
}
.label-container>*, .label-container-horizontal>* {
  position: absolute;
  max-width: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Vincent Praise Monospace', 'Vincent Praise', 'Unifont';
}
.label-container.stick-left>* {
  left: 8px
}
.label-container.stick-right>* {
  right: 8px
}

.date-ranges label {
  width: 100%;
  display: flex;
  align-items: center;
}
.date-ranges label>span {
  width: 100px;
}
.date-ranges label>span:last-child {
  text-align: right;
}
.date-ranges label>input {
  width: 100%;
}

@media only screen and (max-width: 720px) {
  body>header {
    flex-direction: row;
    width: 100%;
    border-radius: 0;
    z-index: 1;
  }
  body>header>a {
    width: 48px;
    height: 48px;
  }
  body>main#content {
    margin: 80px 8px;
  }
}

.hidden {
  display: none !important;
}