@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Zen+Dots&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Exo", sans-serif;
}

textarea:focus, 
select:focus, 
button:focus,
textarea:focus-visible, 
select:focus-visible, 
button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    text-decoration: none !important;
}

.nave {
    height: 75vh;
}

.fase-1 {
  background: center / contain no-repeat url(../images/BACKGROUNDS/BG-NAVE-FASE-1.png);
}
.fase-2 {
  background: center / contain no-repeat url(../images/BACKGROUNDS/BG-NAVE-FASE-2.png);
}
.fase-3 {
  background: center / contain no-repeat url(../images/BACKGROUNDS/BG-NAVE-FASE-3.png);
}
.fase-4 {
  background: center / contain no-repeat url(../images/BACKGROUNDS/BG-NAVE-FASE-4.png);
}
.fase-5 {
  background: center / contain no-repeat url(../images/BACKGROUNDS/BG-NAVE-FASE-5.png);
}
.fase-6 {
  background: center / contain no-repeat url(../images/BACKGROUNDS/BG-NAVE-FASE-6.png);
}
.fase-7 {
  background: center / contain no-repeat url(../images/BACKGROUNDS/BG-NAVE-FASE-7.png);
}
.fase-8 {
  background: center / contain no-repeat url(../images/BACKGROUNDS/BG-NAVE.png);
}

.filter {
    filter: opacity(0.5);
}

.game1:focus,
.game1 img:focus,
.game1 a:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

html, 
body {
    width: 100lvw;
    margin: 0;     
    padding: 0;   
    display: flex;
}

body {
    min-height: 100vh;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    background: url(../images/BACKGROUNDS/BG-MAPA-GERAL.svg)no-repeat center center scroll;
    background-size: cover;
}

.bg-mapas {
    height: 100%;
    box-sizing: border-box;
}

.bg-mapa-01-apagado {
    background: url(../images/BACKGROUNDS/BG-Mapa1-Apagado.png)no-repeat center center scroll;
    background-size: cover;
}
.bg-mapa-01-aceso {
    background: url(../images/BACKGROUNDS/BG-Mapa1-Aceso.png)no-repeat center center scroll;
    background-size: cover;
}
.bg-mapa-01-completo {
    background: url(../images/BACKGROUNDS/BG-Mapa1-Completo.png)no-repeat center center scroll;
    background-size: cover;
}

.bg-mapa-02-apagado {
    background: url(../images/BACKGROUNDS/BG-Mapa2-Apagado.png)no-repeat center center scroll;
    background-size: cover;
}
.bg-mapa-02-aceso {
    background: url(../images/BACKGROUNDS/BG-Mapa2-Aceso.png)no-repeat center center scroll;
    background-size: cover;
}
.bg-mapa-02-completo {
    background: url(../images/BACKGROUNDS/BG-Mapa2-Completo.png)no-repeat center center scroll;
    background-size: cover;
}

.bg-mapa-03-apagado {
    background: url(../images/BACKGROUNDS/BG-Mapa3-Apagado.png)no-repeat center center scroll;
    background-size: cover;
}
.bg-mapa-03-aceso {
    background: url(../images/BACKGROUNDS/BG-Mapa3-Aceso.png)no-repeat center center scroll;
    background-size: cover;
}
.bg-mapa-03-completo {
    background: url(../images/BACKGROUNDS/BG-Mapa3-Completo.png)no-repeat center center scroll;
    background-size: cover;
}

.bg-mapa-04-apagado {
    background: url(../images/BACKGROUNDS/BG-Mapa4-Apagado.png)no-repeat center center scroll;
    background-size: cover;
}
.bg-mapa-04-aceso {
    background: url(../images/BACKGROUNDS/BG-Mapa4-Aceso.png)no-repeat center center scroll;
    background-size: cover;
}
.bg-mapa-04-completo {
    background: url(../images/BACKGROUNDS/BG-Mapa4-Completo.png)no-repeat center center scroll;
    background-size: cover;
}

.bg-mapa-05-apagado {
    background: url(../images/BACKGROUNDS/BG-Mapa5-Apagado.png)no-repeat center center scroll;
    background-size: cover;
}
.bg-mapa-05-aceso {
    background: url(../images/BACKGROUNDS/BG-Mapa5-Aceso.png)no-repeat center center scroll;
    background-size: cover;
}
.bg-mapa-05-completo {
    background: url(../images/BACKGROUNDS/BG-Mapa5-Completo.png)no-repeat center center scroll;
    background-size: cover;
}

.bg-mapa-06-apagado {
    background: url(../images/BACKGROUNDS/BG-Mapa6-Apagado.png)no-repeat center center scroll;
    background-size: cover;
}
.bg-mapa-06-aceso {
    background: url(../images/BACKGROUNDS/BG-Mapa6-Aceso.png)no-repeat center center scroll;
    background-size: cover;
}
.bg-mapa-06-completo {
    background: url(../images/BACKGROUNDS/BG-Mapa6-Completo.png)no-repeat center center scroll;
    background-size: cover;
}

.bg-mapa-07-apagado {
    background: url(../images/BACKGROUNDS/BG-Mapa7-Apagado.png)no-repeat center center scroll;
    background-size: cover;
}
.bg-mapa-07-aceso {
    background: url(../images/BACKGROUNDS/BG-Mapa7-Aceso.png)no-repeat center center scroll;
    background-size: cover;
}
.bg-mapa-07-completo {
    background: url(../images/BACKGROUNDS/BG-Mapa7-Completo.png)no-repeat center center scroll;
    background-size: cover;
}

.bg-mapa-08-apagado {
    background: url(../images/BACKGROUNDS/BG-Mapa8-Apagado.png)no-repeat center center scroll;
    background-size: cover;
}
.bg-mapa-08-aceso {
    background: url(../images/BACKGROUNDS/BG-Mapa8-Aceso.png)no-repeat center center scroll;
    background-size: cover;
}
.bg-mapa-08-completo {
    background: url(../images/BACKGROUNDS/BG-Mapa8-Completo.png)no-repeat center center scroll;
    background-size: cover;
}

