/*Classe padrão para estilizar o dimensionamento de todas mensagens de erro*/
.error-message {
    color: var(--Cor_Segundaria_2_1);
    width: 100%;

    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;

}

/*Sub classe para edições especificas, para a tag p, usando como referencia da classe, error-message*/
.error-message p {
    font-size: 1.2vw;
    font-family: var(--font_conteudo);

}

/*Cria toda a estilização do painel de pop up*/
.pop1,
.pop2 {

    position: absolute;
    left: 28vw;
    bottom: 28vh;

    opacity: 0;

    z-index: 10000;
    background-color: var(--Matriz);
    border-bottom: 0.2vw solid var(--Cor_Segundaria_5_1);
    border-top: 0.2vw solid var(--Cor_Segundaria_5_1);
    border-left: 0.2vw solid var(--Cor_Segundaria_5_1);
    border-right: 0.2vw solid var(--Cor_Segundaria_5_1);

    color: var(--Cor_Segundaria_5_1);
    width: 45vw;

    overflow: hidden;



    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    text-align: center;

    font-size: 1.2vw;
    font-family: var(--font_conteudo);

}

/*Coluna para alinhar, o X para fechar o pop up*/
.colum_1 {
    width: 44vw;
    padding-top: 2vh;

    height: 5vh;
    opacity: 1;
    display: flex;
    justify-content: start;
    align-items: center;
    align-content: center;

}

/*Coluna para alinhar, o texto de resposta*/
.colum_2 {
    width: 44.6vw;
    height: 45vh;
    padding-bottom: 2vh;
    overflow-y: auto;

    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;

}

/*Cria toda a estilização de botão para fechar o pop up*/
.X {

    padding-left: 1vw;
    border: none;
    background: none;
    outline: none;

    color: var(--Cor_Segundaria_5_1);
    font-family: var(--font_conteudo);
    transition: 1s ease;
    font-size: 1.5vw;
}

/*Defini uma interatividade com o mouse, onde toda a vez que o mouse ficar sobre ele, ele por sua vez ira mudar de cor*/
.X:hover {
    color: var(--Cor_Segundaria_2_1);
    transition: 1s ease;
}