/*Pop_user*/

.Pop_up_Config.PainelEstilo .Pop_up_Config.PainelUser {
    color: #000;
    /*define a cor */
}


.Pop_up_Config.PainelEstilo {
    display: none;
    /* define o display como none*/
    border: none;
    /*retira a borda padrao do html*/
    flex-direction: column;
    /*define a direção dos itens na div*/
    width: 40vw;
    /*define largura*/
    height: 70vh;
    /*Define altura*/
    border-radius: 3vw;
    /*define tamanho da borda*/
    position: absolute;
    /*define se que o elemento ta solto*/
    top: 10vh;
    /*define o quao pra cima vai estar o objeto*/
    left: 30vw;
    /*define o qual para esquerda o objeto vai estar */
    background-color: #D9D9D9;
    /*define a cor de fundo*/

}

.Pop_up_Config.PainelEstilo .PainelFechar button {
    border: none;
    /*tira a borda do html*/
    background: none;
    /*tira o backgrond*/
    outline: none;
    /*tira a borda de foco*/
    width: 2vw;
    /*define largura*/
    height: 2vw;
    /*define altura*/
    margin-left: 1vw;
    /*define a margin da esquerda*/
    margin-top: 1vw;
    /*define a margin de cima*/
    color: var(--Matriz);
    /* Cor do texto do botão */
    background-color: var(--Cor_Segundaria_5_1);
    /* Cor de fundo do botão */
    border-radius: 12vh;
    /*define aredondamento da borda*/
    transition: 1s ease;
    /* Transição suave de 1 segundo */
    font-family: var(--font_conteudo);
    /*define a fonte */
    font-size: 0.8vw;
    /*define tamanho*/
}

.Pop_up_Config.PainelEstilo .PainelFechar button:hover {
    color: var(--Cor_Segundaria_5_1);
    /* Muda a cor do texto */
    background-color: var(--Matriz);
    /* Muda a cor de fundo */
    transition: 1s ease;
    /* Transição suave de 1 segundo */
    font-family: var(--font_titulo);
    /*define a fonte usada*/
}

.Pop_up_Config.PainelEstilo .PainelFechar .TituloPopup img {
    width: 2vw;
    /*define largura*/
    height: 2vw;
    /*define altura*/
    font-size: 0.8vw;
    /*define tamanho da fonte*/
}

.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Perfil button {
    color: var(--Cor_Segundaria_5_1);
    /* Muda a cor do texto */
    background: none;
    /*deixa sem background*/
    outline: none;
    /*tira a borda de foco*/
    border: none;
    /*tira a borda*/
    background-color: var(--Matriz);
    /* Muda a cor de fundo */
    width: 10vw;
    /*define a laregura*/
    height: 20vh;
    /*define a altura*/
    border-radius: 12vh;
    /*define o quao arredondado fica a borda*/
    font-size: 2.5vw;
    /*define o tamanho da fonte*/
    justify-content: center;
    /* Alinha os itens horizontalmente no centro do container */
    align-items: center;
    /* Alinha os itens verticalmente no centro do container */
    font-family: var(--font_titulo);
    /* Define a fonte para o título, utilizando uma variável CSS */

}

.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Fundo button {
    color: var(--Cor_Segundaria_5_1);
    /* Muda a cor do texto */
    background: none;
    /* Remove o fundo do elemento */
    outline: none;
    /* Remove a borda de foco (outline) */
    border: none;
    /* Remove a borda do elemento */
    background-color: var(--Matriz);
    /* Muda a cor de fundo */
    width: 10vw;
    /* Define a largura do elemento como 10% da largura da janela de visualização */
    height: 20vh;
    /* Define a altura do elemento como 20% da altura da janela de visualização */
    justify-content: center;
    /* Alinha os itens horizontalmente no centro do container */
    align-items: center;
    /* Alinha os itens verticalmente no centro do container */
    font-family: var(--font_titulo);
    /* Define a fonte para o título, utilizando uma variável CSS */
    font-size: 2.5vw;
    /* Define o tamanho da fonte como 0.8% da largura da janela de visualização */
}


