/************************************************************************************
 *
 * Document: Style sheet for bobcares portal questionnaire feature
 * Created on: 16 May 2025
 * Authors: Aleena C R
 * Description: Additional bobcares portal styles
 *
*************************************************************************************/


/* Custom Progress Bar Styles */
.questionnaire-progress-tracker-container .progress-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.questionnaire-progress-tracker-container .step-label {
    position: relative;
    z-index: 2;
    width: 33%;
}
.nav-pills .nav-link.active:hover, .nav-pills .show>.nav-link:hover {
    color: white !important;
}

.questionnaire-custom-button.custom-btn-md {
    width: 10rem !important;
}

.questionnaire-header-card {
    border-bottom-right-radius: 0% !important;
    border-bottom-left-radius: 0% !important;
}

.questionnaire-accordion-header-card, 
.questionnaire-collapse-cards {
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
}

.questionnaire-question-block *:not(i) {
    text-align: left !important;
    font-weight: 600 !important;
    color: #525f7f !important;
}

.questionnaire-question-block [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.question-answer .answer {
    color: black !important;
    font-weight: 200 !important;
}

.questionnaire-question-block .slash-question-prefix {
    color: #0C71C3 !important;
}

.btn-visibility-toggle {
    box-shadow: none !important;
    color: #0C71C3;background: none !important;
}

.btn-visibility-toggle:hover {
    box-shadow: none !important;
    color: #0C71C3;
}

.question-block .form-control {
    word-wrap: break-word;
    resize: vertical;
    white-space: revert !important;
}

.question-item li.list-group-item {
    background: transparent !important;
    border-color: #c8e8ff !important;
}

.question-item li.list-group-item * {
    border-color: #c8e8ff !important;
}

/* .nav-pills .slash-link.slash-questionnaire-group.active { */
.nav-pills .slash-questionnaire-group {
    /* color: #0C71C3 !important;
    border-right: 6px solid #0C71C3 !important; */
    border-radius: 0% !important;
    box-shadow: none !important;
}

.nav-pills .slash-questionnaire-group.active {
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08) !important;
}

.questionnaire-progress-tracker-container .step-number {
    width: 35px;
    height: 35px;
    background-color: #e9ecef;
    color: #6c757d;
    font-weight: 600;
    border: 3px solid #e9ecef;
}

.questionnaire-progress-tracker-container .step-number.active {
    background-color: #0C71C3;
    color: white;
    border-color: #0C71C3 !important;
}

.questionnaire-progress-tracker-container .step-title {
    font-size: 0.85rem;
    color: #6c757d;
}

.questionnaire-progress-tracker-container .step-label.active .step-title {
    color: #0C71C3;
    font-weight: 600;
}

.questionnaire-progress-tracker-container .step-label.active .step-title {
    color: #0C71C3;
    font-weight: 600;
}

.questionnaire-progress-tracker-container .step-number.completed-step:not(.active) {
    border-color: #0C71C3 !important;
    background-color: white !important;
    color: #0C71C3 !important;
}


/* You can set the --total-progress-bar-steps dynamically using JavaScript */

.questionnaire-progress-tracker-container .progress-line {
    height: 3px;
    background-color: #e9ecef;
    top: 15px;
    z-index: 1;
}

.bar-length-2 ,
.bar-length-3 {
    left: 15%;
    right: 15%;
}
.bar-length-4 {
    left: 13%;
    right: 13%;
}

.questionnaire-progress-tracker-container.progress-wrapper {
    padding-top: revert !important;
}

.questionnaire .border-bottom-radius-0 {
    border-bottom-left-radius: 0% !important;
    border-bottom-right-radius: 0% !important;
}

.questionnaire .border-top-radius-0 {
    border-top-left-radius: 0% !important;
    border-top-right-radius: 0% !important;
}

.questionnaire-accordion .questionnaire-collapse-cards .btn-link.text-white {
    color: white !important;
    text-align: left !important;
}

.text-light-blue {
    color: #c8e8ff !important;
}

#questionnaire-type-name-header {
    display: none;
}

@media (max-width: 576px) {
    .questionnaire-progress-tracker-container .step-title {
        font-size: 0.75rem;
    }
}

@media only screen and (max-width: 1521px) {
    .questionnaire-type-block .col-responsive.px-0,
    .questionnaire-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media only screen and (max-width: 500px) {
    #view-questionnaire-answers-detail,
    .recursive-question-block,
    .view-questionnaire-answers-detail-col,
    .questionnaire .question-block,
    .questionnaire-col
    .questionnaire .slash-filter-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .questionnaire-client-info-header .row,
    .questionnaire .question-block {
        overflow: auto !important;
    }

    #questionnaire-type-name-header {
        display: block !important;
    }

    .step-label .step-title {
        display: none !important;
    }
}