* {
  margin:0;
  padding:0;
  border:0;
  text-decoration:none;
}

html{
  height:90%;
}

.multicolor{
	position:fixed;
	display:flex;
	bottom:40px;
	left:calc(50% - 636px);
	opacity:0.7;
}

.hour.time{
	margin-right:200px !important;
}

.minute.time{
	margin-left:200px !important;
}

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

.quadro-flex, .outros-links-container, .tela-cheia, .texto-sobreposto {
  /* This section calls the slideInFromLeft animation we defined above */
  animation: fadeIn 2.5s ease-in-out ;
}


#top-bar:after {
  content: "";
  position: absolute;
  display: block;
  height: 10px;
  bottom: -10px;
  /* -height */
  left: 0;
  right: 0;
  /* TODO Add browser prefixes */
  background: linear-gradient( 45deg, transparent 33.333%, var(--color2) 33.333%, var(--color2) 66.667%, transparent 66.667%), linear-gradient( -45deg, transparent 33.333%, var(--color2) 33.333%, var(--color2) 66.667%, transparent 66.667%);
  background-size: 8px 20px;
  /* toothSize doubleHeight */
  background-position: 0 -10px;
  /* horizontalOffset -height */
}

#bottom-bar:before{
	 content: "";
  position: absolute;
  display: block;
  height: 10px;
  top: -10px;
  /* -height */
  left: 0;
  right: 0;
  /* TODO Add browser prefixes */
  background: linear-gradient( -45deg, var(--color2) 33.333%, transparent 33.333%, transparent 66.667%, var(--color2) 66.667%), linear-gradient( 45deg, var(--color2) 33.333%, transparent 33.333%, transparent 66.667%, var(--color2) 66.667%);
  background-size: 8px 20px;
  /* toothSize doubleHeight */
  background-position: 0 -10px;
  /* horizontalOffset -height */
}


body{
  font-family: 'Ubuntu', Arial, sans-serif;
  color:gray;
  /* background-color:#1A1469; */
  height:100%;
}

body.mainColors{
	--color1: olive;
	--color2: khaki;
	--color3: cornsilk;
	--background: url("/images/logo_clear.png");
	--bldmode: soft-light;
}

body.tokyoColors{
	--color1: white;
	--color2: #771A2A;
	--color3: #CB4F6F;
	--color4: white;
	--background: url("/images/tokyo_bk.png");
	--bldmode: soft-light;
}

body.qatarColors{
	--color1: #950f30;
	--color2: white;
	--color3: #950f30;
	--color4: white;
	--background: url("/images/qatar/qatar2022.png");
	--bldmode: lighten;
}

body.qatarAlt{
	--color1: white;
	--color2: #950f30;
	--color3: #950f30;
	--color4: white;
	--background: url("/images/qatar/qatar2022.png");
	--bldmode: lighten;
}

body.tokyoInner{
	--color1: white;
	--color2: #771A2A;
	--color3: white;
	--color4: white;
	--background: url("");
	--bldmode: soft-light;
}

body.qatarInner{
	--color1: white;
	--color2: #950f30;
	--color3: white;
	--color4: white;
	--background: url("");
	--bldmode: soft-light;
}

body.loggedin{
  height:90%;
}

#countdown{
	position:absolute;
	top:0;
	width:100%;
	left:0;
	height: calc( 100% - 0px );
	display:flex;
	flex-wrap: wrap;
	height: calc( 100% - 0px );
	background-image: var(--background);
	background-size: auto 80%;
	background-repeat: no-repeat;
	background-blend-mode: var(--bldmode);
	background-color:var(--color3);
	background-position:center center;
	/* padding:30px; */
	background-origin:content-box;
	opacity:20%;
}

#tabela-quadros, #code-selector {
  display:flex;
  flex-wrap: wrap;
  height: calc( 100% - 0px );
  background-image: var(--background);
  background-size: auto 80%;
  background-repeat: no-repeat;
  background-blend-mode: var(--bldmode);
  background-color:var(--color3);
  background-position:center center;
  /* padding:30px; */
  background-origin:content-box;
}

#code-selector{
	justify-content: center;
	align-items:center;
	gap:0px;
}

#confirm_bolao{
    color: var(--color2);
    background-color: var(--color1);
    border-radius: 10px;
    font-size: 120%;
}

#bolao_code{
	text-align:center;
}

.quadro-flex {
 height:100%;
 width:20%;
 position:relative;
 z-index:5;

}

