/* Center the form and set width to 50% on larger screens (landscape) */
.survey-form {
    width: 50%;
    margin: 1em auto;
    line-height: 1.6em;
}

/* Full width on mobile (portrait) */
@media screen and (max-width: 768px) {
    .survey-form {
        width: 100%;
    }
}

/* Add spacing between questions */
.survey-question {
    margin-bottom: 1.5em;
}

.survey-question label {
    font-weight: 600; /* Semi-bold */
}


/* Styling for H3 inside HTML type questions */
.survey-html h3 {
    font-size: 1.5em;
    font-weight: normal;
    margin-top: 1em;
    margin-bottom: 1.5em;
    text-align: left;
}

/* Normal weight for dropdown alternatives */
.survey-dropdown select option {
    font-weight: normal !important;
}

/* Red asterisk for required fields */
.required-star {
    color: red;
    font-weight: bold;
    margin-left: 0.3em;
}

/* Space between radio button and answer text */
.survey-radio input[type="radio"] {
    margin-right: 1em;
}

/* Normal weight for radio button alternatives */
.survey-radio label {
    font-weight: normal !important;
}

/* Ensure the font for the entire survey-radio block is normal */
.survey-radio {
    font-weight: normal !important;
}

/* Slider wrapper */
.slider-wrapper {
    margin: 20px 0;
    text-align: center;
}

/* Slider input */
.slider-input {
    width: 80%;
    height: 1em;
}

/* Customize slider track */
.slider-input::-webkit-slider-runnable-track {
    height: 1em;
    background-color: #d6e4ff;
}

.slider-input::-moz-range-track {
    height: 1em;
    background-color: #d6e4ff;
}

/* Customize slider thumb */
.slider-input::-webkit-slider-thumb {
    width: 2em;
    height: 3em;
    background-color: #060097;
    border-radius: 0.3em;
}

/* Align slider alternatives */
.slider-alternatives {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

/* Center the sub-page titles in psy surveys */
.sub-page-title-psy {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 1.5em;
}

/* Pagination buttons */
.pagination-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 2em;
}

/* Previous button ("Edellinen") style */
.pagination-button-prev {
    border: 1px solid gray !important;
    background: transparent !important;
    color: gray !important;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    display: inline-block !important;
}

/* Next button ("Seuraava") style */
.pagination-button-next {
    background-color: #060097 !important;
    color: white !important;
    padding: 10px 20px;
    font-size: 1em;
    border: none !important;
    cursor: pointer;
    display: inline-block !important;
}

/* Hover effect for "Seuraava" */
.pagination-button-next:hover {
    background-color: white !important;
    color: #060097 !important;
    border: 1px solid #060097 !important;
}

/* Center the submit buttons */
.survey-submit-button {
    background-color: #060097 !important;
    color: white !important;
    padding: 15px 30px;
    font-size: 1.2em;
    border: none !important;
    cursor: pointer;
    display: block;
    margin: 2em auto;
    text-align: center;
}

/* Semi-bold question text for "pre" survey */
.survey-pre .survey-question label {
    font-weight: 600;
}