:root {
    --font-family-verdana: Verdana, Geneva, Tahoma, sans-serif;
}

/* Página inteira de cadastro */
.register-page {
    background-image: linear-gradient(90deg, rgb(40, 220, 220) 0%, rgb(220, 40, 220) 100%);
    background-size: cover;
    margin: 0;
}

/* Barra de navegação da página de cadastro */
.register-nav {
    width: 100%;
    height: 90px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background-color: rgb(5, 5, 20);
    margin: 0;
}

.register-nav-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-decoration: none;
}

/* Imagem da logo */
#logo-image {
    width: 30px;
    pointer-events: none;
}

/* Texto da logo */
.logo-text {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 600;
    color: #fff;
}

/* Área de login */
.register-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    background-color: white;
    padding: 20px 0;
    border-radius: 10px;
    margin: 1rem auto;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 15px;
}

/* H2 da página */
.register-title {
    color: #303030;
    text-align: center;
    font-size: 28pt;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin: 1rem 0;
}

/* Linha para separar textos */
.register-separator {
    width: 99%;
}

/* Descrição da página */
.register-description {
    text-align: center;
    font-size: 10pt;
    font-family: var(--font-family-verdana);
    color: #606060;
    margin: 1rem 0;
}

/* Div do formulário de cadastro */
.register-form-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Formulário */
.register-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

/* Div do input e label */
.register-inputs-display {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* Divs das labels do login */
.register-label-divs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* Labels do login */
.register-labels {
    color: #606060;
    font-size: 12pt;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Asterisco de campo obrigatório */
.register-required-span {
    color: #f00;
    font-size: 8pt;
}

/* Descrição das labels do formulário */
.register-label-description {
    color: #606060;
    font-size: 10pt;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 100;
    margin: 5px 0;
}

/* Divs dos inputs do formulário */
.register-input-divs {
    display: flex;
    flex-direction: column;
}

/* Divs dos inputs do formulário para inputs radio */
.register-input-divs#radio-divs {
    width: 100%;
}

/* ALinhar radios e span */
.radio-options-flex {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

/* Divs das opções do radio */
.radio-option-divs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* Opções de radio */
.register-inputs-radio {
    width: 20px;
    height: 20px;
    border: 2px solid;
}

.register-inputs-radio:hover {
    cursor: pointer;
}

/* Labels dos campos de radio */
.radio-labels {
    color: #606060;
    font-size: 12pt;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Span de campos obrigatórios */
.register-required-spans {
    color: #f00;
    font-size: 8pt;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 10px 0 0 0;
}

/* Textos dos campos obrigatórios */
.register-required-spans {
    display: none;
}

/* Div dos botões do formulário */
.register-continue-div {
    width: 100%;
}

/* Div do botão de continuar */
.register-buttons-div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* Inputs do cadastro */
.register-inputs {
    width: 20rem;
    height: 3rem;
    padding: 0 0.5rem;
    border: 1px solid #a0a0a0;
    border-radius: 8px;
    font-size: 14pt;
}

.register-inputs:focus {
    outline: none;
    border: 1px solid #3060ff;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 5px;
}

/* Botão de input da senha */
.password-button {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: 0px solid;
    border-radius: 25px;
    transform: translate3d(300px, 10px, 0);
}

.password-button:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.1);
}

.password-button:active {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.2);
}

/* Imagem do input de senha */
.password-icon {
    position: absolute;
    top: 5px;
    left: 1px;
    width: 28px;
    height: 20px;
    filter: invert(0.5);
}

/* Botões de submit e reset do login */
#input-submit-button, #input-reset-button {
    width: 100%;
    height: 3rem;
    background-color: rgba(10, 10, 20, 1);
    color: #fff;
    font-size: 12pt;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    border: 1px solid #a0a0a0;
    border-radius: 8px;
    transition: all 0.2s;
}

#input-submit-button:hover, #input-reset-button:hover {
    cursor: pointer;
    filter: invert(0.1);
}

/* Pergunta se deseja ir para login */
.register-login-question {
    color: #808080;
    font-size: 12pt;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    margin: 0;
}

.register-login-question a {
    color: #606060;
    font-weight: 600;
    text-decoration: none;
}

/* Div do botão de retornar à página principal */
.register-return-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Link de voltar à página principal */
.register-return-link {
    text-decoration: none;
}

/* Botão de retornar à página principal */
.return-button {
    width: 100%;
    height: 3rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-color: rgba(10, 10, 20, 1);
    color: #fff;
    font-size: 12pt;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    padding: 0 10px;
    border: 1px solid #a0a0a0;
    border-radius: 8px;
    transition: all 0.2s;
    border-width: 0px;
    border-radius: 10px;
}

.return-button:hover {
    cursor: pointer;
    filter: invert(0.1);
}

/* Imagem do botão de retornar */
.return-button-image {
    width: 20px;
    height: 20px;
}