:root {
    --white-50: #fdfdfd;
    --white-100: #f8f8f8;
    --white-200: #f5f5f5;
    --white-300: #f0f0f0;
    --white-400: #ededed;
    --white-500: #e9e9e9;
    --white-600: #d4d4d4;
    --white-700: #a5a5a5;
    --white-800: #808080;
    --white-900: #626262;
    /* VERDE */
    --success-50: #e6f1ed;
    --success-100: #b0d4c6;
    --success-200: #8abfaa;
    --success-300: #54a284;
    --success-400: #33906c;
    --success-500: #007447;
    --success-600: #006a41;
    --success-700: #005232;
    --success-800: #004027;
    --success-900: #00311e;
    /* AMARELO */
    --warning-50: #fff4e8;
    --warning-100: #fdddb7;
    --warning-200: #fdcd94;
    --warning-300: #fcb663;
    --warning-400: #fba845;
    --warning-500: #fa9216;
    --warning-600: #e48514;
    --warning-700: #b26810;
    --warning-800: #8a500c;
    --warning-900: #693d09;
    /* VERMELHO */
    --danger-50: #f4e6e6;
    --danger-100: #deb0b1;
    --danger-200: #cd8a8b;
    --danger-300: #b75455;
    --danger-400: #a93335;
    --danger-500: #930002;
    --danger-600: #860002;
    --danger-700: #680001;
    --danger-800: #510001;
    --danger-900: #3e0001;
    /* PRETO */
    --black: #000000;
    --black-50: #e6e6e6;
    --black-100: #b0b0b0;
    --black-200: #8a8a8a;
    --black-300: #545454;
    --black-400: #333333;
    --black-500: #000000;
    --black-600: #000000;
    --black-700: #000000;
    --black-800: #000000;
    --black-900: #000000;
}


*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    max-width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
    font-family: inter !important;
    letter-spacing: 0.2px;
    background-color: var(--white-500);
}

main {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr auto 1fr;
    /* background-color: var(--white-500); */
    padding: 0 10px;
}

form {
    display: contents;
}

.primeiro-card {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

img {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    width: 350px;
    height: auto;
    padding-bottom: 25px;
}

h1 {
    padding-bottom: 25px;
}

.card {
    background-color: #000000;
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* grid-template-rows: 1fr 1fr 1fr; */
    width: auto;
    height: auto;
    box-sizing: border-box;
    background-color: var(--white-200);
    padding: 20px;
    border-radius: 10px;
    transition: all 0.2s ease;
}


.card-login {
    background-color: #000000;
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr; */
    width: auto;
    height: auto;
    box-sizing: border-box;
    background-color: var(--white-200);
    padding: 20px;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.botao {
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    grid-column: 1 / span 2;
}

.sub-card {
    padding: 15px;
    /* background-color: var(--white-600); */
}

label {
    display: block;
    /* ou inline-block */
    padding-bottom: 4px;
}

input {
    width: 350px;
    max-width: 350px;
    height: 45px;
    padding: 8px;
    font-size: 0.9em;
    box-sizing: border-box;
    border-radius: 5px;
    outline: none;
    border: none;
    transition: all 0.3s ease;
}

input:hover {
    outline: auto;
    /* border: 1px solid var(--preto); */
}


input:focus {
    outline: auto;
}

input:-webkit-autofill {
    background-color: #fff !important;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
    color: #000 !important;
}

.botoes {
    grid-row: 3;
    grid-column: 2;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    padding-top: 25px;
}


button,
a {
    width: auto;
    height: 45px;
    padding: 10px 20px;
    background-color: transparent;
    position: relative;
    color: var(--cor-fonte);
    border: none;
    outline: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    opacity: 1;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

button:hover,
a:hover {
    color: var(--cor-hover);
    background-color: rgba(0, 0, 0, 0.05);
}


button[value="deletar_item"]:hover {
    /* color: #cf2b24; */
    background-color: #cf2b24;
    color: var(--white-200);
}

a {
    justify-content: center;
    align-content: center;
    text-align: center;
    color: var(--cor-hover);
    text-decoration: none;
}


footer {
    grid-column: 1 / span 3;
    grid-row: 3;
    display: flex;
    align-items: flex-end;
    text-align: center;
    justify-content: center;
    padding-bottom: 15px;
}


/* ESCONDER LABEL DA IMAGEM DO ITEM */
label[for="id_imagem_item"] {
    display: none;
    /* Esconde o label */
}

.bi-calendar {
    display: none;
}

.errorlist {
    color: rgb(238, 127, 0);
    /* Muda a cor do texto de erro para vermelho */
    font-weight: 600;
    font-size: 14px;
    padding-top: 10px;
    /* Remove o preenchimento da lista */
    padding-bottom: 15px;
    margin-left: 10px;
    /* Remove a margem da lista */
}


/* PERSONALIZACAO PERFIL */
.img-perfil {
    width: 100px;
    height: auto;
    border-radius: 0;
}

/* FIM PERFI */


/* PERSONALIZACAO CADASTRO */

.opcoes-sexo {
    width: auto;
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: 10px;
    box-sizing: border-box;
}