#wrapper {
    background-size: cover;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-flow: column nowrap;
    box-sizing: border-box;
    z-index: 1;
}

#gameType {
    font-size: 35px;
    font-weight: 600;
}

/* AVATAR */
.nickname {
    background-color: #fff; 
    width: 600px; 
    height: 115px; 
    border-radius: 40px;
    margin-top: 25px;
}

.nickname-input {
    width:100%; 
    font-size:35px; 
    text-align:center; 
    line-height:150px; 
    height:100%; 
    background:none; 
    border:none;
}

.nickname-input:focus {
    background: none;
    border: none;
    outline: 0;
}

.select-avatar {
    background: url(../images/BACKGROUNDS/BG-AVATAR-BOX.svg)no-repeat;
    background-size: contain;
    width:400px; 
    height:80px;
    
}

.fundo-avatar {
    background-color: #fff; 
    width:210px; 
    height:210px;
    border-radius:50%;
    box-shadow: 4px 4px 8px 2px #727796;
}

.foto-avatar {
    margin-left: 15px;
    margin-top: 2px;
}

.foto-avatar img {
    width: 210px;
    height: 220px;
}

.btn-avatar {
    background: url(../images/BUTTONS/BTN-CONFIRMA.svg)no-repeat;
    background-size: contain;
    width: 290px;
    height: 85px;
    border: none;
    margin-top: 15px;
}

/* TIME */

.select-team {
    background-color: #FFF;
    width:450px; 
    height:80px;
    border-radius: 30px;
    color: #61172D;
    font-size: 28px;
    font-weight: bolder;
}

.fundo-time {
    background-color: #fff; 
    width:260px; 
    height:360px;
    border-radius: 30px;
    margin-top: 50px;
}

.foto-equipe {
    margin-left: 10px;
}

.equipe {
    color: #61172D;
    font-size: 22px;
    font-weight: bolder;
}

/* INDEX */ 

.login-index {
    width: 800px;
    height: 350px;
    background-color: #FFF;
    border-radius: 30px;
    margin-top: 10px;
    box-shadow: 4px 4px 8px 2px #727796;
}

.texto-login {
    width: 350px;
    height: 60px;
    margin-left: auto;
    margin-right: auto;
    background: center / contain no-repeat url(../images/BACKGROUNDS/BG-LOGIN.svg);
    border-radius: 30px;
    color: #FFF;
    font-family: "Zen Dots", serif;
    font-size: 25px;
    font-weight: 400;
    font-style: normal;
}

.input-index {
    width:681px; 
    height:60px; 
    background-color:#efefef;
    box-shadow: 2px 3px 5px 5px #b0b0b0;
    border:none; 
    border-radius:30px; 
    margin:15px; 
    font-size:1rem; 
    padding:20px; 
}

.helper-text {  
    font-size:26px;
}

.helper-text a{
    color: #3339a6;
}

.btn-confirma {
    background: url(../images/BUTTONS/BTN-CONFIRMA.svg)no-repeat;
    background-size: contain;
    width: 240px;
    height: 80px;
    position: absolute;
    left: 34%;
    bottom: -125px;
}

/* TELA CADASTRO */

.tela-cadastro {
    width: 800px;
    height: 480px;
    background-color: #FFF;
    border-radius: 30px;
    margin-top: 10px;
    box-shadow: 4px 4px 8px 2px #727796;
}

/* PERFIL */
.perfil-responsivo {
    height: 100px;
}

.bg-perfil {
    background: url(../images/BACKGROUNDS/BG-PERFIL.svg)no-repeat;
    background-size: contain;
    width: 400px;
    height: 115px;
    top: 10px;
    left: 10px;
}

.foto-perfil {
    margin-top: 14px;
    margin-left: 14px;
}

.foto-perfil img {
    width: 85px;
    height: 85px;
}

.editar-responsivo {
    margin-top: 2rem;
}

.editar-responsivo a {
    margin-top: 6px;
}

.editar-responsivo a, 
.alterarResponsivo a {
    color: #000;
    text-decoration: underline;
}

.nome-perfil {
    width: 240px;
    height: 64px;
    top: 5px;
    left: 100px;
}