.Pop_up_Config.PainelManual {
    display: none;
    /* Esconde o elemento da página (não será exibido) */

    width: 40vw;
    /* Define a largura do elemento como 40% da largura da janela de visualização */

    height: 70vh;
    /* Define a altura do elemento como 70% da altura da janela de visualização */

    margin: 1vh;
    /* Adiciona uma margem de 1% da altura da janela de visualização */

    position: absolute;
    /* Posiciona o elemento de forma absoluta em relação ao contêiner mais próximo */

    top: 10vh;
    /* Define a distância do topo do contêiner (10% da altura da janela de visualização) */

    left: 30vw;
    /* Define a distância da esquerda do contêiner (30% da largura da janela de visualização) */

    background-color: black;
    /* Define o fundo do elemento com cor preta */
}


.Pop_up_Config.PainelEstilo .PainelFechar .TituloPopup h2 {
    font-family: var(--font_titulo);
    /* Define a fonte para o título, utilizando uma variável CSS */

    color: rgb(0, 55, 100);
    /* Define a cor do texto usando valores RGB (azul escuro) */

    font-size: 3vh;
    /* Define o tamanho da fonte como 3% da altura da janela de visualização */

}




.Pop_up_Config.PainelEstilo .PainelFechar {
    width: 100%;
    /* Define a largura do elemento como 100% da largura do contêiner pai */

    align-items: center;
    /* Alinha os itens verticalmente no centro do container (quando usando flexbox) */

    font-family: var(--font_titulo);
    /* Define a fonte para o título, utilizando uma variável CSS */

    display: flex;
    /* Define o layout como flexbox, permitindo o uso das propriedades de alinhamento e direção */

    flex-direction: row;
    /* Define a direção dos itens dentro do flexbox como linha (horizontal) */

    height: 10%;
    /* Define a altura do elemento como 10% da altura do contêiner pai */

}

.Pop_up_Config.PainelEstilo .PainelFechar .TituloPopup {
    margin-top: 2vh;
    /* Adiciona uma margem no topo do elemento equivalente a 2% da altura da janela de visualização */

    width: 80%;
    /* Define a largura do elemento como 80% da largura do contêiner pai */

    display: flex;
    /* Define o layout como flexbox, permitindo o uso das propriedades de alinhamento e direção */

    align-items: center;
    /* Alinha os itens verticalmente no centro do container (quando usando flexbox) */

    justify-content: center;
    /* Alinha os itens horizontalmente no centro do container (quando usando flexbox) */

    flex-direction: row;
    /* Define a direção dos itens dentro do flexbox como linha (horizontal) */

    gap: 0.8vw;
    /* Define o espaço entre os itens dentro do container como 0.8% da largura da janela de visualização */

    height: 15%;
    /* Define a altura do elemento como 15% da altura do contêiner pai */

}

.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Perfil label {
    font-family: var(--font_conteudo);
    /* define a fonte*/
    color: rgb(0, 55, 100);
    /* define a cor */
    font-size: 1.8vw;
    /* define tamanho*/

}

.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Fundo label {
    font-family: var(--font_conteudo);
    /* define a fonte*/
    color: rgb(0, 55, 100);
    /* define a cor */
    font-size: 1.8vw;
    /* define tamanho*/
}

.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Perfil {
    margin-top: 2vh;
    /*define a margin de cima*/
    width: 100%;
    /*largura*/
    display: flex;
    /*define o dysplay */
    align-items: center;
    /*alinhar os itens no eixo transversal */
    justify-content: center;
    /*para alinhar os itens ao longo do eixo principal */
    flex-direction: column;
    /* alterar a direção do eixo principal dentro de um contêiner flexível.*/
    height: 30%;
    /*definir a altura de um elemento como uma porcentagem em relação à altura do seu elemento pai.*/
}

