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

body {
  background-color: rgb(243, 255, 251);
  background-color: rgb(16, 40, 135);
  /* display: flex; */
  align-items: center;
  justify-content: center;
}

main {
  position: relative;
  width: 90rem;
  height: 120rem;
  display: flex;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 9px;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
  /* align-items: center; */
}

.identification {
  color: white;
  font-size: medium;
  display: flex;
  width: 90rem;
  justify-content: space-evenly;
}

#Game_ID,
#usuario {
  /* position: absolute; */
  font-size: 1rem;
  left: 450px;
}

#Rules,
#LoadGame,
#SaveGame,
#NewGame,
#Instructions,
#palpites,
#SubscribeGame {
  /* border: 0; */
  line-height: 1.7;
  padding: 0 20px;
  font-size: 0.8rem;
  text-align: center;
  /* color: #fff; */
  /* text-shadow: 1px 1px 1px #000; */
  /* border-radius: 5px; */
  /* background-color: rgba(220, 0, 0, 1); */
  /* background-image: linear-gradient(
    to top left,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 30%,
    rgba(0, 0, 0, 0) */
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}

.flags-left {
  width: 35px;
  position: absolute;
  left: 120px;
  box-shadow: 3px 3px 6px rgb(105, 105, 105);
}

.flags-right {
  width: 35px;
  position: absolute;
  left: 225px;
  box-shadow: 3px 3px 6px rgb(105, 105, 105);
}

.flags-left_2 {
  width: 35px;
  position: absolute;
  left: 140px;
  box-shadow: 3px 3px 6px rgb(105, 105, 105);
}

.flags-right_2 {
  width: 35px;
  position: absolute;
  left: 245px;
  box-shadow: 3px 3px 6px rgb(105, 105, 105);
}

h1 {
  text-align: center;
  color: whitesmoke;
  text-shadow: 10px rgb(0, 0, 0);
}
table {
  width: 400px;
  height: 100px;
  margin: 5px;
  /* border: 1px solid black; */
  background-color: rgba(255, 255, 255, 0.662);
  /* background-color: white; */
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
  border-radius: 4px;

  /* background-color: rgb(99, 14, 43); */
  /* color: whitesmoke; */
}

.blocos {
  flex: 50%;
  flex-direction: column;
  display: flex;
  align-items: center;
  padding: 2rem;
}

td {
  text-align: center;
  border: 1px solid darkgray;
}

h4 {
  text-align: center;
  margin-top: 0px;
}

.GrupoCompleto {
  border: 5px solid rgb(0, 215, 40);
}
.Grupos {
  display: flex;
}

/* GROUP A */
.GrpA {
  /*  background-color: brown; */
  display: flex;
}

.GrupoA {
  border: 1px solid rgb(0, 43, 29);
  width: 380px;
  margin: 5px;
  padding: 15px;
  position: relative;
  left: 0px;
  background-color: antiquewhite;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
  background-color: rgba(255, 255, 255, 0.762);
  border-radius: 9px;
}

.GrupoA a1 {
  position: absolute;
  left: 185px;
}

.GrupoA a2 {
  position: absolute;
  left: 265px;
}

/* GROUP B */
.GrpB {
  /*  background-color: brown; */
  display: flex;
}

.GrupoB {
  border: 1px solid rgb(0, 43, 29);
  /* border: 5px solid rgb(0, 215, 40); */
  width: 380px;
  margin: 5px;
  padding: 15px;
  position: relative;
  left: 0px;
  background-color: rgba(250, 235, 215, 0.8);
  background-color: rgba(255, 255, 255, 0.762);
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
  border-radius: 9px;
}

.GrupoB a1 {
  position: absolute;
  left: 185px;
}

.GrupoB a2 {
  position: absolute;
  left: 265px;
}

/* GROUP C */
.GrpC {
  /*  background-color: brown; */
  display: flex;
}

.GrupoC {
  border: 1px solid rgb(0, 43, 29);
  width: 380px;
  margin: 5px;
  padding: 15px;
  position: relative;
  left: 0px;
  background-color: rgba(255, 255, 255, 0.762);
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
  border-radius: 9px;
}

.GrupoC a1 {
  position: absolute;
  left: 185px;
}

.GrupoC a2 {
  position: absolute;
  left: 265px;
}