.nome-perfil h3 {
    font-family: "Zen Dots", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    color: white;
    padding: 17px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nivel-perfil {
    width: 168px;
    height: 35px;
    top: 77px;
    left: 75px;
}

.nivel-perfil h3 {
    font-family: "Zen Dots", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: white;
    font-size: 15px;
    margin-top: 7px;
    margin-left: 55px;
}

.btn-voltar {
    background: url(../images/BUTTONS/BTN-BACK.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 80px;
    height: 80px;
    right: 25px;
    top: -120px;
}

.btn-voltar-jogos {
    background: url(../images/BUTTONS/BTN-BACK.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 90px;
    height: 90px;
    right: 20px;
    top: 20px;
}

.timer {
    background: url(../images/BACKGROUNDS/BG-TIMER.svg)no-repeat;
    background-size: contain;
    width: 230px;
    height: 61px;
    margin-bottom: 1rem;
}

.timer h3 {
    color: white;
    font-size: 35px;
}

/* MAPA GERAL */

.mapa-geral {
    width: 1250px;
    height: 645px;
}

.tamanho-responsivo {
    margin-top: 60px;
}

.dashboard .perfil {
    height: 210px;
}

.icones-dashboard img {
    width: 120px;
    height: 100px;
    margin-left: 10px;
    margin-top: 10px;
}

.mapa01, 
.mapa02, 
.mapa03, 
.mapa04, 
.mapa05, 
.mapa06, 
.mapa07, 
.mapa08 {
    background-size: contain !important; 
    border: none;
    width: 4vw;
    height: 6vh;
}

.mapa01ok, 
.mapa02ok, 
.mapa03ok, 
.mapa04ok, 
.mapa05ok, 
.mapa06ok, 
.mapa07ok, 
.mapa08ok {
    background-size: contain !important; 
    border: none;
}

.mapa01ok img,
.mapa02ok img,
.mapa03ok img,
.mapa04ok img,
.mapa05ok img,
.mapa06ok img,
.mapa07ok img,
.mapa08ok img {
    width: 4vw;
    height: 6vh;
}

.mapa01 {
    background: url(../images/MAPS/1.svg) no-repeat;
    top: 23%;
    left: 34%;
}
.mapa01ok {
    top: 23%;
    left: 34%;
}

.mapa02 {
    background: url(../images/MAPS/2.svg)no-repeat;
    top: 23%;
    left: 46%;
}
.mapa02ok {
    top: 23%;
    left: 46%;
}

.mapa03 {
    background: url(../images/MAPS/3.svg)no-repeat;
    top: 23%;
    left: 58%;
}
.mapa03ok {
    top: 23%;
    left: 58%;
}

.mapa04 {
    background: url(../images/MAPS/4.svg)no-repeat;
    bottom: 33%;
    right: 23%;
}
.mapa04ok {
    bottom: 33%;
    right: 23%;
}

.mapa05 {
    background: url(../images/MAPS/5.svg)no-repeat;
    bottom: 20%;
    left: 58%;
}
.mapa05ok {
    bottom: 20%;
    left: 58%;
}

.mapa06 {
    background: url(../images/MAPS/6.svg)no-repeat;
    bottom: 20%;
    left: 46%;
}
.mapa06ok {
    bottom: 20%;
    left: 46%;
}

.mapa07 {
    background: url(../images/MAPS/7.svg)no-repeat;
    bottom: 20%;
    left: 35%;
}
.mapa07ok {
    bottom: 20%;
    left: 35%;
}

.mapa08 {
    background: url(../images/MAPS/8.svg)no-repeat;
    top: 39%;
    right: 4%;
}
.mapa08ok {
    top: 39%;
    right: 4%;
}

.check {
    background: url(../images/BUTTONS/BTN-CHECK.svg)no-repeat;
    background-size: contain;
    width: 2.3vw;
    height: 4.3vh;
    position: absolute;
    bottom: 0;
    right: 0;
}

.checkOk {
    background: url(../images/BUTTONS/BTN-CHECK.svg) no-repeat;
    background-size: contain;
    width: 1.3vw;
    height: 3.3vh;
    position: absolute;
    bottom: -3px;
    right: 10px;
}

.botao-right {
    right:0%; 
    bottom:8%; 
    z-index: 1;
}

#right-go {
    background: url(../images/BUTTONS/BTN-LEFT.svg)no-repeat; 
    background-size:contain; 
    width:70px; 
    height:70px; 
    border:none;
}

.botao-left {
    right: -25%;
    bottom: 8%;
    z-index: 1;
}

#Left-go {
    background: url(../base/BTN-LEFT.svg)no-repeat; 
    background-size:contain; 
    width:70px; 
    height:70px; 
    border:none;
}

/* LATERAL SCORE */
#lateral-score {
    padding: 0;
}

#game-point {
    width: 190px;
    height: 63px;
    background: url(../images/BACKGROUNDS/BG-SCORE.svg)no-repeat;
    background-size: contain;
    position: absolute;
    right: 0;
}

#game-point span {
    color: #FDBC89;
    font-size: 30px;
}

.coracaogame-point {
    background: url(../images/ESTRELA.svg)no-repeat;
    background-size: contain;
    width: 33px;
    height: 33px;
}

/* ENUNCIADO */ 
.enunciado {
    width: 950px;
    height: 155px;
    background: url(../images/BACKGROUNDS/BG-ENUNCIADO.svg)no-repeat;
    background-size: contain;
    border-radius: 30px;
}

.enunciado h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: normal;
    color: #FFF;
}

/* MODAL */ 
#gameVideo {
    width: 75vw;
    height: 75vh;
}

#videoModal .modal-dialog {
  max-width: 100% !important;
  margin: 0 !important;
}

#videoModal .modal-body {
  width: 100%;
  height: 100%;
}

.modal-content {
    background: none;
    border: none;
}

.modal-body {
    width:850px; 
    height:318px; 
}

.modal-informacoes {
    width: 550px;
    height: 200px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 4px 4px 8px 2px #727796;
}

.modal-informacoes h4,h5 {
    color: #022873;
}

.modal-informacoes h4 {
    font-weight: bolder;
}

.barra-vermelha {
    width: 98%;
    height: 3px;
    background-color: #f25fcb;
}

.titulo-conquistas {
    font-size: 25px;
    font-weight: bolder;
    color: #61172D;
}

.btn-back-game {
    background: url(../images/BUTTONS/BTN-BACK.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 65px;
    height: 65px;
    right: -60px;
    top: -20px;
}

.coracao {
    background: url(../images/CORACAO.svg)no-repeat;
    background-size: contain;
    width: 30px;
    height: 26px;

}

.btn-tutorial {
    background: url(../images/BUTTONS/BTN-TUTORIAL.svg)no-repeat;
    background-size: contain;
    width: 220px;
    height: 70px;
}

.btn-jogar {
    background: url(../images/BUTTONS/BTN-PLAY.svg)no-repeat;
    background-size: contain;
    width: 220px;
    height: 70px;
}

#stateGameId {
    width:296px; 
    height:120px; 
    border:none;
}

.btn-color {
    background-color: transparent;
    border: none;
}

/* MODAL CONQUISTA DESBLOQUEADA */ 

.modal-informacoes-conquista {
    width: 500px;
    height: 360px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 4px 4px 8px 2px #727796;
}

.conquista-desbloqueada {
    width: 118px;
    height: 133px;
    top: -75px;
}

.btn-confirma-conquista {
    background: url(../images/BUTTONS/BTN-CONFIRMA-CONQUISTA.svg) no-repeat;
    background-size: contain;
    width: 240px;
    height: 80px;
}

/* MODAL PROGRESSÃO */

