:root {
    --principal: #078071;
    --verdao: #04574d;
    --cinzinha: #ebf0f1;
    --destaque: #ED8E96;
    --rosinha: #f0b6bc;
    --rosão: #C05367;
    --branquinho: #ffffff;
    --verdinho: #7EC4BB;
    --cinzaclaro: #272626;
    --cinza: #1B1B1B;

    width: 100%;
    height: 100%;

    font-family: Poppins-regular, Roboto;
}

@font-face {
    font-family: 'Cooper';
    src: url('../fontes/cooperhewitt-heavy.otf');
}

@font-face {
    font-family: 'Poppins';
    src: url('../fontes/Poppins-ExtraBold.ttf');
}

@font-face {
    font-family: 'Poppins-regular';
    src: url('../fontes/Poppins-Regular.ttf');
}

@font-face {
    font-family: 'Poppins-semibold';
    src: url('../fontes/Poppins-SemiBold.ttf');
}

@font-face {
    font-family: 'Poppins-medium';
    src: url('../fontes/Poppins-Medium.ttf');
}

body {
    background-color: #ebf0f1;
    ;
}


.center-icon {
    display: flex;
    align-items: center;
    /* Centraliza verticalmente */
    justify-content: center;
    /* Centraliza horizontalmente */
    height: 100%;
    /* Ocupa a altura da tela */
}


.fa-user {
    font-size: 150px;
    color: #333;
}

.profile-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Estilos opcionais para o conteúdo */
.profile-info p {
    margin: 0;
    text-align: center;
    justify-content: center;
    color: #078071;
}

/* Defina a largura das colunas (50% para cada coluna) */
.profile-info .column {
    width: calc(50% - 10px);
    /* Leva em consideração o espaço entre as colunas */
}


.custom-dialog {
    margin-top: 10px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 300px;
    justify-content: center;
}

.modo-escuro .custom-dialog {
    background-color: #272626;
}

.modo-escuro .custom-dialog h3 {
    color: #C05367;
}

.custom-dialog h3 {
    font-family: Poppins-semibold;
    color: #04574d;
    margin-top: 0;
}

.modo-escuro .dialogLabel{
    color: #f0b6bc;
}

.custom-dialog-buttons {
    display: flex;
    justify-content: space-between;
}

.dialogLabel {
    color: #078071;
    font-family: Poppins-regular;
}

.modo-escuro .dialogLabel {
    color: #7EC4BB !important;
}

.modo-escuro .dialogInput {
    background-color: #1B1B1B;
}

.dialogInput {
    color: #ffffff;
    background-color: #f0b6bc;
    border-radius: 4px;
    border: 1px solid #C05367;
}

.modo-escuro #erroInvalidoDeletar, .modo-escuro #erroInvalidoAlterar, p.erroSenhaNaoCorresponde {
    color: #ffffff;
}

#erroInvalidoDeletar, #erroInvalidoAlterar, p.erroSenhaNaoCorresponde {
    text-align: left !important;
    color: #C05367;
    font-family: Poppins-semibold;
}

#subtitulo {
    color: #04574d;
    font-family: Poppins-semibold;
    margin-top: 50px;
    margin-bottom: 5px;
    font-size: 20px;
}

.modo-escuro #subtitulo {
    color: #078071
}

#subtituloRec {
    color: #04574d;
    font-family: Poppins-semibold;
    margin-bottom: 5px;
    font-size: 16px;
}

.modo-escuro #subtituloRec {
    color: #f0b6bc;
}

#subtituloemail {
    color: #04574d;
    font-family: Poppins-semibold;
    font-size: 20px;
    position: relative;
    top: -7px;
}

#conteudoemail {
    color: #078071;
    font-family: Poppins-regular;
    font-size: 17px;
    text-decoration: underline dotted;
    position: relative;
    top: -10px;

}

#icon {
    margin-bottom: 5px;
    width: 270px;
    height: auto;
}

#acesso {
    font-family: Poppins-semibold;
    color: #04574d;
    font-size: 23px;
    text-decoration: underline dotted;

}

#conteudo {
    color: #078071;
    font-family: Poppins-regular;
    font-size: 17px;
    text-decoration: underline dotted;
}

#complemento {
    font-family: "Poppins-regular";
}

#usuarionome {
    color: #078071;
    font-family: Poppins;
    font-size: 45px;
}

#btn-perfil {
    background-color: #C05367;
    color: #ffffff !important;
    font-family: Poppins;
    font-size: 19px;
    width: 17rem;
    height: auto;
}

#btn-perfil:hover {
    background-color: #f0b6bc;
    color: #ffffff;
    font-family: Poppins;
    font-size: 19px;
    width: 17rem;
    height: auto;
}


.btn-perfil p, .senhaNovaDiv p {
    margin: 0;
    text-align: center;
    justify-content: center;
}

.btn-perfil, .senhaNovaDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#botaoConfirmar {
    font-size: 18px;
    color: #078071;
    text-align: center;
    background-color: #ffffff;
    font-family: Poppins-regular;
    border-radius: 5px;
    border: 1px solid #078071;
    width: auto;
    transition: 0.3s ease;
    padding: 5px;
    height: auto;
}

#botaoConfirmar:hover {
    color: #ebf0f1;
    text-decoration: none;
    background-color: #078071;
    font-family: Poppins-regular;
}


#botaoCancelar {
    font-size: 18px;
    color: #f0b6bc;
    text-align: center;
    background-color: #ffffff;
    font-family: Poppins-regular;
    border-radius: 5px;
    border: 1px solid #f0b6bc;
    width: auto;
    transition: 0.3s ease;
    padding: 5px;
    height: auto;
}

#botaoCancelar:hover {
    color: #ebf0f1;
    text-decoration: none;
    background-color: #f0b6bc;
    font-family: Poppins-regular;
}

.modo-escuro #botaoConfirmar {
    font-size: 18px;
    color: #f0b6bc;
    text-align: center;
    background-color: #1B1B1B;
    font-family: Poppins-regular;
    border-radius: 5px;
    border: 1px solid #f0b6bc;
    width: auto;
    transition: 0.3s ease;
    padding: 5px;
    height: auto;
}

.modo-escuro #botaoConfirmar:hover {
    color: #272626;
    text-decoration: none;
    background-color: #f0b6bc;
    font-family: Poppins-regular;
}


.modo-escuro #botaoCancelar {
    font-size: 18px;
    color: #C05367;
    text-align: center;
    background-color: #1B1B1B;
    font-family: Poppins-regular;
    border-radius: 5px;
    border: 1px solid #C05367;
    width: auto;
    transition: 0.3s ease;
    padding: 5px;
    height: auto;
}

.modo-escuro #botaoCancelar:hover {
    color: #272626;
    text-decoration: none;
    background-color: #C05367;
    font-family: Poppins-regular;
}