/* Estilo do modal */
.modal {
    display: none; /* Esconde o modal por padrão */
    position: fixed; /* Fica fixo na tela */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fundo escuro semi-transparente */
    z-index: 100000000000; /* Garante que o modal fique acima de outros elementos */
}


/* Conteúdo do modal */
.modal-conteudo {
    overflow-x: hidden;
    background-color: #fff;
    margin: 3% auto;
    border: 1px solid #888;
    width: 80%;
    height: 80%;
    max-height: 800px;
    max-width: 1360px; /* Largura máxima do modal */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
}
.modal-mobile{
    overflow-x:hidden;
    background-color: black;
    color:white;
    margin-right:auto;
    width:80%;
    padding:30px;
    height:100vh;
    max-width:400px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position:relative
}

.modal-abrir-conta{
    padding-top:95px;
    font-size: 12px !important;
    overflow:hidden;
    width:23%;
    margin:0;
    margin-left:auto;
    height:100vh;
    position:relative;
}
.modal-abrir-conta img{
    max-width: 180px;
    margin-top:30px;
}

.modal-abrir-conta .modal-wraper{
    color:black;
    padding:40px;
    height:100vh;
    background:white;
}
.modal-abrir-conta .wraper-text *{
    width:100%;
    text-align: start;
}
.modal-abrir-conta .wraper-text .content p{
 line-height: 24px;;
}
.modal-abrir-conta .wraper-text .content a > *{
    margin-bottom:20px;    
}
.modal-abrir-conta .wraper-text h3{
    font-weight: 400;
}
.modal-abrir-conta .wraper-text h3 b{
    font-weight: 700;
}
.modal-abrir-conta .wraper-text a *,.modal-abrir-conta .wraper-text a *:hover,.modal-abrir-conta .wraper-text a *:active {
    color:black;
}
.modal-abrir-conta .wraper-text .content {
    align-items: end !important;
    flex-direction:column !important;
    gap:25px;
    max-width:250px;
}
.modal-abrir-conta .fechar {
    color: #aaa;
    position:relative!important;
    top:0;
    right:0;
    text-align: end;;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
.modal-abrir-conta h3{
    padding-top:40px !important;
    line-height: 1.9rem !important;
    font-size: 2rem;
}
.modal-mobile {
    padding:30px;
}
.modal-mobile nav li {
    padding:30px 0;
    font-size:1.4rem !important;
    font-weight: 200;
}
/* Botão de fechar */
.fechar {
    color: #aaa;
    right:5%;
    position:absolute;
    top:5%;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.fechar:hover {
    color: #404040;
}

.modal-conteudo .content, .modal-conteudo .content-header, .modal-conteudo .content-footer {

    padding:80px 
}



.cards-jogos article.proximo-jogo .infos{
    display:flex;
    gap:20px;
    margin:10px 0;
    justify-content: center;
    align-items: center;;    
}
.cards-jogos article.proximo-jogo .times{
    display:flex;
    max-width:600px;
    margin:0 auto;
    gap:20px;
    justify-content: center;
    align-items: center;
    border-radius:12px;
    padding:10px;
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.35);
        
}
.times img{
    max-width:50px;
}

.cards-jogos.mural{
    display:grid;
    grid-template-columns: repeat(2, 3fr)!important;
    max-width:840px;
    gap:6%;
    margin:0 auto;

}
.cards-jogos  article .times > div{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    height: 104px;
}
.cards-jogos  article.calendario .infos{
    display:flex;
    gap:1%;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;    
}
.infos p {
    font-size:14px !important;

}

.cards-jogos article{
    padding:20px 10px;
}
.cards-jogos article.calendario{
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.35);
    margin:10px auto;
    border-radius:12px;
}
.cards-jogos article.calendario .infos > div{
    width:48%;
}
.cards-jogos article.calendario .times{
    display:flex;
    flex-direction:row;
    margin:0 auto;
    gap:20px;
    justify-content: center;
    align-items: center;
    border-radius:12px;
    padding:10px;
    ;
}
.fechar{
    z-index:10000000
}
.times img{
    max-width:50px;
}


.modal .content, .modal-conteudo .content-footer {
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.modal-conteudo .content-footer {
    flex-direction:column
}
.modal-conteudo .content-footer .app-buttons{
    margin-top:12px;
    margin-left: 0;
}
.proximo-jogo .times > div{
    display:flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: end;
    gap:5px;
}
.proximo-jogo .times > div.left{
    display:flex;
    flex-direction: row-reverse !important;
    align-items: center;
    justify-content: end;
}

.modal#video .modal-conteudo {
  overflow: hidden;
  background-color: #fff;
  margin: 10% auto;
  border: 1px solid #888;
  width: 80%;
  height: auto;
  max-height: 800px;
  max-width: 679.3px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative;
}