@font-face {
  font-family: digital;
  /* src: url(../../src/font/tld.ttf); */
  src: url(../../src/font/DS-DIGI.TTF);
}
:root {
    --fundoVidro: rgba(1, 57, 83, 0.795);
}

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

.estiloFaltas {
  background-color: rgb(192, 227, 255);
  
}
.estiloFaltas input {
  margin-inline: 10px;
  padding: 2px;
  width: 70px;
  padding-inline: 10px;
}
.estiloFaltas i{
  background-color: rgb(157, 0, 0);
  color: white;
  padding: 4px 5px;
  /* border-radius: 8px; */
  cursor: pointer;
}
.estiloFaltas i:active {
  background-color: red;
  transform: scale(0.6);
}

.placarOn {
  width: 100%;
  height: 100vh;
  background-color: rgba(189, 189, 189, 0);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.placarCima {
  padding: 20px;
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  background-color: rgb(243, 231, 221);
  font-size: 3em;
  align-items: center;
  position: relative;
  background: var( --fundoVidro);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: white solid 5px;
  
}
.fundoP {
  background-image: linear-gradient(
    to bottom,
    rgb(234, 234, 234),
    rgb(145, 145, 145),
    rgb(123, 122, 122)
  );
  box-shadow: rgba(0, 0, 0, 0.614) 0px 2px 5px 0px;
  padding: 2px;
}
.placarImagem {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  background: var( --fundoVidro);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 3em;
  border: white solid 5px;
  align-items: center;
  
  margin-top: 10px;
  padding: 10px 20px;
  
}

.placarImagem div img {
  width: 250px;
  border-radius: 8px;
}
.aoVivo {
  position: absolute;
    width: 448px;
    background-color: rgb(203, 0, 0);
    text-align: center;
    padding: 2px;
    top: -49px;
    left: 39%;
    border-radius: 12px 12px 0px 0px;
    font-size: 1em;
    padding: -27px;
    color: white;
}
.corCamisa {
  width: 250px;
  height: 50px;
  border-radius: 8px;
  background-color: rgb(255, 255, 255);
  box-shadow: black 0px 0px 2px 0px;
  position: relative;
}
.corCamisa::after {
  content: "Camisa____Shorts____Meião";
  font-size: 0.3em;
  text-align: center;
  color: rgb(0, 0, 0);
  background-color: rgb(213, 213, 213);
  border-radius: 12px;
  padding: 0 5px;
  bottom: 0px;
  left: 32px;
  position: absolute;
}
.propagandasEtc {
  height: 0%;
}
.mostraPlacar {
  align-items: center;
  width: 60%;
  margin: auto;
  text-align: center;
  background-image: linear-gradient(
    to bottom,
    rgb(182, 182, 182),
    rgb(102, 102, 102),
    rgb(85, 85, 85)
  );
  padding: 5px;
  border-radius: 8px;
}
.aoVivo {
  position: absolute;
  width: 200px;
  background-color: rgb(203, 0, 0);
  text-align: center;
  padding: 2px;
  top: 170px;
  left: 45%;
  border-radius: 12px 12px 0px 0px;
  font-size: x-large;
  padding: 5px;
  color: white;
}
.mostraPlacar h1 {
  font-family: digital;
  margin-top: 5px;
  font-size: 3em;
  text-shadow: yellow 0px 0px 5px 0px;
  width: 100%;
  /* border: black solid 1px; */
  border-radius: 8px;
}
.tickSegundos {
  animation: tick 1s infinite alternate-reverse  ;
}
@keyframes tick {
  0% {
    opacity: 0;
  }
}
.NomeTime {
  justify-content: space-between;
  width: 35%;
  border: rgb(255, 255, 255) solid 5px;
  border-radius: 8px;
  background-color: rgb(228, 228, 228);
  text-align: center;
  display: flex;
  align-items: center;
  padding: 5px;
  font-size: .5em;
}

.NomeTime div img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: rgb(2, 74, 217) solid 5px;
}