.outros-links-container {
 height:50%;
 width:50%;
 position:relative;
}

.outros-links-container:hover .legenda{
  opacity:0;
}

.outros-links-container:hover .meio-quadro{
  opacity:1;
}

.legenda{
  text-align:center;
  color:orange;
  font-weight: bold;
  font-size:200%;
  width:100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 1s ease-in-out;
}

.tela-cheia{
  width:100%;
  height:100%;
  object-fit:cover;
}

.meio-quadro{
  height:50%;
  width:50%;
  position:absolute;
  opacity:0;
  transition: all 1s ease-in-out;
}

.inf{
  top:50%;
}

.dir{
  left:50%;
}

.quadro-animado:hover img{
  opacity: 1;
}

.quadro-animado:hover span{
  color:var(--color3);
  top:70%;
  /* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; */
  /* width:100%; */
  background-color: var(--color2);
}

.quadro-animado img{
 width:100%;
height:100%;
opacity:0;
object-fit:cover;
position:absolute;
transition: opacity 0.5s ease-in-out;
}

.quadro-animado span {
  /* display:block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);*/
  text-align:center;
  color:var(--color4);
  font-weight: bold;
  font-size:200%;
  width:100%;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 1s ease-in-out;

}

.texto-sobreposto{
  text-align:center;
  color:var(--color3);
  font-weight: bold;
  font-size:300%;
  width:100%;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color1);
}

.disabled{
    cursor:default;
    filter: grayscale(1);
     pointer-events: none;
}

#top-bar, #bottom-bar {
  background-color:var(--color2);
  color:var(--color1);
}

#menu-bar {
  height:90px;
  clear:both;
  background-color:white;
}

#logo-text {
 margin:5px;
 float:left;
 font-size:1em;
 font-family: 'Qatar2022' !important;
}

#top-menu {
  margin:7px 20px 0 0;
  float:right;
}

.icon {
  width:25px;
  color:var(--color1);
}

.orange {
  color:orange;
}

.icon:hover {
  color:black;
}

#logo {
  width:80px;
  float:left;
  padding-left:70px;
}

h1 {
  font-weight:normal;
  float:left;
  position:relative;
  top:30px;
  left:20px;
}

#inscricao_menor{
	  background-color: green;
	  padding: 10px 50px;
	  color: white;
	  cursor: pointer;
	  border-radius: 10px;
}

@media only screen and (max-width: 600px) {
  .texto-sobreposto{
    font-size:100%;
  }
  
  #counter, #logo-text{
	  visibility:hidden !important;
	  width:0 !important;
  }
  
  #toolbar{
	  visibility:visible !important;
	  font-size:2vw;
	  flex-basis:25%;
  }
  
  #logged-user{
	  flex-basis:20% !important;
  }
  
  #language-bar{
	  flex-basis:20% !important;
	  width:auto;
  }
  
  #top-bar{
	  width:100%;
	  justify-content:start !important;
  }
  
  #inscricao_menor{
	  padding:5px;
	  
  }
  

  
  
  #logo-text {
 margin:1px;
 font-size:0.5em;
}

  .quadro-flex, .outros-links-container{
    width:100%;
    height:100%;
  }

  .quadro-animado img{
    opacity: 1;
  }

  .quadro-animado span{
    color:white;
    top:70%;
    /* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; */
    /* width:100%; */
    background-color: #1A1469;
  }

  .legenda{
    opacity:0;
  }

  .meio-quadro{
    opacity:1;
    width:100%;
    position:relative;
  }

  .dir, .inf{
    left:auto;
    top:auto;
  }

  .outros-links-container{
    display:flex;
    flex-wrap:wrap;
  }
  
  .multicolor{
	  visibility:hidden;
  }

}



.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, white 50%, floralwhite 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}

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

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}

/* Fonts for Qatar */


@font-face {
    font-family: 'qatar2022';
    src: url('fonts/qatar2022arabic-bold-webfont.woff2') format('woff2'),
         url('fonts/qatar2022arabic-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


img[id^=lang]{
	cursor:pointer;
}

#counter{
	position:absolute;
	opacity:0.2;
	  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 400px !important; /* Need a specific value to work */
  height:auto !important;
  top:75%;
}

.containerCD{
	width: 400px !important; /* Need a specific value to work */
}

#top-menu{
	width:auto !important;
	visibility: visible !important;
}