/* GROUP D */
.GrpD {
  /*  background-color: brown; */
  display: flex;
}

.GrupoD {
  border: 1px solid rgb(0, 43, 29);
  width: 380px;
  margin: 5px;
  padding: 15px;
  position: relative;
  left: 0px;
  background-color: rgba(255, 255, 255, 0.762);
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
  border-radius: 9px;
}

.GrupoD a1 {
  position: absolute;
  left: 185px;
}

.GrupoD a2 {
  position: absolute;
  left: 265px;
}

/* GROUP E */
.GrpE {
  /*  background-color: brown; */
  display: flex;
}

.GrupoE {
  border: 1px solid rgb(0, 43, 29);
  width: 380px;
  margin: 5px;
  padding: 15px;
  position: relative;
  left: 0px;
  background-color: rgba(255, 255, 255, 0.762);
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
  border-radius: 9px;
}

.GrupoE a1 {
  position: absolute;
  left: 185px;
}

.GrupoE a2 {
  position: absolute;
  left: 265px;
}

/* GROUP F */
.GrpF {
  /*  background-color: brown; */
  display: flex;
}

.GrupoF {
  border: 1px solid rgb(0, 43, 29);
  width: 380px;
  margin: 5px;
  padding: 15px;
  position: relative;
  left: 0px;
  background-color: rgba(255, 255, 255, 0.762);
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
  border-radius: 9px;
}

.GrupoF a1 {
  position: absolute;
  left: 185px;
}

.GrupoF a2 {
  position: absolute;
  left: 265px;
}

/* GROUP G */
.GrpG {
  /*  background-color: brown; */
  display: flex;
}

.GrupoG {
  border: 1px solid rgb(0, 43, 29);
  width: 380px;
  margin: 5px;
  padding: 15px;
  position: relative;
  left: 0px;
  background-color: rgba(255, 255, 255, 0.762);
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
  border-radius: 9px;
}

.GrupoG a1 {
  position: absolute;
  left: 185px;
}

.GrupoG a2 {
  position: absolute;
  left: 265px;
}

/* GROUP H */
.GrpH {
  /*  background-color: brown; */
  display: flex;
}

.GrupoH {
  border: 1px solid rgb(0, 43, 29);
  width: 380px;
  margin: 5px;
  padding: 15px;
  position: relative;
  left: 0px;
  background-color: rgba(255, 255, 255, 0.762);
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
  border-radius: 9px;
}

.GrupoH a1 {
  position: absolute;
  left: 185px;
}

.GrupoH a2 {
  position: absolute;
  left: 265px;
}

.Oitavas {
  border: 1px solid rgb(0, 43, 29);
  width: 420px;
  height: 310px;
  margin: 5px;
  padding: 15px;
  position: relative;
  align-items: center;
  justify-content: center;
  left: 0px;
  background-color: antiquewhite;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
  background-color: rgba(255, 255, 255, 0.762);
  border-radius: 9px;
}
.Oitavas a1 {
  position: absolute;
  left: 205px;
}

.Oitavas a2 {
  position: absolute;
  left: 285px;
}

.Oitavas a {
  position: absolute;
  left: 25px;
}

.Quartas {
  border: 1px solid rgb(0, 43, 29);
  width: 420px;
  height: 160px;
  margin: 5px;
  padding: 15px;
  position: relative;
  align-items: center;
  justify-content: center;
  left: 0px;
  background-color: antiquewhite;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
  background-color: rgba(255, 255, 255, 0.762);
  border-radius: 9px;
}
.Quartas a1 {
  position: absolute;
  left: 205px;
}

.Quartas a2 {
  position: absolute;
  left: 285px;
}

.Quartas a {
  position: absolute;
  left: 25px;
}

.Semis {
  border: 1px solid rgb(0, 43, 29);
  width: 420px;
  height: 85px;
  margin: 5px;
  padding: 15px;
  position: relative;
  align-items: center;
  justify-content: center;
  left: 0px;
  background-color: antiquewhite;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
  background-color: rgba(255, 255, 255, 0.762);
  border-radius: 9px;
}
.Semis a1 {
  position: absolute;
  left: 205px;
}

.Semis a2 {
  position: absolute;
  left: 285px;
}

