body {
   margin: 0;
   padding: 0;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   /* Remove a rolagem */
   background-color: #00a9df;
   font-family: 'PixelGameFont';
   font-optical-sizing: auto;
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'PixelGameFont';
   src: url('./fonts/PixelGameFont.woff2') format('woff2'),
      url('./fonts/PixelGameFont.woff') format('woff');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}



/*** HOME ***/

.abertura {
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;   
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

.abertura_PT {
   background-image: url('./images/abertura.jpg');
}
.abertura_ES {
   background-image: url('./images/abertura_es.jpg');
}
.abertura_EN {
   background-image: url('./images/abertura_en.jpg');
}

.ranking{
   height: inherit;
}

.modal_ini {
   width: 100%;
   max-width: 750px;
   padding: 50px 30px;
   border: 2px solid #00a9df;
   border-radius: 30px;
   background-color: rgba(1, 20, 65, 0.93);

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

.modal_ini_xg {
   max-width: 1024px;
   position: relative;
   overflow: auto;
   height: inherit;
   max-height: fit-content;
   justify-content: flex-start;
}

.modal_ini h2 {
   font-family: "Noto Sans", sans-serif;
   font-size: 36px;
   font-optical-sizing: auto;
   font-weight: bold;
   font-style: normal;
   color: #ffb223;
   padding: 0;
   margin: 0;
}

.modal_ini p {
   font-family: "Noto Sans", sans-serif;
   font-size: 18px;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   color: #FFF;

   margin-top: 30px;
   width: 100%;
   max-width: 300px;
   text-align: center;
   line-height: 30px;
}

.modal_ini .form {
   display: flex;
   flex-direction: column;
   gap: 30px;
   margin-top: 30px;
   width: 100%;
   max-width: 600px;
}

.modal_ini .form .form-group {
   display: flex;
   align-items: center;
   gap: 10px;
}

.modal_ini .form .form-group label {
   font-family: "Noto Sans", sans-serif;
   font-size: 18px;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   color: #FFF;
   text-transform: uppercase;
   width: 100%;
   max-width: 160px;
   text-align: right;
}


.modal_ini .form .form-group .form-control {
   font-family: "Noto Sans", sans-serif;
   font-size: 18px;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   color: #FFF;
   background-color: transparent;
   border: 2px solid #00a9df;
   border-radius: 40px;
   padding: 5px 15px;
   width: 100%;
   outline: none;
}

.modal_ini .form .form-group .form-control::placeholder {
   color: #FFF;
}

.modal_ini .form .form-group .form-control-select option {
   color: #000;
}

.modal_ini .form .botao {
   border: none;
   margin-left: auto;
   background-color: #ffb223;
   border-radius: 40px;
   padding: 8px 25px;
   cursor: pointer;


   font-family: "Noto Sans", sans-serif;
   font-size: 24px;
   font-optical-sizing: auto;
   font-weight: bold;
   font-style: normal;
   color: #FFF;
   text-transform: uppercase;
}

.modal_code .form {
   max-width: 400px;
}

.modal_code .form .form-group .form-control {
   text-align: center;
}

.modal_code .form .botao {
   margin-right: auto;
}

@media screen and (max-width: 768px) {
   .modal_ini .form .form-group {
      flex-direction: column;
   }

   .modal_ini .form .form-group label {
      max-width: 100%;
      text-align: center;
   }
}

/*** FIM HOME ***/

/*** COMO JOGAR ***/

.como_jogar {
   width: 100%;
   height: 100vh;
   min-height: 1000px;
   background-image: url('./images/como-jogar/fundo.jpg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

.como_jogar .container {
   width: 1300px;
   margin: 0 auto;
   display: flex;
}

.como_jogar .logo_indorama {
   margin-left: auto;
   margin-top: 20px;
}



.como_jogar .logos {
   display: flex;
   flex-direction: column;
   margin-top: 100px;
}


.como_jogar .logos .logo_safe {
   margin-top: 250px;
}


.como_jogar .container .textos {
   width: 100%;
   max-width: 500px;

   font-family: "Noto Sans", sans-serif;
   font-size: 18px;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   color: #FFF;
   line-height: 28px;
   margin-left: auto;
   margin-top: 100px;
}

.como_jogar .container .textos p {
   margin: 20px 0;
}

.como_jogar .container .textos strong {
   font-weight: bold;
}

.como_jogar .container .textos h1,
.como_jogar .container .textos h2 {
   font-size: 32px;
   font-weight: bold;
   color: #ffb223;
   margin: 30px 0 0px 0;
}


.como_jogar .botao_jogar {
   display: flex;
   align-items: center;
   gap: 30px;
}

.como_jogar .botao_jogar .bt_espaco {
   padding: 3px 30px;
   border: 2px solid #FFF;
   border-radius: 11px;
   font-size: 13px;
   text-transform: uppercase;
   font-weight: 400;
   margin-top: 11px;
}

.como_jogar .botao_iniciar_ranking {
   display: flex;
   align-items: center;
   gap: 30px;

   font-size: 22px;
   text-transform: uppercase;
   font-weight: 400;
   margin-top: 30px;
}

.como_jogar .botao_iniciar_ranking a{
   color: #FFF;
   text-decoration: none;
}

.como_jogar .botao_iniciar_ranking .bt_iniciar a {
   display: flex;
   align-items: center;
   gap: 10px;
   color: #FFF;
   text-decoration: none;
}

.como_jogar_botao{
   margin-top: 30px;
}

.como_jogar_botao a{
   background-color: #00a9df;
   font-size: 13px;
   font-family: "Noto Sans", sans-serif;
   font-weight: 400;
   padding: 10px 30px;
   border-radius: 30px;
   color: #FFF;
   text-decoration: none;
}

.como_jogar .logo_safe_mobile {
   display: none;
   margin-top: 100px;
   justify-content: end;
}

@media screen and (max-width: 1300px) {
   .como_jogar .container {
      width: 100%;
      padding: 0 20px;
   }
}

@media screen and (max-width: 1024px) {
   .como_jogar {
      height: auto;
      padding-bottom: 100px;
   }

   .como_jogar .container_conteudo {
      flex-direction: column;
      align-items: center;
      justify-content: center;
   }

   .como_jogar .logos .logo_safe {
      display: none;
   }

   .como_jogar .logo_safe_mobile {
      display: flex;
   }

   .como_jogar .container .textos {
      margin-right: auto;
      margin-top: 40px;
   }
}

@media screen and (max-width: 768px) {
   .como_jogar .botao_iniciar_ranking {
      flex-direction: column;
   }

   .modal_ini_xg{
      margin-top: 250px;
   }

   .ranking .table, .ranking .dataTables_wrapper{
      overflow: auto;
   }

   .como_jogar .logos img{
      width: 100%;
      max-width: 545px;
   }   

   .como_jogar .botao_jogar{
      flex-direction: column;
   }
}

/*** FIM COMO JOGAR ***/

.inicio {
   width: 100%;
   height: 100vh;
   background-image: url('./images/fundo-index.jpg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;

   display: flex; 
   align-items: center;
   justify-content: center;
}

.inicio .conteudo{
   display: flex;
   flex-direction: column;
}

.inicio .conteudo .logos{
   display: flex;
   align-items: center;
   gap: 30px;
}

.inicio .conteudo .traducoes{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin-top: 50px;
}

.inicio .conteudo .traducoes a{
   font-family: "Noto Sans", sans-serif;
   font-size: 16px;
   color: #FFF;
   text-transform: uppercase;
   text-decoration: none;
}


@media screen and (max-width: 768px) {
   .inicio .conteudo .logos{
      flex-direction: column;
      justify-content: center;
   }

   .inicio .conteudo .logos img{
      order: 2;
   }
   .inicio .conteudo .logos img:nth-child(2){
      order: 1;
   }
}

/**** RANKING ****/
.ranking .table,
.ranking .dataTables_wrapper {
   width: 100% !important;
   border-collapse: collapse;
   margin-top: 60px;

   font-family: "Noto Sans", sans-serif;
   font-size: 14px;
}

table.dataTable thead th,
table.dataTable thead td {
   background: #2da9de;
   border-bottom: 1px solid #ffffff !important;
   color: #FFF;
}

.dataTables_filter {
   margin-bottom: 20px;
}

.dataTables_filter label {
   font-family: "Noto Sans", sans-serif;
   font-size: 18px;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   color: #FFF;

   display: flex;
   align-items: center;
   gap: 10px;
}

.dataTables_filter input {
   font-family: "Noto Sans", sans-serif;
   font-size: 18px;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   color: #FFF;
   background-color: transparent !important;
   border: 2px solid #00a9df !important;
   border-radius: 40px !important;
   padding: 5px 15px !important;
   outline: none;
   text-align: left;
}

.dataTables_info {
   font-family: "Noto Sans", sans-serif;
   font-size: 12px;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   color: #FFF !important;
   margin-top: 20px;
}
.dataTables_info a{
   color: #FFF !important;
}


.dataTables_paginate{
   font-family: "Noto Sans", sans-serif;
   font-size: 12px;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   color: #FFF !important;
   margin-top: 20px;
}

.ranking p{
   margin-top: 0px;
}

.modal_ranking .form_unidade{
   max-width: 400px;
   width: 100%;
   position: absolute;
   z-index: 1;
   top: 210px;
   margin-left: -560px;
   left: 50%;
}

@media screen and (max-width: 1300px) {
   .modal_ranking .form_unidade{
      position: initial;
      top: 0;
      margin-left: 0;
      margin-top: 50px;
   }
}


/**** FIM RANKING ****/

.header {
   width: 100%;
   height: 136px;
   background-position: center;
   background-repeat: no-repeat;
}
.header_PT{
   background-image: url('./images/game/header-desktop.jpg');
}
.header_EN{
   background-image: url('./images/game/header-desktop-EN.jpg');
}
.header_ES{
   background-image: url('./images/game/header-desktop-ES.jpg');
}

.game {
   display: flex;
   align-items: center;
   justify-content: center;
   background-image: url('./images/game/fundo_fabrica_02.png');
   background-repeat: repeat-x;
}

.footer {
   width: 100%;
   height: 84px;
   background-image: url('./images/game/rodape.png');
   background-position: center;
   background-repeat: repeat-x;
}

.game-info {
   width: 767px;
   min-height: 797px;
   display: flex;
   justify-content: center;
}

.game-popup {
   width: 767px;
   height: 524px;
   background-image: url('./images/game/BOX_FINAL.png');
   background-position: center;
   background-repeat: no-repeat;
   margin-top: 20px;
}

.game-popup-content {
   padding: 230px 40px 0 40px;
   text-align: center;
}

.game-popup-content a{
   background-color: #00a9df;
   font-size: 13px;
   font-family: "Noto Sans", sans-serif;
   font-weight: 400;
   padding: 10px 30px;
   border-radius: 30px;
   color: #FFF;
   text-decoration: none;
}

.game-popup p {
   font-family: "Noto Sans", sans-serif;
   font-size: 30px;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   color: #fff;
}

.game-popup p strong {
   color: #dddd1f;
}



.movement-container {
   display: flex;
   justify-content: center;
   align-items: center;
   bottom: 420px;
   position: fixed;
   width: 100%;
   height: 30%;
   z-index: 1000;
   touch-action: manipulation;
}

#space-button-container {
   /* position: fixed;
   bottom: 50px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 1000; */
   margin-left: 150px;
}

.movement-buttons {
   align-items: center;
   display: flex;
   flex-direction: column;
   /* bottom: 100px;
   height: 34%;
   left: 0;
   position: fixed;
   width: 100%; */

}



.movement-buttons .row {
   display: flex;
   justify-content: space-between;
   margin-bottom: -3px;
}

.movement-buttons button {
   background: transparent;
   border: 3px solid #FFF;
   border-radius: 5px;
   color: #FFF;
   height: 7vh;
   outline: none;
   padding: 0;

   user-select: none;
   /* Impede a seleção do texto */
   -webkit-user-select: none;
   /* Suporte para Safari */
   -moz-user-select: none;
   /* Suporte para Firefox */
   -ms-user-select: none;
   /* Suporte para IE/Edge */
   cursor: default;
   /* Remove o cursor de texto */

   touch-action: manipulation;
}

.movement-buttons button:active {
   background: radial-gradient(closest-side, rgba(255, 255, 255, 0.25), transparent);
}

.movement-buttons .button-up {
   border-bottom: 0;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
}

.movement-buttons .button-left {
   border-bottom-right-radius: 0;
   border-right: 0;
   border-top-right-radius: 0;
   margin-right: calc(7vh - 6px);
}

.movement-buttons .button-right {
   border-bottom-left-radius: 0;
   border-left: 0;
   border-top-left-radius: 0;
}

.movement-buttons .button-down {
   border-top: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
}

.movement-buttons .material-icons {
   font-size: 7vh;
   margin: -3px;
}

.material-icons {
   user-select: none;
   /* Impede a seleção do texto */
   -webkit-user-select: none;
   /* Suporte para Safari */
   -moz-user-select: none;
   /* Suporte para Firefox */
   -ms-user-select: none;
   /* Suporte para IE/Edge */
   cursor: default;
   /* Remove o cursor de texto */
}



/* Estilizando o botão de espaço */
.button-space {
   width: 18vh;
   background: transparent;
   border: 3px solid #FFF;
   border-radius: 5px;
   color: #FFF;
   height: 8vh;
   outline: none;
   padding: 0;

   user-select: none;
   /* Impede a seleção do texto */
   -webkit-user-select: none;
   /* Suporte para Safari */
   -moz-user-select: none;
   /* Suporte para Firefox */
   -ms-user-select: none;
   /* Suporte para IE/Edge */
   cursor: default;
   /* Remove o cursor de texto */
   touch-action: manipulation;
}

.button-space .material-icons {
   font-size: 8vh;
   margin: -3px;
}

.button-space:active {
   background: radial-gradient(closest-side, rgba(255, 255, 255, 0.25), transparent);
}



@media (orientation: landscape) {
   .movement-container {
      visibility: hidden;
   }

}

.pop_up_end_game{
   width: 628px;
   height: 343px;
   position: absolute;
   top: 150px;
   left: 50%;
   z-index: 1000;
   margin-left: -314px;
   background-image: url('../images/game/BOX_FINAL_MORTE.png');
}

.pop_up_end_game .pop_up_content{
   display: flex;
   height: 343px;
   justify-content: center;
   align-items: flex-end;
   gap: 20px;
}

.pop_up_end_game .pop_up_content .button{
   background-color: #ffb223;
   font-size: 18px;
   font-family: "Noto Sans", sans-serif;
   font-weight: 500;
   padding: 10px 30px;
   border-radius: 8px;
   color: #FFF;
   text-decoration: none;
   margin-bottom: 60px;
}

.ranking .dataTables_wrapper .dataTables_paginate .paginate_button{
   color: #FFF !important;
}

table.dataTable.display tbody tr.even>.sorting_2, 
table.dataTable.order-column.stripe tbody tr.even>.sorting_2, table.dataTable thead .sorting_asc,
table.dataTable.display tbody tr.odd>.sorting_2, table.dataTable.order-column.stripe tbody tr.odd>.sorting_2
{
   display: table-cell !important;
}