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

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: 'Roboto', sans-serif;
    scroll-behavior: smooth;
}

.div-top {
    background-color: 181818;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.titulo-h1 {
    font-size: 20px;
    font-width: bold;
    margin-top: 30px;
    margin-bottom: 5px;
    margin-left: 210px;
    margin-right: 28px;
    color: #787878;
}

.separator {
    width: 80%;
    height: 3px;
    margin: 50px auto;
    border: none;
    background: linear-gradient(45deg,
        #009739 33.33%,
        #c60c30 33.33%, #c60c30 66.66%,
        #ffcc29 66.66%
    );
}

/* INICIO NAV PUBLICA */
.div-top-publica {
    top: 0;
    background-color: 181818;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.div-top-publica titulo-h1 {
    font-size: 20px;
    font-width: bold;
    margin-top: 30px;
    margin-bottom: 5px;
    margin-left: 210px;
    margin-right: 28px;
    color: #787878;
}

.div-contato-publica {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
    margin-right: 40px;
    gap: 20px;
}

.custon-icon-contato {
    font-size: 30px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
}

.custon-icon-contato-belt:hover,
.custon-icon-contato:hover {
    transform: scale(1.2);
}

.conteirner-nav-publica {
    background: linear-gradient(45deg,
        #00913e 33.33%,
        #d9241d 33.33%, #c60c30 66.66%,
        #faf201 66.66%
    );
    height: 70px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    position: fixed;
    top: 70px;
}

.nav-list-publica {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin-right: 20px;
}

.nav-list-publica a {
    color: white;
    padding: 20px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}


.nav-list-publica a:hover{
    color: #262626;
}
/* FIM NAV PUBLICA */

/* INICIO NAV ADMINISTRACAO */
.conteirner-nav-administracao {
    background: linear-gradient(45deg, 
        #00913e 33.33%,
        #d9241d 33.33%, #c60c30 66.66%,
        #faf201 66.66%
    );
    height: 70px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 0;
    z-index: 10;
}

.nav-list-administracao {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    background-color: #009739;
    border-radius: 5px;
    width: 50px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.menu-toggle:hover {
    background-color: #006927;
}

.nav-list-administracao a {
    color: white;
    padding: 20px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.nav-list-administracao a:hover{
    color: #262626;
}

.img-nav-logo {
    margin-left: 28px;
    margin-bottom: 0;
    padding: 0;
    width: 160px;
    height: auto;
    transition: margin-top 0.3s ease;
}

.logo-move-down {
    margin-top: 110px;
}

.custom-btn-perfil {
    width: 60px;
    background-color: #00c8ff;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.custom-btn-perfil:hover {
    background-color: #006aff;
}

.custom-btn-sair{
    width: 60px;
    background-color: #00c8ff;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 28px;
    margin-left: 28px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.custom-btn-sair:hover {
    background-color: #006aff;
}
/* FIM NAV ADMINISTRACAO */

/* INICIO INDEX */
.slideshow-container {
    position: relative;
    max-width: 100%;
    margin: auto;
}

.slide {
    margin-top: 30px;
    display: none;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

img {
    width: 100%;
    height: auto;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 12px;
    color: white;
    font-weight: bold;
    font-size: 24px;
    transition: background-color 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
}

.active {
    display: block;
    opacity: 1;
}

.separator-head {
    width: 10%;
    height: 3px;
    margin: 0 auto;
    border: none;
    background: linear-gradient(45deg,
        green 33.33%,
        #c60c30 33.33%, #c60c30 66.66%,
        #ffcc29 66.66%
    );
}

.conteiner-lema {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 50px;
    margin-top: 50px;
}

.conteiner-lema img {
    width: 27%;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}

.header-section {
    background: rgb(3,161,0);
    color: white;
    padding: 40px 10px;
    text-align: center;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    position: relative;
    margin-top: 70px;
}

.header-section::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 5px;
    background: linear-gradient(45deg,
        green 33.33%,
        #c60c30 33.33%, #c60c30 66.66%,
        #ffcc29 66.66%
    );
}

.header-title {
    font-size: 3em;
    font-weight: bold;
    font-variant: small-caps;
    text-transform: uppercase;
    margin: 0;
    margin-top: 30px;
    letter-spacing: 3px;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
}

.section-text-sub, .section-list {
    font-size: 1.4em;
    line-height: 1.6;
    margin: 10px 0;
    margin-right: 20px;
    margin-left: 20px;
}

.conteiner-section-index {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
}

.content-section {
    padding: 40px 20px;
    margin: 20px auto;
    max-width: 800px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-left: 30px;
    margin-right: 30px;
}

.section-title {
    font-size: 2em;
    color: #333;
    font-weight: bold;
}

.section-title-sub {
    font-size: 1.5em;
    color: #333;
    margin-top: 20px;
}

.section-text, .section-list {
    font-size: 1.2em;
    line-height: 1.6;
    margin: 10px 0;
}

.section-list li {
    margin-left: 20px;
}

.inspirational-section {
    background-color: #181818;
    color: white;
    padding: 30px;
    margin-top: 50px;
    text-align: center;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inspirational-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 5px;
    background: linear-gradient(45deg,
        green 33.33%,
        #c60c30 33.33%, #c60c30 66.66%,
        #ffcc29 66.66%
    );
    z-index: 1;
}

.div-inspirational-section {
    width: 65%;
}

.inspirational-section img {
    position: absolute;
    right: -20px;
    width: 270px;
    height: auto;
    opacity: 0.6;
}

.inspirational-section h2 {
    font-size: 2.5em;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 2px;
    color: #ffcc29;
    margin: 0;
}

.inspirational-section p {
    font-size: 1.3em;
    margin-bottom: 30px;
    line-height: 1.6;
    margin-top: 20px;
}

.custom-btn-filiar {
    width: 220px;
    background-color: #c60c30;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.custom-btn-filiar:hover {
    background-color: #ffcc29;
    color: black;
}

.conteiner-btns {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 150px;

}

.conteiner-btns img {
    width: 300px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
    margin-top: 20px;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}

.conteiner-btns img:hover {
    transform: scale(1.1);
}

.div-btns {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

.div-btns h2 {
    text-align: center;
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

.separator-btns {
    width: 100%;
    height: 2px;
    margin: 0;
    border: none;
    background: linear-gradient(45deg,
        #009739 33.33%,
        #c60c30 33.33%, #c60c30 66.66%,
        #ffcc29 66.66%
    );
}

.div-parceiros {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 50px;
}

.div-parceiros h2 {
    text-align: center;
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

.separator-parceiros {
    width: 80%;
    height: 2px;
    margin: 0;
    margin-bottom: 30px;
    border: none;
    background: linear-gradient(45deg,
        #009739 33.33%,
        #c60c30 33.33%, #c60c30 66.66%,
        #ffcc29 66.66%
    );
}

.ciam-section {
    background-color: #181818;
    padding: 20px;
    color: white;
    text-align: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    margin-top: 50px;
    width: 100%;
}

.div-ciam-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ciam-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: auto;
}

.ciam-logo {
    max-width: 250px;
    border-radius: 8px;
}

.ciam-content {
    max-width: 900px;
    text-align: left;
    margin-left: 50px;
}

.ciam-content h2 {
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 2px;
    color: #ffcc29;
    margin: 0;
}

.ciam-content p {
    font-size: 1.1em;
    margin-bottom: 30px;
    line-height: 1.6;
    margin-top: 20px;
}

.ciam-content strong {
    color: #ffcc00;
}

.wrapper-brasil {
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
}

.conteiner-brasil {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 120%;
    gap: 250px;
    margin-top: 10px;
    margin-bottom: 10px;
    animation: autoRun 13.5s linear infinite;
}

@keyframes autoRun {
    from {
        right: 100%;
    }
    to {
        right: -100%;
    }
}

.conteiner-brasil-img {
    width: 90px;
    height: auto;
}

.img-conselho {
    width: 80px;
    height: auto;
}

.conteiner-localiza {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin-top: 10px;
    padding: 30px;
    gap: 200px;
    background-color: #f0f0f0;
}

.div-maps {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

.div-maps h2 {
    text-align: center;
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

.separator-maps {
    width: 100%;
    height: 2px;
    margin: 0;
    margin-bottom: 20px;
    border: none;
    background: linear-gradient(45deg,
        #009739 33.33%,
        #c60c30 33.33%, #c60c30 66.66%,
        #ffcc29 66.66%
    );
}

.div-contatos h2 {
    text-align: left;
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

.div-contato-publica-index {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: 30px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.custon-icon-contato-index {
    font-size: 34px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
}

.custon-icon-contato-index:hover {
    transform: scale(1.2);
}

.div-cnpj {
    margin: 0;
}

.div-cnpj h2 {
    font-size: 18px;
    font-width: bold;
    margin: 0;
}

.div-cnpj p {
    margin: 0;
}

.div-img-contatos {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 20px;
}

.img-contato-logo {
    padding: 0;
    width: 190px;
    height: auto;
}
/* FIM INDEX */

/* INICIO FILIE */
.div-img-filie {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 70px;
}

.conteiner-formulario {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.div-formulario {
    margin-top: 50px;
    margin-left: 20px;
    margin-right: 20px;
    gap: 120px;
    display: flex;
    justify-content: center;
}

.div-form {
    width: 100%;
}

.separator-form {
    width: 100%;
    height: 2px;
    margin: 0;
    border: none;
    background: linear-gradient(45deg,
    #009739 33.33%,
    #c60c30 33.33%, #c60c30 66.66%,
    #ffcc29 66.66%
    );
}

.div-formulario h2 {
    text-align: left;
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

.div-formulario p {
    margin: 0;
    margin-top: 10px;
}

.div-filie-input {
    width: 100%;
}

.custom-input-filie-nome {
    width: 400px;
    font-size: 14px;
    border: 1px solid #aaa;
}

.custom-input-filie-telefone {
    width: 200px;
    font-size: 14px;
    border: 1px solid #aaa;
}

.custom-input-filie-text-area {
    width: 400px !important;
    height: 150px !important;
    font-size: 14px;
    border: 1px solid #aaa;
}

.custom-input-filie-upload {
    width: 400px;
    display: flex;
    border: 1px solid #aaa;
    justify-content: center;
    align-items: center;
}

.div-btn-filie {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 50px;
}

.custom-btn-filie-enviar {
    width: 94px;
    height: 30px;
    background-color: #00c8ff;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.custom-btn-filie-enviar:hover {
    background-color: #006aff;
}

.img-banner-pe {
    padding: 0;
    width: 400px;
    height: auto;
}
/* FIM FILIE */

/* INICIO REGISTRO BLACK BELT */
.fundo-black-belts {
background-color: #000;
    background: black url('/images/fundo.png') center/cover no-repeat;
}

.container-black {
    display: flex;
}

.div-img-fundo-black {
    display: none;
}

.separator-faixa {
    width: 6px;
    background-color: black;
    margin-left: 60px;
    margin-right: 30px;
    background: linear-gradient(45deg,
        #009739 33.33%,
        #c60c30 33.33%, #c60c30 66.66%,
        #ffcc29 66.66%
    );
}

.separator-faixa2 {
    width: 6px;
    background-color: black;
    margin-left: 30px;
    background: linear-gradient(45deg,
        #009739 33.33%,
        #c60c30 33.33%, #c60c30 66.66%,
        #ffcc29 66.66%
    );
}

.div-registro-faixa {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg,
        #009739 33.33%,
        #c60c30 33.33%, #c60c30 66.66%,
        #ffcc29 66.66%
    );
    width: 9rem;
    max-width: 9rem;
    min-width: 9rem;
    box-sizing: border-box;
}

.info-faixa-div {
    display: flex;
    flex-direction: column;
}

.info-faixa-h {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.registro-faixa-img-logo {
    width: 250px;
    height: auto;
    margin-bottom: 50px;
    z-index: 10;
}

.info-faixa-h h1 {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    color: black;
    margin: 0;
    padding: 0;
    margin-bottom: 30px;
    font-size: 46px;
    font-family: "Reggae One", sans-serif;
    font-weight: bold;

}

.div-black-belt-registro {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.conteiner-black-belt {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-top: 70px;
}

.conteiner-black-belt ul {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    list-style: none;
    padding: 0;
    margin-left: auto;
    margin-right: 150px;
    gap: 30px;
    flex-wrap: wrap;
}

.conteiner-black-belt li {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 calc(10% - 80px);
    max-width: calc(10% - 80px);
    box-sizing: border-box;
    min-width: 200px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1.0s ease-in-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.img-black-belt {
    width: 130px;
    height: 150px;
    object-fit: cover;
    border: 5px solid black;
    padding: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
}

.registro-black-belts {
    color: white;
    font-weight: bold;
}

.span-black-belt {
    font-size: 18px !important;
    font-weight: bold;
    text-align: center;
    color: white; /* Cor dourada para destaque */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    display: block;
    margin-top: 5px;
}

.span-black-belt-nome {
    font-size: 12px;
    margin-top: 5px;
}
/* INICIO REGISTRO BLACK BELT */

/* PAGINATION BLACK BELTS */
.pagination-black-belts {
    display: flex;
    justify-content: center;
    margin-right: 100px;
    margin: 10px;
}

.pagination-black-belts ul {
    list-style: none;
    display: flex;
    gap: 5px;
}

.pagination-black-belts li {
    margin: 0;
}

.pagination-black-belts a {
    padding: 4px 10px;
    background-color: black;
    color: white;
    border: none;
    border-radius: 5px;
    text-decoration: none;
}

.pagination-black-belts a:hover {
    background-color: red;
}

.pagination-black-belts .active a {
    background-color: red;
    cursor: default;
}

.pagination-black-belts li a {
    cursor: pointer;
}

.container-faixas {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.div-faixa-preta {
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;
    margin-top: 20px;
}

.faixa-preta-frase {
    background: black;
    color: white;
    padding: 5px 20px;
    font-size: 28px;
    font-style: italic;
    font-family: "Reggae One", sans-serif;
    border-radius: 5px;
    display: inline-block;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
    border-left: 15px solid red;
    border-right: 15px solid red;
}

.texto-preto {
    color: white;
}

/* PAGINATION BLACK BELTS */
/* FIM CONTEUDO */

/* LOGIN ADMNISTRATIVA */
#loginAdmin {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw; /* Garante que ocupe toda a largura da tela */
    height: 100vh; /* Garante que ocupe toda a altura da tela */
}

.conteiner-login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 20px;
}

.div-login-inputs {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.img-login-logo {
    padding: 0;
    width: 300px;
    height: auto;
}

.div-login-btn {
    display: flex;
    gap: 15px;
}

.custom-btn-cadastrar {
    width: 94px;
    background-color: #00c8ff;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.custom-btn-cadastrar:hover {
    background-color: #006aff;
}

.custom-btn-recuperar {
    width: 98px;
    background-color: #00c8ff;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.custom-btn-recuperar:hover {
    background-color: #006aff;
}

.custom-btn-entrar {
    width: 70px;
    background-color: #00c8ff;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.custom-btn-entrar:hover {
    background-color: #006aff;
}
/* LOGIN ADMNISTRATIVA */

/* MODAL CRIAR CONTA */
.modal-criar-conta {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-criar-conta-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    width: 50%;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.close-criar-conta {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-criar-conta:hover {
    color: #000;
}

.conteiner-criar-conta-inputs {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 20px;
    gap: 20px;
}

.div-criar-conta-inputs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.div-criar-conta-inputs2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;btn-cadastrar
}

.div-criar-conta-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 100px;
    margin-top: 20px;
}
/* MODAL CRIAR CONTA */

/* MODAL RECUPERAR CONTA */
.modal-recuperar-conta {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-recuperar-conta-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    max-width: 400px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.close-recuperar-conta {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-recuperar-conta:hover {
    color: #000;
}

.conteiner-recuperar-conta-inputs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 20px;
    gap: 20px;
}

.btn-recuperar-senha-salvar {
    border: none;
    border-radius: 7px;
    font-size: 14px;
    font-weight: bold;
    width: 95px;
    height: 30px;
    color: white;
    background-color: #00c8ff;
    cursor: pointer;
    text-align: center; 
    line-height: 30px; 
}


.btn-recuperar-senha-salvar:hover {
    background-color: #006aff;
}
/* MODAL RECUPERAR CONTA */

/* MODAL RECUPERAR SENHA PAGINA */
#recuperarSenhaForm {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.conteiner-recuperar-conta-pagina {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 20px;
}

/* MODAL RECUPERAR SENHA PAGINA */

/* MODAL EDITAR CONTA */
.modal-editar-conta {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-editar-conta-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    width: 50%;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.close-editar-conta {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-editar-conta:hover {
    color: #000;
}

.custom-btn-salvar-conta {
    width: 70px;
    height: 30px;
    background-color: #00c8ff;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 20px;
}

.custom-btn-salvar-conta:hover {
    background-color: #006aff;
}

.conteiner-inputs-editar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 20px;
}

.div-inputs-editar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.custom-input-editar {
    width: 250px;
    font-size: 14px;
    border: 1px solid #aaa;
}

.custom-input-editar-registro {
    width: 120px;
    font-size: 14px;
    border: 1px solid #aaa;
}

.ant-input-editar::placeholder {
    color: #4b4b4b !important;
}

/* MODAL SENHA CONTA */
.modal-senha-conta {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-senha-conta-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    width: 50%;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.close-senha-conta {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-senha-conta:hover {
    color: #000;
}

.modal-senha-conta h2 {
    margin-bottom: 20px;
}

.div-senha-conta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.custom-input {
    width: 200px;
    font-size: 14px;
    border: 1px solid #aaa;
}

.ant-input::placeholder {
    color: #4b4b4b !important;
}

/* MODAL SENHA CONTA */
/* MODAL EDITAR CONTA */

/* PAGINA INICIAL ADMINISTRATIVA */

.conteiner-info-atencao {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    margin-top: 100px;
}

.img-administracao-info {
    margin-left: 28px;
    padding: 0;
    width: 360px;
    height: auto;
    margin-top: 10px;
}

.div-info-atencao {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 40%;
    margin-right: 28px;
    gap: 15px;
}

.div-info-atencao h2 {
    text-align: center;
    text-decoration: underline;
}

.custon-icon-atencao {
    margin-right: 10px;
}
/* PAGINA INICIAL ADMINISTRATIVA */


/* CADASTRAR EVENTOS */
.cadastrar-evento-h2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.conteiner-cadastrar-eventos {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}

.div-cadastrar-eventos-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.div-cadastrar-eventos-data {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.div-cadastrar-eventos-upload {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-right: 5px;
    gap: 20px;
}

.div-cadastrar-eventos-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

#descricao-evento {
    resize: none;
}

.custom-input-text-area {
    width: 250px;
    height: 150px !important;
    font-size: 14px;
    border: 1px solid #aaa;
}

.custom-input-data {
    width: 145px !important;
    font-size: 14px;
    border: 1px solid #aaa;
}

.custom-input-data-modal {
    width: 156px;
    font-size: 14px;
    border: 1px solid #aaa;
}

.custom-input-hora {
    width: 70px;
    font-size: 14px;
    border: 1px solid #aaa;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.custom-input-upload {
    width: 320px;
    display: flex;
    border: 1px solid #aaa;
    justify-content: center;
    align-items: center;
}
/* CADASTRAR EVENTOS */

/* REGISTROS EVENTOS */
.div-calendario-h2 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.conteiner-calendario {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    gap: 20px;
    flex-wrap: wrap;
    padding: 0 20px;
}

.conteiner-calendario button {
    cursor: pointer;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    background-color: #007bff;
    color: white;
    transition: 0.3s ease-in-out;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.conteiner-calendario button.active {
    background-color: #0056b3;
    transform: scale(1.2);
}

.conteiner-eventos ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    list-style: none;
    padding: 0;
    margin-top: 60px;
    gap: 30px;
}

.conteiner-eventos li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 20px;
    max-width: 300px;
}

.div-img-data-evento {
    display: flex;
    flex-direction: row;
}

.div-dt-hora {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-left: 10px;
}

.conteiner-eventos img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
}

.span-nomeEvento {
    font-size: 14px;
    font-weight: bold;
    margin-top: 8px;
    overflow: hidden;
    word-wrap: break-word;
    white-space: normal;
}

.span-descricaoEvento {
    font-size: 13px;
    font-style: italic;
    margin-top: 5px;
    overflow: hidden;
    word-wrap: break-word;
    white-space: normal;
}

.data-evento {
    font-size: 12px;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-top: 5px;
    gap: 5px;
    color: #006aff;
}

.hora-evento {
    font-size: 12px;
    display: flex;
    align-items: center;
    overflow: hidden;
    gap: 5px;
    color: #006aff;
}

.icon-lixo-eventos {
    color: #fd3434;
    font-size: 20px;
    height: auto;
    cursor: pointer;
    border: none;
    background: none;
    outline: none;
    transition: transform 0.1s ease-in-out;
    margin-bottom: 8px;
    margin-right: 80px;
}

.icon-lixo-eventos:hover {
    transform: scale(1.3);
}

/* IMAGEM NO MODAL EVENTO */
.imagem-evento-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.imagem-evento-modal-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.imagem-evento-modal-content img {
    width: 400px;
    height: auto;
}

.close-imagem-evento-modal {
    color: #fff;
    font-size: 40px;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
}

.close-imagem-evento-modal:hover {
    color: #bbb;
}
/* IMAGEM NO MODAL EVENTO */
/* REGISTRO EVENTOS */

/* CADASTRAR PATROCINADORES */
.conteiner-cadastrar-patrocinadores {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.div-cadastrar-patrocinadores-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.custom-input-redirecionamento {
    width: 310px;
    font-size: 14px;
    border: 1px solid #aaa;
}

.custom-input-upload-patrocinadores {
    width: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #aaa;
}
/* CADASTRAR PATROCINADORES */

/* REGISTROS PATROCINADORES */
.conteiner-patrocinadores ul {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    list-style: none;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    gap: 50px;
    flex-wrap: wrap;
}

.conteiner-patrocinadores li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    flex: 1 1 calc(16.66% - 50px);
    max-width: calc(16.66% - 50px);
    box-sizing: border-box;
}

.conteiner-patrocinadores img {
    transition: transform 0.3s ease-in-out;
}

.conteiner-patrocinadores img:hover {
    transform: scale(1.2);
}

.icon-lixo {
    color: #fd3434;
    font-size: 20px;
    height: auto;
    cursor: pointer;
    margin-top: 30px;
    border: none;
    background: none;
    outline: none;
    transition: transform 0.1s ease-in-out;
}

.icon-lixo:hover {
    transform: scale(1.3); 
}

/* REGISTRO PATROCINADORES */

/* CADASTRAR ACADEMIAS */
.cadastrar-academia-h2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.conteiner-cadastrar-academias {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.div-cadastrar-academias-nomes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.div-cadastrar-academias-endereco {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.div-cadastrar-academias-upload {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    margin-top: 20px;
}

.div-cadastrar-academias-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.custom-btn-cadastrar-academia {
    width: 94px;
    height: 30px;
    background-color: #00c8ff;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.custom-btn-cadastrar-academia:hover {
    background-color: #006aff;
}

.custom-input-telefone {
    width: 150px;
    font-size: 14px;
    border: 1px solid #aaa;
}

.custom-input-upload-academias {
    width: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #aaa;
}
/* CADASTRAR ACADEMIAS */

/* REGISTROS ACADEMIAS */
.conteiner-pesquisar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.custon-input-nome-pesquisa {
     width: 250px;
     font-size: 14px;
     border: 1px solid #aaa;
}

.conteiner-pesquisar select {
    width: 210px;
    border: 1px solid #aaa;
    justify-content: center;
    align-items: center;
}

.custom-btn-pesquisar {
    width: 94px;
    background-color: #00c8ff;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.custom-btn-pesquisar:hover {
    background-color: #006aff;
}

.conteiner-academias ul {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    list-style: none;
    padding: 0;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    gap: 60px;
    flex-wrap: wrap;
}

.conteiner-academias li {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    flex: 1 1 calc(25% - 60px);
    max-width: calc(25% - 60px);
    box-sizing: border-box;
    min-width: 320px;
}

.conteiner-academias img {
    width: 200px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
}

.conteiner-academias img:hover {
    transform: scale(1.2);
    margin-bottom: 20px;
}

.div-info-academias {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.span-nomeAcademia {
    margin-top: 5px;
    font-size: 18px !important;
    font-weight: bold;
}

.div-tecnico {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
}

.academia-responsavel-tecnico {
    font-weight: bold;
}

.div-endereco {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
}

.div-bairro {
    display: inline;
    flex-direction: row;
    gap: 5px;
}

.div-contato-academia {
    margin-top: 8px;
}

.academia-contato {
    color: #006aff;
}

.icon-lixo-academias {
    color: #fd3434;
    font-size: 20px;
    height: auto;
    cursor: pointer;
    margin-top: 10px;
    border: none;
    background: none;
    outline: none;
    transition: transform 0.1s ease-in-out;
}

.icon-lixo-academias:hover {
    transform: scale(1.3);
}

/* IMAGEM NO MODAL ACADEMIA */
.imagem-academia-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.imagem-academia-modal-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.imagem-academia-modal-content img {
    width: 400px;
    height: auto;
}

.close-imagem-academia-modal {
    color: #fff;
    font-size: 40px;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
}

.close-imagem-academia-modal:hover {
    color: #bbb;
}
/* IMAGEM NO MODAL ACADEMIA */
/* REGISTRO ACADEMIAS */

/* CADASTRAR PROFESSORES */
.conteiner-pesquisar-professores {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding-left: 20px;
}

.conteiner-pesquisar-professores select {
    width: 210px;
    border: 1px solid #aaa;
    justify-content: center;
    align-items: center;
}

.custom-btn-pesquisar-professores {
    width: 94px;
    background-color: #00c8ff;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.custom-btn-pesquisar-professores:hover {
    background-color: #006aff;
}

.conteiner-cadastrar-professores {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.div-cadastrar-professores-registro {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.custom-input-editar-professor {
    width: 250px;
    font-size: 14px;
    border: 1px solid #aaa;
}

.div-p {
    display: flex;
    flex-direction: column;
}

.div-p p {
    margin: 0;
}

.div-cadastrar-professores-cidade {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.div-genero {
    display: flex;
    align-items: center;
    margin-top: 20px;
    gap: 20px;
}

.custom-input-data {
    width: 170px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.div-cadastrar-professores-upload {
    display: flex;
    justify-content: center;
    gap: 20px;
}
/* CADASTRAR PROFESSORES */

/* REGISTROS PROFESSORES */
.conteiner-professores {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
    margin-right: 20px;
}

.conteiner-professores th {
    font-size: 16px;
    background-color: #181818;
    text-align: left;
    color: white;
    height: 80px;
    padding: 10px;
}

.conteiner-professores td {
    text-align: left;
    font-size: 12px;
    font-weight: bold;
    color: #333;
    overflow-wrap: break-word;
    max-width: 50px;
    padding: 10px;
}

/* Ajustando colunas específicas */
th:nth-child(1), td:nth-child(1) { /* Foto */
    width: 90px;
    text-align: center;
}

th:nth-child(2), td:nth-child(2) { /* Registro */
    width: 80px;
    text-align: center;
}

th:nth-child(3), td:nth-child(3) { /* Nome */
    width: 200px;
    text-align: left;
}

th:nth-child(4), td:nth-child(4) { /* Data de Nascimento */
    width: 50px;
    text-align: center;
}

th:nth-child(5), td:nth-child(5) { /* M/F */
    width: 60px;
    text-align: center;
}

th:nth-child(6), td:nth-child(6) { /* Cidade */
    width: 150px;
    text-align: left;
}

th:nth-child(7), td:nth-child(7) { /* Graduação */
    width: 125px;
    text-align: center;
}

th:nth-child(8), td:nth-child(8) { /* Equipe */
    width: 150px;
    text-align: left;
}

th:nth-child(9), td:nth-child(9) { /* Status */
    width: 80px !important;
    text-align: left !important;
}

.conteiner-professores img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
}

.conteiner-professores img:hover {
    transform: scale(1.2);
}

.icon-lixo-professores {
    color: #fd3434;
    font-size: 20px;
    height: auto;
    cursor: pointer;
    border: none;
    background: none;
    outline: none;
    transition: transform 0.1s ease-in-out;
}

.icon-lixo-professores:hover {
    transform: scale(1.3);
}

/* PAGINATION PROFESSOR */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination ul {
    list-style: none;
    display: flex;
    gap: 5px;
}

.pagination li {
    margin: 0;
}

.pagination a {
    padding: 4px 10px;
    background-color: #00c8ff;
    color: white;
    border: none;
    border-radius: 5px;
    text-decoration: none;
}

.pagination a:hover {
    background-color: #006aff;
}

.pagination .active a {
    background-color: #006aff;
    cursor: default;
}

.pagination li a {
    cursor: pointer;
}
/* PAGINATION PROFESSOR */

/* IMAGEM NO MODAL PROFESSOR */
.imagem-professor-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.imagem-professor-modal-content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 600px;
    background-color: #fff;
    border-radius: 10px;
    padding: 25px;
    box-sizing: border-box;
}

.modal-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.imagem-container {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
}

.imagem-professor-modal-content img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.professor-details {
    flex: 1;
    margin-top: 20px;
}

.professor-details p {
    margin: 10px 0;
    display: flex;
    align-items: center;
}

.professor-details strong {
    margin-right: 10px;
}

.div-modal-img-button-professor {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.custom-input-upload-prof-modal {
    width: 320px;
    display: flex;
    border: 1px solid #aaa;
    justify-content: center;
    align-items: center;
}

.custom-file-label {
    display: none;
}

.ativo-inativo-professor {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 20px;
}

.div-btn-salvar {
    display: flex;
    justify-content: center;
    align-items: center;
}

.close-imagem-professor-modal {
    color: black;
    font-size: 40px;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
}

.close-imagem-professor-modal:hover {
    color: #bbb;
}

/* IMAGEM NO MODAL PROFESSOR */
/* REGISTRO PROFESSORES */

/* CADASTRAR FILIADOS */
.conteiner-pesquisar-filiados {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    padding-left: 20px;
}

.radio-margin {
    gap: 10px;
}

.radio-margin label {
    margin-right: 20px;
}

.p-margin p {
    margin: 0;
}

.custon-input-nome-selecionar {
    height: 31px;
}

.conteiner-pesquisar-filiados select {
    width: 210px;
    border: 1px solid #aaa;
    justify-content: center;
    align-items: center;
}

.div-btn-pesquisar {
    margin-top: 23px;
    margin-left: 30px;
}

.custom-btn-pesquisar-filiados {
    width: 94px;
    background-color: #00c8ff;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.custom-btn-pesquisar-filiados:hover {
    background-color: #006aff;
}

.cadastrar-filiado-h2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.conteiner-cadastrar-filiados {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.div-cadastrar-filiados-registro {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.div-cadastrar-filiados-registro p {
    margin: 0;
}

.div-cadastrar-filiados-cidade p {
    margin: 0;
}

.div-cadastrar-filiados-cidade {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.custom-input-editar-cidade {
     width: 170px;
     font-size: 14px;
     border: 1px solid #aaa;
 }

.div-cadastrar-filiados-upload {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.h3-escolher {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    margin-top: 30px;
}

.separator-graduado {
    width: 5%;
    height: 2px;
    border: none;
    background-color: #181818;
}

.conteiner-cadastrar-graduacao {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
    padding-left: 20px;
}

.info-faixa {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    margin-top: 5px;
}

.color-div {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

.info-faixa p {
    margin: 0;
}

.color-div p {
    margin: 0;
}

.custom-input-graduacao {
    width: 140px;
    font-size: 14px;
    border: 1px solid #aaa;
    height: 31px;
}

.div-cadastrar-filiado-upload {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.div-cadastrar-filiado-upload p {
    color: #f72c1e;
}

.div-cadastrar-filiado-upload p {
    margin: 0;
}

.div-btn-cadastrar-graduacao {
    margin-top: 20px;
}
/* CADASTRAR FILIADOS */

/* REGISTROS FILIADOS */
.conteiner-filiados {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
    margin-right: 20px;
}

.conteiner-filiados th {
    font-size: 16px;
    background-color: #181818;
    text-align: left;
    color: white;
    height: 80px;
    padding: 10px;
}

.conteiner-filiados td {
    text-align: left;
    font-size: 12px;
    font-weight: bold;
    color: #333;
    overflow-wrap: break-word;
    max-width: 150px;
    padding: 10px;
}

/* Ajustando colunas específicas */
th:nth-child(1), td:nth-child(1) { /* Foto */
    width: 90px;
    text-align: center;
}

th:nth-child(2), td:nth-child(2) { /* Registro */
    width: 80px;
    text-align: center;
}

th:nth-child(3), td:nth-child(3) { /* Nome */
    width: 200px;
    text-align: left;
}

th:nth-child(4), td:nth-child(4) { /* Data Nascimento /*/
    width: 50px;
    text-align: center;
}

th:nth-child(5), td:nth-child(5) { /* M/F /*/
    width: 60px;
    text-align: center;
}

th:nth-child(6), td:nth-child(6) { /* Cidade */
    width: 150px;
    text-align: left;
}

th:nth-child(7), td:nth-child(7) { /* Graduação */
    width: 125px;
    text-align: center;
}

th:nth-child(8), td:nth-child(8) { /* Academia */
    width: 150px;
    text-align: left;
}

.conteiner-filiados th:nth-child(9),
.conteiner-filiados td:nth-child(9) {
    width: 200px !important;
    text-align: left;
}

th:nth-child(10), td:nth-child(10) { /* Status */
    width: 80px;
    text-align: left;
}

.conteiner-filiados img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
}

.conteiner-filiados img:hover {
    transform: scale(1.2);
}

.Amarela {
    background-color: #d9c402;
}

.Laranja {
    background-color: #ff5e00;
}

.Verde {
    background-color: #00a606;
}

.Azul {
    background-color: #0055ff;
}

.Marrom {
    background-color: #4d2e26;
}

.Preta {
    background-color: #000000;
}

.Preta-Coral {
    background: linear-gradient(135deg, black 70%, red 30%);
}

.Amarela,
.Laranja,
.Verde,
.Azul,
.Marrom,
.Preta {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: bold;
    color: white;
}

.Preta-Coral {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: bold;
    color: white;
}

.status-ativo {
    color: green !important;
}

.status-inativo {
    color: red !important;
}

.icon-lixo-filiados {
    color: #fd3434;
    font-size: 20px;
    height: auto;
    cursor: pointer;
    border: none;
    background: none;
    outline: none;
    transition: transform 0.1s ease-in-out;
}

.icon-lixo-filiados:hover {
    transform: scale(1.3);
}

/* IMAGEM NO MODAL FILIADO */
.imagem-filiado-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.imagem-filiado-modal-content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 600px;
    background-color: #fff;
    border-radius: 10px;
    padding: 25px;
    box-sizing: border-box;
}

.modal-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.imagem-container {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
}

.imagem-filiado-modal-content img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.filiado-details {
    flex: 1;
    margin-top: 20px;
}

.div-modal-nome {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.info-modal-nome {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 10px;
}

.info-modal-nome p {
    margin: 0;
}

.info-modal-genero {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
}

.div-modal-img-button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
}

.div-modal-img-button p {
    color: #f72c1e;
}

.custom-input-upload-fili-modal {
    width: 320px;
    display: flex;
    border: 1px solid #aaa;
    justify-content: center;
    align-items: center;
}

.custom-file-label-fili {
    display: none;
}

.ativo-inativo {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 20px;
}

.close-imagem-filiado-modal {
    color: black;
    font-size: 40px;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
}

.close-imagem-filiado-modal:hover {
    color: #bbb;
}
/* IMAGEM NO MODAL FILIADO */
/* REGISTRO FILIADOS */

/* INICIO RANKING */
.conteiner-modalidades {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 20px;
    margin-top: 130px;
    flex-wrap: wrap;
    padding: 0 20px;
}

.btn-modalidade-light {
    width: 120px;
    background-color: #00c8ff;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-modalidade-kick {
    width: 95px;
    background-color: #00c8ff;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-modalidade-point {
    width: 100px;
    background-color: #00c8ff;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-modalidade-full {
    width: 110px;
    background-color: #00c8ff;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-modalidade-low {
    width: 100px;
    background-color: #00c8ff;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-modalidade-k1 {
    width: 40px;
    background-color: #00c8ff;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-modalidade-kb {
    width: 100px;
    background-color: #00c8ff;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-modalidade-light.active,
.btn-modalidade-kick.active,
.btn-modalidade-point.active,
.btn-modalidade-full.active,
.btn-modalidade-low.active,
.btn-modalidade-k1.active,
.btn-modalidade-kb.active {
    background-color: #006aff;
    transform: scale(1.05);
}

.conteiner-info-cabecalho-ranking {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.div-info-cabecalho {
    background-color: #181818;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    margin: 50px auto 0 auto;
    width: 90%;
    padding: 0 20px;
    box-sizing: border-box;
}

.div-info-cabecalho h2 {
    color: white;
    margin-left: 30px;
    margin: 0;
    line-height: 1;
}

.icon-criar {
    color: white;
    margin-right: 20px;
    font-size: 22px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.icon-criar:hover {
    color: #00c8ff;
    transform: scale(1.2);
}

/* Tabela */
.table-ranking {
    width: 90%;
    text-align: center;
}

.table-ranking th {
    background-color: #333;
    color: white;
}

table .indice-ranking {
    text-align: center;
    font-size: 16px;
    width: 30px;
    padding-left: 15px;
}

table .nome-ranking {
    text-align: left;
    font-size: 16px;
    width: auto;
    padding-left: 5px;
}

table .pontos-ranking {
    text-align: right;
    font-size: 16px;
    padding-right: 10px;
    white-space: nowrap;
}

table .lixo-ranking {
    text-align: right;
    font-size: 16px;
    width: 30px;
    padding-right: 15px;
}

.icon-lixo-ranking {
    color: #fd3434;
    font-size: 20px;
    height: auto;
    cursor: pointer;
    border: none;
    background: none;
    outline: none;
    transition: transform 0.1s ease-in-out;
    padding: 5px;
}

.icon-lixo-ranking:hover {
    transform: scale(1.3);
}

#cabecalho-kb,
#cabecalho-k1,
#cabecalho-low,
#cabecalho-full,
#cabecalho-point,
#cabecalho-kick,
#cabecalho-light {
    width: 70%;
    margin: 0 auto;
}
/* Tabela */

/* MODAL Light Contact */
.modal-KBCombat,
.modal-k1,
.modal-low-kicks,
.modal-full-contact,
.modal-point-fight,
.modal-kick-light,
.modal-light-contact {
    display: none;
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-KBCombat-content,
.modal-k1-content,
.modal-low-kicks-content,
.modal-full-contact-content,
.modal-point-fight-content,
.modal-kick-light-content,
.modal-light-contact-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    width: 50%;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.close-KBCombat,
.close-k1,
.close-low-kicks,
.close-full-contact,
.close-point-fight,
.close-kick-light,
.close-light-contact {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-KBCombat:hover,
.close-k1:hover,
.close-low-kicks:hover,
.close-full-contact:hover,
.close-point-fight:hover,
.close-kick-light:hover,
.close-light-contact:hover {
    color: #000;
}
/* MODAL Light contact */

.div-modal-modalidade {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.custom-input-selecionar {
    width: 310px;
    font-size: 14px;
    border: 1px solid #aaa;
}

.custom-input-pontos {
    width: 80px;
    font-size: 14px;
    border: 1px solid #aaa;
}

.div-btn-cadastrar-pontos {
    margin-top: 20px;
}
/* INICIO RANKING */

/* PAGINA DESTALHES FILIADOS */
.tela-central {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px;
    margin-top: 70px;
}

.card-filiado {
    padding: 30px;
    max-width: 500px;
    width: 100%;
    color: black;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    text-align: left;
    position: relative;
    margin-top: 100px;
}

.div-img-detalhes {
    display: flex;
    justify-content: center;
}

.borda-gradiente {
    background: linear-gradient(45deg,
        #009739 33.33%,
        #c60c30 33.33%, #c60c30 66.66%,
        #ffcc29 66.66%);
    padding: 3px;
    margin-bottom: 20px;
    border-radius: 18px;
    display: inline-block;
}

.borda-gradiente img {
    width: 140px;
    height: 150px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

.card-filiado .info-destalhes-filiado p {
    margin: 8px 0;
    font-size: 16px;
}

.card-filiado .titulo-detalhes-filiado {
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: bold;
    color: black;
    display: flex;
    justify-content: center;
    text-align: center;
}

.logo-container-detalhes {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.logo-fgkb-detalhes {
    width: 90px;
    height: auto;
    opacity: 0.95;
}

/* PAGINA DESTALHES FILIADOS */

/* INICIO FOOTER */
/* O container empurra o footer para o final */
.container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Footer fixo na parte inferior */
footer.no-margin {
    margin-top: 0;
}

footer {
    width: 100%;
    background-color: #181818;
    padding: 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #FFFFFF;
    gap: 20px;
    margin-top: 100px;
    border-top: 4px solid;
    border-image: linear-gradient(45deg, #009739 33.33%, #c60c30 33.33%, #c60c30 66.66%, #ffcc29 66.66%) 1;
}

.div-footer-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: 100%;
}

.img-footer-logo {
    padding: 0;
    width: 130px;
    height: auto;
    margin-right: 20%;
}

.img-footer-logo-mycoding {
    padding: 0;
    width: 100px;
    height: auto;
    margin-right: 20%;
}

.div-footer-p {
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
}
/* FIM FOOTER */

/* INICIO RESPONSIVIDADE */

/* NAV PUBLICA */
@media (max-width: 880px) {
    .div-top-publica {
        justify-content: flex-end;
        margin-right: 20px;
        gap: 20px;
    }
}

@media (max-width: 690px) {
    .div-top-publica {
        flex-direction: column;
        align-items: flex-end;
        margin-right: 20px;
        margin-top: 10px;
        gap: 0;
    }

    .div-contato-publica {
        margin-top: 0;
        margin-right: 20px;
        margin-bottom: 5px;
    }

    .header-section {
        margin-top: 50px;
    }
}

@media screen and (max-width: 1060px) {
    .nav-list-publica a {
        padding: 10px;
        font-size: 14px;
    }

    .nav-list-publica {
        display: none;
        flex-direction: column;
        background-color: transparent;
        position: absolute;
        top: 0;
        right: -20px;
        width: 200px;
        margin-top: 72px;
    }

    .nav-list-publica li {
        width: 100%;
        box-sizing: border-box;
        display: block;
        padding-top: 5px;
    }

    .nav-list-publica li a {
        display: block;
        background-color: #00782b;
    }

    .nav-list-publica li a:hover {
        background-color: white;
    }

    .nav-container.active .nav-list-publica {
        display: flex;
    }

    .menu-toggle {
        display: block;
        margin-right: 20px;
    }

    .div-contato-publica {
        margin-right: 20px;
    }
}
/* NAV PUBLICA */

/* NAV ADMINISTRACAO */
@media (max-width: 1260px) {
    .nav-list-administracao a {
        padding: 15px;
        font-size: 14px;
    }

    .titulo-h1 {
        font-size: 16px;
        margin-right: 20px;
    }
}

@media screen and (max-width: 1060px) {
    .div-perfil {
        margin-left: 55%;
    }

    .custom-btn-sair {
        margin-right: 15px;
        margin-left: 15px;
    }

    .nav-list-administracao a {
        padding: 10px;
        font-size: 14px;
    }

    .nav-list-administracao {
        display: none;
        flex-direction: column;
        background-color: transparent;
        position: absolute;
        top: 60px;
        right: 0;
        width: 200px;
        margin-top: 72px;
    }

    .nav-list-administracao li {
        width: 100%;
        box-sizing: border-box;
        display: block;
        padding-top: 5px;
    }

    .nav-list-administracao li a {
        display: block;
        background-color: #00782b;
    }

    .nav-list-administracao li a:hover {
        background-color: white;
    }

    .menu-toggle {
        display: block;
        margin-right: 20px;
    }

    .nav-container.active .nav-list-administracao {
        display: flex;
    }
}

@media (max-width: 920px) {
    .div-perfil {
        margin-left: 40%;
    }
}

@media (max-width: 860px) {
    .div-top {
        justify-content: flex-end;
        gap: 20px;
    }

    .titulo-h1 {
        margin-left: 0px;
    }
}

@media (max-width: 690px) {
    .div-top {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        gap: 5px;
        margin-top: 15px;
    }

    .titulo-h1 {
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 20px;
    }

    .div-perfil {
        margin-left: 20%;
    }

    .nav-container .nav-list-administracao {
        margin-top: 82px;
    }
}

@media (max-width: 520px) {
    .div-perfil {
        margin-left: 5%;
    }
}

@media (max-width: 440px) {
    .img-nav-logo {
        width: 125px;
        margin-left: 5px;
    }

    .conteirner-nav-publica .img-nav-logo {
        width: 140px;
        margin-left: 5px;
    }

    .menu-toggle {
        font-size: 20px;
        width: 40px;
    }

    .titulo-h1 {
        font-size: 14px;
    }

    .nav-container .nav-list-administracao {
        margin-top: 75px;
    }
}

@media (max-width: 370px) {
    .img-nav-logo {
        width: 100px;
        margin-left: 5px;
    }

    .custom-btn-perfil {
        width: 50px;
        font-size: 12px;
    }

    .custom-btn-sair{
        width: 50px;
        font-size: 12px;
        margin-right: 10px;
        margin-left: 10px;
    }
}
/* NAV ADMINISTRACAO */

/* PAGINA FILIADOS */
@media (max-width: 1017px) {
    .div-btn-pesquisar {
        margin-top: 0;
        margin-left: 0;
    }
}

@media (max-width: 740px) {
    .conteiner-cadastrar-filiados {
        align-items: flex-start;
        margin-left: 20px;
    }

    .div-cadastrar-filiados-registro {
        flex-direction: column;
        align-items: flex-start;
    }

    .div-cadastrar-filiados-cidade {
        flex-direction: column;
        align-items: flex-start;
    }

    .div-cadastrar-filiados-upload {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

@media (max-width: 639px) {
    .conteiner-pesquisar-filiados {
        justify-content: flex-start;
        padding-left: 20px;
    }
}

@media (max-width: 400px) {
    .conteiner-cadastrar-graduacao {
        justify-content: flex-start;
        padding-left: 20px;
    }

    .custom-input-upload {
        width: 250px;
    }
}

@media (max-width: 371px) {
    .conteiner-pesquisar-filiados {
        flex-direction: column;
        align-items: flex-start
    }
}

@media (max-width: 1115px) {
    .conteiner-filiados th {
        font-size: 14px;
        height: 65px;
        padding: 6px;
    }

    .conteiner-filiados td {
        font-size: 11px;
        padding: 8px;
    }

    .imagem-tabela {
        width: 65px !important;
        height: 65px !important;
    }

    th:nth-child(1), td:nth-child(1) {
        width: 80px;
    }
}

@media (max-width: 1030px) {
    div#conteiner-tabela-registro-filiados {
        overflow-x: auto;
    }

    div#conteiner-tabela-registro-filiados .conteiner-filiados {
        display: block;
        width: max-content;
    }

    div#conteiner-tabela-registro-filiados table {
        width: 100%;
    }
}

@media (max-width: 630px) {
    .imagem-filiado-modal-content {
        width: 75%;
    }

    .imagem-filiado-modal-content img {
        width: 110px;
        height: 110px;
    }

    .modal-content-wrapper {
        align-items: flex-start;
    }

    .imagem-container {
        flex: 0 0 40%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .div-modal-img-button {
        align-items: flex-start;
        margin-top: 10px;
        margin-left: 20px;
    }

    .ativo-inativo {
        flex-direction: column;
        gap: 5px;
    }

    .div-modal-img-button p {
        margin: 0;
    }

    .custom-file-label-fili {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 180px;
        height: 30px;
        background-color: white;
        border: 1px solid #d9d9d9;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
        color: #181818;
        text-align: center;
        margin-top: 10px;
    }

    .custom-file-label-fili:hover {
        border-color: #40a9ff;
        color: #333;
    }

    #imagemFiliados {
        display: none;
    }

    .div-respon-genero {
        display: flex;
        flex-direction: row;
        gap: 20px;
    }

    .div-respon-btn-salvar {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media (max-height: 800px) {
    #imagemFiliadoModalImage {
        display: none;
    }
}

@media (max-height: 700px) {
    #imagemFiliadoModalImage {
        display: none;
    }

    .close-imagem-filiado-modal {
        top: 0;
    }
}

@media (max-height: 600px) {
    .imagem-filiado-modal-content p {
        font-size: 10px;
    }

    .imagem-filiado-modal-content input {
        height: 20px;
        font-size: 10px;
    }

    .imagem-filiado-modal-content label {
        font-size: 10px;
    }

    .imagem-filiado-modal-content select {
        height: 20px;
        font-size: 10px;
    }

    .custom-file-label-fili {
        height: 20px;
        font-size: 10px;
    }

    .custom-btn-salvar-conta {
        width: 60px;
        height: 20px;
        font-size: 12px;
        margin-top: 10px;
    }

    .close-imagem-filiado-modal {
        font-size: 30px;
        top: 20px;
    }

    .imagem-filiado-modal-content {
        padding: 20px;
    }
}
/* PAGINA FILIADOS */

/* PAGINA PROFESSORES */
@media (max-width: 1015px) {
    .conteiner-professores th {
        font-size: 14px;
        height: 65px;
        padding: 6px;
    }

    .conteiner-professores td {
        font-size: 11px;
        padding: 8px;
    }

    .imagem-tabela {
        width: 65px !important;
        height: 65px !important;
    }

    th:nth-child(1), td:nth-child(1) {
        width: 80px;
    }
}

@media (max-width: 883px) {
    div#conteiner-tabela-registro {
        overflow-x: auto;
    }

    div#conteiner-tabela-registro .conteiner-professores {
        display: block;
        width: max-content;
    }

    div#conteiner-tabela-registro table {
        width: 100%;
    }
}

@media (max-width: 670px) {
    .conteiner-cadastrar-professores {
        align-items: flex-start;
        margin-left: 20px;
        width: 0%;
    }

    .div-cadastrar-professores-registro {
        flex-direction: column;
        align-items: flex-start;
    }

    .div-cadastrar-professores-cidade {
        flex-direction: column;
        align-items: flex-start;
    }

    .div-genero {
        margin-top: 0;
    }

    .div-cadastrar-professores-upload {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

@media (max-width: 630px) {
    .imagem-professor-modal-content {
        width: 85%;
    }

    .imagem-professor-modal-content img {
        width: 110px;
        height: 110px;
    }

    .professor-details {
        margin-top: 0;
    }

    .div-modal-nome {
        flex-direction: column;
        margin-left: 20px;
        gap: 0;
    }

    .div-modal-img-button-professor {
        justify-content: flex-start;
        gap: 10px;
        margin-top: 15px;
        margin-left: 20px;
    }

    .info-modal-genero {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
    }

    .custom-input-upload-prof-modal {
        width: 250px !important;
    }

    .custom-file-label {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 200px;
        height: 30px;
        background-color: white;
        border: 1px solid #d9d9d9;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
        color: #181818;
        text-align: center;
        margin-left: 10px;
    }

    .custom-file-label {
        width: 180px;
    }

    .custom-file-label:hover {
        border-color: #40a9ff;
        color: #333;
    }

    #imagemProfessores {
        display: none;
    }
}

@media (max-width: 500px) {
    .imagem-professor-modal-content {
        width: 75%;
    }

    .custom-input-upload-prof-modal {
        width: 180px !important;
    }
}

@media (max-width: 470px) {
    .conteiner-pesquisar-professores {
        flex-direction: column;
        align-items: flex-start
    }

    .custom-file-label {
        width: 100px !important;
    }
}

@media (max-width: 435px) {
    .custom-input-upload-prof-modal {
        width: 100px !important;
        border: none;
    }
}

@media (max-height: 600px) {
    #imagemProfessorModalImage {
        display: none;
    }
}

/* PAGINA PROFESSORES */

/* PAGINA ACADEMIAS */
@media (max-width: 630px) {
    .conteiner-pesquisar {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px;
    }
}
/* PAGINA ACADEMIAS */

/* PAGINA EVENTOS */
.conteiner-cadastrar-eventos {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}

@media (max-width: 900px) {
    .conteiner-cadastrar-eventos {
        flex-direction:column;
        align-items: center;
    }

    .div-cadastrar-eventos-upload {
        flex-direction:column;
    }

    .div-cadastrar-eventos-text .custom-input-editar {
         width: 250px;
         font-size: 14px;
         border: 1px solid #aaa;
     }
}

/* PAGINA EVENTOS */

/* PAGINA ADMINISTRACAO */
@media (max-width: 900px) {
    .conteiner-info-atencao {
        flex-direction: column;
        gap: 0;
    }

    .img-administracao-info {
        margin-left: 0;
        margin-bottom: 0;
        width: 250px;
        margin-top: 0;
    }

    .div-info-atencao {
        width: 80%;
        margin: 0;
        margin-top: 40px;
    }
}

@media (max-width: 1130px) {
    .conteiner-inputs-editar {
        flex-direction: column;
    }
}

@media (max-width: 590px) {
    .custom-input-editar {
        width: 200px;
    }

    .custom-input {
        width: 150px;
    }
}

@media (max-width: 450px) {
    .custom-input-editar {
        width: 150px;
    }

    .custom-input {
        width: 150px;
    }

    .close-editar-conta {
        font-size: 20px;
    }

    .modal-editar-conta-content h2 {
        font-size: 15px;
    }

    .modal-senha-conta-content h2 {
        font-size: 15px;
    }

    .close-senha-conta {
        font-size: 20px;
    }
}

/* PAGINA ADMINISTRACAO */

/* PAGINA RANKING */
@media (max-width: 830px) {
    .div-modal-modalidade {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-top: 20px;
        flex-direction: column;
    }
}

@media (max-width: 440px) {

    .modal-KBCombat-content h2,
    .modal-k1-content h2,
    .modal-low-kicks-content h2,
    .modal-full-contact-content h2,
    .modal-point-fight-content h2,
    .modal-kick-light-content h2,
    .modal-light-contact-content h2 {
        font-size: 15px;
    }

    .close-KBCombat,
    .close-k1,
    .close-low-kicks,
    .close-full-contact,
    .close-point-fight,
    .close-kick-light,
    .close-light-contact {
        font-size: 20px;
    }
}
/* PAGINA RANKING */

/* PAGINA PATROCINADORES */
@media (max-width: 960px) {
    .conteiner-patrocinadores li {
        flex: 1 1 calc(16.66% - 30px);
        max-width: calc(16.66% - 30px);
    }
}

@media (max-width: 760px) {
    .conteiner-patrocinadores li {
        flex: 1 1 calc(16.66% - 10px);
        max-width: calc(16.66% - 10px);
    }
}

@media (max-width: 620px) {
    .conteiner-patrocinadores li {
        flex: 1 1 calc(20.66% - 5px);
        max-width: calc(20.66% - 5px);
    }
}

@media (max-width: 500px) {
    .conteiner-patrocinadores li {
        flex: 1 1 calc(40.66% - 5px);
        max-width: calc(40.66% - 5px);
    }
}

@media (max-width: 720px) {
    .conteiner-cadastrar-patrocinadores {
        flex-direction: column;
        margin-top: 10px;
    }
}

@media (max-width: 360px) {
    .custom-input-redirecionamento {
        width: 270px;
    }

    .custom-input-upload-patrocinadores {
        width: 280px;
    }
}
/* PAGINA PATROCINADORES */

/* PAGINA BLACK BELTS */
@media (max-width: 1390px) {
    .conteiner-black-belt ul {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 1200px) {
    .separator-faixa {
        margin-left: 20px;
        margin-right: 30px;
    }
}

@media (max-width: 1130px) {
    .div-registro-faixa {
        width: 7rem;
        max-width: 7rem;
        min-width: 7rem;
    }

    .registro-faixa-img-logo {
        width: 220px;
        height: auto;
        margin-bottom: 50px;
        z-index: 10;
    }

    .info-faixa-h h1 {
        font-size: 40px;
    }

    .faixa-preta-frase {
        padding: 5px 20px;
        font-size: 20px;
    }

    .img-black-belt {
        width: 100px;
        height: 120px;
    }

    .conteiner-black-belt li {
        min-width: 150px;
    }

    .span-black-belt {
        font-size: 16px !important;
    }

    .conteiner-black-belt {
        margin-top: 20px;
    }
}

@media (max-width: 915px) {

    .div-faixa-preta {
        margin-right: 0;
    }

    .separator-faixa,
    .separator-faixa2,
    .div-registro-faixa {
        display: none;
    }

    .conteiner-black-belt li {
        min-width: 120px;
        margin-left: 20px;
        margin-right: 20px;
    }

    .faixa-preta-frase {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        margin-right: 10%;
        right: 0;
        top: 50px;
    }

    .img-black-belt {
        width: 130px;
        height: 150px;
    }

    .conteiner-black-belt ul {
        gap: 10px;
    }

    .pagination-black-belts {
        margin-right: 0;
    }

    .div-black-belt-registro {
        margin-top: 10px;
    }

    .div-img-fundo-black {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
    }
}

@media (max-width: 730px) {
    .conteiner-black-belt li {
        min-width: 110px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .img-black-belt {
        width: 120px;
        height: 150px;
    }

    .conteiner-black-belt ul {
        gap: 20px;
    }

    .faixa-preta-frase {
        padding: 4px 15px;
        font-size: 18px;
    }
}

@media (max-width: 620px) {
    .conteiner-black-belt ul {
        gap: 20px;
        margin-top: 20px;
    }

    .faixa-preta-frase {
        padding: 4px 15px;
        font-size: 18px;
        top: 20px;
        text-align: center;
    }
}

@media (max-width: 580px) {
    .faixa-preta-frase {
        width: 80%;
        top: 15px;
    }

    .faixa-preta-frase {
        padding: 4px 15px;
        font-size: 14px;
        text-align: center;
    }

    .img-black-belt {
        width: 85px;
        height: 105px;
    }

    .conteiner-black-belt ul {
        gap: 20px;
    }
}

@media (max-width: 491px) {
    .faixa-preta-frase {
        padding: 3px 10px;
        font-size: 12px;
    }
}

@media (max-width: 430px) {
    .faixa-preta-frase {
        display: none;
    }

    .img-black-belt {
        width: 100px;
        height: 120px;
    }

    .span-black-belt-nome {
        font-size: 10px;
    }

    .span-black-belt {
        font-size: 14px !important;
    }

    .conteiner-black-belt li {
        min-width: 90px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .registro-black-belts {
        font-size: 12px;
    }
}

@media (max-width: 375px) {
    .img-black-belt {
        width: 95px;
        height: 115px;
    }

    .span-black-belt-nome {
        font-size: 8px;
    }

    .span-black-belt {
        font-size: 12px !important;
    }

    .conteiner-black-belt li {
        min-width: 90px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .conteiner-black-belt ul {
        gap: 15px;
    }

    .registro-black-belts {
        font-size: 10px;
    }
}
/* PAGINA BLACK BELTS */

/* PAGINA INDEX */
@media (max-width: 1365px) {
    .header-section {
        padding: 60px 10px;
    }
}

@media (max-width: 1345px) {
    .inspirational-section img {
        display: none;
    }

    .inspirational-section {
        text-align: left;
    }

    .div-inspirational-section {
        width: 100%;
    }

    .div-titulo-inspirational {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
    }

    .div-btn-filiar {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .conteiner-btns {
        gap: 100px;
    }

    .ciam-content h2 {
        margin-left: 20px;
        margin-right: 20px;
    }

    .ciam-content p {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media (max-width: 1165px) {
    .conteiner-btns img {
        width: 250px;
    }
}

@media (max-width: 1200px) {
    .ciam-logo {
        max-width: 200px;
        margin-right: 0;
        margin-left: 0;
        margin-top: 20px;
        margin-bottom: 0;
    }

    .ciam-container {
        flex-direction: column;
        gap: 20px;
    }

    .ciam-content {
        margin-left: 0;
    }
}

@media (max-width: 1060px) {
    .conteiner-lema {
        gap: 30px;
        margin-top: 20px;
    }

    .inspirational-section {
        margin-top: 30px;
    }

    .ciam-logo {
        margin-right: 0;
    }

    .div-titulo-cian-content {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .conteiner-brasil {
        right: 160%;
        gap: 180px;
        animation: autoRun 8.5s linear infinite;
    }
}

@media (max-width: 990px) {
    .conteiner-btns {
        gap: 50px;
    }

    .conteiner-localiza {
        gap: 100px;
    }

    .header-section {
        padding: 30px 10px;
    }
}

@media (max-width: 860px) {
    .conteiner-lema {
        gap: 20px;
        margin-top: 20px;
    }

    .conteiner-lema img {
        width: 30%;
    }

    .conteiner-btns {
        gap: 50px;
    }

    .conteiner-btns img {
        width: 200px;
    }

    .conteiner-localiza {
        gap: 50px;
    }

    .conteiner-brasil-img {
        width: 70px;
    }

    .img-conselho {
        width: 50px;
    }

    .conteiner-brasil {
        right: 160%;
        gap: 150px;
        animation: autoRun 5s linear infinite;
    }
}

@media (max-width: 810px) {
    .conteiner-localiza {
        flex-direction: column;
        align-items: center;
    }

    .div-contatos {
        width: 400px;
    }
}

@media (max-width: 735px) {
    .prev, .next {
    margin-top: -10px;
        padding: 8px;
        font-size: 16px;
    }

    .conteiner-btns {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 20px;
    }

    .conteiner-btns img {
        width: 300px;
        height: auto;
        cursor: pointer;
        transition: transform 0.3s ease;
        margin-top: 20px;
        box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
    }

    .conteiner-brasil {
        right: 180%;
        gap: 120px;
        animation: autoRun 4s linear infinite;
    }
}

@media (max-width: 560px) {
    .conteiner-brasil {
        right: 220%;
        gap: 100px;
        animation: autoRun 4s linear infinite;
    }
}

@media (max-width: 545px) {
    .conteiner-lema {
        gap: 15px;
    }

    .conteiner-lema img {
        width: 30%;
    }

    .header-title {
        font-size: 2.7em;
    }
}

@media (max-width: 500px) {
    .header-title {
        font-size: 2em;
    }

    .section-text-sub, .section-list {
        font-size: 1em;
    }

    .inspirational-section h2 {
        font-size: 2em;
    }

    .inspirational-section p {
        font-size: 1em;
    }

    .ciam-content h2 {
        font-size: 2em;
    }

    .ciam-content p {
        font-size: 1em;
        margin-bottom: 30px;
        line-height: 1.6;
        margin-top: 20px;
    }

    .conteiner-brasil {
        right: 350%;
        gap: 70px;
        animation: autoRun 4s linear infinite;
    }

    .section-text, .section-list {
        font-size: 1em;
    }

}

@media (max-width: 450px) {
    .div-maps {
        width: 82%;
    }

    .mapa {
        width: 300px;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .div-contatos {
        width: 82%;
    }

    .conteiner-btns img {
        width: 230px;
    }

    .conteiner-brasil {
        right: 350%;
        gap: 40px;
        animation: autoRun 3s linear infinite;
    }
}

@media (max-width: 400px) {
    .header-title {
        font-size: 1.6em;
    }

    .inspirational-section h2 {
        font-size: 1.6em;
    }

    .ciam-content h2 {
        font-size: 1.6em;
    }

    .ciam-logo {
        max-width: 150px;
    }
}
/* PAGINA INDEX */

/* PAGINA FILIE */
@media (max-width: 1000px) {
    .div-formulario {
        gap: 60px;
    }
}

@media (max-width: 920px) {
    .div-formulario {
        gap: 10px;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
    }

    .separator-form {
        width: 400px;
    }
}

@media (max-width: 690px) {
    .img-banner-pe {
        width: 300px;
    }

    .separator-form {
        width: 300px;
    }

    .div-formulario h2 {
        font-size: 1.2rem;
    }

    .custom-input-filie-nome {
        width: 300px;
    }

    .custom-input-filie-text-area {
        width: 300px !important;
    }

    .custom-input-filie-upload {
        width: 300px;
    }
}
/* PAGINA FILIE */
/* FIM RESPONSIVIDADE */