.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Fundo {
    margin-top: 2vh;
    /* Dá uma margem superior de 2% da altura da janela de visualização */

    width: 100%;
    /* Define a largura do elemento para 100% da largura do seu contêiner pai */

    display: flex;
    /* Define o contêiner como um flexbox para controlar o layout dos filhos */

    align-items: center;
    /* Alinha os itens ao longo do eixo transversal (horizontal) no centro */

    justify-content: center;
    /* Alinha os itens ao longo do eixo principal (vertical, já que o flex-direction está em coluna) no centro */

    flex-direction: column;
    /* Define que o eixo principal do layout será vertical (os itens serão organizados em uma coluna) */

    height: 30%;
    /* Define a altura do elemento para 30% da altura do seu contêiner pai */

}

.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Enviar {
    margin-top: 2vh;
    /* Define uma margem superior de 2% da altura da janela de visualização (a altura da tela) */

    height: 5%;
    /* Define a altura do elemento como 5% da altura do seu contêiner pai */

    display: flex;
    /* Define o contêiner como um flexbox, permitindo controlar o layout dos itens filhos de forma flexível */

    align-items: center;
    /* Alinha os itens ao longo do eixo transversal (horizontal) no centro do contêiner */

    justify-content: center;
    /* Alinha os itens ao longo do eixo principal (vertical, no caso de flex-direction ser o padrão, que é horizontal) no centro */
}

.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Enviar button {
    margin-top: 1vh;
    /* Define uma margem superior de 1% da altura da janela de visualização (altura da tela) */

    border: none;
    /* Remove qualquer borda do elemento (como se fosse um botão, por exemplo) */

    background: none;
    /* Remove qualquer fundo anterior, deixando o fundo transparente (pode ser redundante com o background-color) */

    outline: none;
    /* Remove a linha de foco ao clicar no elemento (geralmente usada em botões ou links) */

    width: 12vw;
    /* Define a largura do elemento como 12% da largura da janela de visualização (tela) */

    height: 5vh;
    /* Define a altura do elemento como 8% da altura da janela de visualização (tela) */

    font-size: 0.8vw;
    /* Define o tamanho da fonte como 0.8% da largura da janela de visualização, ajustando o texto de acordo com o tamanho da tela */

    color: #D9D9D9;
    /* Define a cor do texto para um cinza claro (#D9D9D9) */

    background-color: var(--Cor_Segundaria_5_1);
    /* Define a cor de fundo usando uma variável CSS personalizada (substituída por um valor real da variável) */

    border-radius: 12vh;
    /* Define um raio de borda grande, criando bordas arredondadas com um valor proporcional à altura da tela */

    transition: 1s ease;
    /* Adiciona uma transição suave de 1 segundo, com um efeito de suavização "ease" (transição mais natural) */

    font-family: var(--font_conteudo);
    /* Define a fonte do texto usando uma variável CSS personalizada para a família de fontes (substituída pelo valor real da variável) */

    font-size: 0.8vw;
    /* Define novamente o tamanho da fonte, repetindo a linha anterior */

}



.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Enviar button:hover {
    color: var(--Cor_Segundaria_5_1);
    /* Muda a cor do texto */
    background-color: #D9D9D9;
    /* Muda a cor de fundo */
    transition: 1s ease;
    /* Transição suave de 1 segundo */
}

/*pop user*/
.Pop_up_Config.PainelUser .PainelConteudo .TituloPopup img {
    width: 3vw;
    /* Define a largura do elemento como 3% da largura da janela de visualização (tela) */

    height: 3vw;
    /* Define a altura do elemento como 3% da largura da janela de visualização (tela) */

    font-size: 1.8vw;
    /* Define o tamanho da fonte como 1.8% da largura da janela de visualização (tela), ajustando o texto de acordo com a largura da tela */

}

