/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px
}

/* Track */
::-webkit-scrollbar-track {
    background: #ecf0f4;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--brand-colour-3);
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--brand-colour-3);
    }

@media (max-width: 575px) {
    .wf-group > * .formField, .wf-group > * .formFieldTextarea {
        flex-grow: 1;
    }

    .section-title-container {
        flex-direction: column;
        gap: 0;
        margin-bottom: 16px;
    }
    
}

@media (min-width: 576px) {
    .section-title-container {
        flex-direction: row;
        gap: 2;
    }
}

@media (max-width: 768px) {
    .wf-group > .wf-control-container {
        flex-grow: 1;
    }
}

@media (min-width: 769px) {
    .wf-group-row {
        flex-direction: row !important;
        gap: 16px;
    }

    .wf-group-row > * input.wf-control {
        width: 100px !important;
        gap: 16px;
    }
}

.questionnaireProgressTracker {
}

.questionnaireStepList {
    margin-bottom: 4px;
}


.radioButtonList {
    flex-direction: column;
}

.icon-btn {
    background: none;
    border: none;
}

.calendar-date {
    padding: 8px;
    display: flex;
    justify-content: center;
    color:#e6e6e6;
}

.selectable-date {
    color:#141D3A;
}

    .selectable-date.selected {
        background: var(--brand-colour-3);
        border-radius: 50%;
        color: #ffffff;
    }

    .selectable-date.today {
        border: 1px solid var(--brand-colour-3);
        border-radius: 50%;
    }

.date-picker-btns {
    display: flex;
    justify-content: end;
    gap: 16px;
    margin-top: 16px;
}

    .date-picker-btns button {
        color: #0075C3;
    }

.date-picker-input.invalid, .text-box.invalid, .text-area.invalid, .currency-box.invalid {
    border: 2px solid var(--error);
}

input:disabled, textarea:disabled {
    color: rgb(170, 170, 170);
    border-color: rgba(118, 118, 118, 0.3) !important;
}

.formSectionContent {
    margin-bottom: 24px;
}

.wf-add-btn, .wf-delete-btn, .wf-upload-doc-btn {
    padding: 8px 16px !important;
    margin-bottom: 12px;
}

.wf-freetext-bullet{
    display:list-item;
}

.wf-group {
    display: flex;
    flex-direction: column;
}

.wf-group-content-container{
    display: flex;
    flex-direction: column;
}

@media (min-width : 769px) {
    .wf-group .wf-group-row {
        align-items: center;
    }
}
    

.wf-step-nav.step-invalid, .control-invalid, .button-invalid {
    border: solid 1px var(--error) !important;
}

label.invalid > .radio-label, label.invalid > .check-label {
    color: var(--error) !important;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
}

label.invalid > .radiobtn, label.invalid > .checkmark {
    border: 2px solid var(--error) !important;
}

.step-summary {
    display: none;
}

.section-summary {
    padding: 16px 16px 0px 16px;
}

.section-title-summary {
    color: var(--brand-colour-3) !important;
}

.error-mark {
    display:none;
}
.questionnaireAccordionHeader.invalid-step {
    border: 2px solid var(--error);
}

.summary-radio-label, .summary-check-label {
    margin-left: 35px;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
}

    .summary-radio-label.checked, .summary-check-label.checked {
        font-weight: 700 !important;
        color: var(--brand-colour-3) !important;
    }

.has-invalid > * .summary-radio-label, .has-invalid > * .summary-check-label {
    font-weight: 700 !important;
    color: var(--error) !important;
}

.has-invalid > * .dummy-radiobtn, .has-invalid > * .dummy-checkmark {
    border: 2px solid var(--error);
}

.edit-section-btn > span {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    color: #141D3A;
    font-weight: 700;
    margin-left: 4px;
    margin-top:2px;
}

.section-break {
    margin-top: 16px;
    margin-bottom: 32px;
}

.section-title-container{
    margin-left:16px;
    display:flex;
}

.rep-group-seperator {
    margin: 20px 0 32px 0;
}

@media (min-width: 768px){
    .rep-group-seperator {
        width: 438px;
    }
}