* {
    box-sizing: border-box;
}

body{
        background: url(https://invia.com.br/cert/assets/images/fundoazul__otm.jpg);
        background-size: cover;
        /*background:#eeeeee /*#05b6c6*/
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
}

#inputUfCRM{
    text-transform: uppercase;
}

form {
    width: 100%; /* Ocupa toda a largura disponível */
    max-width: 1100px; /* Torna o formulário mais largo */
    padding: 20px; /* Ajuste o padding se necessário */
    height: auto; /* Isso vai garantir que a altura se ajuste ao conteúdo */
    background-color: #fff; /* Fundo branco */
    border-radius: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.row{
    display: flex;
    justify-content: space-between;
}

    .p-3 {1
        padding: 5rem !important;
}

    .div_logo{
        display: flex;
}

    .img_logo{
        width: 50%;
        margin-left: 20%;
}

    .titulo1, .titulo2{
        color: rgb(51, 42, 42);
        display: flex;
        justify-content: center;
        font-family: "Montserrat", serif;
        font-weight: 600;
        font-size: 30px;
        margin: 3%;
}

    .titulo2{
        margin: 10px;
}

    .form-label{
        margin-bottom: .5rem;
        font-size: 14px;
        color: black;
        font-weight: 400;
        margin: 6px;
}

    .btn{
        font-size: 18px;
        margin: 10px;
}

    .mensagem-sucesso {
        background-color: #0b5ed7; /* Cor de fundo verde claro */
        color: white; /* Cor do texto verde mais escuro */
        border: 1px solid #d6e9c6; /* Borda verde clara */
        padding: 10px;
        margin: 10px auto;
        text-align: center;
        position: fixed;
        top: 50%;
        left: 60%;
        width: 33%;
        transform: translate(-50%, -50%); /* Ajuste para centralizar exatamente */
        z-index: 1000; /* Garante que a mensagem fique acima de outros elementos */
        display: none; /* Inicialmente oculta */
}


/* TAMANHOS DOS INPUTS */

    .control1, .control2, .control3, .control4, .control5, .control6, .control7, .control8, .control9, .control10, .control11, .control12, .control13, .control14, .control15, .control16 {
        display: block;
        width: 100%;
        padding: .375rem .75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #e1dfdf;
        background-clip: padding-box;
        border: #dee2e6;
        border-radius: var(--bs-border-radius);
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    .control8:focus {
    outline: none;
    border-color: #66afe9;
    box-shadow: 0 0 5px rgba(102, 175, 233, .6);
}

    element.style {
        margin-top: 4%;
}

    .form-ddd{
        display: block;
        width: 100%;
        padding: .375rem .75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #e1dfdf;
        background-clip: padding-box;
        border: #dee2e6;
        border-radius: var(--bs-border-radius);
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    input.control1{
        width: 100%;
        height: 40px;
}

    input.control2{
        width: 171%;
        height: 40px;
        margin-left: 6%;
}

    input.control3{
         width: 80%;
         height: 40px;
}

    input.control4{
         width: 137%;
         height: 40px;
}

    input.control5{
         width: 106%;
         height: 40px;
         margin-left: 17%;
}

    input.control6{
         width: 115%;
         height: 40px;
}   

    input.control7{
         width: 110%;
         height: 40px;
         margin-left: -85%;
}

    input.control8 {
        width: 102%;
        height: 40px;
        margin-left: 0%;
}

    /*.control9{
         width: 40%;
         max-width: 100%;
         height: 40px;
}*/

    #inputUfCRO {
    width: 100%;
        height: 40px;
        margin-left: 2%;
}

    input.control10 {
        width: 136%;
        height: 40px;
        margin-left: 2%;
}

    input.control11{
         width: 101%;
         height: 40px;
}

    input.control12{
         width: 107%;
         height: 40px;
         margin-left: -18%;
}

    input.control13 {
        width: 138%;
        height: 40px;
        margin-left: 2%;
}
    input.control14 {
        width: 100%;
        height: 40px;
        margin-left: 25%;
}

    input.control15 {
        width: 110%;
        height: 40px;
        margin-left: 25%;
}

    input.control16 {
        width: 96%;
        height: 40px;
        margin-left: 10%;
}

    .nome_cpf{
        margin-left: 35%;        
}

    .nome_esp{
        margin-left: 50%;
}

    .nome_tel{
        margin-left: -105%;
        margin-top: -2%;
}

    .nome_uf{
        margin-left: 5%;
        margin-top: 7%;
}

    .nome_logra{
        margin-left: 50%;
}

    .col-md-2 {
        margin-top: 10px;       
        display: flex;
        flex-direction: column;
        align-items: center;/* Adiciona um pequeno espaço acima do select */
}

    .nome_muni{
        margin-left: 20%;    
}

    .nome_cep{
        margin-left: 10%;        
}

    .nome_bairro {
        margin-left: 45%;
}

    .nome_comp {
        margin-left: 35%;
}
    .nome_dtNas{
        margin-left: 37%;
}

.check_list {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens se ajustem em várias linhas quando necessário */
    align-items: center;
    /*justify-content: center;*/
    padding: 20px;
}

.check_list2{
    display: flex;
    align-items: center;
    /* justify-content: center; */
    padding: 20px;
    flex-wrap: wrap;
}

.check_list {
    width: 31%;
    max-width: 100%; /* Garante que a largura máxima seja 100% em telas pequenas */
}

.check_list2 {
    width: 62%;
    max-width: 100%; /* Garante que a largura máxima seja 100% em telas pequenas */
    margin-top: -5%;
}

.check_form, .check_form2 {
    display: flex;
    flex-direction: column; /* Faz com que os elementos dentro do check_form fiquem empilhados */
    margin-bottom: 20px;
}

.container {
    width: 100%;
    max-width: 1100px;
    padding: 20px;
    overflow: hidden;
    /*display: flex;
    justify-content: space-between; /* Deixa as seções no lado oposto */
    /*gap: 20px; /* Espaço entre as duas seções */
}

.teste{
    font-size:20px;
    padding: 5px;
}

.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 4.5em;
    margin-bottom: .125rem;
    margin-left: -4%;
}

.form-check2 {
    display: block;
    /*min-height: 1.5rem;*/
    padding-left: 7.5em;
    margin-bottom: -2.875rem;
    margin-left: -44%;
}

.form-num{
 margin-left: -85px;   
}

    .g-3{
        --bs-gutter-y: 0rem;
}

/* Ajustes para telas menores que 768px */
@media (max-width: 768px) {
    .img_logo {
        width: 50%; /* Reduz ainda mais o tamanho da logo */
        margin-left: 20%; /* Centraliza a logo */
    }

    .titulo1, .titulo2 {
        font-size: 20px; /* Reduz o tamanho do título */
    }

    .form-label {
        font-size: 12px; /* Reduz o tamanho da fonte dos labels */
    }

    .btn {
        font-size: 14px; /* Reduz o tamanho da fonte do botão */
    }

    .mensagem-sucesso {
        width: 90%; /* Ajusta a largura da mensagem de sucesso */
        left: 50%; /* Centraliza a mensagem */
    }
}


@media (min-width: 768px) and (max-width: 1366px) {
    /* Estilos para telas entre 768px e 1366px */
    *{
        box-sizing: border-box;
    }
    
    .container {
        width: 100%;
        max-width: 1100px;
        padding: 20px;
        --bs-gutter-y: 1rem;
        max-height: 130%;
        height: 112%;
        overflow: hidden;
    }

    .row {
        flex-direction: column;
    }

    .col-md-4, .col-md-6, .col-md-3, .col-md-2 {
        margin-left: 0;
    }

    .form-label {
        font-size: 12px;
    }

    .btn {
        width: 100%;
    }

    .mensagem-sucesso {
        width: 80%;
        left: 50%;
    }
    
    .g-3{
        display: flex;
        flex-direction: row;
}

    .img_logo {
        width: 50%;
        margin-left: 25%;
    }

    .titulo1, .titulo2 {
        font-size: 24px;
    }

    .form-label {
        font-size: 12px;
    }

    .btn {
        font-size: 16px;
    }

    .mensagem-sucesso {
        width: 90%;
        left: 50%;
    }
    
}


    
    /* Ajustes para telas maiores (1366px ou mais) */
@media screen and (min-width: 1366px) {
    .col-md-4 {
        flex: 1 1 calc(33.333% - 15px);
    }
    .col-md-6 {
        flex: 1 1 calc(50% - 15px);
    }
    .col-md-3 {
        flex: 1 1 calc(25% - 15px);
    }
    .col-md-2 {
        flex: 1 1 calc(16.666% - 15px);
    }
}


/* Estilos para telas menores que 678px */
@media (max-width: 678px) {
    .img_logo {
        width: 50%;
        margin-left: 20%;
    }

    .titulo1, .titulo2 {
        font-size: 20px;
    }

    .form-label {
        font-size: 10px;
    }

    .btn {
        font-size: 14px;
    }

    .mensagem-sucesso {
        width: 95%;
        left: 50%;
    }
}

/* MEDIA QUERIES */
@media (max-width: 480px) {
    .form-check, .form-check2 {
        padding-left: 1em; /* Menos padding para se ajustar melhor em telas menores */
    }
}

/* Estilos para telas entre 777px e 979px */
@media (min-width: 777px) and (max-width: 979px) {
    /* Ajustes no formulário */
    form {
        max-width: 90%; /* Reduz a largura máxima do formulário */
        padding: 15px; /* Reduz o padding */
}

    /* Ajustes nos inputs e labels */
    .form-label {
        font-size: 14px; /* Reduz o tamanho da fonte dos labels */
}

    .form-control {
        height: 35px; /* Reduz a altura dos inputs */
        font-size: 14px; /* Reduz o tamanho da fonte dos inputs */
}

    /* Ajustes nas colunas */
    .col-md-4, .col-md-6, .col-md-3, .col-md-2, .col-md-1 {
        width: 100%; /* Faz com que as colunas ocupem 100% da largura */
        margin-left: 0; /* Remove margens laterais */
}

    /* Ajustes específicos para o campo de DDD e Telefone */
    .col-md-1, .col-md-3 {
        width: 48%; /* Define uma largura menor para os campos de DDD e Telefone */
        margin-right: 2%; /* Adiciona um espaçamento entre os campos */
}

    /* Ajustes no botão de envio */
    .btn {
        width: 100%; /* Faz o botão ocupar toda a largura */
        font-size: 16px; /* Reduz o tamanho da fonte do botão */
}

    /* Ajustes no logo */
    .img_logo {
        width: 50%; /* Reduz o tamanho do logo */
        margin-left: 25%; /* Centraliza o logo */
}

    /* Ajustes nos títulos */
    .titulo1, .titulo2 {
        font-size: 24px; /* Reduz o tamanho da fonte dos títulos */
}

    /* Ajustes nos campos de CRO e UF CRO */
    .col-md-6.col-6 {
        width: 48%; /* Define uma largura menor para os campos de CRO e UF CRO */
        margin-right: 2%; /* Adiciona um espaçamento entre os campos */
}

    /* Ajustes nos campos de Logradouro, Número e Complemento */
    .col-md-3, .col-md-2 {
        width: 100%; /* Faz com que os campos ocupem 100% da largura */
        margin-right: 0; /* Remove margens laterais */
}

    /* Ajustes no campo de Número */
    .form-num {
        margin-left: -376px;
}

    /* Ajustes no campo de Complemento */
    .nome_comp {
        margin-left: 0; /* Remove a margem esquerda */
}

    /* Ajustes no campo de Data de Nascimento */
    .nome_dtNas {
        margin-left: 0; /* Remove a margem esquerda */
}

    /* Ajustes no campo de Município */
    .nome_muni {
        margin-left: 0; /* Remove a margem esquerda */
}

    /* Ajustes no campo de Bairro */
    .nome_bairro {
        margin-left: 0; /* Remove a margem esquerda */
}

    /* Ajustes no campo de CEP */
    .nome_cep {
        margin-left: 0; /* Remove a margem esquerda */
}

    /* Ajustes no campo de UF */
    .nome_uf {
        margin-left: 0; /* Remove a margem esquerda */
}

    /* Ajustes no campo de Logradouro */
    .nome_logra {
        margin-left: 0; /* Remove a margem esquerda */
}

    /* Ajustes no campo de Especialidade */
    .nome_esp {
        margin-left: 0; /* Remove a margem esquerda */
}

    /* Ajustes no campo de Telefone */
    .nome_tel {
        margin-left: 0; /* Remove a margem esquerda */
}

    /* Ajustes no campo de CPF */
    .nome_cpf {
        margin-left: 0; /* Remove a margem esquerda */
}
    }

@media (max-width: 1496px){
    .nome_dtNas {
        margin-left: 40%;
        width: 100%;
}
    .g-3{
        --bs-gutter-y: 0rem;
}

    }
    
    @media (max-width: 1024px) {
    .form-label {
        font-size: 14px; /* Ajusta o tamanho da fonte */
}

    .titulo1, .titulo2 {
        font-size: 24px; /* Ajusta o tamanho do título */
}

    .container {
        flex-direction: column; /* Organiza os elementos em coluna */
        gap: 10px;
}

    .control1, .control2, .control3, .control4, .control5, .control6, .control7, .control8, .control9, .control10, .control11, .control12, .control13, .control14, .control15, .control16 {
        width: 100%;
}

    /* Ajustes nos campos específicos */
    .control2, .control5, .control7 {
        margin-left: 0;
}

    .control9 {
        width: 100%;
        margin-left: 0;
}

    /* Reduz o tamanho das checkboxes para que se ajustem */
    .check_list, .check_list2 {
        flex-direction: column;
        width: 100%;
}

    .check_form, .check_form2 {
        margin-left: 0;
}

    .btn {
        width: 100%;
        font-size: 16px;
        padding: 10px;
}

    .div_logo .img_logo {
        width: 100%; /* Logo ajusta ao tamanho da tela */
}
    }
    
    @media (max-width: 1440px) {
    .form-label {
        font-size: 12px;
}

    .titulo1, .titulo2 {
        font-size: 20px;
}

    .container {
        flex-direction: row; /* Alinha as seções na horizontal */
        gap: 20px;
}

    .control1, .control2, .control3, .control4, .control5, .control6, .control7, .control8, .control9, .control10, .control11, .control12, .control13, .control14, .control15, .control16 {
        width: 48%; /* Faz os inputs ocuparem 48% da largura */
}

    .check_list, .check_list2 {
        width: 48%; /* Ajuste a largura das listas de checkboxes */
}

    .check_form, .check_form2 {
        margin-left: 0;
}

    .btn {
        font-size: 18px;
}

    .div_logo .img_logo {
        width: 50%;
}

    .g-3{
        --bs-gutter-y: 0rem;
}

    }
    
@media (max-width: 768px){
    body{
        display: block;
}
    
    input.control2 {
        width: 100%;
        height: 40px;
        margin-left: 0%;
}
    
    input.control3 {
        width: 100%;
        height: 40px;
}
    
    input.control4 {
        width: 504%;
        height: 40px;
}
    
    input.control5 {
        width: 102%;
        height: 40px;
        margin-left: 0%;
}
    
    input.control6 {
        width: 102%;
        height: 40px;
}
    
    input.control7 {
        width: 102%;
        height: 40px;
        margin-left: 0%;
}
    
    input.control8 {
        width: 371%;
        height: 40px;
}
    
    #inputUfCRO {
        width: 99%;
        height: 40px;
        margin-left: 2%;
}
    
    input.control10 {
        width: 99%;
        height: 40px;
        margin-left: 2%;
}
    
    input.control12 {
        width: 101%;
        height: 40px;
        margin-left: 0%;
}
    
    input.control13 {
        width: 101%;
        height: 40px;
        margin-left: 0%;
}
    
    input.control14 {
        width: 101%;
        height: 40px;
        margin-left: 0%;
}
    
    input.control15 {
        width: 102%;
        height: 40px;
        margin-left: 0%;
}
    
    input.control16 {
        width: 101%;
        height: 40px;
        margin-left: 0%;
}
    
    .titulo1, .titulo2 {
        color: rgb(51, 42, 42);
        display: flex;
        justify-content: center;
        font-family: "Montserrat", serif;
        font-weight: 600;
        font-size: 17px;
        margin-top: 85px;
        margin: 3%;
}
    
    .nome_esp {
        margin-left: 25%;
}
    
    .nome_tel {
        margin-left: 25%;
}
    
    .nome_ufCro {
        margin-left: 25%;
}
    
    .nome_cep {
        margin-left: 40%;
}
    
    .nome_muni {
        margin-left: 25%;
}
    
    .nome_bairro {
        margin-left: 40%;
}

    .nome_logra {
        margin-left: 30%;
}
    
    .nome_comp {
        margin-left: 25%;
}
    
    .check_list, .check_list2 {
        width: 100%; /* Em telas pequenas, a largura será de 100% */
        flex-direction: column; /* Alinha os itens na vertical */
}

    .check_form {
        width: 100%;
        padding: 10px; /* Adiciona um pouco de espaço */
}
    
    .check_list {
        width: 100%; /* No mobile, as seções vão ocupar a tela inteira */
        margin-bottom: 20px; /* Distância entre as seções */
}

    .check_list2 {
        width: 100%; /* No mobile, as seções vão ocupar a tela inteira */
        margin-top: 20px; /* Ajustando a margem superior */
}

    .container {
        flex-direction: column; /* Em telas pequenas, as seções ficam empilhadas */
        gap: 10px; /* Menor espaço entre as seções */
}

    .form-check {
        padding-left: 0em; /* Ajusta o espaço à esquerda para caber melhor na tela */
        margin-left: 0; /* Remove o ajuste de margem esquerda */
}
    
    .form-check2{
        padding-left: 0em;
        margin-left: -25px;
}
    }

@media (max-width: 438px){
    body{
        display: block;
}
    
    input.control2 {
        width: 100%;
        height: 40px;
        margin-left: 1%;
}
    
    input.control3 {
        width: 102%;
        height: 40px;
}
    
    input.control4 {
        width: 620%;
        height: 40px;
}
    
    input.control7 {
        width: 102%;
        height: 40px;
        margin-left: 1%;
}
    
    input.control10 {
        width: 103%;
        height: 40px;
        margin-left: 2%;
}
    
    input.control12 {
        width: 101%;
        height: 40px;
        margin-left: 0%;
}
    
    input.control14 {
        width: 108%;
        height: 40px;
}
    
    input.control15 {
        width: 109%;
        height: 40px;
        margin-left: 0%;
}
    
    input.control16 {
        width: 109%;
        height: 40px;
        margin-left: 0%;
}
    }