.Pop_up_Config.PainelUser {

    display: none;
    /* Oculta o elemento, fazendo com que ele não seja exibido na página. (Se for necessário exibir o elemento, você pode usar display: block ou outro valor adequado) */

    flex-direction: column;
    /* Define que o layout do contêiner flex será em coluna, organizando os itens de cima para baixo (funciona somente se o elemento for um contêiner flex). */

    width: 40vw;
    /* Define a largura do elemento como 40% da largura da janela de visualização (tela). */

    height: 80vh;
    /* Define a altura do elemento como 80% da altura da janela de visualização (tela). */

    margin: 1vh;
    /* Define uma margem ao redor do elemento de 1% da altura da janela de visualização (tela). Isso cria um espaço ao redor do elemento. */

    position: absolute;
    /* Define que o elemento será posicionado de forma absoluta em relação ao seu contêiner pai mais próximo com position relativa ou ao documento, se não houver um contêiner com position relativa. */

    top: 10vh;
    /* Define a posição do topo do elemento a 10% da altura da janela de visualização (tela), movendo o elemento para baixo em relação ao seu contêiner pai ou ao documento. */

    left: 30vw;
    /* Define a posição do lado esquerdo do elemento a 30% da largura da janela de visualização (tela), movendo o elemento para a direita em relação ao seu contêiner pai ou ao documento. */

    border-radius: 3vw;
    /* Define bordas arredondadas com um raio de 3% da largura da janela de visualização, criando bordas suavemente arredondadas. */

    background-color: #D9D9D9;
    /* Define a cor de fundo do elemento como um tom de cinza claro (#D9D9D9). */

    border: 0.2vw solid var(--Cor_Segundaria_5_1);
    /* Define uma borda de 0.2% da largura da janela de visualização, com uma cor sólida baseada em uma variável CSS personalizada chamada --Cor_Segundaria_5_1. */



}

.Pop_up_Config.PainelUser .TituloPopup {
    display: flex;
    /* Define o contêiner como um flexbox, permitindo organizar os itens dentro dele de maneira flexível. */

    flex-direction: row;
    /* Organiza os itens dentro do contêiner de forma **horizontal** (na linha), ou seja, os itens serão dispostos da esquerda para a direita. */


}



.Pop_up_Config.PainelUser .PainelFechar button {
    background: none;
    /* Remove qualquer fundo do elemento, deixando-o transparente ou sem qualquer imagem/fundo definido. */

    outline: none;
    /* Remove a linha de contorno que aparece ao clicar no elemento (geralmente usada para mostrar o foco, como em botões ou links). */

    border: none;
    /* Remove qualquer borda do elemento, tornando-o sem borda visível. */

    color: #D9D9D9;
    /* Define a cor do texto como um tom de cinza claro (#D9D9D9). */

    width: 2vw;
    /* Define a largura do elemento como 2% da largura da janela de visualização (tela). */

    height: 4vh;
    /* Define a altura do elemento como 4% da altura da janela de visualização (tela). */

    background-color: var(--Cor_Segundaria_5_1);
    /* Define a cor de fundo do elemento usando uma variável CSS personalizada (no caso, a variável --Cor_Segundaria_5_1, que será substituída pelo valor real da variável). */

    border-radius: 12vh;
    /* Define bordas arredondadas com um valor de 12% da altura da tela (o que cria um formato bem arredondado, quase circular dependendo das proporções da tela). */

    transition: 1s ease;
    /* Define uma transição suave de 1 segundo, com um efeito de suavização "ease" (transição gradual que começa mais devagar, acelera no meio e desacelera no final). */

    font-family: var(--font_conteudo);
    /* Define a fonte do texto utilizando uma variável CSS personalizada para a família de fontes (será substituída pelo valor real da variável). */

    font-size: 0.8vw;
    /* Define o tamanho da fonte como 0.8% da largura da janela de visualização (tela), fazendo com que o texto seja responsivo e se ajuste ao tamanho da tela. */



}

