.titulo {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.descricao {
    display: block;
    font-size: 1.15rem;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 20px;
}

.question {
    margin-bottom: 1rem;
}

.question label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.star-rating {
    position: relative;
    display: inline-block;
    width: 200px; /* Ajuste a largura conforme necessário */
}

.star-input {
    width: 100%;
    position: absolute;
    z-index: 2;
    opacity: 0; /* Torna o range invisível, mantendo-o funcional */
    cursor: pointer;
}

.stars {
    display: flex;
    justify-content: space-between;
    color: #c0c0c0; /* Cor das estrelas inicialmente em branco (cinza claro) */
    pointer-events: auto;
    margin-bottom: 0.5rem;
}

.star-input[value="0"] ~ .stars .star {
    color: #c0c0c0; /* Estrelas não selecionadas */
}

.star-input[value="1"] ~ .stars .star:nth-child(-n+1),
.star-input[value="2"] ~ .stars .star:nth-child(-n+2),
.star-input[value="3"] ~ .stars .star:nth-child(-n+3),
.star-input[value="4"] ~ .stars .star:nth-child(-n+4),
.star-input[value="5"] ~ .stars .star:nth-child(-n+5) {
    color: orange;
}

.star {
    font-size: 2rem;
    color: #c0c0c0;
    cursor: pointer;
}

.question select,
.question input:not([type='checkbox'], [type='radio'], [type='submit'], [type='reset'], [type='range']) {
    min-width: 15em;
    max-width: 30em;
    width: 100%;
    height: 27.7px;
}

.question textarea {
    min-width: 15em;
    max-width: 30em;
    width: 100%;
}


label.required::after {
    content: '*'; /* Adiciona o asterisco */
    color: red;   /* Define a cor do asterisco como vermelho */
    margin-left: 4px; /* Espaço entre o texto e o asterisco */
    margin-right: 4px;
}