.mostraPlacar h1 span {
  color: yellow;
  padding: 2px 20px;

  background-color: rgb(0, 0, 0);
  border-radius: 8px;
  margin: 2px;
}
.placarIntervalo {
  text-align: center;
  margin: auto;
  height: 80vh;
  
}
.placarIntervalo img {
  width: 85%;
  height: 95%;
}
.aoVivo span::after {
  height: 20px;
  width: 20px;
  background-color: white;
  content: "";
  position: absolute;
  top: 15px;
  right: 18px;
  border-radius: 50%;
  animation: aov 800ms infinite alternate-reverse linear;
}
#alteraImgSlides {
  animation: slid 1s normal ;
}
@keyframes slid {
  0% {
    opacity: 0;
  }
}
#mostraPainelS {
  background-color: black;
  color: yellow;
  padding: 5px;
}
.alinhabtn {
  text-align: center;
}
.inputImagens {
  width: 70%;
  padding: 5px;
  margin: 5px auto;
}

.goll div img {
  position: absolute;
  width: 800px;
  height: 800px;
  box-shadow:  rgb(2, 74, 217) 5px 0px 100px 50px;
  top: 0px;
  left: 384px;
  animation: gira 600ms infinite alternate-reverse linear;
}
@keyframes gira {
  0% {
    transform: scale(0.8);
  }
}
.goll div::after {
  content: "GOLLLLL!!";
  position: absolute;
  width: 800px;
  border-radius: 30px;
  
  top: 290px;
  font-size: 3em;
  background-color: rgb(2, 74, 217);
  color: white;
  font-weight: 700;
  left: 384px;
  animation: aov 800ms infinite alternate-reverse linear;
}
button {
  padding: 5px;
  font-size: 1.1em;
  background-color: rgb(2, 74, 217);
  color: white;
  cursor: pointer;
}
button:hover {
  background-color: rgb(67, 128, 250);
  box-shadow: blue 0px 2px 5px 0px;
}
.dnone {
  display: none;
}
.nomeCampeonato {
  width: 100%;
}
.nomeCampeonato h1 {
  text-align: center;
  background-color: white;
  margin-top: 20px;
  width: 1080px;
  
}
.informativo {
  background-color: red;
  color: white;
  padding: 10px;
  border-radius: 8px;
}
.menutopo {
  width: 80%;
  justify-content: space-between;
  text-align: inherit;
  justify-content: space-between;
  
}

