.progress {
    height: 40px;
    display: flex;
    overflow: hidden;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    width:100%;
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    text-align: center;
    white-space: nowrap;
    background-color: #28a745;
    transition: width 0.6s ease;
}


.bg-data {
    background-color: #1f3b71; /* Green */
}

.bg-success {
    background-color: #28a745; /* Green */
}

.bg-warning {
    background-color: #ffc107; /* Yellow */
}

.bg-danger {
    background-color: #dc3545; /* Red */
}

.progress-bar-stripped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

.d-flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.justify-content-between {
    justify-content: space-between;
}

.header-step {
    display: flex;
    justify-content: flex-end;
    width: 30%;
    padding: 0 10px 0 0;
    margin-left: auto; /* Align to the right */
}

/* Content of the survey */
.ContentSurvey {
    padding: 20px;
    width: 100%; /* Ensure it takes up the full width of the container */
    max-width: 100%; /* Prevents content from exceeding the container width */
    box-sizing: border-box;
    overflow-wrap: break-word; /* Handle long words or URLs */
    flex-grow: 1; /* Ensures this area takes up remaining space */
    min-height: calc(100vh - 450px);
    max-height: calc(100vh - 120px);
}

    /* Responsive images */
    .ContentSurvey img {
        max-width: 100%; /* Ensure images never exceed the width of their container */
        height: auto; /* Maintain the aspect ratio of images */
        display: block;
        margin: 0 auto;
    }

    /* Responsive videos (e.g., YouTube embeds) */
    .ContentSurvey iframe,
    .ContentSurvey video {
        max-width: 100%; /* Ensure videos scale down on smaller screens */
        height: auto; /* Maintain aspect ratio */
    }

    /* Responsive tables */
    .ContentSurvey table {
        width: 100%; /* Ensure tables are responsive and fit the container */
        max-width: 100%;
        display: block; /* Prevent overflow */
        overflow-x: auto; /* Enable horizontal scrolling if necessary */
        border-collapse: collapse;
    }

    .ContentSurvey th, .ContentSurvey td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ddd;
    }

.ContentSurvey-Question {
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    width: 100%; /* Ensure it takes up the full width of the container */
    max-width: 100%; /* Prevents content from exceeding the container width */
    min-height: calc(100vh - 450px);
    max-height: calc(100vh - 220px);
}
.surveyQuestionTitle {
    font-size: 1.5rem;
    font-weight: 650;
    margin-left: 50px;
}

.surveyQuestionAnswer {
    display: flex;
    flex-direction: column;
}

.surveyQuestionAnswerMultipleChoice {
    display: flex;
    flex-direction: column; /* This ensures checkboxes are stacked vertically */
    gap: 10px; /* Adds space between checkboxes */
    padding-left: 40px;
}



.surveyQuestionAnswerMultipleChoiceScale {
  
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; /* Stack radio buttons horizontally */
    justify-content: space-between; /* Distribute radio buttons evenly */
    width: 80%;
    gap: 10px; /* Add space between the radio buttons */
    margin: auto; /* Center the radio buttons */
}

.DeleteIcon {
    color: #ac4e4e!important;
    cursor: pointer;
}

.surveyQuestionAnswerFreeText {
    max-width: 80%;
}

.bottom-survey {
    display: flex;
    justify-content: space-between; /* Aligns buttons on the far left and right */
    align-items: center; /* Vertically center the buttons */
    width: 100%;
    padding: 20px 0;
    margin-top: 20px;
    margin-bottom: 20px;
}

.previousButton {
    margin-left: 20px;
    padding: 10px 20px;
}

.nextButton {
    margin-right: 20px;
    padding: 10px 20px;
    margin-left: auto; /* This pushes the Next button to the right */
}

.anonymousText {
    font-style: italic;
    text-align: center;
    flex-grow: 1; /* Ensures the text is centered between the buttons */
    margin-top: 20px;
    padding: 20px;
}

.thankYouMessage {
    text-align: center;
    padding: 40px;
}

.thankYouMessage h2 {
    color: #2a323f; /* Darker text color for the heading */
    font-size: 1.8rem; /* Larger heading */
    margin-bottom: 20px;
}

.thankYouMessage p {
    font-size: 1rem; /* Regular paragraph font size */
    color: #333; /* Standard dark color for body text */
    margin-bottom: 15px;
    line-height: 1.6; /* Spacing between lines for better readability */
}


@media (max-width: 768px) {
    .surveyQuestionAnswerMultipleChoiceScale {
        flex-direction: column; /* Stack checkboxes vertically on mobile devices */
    }
}
@media screen and (max-width: 768px) {
    .header-step {
        justify-content: center;
        width: 80%;
        margin: 0 auto;
        padding: 20px 0;
    }


    .ContentSurvey {
        overflow-y: auto;
        max-height: calc(100vh - 220px);
    }
    .ContentSurvey-Question {
        overflow-y: auto;
        max-height: calc(100vh - 250px);
    }
    .footer {
        display: none !important; /* Fullt skjul hele footeren */
    }

    .bottom-survey {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
        z-index: 100;
    }

    .anonymousText {
        display: none !important; /* Fullt skjul hele footeren */
    }


    .previousButton,
    .nextButton {
        margin-right: 20px !important;
        margin-left: 10px;
        width: 45%; /* Make buttons smaller but still stay on opposite sides */
        padding: 8px 10px; /* Make padding smaller for mobile */
    }

    .previousButton,
    .nextButton {
        margin-right: 20px !important;
        margin-left: 10px;
        width: 45%; /* Make buttons smaller but still stay on opposite sides */
        padding: 8px 10px; /* Make padding smaller for mobile */
    }
    }