body.login-page {
    background: linear-gradient(to top, rgb(132, 203, 203), white);
}

body.register-page {
    background: linear-gradient(to top, rgb(132, 203, 203), white);
}
nav.sidebar-page {
    background: linear-gradient(to top, rgb(132, 203, 203), white);
}

aside.main-sidebar {
    background-color: rgb(132, 203, 203) !important;
}
.login-image {
    width: 320px; /* Largura desejada */
    height: 320px; /* Altura desejada */
    object-fit: cover; /* Ajusta a imagem para caber no tamanho definido */
}

.home-image {
    width: 100%; /* Preenche 100% da largura da div */
    height: 100%; /* Preenche 100% da altura da div */
    border-radius: 4px;
    object-fit: cover;
    display: block; 
}

.home-um {
    width: 100%; /* Preenche 100% da largura da div */
    height: 100%; /* Preenche 100% da altura da div */
    border-radius: 45px;
    object-fit: cover;
    display: block; 
}
/* teste */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Wrapper principal para o layout */
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Garante que o conteúdo ocupe pelo menos 100% da altura da tela */
}

/* Conteúdo principal */
.content-wrapper {
    flex: 1; /* Faz o conteúdo principal ocupar o espaço restante */
}

/* Rodapé */
footer {
    text-align: center;
    padding: 10px;
    background-color: #f8f9fa;
}

.rounded-circle {
    border: 2px solid #ddd;
    padding: 5px;
}

.form-label {
    text-align: left !important;
    display: block !important;
}
canvas {
    display: block;
    width: 100% !important; /* Garantir que o gráfico ocupe toda a largura da coluna */
    height: auto !important; /* Ajustar a altura automaticamente */
}

/* pag dashboarda */


       /* Container da barra */
       .progress-container {
        text-align: center;
        
        width: 300px;
    }

    /* Barra de progresso */
    .progress-barr {
        width: 100%;
        height: 20px;
        background-color: #84848b;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }

    .progress-bar-inner {
        height: 100%;
        width: 0;
        background-color: #84cbcb;
        animation: load 4s linear infinite; /* Animação de carregamento */
    }

    @keyframes load {
        from {
            width: 0;
        }
        to {
            width: 100%;
        }
    }

    /* Texto "Carregando" */
    .loading-text {
        margin-top: 10px;
        font-size: 16px;
        color: #555;
        animation: blink 1s infinite; /* Animação de piscar */
    }

    @keyframes blink {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
    }


    /* pag cursos */

    .card-shadow {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%; /* Garante que o card tenha altura total */
    }
    
    .card-cursos {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* Empurra o conteúdo para o final */
        flex-grow: 1; /* Faz o card-body ocupar o espaço restante */
    }
    

    .card-img-top {
        margin: 1rem; /* Adiciona margem ao redor da imagem */
        max-width: calc(100% - 2rem); /* Ajusta a largura para considerar a margem */
        height: auto; /* Mantém a proporção da imagem */
    }

    /* pag detalhes */


    .img-fluid {
        max-height: 300px; /* Limita a altura da imagem */
        object-fit: cover; /* Ajusta a imagem para caber no espaço */
    }
    
    .list-group-item {
        font-size: 16px;
        border: none; /* Remove bordas da lista */
        padding: 10px 0;
    }
    
    .btn-lg {
        padding: 15px 30px;
        font-size: 18px;
    }

/* my-course */

    .accordion-item-bord {
        border: none; /* Remove a borda */
        background-color: transparent;
    }

    .img-10 {
        margin-top : 20px;
        width: 100%; /* Largura desejada */
        height:  100%; /* Altura desejada */
        object-fit: cover; /* Ajusta a imagem para caber no tamanho definido */
    }

    /* Home */

    .home-text {
        font-size: 18px;
    }

.login-card-body {
    border-radius: 12px;
}
.register-card-body {
    border-radius: 12px;
}

.btn-2fa {
    background-color: #0f577b !important; 
    color: #fff !important;               
    border-radius: 0.25rem;   
}
.btn-2fa:hover {
    background-color: #0c4562 !important;
    color: #fff !important;  
}

.nav-pills .nav-link.active, 
.nav-pills .show > .nav-link {
    background-color: #0f577b !important; 
    color: #fff !important;               
    border-radius: 0.25rem;               
    
}
.nav-pills .nav-link:hover {
    background-color: #0c4562 !important;
    color: #fff !important;
}

body, .content, .callout, .card, .home-text {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    color: #222; /* cinza escuro, mais suave que preto puro */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    color: #0f577b; /* azul institucional */
    margin-bottom: 0.5rem;
}

.text-home-pri{
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    color: #0f577b; /* azul institucional */
}

h1 { font-size: 2.2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
p, li, ul { font-size: 1.08rem; line-height: 1.6; }

strong {
    color: #0f577b; /* azul institucional */
    font-weight: 600;
    background: none;
}

/* navbar bottons  */

.div-nav-buttns{
    position: fixed; 
    bottom: 24px; 
    left: 24px; 
    z-index: 9999; 
    display: flex; 
    flex-direction: column; 
    gap: 12px;
}
.icon-nav{
font-size: 2rem; 
color: #fff;
}
.button-nav-whatsapp {
    background: #25d366; 
    border: none; 
    border-radius: 50%; 
    width: 48px; 
    height: 48px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); 
    display: flex; 
    align-items: center; 
    justify-content: center;
}
.button-nav-instagram {
      background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
    border: none; 
    border-radius: 50%; 
    width: 48px; 
    height: 48px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.button-nav-site{
background: #007bff; 
border: none; 
border-radius: 50%; 
width: 48px; 
height: 48px; 
box-shadow: 0 2px 8px rgba(0,0,0,0.2); 
display: flex; 
align-items: center; 
justify-content: center;
}

.btn-custom{
    
    background-color:  #0f577b !important;
    text-decoration-color: #ffff;
}

.active-question button {
    font-weight: bold;
    color: #fff !important;
    background: #007bff;
    border-radius: 50%;
}
.question-list-item button {
    width: 2rem;
    height: 2rem;
    text-align: center;
}
.custom-padding {
    padding: 10px; 
}

.diagnosis-free {
    background-color: #0f577b !important;
    color: #fff !important;
}
.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.video-responsive video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
#dashboard-container > .row > .col-12 {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1200px) {
    #dashboard-container > .row > .col-12 {
        max-width: 1080px;
    }
}