.modal-progressao {
    width: 500px;
    height: 300px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 4px 4px 8px 2px #727796;
}

/* POP UP ERRO */
.titulo-errado {
    color: #f2637e;
    font-size: 2.3rem;
    font-weight: 800;
}

.pop-up-erro {
    width:850px; 
    height:350px;
    margin-top: 10%;
}

.btn-erro {
    background: url(../images/BUTTONS/BTN-CONTINUAR.svg)no-repeat;
    background-size: contain;
    width:235px; 
    height:70px; 
    bottom: 0;
    border:none;
    cursor: pointer;
}

/* POP UP DICA */
.titulo-dica {
    color: #f2637e;
    font-family: 'Roboto' , serif;
    font-size: 2.3rem;
    font-weight: bold;
}

.barra-laranja {
    width: 98%;
    height: 3px;
    background-color: #f2637e;
}

.pop-up-dica {
    width:850px; 
    height:320px;
    margin-top: 10%;
}

.bg-pop-up-dica {
    background-color: #FFF;
    border-radius: 20px;
    box-shadow: 4px 4px 8px 2px #727796;
    width: 490px;
    height: 250px;
}

.bg-pop-up-dica h4 {
    font-size: 20px;
    color: #022873;
}

.btn-dica {
    background: url(../images/BUTTONS/BTN-CONTINUAR.svg)no-repeat;
    background-size: contain;
    width:235px; 
    height:70px; 
    bottom: 0;
    border:none;
    cursor: pointer;
}

.btn-sair-azul {
    background: url(../base/BTN-SAIR-AZUL.svg)no-repeat;
    background-size: contain;
    width:210px; 
    height:70px; 
    bottom: 0;
    left: 200px;
    border:none;
    cursor: pointer;
}

/* POP UP ACERTO */
.titulo-certo {
    color: #3339a6;
    font-size: 2.3rem;
    font-weight: 800;
}

.barraAzul {
    width: 98%;
    height: 3px;
    background-color: #f25fcb;
}

.pop-up-acerto {
    width:850px; 
    height:340px;
    margin-top: 10%;
}

.btn-acerto {
    background: url(../images/BUTTONS/BTN-CONTINUAR.svg)no-repeat;
    background-size: contain;
    width:235px; 
    height:70px; 
    bottom: 0;
    border:none;
    cursor: pointer;
}

/* MODAL GERAL */
.titulo-modal {
    color: #3339a6;
    font-size: 35px;
    font-weight: 800;
}
 

/* GAME FATO-FAKE */
.resposta-FF {
    width: 930px;
    height: 230px;
    background: url(../images/BACKGROUNDS/BG-CONTEUDO.svg)no-repeat;
    background-size: contain;   
    border-radius: 20px;
}

.resposta-FF h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-size: 25px;
    color: #FFF;
}

.mark {
    width: 148px;
    height: 31px;
    background-color: white;
    border-radius: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.pergunta-atual-1, 
.pergunta-atual-2, 
.pergunta-atual-3, 
.pergunta-atual-4 {
    background: url(../base/Fato-Fake-CONTEUDO.svg)no-repeat;
    background-size: contain;
    width: 34px;
    height: 14px;
    top: 48px;
    left: 40%;
}

.pergunta-atual-1 {
    display: block;
}

.pergunta-atual-2, 
.pergunta-atual-3, 
.pergunta-atual-4 {
    display: none;
}

.botoes-FF {
    margin-top: 3rem;
}

.btn-fato {
    background: url(../images/BUTTONS/BTN-FATO.svg)no-repeat;
    background-size: contain;
    width: 250px;
    height: 89px;
    border: none;
}

.btn-fake {
    background: url(../images/BUTTONS/BTN-FAKE.svg)no-repeat;
    background-size: contain;
    width: 250px;
    height: 89px;
    border: none;
}

/* LIGUE OS PONTOS */

.box-pergunta {
    background: url(../base/BOX-1.svg) no-repeat; 
    background-size: cover;
    width:260px; 
    height:200px;
    margin-top: 0.5rem;
    margin-right: 30px;
    box-shadow: 4px 4px 8px 2px #727796;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.box-pergunta h4 {
    margin-top: 3rem;
    font-size: 1.2rem;
}

.fundo-pergunta {
    width:260px; 
    height: 27px;
    background: url(../images/BACKGROUNDS/BG-PERGUNTA-LIGUE-OS-PONTOS.svg)no-repeat;
    background-size: cover;
    bottom: 0;
    left: 0;
}

.fundo-pergunta h4 {
    color: white;
    text-align: center;
    margin-bottom: 11px;
}

.ponto-pergunta {
    background: #E5E9EC;
    border-radius: 50%; 
    width: 36px;
    height: 36px;
    margin-left: 104px;
    margin-top: 22px;
    box-shadow: 4px 2px 8px 0px #9ca2c9;
}
.ponto-pergunta-texto {
    background: #E5E9EC;
    border-radius: 50%; 
    width: 36px;
    height: 36px;
    margin-left: 104px;
    bottom: 0;
    box-shadow: 4px 2px 8px 0px #9ca2c9;
}

.btn-pergunta {
    width:36px; 
    height:36px; 
    border-radius:50%; 
    background-color: #04F2F2; 
    border:5px solid #E5E9EC;
}

.box-resposta {
    background: url(../images/BACKGROUNDS/BG-BOX-2.svg) no-repeat; 
    background-size: contain;
    width:270px; 
    height:254px;
    margin-right: 20px;
}

.box-resposta h4 {
    margin-top: 3rem;
    font-size: 1.2rem;
}
.ligue-texto {
    margin-top: 1.5rem !important;
}

.ponto-resposta {
    background: #E5E9EC;
    border-radius: 50%; 
    width: 36px;
    height: 36px; 
    margin-left: 105px; 
    margin-top:-12px;
    box-shadow: 4px 2px 8px 0px #9ca2c9;
    top: 5px;
}

.btn-resposta {
    width:36px; 
    height:36px; 
    border-radius:50%; 
    background-color: #04F2F2; 
    border:5px solid #E5E9EC;
}

#resetarGame {
    width: 220px;
    height: 53px;
    border-radius: 25px;
    background: url(../images/BUTTONS/BTN-RESETAR.svg)no-repeat;
    background-size: cover;
    border: none;
    margin-top: 10px;
}

