body {

  zoom: 88%;
  color: white;
  font-family: Lato, Ubuntu, sans-serif;
  font-weight: bold;
  /*background-color: #d6dee2;*/
  /*background-image: url(/photos/icpc.jpg);*/
  background-image: linear-gradient(to bottom, rgb(0, 30, 0), rgb(10, 45, 10), rgb(20, 60, 20), rgb(30, 75, 30), rgb(40, 90, 40), rgb(55, 105, 55), rgb(70, 120, 70), rgb(90, 140, 90), rgb(110, 160, 110), rgb(130, 180, 130), rgb(150, 200, 150), rgb(180, 220, 180), rgb(210, 240, 210), white);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  overflow-y: scroll;
}

/*time to transition runs*/
.run_box {
    transition: top 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: absolute !important;
    width: 100% !important;
}

.titulo {
    /* content: url(/static/assets/titulo-1stPhase.svg); */
    /* content: url(/static/assets/titulo-final.svg); */
    font-size: 20px;
    max-width: 388px;
    min-width: 288px;
    flex-grow: 2;
}


/* -- MUDA O ESTILO DAS CELULAS, BORDAS, CORES -- */
.cell {
  height: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: 1px;
  border-radius: 5px;
  border-style: outset;
  border-width: 0.01px;
  border-color: #555;
}

/* --- ALTERA O ESTILO DOS TEXTOS DE NAVEGACAO DE SEDES --*/
a {
  color: white;
}

.sedesnavigation {
  margin: 3px;
  margin-bottom: 15px;
}

.sedeslink{
  font-size: 15px;
  font-family: "Lato";
  padding: 2px;	
}

/* ------- CORES DOS TITULOS (ULTIMAS SUBMISSOES E NOME CONTEST--------*/

div#runheader > .cell {
  /*background-color: #491400 !important;*/
  background-image: linear-gradient(to top, #990012, #960012, #930012, #900011, #8d0011, #890010, #850010, #81000f, #7b000e, #76000e, #70000d, #6b000c);
  border-style: outset;
  height: 47px;
}
/* ------- TAMANHO DOS QUADRADOS SUPERIORES DAS LETRAS DOS PROBLEMAS-----*/
div#runheader > .cell.problema.quadrado {
  min-width: 50px;
}

