/* @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&family=Lato&display=swap'); */
/* FIXME re-enable this once trunk supports local css imports */
/* @import url("balloons.css"); */

/* Container holding the image and the text */

* {
  box-sizing: border-box;
}

.submissions-container {
  display: flex;
  flex-direction: column;
  width: 320px;
}

.contest-container {
  margin-left: 8px;
}

.root-container {
  display: flex;
  width: 320px;
}

maratona {
  display: block;
  width: 100%;
}

body {
  color: white;
  font-family: Lato, Ubuntu, sans-serif;
  font-weight: 700;
  height: 1px;
  background-color: #000;
  /* overflow-y: scroll; */
}

:root {
  --row-height: 48px;
  --root-top: 0px;
  --root-top-center: calc(100vh / 2);
}

.runstable {
  position: relative;
  margin-top: 3px;
}

/* .runspanel {
  position: relative;
  display: block;
  height: 90vw;
  width: 310px;
} */

.revelationpanel {
  position: relative;
  top: 40px;
}

.run {
  width: 100%;
  display: flex;
}

.run_box {
  transition: top 5s ease 0s;
  position: absolute;
  width: 100%;
}

.run_prefix {
  display: flex;
  flex-grow: 2;
  max-width: 390px;
  min-width: 290px;
}

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

.time {
  flex-grow: 2;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}

.cell {
  height: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background-color: #4F5B62;
  margin: 1px;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: #555;
}

.cell-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.quadrado {
  /* width: 40px; */
  min-width: 40px;
  max-width: 40px;
}

.center .not-tried {
  background-color: #27333a;
}

.center .time {
  background-color: #27333a;
}

.center .problema {
  background-color: #27333a;
}

.center .problema {
  background-color: #27333a;
}

.accept {
  position: relative;
  background-color: #305745;
  animation: acceptBackground 2s 1;
}

.star {
  position: relative;
  background-color: #305745;
  animation: blinkingBackground 1s 5;
}

.accept-img {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  content: url("assets/balao2.svg");
  background-color: transparent;
}

.star-img {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  content: url("assets/star.svg");
  background-color: transparent;
}

.no-img {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  content: url("assets/no.svg");
  background-color: transparent;
}

.wait-img {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  content: url("assets/gear.svg");
  background-color: transparent;
}

.accept-img-run {
  position: absolute;
  width: 80%;
  height: 80%;
  background-size: cover;
  content: url("assets/balao2.svg");
  background-color: transparent;
}

.no-img-run {
  position: absolute;
  width: 80%;
  height: 80%;
  background-size: cover;
  content: url("assets/no.svg");
  background-color: transparent;
}

.wait-img-run {
  position: absolute;
  width: 80%;
  height: 80%;
  background-size: cover;
  content: url("assets/gear.svg");
  background-color: transparent;
}

.not-tried {
  text-align: center;
  background-color: #4F5B62;
}

.unsolved {
  position: relative;
  background-color: #573a41;
  animation: unsolvedBackground 2s 1;
}

.inqueue {
  position: relative;
  text-align: center;
  animation: blinkingBackground 2s;
  background-color: #F4D03F;
  color: black;
}


/* Top right text */
.accept-text {
  position: absolute;
  z-index: 10000;
  width: 100%;
  height: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: white;
  text-shadow: 0px 1px 2px #000, 0px -1px 2px #000, 1px 0px 2px #000, -1px 0px 2px #000;
}

.accept-text-run {
  position: absolute;
  z-index: 10000;
  left: 50%;
  width: 50%;
  height: 50%;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: white;
  text-shadow: 0px 1px 2px #000, 0px -1px 2px #000, 1px 0px 2px #000, -1px 0px 2px #000;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  width: 31px;
  height: 18px;
  bottom: 10px;
  right: 6px;
  text-align: center;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 18px;
}

/* Top right text */
.top-center {
  position: absolute;
  top: 10px;
  text-align: center;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 18px;
}

/* Bottom right text */
.bottom-center {
  position: absolute;
  bottom: 10px;
  right: 6px;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 18px;
}