#VoltarPopup {
    background: none;
    /* Remove qualquer fundo do elemento (sem cor ou imagem de fundo) */
    outline: none;
    /* Remove a linha de contorno que aparece ao focar o elemento (geralmente ao clicar em botões ou links) */
    border: none;
    /* Remove qualquer borda visível do elemento */
    color: #D9D9D9;
    /* Define a cor do texto para um tom de cinza claro (#D9D9D9) */
    width: 7vw;
    /* Define a largura do elemento como 7% da largura da janela de visualização (tela), ajustando-se automaticamente ao tamanho da tela */
    height: 4vh;
    /* Define a altura do elemento como 4% da altura da janela de visualização (tela), ajustando-se automaticamente ao tamanho da tela */
    background-color: var(--Cor_Segundaria_5_1);
    /* Define a cor de fundo do elemento utilizando uma variável CSS personalizada chamada --Cor_Segundaria_5_1, que será substituída pelo valor da variável */
    border-radius: 12vh;
    /* Define bordas arredondadas com um valor de 12% da altura da tela, criando bordas muito arredondadas, quase circulares */
    transition: 1s ease;
    /* Adiciona uma transição suave de 1 segundo, com um efeito de suavização "ease" (transição gradual que acelera e desacelera de forma natural) */
    font-family: var(--font_conteudo);
    /* Define a fonte do texto usando uma variável CSS personalizada chamada --font_conteudo, que será substituída pelo valor real da variável */
    font-size: 0.8vw;
    /* Define o tamanho da fonte como 0.8% da largura da janela de visualização, fazendo o texto responsivo e ajustando automaticamente ao tamanho da tela */

}

#VoltarPopup:hover {
    color: var(--Cor_Segundaria_5_1);
    /* Muda a cor do texto */
    background-color: white;
    /* Muda a cor de fundo */
    transition: 1s ease;
    /* Transição suave de 1 segundo */

}

.Pop_up_Config.PainelUser .PainelFechar button:hover {
    color: var(--Cor_Segundaria_5_1);
    /* Muda a cor do texto */
    background-color: white;
    /* Muda a cor de fundo */
    transition: 1s ease;
    /* Transição suave de 1 segundo */


}

.Pop_up_Config.PainelUser .PainelFechar {

    border-radius: 12vh;
    /* Define bordas arredondadas no elemento com um raio de 12% da altura da tela, criando bordas muito arredondadas, quase circulares. */

    transition: 1s ease;
    /* Aplica uma transição suave de 1 segundo, com um efeito de suavização "ease", o que significa que a mudança ocorrerá lentamente no início e no final da animação. */

    font-family: var(--font_conteudo);
    /* Define a fonte do texto usando uma variável CSS personalizada chamada --font_conteudo, permitindo flexibilidade na escolha da fonte. */

    font-size: 0.8vw;
    /* Define o tamanho da fonte como 0.8% da largura da janela de visualização, tornando o texto responsivo ao tamanho da tela. */

    align-items: end;
    /* Alinha os itens dentro do contêiner flex ao **final** do eixo transversal (em um contêiner com `flex-direction: row`, o eixo transversal é vertical). Ou seja, os itens são alinhados na parte inferior. */

    display: flex;
    /* Define o elemento como um contêiner flexível, permitindo que você organize os itens dentro dele usando as propriedades flexbox. */

    flex-direction: row;
    /* Organiza os itens dentro do contêiner de forma **horizontal** (em uma linha), ou seja, os itens serão dispostos da esquerda para a direita. Esse é o comportamento padrão de um contêiner flex. */

    margin-top: 1vw;
    /* Adiciona uma margem superior de 1% da largura da janela de visualização, criando um espaço acima do elemento. */

    margin-left: 1vw;
    /* Adiciona uma margem à esquerda do elemento de 1% da largura da janela de visualização, criando espaço à esquerda do elemento. */

    margin-right: 1vw;
    /* Adiciona uma margem à direita do elemento de 1% da largura da janela de visualização, criando espaço à direita do elemento. */

    justify-content: space-between;
    /* Define que os itens dentro do contêiner flex serão distribuídos ao longo do eixo principal (horizontal, neste caso), com espaço igual entre eles, deixando o primeiro item no início e o último no final do contêiner. */

}


.Pop_up_Config.PainelUser .PainelConteudo .TituloPopup {
    gap: 1vw;
    /* Define um espaço de 1% da largura da janela de visualização entre os itens dentro do contêiner flexível. Essa propriedade cria um espaço igual entre os elementos filhos do contêiner. */

    width: 100%;
    /* Define a largura do contêiner como 100% da largura da janela de visualização, fazendo com que ele ocupe toda a largura disponível da tela. */

    display: flex;
    /* Define o contêiner como um **flexbox**, permitindo usar as propriedades do flexbox para organizar os itens dentro dele de maneira flexível. */

    align-items: center;
    /* Alinha os itens dentro do contêiner **verticalmente** no centro do contêiner (no eixo transversal, ou seja, o eixo perpendicular à direção principal). */

    justify-content: center;
    /* Alinha os itens dentro do contêiner **horizontalmente** no centro do contêiner (ao longo do eixo principal, ou seja, o eixo de distribuição). */

    font-family: var(--font_titulo);
    /* Define a fonte do texto dentro do contêiner como uma variável CSS personalizada chamada --font_titulo. O valor real da variável será substituído, permitindo flexibilidade na escolha da fonte. */

}

