label.error {  color: #ED1D25;font-size: 12px;width: 100%;  }

.qContainer,
.spiderContainer,
.consultContainer { padding:0; background-size: 150px; }

.qStepTitle { position: relative; }
.qStep1:before, .qStep2:before, .qStep3:before,
.qStep4:before, .qStep5:before, .qStep6:before { content: ""; display: block; clear: both;position: absolute;left:0;top:36%;width: 80%;height:10px;z-index:-1;  }
.qStepTitle label { font-weight: bold;font-size:24px;background-color: #FFF;padding:5px 18px 5px 0; }
.qStepTitle svg { width: 40px;margin-right:10px; }
.qStepTitle .st1 {fill:none;stroke-width:1.5;}
.qStepTitle .st2 {fill:#FFFFFF;}
.qStepTitle .st4 {font-size:11px;}

.cat1,
.qStepTitle.qStep1 { color:#ED1D25; }
.qStepTitle.qStep1 .st0 { fill:#ED1D25; }
.qStepTitle.qStep1 .st1 { stroke:#ED1D25; }
.qStep1:before { border-bottom: 4px dotted #ED1D25; }

.cat2,
.qStepTitle.qStep2 { color:#13A0DB; }
.qStepTitle.qStep2 .st0 { fill:#13A0DB; }
.qStepTitle.qStep2 .st1 { stroke:#13A0DB; }
.qStep2:before { border-bottom: 4px dotted #13A0DB; }

.cat3,
.qStepTitle.qStep3 { color:#733F7E; }
.qStepTitle.qStep3 .st0 { fill:#733F7E; }
.qStepTitle.qStep3 .st1 { stroke:#733F7E; }
.qStep3:before { border-bottom: 4px dotted #733F7E; }

.cat4,
.qStepTitle.qStep4 { color:#F8992C; }
.qStepTitle.qStep4 .st0 { fill:#F8992C; }
.qStepTitle.qStep4 .st1 { stroke:#F8992C; }
.qStep4:before { border-bottom: 4px dotted #F8992C; }

.cat5,
.qStepTitle.qStep5 { color:#F4762D; }
.qStepTitle.qStep5 .st0 { fill:#F4762D; }
.qStepTitle.qStep5 .st1 { stroke:#F4762D; }
.qStep5:before { border-bottom: 4px dotted #F4762D; }

.cat6,
.qStepTitle.qStep6 { color:#7DC45A; }
.qStepTitle.qStep6 .st0 { fill:#7DC45A; }
.qStepTitle.qStep6 .st1 { stroke:#7DC45A; }
.qStep6:before { border-bottom: 4px dotted #7DC45A; }

.qHead { font-weight: bold;padding:8px 0; }
.qQuestion { padding:10px 0; }
.qQuestion:nth-child(even)  { background-color: rgba(19, 160, 219, 0.07); }
.qCatDescription { padding-top: 20px;position: relative;margin-top:20px; }
.qCatDescription:before { content: ""; display: block; clear: both;position: absolute;left:0;top:0;width: 40%;border-top:2px solid #13A0DB;  }

.btn-prev { float:left; }
.btn-next { float:right; }
input.qAnswer { -ms-transform: scale(1.4);-webkit-transform: scale(1.4);transform: scale(1.4); }

/* RATINGS */
.qRating { display: flex;align-items: center;gap:2px; }
.qRating label { display: flex;flex-direction: column;align-items: center;cursor: pointer; }
.qRating input { display: none; }
.qRating span { width: 36px;height: 36px;border-radius: 8px;display: flex;align-items: center;justify-content: center;font-weight: bold;color: white;font-size: 12px; }
.qRating input:checked + span {
    border: 1px solid #0B4EA2;
    position: relative;
    background-color: #0B4EA2 !important;
    color:#FFF !important;
}
.qRating input:checked + span::before {
    content: "";
    position: absolute;
    bottom: -10px; /* pijltje onder het blokje */
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 8px 10px 8px;
    border-style: solid;
    border-color: transparent transparent #0B4EA2 transparent;
}

.qRating label:nth-child(1) span { background-color: #8B0000; }
.qRating label:nth-child(2) span { background-color: #B22222; }
.qRating label:nth-child(3) span { background-color: #FF0000; }
.qRating label:nth-child(4) span { background-color: #FF4500; }
.qRating label:nth-child(5) span { background-color: #FFA500; }
.qRating label:nth-child(6) span { background-color: #FFD700; }
.qRating label:nth-child(7) span { background-color: #FFFF00; }
.qRating label:nth-child(8) span { background-color: #ADFF2F; }
.qRating label:nth-child(9) span { background-color: #7CFC00; }
.qRating label:nth-child(10) span { background-color: #32CD32; }
.qRating label:nth-child(11) span { background-color: #008000; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .qContainer { padding: 130px 20px 0 0; background-size: 150px; }
    .qStep1:before, .qStep2:before, .qStep3:before,
    .qStep4:before, .qStep5:before, .qStep6:before { width: 100%; }
    .qRating span { width: 26px;height: 26px; }
}