@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

body,
form {
    font-family: "Nunito", sans-serif;
}
.fs-20 {
    font-size: 1.25rem !important;
}
#formCadastroTrilhasRecode a {
    color: #4e0094;
}
.logomarca img {
    max-width: 200px;
}
.title-pill {
    width: 100%;
    text-align: center;
}
.title-pill::before {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #ebebeb;
    position: absolute;
    left: 0;
    margin-top: 10px;
    z-index: -1;
}
.title-pill span {
    width: fit-content;
    font-size: 0.9rem;
    background-color: #4e0094;
    color: #fff;
    padding: 8px 20px;
    border-radius: 20px;
    margin: 0 auto;
}

/* Estilo dos forms */
input[type=text],
input[type=password],
input[type=number],
.form-select {
    padding: 13px 15px;
    border-radius: 8px !important;
    color: #888;
}
input[type=text]::placeholder,
input[type=password]::placeholder,
input[type=number]::placeholder,
.form-select::placeholder {
    color: #888;
}
.form-select option {
    color: #212529;
}
input#userPass,
input#userPassAgain {
    padding: 13px 45px 13px 15px;
    border-radius: 8px;
}
#formCadastroTrilhasRecode .form-check-input[type=checkbox] {
    border: solid 2px #555;
}
span.field_icon {
    position: absolute;
    cursor: pointer;
    right: 12px;
    margin-top: 17px;
    z-index: 9;
}
.doc-cpf,
.doc-estrangeiro,
.local-curso,
/* .projetos-ini-combo, */
.outro-genero-input,
.outra-etnia {
    display: none;
}

#userRNE {
    text-transform: uppercase;
}
input::placeholder {
    text-transform: none !important;
    color: #888;
}
.form-check-input:checked {
    background-color: #4e0094;
}
#formCadastroTrilhasRecode input[type=submit].btn-primary {
    background-color: #4e0094;
}
#modalSuccess .modal-header {
    background-color: #528b2b;
    color: #fff;
}
#modalError .modal-header {
    background-color: #dc3545;
    color: #fff;
}
/* Media Queries */
@media (max-width: 768px) {
    span.field_icon {
        right: 5%;
    }
}
@media (max-width: 667px) {
    span.field_icon {
        top: 3%;
        right: 3%;
    }
}
@media (max-width: 500px) {
    span.field_icon {
        top: 3%;
        right: 3%;
    }
}