.placaCentral {
  display: flex;
  align-items: center;
  background-color: black;
  padding: 5px;
  border-radius: 8px;

}
.placaCentral input {
  width: 50px;
  padding: 5px;
  height: 50px;
  text-align: center;
}
.placaCentral i {
  background-color: rgb(24, 83, 245);
  color: white;
  padding: 2px 5px;
  transition: 100ms;
}
.placaCentral i:active {
  background-color: rgb(0, 0, 42);
  box-shadow: inset black 0px 2px 2px 0px;
  font-size: .9em;
  
}
.placaCentral i:hover {
  background-color: rgb(125, 125, 251);
}
.marcadoPlaca {
  display: flex;
  align-items: center;
  color: white;
}
.menutopo a {
  text-align: center;
  gap: 10px;
  padding: 0px 25px;
  color: white;
  
  border-radius: 8px;
  text-decoration: none;
  background-color: rgb(39, 48, 179);
  border: white solid 1px;
}
.menutopo a:hover {
  background-color: rgb(95, 105, 235);
}
.menutopo a:active {
  box-shadow: inset black 0px 2px 5px 0px;
  background-color: rgb(169, 174, 242);
  text-align: center;
  font-size: .98em;
  
  transform: scale(.99);
}
input {
  padding: 1px;
  font-size: 1em;
}
.info {
  font-size: 0.3em;
  display: flex;
  gap: 10px;
  margin: 10px auto;
}
.apoio div img {
  width: 300px;
  height: 180px;
}
#horarioPPartida {
  background-color: rgba(255, 0, 0, 0);
  text-align: center;
  width: 100%;
  border: gray solid 1px;
  border-radius: 8px;
  margin: 10px auto;
  font-size: 2em;
}
.info > div {
  padding: 5px;
  width: 200px;
  height: 200px;
  box-shadow: rgb(255, 255, 255) 0px 2px 5px 0px;
  border-radius: 8px;
  background-color: white;
}
.avisoS {
  background-color: red;
  padding: 5px;
  color: white;
  font-size: 1em;
  border-radius: 8px;
}
.info div img {
  width: 50px;
}
.info div .pp {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.relogioHora {
    width: 80%;
    /* border: black solid 1px; */
    margin: auto;
    font-size:4em;
    margin-top: 5%;
    text-align: center;
    font-family: digital;
    background-color: yellow;
    border-radius: 8px;
}
.tituloInfo {
    font-size: 1em;
}
.faltas {
  background-color: rgb(0, 0, 0);
  border-radius: 8px;
  color: white;
}

@keyframes aov {
  0% {
    opacity: 0;
  }
}
.menuTo {
  display: flex;
  align-items: center;
  font-size: 1.1em;
  text-decoration: none;
  list-style: none;
  position: relative;
  overflow: hidden;
  /* margin: 10px auto; */
  

}
.menuTo img {
  width: 150px;
  /* margin: 10px; */
  position: relative;
  overflow: hidden;

}
.menuTo .imgLogoA {
  position: relative;
  
}
.unif div {

  display: flex;
  justify-content: space-between;
}
.imgLogoA::after {
  content: "";
  rotate: 12deg;
  height: 50px;
  width: 200px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.143) , rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.136)) ;
  position: absolute;
  top: -250px;
  left:  -8px;
  animation: brilho 5s infinite linear   ;
}
@keyframes brilho {
  0% {
    top: 129px;
  left:  -68px;
  }
  90% {
    top: 129px;
  left:  -68px;
  }
}

.painelControle {
  background-color: #f7feff;
  max-width: 80%;
  min-width: 450px;
  margin: auto;
  border: black solid 1px;
  padding: 10px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  border: rgb(225, 225, 225) solid 1px;
  box-shadow: rgb(160, 160, 160) 0px 5px 5px 0px;
  border-radius: 0px 0px 12px 12px;
  font-size: 1.5em;
  
}
.painelControle input {
  padding: 5px;
  font-size: 1.4em;
  text-align: center;
}
.selmpadrao select {
  font-size: 1.2em;
}
.ldigital input {
  width: 60%;
}
#tituloAcima {
  width:100%;
  
}
.animt {
  animation: cimaBaixo 100ms normal    ;
  transition: all;
}
@keyframes cimaBaixo {
  0%{
    transform: scale(0);
    opacity: 0;
  }
}
.informacoesAdicionais {
  max-width: 100%;
  min-width: 450px;
  margin:  auto;
  border: rgb(225, 225, 225) solid 1px;
  box-shadow: rgb(160, 160, 160) 0px 5px 5px 0px;
  border-radius: 0px 0px 12px 12px;
  padding: 20px;
}
.painelControle h2 {
  margin-top: 5px;
}
.loadFundao {
  background-image: url(/src/logos/loadicon.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; /* Centraliza a imagem */
  
  width: 60px;
  height: 100px; /* Adicione uma altura para facilitar o alinhamento */

  display: flex;
  justify-content: center; /* Alinha horizontalmente */
  align-items: center;     /* Alinha verticalmente */

  margin: auto; /* Centraliza o próprio elemento dentro do container pai */
}

.areaClean img {
  width: 100%;
  margin: 5px auto;
  background-color: white;
}
.placarTimesPainel {
  display: flex;
  justify-content: space-between;
  background-color: rgb(224, 224, 224);
  padding: 5px;
  border: rgb(208, 208, 208) solid 1px;
}
.placarTimesPainel select {
  padding: 5px;
  font-size: 1.2em;
}
.modeD {
  width: 35px;
}



.temaDark {
  background-color: rgb(84, 84, 84);
  color: white;
}
.temaDark .placarTimesPainel {
  
  background-color: rgb(40, 39, 39);
}
.fDosTimes {
  width:200px;
}