#resetarGame p {
    font-size: 30px;
    color: #FFFF;
    padding: 5px;
}

/* RESPOSTA RAPIDA */

.div-resposta {
    margin-top: 1.5em;
}

.box-resposta-rapida {
    width:470px; 
    height:202px;
    background: url(../images/BACKGROUNDS/BG-BOX-RR.svg)no-repeat;
    background-size: contain;
    padding: 2rem;
    cursor: pointer;
    border-radius: 20px;
}

.box-resposta-rapida-imagem {
    width:460px; 
    height:250px;
    background: url(../images/BACKGROUNDS/BG-BOX-RR-IMAGEM.svg)no-repeat;
    background-size: contain;
    cursor: pointer;
    border-radius: 20px;
}

.box-resposta-rapida-imagem img{
    width:402px; 
    height:199px; 
    margin-top:27px; 
    margin-left:15px;
}

/* ORDEM CERTA */
#sortable {
    margin-top: 1.5rem;
}

.box-ordem-certa {
    background: url(../images/BACKGROUNDS/BG-BOX-1.svg)no-repeat; 
    background-size: contain;
    width:220px; 
    height:390px;
}

.OC-imagem {
    background: url(../images/BACKGROUNDS/BG-BOX-OC.svg)no-repeat; 
    background-size: contain;
}

.box-ordem-certa img {
    width: 209px;
    height: 125px;
    margin-left: 3px;
}

.box-ordem-certa h5 {
    font-size: 18px;
}

.OC-imagem .card-body h5 {
    margin-top: 30px;
}

.ordem-certa-confirma {
    background: url(../images/BUTTONS/BTN-CONFIRMA.svg)no-repeat;
    background-size: contain; 
    width:255px; 
    height:75px; 
    border:none;
    bottom: -80px;
}

.botao-troca {
    display: none;
}

li {
    list-style-type: none;
}

footer img {
    width: 100%;
}

#contentGame {
    width: 500px;
    height: 600px;
    /* overflow-x: auto; */
    border-radius: 20px;
}

.game1 img {
    width: 95px;
    height: 95px;
    cursor: pointer;
    background-size: contain;
}

/* MAPAS */
.mapa-01,
.mapa-02,
.mapa-03,
.mapa-04,
.mapa-05,
.mapa-06,
.mapa-07,
.mapa-08 {
    width: 1250px;
    height: 703px;
    z-index: 1;
}

/* MAPA 01 */

.mapa-01 .jogo01 { top: 40px; left: 80px; }
.mapa-01 .jogo02 { top: 60px; left: 400px; }
.mapa-01 .jogo03 { top: 50px; left: 750px; }
.mapa-01 .jogo04 { top: 70px; left: 1100px; }

.mapa-01 .jogo05 { top: 250px; left: 200px; }
.mapa-01 .jogo06 { top: 230px; left: 600px; }
.mapa-01 .jogo07 { top: 270px; left: 950px; }

.mapa-01 .jogo08 { top: 450px; left: 150px; }
.mapa-01 .jogo09 { top: 470px; left: 600px; }
.mapa-01 .jogo10 { top: 480px; left: 1050px; }

.mapa-01 .jogo11 { top: 120px; left: 250px; }
.mapa-01 .jogo12 { top: 100px; left: 650px; }
.mapa-01 .jogo13 { top: 140px; left: 1000px; }

.mapa-01 .jogo14 { top: 320px; left: 100px; }
.mapa-01 .jogo15 { top: 350px; left: 500px; }
.mapa-01 .jogo16 { top: 330px; left: 900px; }

.mapa-01 .jogo17 { top: 530px; left: 250px; }
.mapa-01 .jogo18 { top: 550px; left: 650px; }
.mapa-01 .jogo19 { top: 520px; left: 1050px; }


/* MAPA 02 */

.mapa-02 .jogo01 { top: 50px;  left: 100px; }
.mapa-02 .jogo02 { top: 60px;  left: 400px; }
.mapa-02 .jogo03 { top: 50px;  left: 700px; }
.mapa-02 .jogo04 { top: 70px;  left: 1000px; }

.mapa-02 .jogo05 { top: 300px; left: 200px; }
.mapa-02 .jogo06 { top: 280px; left: 500px; }
.mapa-02 .jogo07 { top: 320px; left: 800px; }
.mapa-02 .jogo08 { top: 300px; left: 1100px; }

.mapa-02 .jogo09  { top: 100px; left: 150px; }
.mapa-02 .jogo10 { top: 120px; left: 450px; }
.mapa-02 .jogo11 { top: 100px; left: 750px; }
.mapa-02 .jogo12 { top: 120px; left: 1050px; }

.mapa-02 .jogo13 { top: 400px; left: 250px; }
.mapa-02 .jogo14 { top: 420px; left: 650px; }
.mapa-02 .jogo15 { top: 400px; left: 1050px; }


/* MAPA 03 */

.mapa-03 .jogo01 { top: 40px; left: 100px; }
.mapa-03 .jogo02 { top: 60px; left: 400px; }
.mapa-03 .jogo03 { top: 50px; left: 750px; }
.mapa-03 .jogo04 { top: 70px; left: 1100px; }

.mapa-03 .jogo05 { top: 250px; left: 200px; }
.mapa-03 .jogo06 { top: 230px; left: 600px; }
.mapa-03 .jogo07 { top: 270px; left: 950px; }

.mapa-03 .jogo08 { top: 450px; left: 150px; }
.mapa-03 .jogo09 { top: 470px; left: 600px; }
.mapa-03 .jogo10 { top: 480px; left: 1050px; }

