.form-input-title {
    background-color: transparent;
    font-size: x-large;
}

.form-label {
    color: var(--light-blue);
    font-size: medium;
}

.form-label2 {
    color: var(--light-blue);
    font-size: medium;
    margin-bottom: .5rem;
}

.fa-x {
    font-size: x-small;
    color: #212529;
    cursor: pointer;
}

.respond-text {
    font-size: x-large;
    text-align: center;
    font-weight: bolder;
}

.add-option-btn {
    background-color: var(--light-blue);
    color: white;
    width: auto;
    margin-inline-start: 10px;
    font-size: small;
}

.add-new-question {
    background-color: var(--dark-blue);
    color: white;
}

.add-page-btn {
    background-color: white;
    color: var(--dark-blue);
}

.custom-popup{
    border-radius: 20px !important;
}

.custom-button{
    border-radius: 20px !important;
    background-color: var(--dark-blue) !important;
}

/* Style for the buttons */
.page-btn {
    white-space: nowrap;
    background-color: var(--lime-green);
    color: white;
}

.page-btn.active {
    background-color: var(--dark-blue);
    color: white;
}

/* Add padding for the 'page' text */
.page-btn .page-text {
    padding-left: 5px;
}

.save-draft {
    background-color: var(--lime-green);
    color: var(--dark-blue);
}

#draggablePanelList .question-header {
    cursor: move;
}

#draggablePanelList2 .question-header {
    cursor: move;
}

/* Base question style */
.question {
    background-color: white;
    transition: background-color 0.3s ease, border 0.3s ease;
}

/* Selected question style */
.question.selected {
    border: 2px solid var(--light-blue) !important;
}

/* Base question-header style */
.question-header {
    display: none;
    opacity: 0;
    background-color: var(--background-primary-light-gray);
    transition: opacity 0.3s ease;
}

/* Show question-header with animation */
.question.selected .question-header {
    display: block;
    /* Ensures the element takes up space during the transition */
    animation: fadeIn 0.3s forwards;
}

/* Hide question-header with animation */
.question:not(.selected) .question-header {
    display: block;
    /* Ensures the element takes up space during the transition */
    animation: fadeOut 0.3s forwards;
}

/* Add this to your CSS file */
.progress-bar-blue {
    background-color: var(--light-blue); /* Blue */
}

.progress-bar-pink {
    background-color: var(--pink); /* Pink */
}

.progress-bar-yellow {
    background-color: var(--lime-green); /* Yellow */
}

.d-flex.align-items-center .progress {
    flex: 1;
}

/* .respond-number::after {
    content: " Responds";
} */

/* Make the progress bar itself rounded */
.progress {
    border-radius: 1rem; /* Adjust based on your preference */
    overflow: hidden; /* Ensures the inner bar is clipped to the progress bar's shape */
}

/* Make the inner progress bar rounded */
.progress-bar {
    border-radius: 1rem; /* Adjust based on your preference */
    padding: 0.25rem 0.5rem; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress, .progress-stacked {
    --bs-progress-height: 1.55rem !important;
}

/* If you want rounded ends only when the progress bar is not full */
.progress-bar.rounded-progress-bar {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Remove rounding for the full progress bar */
.progress-bar.rounded-progress-bar[style*="width: 100%"] {
    border-radius: 1rem;
}

/* Style the number inside the progress bar */
.progress-bar span {
    color: white; /* Ensure visibility, adjust as needed */
    padding: 0.25rem;
}

.delete-page:hover{
    color: var(--pink) !important;
}

.swal2-popup{
    width: 50em !important;
}

.swal2-image{
    border-radius: 10px;
    margin: 2em auto !important;
}

.swal2-header{
    padding: 0 !important;
}

.upload-btn, .voice-btn {
    color: var(--dark-gray) ;
    transition: transform 0.3s ease, color 0.3s ease; 
}

.upload-btn:hover, .voice-btn:hover {
    transform: scale(1.1); 
}

/* Default button styles */
.voice-btn {

    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Add pulse effect when recording */
.voice-btn.is-recording {
    background-color: red; /* Change button color when recording */
    box-shadow: 0 0 10px red, 0 0 20px red, 0 0 30px red; /* Pulse effect */
    animation: pulse 1.5s infinite;
}

.font-smaller{
    font-size: smaller;
}

.font-xsmall{
    font-size: x-small !important;
}


.upload-files-text{
    color: var(--dark-gray);
    white-space: nowrap;
    font-size: smaller;
}

.form-check-input:disabled~.form-check-label, .form-check-input[disabled]~.form-check-label {
    cursor: default;
    opacity: 1 !important;
}
/* Keyframes for pulsing effect */
@keyframes pulse {
    0% {
        box-shadow: 0 0 5px red;
    }
    50% {
        box-shadow: 0 0 15px red;
    }
    100% {
        box-shadow: 0 0 5px red;
    }
}

/* Style for transition when stopping recording */
.voice-btn:not(.is-recording) {
    box-shadow: none;
}



@media (max-width: 576px) { 
    .progress, .progress-stacked {
        --bs-progress-height: 1.25rem !important;
    }

    .progress-bar span {
        color: white;
        font-size: x-small;
    }

    .upload-btn, .voice-btn{
        background-color: var(--dark-blue);
        color: white;
    }
 }


@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Keyframes for fadeOut animation */
@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}