@import url(//fonts.googleapis.com/css?family=Questrial);
@import url(//fonts.googleapis.com/css?family=Gruppo);
@import url(//fonts.googleapis.com/css?family=Open+Sans);
@import url(//fonts.googleapis.com/css?family=Oxanium);

@font-face {
    font-family: 'Karnivore';
    src: url('../files/skin-xx/KarnivoreLite.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PlateiaBold';
    src: url('../files/skin-phoenix/PlateiaBold.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'WorkSans';
    src: url('../files/skin-phoenix/WorkSans-BlackItalic.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

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

.mono {
  //font-family: 'Noto Sans Mono', monospace;
}

body {
  background-color: #000000;
  font-family: 'Questrial', sans-serif;
}

body::after {
  content: "";
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment:fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: -1;
}

.alpha {
  background-color: var(--alpha);
  width: 100%;
  min-height: calc(100vh - 48px);
}

.sb-container {
  width: 100%;
  margin:0 auto;
  padding: 65px 20px 20px 20px;
  position:relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.secao {
  width: 100%;
  margin:auto;
}

.header {
  position:relative;
  text-align: center;
}

.esquerda {
  display: flex;
  align-content: flex-start;
  gap: 20px;
}

.direita {
  display: none;
}

#baixo {
  gap: 20px;
}

.conteudo {
  width: 100%;
  margin:0 auto;
  position:relative;
  display: flex;
  gap: 20px;
}

.principal {
  box-shadow: 0 26px 58px 0 rgba(0, 0, 0, .22), 0 5px 14px 0 rgba(0, 0, 0, .18);
  overflow-x:auto;
  width:100%;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer {
  display:flex;
  gap: 20px;
}

#tabs {
  padding: 1px;
  width: 100%;
  z-index: 1;
}

.informacoes {
  width: 100%;
}

.player-click {
  text-decoration: var(--player-click-linha);
  font-weight: var(--player-click-bold);
  color: var(--player-click-texto);
}

.winner {
  color: var(--player-winner);
  font-weight: bold;
  text-shadow: var(--shadow-winner);
}

.loser {
  color: var(--player-loser);
  font-weight: bold;
  text-shadow: var(--shadow-loser);
}

.draw {
  font-weight: bold;
  text-shadow: 0px 0px 3px #fff;
}

.discard {
  color: var(--player-discard);
}

.consider {
  color: var(--player-consider);
}

.dg-fs * {
  text-decoration: underline;
}

.dg-click {
  border-bottom: var(--dg-draw);
}

.dg-winner {
  border-bottom: var(--dg-winner);
}

.dg-loser {
  border-bottom: var(--dg-loser);
}

.dg-click:hover, .dg-fs:hover {
  cursor:pointer;
}

.player-click-th {
  text-decoration:underline;
}

.player-click:hover, .player-click-th:hover {
  cursor:pointer;
}

ul {
    display: block;
    list-style-type: disc;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

.item {
  font-size:0.8em;
  text-align:left;
}

p {
  text-align:left;
}

.titulo_sb {
  display: flex;
  align-items: center;
  align-content: stretch;
  justify-content: center;
  gap: 5px;
  min-height: 40px;
}

.titulo_sb_item {
  font-size:2em;
  font-family: 'Gruppo', sans-serif;
  font-weight: var(--sb-titulo);
  color: var(--texto);
}

.arrow {
  width: 40px;
  transform: translateY(2px);
}

.iconearrow {
  font-family: 'Questrial', sans-serif;
  font-size: 10px;
}

.online {
  border: 1px solid #666;
  border-radius: 6px;
  padding: 4px;
  position: relative;
  transform: translateY(-10px);
}

.rodando {
  color: #06f;
  font-size: 4px;
  margin-left: 12px;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  text-indent: -9999em;
  animation: load4 1.3s infinite linear;
  transform: translateZ(0);
}

.logo-evento {
  border-radius: 8px;
  width:50px;
  animation: neon-logo 2.5s ease infinite alternate;
}

@keyframes neon-logo {
  from {
	filter: drop-shadow(0 0 10px #0033FF);
  } to {
	filter: drop-shadow(0 0 10px #CC66FF);
  }
}

@keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}

.abas {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
}


.aba {
  display:none;
}

.conteudo-aba {
  width: 100%;
  display: none;
  margin-top: 20px;
  gap: 20px;
}

.aba:checked + label + .conteudo-aba {
  display:flex;
  order:2;
  background-size: 200% auto;
  flex-wrap: wrap;
}

.aba + label {
  cursor: pointer;
  width: 100%;
  text-align: center;
  border: var(--aba-borda);
  padding: 7px;
  height: 34px;
  font-weight: bold;
  text-shadow: var(--aba-shadow);
  flex:auto;
  order:1;
  margin: -1px;
  background-color: var(--aba);
  box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.12), 0 8px 8px rgba(0,0,0,0.12), 0 16px 16px rgba(0,0,0,0.12);
}

.aba:checked + label {
  cursor: default;
  text-shadow: var(--aba-shadow);
  //text-transform: uppercase;
  background-color: var(--aba-checked);
}

.aba + label:hover {
  background-color: var(--aba-hover);
}

.aba:checked + label:hover {
  background-color: var(--aba-checked);
}

.titulo {
  width: 100%;
  border: 1px solid #444;
  border-bottom: 0;
  padding: 6px 3px 6px 3px;
  background-color: var(--titulo-caixa);
  min-height: 30px;
  font-weight: bold;
  text-align: center;
  color: var(--titulo);
  text-shadow: var(--titulo-sombra);
  border-radius: 6px 6px 0 0;
  display:block;
}

.titulo-playercard {
  min-height: 38px;
  font-family: 'Gruppo', sans-serif;
  font-weight: bold;
  font-size: 1.6em;
}

.aovivo-container {
  width:100%;
  border-radius: 6px;
}

.titulocaixa {
  top:0;
  left: calc(50%);
  transform: translateX(-50%) translateY(-0.55em);
  position: absolute;
  font-weight:bold;
  font-size:1.3em;
}

.staff {
  position:absolute;
  top:89px;
  font-weight:bold;
  color:#fff;
  border: 1px solid #444;
  border-radius: 0 0 6px 6px;
  padding: 5px;
  background: #333;
}

.staff-bio {
  font-size:0.9em;
  width:100%;
  max-height:100px;
  overflow-y:auto;
  text-align:left;
}

.staff-bio::-webkit-scrollbar {
  width: 12px;
}

.staff-bio::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

.staff-bio::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 10px;
}

.titulo-participantes {
  font-family: 'Gruppo', sans-serif;
  top:10px;
  position: absolute;
  font-weight:bold;
  font-size:1.3em;
  color: var(--texto);
  display: inline-block;
  width:100%;
  text-align:center;
}

.now-playing {
  color: var(--titulo);
  font-weight:bold;
  font-size:1.3em;
}

.aovivo-wrap {
  font-family: 'Gruppo', sans-serif;
  padding:0px;
  color:#fff;
  margin:0px;
  border:#333 1px solid;
  border-spacing: 0px;
  border-radius: 0 0 6px 6px;
  margin-bottom: 0px;
}

.title {
  background-color: rgba(0, 0, 0, 0.7);
  background-size: cover;
  background-position: center;
  border-radius: 0 0 6px 6px;
  position:relative;
  padding:10px 10px 75px 10px;
  display:flex;
  flex-wrap:wrap;
  align-items: stretch;
}

.dg-grade {
  position:absolute;
  left: -5px;
  top:calc(50%);
  transform:translateY(-50%);
  z-index:3;
  scale:0.9;
}

.oxanium {
  font-family: 'Oxanium';
  font-size:0.9em;
  transform:translateY(1px);
}

.expand {
  font-weight: bold;
  scale: 1.3 1;
}

.dg-perfect {
  color: #0cf;
  text-shadow: 0px 0px 3px #0cf;
}

.dg-great {
  color: #0f0;
  text-shadow: 0px 0px 3px #0f0;
}

.dg-good {
  color: #ee0;
  text-shadow: 0px 0px 3px #ee0;
}

.dg-bad {
  color: #f9f;
  text-shadow: 0px 0px 3px #f9f;
}

.dg-miss {
  color: #f66;
  text-shadow: 0px 0px 3px #f66;
}

.dg-level {
  position:absolute;
  top:calc(80%);
  left: 40px;
  transform:translateY(-45%);
  z-index:3;
}

.dg-camp {
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient(to right, rgba(0,0,0,0), #933, rgba(0,0,0,0)) 1 0%;
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgb(50 0 20), rgba(0,0,0,0));
  margin: 0 auto;
  width:80%;
  font-size:0.8em;
  margin-top:8px;
}

.dg-song {
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient(to right, rgba(0,0,0,0), #939, rgba(0,0,0,0)) 1 0%;
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgb(40 0 50), rgba(0,0,0,0));
  margin: 0 auto;
  width:80%;
  font-size:0.8em;
  margin-top:2px;
  margin-bottom:8px;
}

.dg-avatar {
  display:inline;
  vertical-align:bottom;
  width:30px;
  height:30px;
  border-radius: 6px 6px 0 6px;
  border: 1px solid black;
}

.dg-player {
  font-size:0.8em;
  background-image: linear-gradient(to bottom, #0aa, #000, #0aa);
  border-radius: 0 6px 6px 0;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  padding: 0px 15px 0px 5px;
  transform: translateX(-1px);
  z-index:3;
}

.dg-table {
  width:100%;
}

.dg-row {
  width: 100%;
  text-align: center;
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient(to right, rgba(0,0,0,0), #39a, rgba(0,0,0,0)) 1 0%;
  margin-top: 3px;
}
.dg-odd {
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgb(0 8 45), rgba(0,0,0,0));
}

.dg-even {
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgb(0 32 45), rgba(0,0,0,0));
}

.dg-value {
  position:absolute;
  right:0;
  bottom:2px;
  font-family: 'Karnivore', sans-serif;
}

.dg-title {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  position:relative;
  padding:10px 10px 20px 10px;
  border:3px solid #666;
  font-family: 'Open Sans';
}

.dg-grade-phoenix {
  position:absolute;
  left: 30px;
  top:calc(70%);
  transform:translateY(-50%);
  z-index:3;
  width:120px;
}

.dg-plate-phoenix {
  position:absolute;
  left: 30px;
  top:calc(86%);
  transform:translateY(-50%);
  z-index:3;
  width:120px;
}

.dg-judge-phoenix {
  font-family: 'WorkSans';
}

.expand-phoenix {
  scale: 1.1 1;
}

.dg-perfect-phoenix {
  background: linear-gradient(to right, #0bf 0%, #3df 50%, #aaf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.dg-great-phoenix {
  background: linear-gradient(to right, #5e2 0%, #9fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.dg-good-phoenix {
  background: linear-gradient(to right, #ea2 0%, #ee9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.dg-bad-phoenix {
  background: linear-gradient(to right, #a0c 0%, #f8f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.dg-miss-phoenix {
  background: linear-gradient(to right, #e00 0%, #e88 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.dg-score-phoenix {
  text-align: center;
  font-family:PlateiaBold;
  position:absolute;
  top:calc(35%);
  background-color: rgba(0, 0, 0, 0.7);
  border-radius:6px;
  line-height: 1.2;
  padding: 3px;
}

.dg-score-title-phoenix {
  font-size:0.6em;
}

.dg-score-score-phoenix {
  letter-spacing: 3px;
  font-size:1.4em;
  text-shadow: 1px 1px #00f;
}

.dg-zero-phoenix {
  color: #666;
  text-shadow: 0 0 5px #666;
}

.dg-level-phoenix {
  position:absolute;
  top:calc(21%);
  right: 5px;
  transform:translateY(-45%);
  z-index:3;
  height:40px;
}

.phoenix-red {
  border-image: linear-gradient(to right, rgba(0,0,0,1), rgba(255, 0, 0, 0.6), rgba(0,0,0,1)) 1 0%;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(255, 0, 0, 0.6));
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%);
}

.phoenix-blue {
  border-image: linear-gradient(to right, rgba(0,0,0,1), rgba(32, 96, 255, 0.6), rgba(0,0,0,1)) 1 0%;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(32, 96, 255, 0.6));
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%);
}

.dg-camp-phoenix {
  position:absolute;
  right:0;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-bottom:0;
  margin: 0 auto;
  width:70%;
  font-size:0.8em;
  bottom: 10px;
}

.dg-song-phoenix {
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-bottom:0;
  margin: 0 auto;
  width:100%;
  font-size:0.8em;
  margin-top:2px;
  margin-bottom:8px;
  padding: 10px;
}

.dg-row-phoenix {
  width: 75%;
  margin-left:auto;
  text-align: center;
  position: relative;
  border-width: 1px 0 0 0;
  border-style: solid;
}

.dg-value-phoenix {
  position:absolute;
  right:0;
  bottom:2px;
  font-family: 'Open Sans', sans-serif;
  font-weight:700;
}

.dg-title-phoenix {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  position:relative;
  padding:10px 10px 30px 10px;
  border:3px solid #666;
  font-family: 'Open Sans';
}

.dg-estrela-prime2 {
  position: absolute;
  left: 20px;
  top: 19%;
  height: 15px;
}

.dg-row-prime2 {
  width: 100%;
  text-align: center;
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient(to right, rgba(0,0,0,0), #39a, rgba(0,0,0,0)) 1 0%;
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgb(0 18 90), rgba(0,0,0,0));
  margin-top: 3px;
}

.dg-player-prime2 {
  font-size:0.8em;
  background-image: linear-gradient(to bottom, #333, #000, #333);
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  transform: translateX(-1px);
  z-index:3;
}

.title-musica {
  width: 100%;
  padding: 0 0 0 10px;
  position:absolute;
  bottom:30px;
  right:10px;
}

.listas {
  display: grid;
  gap: 20px;
  width: 100%;
}

.live-link {
  text-decoration: underline;
  cursor: pointer;
  color: var(--live-link);
  font-family: 'Questrial', sans-serif;
}

.barras-wrap {
  position:relative;
  padding: 10px 10px 10px 10px;
  border-radius: 6px;
  border: 1px solid #444;
  width: 100%;
  background-color: var(--principal-bg);
  backdrop-filter: blur(2px);
  box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.12), 0 8px 8px rgba(0,0,0,0.12), 0 16px 16px rgba(0,0,0,0.12);
}

.players {
  position:relative;
  padding: 10px 10px 10px 10px;
  display:grid;
  grid-template-columns: repeat(auto-fill, 160px);
  justify-content: space-evenly;
  border-radius: 6px;
  border: 1px solid #444;
  width: 100%;
  background-color: var(--principal-bg);
  backdrop-filter: blur(2px);
  box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.12), 0 8px 8px rgba(0,0,0,0.12), 0 16px 16px rgba(0,0,0,0.12);
}

.players_live {
  position:relative;
  padding: 10px 10px 10px 10px;
  font-family: 'Gruppo', sans-serif;
  color: #fff;
  margin: 10px;
  display:flex;
  flex-wrap:wrap;
  align-items: center;
  flex-grow:1;
  border-radius: 6px;
  border: 1px solid #444;
  background-color: rgba(0, 0, 0, 0.5);
}

.jogador-container {
  min-width:160px;
  min-height:60px;
  flex:1;
  display:flex;
  flex-wrap:wrap;
  flex-grow: 1;
}

.jogador {
  margin: auto;
  font-weight:bold;
  font-size: 1em;
  position: relative;
  display: inline-block;
  flex:1;
}

.light-blue {
  color: #9cf;
}

.avatar-ranking {
  display:inline;
  vertical-align:middle;
  width:30px;
  height:30px;
  border: 1px solid grey;
  border-radius: 6px;
  transform: translateX(-5px);
}

.avatar-vs {
  margin: 5px 5px 0 0;
}

.avatar {
  display: block;
  top: calc(50%);
  transform: translateY(-50%);
  position: absolute;
  width:50px;
  height:50px;
  background-size: cover;
  background-position: center;
  border: 1px solid grey;
  border-radius: 25px;
}

.avatar-big {
  background-color: rgba(0, 0, 0, 0.5);
  background-size: cover;
  background-position: center;
  position:relative;
  width:100%;
  padding-top: 100%;
  border: 1px solid #444;
  border-bottom: 0;
}

.bandeira-big {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border-radius: 8px;
  width: 80px;
}

.logo-card {
  background: #00000080;
  position: absolute;
  width: 80px;
  height: 80px;
  background-repeat:no-repeat;
  background-position: center center;
  background-size: contain;
  background-attachment:fixed;
  border: 1px solid #444;
  border-radius: 8px;
}

.upleft {
  left:10px; 
  top:10px;
}

.downright {
  right:10px; 
  bottom:10px;
}

.social-card {
  background: #000000A0;
  position: absolute;
  right:10px; 
  top:10px;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 10px;
}

.medalhas-card {
  background: #000000bb;
  position: absolute;
  left:10px;
  bottom:10px;
  border: 1px solid #444;
  border-radius: 8px;
  padding:5px;
  line-height: 0;
  max-height: 80px;
  overflow-y: auto;
}

.medalhas-card::-webkit-scrollbar {
  width: 12px;
}

.medalhas-card::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

.medalhas-card::-webkit-scrollbar-thumb {
  background: #6669;
  border-radius: 10px;
}

.medal-card {
  display: inline;
  vertical-align: middle;
  height: 13px;
}

.camp-card {
  color: #fff;
  font-size: 0.8em;
}

.caixa-texto {
  background: var(--caixa-texto);
  color: var(--texto);
  border: 1px solid #444;
  border-radius: 0 0 6px 6px;
  padding: 20px;
  width: 100%;
  margin-bottom: 0px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.12), 0 8px 8px rgba(0,0,0,0.12), 0 16px 16px rgba(0,0,0,0.12);
  text-align: center;
}

.dado {
  color: var(--item);
}

.cinza {
  color: #888;
}

.pequeno {
  font-size:0.75em;
}

.flex {
  display:flex;
  justify-content:center;
  align-items: center;
  flex-wrap:wrap;
}

.img-footer {
  max-width: 147px;
  max-height:150px;
  margin: 5px;
  flex: 1 100%;
}

.banners {
  flex: 1;
}

.banners > caixa-texto {
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
}

.ranking {
  padding:0px;
  color: var(--texto);
  border:#333 1px solid;
  border-spacing: 0px;
  width: 100%;
}

.ranking th {
  font-family: 'Gruppo', sans-serif;
  vertical-align: middle;
  color: var(--titulo);
  line-height: 0.8;
  text-shadow: var(--titulo-sombra);
  padding:18px 5px 18px 5px;
  border-bottom: var(--tabela-cabecalho-baixo);
  background: var(--tabela-cabecalho);
  font-size:1.2em;
}

.ranking th.th-mobile {
  text-align: center;
  text-shadow: var(--titulo-sombra);
  color: var(--titulo);
  padding:8px 3px 8px 3px;
  position:relative;
}

.tam-fixo-50 {
  width: 50px;
  overflow: hidden;
}

.tam-fixo-25 {
  width: 25px;
  overflow: hidden;
}

.th-vs {
  padding: 5px 10px 5px 0 !important;
}

.titulo-azul {
  font-family: 'Gruppo', sans-serif;
  vertical-align: middle;
  /*color: #09f;*/
  line-height: 0.8;
  text-shadow: 1px 1px 0px #000;
  padding:15px 3px 15px 3px;
  font-size:1.5em;
  font-weight:bold;
}

.titulo-live {
  font-family: 'Gruppo', sans-serif;
  vertical-align: middle;
  line-height: 0.8;
  text-shadow: 1px 1px 0px #000;
  padding:15px 3px 15px 3px;
  font-size:1.5em;
  font-weight:bold;
  background-color: rgba(0, 0, 0, 0.5);
}

.ranking tr {
  text-align: right;
}

.ranking td:first-child {
  text-align: right;
}

.ranking td {
  vertical-align: middle;
  height: 40px;
  padding:0 5px 0 0;
  border-top: var(--cell-top);
  border-bottom: var(--cell-bottom);
  border-right: 0;
  background-color: var(--linha-impar);
  font-size: 1em;
}

.ranking tr:nth-child(odd) td {
  background-color: var(--linha-impar);
}

.ranking tr:nth-child(even) td {
  background-color: var(--linha-par);
}

.td-fs {
  background-color: var(--linha-par) !important;
}

.td-fs.barra {
  //background-repeat: no-repeat;
  //background-size: 100% 50%;
  //background-position-y: bottom;
  //vertical-align: top;
}

.borderright {
  border-right: var(--tabela-cabecalho-direita) !important;
}

.ranking tbody:hover td[rowspan], .ranking tr:hover td {
  //background-color: var(--linha-hover);
  font-weight:bold;
}

.bold {
  font-weight: bold;
//  text-shadow: 0px 0px 3px #fff;
}

.meio-absolute {
  position:absolute;
  top:calc(50%);
  transform:translateY(-50%);
  text-align: left;
}

.ranking td.noborderright {
  border-right: 0px;
}

.ranking td.score {
  text-align:right;
}
.nome{
  text-align: left !important;
  padding-left: 10px !important;
}

.vencedores {
  color: #3f3;
  text-shadow: 1px 1px 1px #000;
}

.musica{
  width:100%;
  min-width:110px;
  display: inline-block;
  position: relative;
  padding: 0;
  /* text-align:right; */
}

.musicalabel-xx, .musicalabel-prime2, .musicalabel-phoenix {
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}

.iconemusica {
  display: block;
  top: calc(50%);
  right: -3px;
  transform: translateY(-50%);
  position: absolute;
  vertical-align: middle;
  padding: 0;
}

.updown {
  vertical-align: middle;
}

.pisca {
  animation: blinker 5s ease-in-out infinite;
}

@keyframes blinker {
  47% {opacity: 1;}
  50% {opacity: 0;}
  53% {opacity: 1;}
}

.bg-preto {
  font-weight:bold;
  background-color:#000;
  padding:5px;
  border-radius:6px;
}

.percent-sm {
  font-size:0.8em;
}

.pt {
  color: #3f3;
}

.medalha {
  display: inline-block;
  animation: scalefade 2.5s ease-in-out infinite alternate;
  z-index:2;
}

@keyframes scalefade {
  0% {opacity: 1; transform: scale(1,1); filter: none;}
  80% {opacity: 1; transform: scale(1,1); filter: none;}
  100% {opacity: 0.5; transform: scale(1.2,1.2); filter: blur(2px);}
}

.estrela {
  display:inline;
  vertical-align:middle;
  width:20px;
  height:20px;
  animation: neon-estrela 1s ease-in-out infinite alternate, rodar 10s linear infinite;
}

.light.estrela {
  animation: neon-estrela2 1s ease-in-out infinite alternate, rodar 10s linear infinite;
}

@keyframes rodar {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}

@keyframes neon-estrela {
  from {}
  to {filter: drop-shadow(0 0 5px #FFDD1B) drop-shadow(0 0 10px #FFDD1B);}
}

@keyframes neon-estrela2 {
  from {filter: brightness(0.6);}
  to {filter: brightness(2) drop-shadow(0 0 5px #FFDD1B) drop-shadow(0 0 10px #FFDD1B) drop-shadow(0 0 15px #FFDD1B);}
}

.barrasProgresso td {
  padding:5px 0px;
}

.barOuter {
  background: var(--bar);
  background-size: 100%;
  border: var(--bar-borda);
  border-radius: 8px;
  box-shadow: inset 1px 1px 3px 0 rgba(0, 0, 0, 0.8), 1px 1px 0 0 rgba(255, 255, 255, 0.12);
  height: 16px;
  width: 100%;
  margin-bottom: 0px;
  position: relative;
}

.barLabel {
  color: var(--bar-percent);
  font-size:12px;
  position: absolute;
  right: -45px;
  top: 0;
}

.barLabel2 {
  color: var(--bar-percent);
  font-size:12px;
  text-align:left;
}

.barInner {
  background-color: #A444B1;
  border-right: 1px solid #444;
  border-radius: 7px;
  height: 100%;
  width: 50%;
  background-size: 100% 100%, 20px 20px, 100% 100%;
  background-image:
        linear-gradient(to bottom,
                        rgba(255, 255, 255, 0.33) 0,
                        rgba(255, 255, 255, 0.08) 50%,
                        rgba(0, 0, 0, 0.25) 50%,
                        rgba(0, 0, 0, 0.1) 100%),
        linear-gradient(45deg,
                        rgba(255, 255, 255, 0.16) 25%,
                        rgba(0, 0, 0, 0) 25%,
                        rgba(0, 0, 0, 0) 50%,
                        rgba(255, 255, 255, 0.16) 50%,
                        rgba(255, 255, 255, 0.16) 75%,
                        rgba(0, 0, 0, 0) 75%,
                        rgba(0, 0, 0, 0)),
        linear-gradient(to right, #000, #ccc);
  box-shadow: inset 0 1px 1px 0px rgba(255, 215, 215, 0.5),
                inset 0 -1px 1px 0px rgba(255, 255, 255, 0.25),
                1px 1px 3px 0 rgba(0,0,0,0.33);
}

.bandeira {
  display:inline;
  vertical-align:middle;
}

.bandeira-vs {
  display:inline;
  vertical-align:middle;
  width:32px;
  transform: translateX(-5px);
  border: 1px solid grey;
  border-radius: 4px;
}

.brasao {
  display:inline;
  vertical-align:middle;
  width:32px;
}

.brasao-vs {
  display:inline;
  vertical-align:middle;
  width:32px;
  transform: translateX(-5px);
}

.player-menor {
  width: 100%;
  position: relative;
  display: block;
}

.nobr {
  white-space: nowrap;
}

.iconenota {
  height:18px;
  transform: translateY(2px);
}

.barras,
.barras:before,
.barras:after {
  background: #06f;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}

.barras {
  color: #06f;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  transform: translateZ(0);
  animation-delay: -0.16s;
}

.barras:before,
.barras:after {
  position: absolute;
  top: 0;
  content: '';
}

.desafioEtapa {
  color:#ff3;
  font-weight:bold;
}

.desafioSingle {
  color:#f66;
  font-weight:bold;
}

.desafioDouble {
  color:#6f3;
  font-weight:bold;
}

.barras:before {
  left: -1.5em;
  animation-delay: -0.32s;
}

.barras:after {
  left: 1.5em;
}

@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

.racha-menor {
  width: 100%;
}

@media only screen and (max-width: 640px) {
  .racha-menor {
    font-size:0.8em;
  }
  .esquerda {
    flex-direction: column;
  }
  #baixo {
    flex-wrap: wrap;
  }
  .banners {
    flex-basis: 100%;
  }
  .logo-evento {
    width: 30px;
    border-radius: 5px;
  }
  .titulo_sb_item {
    font-size:1.6em;
  }
  .arrow {
    width: 32px;
    transform: translateY(0);
  }
  .table-mobile {
    width: 100%;
  }
  .table-mobile td {
    width: 50%;
  }
  .menor {
    display:block;
    overflow-x: hidden;
    width: 100%;
  }
  .maior {
    display:none;
  }
  .musicalabel-xx, .musicalabel-prime2 {
    right:24px;
  }
  .musicalabel-phoenix {
    right:32px;
  }
  .icone {
    width:24px;
    height:24px;
  }
  .iconenota {
    height:15px;
    transform: translateY(-2px);
  }
  .ranking td.score {
	  padding-right:24px;
  }
  .aovivo-container {
    font-size: 1em;
  }
  .aba {
    border-radius: 6px;
  }
  .bandeira {
    width:32px;
    border: 1px solid grey;
    border-radius: 4px;
  }
}

@media only screen and (min-width: 641px) {
  .dg-title, .dg-title-phoenix {
    scale: 1.4;
  }
  .th-fs {
    font-size: 1em !important;
  }
  .musicalabel-xx, .musicalabel-prime2 {
    right:40px;
  }
  .musicalabel-phoenix {
    right:48px;
  }
  .icone {
    width:40px;
    height:40px;
  }
  .ranking td.score {
    padding-right:36px;
  }
  .menor {
    display:none;
  }
  .maior {
    display:block;
    width: 100%;
  }
  .principal {
    overflow-x:visible;
  }
  .bandeira {
    width:24px;
  }
  .iconenota {
    height:22px;
  }
}

@media only screen and (min-width: 641px) and (max-width: 960px)  {
  .ranking,.aovivo-container {
    font-size: 1em;
  }
  .esquerda {
    width: 100#;
  }
  .informacoes {
    flex-grow: 1;
  }
  .aba + label {
    width: auto !important;
  }
}

@media only screen and (min-width: 961px) {
  .maior-table {
    display:table-cell;
  }
  .conteudo {
    flex-direction: row;
  }
  .esquerda {
    flex-basis: 300px;
    flex-grow: 0;
    flex-shrink: 0;
    flex-direction: column;
  }
  #tabs {
    position: sticky;
    top: 0;
    backdrop-filter: blur(5px);
  }
  #caixa-info-esquerda, #caixa-progresso-esquerda {
    display: block;
  }
  #baixo {
    display: none;
  }
  .scores {
    flex-grow: 1;
  }
  .informacoes, .aovivo-wrap {

  }
  .aovivo-container {
    //font-size:1.2em;
  }
  #caixa-aovivo-cima {
    display:none;
  }
}

@media only screen and (max-width: 960px) {
  .maior-table {
    display:none;
  }
  .sb-container {
    padding: 60px 10px 10px 10px;
  }
  .conteudo {
    flex-direction: column;
  }
  .esquerda {
    width: 100%;
  }
  #caixa-info-esquerda, #caixa-progresso-esquerda {
    display: none;
  }
  #baixo {
    display: flex;
  }
  .scores {
    width: 100%;
  }
  .informacoes {

  }
  #caixa-aovivo-esquerda {
    display: none;
  }
}

@media only screen and (min-width: 1600px) {
  .direita {
    display: flex;
    align-content: flex-start;
    gap: 20px;
    flex-basis: 300px;
    flex-grow: 0;
    flex-shrink: 0;
    flex-direction: column;
  }
  #caixa-aovivo-esquerda {
    display: none;
  }
  #caixa-aovivo-direita {
    position: sticky;
    top: 0;
  }
}

.glow {
  color: #ffffff;
  animation: neon 1s ease infinite alternate;
}

@keyframes neon {
  from { text-shadow: 0 0 6px #fff, 0 0 12px  #fff, 0 0 18px #fff, 0 0 30px  #228DFF, 0 0 42px  #228DFF, 0 0 48px  #228DFF, 0 0 60px #228DFF, 0 0 90px #228DFF;
  } to { text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 10px #228DFF, 0 0 14px #228DFF, 0 0 16px #228DFF, 0 0 20px #228DFF, 0 0 30px #228DFF; }
}

.modal-container {
  display: none;
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.8);
  animation: fadeIn;
  animation-duration: 0.3s;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

.modal-conteudo {
  margin: auto;
  width:100%;
  max-width:400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  animation-name: opacityIn;
  animation-duration: 0.3s;
}

@keyframes opacityIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.ellipsis-anim span {
    opacity: 0;
    animation: ellipsis-dot 1s infinite;
}

.ellipsis-anim span:nth-child(1) {
    animation-delay: 0.0s;
}
.ellipsis-anim span:nth-child(2) {
    animation-delay: 0.1s;
}
.ellipsis-anim span:nth-child(3) {
    animation-delay: 0.2s;
}

@keyframes ellipsis-dot {
      0% { opacity: 0; }
     50% { opacity: 1; }
    100% { opacity: 0; }
}
.close-container {
  position:relative;
}
.close {
  color: #999;
  padding-top: 3px;
  padding-right: 8px;
  position:absolute;
  right:0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  z-index: 3;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.fa, .fas, .fab {
  color: var(--player-click-texto);
}

:root {
  --sb-titulo: bold;
  --aba: #000b;
  --aba-hover: #111;
  --aba-checked: #222;
  --aba-shadow: 1px 1px 0px #000;
  --aba-borda: 1px solid #444;
  --alpha: rgba(0, 0, 0, 0.7);
  --alpha2: rgba(0, 0, 0, 0.85);
  --principal-bg: rgba(0, 0, 0, 0.5);
  --texto: #fff;
  --caixa-texto: linear-gradient(to bottom right, #000, #444);
  --titulo: #fff;
  --titulo-caixa: rgba(40,40,40,0.6);
  --titulo-sombra: 2px 2px 4px #000;
  --live-link: #09f;
  --item: #f96;
  --cell-top: 1px solid #333;
  --cell-bottom: 1px solid #000;
  --player-click-linha: underline #69f;
  --player-click-texto: #9cf;
  --player-click-bold: normal;
  --player-winner: #3f3;
  --player-loser: #f77;
  --player-discard: #f33;
  --player-consider: #0c0;
  --dg-draw: 1px solid #fff;
  --dg-winner: 1px solid #3f3;
  --dg-loser: 1px solid #f77;
  --shadow-winner: 0px 0px 3px #0f0;
  --shadow-loser: 0px 0px 3px #f00;
  --linha-impar: rgba(30, 30, 30, 0.8);
  --linha-par: rgba(15, 15, 15, 0.8);
  --linha-hover: rgba(6, 6, 6, 1);
  --tabela-select: linear-gradient(to bottom,  #111,  #111);
  --tabela-cabecalho: linear-gradient(to bottom,  #111,  #444);
  --tabela-cabecalho-direita: 1px solid #333 !important;
  --tabela-cabecalho-baixo: 1px solid #333;
  --bar: #252525;
  --bar-borda: 1px solid #000;
  --bar-percent: #aaa;
}

[data-theme="light"] {
  --sb-titulo: bold;
  --aba: #111c;
  --aba-hover: #222;
  --aba-checked: #111;
  --aba-shadow: 1px 1px 0px #000;
  --alpha: rgba(255, 255, 255, 0.85);
  --alpha2: rgba(255, 255, 255, 0.85);
  --principal-bg: rgba(255, 255, 255, 0.5);
  --texto: #000;
  --caixa-texto: linear-gradient(to bottom right, #fff, #ccc);
  --item: #066;
  --titulo: #fff;
  --titulo-caixa: rgba(40,40,40,0.6);
  --titulo-sombra: 2px 2px 4px #000;
  --live-link: #09f;
  --cell-top: 1px solid #fff;
  --cell-bottom: 1px solid #bbb;
  --player-click-linha: underline #69f;
  --player-click-texto: #16c;
  --player-click-bold: normal;
  --player-winner: #080;
  --player-loser: #800;
  --player-discard: #f33;
  --player-consider: #0c0;
  --dg-draw: 1px solid #000;
  --dg-winner: 1px solid #080;
  --dg-loser: 1px solid #800;
  --shadow-winner: 0px 0px 3px #0f0;
  --shadow-loser: 0px 0px 3px #f00;
  --dg-draw: 1px solid #111;
  --linha-impar: rgba(240, 240, 240, 0.8);
  --linha-par: rgba(225, 225, 225, 0.8);
  --linha-hover: rgba(200, 200, 200, 1);
  --tabela-select: linear-gradient(to bottom,  #333,  #333);
  --tabela-cabecalho: linear-gradient(to bottom,  #333,  #888);
  --tabela-cabecalho-direita: 1px solid #666 !important;
  --tabela-cabecalho-baixo: 1px solid #777;
  --bar: #c5c5c5;
  --bar-borda: 1px solid #ccc;
  --bar-percent: #333;
}