.mapa-03 .jogo11 { top: 120px; left: 250px; }
.mapa-03 .jogo12 { top: 100px; left: 650px; }
.mapa-03 .jogo13 { top: 140px; left: 1000px; }

.mapa-03 .jogo14 { top: 320px; left: 100px; }
.mapa-03 .jogo15 { top: 350px; left: 500px; }
.mapa-03 .jogo16 { top: 330px; left: 900px; }

.mapa-03 .jogo17 { top: 530px; left: 250px; }
.mapa-03 .jogo18 { top: 550px; left: 650px; }
.mapa-03 .jogo19 { top: 520px; left: 950px; }
.mapa-03 .jogo20 { top: 570px; left: 1150px; }

.mapa-03 .jogo21 { top: 150px; left: 150px; }
.mapa-03 .jogo22 { top: 180px; left: 500px; }
.mapa-03 .jogo23 { top: 160px; left: 850px; }

.mapa-03 .jogo24 { top: 380px; left: 250px; }
.mapa-03 .jogo25 { top: 400px; left: 700px; }
.mapa-03 .jogo26 { top: 420px; left: 1050px; }

.mapa-03 .jogo27 { top: 580px; left: 600px; }


/* MAPA 04 */ 

.mapa-04 .jogo01 { top: 40px; left: 100px; }
.mapa-04 .jogo02 { top: 60px; left: 400px; }
.mapa-04 .jogo03 { top: 50px; left: 750px; }
.mapa-04 .jogo04 { top: 70px; left: 1100px; }

.mapa-04 .jogo05 { top: 250px; left: 200px; }
.mapa-04 .jogo06 { top: 230px; left: 600px; }
.mapa-04 .jogo07 { top: 270px; left: 950px; }

.mapa-04 .jogo08 { top: 450px; left: 150px; }
.mapa-04 .jogo09 { top: 470px; left: 600px; }
.mapa-04 .jogo10 { top: 480px; left: 1050px; }

.mapa-04 .jogo11 { top: 120px; left: 250px; }
.mapa-04 .jogo12 { top: 100px; left: 650px; }
.mapa-04 .jogo13 { top: 140px; left: 1000px; }

.mapa-04 .jogo14 { top: 320px; left: 100px; }
.mapa-04 .jogo15 { top: 350px; left: 500px; }
.mapa-04 .jogo16 { top: 330px; left: 900px; }

.mapa-04 .jogo17 { top: 530px; left: 250px; }
.mapa-04 .jogo18 { top: 550px; left: 650px; }
.mapa-04 .jogo19 { top: 520px; left: 950px; }
.mapa-04 .jogo20 { top: 570px; left: 1150px; }


/* MAPA 05 */

.mapa-05 .jogo01 { top: 40px; left: 100px; }
.mapa-05 .jogo02 { top: 60px; left: 400px; }
.mapa-05 .jogo03 { top: 50px; left: 750px; }
.mapa-05 .jogo04 { top: 70px; left: 1100px; }

.mapa-05 .jogo05 { top: 250px; left: 200px; }
.mapa-05 .jogo06 { top: 230px; left: 600px; }
.mapa-05 .jogo07 { top: 270px; left: 950px; }

.mapa-05 .jogo08 { top: 450px; left: 150px; }
.mapa-05 .jogo09 { top: 470px; left: 600px; }
.mapa-05 .jogo10 { top: 480px; left: 1050px; }

.mapa-05 .jogo11 { top: 120px; left: 250px; }
.mapa-05 .jogo12 { top: 100px; left: 650px; }
.mapa-05 .jogo13 { top: 140px; left: 1000px; }

.mapa-05 .jogo14 { top: 320px; left: 100px; }
.mapa-05 .jogo15 { top: 350px; left: 500px; }
.mapa-05 .jogo16 { top: 330px; left: 900px; }

.mapa-05 .jogo17 { top: 530px; left: 250px; }
.mapa-05 .jogo18 { top: 550px; left: 650px; }
.mapa-05 .jogo19 { top: 520px; left: 950px; }
.mapa-05 .jogo20 { top: 570px; left: 1150px; }


/* MAPA 06 */

.mapa-06 .jogo01 { top: 40px; left: 100px; }
.mapa-06 .jogo02 { top: 60px; left: 400px; }
.mapa-06 .jogo03 { top: 50px; left: 750px; }
.mapa-06 .jogo04 { top: 70px; left: 1100px; }

.mapa-06 .jogo05 { top: 250px; left: 200px; }
.mapa-06 .jogo06 { top: 230px; left: 600px; }
.mapa-06 .jogo07 { top: 270px; left: 950px; }

.mapa-06 .jogo08 { top: 450px; left: 150px; }
.mapa-06 .jogo09 { top: 470px; left: 600px; }
.mapa-06 .jogo10 { top: 480px; left: 1050px; }

.mapa-06 .jogo11 { top: 120px; left: 250px; }
.mapa-06 .jogo12 { top: 100px; left: 650px; }
.mapa-06 .jogo13 { top: 140px; left: 1000px; }

.mapa-06 .jogo14 { top: 320px; left: 100px; }
.mapa-06 .jogo15 { top: 350px; left: 500px; }
.mapa-06 .jogo16 { top: 330px; left: 900px; }

.mapa-06 .jogo17 { top: 530px; left: 250px; }
.mapa-06 .jogo18 { top: 550px; left: 650px; }
.mapa-06 .jogo19 { top: 520px; left: 950px; }
.mapa-06 .jogo20 { top: 570px; left: 1150px; }


/* MAPA 07 */

.mapa-07 .jogo01 {
    background-size: contain;
    cursor: pointer;
    top: 60px;
    left: -30px;
}

.mapa-07 .jogo02 {
    background-size: contain;
    cursor: pointer;
    top: 10px;
    left: 295px;
}

.mapa-07 .jogo03 {
    background-size: contain;
    cursor: pointer;
    top: -10px;
    left: 600px;
}

.mapa-07 .jogo04 {
    background-size: contain;
    cursor: pointer;
    top: 80px;
    right: 170px;
}