.Semis a {
  position: absolute;
  left: 25px;
}

.Finais {
  border: 1px solid rgb(0, 43, 29);
  width: 420px;
  height: 185px;
  margin: 5px;
  padding: 15px;
  position: relative;
  align-items: center;
  justify-content: center;
  left: 0px;
  background-color: antiquewhite;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
  background-color: rgba(255, 255, 255, 0.762);
  /* background-color: rgba(232, 252, 224, 0.762); */
  border-radius: 9px;
}
.Finais a1 {
  position: absolute;
  left: 205px;
}

.Finais a2 {
  position: absolute;
  left: 285px;
}

.Finais a {
  position: absolute;
  left: 25px;
}

.Finais h3 {
  text-align: center;
  font-size: medium;
  font-style: italic;
}
/* Score Inputs - All Groups */

.G-Left {
  position: absolute;
  /*  left: 10px; */
  width: 20px;
  height: 20px;
  left: 160px;
  text-align: center;
}

.G-Right {
  position: absolute;
  /*  left: 10px; */
  width: 20px;
  height: 20px;
  left: 200px;
  text-align: center;
}

.G-Left_2 {
  position: absolute;
  /*  left: 10px; */
  width: 20px;
  height: 20px;
  left: 180px;
  text-align: center;
}

.G-Right_2 {
  position: absolute;
  /*  left: 10px; */
  width: 20px;
  height: 20px;
  left: 220px;
  text-align: center;
}
.left-names {
  width: 330;
  position: relative;
}

#O1-1cb,
#O2-1cb,
#O3-1cb,
#O4-1cb,
#O5-1cb,
#O6-1cb,
#O7-1cb,
#O8-1cb,
#Q1-1cb,
#Q2-1cb,
#Q3-1cb,
#Q4-1cb,
#S1-1cb,
#S2-1cb,
#F1-1cb,
#F2-1cb {
  position: absolute;
  /*  left: 10px; */
  width: 20px;
  left: 2px;
}

#O1-2cb,
#O2-2cb,
#O3-2cb,
#O4-2cb,
#O5-2cb,
#O6-2cb,
#O7-2cb,
#O8-2cb,
#Q1-2cb,
#Q2-2cb,
#Q3-2cb,
#Q4-2cb,
#S1-2cb,
#S2-2cb,
#F1-2cb,
#F2-2cb {
  position: absolute;
  /*  left: 10px; */
  width: 20px;
  left: 390px;
}
.hide {
  display: none;
}

.Class_Final {
  position: relative;
  left: -100px;
}

.Class_Final h3 {
  text-align: left;
  font-size: 220%;
  color: white;
  text-shadow: rgb(0, 0, 0) 12px;
}

.Class_Final h4 {
  text-align: left;
  font-size: 160%;
  color: white;
  text-shadow: rgb(0, 0, 0) 12px;
}

.campeao,
.campeao_img,
.vice,
.vice_img,
.terceiro,
.terceiro_img,
.quarto,
.quarto_img {
  width: 35px;
  position: relative;
  color: white;
  font-size: 110%;
  text-shadow: rgb(0, 0, 0) 12px;
  /*left: 120px; */
}

.hidden {
  display: none;
}

/* .modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;

  background-color: white;
  padding: 6rem;
  border-radius: 5px;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
  z-index: 10;
} */

.overlay,
.overlayRule {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  max-width: 2000px;
  margin: auto;
  height: 400%;
  max-height: 3000px;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 5;
}

.instruction,
.rules {
  position: absolute;
  top: 30px;
  left: 80px;
  /* background-color: white; */
  padding: 2rem;
  border-radius: 5px;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
}

.blockScore {
  background-color: lightgray;
}

.load-spin-show {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
}

.loading-image {
  z-index: 100;
}

/* Styles para Main Page  */
#Prev,
#Next {
  padding: 0.5rem;
  border-radius: 5px;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
}

#day_scores {
  box-shadow: 3px 3px 6px rgb(105, 105, 105);
}

.identification2 {
  color: white;
  font-size: medium;
  display: flex;
  width: 30rem;
  justify-content: space-evenly;
}
.identification3 {
  color: white;
  font-size: medium;
  display: flex;
  width: 50rem;
  justify-content: space-evenly;
}