.Pop_up_Config.PainelUser .PainelConteudo .TituloPopup {
    color: var(--Cor_Segundaria_5_1);
    /*define a cor com uma variavel no css*/
    font-family: var(--font_titulo);
    /* Define a fonte do texto dentro do contêiner como uma variável CSS personalizada chamada --font_titulo. O valor real da variável será substituído, permitindo flexibilidade na escolha da fonte. */
}

.Pop_up_Config.PainelUser .PainelConteudo {
    flex-direction: column;
    /* Define a direção dos itens dentro do contêiner flex como **coluna**, ou seja, os itens serão organizados **verticalmente** (um embaixo do outro). */

    width: 100%;
    /* Define a largura do contêiner como **100% da largura da janela de visualização**, fazendo com que o contêiner ocupe toda a largura disponível na tela. */

    display: flex;
    /* Define o elemento como um **contêiner flexível**, permitindo usar o layout flexbox para organizar os itens de forma dinâmica e flexível. */

    align-items: center;
    /* Alinha os itens **verticalmente** no centro do contêiner (no eixo transversal). Isso é útil quando os itens têm alturas variadas e você quer que eles fiquem centralizados na área disponível. */

    justify-content: center;
    /* Alinha os itens **horizontalmente** no centro do contêiner (ao longo do eixo principal, ou seja, o eixo de distribuição). Isso garante que os itens sejam centralizados na tela ou no contêiner disponível. */


}


.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao h2 {
    font-family: var(--font_titulo);
    /* Define a **família de fontes** do texto dentro do elemento utilizando uma variável CSS personalizada chamada --font_titulo. O valor real dessa variável será substituído, permitindo flexibilidade na escolha da fonte. */

    color: rgb(0, 55, 100);
    /* Define a **cor do texto** utilizando o modelo de cor RGB (vermelho, verde, azul). Neste caso, o texto será da cor **azul escuro**, com 0 de vermelho, 55 de verde e 100 de azul. */

    font-size: 3vh;
    /* Define o **tamanho da fonte** como 3% da altura da janela de visualização. Isso significa que o tamanho da fonte será adaptado com base na altura da tela, tornando o texto responsivo. */

    width: 25vw;
    /* Define a **largura** do elemento como 25% da largura da janela de visualização. Isso faz com que o elemento ocupe uma fração da largura da tela. */

    height: 5vh;
    /* Define a **altura** do elemento como 5% da altura da janela de visualização. Isso faz com que a altura do elemento seja adaptável ao tamanho da tela. */


}


.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao {
    display: flex;
    /* Define o elemento como um **contêiner flexível**, permitindo usar o layout flexbox para organizar os itens dentro dele de maneira flexível. */

    align-items: center;
    /* Alinha os itens **verticalmente** no centro do contêiner (no eixo transversal). Isso garante que, independentemente das alturas dos itens, todos fiquem centralizados no contêiner. */

    justify-content: center;
    /* Alinha os itens **horizontalmente** no centro do contêiner (ao longo do eixo principal). Isso garante que os itens sejam centralizados ao longo da linha ou coluna do contêiner flexível. */

    flex-direction: column;
    /* Define a direção dos itens dentro do contêiner flex como **coluna**. Isso significa que os itens serão organizados **verticalmente** (um embaixo do outro), ao invés de ficarem lado a lado, como é o padrão. */


}