.mapa-07 .jogo05 {
    background-size: contain;
    cursor: pointer;
    bottom: 215px;
    left: 120px;
}

.mapa-07 .jogo06 {
    background-size: contain;
    cursor: pointer;
    bottom: 310px;
    right: 465px;
}

.mapa-07 .jogo07 {
    background-size: contain;
    cursor: pointer;
    bottom: 50px;
    left: 407px;
}

.mapa-07 .jogo08 {
    background-size: contain;
    cursor: pointer;
    bottom: 260px;
    right: -10px;
}

.mapa-07 .jogo09 {
    background-size: contain;
    cursor: pointer;
    bottom: 0px;
    right: 250px;
}


/* MAPA 08 */

.mapa-08 .jogo01 {
    background-size: contain;
    cursor: pointer;
    top: 280px;
    left: 25px;
}

.mapa-08 .jogo02 {
    background-size: contain;
    cursor: pointer;
    top: 30px;
    left: 543px;
}

.mapa-08 .jogo03 {
    background-size: contain;
    cursor: pointer;
    bottom: 135px;
    left: 632px;
}

.mapa-08 .jogo04 {
    background-size: contain;
    cursor: pointer;
    bottom: 170px;
    right: -72px;
}

footer {
    position: absolute;
    bottom: 0;
    z-index: -1;
}

/* AVATAR

/* TELA PERFIL */

.perfil-screen {
    height: 65vh;
}

.tela-perfil {
    background-color: #FFF;
    border-radius: 30px;
    width: 650px;
    height: 350px;
    margin-top: 0;
    box-shadow: 4px 4px 8px 2px #727796;
    margin-left: auto;
    margin-right: auto;
}

.tela-perfil h4,h3,h2 {
    color: #3339a6;
}

.tela-perfil h3,h2 {
    font-weight: bolder;
}

.fundo-avatar-perfil {
    background-color: #fff;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: 4px 4px 8px 2px #727796;
    transform: translate(15.9em, -8em);
}

.fundo-nick {
    width: 400px;
    height:85px;
} 

.fundo-nick h2 {
    color: #f25fcb;
    font-family: 'Roboto' , sans-serif;
    font-weight:bolder;
    font-size: 35px;
}