.submission-title{
  height: 42px; 
  text-align: center;
  background-image: linear-gradient(to top, #990012, #960012, #930012, #900011, #8d0011, #890010, #850010, #81000f, #7b000e, #76000e, #70000d, #6b000c);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 8px;
  margin-bottom: 3px;
  border-width: 1px;
  border-style: outset;
  border-radius: 5px;
  padding: 2px;
  font-size: 24px;
}


/* ------- INFORMACOES DOS TIMES e ESCOLA ---------*/

.nomeEscola {
  /*display: none;
  font-size: 12px;*/
}

.nomeTime {
  /*font-size: 17px;
  text-align: left;*/
}

.longTeamName {
  /*font-size: 85%;*/
}

.run > .cell > .time {
  column-width: 295px;
}

.run > .cell > .nomeEscola {
  font-size: 12px;
}

.run > .cell > .nomeTime {
  /*font-size: 15px;*/
}


/* ------- CORES DAS POSIÇÕES DE MEDALHAS ---------*/

.ouro {
  background-image: linear-gradient(0deg, rgba(249, 242, 149, 1) 5%, rgba(224, 170, 62, 1) 25%, rgba(247, 239, 138, 1) 60%, rgba(184, 138, 68, 1) 100%);
  color: black;
  text-shadow: 1px 1px goldenrod;
}

.prata {
  background-image: linear-gradient(0deg, rgba(170, 169, 173, 1) 25%, rgba(255, 255, 255, 1) 50%, rgba(225, 224, 228, 1) 75%, rgba(254, 253, 255, 1) 100%);
  color: black;
}

.bronze {
  background-image: linear-gradient(0deg, 
  rgba(169, 113, 66, 1) 30%, 
  rgba(255, 255, 255, 1) 85%, 
  rgba(227, 165, 115, 1) 100%, 
  rgba(255, 192, 141, 1) 60%,
  rgba(255, 220, 168, 1) 25%, 
  rgba(255, 249, 195, 1) 75%, 
  rgba(255, 255, 223, 1) 90%, 
  rgba(255, 255, 252, 0.55) 100%);
  color: black;
  text-shadow: 1px 1px darkgoldenrod;
}

/* ------- CORES RELOGIO FROZEN ---------*/

.frozen {
  color: #FFFFFF;
  background-image: linear-gradient(to right top, #eaf8f7, #51d8f5,#00aeff,#0079ff,#0000ff);
}

.frozen::before {
  content: "❄ ";
  font-size: 50px;
}

/* ------- IMAGENS DE LOADING  ---------*/

.submissions-container .inqueue{
   position: relative;
   text-align: center;
   animation: blinkingBackground 2s;
   content: url("/photos/loading_balloon.svg");
   background-color: #F4D03F;
   color: black;
}

.contest-container .inqueue{
   position: relative;
   text-align: center;
   animation: blinkingBackground 2s;
   content: url("/photos/loading_balloon.svg");
   background-color: #F4D03F;
   color: black;
}

/* ------- IMAGENS DE NO-WRONG  ---------*/

.submissions-container .unsolved{
  position: relative;
  background-color: #573a41;
  animation: unsolvedBackground 2s 1; 
  content: url("/photos/noV1.svg");
}

.run > .unsolved >.cima {
  position: absolute;
  width: 26px;
  height: 26px;
  background-size: cover;
  content: url("/photos/noV1.svg");
  background-color: transparent;
  top: 0px;
  left: 12px;
}

.run > .unsolved >.baixo {
  position: absolute;
  /*z-index: 10000;*/
  width: 55px;
  /*height: 25px;*/
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  color: white;
  text-shadow: 0px 0px 0px #000, 0px 0px 0px #000, 1px 1px 1px #000, 1px 1px 1px #000;
  top: 25px;
  left: -5px;
}

/* -- DESABILITA O TEXTO DOS BALOES NO PAINEL DE SUBMISSAO  -----*/

.submissions-container .accept-text.cell-content{
  display:none;
}

/* -- CONFIGURA A POSICAO DOS BALOES E ESTRELA NO PAINEL DE SUBMISSAO  --*/
.submissions-container .accept-img{
  position: absolute;
  width: 50px;
  height: 45px;
  top: -1px;
  left: -6px;
}

.submissions-container .star-img{
  position: absolute;
  width: 36px;
  height: 36px;
  top: 2px;
  left: 2px;
}



/* -- HABILITA O TEXTO DOS BALOES NO PAINEL DE RUN  -----*/

.cima{
 position: relative;
 font-size:14px;
 font-weight: bold;
 left: -2px;
 top: 1px;
}

.baixo{
 font-size:13px;
 font-weight:700;
}

.accept-text .baixo{
 position: relative;
 font-size: 13px;
 font-weight: 300;
 left: 1px;
 top: 0px;
}

/* - DEIXA A FONTE DA LETRA DOS PROBLEMAS MAIOR (PAINEL DE SUBMISSAO) -*/
.submissions-container .quadrado {
  min-width: 40px;
  font-size: x-large;
}

/*-DEIXA O TAMANHO DO QUADRADO DA COLOCACAO NO PAINEL RUN MAIS ESTREITO-*/
.cell.quadrado.colocacao {
  min-width: 40px;
  font-size: x-large;
}
.cell.problema.quadrado{
  min-width: 40px;
}

/* - DEIXA A FONTE DO NUMERO DE BALOES E TEMPO TOTAL MAIORES -*/
.cell.problema.quadrado .cima {
  font-size: 17px;
  text-shadow: 0px 1px 1px #000, 0px -1px 1px #000, 1px 0px 1px #000, -1px 0px 1px #000;
}
.cell.problema.quadrado .baixo {
  font-size: 13px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
}

/* -- FONTE DAS RUNS PARA CABER OS TEXTOS DE PENALIDADE E TEMPO---*/
.quadrado {
  min-width: 50px;
  font-size: x-large;
}

/* ------- IMAGENS DAS EQUIPES  ---------*/


.foto_img{
max-height: 90vh;
max-width: 100vw;

}

.foto {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    flex-direction: column;
    z-index: 10;
    border-color: gray;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    background-color:darkgray;
}

.foto .run{
justify-content: start;
}


.volume_controls {
    display: flex;
    flex-direction: column;
    text-align: right;
    background-image: linear-gradient(to top, #990012, #960012, #930012, #900011, #8d0011, #890010, #850010, #81000f, #7b000e, #76000e, #70000d, #6b000c);
}



/*--- ALTERA OS TEXTOS DE ACCEPT DO PAINEL PRINCIPAL----*/
.accept-text {
  position: absolute;
  /*z-index: 10000;*/
  width: 20px;
  height: 25px;
  text-align: center;
  font-weight: 400;
  font-size: 13px;
  color: white;
  /*text-shadow: 0px 1px 2px #000, 0px -1px 2px #000, 1px 0px 2px #000, -1px 0px 2px #000;*/
}

/*--- DESABILITA OS BALOES SVG DESSA CLASSE PARA INSERIR BALOES DIRETAMENTE NAS CLASSES DOS BALOES COM BORDA ----*/
.accept-img {
  position: absolute;
  width: 40px;
  height: 40px;
  background-size: cover;
  /*content: url("assets/balloon.svg");*/
  /*content: url("/photos/balaoif.svg");*/
  background-color: transparent;
  top: 1px;
  left: 14px;
}

.star-img {
  position: absolute;
  width: 30px;
  height: 30px;
  background-size: cover;
  /*content: url("assets/star_black.svg");*/
  background-color: transparent;
  top: 7px;
  left: 19px;  
}


/* -- HABILITANDO OS BALOES SVG COM BORDA EM CADA LETRA DO PROBLEMA --*/

.balao_A{
  filter: none;
  content: url(/photos/balao_azul.svg);	
}

.star-img.balao_A{
  filter: none;
  content: url(/photos/star_azul.svg);
}


.balao_B{
  filter: none;
  content: url(/photos/balao_rosa.svg);	
}

.star-img.balao_B{
  filter: none;
  content: url(/photos/star_rosa.svg);
}


.balao_C{
  filter: none;
  content: url(/photos/balao_laranja.svg);	
}

.star-img.balao_C{
  filter: none;
  content: url(/photos/star_laranja.svg);
}


.balao_D{
  filter: none;
  content: url(/photos/balao_verde.svg);	
}

.star-img.balao_D{
  filter: none;
  content: url(/photos/star_verde.svg);
}


.balao_E{
  filter: none;
  content: url(/photos/balao_branco.svg);	
}

.star-img.balao_E{
  filter: none;
  content: url(/photos/star_branco.svg);
}


.balao_F{
  filter: none;
  content: url(/photos/balao_preto.svg);	
}

.star-img.balao_F{
  filter: none;
  content: url(/photos/star_preto.svg);
}

.balao_G{
  filter: none;
  content: url(/photos/balao_amarelo.svg);	
}

.star-img.balao_G{
  filter: none;
  content: url(/photos/star_amarelo.svg);
}

.balao_H{
  filter: none;
  content: url(/photos/balao_marrom.svg);	
}

.star-img.balao_H{
  filter: none;
  content: url(/photos/star_marrom.svg);
}


.balao_I{
  filter: none;
  content: url(/photos/balao_vermelho.svg);	
}

.star-img.balao_I{
  filter: none;
  content: url(/photos/star_vermelho.svg);
}


.balao_J{
  filter: none;
  content: url(/photos/balao_roxo.svg);	
}

.star-img.balao_J{
  filter: none;
  content: url(/photos/star_roxo.svg);
}

.balao_K{
  filter: none;
  content: url(/photos/balao_magenta.svg);	
}

.star-img.balao_K{
  filter: none;
  content: url(/photos/star_magenta.svg);
}

.balao_L{
  filter: none;
  content: url(/photos/balao_cinza.svg);	
}

.star-img.balao_L{
  filter: none;
  content: url(/photos/star_cinza.svg);
}

.balao_M{
  filter: none;
  content: url(/photos/balao_salmao.svg);	
}

.star-img.balao_M{
  filter: none;
  content: url(/photos/star_salmao.svg);
}

.balao_N{
  filter: none;
  content: url(/photos/balao_ciano.svg);	
}

.star-img.balao_N{
  filter: none;
  content: url(/photos/star_ciano.svg);
}

.balao_O{
  filter: none;
  content: url(/photos/balao_gold.svg);	
}

.star-img.balao_O{
  filter: none;
  content: url(/photos/star_gold.svg);
}

.balao_P{
  filter: none;
  content: url(/photos/balao_grena.svg);	
}

.star-img.balao_P{
  filter: none;
  content: url(/photos/star_grena.svg);
}

.balao_Q{
  filter: none;
  content: url(/photos/balao_silver.svg);	
}

.star-img.balao_Q{
  filter: none;
  content: url(/photos/star_silver.svg);
}

.balao_R{
  filter: none;
  content: url(/photos/balao_rosachoque.svg);	
}

.star-img.balao_R{
  filter: none;
  content: url(/photos/star_rosachoque.svg);
}

.balao_S{
  filter: none;
  content: url(/photos/balao_verdeescuro.svg);	
}

.star-img.balao_S{
  filter: none;
  content: url(/photos/star_verdeescuro.svg);
}