* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

:root {
    --blue: #0075FF;
    --gray: #242424;
    --light-gray: #888888;
}

body {
    width: 100%;
    height: 100vh;


}

.login-bg {
    background-image: url(../assets/bg.webp);
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

h1,
h2,
h3,
h4 {
    font-weight: 400;
}

h1 {
    margin-bottom: 16px;
}

h2 {
    margin-bottom: 8px;
}

.login-container {
    width: 100%;
    height: calc(100vh - 140px);
    background-color: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login {
    width: 600px;
    height: 300px;
    display: flex;
    background-color: #fafafac0;
    border-radius: 16px;
    box-shadow: 0px 0px 8px #24242480;
    backdrop-filter: blur(8px);

}

.brand {
    width: 300px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

form.login {
    width: 300px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

form.login input {
    width: 240px;
    height: 40px;
    text-align: center;

}

form.login input[type=text],
form.login input[type="password"] {
    outline: none;
    border: none;
    border-radius: 6px;
    font-size: 20px;
}

form.login input[type=text]:focus,
form.login input[type="password"]:focus {
    box-shadow: 0px 0px 8px #014791;
}

form.login input[type="submit"] {
    background-color: #00ff95;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    transition: .5s;
}

form.login input[type="submit"]:hover {
    background-color: #008f53;
    color: #fafafa;
}

header {
    width: 100%;
    height: 80px;
    padding: 0 32px;
    background-color: lightblue;
    display: flex;
    justify-content: center;
    align-items: center;
}

header nav {
    width: 1280px;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header nav .user {
    display: flex;
    align-items: center;
    gap: 32px;
}

main {
    width: 1280px;
    margin: 32px auto;
}

main form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
}

input,
select {
    height: 40px;
    font-size: 20px;
    padding: 0px 8px;
    margin-top: 4px;
    position: relative;
    border-radius: 4px;
    border: 1px solid var(--gray);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select {
    &:focus {
        outline: var(--blue) solid 2px;
    }
}

input:disabled {
    border: 1px solid var(--light-gray);
}

label {
    display: flex;
    flex-direction: column;
    position: relative;
}

label[for="NOME"],
label[for="NOMESOCIAL"] {
    width: 632px;
}

label[for="DATAN"],
label[for="CPF"],
label[for="RG"] {
    width: 200px;
}

input[name="NOME"],
input[name="NOMESOCIAL"] {
    width: 632px;
}

input[type="date"],
input[name="CPF"],
input[name="RG"] {
    width: 200px;
}

label[for="EXP"],
input[name="EXP"] {
    width: 92px;
}

label[for="EXPUF"],
select[name="EXPUF"] {
    width: 92px;
}

label[for="NACIONALIDADE"],
input[name="NACIONALIDADE"] {
    width: 200px;
}

label[for="NATURALUF"],
select[id="UFNASCTO"],
input[id="PROVINCIA"] {
    width: 200px;
}

label[for="DOC"] {
    flex-direction: row;
    flex-wrap: wrap;
    width: 200px;
}

label[for="DOC"] div {
    display: flex;
    align-items: center;
    width: 200px;
    gap: 8px;
}

input[type="radio"] {
    width: 24px;
}

label[for="RNE"] {
    width: 200px;
}

label[for="EXPRNE"] {
    width: 200px;
}

label[for="naturalidade"] {
    width: 416px;
    position: relative;
}

label[for="genero"] {
    width: 416px;
}

label[for="genero"] div {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

#gender {
    display: none;
}

label[for="pai"],
label[for="mae"] {
    width: 632px;
}

label[for="responsavel"] {
    width: 416px;
}

label[for="responsavelCPF"] {
    width: 200px;
}

label[for="etnia"] {
    width: 632px;
}

label[for="etnia"] div {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

input[type="checkbox"] {
    width: 20px;
}

label[for="PDC"] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}

label[for="PDC"] strong {
    width: 100%;
}

label[for="PCDopt"] {
    width: 200px;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

label[for="PCDespec"] {
    width: 1064px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

label[for="PCDespec"] em {
    width: 100%;
}

label[for="PCDespec"] label[for="pcdoutras"] {
    margin-left: 64px;
}

label[for="PCDespec"] input[name="pcdoutras"] {
    width: 200px;
    align-self: flex-end;
}

label[for="sitocup"] {
    width: 100%;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

input[name="SitOcup"] {
    width: 24px;
}

label[for="CEP"] {
    width: 200px;
}

label[for="rua"] {
    width: 524px;
}

label[for="NUM"] {
    width: 92px;
}

label[for="COMPL"] {
    width: 200px;
}

label[for="BAIRRO"] {
    width: 200px;
}

label[for="CIDADE"] {
    width: 200px;
}

label[for="ESTADO"] {
    width: 92px;
}

label[for="CELULARWA"] {
    width: 200px;
}

label[for="CELULAR2"] {
    width: 200px;
}

label[for="EMAIL"] {
    width: 524px;
}

.unitDist {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-direction: row;
}

label[for="UNIDADE"] {
    width: 200px;
}

label[for="deslocamento"],
label[for="distancia"] {
    width: calc(200px + 16px + 92px);
}

label[for="tdobs"] {
    width: 416px;
}

label[for="CURSO1"],
label[for="CURSO2"] {
    width: 632px;
}

label[for="PERIODO1"],
label[for="PERIODO2"] {
    width: 308px;
}

label[for="DIASSEMANA1"],
label[for="DIASSEMANA2"] {
    width: 308px;
}

.lgpd {
    width: 100%;
    height: 400px;
    overflow: auto;
    padding: 32px;
}

.lgpd>ol {
    margin: 32px;
}

.lgpd>ol>li {
    margin-bottom: 16px;
}

.lgpd>ol>li>ol {
    margin-left: 24px;
}

.lgpd>ol>li>ol>li {
    margin-bottom: 8px;
    list-style: lower-alpha;
}

.lgpd>ol>li>ol.special {
    margin-left: 0px;
    /* counter-reset: item; */
}

.lgpd>ol>li>ol.special>li {
    margin-bottom: 8px;
    list-style: none;
}

.lgpd>ol>li>ol.special>li::before {
    content: "5.1. ";
}

.lgpd .lgpdForm {
    border-top: 1px solid #242424;
    border-left: 1px solid #242424;
    border-right: 1px solid #242424;
}

.lgpd .lgpdForm>div {
    display: flex;
}

.lgpd .lgpdForm .desc {
    padding: 8px;
    width: 895px;
    border-bottom: 1px solid #242424;
}

.lgpd .lgpdForm .autorizo {
    padding: 8px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #242424;
    border-left: 1px solid #242424;
    border-right: 1px solid #242424;
}

.lgpd .lgpdForm .naoautorizo {
    padding: 8px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #242424;
}

.finalizar {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.assinatura {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.finalizar button[type="submit"] {
    width: 240px;
    height: 60px;
    border-radius: 16px;
    border: none;
    transition: .5s;
    font-size: 16px;
    font-weight: bold;
    background-color: #0cec0c;
}

.finalizar button[type="submit"]:hover {
    background-color: green;
    color: #fafafa;
    cursor: pointer;
}

.finalizar button[type="submit"]:disabled {
    background-color: #ececec;
    cursor: not-allowed;
}

footer {
    width: 100%;
    height: 60px;
    background-color: #242424;
    color: #fafafa;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
}

.hidden {
    display: none;
}

.autocomplete-suggestions {
    border: 1px solid #d4d4d4;
    border-top: none;
    max-height: 260px;
    overflow-y: auto;
    position: absolute;
    z-index: 1000;
    top: 65px;
    width: 416px;
    background-color: lightgoldenrodyellow;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    scrollbar-width: 0;

    ::-webkit-scrollbar {
        width: 0;
    }
}



.autocomplete-suggestion {
    cursor: pointer;
    font-size: 20px;
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 8px;

    ::-webkit-scrollbar {
        width: 0;
    }
}

.autocomplete-suggestion:hover {
    background-color: #0075FF;
    color: #fafafa;
}

form h3 {
    width: 100%;
    margin-top: 16px;
    border-bottom: 1px solid #242424;
    font-weight: bold;
}