.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao select {
    width: 25vw;
    /* Define a **largura** do elemento como 25% da **largura da janela de visualização** (tela). Isso faz com que o elemento ocupe uma fração da largura da tela, adaptando-se ao tamanho da janela. */

    height: 4vh;
    /* Define a **altura** do elemento como 4% da **altura da janela de visualização**. Isso significa que a altura do elemento será proporcional à altura da tela, tornando o layout responsivo. */

    font-family: var(--font_conteudo);
    /* Define a **família de fontes** do texto dentro do elemento usando uma variável CSS personalizada chamada `--font_conteudo`. Essa variável pode ser definida em outro lugar no código, permitindo flexibilidade no uso de fontes. */

    font-size: 1vw;
    /* Define o **tamanho da fonte** como 1% da **largura da janela de visualização**. Isso torna o tamanho do texto responsivo ao tamanho da tela, adaptando-se conforme a largura da janela. */

    color: var(--Cor_Segundaria_5_1);
    /* Define a **cor do texto** utilizando uma variável CSS personalizada chamada `--Cor_Segundaria_5_1`. A cor será substituída pela definição da variável em outro lugar no código. */

    border-radius: 12vh;
    /* Define o **raio de borda** como 12% da **altura da janela de visualização**, criando bordas **muito arredondadas**. Isso torna a borda do elemento extremamente curvada, criando um efeito de bordas quase circulares. */

}

.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao_criar button {
    width: 25vw;
    /* Define a **largura** do elemento como 25% da **largura da janela de visualização** (tela). Isso faz com que o elemento ocupe uma fração da largura da tela, adaptando-se ao tamanho da janela. */

    height: 4vh;
    /* Define a **altura** do elemento como 4% da **altura da janela de visualização**. Isso significa que a altura do elemento será proporcional à altura da tela, tornando o layout responsivo. */

    font-family: var(--font_conteudo);
    /* Define a **família de fontes** do texto dentro do elemento usando uma variável CSS personalizada chamada `--font_conteudo`. Essa variável pode ser definida em outro lugar no código, permitindo flexibilidade no uso de fontes. */

    font-size: 1vw;
    /* Define o **tamanho da fonte** como 1% da **largura da janela de visualização**. Isso torna o tamanho do texto responsivo ao tamanho da tela, adaptando-se conforme a largura da janela. */

    color: var(--Cor_Segundaria_5_1);
    /* Define a **cor do texto** utilizando uma variável CSS personalizada chamada `--Cor_Segundaria_5_1`. A cor será substituída pela definição da variável em outro lugar no código. */

    border-radius: 12vh;
    /* Define o **raio de borda** como 12% da **altura da janela de visualização**, criando bordas **muito arredondadas**. Isso torna a borda do elemento extremamente curvada, criando um efeito de bordas quase circulares. */
    margin-right: 5vw;
}


.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao_criar button:hover {
    color: white;
    /* Muda a cor do texto */
    background-color: var(--Cor_Segundaria_5_1);
    /* Muda a cor de fundo */
    transition: 1s ease;
    /* Transição suave de 1 segundo */


}

.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao input {
    background: none;
    /* Remove o **fundo** do elemento, ou seja, o elemento não terá cor de fundo, imagem ou gradiente. Isso pode ser útil quando você não quer que o fundo do elemento sobrescreva outros estilos. */

    outline: none;
    /* Remove o **contorno** do elemento, geralmente usado para remover o contorno que aparece quando o elemento recebe foco, como no caso de campos de formulário. */

    border: none;
    /* Remove qualquer **borda** do elemento, deixando-o sem bordas visíveis. Isso é útil se você não quiser bordas padrão nos elementos. */

    font-family: var(--font_conteudo);
    /* Define a **família de fontes** do texto dentro do elemento usando uma variável CSS personalizada chamada `--font_conteudo`. A fonte será adaptada de acordo com a variável definida em outro lugar no código. */

    border-bottom: 0.2vw solid var(--Cor_Segundaria_5_1);
    /* Adiciona uma **borda inferior** ao elemento com espessura de **0.2% da largura da janela** (usando `vw`) e uma cor definida pela variável CSS `--Cor_Segundaria_5_1`. Isso cria uma linha na parte inferior do elemento, normalmente usada para campos de texto ou links. */

    color: var(--Cor_Segundaria_5_1);
    /* Define a **cor do texto** utilizando a variável CSS personalizada `--Cor_Segundaria_5_1`. O valor real dessa cor será substituído pela variável em outro lugar do código. */

    font-size: var(--Matriz);
    /* Define o **tamanho da fonte** utilizando uma variável CSS personalizada chamada `--Matriz`. Isso permite que o tamanho da fonte seja ajustado conforme o valor dessa variável em outro lugar do código. */

    width: 25vw;
    /* Define a **largura** do elemento como 25% da **largura da janela de visualização** (tela), o que faz o elemento se adaptar à largura da tela. */

    height: 7vh;
    /* Define a **altura** do elemento como 7% da **altura da janela de visualização** (tela), fazendo com que o elemento seja adaptável ao tamanho da tela. */

    font-size: 1.8vw;
    /* Define o **tamanho da fonte** como 1.8% da **largura da janela de visualização** (tela), tornando o tamanho da fonte responsivo. */

}