.titulo.sede_brasil {
  /* content:url(/static/assets/titulo-1stPhase.svg); */
  /* content:url(/static/assets/titulo-final.svg); */
  font-size: 24px;
}

.titulo.sede_la {
  /* content:url(/static/assets/titulo-1stPhase.svg); */
  /* content:url(assets/titulo-icpc.svg); */
  font-size: 24px;
}

.submission-title {
  /* width: 302px; */
  /* height: 45px; */
  background-color: #263238;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 8px;
  margin-bottom: 3px;
  border-style: solid;
  border-width: 1px;
  border-color: #555;
  border-radius: 5px;
  padding: 2px;
  font-size: 24px;
}

.nomeEscola {
  display: none;
}

.nomeTime {
  font-size: 100%;
}

.longTeamName {
  font-size: 80%;
}

.problema {
  text-align: center;
  font-size: 30px;
}

.colocacao {
  text-align: center;
  font-size: 18px;
}

.cima {
  font-size: 20px;
  font-weight: 800;
}

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

.commandpanel {
  position: fixed;
  z-index: 1000000;
  padding: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: #555;
  border-radius: 5px;
  background-color: #4F5B6288;
}

.answer-img {
  position: absolute;
  height: 16px;
  width: 16px;
  text-align: center;
  top: 16px;
  left: 4px;
}

.answer-text {
  position: absolute;
  width: 20px;
  left: 20px;
  text-align: center;
  font-weight: 400;
  font-size: 18px;
}

.answeryes {
  position: relative;
  background-color: #305745;
}

.answerno {
  position: relative;
  background-color: #573a41;
}

.answerwait {
  position: relative;
  background-color: #F4D03F;
  color: black;
}

.color-text {
  color: #263238
}

.verde {
  position: relative;
  text-shadow: 0px 1px 2px #000, 0px -1px 2px #000, 1px 0px 2px #000, -1px 0px 2px #000;
}

.vermelho {
  background-color: #ae2538;
}

.amarelo {
  animation: blinkingBackground 2s;
  background-color: #F4D03F;
  color: black;
}

@keyframes blinkingBackground {
  0% {
    background-color: #F4D03F;
    color: black;
  }

  25% {
    background-color: #00ab5e;
    color: white;
  }

  50% {
    background-color: #F4D03F;
    color: black;
  }

  75% {
    background-color: #ae2538;
    color: white;
  }

  100% {
    background-color: #F4D03F;
    color: black;
  }
}

@keyframes unsolvedBackground {
  0% {
    background-color: #F4D03F;
    color: white;
  }

  100% {
    background-color: #573a41;
    color: white;
  }
}

@keyframes acceptBackground {
  0% {
    background-color: #F4D03F;
    color: white;
  }

  100% {
    background-color: #305745;
    color: white;
  }
}


.ouro {
  background-color: goldenrod;
}

.prata {
  background-color: rgb(121 121 121);
}

.bronze {
  background-color: rgb(114, 89, 26);
}

.timer {
  font-size: 60px;
  font-family: "Inconsolata", "Ubuntu Mono", monospace;
  text-align: center;
  color: #ffffff;
  text-shadow: -2pt 2pt black;
  margin-top: 4px;
  margin-bottom: 4px;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

.frozen {
  border-color: #004567;
  color: #004567;
}

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

.center {
  animation: borderUpdate 5s infinite;
}

@keyframes borderUpdate {
  0% {
    background-color: #8888;
  }

  100% {}
}

.changed {
  animation: clockUpdate 1s;
}

@keyframes clockUpdate {
  0% {
    color: #263238;
  }

  /* 25%		{ color: green;  }
  50%		{ color: yellow; }
  75%	    { color: red;    } */
  50% {
    color: yellow;
  }

  100% {
    color: #263238;
  }
}

/*
.hora .minuto .segundo {
  float: left;
} */

a {
  color: #336;
}

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

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

div#runheader>.cell {
  background-color: #263238 !important;
}