html, body {
                height: 100% !important;
                font-family: 'Poppins', sans-serif !important;
                background: url('http://app.riovip.com.br/imagens/fundo_site.png') no-repeat center center fixed !important;
                background-size: contain !important;
                overflow-y: auto !important;
                background-color: #000000 !important; /* Cor de fundo preta */
            }

            
            .wrapper {
                display: flex;
                flex-direction: column;
                min-height: 100vh;
            }
            
            .content-wrapper {
                flex: 1;
                background-color: rgba(255, 255, 255, 0.85); /* leve transparência se quiser legibilidade */
                backdrop-filter: blur(4px); /* melhora leitura sobre fundo */
                -webkit-backdrop-filter: blur(4px); /* Safari */ 
                padding-top: 56px; /* altura do header */
                padding-bottom: 56px; /* altura do footer */           
            }
            
            @media (max-width: 768px) {
                .content-wrapper {
                    padding-top: 5px; /* Ajuste para mobile */
                }
            }
            
            /* TODOS DA HEADER */
            .main-header {
                /*display: flex;*/
                /*flex-wrap: nowrap;  Impede que os itens quebrem para a próxima linha */
                /*align-items: center;  Alinha os itens verticalmente */
                /*justify-content: space-between;*/
                height: 56px;  /*Mantém uma altura fixa */
                padding: 0 0px;
                position: fixed;
                /*top: 0;*/
                width: 100%;
                /*z-index: 1030;*/
                /*overflow: hidden;  Evita que os itens saiam da barra */
                /*color: #343a40;*/
                /*border-bottom: 1px solid #dee2e6;*/
            }  
            
            .navbar-nav {
                display: flex !important;
                /*justify-content: flex-end !important;  Alinha os itens à direita */
                /*flex-wrap: nowrap !important;  Impede que os itens quebrem para a próxima linha */
                overflow: hidden !important; /* Evita que os itens saiam da barra */
                white-space: nowrap !important; /* Impede quebra de texto */
                /*background-color: blue !important;  Cor de fundo da navbar */
            }
            .navbar-nav .nav-item {
                display: inline-block !important; /* Garante que os itens sejam exibidos */
            } 
            
            .nav-item.user-info img {
                width: 40px; /* 35px Tamanho reduzido para não afetar a navbar */
                height: auto;
                border-radius: 50%;
                object-fit: cover;
            }


            
            /* FIM DA HEADER */
            
            .main-footer {
                margin-top: 0 !important;
                padding: 20px 20px;
                background-color: #ffffff;
                color: #343a40;
                position: fixed;
                bottom: 0;
                width: 100%;
                height: 56px;
                font-size: 0.9rem;
            }
            .main-sidebar {
                /*background-color: rgba(27, 38, 59,1 0.5);  leve transparência se quiser legibilidade */
                /*background-color: #1b263b;  Azul marinho */
                /*background-color: #ffcc02; Amarelo ouro */
                background-color: #000000;
                position: fixed;
                top: 0;
                left: 0;
                height: 100vh;
                overflow-y:hidden;
                z-index: 1050;
                
            }

            .nav-link {
                font-size: 16px !important;
                color: #c2c7d0 !important;
            }

            .nav-sidebar .nav-link {
                color: #c2c7d0 !important; /*Original */
            }
            .nav-sidebar .nav-link:active {
                /*background-color: #343a40; Original */
                background-color: #ffcc02;
                color: #ffffff;
            }
            
            .nav-sidebar .nav-link:hover{
                background-color: #ffcc02;
                color:#000;
            }
            
            .alunos-container {
                display: flex;
                align-items: center;
            }
            
            .aluno-foto {
                width: 30px; /* Tamanho da foto */
                height: 30px;
                border-radius: 50%; /* Deixa a foto redonda */
                border: 2px solid #fff; /* Borda branca para destaque */
                object-fit: cover;
                margin-left: -10px; /* Sobreposição */
                transition: transform 0.3s;
            }
            
            .aluno-foto:first-child {
                margin-left: 0; /* Remove a sobreposição da primeira imagem */
            }
            
            .aluno-foto:hover {
                transform: scale(1.2); /* Efeito de zoom ao passar o mouse */
            }
            
            /******* login.php *******/
            .tentativas-erradas {
                background-color: #f8d7da;
                color: #721c24;
                font-weight: bold;
                padding: 10px;
                border: 1px solid #f5c6cb;
                border-radius: 5px;
                margin-top: 10px;
                margin-bottom: 15px; /* Espaço entre erro e botão */
            }
            .linha-separacao {
                border-bottom: 1px solid #ccc;
                margin: 20px 0; /* Espaçamento de 20px */
            }
            .btn-google {
                background-color: #db4437;
                color: white;
                font-weight: bold;
            }
            .btn-google:hover {
                background-color: #c23321;
                color: white;
            }
            .politica-privacidade {
                margin-top: 50px; /* Margem de 50px */
                text-align: center; /* Centraliza o texto */
            }
            /******* FIM **** login.php *******/
            
            
            .dt-buttons {
                text-align: center;
                margin-bottom: 20px;
            }
            .btn-excel {
                background-color: #28a745;
                color: #fff;
            }
            .btn-print {
                background-color: #17a2b8;
                color: #fff;
            }
            
            .btn-dashboard {
                height: 120px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 18px;
                /*font-weight: bold;*/
                color: white;
                border-radius: 10px;
                text-align: center;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adiciona sombra leve */
                transition: box-shadow 0.3s ease; /* Animação suave ao interagir */
            }
            .btn-PlacasSolares { background-color: #5bc0de; }
            .btn-baterias { background-color: #f0ad4e; }
            .btn-boletos { background-color: #6f42c1; }
            .btn-documentos { background-color: #fd7e14; }
            .btn-portaria { background-color: #28a745; }
            .btn-correspondencias { background-color: #20c997; }
            .btn-contratos { background-color: #007bff; }
            .btn-manutencoes { background-color: #dc3545; }
            .btn-assembleias { background-color: #6c757d; }
            .btn-portal { background-color: #17a2b8; }
            .btn-ajuda { background-color: #ffc107; }
            .btn-condominios { background-color: #007bff; }
            .btn-dashboard:hover {
                opacity: 0.9;
                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombra maior ao passar o mouse */
            }

            .btn-dashboard i {
                font-size: 35px; /* Tamanho dos ícones */
                margin-bottom: 10px;
            }
            
            
            .container-fluid {
                padding-bottom: 50px; /* Adiciona espaço ao final da página */
            }
            
            .tituloPagina {
                font-size: 2rem; /* Tamanho equivalente ao h1 */
                margin-top: 30px;
                margin-left: 10px;
            }
            
            .texto-obrigatorio{
                color: red;
                font-size: 0.5rem;
            }
            
            
            /***** CAMPO SENHA ****/
            .regrasSenha{
                font-size: 0.7rem;
            }
            
            .input-group {
                position: relative;
            }
            
            .input-group-append {
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
                z-index: 10;
            }
            
            .input-group-text {
                background: transparent;
                border: none;
                cursor: pointer;
            }


            
            /* teste */
            .card {
                border: 0;
                border-radius: .1875rem;
                display: inline-block;
                position: relative;
                width: 100%;
                margin-bottom: 20px;
                box-shadow: 0 1px 15px 1px rgba(39,39,39,.1);
                opacity: 1;
                background-color: rgba(248, 245, 245, 0.5); /* Branco com 50% de transparência */
            }

            .card-login {
                border: 0;
                border-radius: .1875rem;
                display: inline-block;
                position: relative;
                width: 100%;
                margin-bottom: 20px;
                box-shadow: 0 1px 15px 1px rgba(39,39,39,.1);
                opacity: 1;
                background-color: rgba(15, 15, 15, 0.5); /* Branco com 50% de transparência */
            }
            


            .card .card-body {
                padding: 10px 25px 25px;
                
            }
            
            .card .card-header {
                padding: 10px 10px 10px;
                border: 0
            }
            
            .card .card-header:not([data-background-color]) {
                background-color: transparent
            }
            
            .card .card-header .card-title {
                margin-top: 0;
                opacity: 1;
                color: #fff;
            }
            
            .card [data-notify=container].alert {
                min-width: auto;
                left: unset!important;
                right: unset!important
            }
            
            
            
            .card .card-body.table-full-width {
                padding-left: 15px;
                padding-right: 15px;
            }
            
            .card .map {
                border-radius: .1875rem
            }
            
            .card .map.map-big {
                height: 400px
            }
            
            .card[data-background-color=orange],.card[data-background-color=orange] .card-header {
                background-color: #f96332
            }
            
            .card[data-background-color=orange] .card-footer .stats {
                color: #fff
            }
            
            .card[data-background-color=red] {
                background-color: #ff3636
            }
            
            .card[data-background-color=yellow] {
                background-color: #ffb236
            }
            
            .card[data-background-color=blue] {
                background-color: #2ca8ff
            }
            
            .card[data-background-color=green] {
                background-color: #18ce0f
            }
            
            .card .image {
                overflow: hidden;
                height: 200px;
                position: relative;
                background-color:#6c757d;
            }
            
            .card .avatar {
                width: 30px;
                height: 30px;
                overflow: hidden;
                border-radius: 50%;
                margin-bottom: 15px
            }
            
            .card label {
                font-size: .8571em;
                margin-bottom: 5px;
                color: #363636;
            }
            
            .card .card-footer {
                background-color: transparent;
                border: 0
            }
            
            .card .card-footer .stats i {
                margin-right: 5px;
                position: relative;
                top: 2px
            }
            
            .card .card-footer .btn {
                margin: 0
            }
            
            .card-plain {
                background: transparent;
                box-shadow: none
            }
            
            .card-plain .card-footer,.card-plain .card-header {
                margin-left: 0;
                margin-right: 0;
                background-color: transparent
            }
            
            .card-plain:not(.card-subcategories).card-body {
                padding-left: 0;
                padding-right: 0
            }
            
            .card-chart .card-header .card-title {
                margin-top: 0;
                margin-bottom: 0
            }
            
            .card-chart .card-header .card-category {
                margin-bottom: 5px
            }
            
            .card-chart .table {
                margin-bottom: 0
            }
            
            .card-chart .table td {
                border-top: none;
                border-bottom: 1px solid #e9ecef
            }
            
            .card-chart .card-progress {
                margin-top: 30px
            }
            
            .card-chart .chart-area {
                height: 190px;
                width: calc(100% + 30px);
                margin-left: -15px;
                margin-right: -15px
            }
            
            .card-chart .card-footer {
                margin-top: 15px
            }
            
            .card-chart .card-footer .stats {
                color: #9a9a9a
            }
            
            .card-chart .dropdown {
                position: absolute;
                right: 20px;
                top: 20px
            }
            
            .card-chart .dropdown .btn {
                margin: 0
            }
            
            .card-user .image {
                height: 120px
            }
            
            .card-user .author {
                text-align: center;
                text-transform: none;
                margin-top: -77px
            }
            
            .card-user .author a+p.description {
                margin-top: -7px;
                font-size: 0.7rem;
            }

            .bio{
                font-family: 'Poppins', sans-serif;
                font-size: 0.8rem;
            }
            
            .card-user .avatar {
                width: 124px;
                height: 124px;
                border: 1px solid #fff;
                position: relative
            }
            
            .card-user .card-body {
                min-height: 240px
            }
            
            .card-user hr {
                margin: 5px 15px
            }
            
            .card-user .button-container {
                margin-bottom: 6px;
                text-align: center
            }

            .btnWhats{
                color:#28a745;
            }
            .btnWhats:hover{
                color:#ccc;
            }

            .btnTiktok{
                color:#6f42c1;
            }
            .btnTiktok:hover{
                color:#ccc;
            }

            .btnPrinterest{
                color:#c8232c;
            }
            .btnPrinterest:hover{
                color:#ccc;
            }

            .btnLinkedin{
                color:#0e76a8;
            }
            .btnLinkedin:hover{
                color:#ccc;
            }

            .btnInsta{
                color:#3f729b;
            }
            .btnInsta:hover{
                color:#ccc;
            }

            .btnTwitter{
                color:#00acee;
            }
            .btnTwitter:hover{
                color:#ccc;
            }

            .btnFace{
                color:#3b5998;
            }
            .btnFace:hover{
                color:#ccc;
            }



            /*  FOTOS DA PESSOA */
            .photo-thumb-container {
                position: relative;
                width: 130px;
                height: 130px;
                overflow: hidden; /* <-- ESSENCIAL PARA QUE O BOTÃO NÃO SAIA DA FOTO */
                border-radius: 12px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            }
            
            .gallery-thumb {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 12px;
                display: block;
                transition: transform 0.2s ease-in-out;
            }
            
            .gallery-thumb:hover {
                transform: scale(1.03);
            }
            
            .btn-edit-photo {
                position: absolute;
                bottom: 6px;
                right: 6px;
                z-index: 10;
                background-color: #ffffffee;
                border-radius: 50%;
                padding: 6px 9px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            }
            
              
              @media (min-width: 768px) {
                .gallery-wrapper {
                  width: 120px;
                  height: 120px;
                }
              }
            
            


              .avatar-wrapper {
                position: relative;
                display: inline-block;
            }
            
            .avatar-wrapper img.avatar {
                width: 130px;
                height: 130px;
                object-fit: cover;
                border-radius: 50%;
                border: 4px solid #fff;
                box-shadow: 0 2px 6px rgba(0,0,0,0.2);
            }
            
            .btn-edit-avatar {
                position: absolute;
                bottom: 5px;
                right: 5px;
                background-color: white;
                border-radius: 50%;
                padding: 6px 8px;
                box-shadow: 0 2px 6px rgba(0,0,0,0.2);
                z-index: 10;
            }
            
            .vcardNome{
                font-family: 'Poppins', sans-serif;
                font-size: 0.8rem;
            }
            
            
            .card.welcome-card {
                margin-top: 5rem;
                border: none;
                border-radius: 15px;
                overflow: hidden;
            }
            
            .card.welcome-card .card-header {
                padding: 1.5rem;
                border-bottom: none;
            }
            
            .card.welcome-card .card-body {
                padding: 2rem;
            }
            
            .card.welcome-card .btn {
                padding: 0.75rem 1.5rem;
                font-size: 1.1rem;
                border-radius: 50px;
            }

            .custom-rounded-card {
                border-radius: 15px !important;
                overflow: hidden;
                transition: all 0.3s ease; /* Adiciona transição suave */
            }
            
            .custom-rounded-card:hover {
                transform: translateY(-5px); /* Efeito de levitação ao passar o mouse */
                box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important;
            }
            

            @media (min-width: 992px) {
                    .navbar-nav {
                        justify-content: flex-end; /* Alinha os itens à direita */
                        padding-right: 20px; /* Adiciona espaço à direita */
                    }
                }
            
            /* Responsividade para telas menores */
            @media (max-width: 576px) {
                .main-header {
                    height: 56px; /* Reduz um pouco a altura em telas pequenas */
                    padding: 0 0px;
                    width: 100%;
                }
            
                .nav-item.user-info img {
                    width: 40px; /* 35px Tamanho reduzido para não afetar a navbar */
                    height: auto;
                    border-radius: 50%;
                    object-fit: cover;
                }
            
                .nav-link {
                    font-size: 14px; /* Reduz levemente o tamanho da fonte */
                }
            }
            
            @media (max-width: 400px) {
                .main-header {
                    height: 40px;
                    padding: 0 5px;
                    width: 100%;
                }
            
                .nav-item.user-info img {
                    width: 38px; /* 28px */
                    height: 38px;
                }
            
                .nav-link {
                    font-size: 13px;
                }
            }  
              
            @media (max-width: 480px) {
            .main-header, .main-footer {
                height: 50px;
                font-size: 0.9rem;
            }

            .btn-dashboard {
                height: 100px;
                font-size: 16px;
            }

            .btn-dashboard i {
                font-size: 30px;
            }
}