.btn-confirma-perfil {
    background: url(../images/BUTTONS/BTN-CONFIRMA.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 230px;
    height: 61px;
}

/* SCORE TEAM */ 
.titulo-ranking-individual-apagado {
    background-color: #FFF;
    width: 285px;
    height: 60px;
    cursor: pointer;
 }

 .titulo-ranking-equipes {
    background: url(../base/RANKING-EQUIPES.svg)no-repeat;
    background-size: contain;
    width: 325px;
    height: 60px;
 }


/* SCORE */
 .titulo-ranking-individual {
    background-color: #FFF;
    border-radius: 30px;
    width: 285px;
    height: 60px;
    color: #61172D;
    font-size: 25px;
    font-weight: 800;
 }

 .titulo-ranking-equipes-apagado {
    background: url(../base/RANKING-EQUIPES-APAGADO.svg)no-repeat;
    background-size: contain;
    width: 325px;
    height: 60px;
    cursor: pointer;
 }

 .ranking-individual {
    background-color: #fff;
    border-radius: 30px;
    width: 750px;
    box-shadow: 4px 4px 8px 2px #727796;
 }

 .ranking-linha-1 {
    /* border-bottom: 3px solid #00000038; */
    box-shadow: 1px 3px 4px -2px;
    border-radius: 20px 20px 0 0 ;
    background-color: #FCEED9;
 }

 .ranking-linha-2 {
    border-bottom: 2px solid #00000030;
 }

 .ranking-linha-1 h3, .ranking-linha-2 h3 {
    font-weight: bolder;
}

 .fundo-avatar-score {
    background-color: #fff;
    width: 120px;
    height: 120px;
    border-radius: 70px;
    border: 2px solid #F5821F;
    box-shadow: 4px 4px 8px 2px #727796;
 }

 .fundo-avatar-score img{
    width: 116px;
    height: 119px;
 }

 /* SOCIAL */
.tela-social {
    width: 700px;
    height: 500px;
    background-color: #FFF;
    border-radius: 30px;
    box-shadow: 4px 4px 8px 2px #727796;
}

 .titulo-doacao {
    width: 325px;
    height: 60px;
    background-color: #FFF;
    border-radius: 20px;
    color: #61172D;
    font-size: 25px;
    font-weight: 800;
 }

 .fundo-avatar-social {
    background-color: #fff; 
    width:120px; 
    height:115px;
    border-radius:50%;
    border: 2px solid #F8B498;
}

 .fundo-avatar-social img{
    width: 117px;
    height: 110px;
 }

 .doacao1, .doacao2, .doacao3 {
    width: 65px;
    height: 30px;
    background-color: #FFF;
    border: 1px solid;
 }

 .doacao1 {
    border-radius: 20px 0 0 20px;
 }

 .doacao3 {
    border-radius: 0 20px 20px 0;
 }

 .btn-doar {
    background: url(../images/BUTTONS/BTN-DOAR.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 100px;
    height: 40px;
 }

.btn-pedir {
    background: url(../images/BUTTONS/BTN-PEDIR.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 100px;
    height: 40px;
 }

/* CONQUISTAS */
.conquistas-desbloqueadas {
    width: 1166px;
}

.bg-conquistas {
    width: 200px;
    height: 260px;
    background-color: #FFF;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    box-shadow: 4px 4px 8px 2px #727796;
}

.bg-conquistas img{
    width: 100px;
    height: 100px;
}

.bg-conquistas h4{
    color: #61172D;
    font-size: 18px;
    font-weight: 800;
    margin-top: 10px;
}
.bg-conquistas h5{
    color: #0054B8;
    font-size: 18px;
    font-weight: 700;
}

.titulo-conquista {
    background-color: #FFF;
    width:300px; 
    height:60px; 
    border-radius: 30px;
    margin-left: auto;
    margin-right: auto;
    color: #61172D;
    font-size: 28px;
    font-weight: bolder;
}

/* CONFIGURAÇÕES */
.titulo-configuracao {
    background: center / contain no-repeat url(../images/BACKGROUNDS/BG-LOGIN.svg);
    width:300px; 
    height:65px; 
    border-radius: 30px;
    margin-left: auto;
    margin-right: auto;
    color: #FFF;
    font-family: 'Zen Dots', sans-serif;
    font-weight: normal;
    font-size: 25px;
}

.tela-configuracao {
    width: 680px;
    height: 320px;
    background-color: #FFF;
    border-radius: 30px;
    box-shadow: 4px 4px 8px 2px #727796;
}

.botao-audio {
    background-size: contain;
    width:146px; 
    height:92px; 
    border:none; 
    margin-right:29px;
}

.botao-tela {
    background: url(../images/BUTTONS/BTN-NAO-SELECIONADO.svg)no-repeat; 
    background-size: contain;
    width:146px; 
    height:92px; 
    border:none; 
}

.btn-sair {
    background: url(../images/BUTTONS/BTN-LEFT.svg)no-repeat; 
    background-size: contain;
    width:45px; 
    height:45px; 
    border:none; 
}

.config-class {
    font-family: "Roboto", sans-serif;
    font-weight: normal;
    letter-spacing: 3px;
    color: #3339A6;
    margin: 0;
}

/* LOGOUT */

.tela-logout {
    width: 650px;
    height: 267px;
    background-color: #FFF;
    border-radius: 30px;
    box-shadow: 4px 4px 8px 2px #727796;
}

.bg-log-out {
    width: 450px;
    height: 70px;
    background-color: #fff;
    border-radius: 15px;
    margin-left: auto;
    margin-right: auto;
}

.log-outh-2 {
    font-size: 35px;
    font-weight: bold;
    color: #3339A6;
}

.btn-cancelar-logout {
    background: url(../images/BUTTONS/BTN-CANCELAR.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 220px;
    height: 80px;
}

.btn-logout {
    background: url(../images/BUTTONS/BTN-SAIR.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 220px;
    height: 80px;
}

.btn-endgame {
    background: url(../images/BUTTONS/BTN-SAIR.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 220px;
    height: 80px;
}

/* CONFIRMAR DONATE */

.tela-doacao {
    width: 490px;
    height: 223px;
    background-color: #FFF;
    border-radius: 20px;
    color: #61172D;
    font-weight: 400;
}

.btn-nao {
    background: url(../images/BUTTONS/BTN-NAO-VERMELHO.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 240px;
    height: 70px;
}

.btn-sim {
    background: url(../images/BUTTONS/BTN-SIM-AZUL.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 240px;
    height: 70px;
}

/* TUTORIAL */

.tutorial-game .img-fluid {
    width: 1050px;
}

#tutorialGame {
    display: block;
    width:174px; 
    height:55px; 
    border:none;
}

    
.hytPlayerWrap iframe {
    width: 1050px !important;
    zoom: 95% !important;
    
}

.tutorialResponsivo {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* TELA VIDEO */ 

.tela-video {
    width: 65%;
    height: 70%;
    background-color: #FFF;
    border-radius: 20px;
}

.play-video {
    background: url(../images/BUTTONS/play-video.svg)no-repeat;
    background-size: contain;
    width: 75px;
    height: 75px;
}

/* BARRA DE ROLAGEM */ 

html ::-webkit-scrollbar {
    width: 15px;
}

html ::-webkit-scrollbar-thumb {
    border-radius: 50px;
    background: #6c4dde;
}

html ::-webkit-scrollbar-track {
    border-radius: 50px;
    background: #DFF1FA;
}

/* ALTERAR SENHA */ 

.senha-edit {
    background-color: #fff; 
    width:500px; 
    height:90px; 
    border-radius:30px;
}

.senha-button img{
    width: 100px;
    height: 100px;
    margin-top: 20px;
}


/* BTN LINK EXTERNO */

.btn-link-externo {
    color: #fff;
    background-color: #0056b1;
    border: none;
    border-radius: 20px;
    margin-top: 10px;
    font-size: 18px;
    padding: 8px;
    box-shadow: 4px 4px 8px 2px #727796;
}

/* ANIMAÇÕES */

.mapa-um-mulher {
    background: url(../images/ANIMAR/1-mulher-flutuando.svg)no-repeat;
    background-size: contain;
    width: 3vw;
    height: 8vh;
    position: absolute;
    left: 35.8%;
    top: 40%;
    --animate-duration: 7s;
}
.mapa-quatro-mulher {
    background: url(../images/ANIMAR/4-mulher-flutuando.svg)no-repeat;
    background-size: contain;
    width: 4vw;
    height: 5vh;
    position: absolute;
    right: 10.5%;
    bottom: 38%;
}
.mapa-quatro-homem-girando {
    background: url(../images/ANIMAR/4-homem-girando.svg)no-repeat;
    background-size: contain;
    width: 4vw;
    height: 8vh;
    position: absolute;
    right: 21%;
    bottom: 29.5%;
    --animate-duration: 3s;
}
.mapa-sete-mulher {
    background: url(../images/ANIMAR/7-mulher-flutuando.svg)no-repeat;
    background-size: contain;
    width: 4vw;
    height: 8vh;
    position: absolute;
    left: 32.2%;
    bottom: 26.39%;
    --animate-duration: 7s;
}
.mapa-sete-homem {
    background: url(../images/ANIMAR/7-homem-flutuando.svg)no-repeat;
    background-size: contain;
    width: 4vw;
    height: 8vh;
    position: absolute;
    left: 36%;
    bottom: 23%;
}
.mapa-oito-nave {
    background: url(../images/ANIMAR/8-nave.svg)no-repeat;
    background-size: contain;
    width: 6vw;
    height: 7vh;
    position: absolute;
    right: 15.8%;
    top: 40%;
}