@media (min-width: 1600px){

    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{max-width: 1520px!important;}

}



@media (min-width: 1800px){

    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{max-width: 1680px!important;}

}



@font-face {font-family: "MargemBold";src: url("../fonts/MargemRoundedTest-Bold.ttf") format("truetype"),}

@font-face {font-family: "MargemMedium";src: url("../fonts/MargemRoundedTest-Medium.ttf") format("truetype"),}

@font-face {font-family: "MargemRegular";src: url("../fonts/MargemRoundedTest-Regular.ttf") format("truetype"),}





a, p, h1, h2, h3, h4, h5, h6, span, textarea, input, button, body, html, dl, ol, ul{margin-bottom: 0 !important;color: #000;font-family: "MargemRegular"}

h1{font-size: 40px!important;}

a{font-size: 20px!important;}

p, span, textarea, input, button, input, select{font-size: 30px!important;}

#header .header .header-infos .btn-sair{font-size: 20px!important;}

#header .header .header-infos p{font-size: 20px!important;}



:focus{box-shadow: none!important;}

.form-control:focus {box-shadow: none;}

.btn{background-color: transparent!important;}

ol, ul{padding-left: 0!important;}

::marker{display: none;}

li{list-style: none;}

a{text-decoration: none!important;}

.flex{display: flex;}

.between{justify-content: space-between;}

.around{justify-content: space-around;}

.evenly{justify-content: space-evenly;}

.end{justify-content: flex-end;justify-content: end;}

.center{justify-content: center;}

.wrap{flex-wrap: wrap;}

.column{flex-direction: column;}

.on-1799{display: none;}

.on-1599{display: none;}

.on-1399{display: none;}

.on-1199{display: none;}

.on-991{display: none;}

.on-767{display: none;}

.menu-on-767{display: none!important;}

.card-on-767{display: none;}

.on-575{display: none;}

body{background-color: #4B00C3;}



#user-login{background-color: #4B00C3;height: 100vh;align-content: center;text-align: center;text-align: -webkit-center;}

#user-login .user-login{padding-top: 2.5%;padding-bottom: 2.5%;}

#user-login .user-login .user-login-logo{width: 25%;}

#user-login .user-login .user-login-logo img{width: 100%;}

#user-login .user-login .user-login-texto{padding-top: 5%;padding-bottom: 2.5%;}

#user-login .user-login .user-login-texto p{color: #fff;width: 40%;}

#user-login .user-login .user-login-form{width: 45%;}

#user-login .user-login .user-login-form p{text-align: left;font-family: 'MargemMedium';color: #FFA701;padding-bottom: 1.25%;}

#user-login .user-login .user-login-form input{background-color: transparent;border: solid 2px #DAC3FF;border-radius: 10px;color: #fff;}

#user-login .user-login .user-login-form input::placeholder{color: #fff;}

#user-login .user-login .user-login-form p{text-align: left;font-family: 'MargemMedium';color: #FFA701;padding-bottom: 1.25%;}

#user-login .user-login .user-login-form button{padding: 0;margin-left: 3.75%;width: 12.5%;}

#user-login .user-login .user-login-form button img{width: 100%;}



#header{background-color: #ED4C15;position: fixed;z-index: 9999;}

#header .header{padding-top: 1.25%;padding-bottom: 1.25%;}

#header .header .header-logo{width: 30%;}

#header .header .header-logo img{width: 100%;}

#header .header .header-infos{justify-content: end;align-items: center;;width: 60%;}

#header .header .header-infos .btn-sair{color: #fff;border: none;background-color: transparent;font-style: italic;}

#header .header .header-infos a{color: #fff;font-family: "MargemMedium";}

#header .header .header-infos p{color: #fff;font-style: italic;margin-right: 10%;}



.edicao-selector{background-color: #4B00C3;}

.edicao-selector .container{padding-top:10%; padding-bottom: 2.5%;}



.cadastro{background-color: #4B00C3;}

.cadastro .container{padding-top:10%;padding-bottom: 2.5%;}

.cadastro label{padding-top: 25px;font-size: 25px;color: #fff;}

.cadastro input{background-color: transparent;border: solid 2px #DAC3FF;border-radius: 10px;color: #fff;}

.cadastro select{background-color: transparent;border: solid 2px #DAC3FF;border-radius: 10px;color: #fff;}

.cadastro button{background-color: #ED4C15 !important;border-radius: 100px;float: right;border-color: #ED4C15;font-family: "margemBold";}

.cadastro .funcionario{width: 100%;background-color: #7124ED;padding: 1.25% 2.5%;border-radius: 10px;height: max-content;margin-bottom: 2.5%;}

.cadastro .funcionario img{width: 3.75%;}

.cadastro .funcionario .infos p{font-family: "MargemMedium";color: #FFA701;}

.cadastro .funcionario .infos .ee a{color: #fff;font-style: italic;text-decoration: underline !important;margin: 0 5%;}

.cadastro .sc{width: 100%;background-color: #7124ED;padding: 2.5%;border-radius: 10px;height: max-content;text-align: center;text-align: -webkit-center;}

.cadastro .sc p{color: #fff;width: 65%;}

.cadastro .mais{width:100%;text-align: center;text-align: -webkit-center;margin-top: 5%;}

.cadastro .mais img{width: 7.5%;}



#ganhadorModal .modal-dialog{width: 100%;text-align: center;max-width: 100%;padding-top: 2.5%;}

#ganhadorModal .modal-content{background-color: transparent;}

#ganhadorModal .modal-body img{width: 72.5%;}



#successModal .modal-dialog{width: 100%;text-align: center;max-width: 75%;padding-top: 15%;}

#successModal .modal-content{background-color: transparent;border: none;}

#successModal .modal-body img{width: 50%;}



.menu .item{padding-top: 25px;padding-bottom: 25px;}

.menu a{font-size: 40px !important;font-family: 'MargemBold';color: #fff;}

.menu p{font-family: 'MargemBold';color: #fff;padding-top: 10%;padding-bottom: 20%;}

.menu i{font-family: 'MargemBold';color: #fff;}

.menu .item img{width: 7.5%;margin-right: 5%;}



.inicio-infos .inicio-infos-titulo h1{color: #fff;}

.inicio-infos .inicio-infos-titulo h3{color: #fff;padding-top: 2.5%;padding-bottom: 2.5%;}

.inicio-infos .inicio-infos-cards .inicio-infos-card h2{color: #fff;padding-top: 5%;padding-bottom: 2.5%;}

.inicio-infos .inicio-infos-cards .inicio-infos-card .inicio-infos-card-bg{background-color: #7124ED;padding: 5%;border-radius: 10px;}

.inicio-infos .inicio-infos-cards .inicio-infos-card .inicio-infos-card-bg p{color: #fff;padding: 0 0 20px 0;}

.inicio-infos .inicio-infos-cards .inicio-infos-card .inicio-infos-card-bg h3{color: #fff;padding: 10px;border: solid 1px #fff;border-radius: 10px;font-weight: bold;}

.inicio-infos .inicio-infos-cards .inicio-infos-card .inicio-infos-card-bg .row div{justify-content: space-between;display: flex;flex-direction: column;}






.ganhadores{background-color: #fff;padding: 2.5%;border-radius: 10px;height: 60vh;overflow-y: scroll;margin-top: 5%;}

.ganhadores .result{border: solid 1px #DAC3FF;text-align: center;padding: 0.5% 2.5%;}

.ganhadores .titulo{text-align: -webkit-center;margin-bottom: 2.5%;}

.ganhadores .titulo p{text-align: center;background-color: #4B00C3;color: #fff;text-transform: uppercase;border-radius: 50px;padding: 1% 5%;width: max-content;}



#regulamento{background-color:#4B00C3; height:100vh}

#regulamento .regulamento{height:100%;padding-top:10%;padding-bottom:5%;}

#regulamento .regulamento .row{height:100%;}

#regulamento .regulamento .pdf-bg{background-color:#fff;height:100%;border-radius:25px;margin-bottom: 1.25%;}

#regulamento .regulamento .pdf-bg #pdf-container{height:100%;padding:2.5%}

#regulamento .regulamento .pdf-bg #pdf-container iframe{border: none;height:100%}

#regulamento .regulamento .anexos{text-align:center;}

#regulamento .regulamento .anexos a{color: #fff;padding: 0 5%;cursor: pointer;}



#footer{background-color:#4B00C3;padding: 2.5% 0;}

#footer .footer{text-align: center;}

#footer .footer p{font-size: 18px!important;color: #fff;}

#footer .footer a{font-size: 18px!important;color: #fff;font-style: italic;text-decoration: underline!important;}





@media (max-width: 1799.5px) {

    .on-1799 {display: block;}

    .off-1799 {display: none;}

    h1{font-size: 36px!important;}

    a{font-size: 18px!important;}

    p, span, textarea, input, button, input, select{font-size: 27px!important;}

    #header .header .header-infos .btn-sair{font-size: 18px!important;}

    #header .header .header-infos p{font-size: 18px!important;}

    .cadastro label{font-size: 23px;}

    .menu a{font-size: 36px !important;}

    #footer .footer p{font-size: 16px!important;}

    #footer .footer a{font-size: 16px!important;}

}



@media (max-width: 1599.5px) {

    .on-1599 {display: block;}

    .off-1599 {display: none;}

    h1{font-size: 32px!important;}

    a{font-size: 16px!important;}

    p, span, textarea, input, button, input, select{font-size: 24px!important;}

    #header .header .header-infos .btn-sair{font-size: 16px!important;}

    #header .header .header-infos p{font-size: 16px!important;}

    .cadastro label{font-size: 21px;}

    .menu a{font-size: 32px !important;}

    #footer .footer p{font-size: 14px!important;}

    #footer .footer a{font-size: 14px!important;}



    #user-login .user-login .user-login-texto p{width: 45%;}

    #user-login .user-login .user-login-form {width: 50%;}

    #user-login .user-login .user-login-logo {width: 27.5%;}

    #header .header .header-infos {width: 52.5%;}

    .cadastro .sc p{width: 70%;}

}



@media (max-width: 1399.5px) {

    .on-1399 {display: block;}

    .off-1399 {display: none;}

    h1{font-size: 29px!important;}

    a{font-size: 14px!important;}

    p, span, textarea, input, button, input, select{font-size: 22px!important;}

    #header .header .header-infos .btn-sair{font-size: 14px!important;}

    #header .header .header-infos p{font-size: 14px!important;}

    .cadastro label{font-size: 19px;}

    .menu a{font-size: 29px !important;}

    #footer .footer p{font-size: 13px!important;}

    #footer .footer a{font-size: 13px!important;}



    #user-login .user-login .user-login-texto p{width: 50%;}

    #user-login .user-login .user-login-form {width: 55%;}

    #user-login .user-login .user-login-logo {width: 30%;}

    #header .header .header-infos {width: 55%;}

    .cadastro .sc p{width: 75%;}

}



@media (max-width: 1199.5px) {

    .on-1199 {display: block;}

    .off-1199 {display: none;}

    h1{font-size: 26px!important;}

    a{font-size: 13px!important;}

    p, span, textarea, input, button, input, select{font-size: 20px!important;}

    #header .header .header-infos .btn-sair{font-size: 13px!important;}

    #header .header .header-infos p{font-size: 13px!important;}

    .cadastro label{font-size: 17px;}

    .menu a{font-size: 26px !important;}

    #footer .footer p{font-size: 12px!important;}

    #footer .footer a{font-size: 12px!important;}



    #user-login .user-login .user-login-texto p{width: 55%;}

    #user-login .user-login .user-login-form {width: 60%;}

    #user-login .user-login .user-login-logo {width: 32.5%;}

    #header .header .header-infos {width: 57.5%;}

    .cadastro .sc p{width: 85%;}

}



@media(max-width:991.5px){

    .on-991{display: block;}

    .off-991{display: none;}

    h1{font-size: 23px!important;}

    a{font-size: 12px!important;}

    p, span, textarea, input, button, input, select{font-size: 18px!important;}

    #header .header .header-infos .btn-sair{font-size: 12px!important;}

    #header .header .header-infos p{font-size: 12px!important;}

    .cadastro label{font-size: 15px;}

    .menu a{font-size: 23px !important;}

    #footer .footer p{font-size: 11px!important;}

    #footer .footer a{font-size: 11px!important;}



    #user-login .user-login .user-login-texto p{width: 60%;}

    #user-login .user-login .user-login-form {width: 65%;}

    #user-login .user-login .user-login-logo {width: 35%;}

    #header .header .header-infos {width: 60%;}

    .cadastro .sc p{width: 95%;}

} 



@media(max-width:767.5px){

    .on-767{display: block;}

    .card-on-767{display: flex;}

    .off-767{display: none;}
    .menu-off-767{display: none!important;}

    h1{font-size: 28px!important;}

    a{font-size: 20px!important;}

    p, span, textarea, input, button, input, select{font-size: 20px!important;}

    #header .header .header-infos .btn-sair{font-size: 20px!important;}

    #header .header .header-infos p{font-size: 20px!important;}

    .cadastro label{font-size: 20px;}

    .menu a{font-size: 26px !important;}

    #footer .footer p{font-size: 14px!important;}

    #footer .footer a{font-size: 14px!important;}



    #user-login .user-login .user-login-logo{width: 80%;}

    #user-login .user-login .user-login-texto p{width: 80%;}

    #user-login .user-login .user-login-form{width: 80%;}

    #user-login .user-login .user-login-texto{padding-top: 10%;padding-bottom: 5%;}



    .edicao-selector .container{padding-top:17.5%; }

    .cadastro .container{padding-top:15%; }



    .cadastro button{float: none;}

    .cadastro .div-btn{text-align: center;text-align: -webkit-center;}

    .cadastro .funcionario img{width: 10%;}



    .mobile-menu{display: block;position: fixed;width: 100%;background: #ED4C15;z-index: 999;height: 100vh;top: 0;right: 0;transform: translateX(100%);transition: transform 1s ease-in-out;}

    .mobile-menu.active{transform: translateX(0);}

    .menu-items{list-style: none;padding: 0;margin: 0;}

    .menu-items li a{display: block;text-decoration: none;color: #fff;padding-bottom: 2.5%;transition: all .3s ease-in-out;padding-top: 2.5%;border-bottom: solid;}

    body.menu-open{overflow: hidden;position: fixed;width: 100%;height: 100%;}



    #mobileMenu .container{padding-bottom: 2.5%;height: 100%;padding-top: 15%;}



    #header .header .header-infos .menu-toggle{color: #fff;font-size: 30px;cursor: pointer;transition: all .3s ease-in-out;float: right;}

    #header .header .header-infos .header-menu{align-content: center;}

    #header .header .header-logo{width: 40%;}

    #header .header .header-infos {width: 60%;}


    #mobileMenu .itens{height: 80vh;}

    .mobile-menu .infos-menu-mobile p{color: #fff;border: none;background-color: transparent;font-style: italic;}

    .mobile-menu .infos-menu-mobile button{color: #fff;border: none;background-color: transparent;font-style: italic;}

}



@media(max-width:575.5px){

    .on-575{display: block;}

    .off-575{display: none;}

    h1{font-size: 24px!important;}

    a{font-size: 18px!important;}

    p, span, textarea, input, button, input, select{font-size: 18px!important;}

    #header .header .header-logo{width: 30%;}

    #header .header .header-infos {width: 70%;}

    #header .header .header-infos .btn-sair{font-size: 12px!important;}

    #header .header .header-infos p{font-size: 12px!important;}

    .cadastro label{font-size: 18px;}

    .menu a{font-size: 24px !important;}

    #footer .footer p{font-size: 15px!important;}

    #footer .footer a{font-size: 15px!important;}



    #user-login .user-login .user-login-logo{width: 100%;}

    #user-login .user-login .user-login-texto p{width: 100%;}

    #user-login .user-login .user-login-form{width: 100%;}

    #user-login .user-login .user-login-texto{padding-top: 20%;padding-bottom: 10%;}




    #mobileMenu .container{padding-bottom: 5%;height: 100%;padding-top: 15%;}



    .cadastro .funcionario{width: 100%;margin-top: 10%;}



    #regulamento .regulamento {padding-top: 17.5%;}

    

}

/* ===== COPAS (lista de edições + ganhadores inline) ===== */

.ganhadores-copas .mp{
  text-align: left;
  align-self: center;
}

.ganhadores-copas .mp img{
  width: 220px;
  max-width: 100%;
  margin-bottom: 10px;
}

.titulo-paginas{
  color: #fff;
  font-family: "MargemBold";
  margin-bottom: 10px !important;
}

.ano-copa{
  color: #fff;
  font-family: "MargemBold";
  margin-top: 25px;
  margin-bottom: 5px !important;
}

/* Card das edições (faixa roxa) */
.ganhadores-copas .mp .card-edicoes{
  width: 100%;
  margin: 0 0 25px;
  border-radius: 10px;
  padding: 1.25%;
  background-color: #7124ED;
  position: relative;
}

.ganhadores-copas .mp .card-edicoes .left{
  text-align: left;
}

.ganhadores-copas .mp .card-edicoes .left p{
  color: #FFA701;
  font-weight: 900;
}

.ganhadores-copas .mp .card-edicoes .left span{
  color: #fff;
  font-weight: 100;
}

/* Lado direito: regulamento + ganhadores + status */
.ganhadores-copas .mp .card-edicoes .right{
    text-align: right;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Link "Ver regulamento" */
.ganhadores-copas .mp .card-edicoes .right a{
  color: #fff;
  text-decoration: underline !important;
  font-weight: 100;
}

/* Botão GANHADORES (pill laranja) */
.ganhadores-copas .mp .card-edicoes .right a.btn-ver-ganhadores{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ED4C15;
  color: #fff !important;
  border-radius: 999px;
  padding: 6px 16px;
  text-decoration: none !important;
  text-transform: uppercase;
  font-weight: 800;
}

/* Status ATIVO / ENCERRADO */
.ganhadores-copas .mp .card-edicoes .right h4.status-edicao{
  margin: 0;
  font-size: 18px !important;
  font-weight: 800;
  text-transform: uppercase;
  padding: 6px 16px 6px 28px;
  border-radius: 10px;
  background: rgba(255,255,255,0.95);
  color: #4B00C3;
  position: relative;
}

.ganhadores-copas .mp .card-edicoes .right h4.status-edicao::before{
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: #21D875; /* padrão: ATIVO (verde) */
}

.ganhadores-copas .mp .card-edicoes .right h4.status-edicao.status-encerrado::before{
  background: #ED4C15; /* ENCERRADO (laranja) */
}

/* ===== Ganhadores inline (expansão dentro do card) ===== */

.ganhadores-inline{
  width: 100%;
    margin-top: 25px;
}

.ganhadores-inline-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.ganhadores-inline-title{
  margin: 0;
  color: #fff;
  font-size: 20px !important;
  font-weight: 800;
}

.btn-fechar-inline{
  background-color: #ED4C15;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px !important;
  font-weight: 800;
}

.ganhadores-inline-table-header{
      display: flex;
    margin-bottom: 10px;
}

.ganhadores-inline-table-header > div{
    color: #FFA701;
    text-transform: uppercase;
    font-weight: 900;
    text-align: center;
}

.ganhadores-inline-table-header .col-razao{text-align: left;}

/* Área scrollável de resultados */
.ganhadores-inline-results{
  max-height: 350px;
  overflow-y: auto;
}

.ganhadores-inline-results .result{
  border: none;
  margin: 12.5px 0;
}

.ganhadores-inline-results .result-center{
  text-align: center;
}

.ganhadores-inline-results .row{
  border-bottom: 1px solid rgba(255,255,255,0.50);
  margin: 0;
}

.ganhadores-inline-results p{
  color: #fff;
  font-size: 18px !important;
}

/* 1. Define a largura da barra de rolagem */
.ganhadores-inline-results::-webkit-scrollbar {
  width: 6px;               /* Largura da barra vertical */
  height: 6px;              /* Altura da barra horizontal, se houver */
}

/* 2. Estiliza o fundo da barra (track) */
.ganhadores-inline-results::-webkit-scrollbar-track {
  background: transparent;  /* Mantém o fundo transparente para mostrar a cor da div */
}

/* 3. Estiliza o "pegador" da barra (thumb) */
.ganhadores-inline-results::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.5); /* Cor branca com transparência */
  border-radius: 10px;       /* Deixa as extremidades arredondadas */
}

/* 4. Efeito ao passar o mouse (opcional) */
.ganhadores-inline-results::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.item a{color: #fff;}

/* Responsivo */
@media (max-width: 767.5px){
  .ganhadores-copas .mp .card-edicoes{
    width: 100%;
    padding: 16px;
  }

  .ganhadores-inline-table-header{
    grid-template-columns: 1fr 90px 70px;
  }

  .ganhadores-inline-results{
    max-height: 240px;
  }

  .ganhadores-copas .mp .card-edicoes .right h4.status-edicao{
    font-size: 15px!important;
  }

  .ganhadores-copas .mp .card-edicoes .right{width: 100%;}
  .ganhadores-copas .mp .card-edicoes .left{width: 100%;}
}
/* Responsivo */
@media (max-width: 575.5px){

  .ganhadores-copas .mp .card-edicoes .right h4.status-edicao{
    font-size: 12px!important;
  }
}








@media (max-width: 767.5px) {


/* Container do Menu Fixo */
.fixed-bottom-menu {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    display: flex!important;
    flex-direction: column;
    left: 0;
    padding: 0;
    
}

/* Barra Laranja do Ganhador */
.menu-ganhador-bar {
    background-color: #ED4C15;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    text-decoration: none !important;
    position: relative;
    border-radius: 10px;
}

.menu-ganhador-bar img {
    width: 25px;
    margin-right: 10px;
}

.menu-ganhador-bar span {
    color: #fff;
    font-family: 'MargemBold';
    font-size: 18px !important;
}

.menu-principal-bottom {
    padding: 0;
    background-color: #4B00C3;
}

.menu-item-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    color: #fff !important;
    padding: 5px;
    transition: all 0.3s;
    padding: 10px 0 20px 0;
}

.menu-item-bottom img {
    width: 28px;
    height: 28px;
    margin-bottom: 7.5%;
}

.menu-item-bottom span {
    font-size: 12px !important;
    font-family: 'MargemBold';
    text-align: center;
    color: #fff;
}

/* Item Ativo (Estilo Pill Roxo mais claro) */
.menu-item-bottom.active {
    background: #7124ED;
    border-radius: 10px;
    margin: 0;
}

/* Ajuste de padding no body para o conteúdo não sumir atrás do menu */

    .cadastro .container {
        padding-bottom: 160px !important; /* Aumentado para acomodar as duas barras */
    }
}