.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao_criar {
    display: flex;
    /* Define o elemento como um **contêiner flexível**, permitindo o uso do layout flexbox para organizar os itens dentro dele de maneira flexível e dinâmica. */

    align-items: end;
    /* Alinha os itens **ao final** do eixo transversal (vertical), ou seja, coloca os itens na **parte inferior** do contêiner se o `flex-direction` for `column`. Caso contrário, no eixo horizontal, eles seriam alinhados à direita. */

    justify-content: center;
    /* Alinha os itens **ao centro** ao longo do eixo principal (horizontal ou vertical, dependendo de `flex-direction`). No caso de `flex-direction: column`, isso significa que os itens serão centralizados verticalmente no contêiner. */

    flex-direction: column;
    /* Define que os itens dentro do contêiner flex serão organizados em **coluna**, ou seja, um embaixo do outro. Se fosse `row`, os itens seriam organizados horizontalmente, da esquerda para a direita. */

    width: 35vw;
    /* Define a **largura** do elemento como 35% da **largura da janela de visualização**. Isso faz com que o elemento ocupe uma parte proporcional da largura da tela, adaptando-se ao tamanho da janela. */

}

.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao p {
    background: none;
    /* Remove qualquer **fundo** do elemento, ou seja, o elemento não terá cor de fundo, imagem ou gradiente. Isso pode ser útil quando você não quer que o fundo do elemento sobrescreva outros estilos. */
    outline: none;
    /* Remove o **contorno** do elemento, que geralmente aparece quando um campo de formulário ou botão é selecionado ou recebe o foco. Isso pode ser usado para melhorar a aparência visual do elemento, especialmente quando não se deseja um contorno. */
    border: none;
    /* Remove qualquer **borda** visível do elemento, deixando-o sem bordas. Isso é útil quando você deseja um visual limpo e sem elementos de contorno padrão, como no caso de botões ou campos de texto. */
    font-family: var(--font_conteudo);
    /* Define a **família de fontes** do texto dentro do elemento utilizando uma variável CSS personalizada chamada `--font_conteudo`. Isso permite alterar facilmente a fonte de todo o projeto, utilizando um valor variável em vez de uma fonte fixa. */
    color: var(--Cor_Segundaria_5_1);
    /* Define a **cor do texto** utilizando uma variável CSS personalizada chamada `--Cor_Segundaria_5_1`. Isso permite controlar a cor do texto centralmente no projeto, alterando a variável em vez de ajustar cada instância de cor individualmente. */
    font-size: var(--Matriz);
    /* Define o **tamanho da fonte** utilizando uma variável CSS personalizada chamada `--Matriz`. Assim, o tamanho da fonte será adaptado conforme o valor dessa variável, facilitando ajustes de estilo em todo o projeto. */
    font-size: 0.8vw;
    /* Define o **tamanho da fonte** como 0.8% da **largura da janela de visualização** (tela). Isso torna o tamanho da fonte **responsivo**, adaptando-se ao tamanho da tela, o que é útil em layouts fluidos e adaptáveis a diferentes dispositivos. */
}