@charset "UTF-8";

.question,
.question * {
    box-sizing: border-box;
}

.question .label {
    display: none!important;
}

.question + .question {
    margin-top: 3rem;
}

.question[class*="disabled-"],
.question.miss {
    margin-top: calc(3rem - 10px)!important;
}

[class*="disabled-"]::before {
    color: #f00;
    font-weight: 500;
    font-size: 16px;

}

.disabled-4[id*="a"]::before {
    content: "Nem jelölt meg állami intézményt";
}

.disabled-4[id*="b"]::before {
    content: "Nem jelölt meg magánszolgáltatót";
}

.disabled-6::before {
    content: "Válasza alapján nem végez első trimeszteri vizsgálatot";
}

.disabled-10::before {
    content: "Válasza alapján nem végez második trimeszteri vizsgálatot";
}

.question h4,
.question h5 {
    margin: 8px 0;
}

.question label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.question ul:has(> li > label > input[type="checkbox"])::before {
    content: "Több válasz adható";
    display: block;
    width: 100%;
    flex: 1 0 100%;
    color: #aaa;
    font-style: italic;
}

.question[class*='disabled-'] {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
    background-color: #aaa;
    margin: -16px;
    padding: 16px;
}

.question ul.other::before {
    padding-left: 16px;;
}

.question ul {
    list-style: none!important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.question li {
    min-height: 2rem;
    display: inline-flex;
    align-items: start;
}

.question li:has(textarea) {
    display: block;
}

.question li input[type="text"] {
    border-top: 0px!important;
    border-left: 0px!important;
    border-right: 0px!important;
    outline: 0;
}

.question li textarea {
    --fs: 16px;
    --border: 1px;
    --lh: 1.3;
    --padding: 3px;

    width: 100%;
    padding: var(--padding);
    line-height: var(--lh);
    font-size: var(--fs);
    border-width: var(--border);
    min-height: calc(7 * var(--fs) + 2 * var(--border) + 2 * var(--padding));
    resize: vertical;
}

.question input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    --h: 3px;
    height: var(--h);
    background: #000;
    position: relative;
    cursor: ew-resize;
}

.question input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   border: none;
   height: 20px;
   width: 20px;
   border-radius: 50%;
   background: #000;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
}

.question input[type="range"]::after {
    content: "";
    background: repeating-linear-gradient(90deg, black 0px 1px, transparent 1px 100%);

    --bar-h: 19px;

    height: 19px;
    background-size: var(--bgs);
    background-repeat: repeat;
    display: inline-block;
    width: calc(100% - 20px);
    position: absolute;
    left: 10px;
    border-right: solid 1px;
    top: -8px;
    z-index: -1;
}

.question > ul > li:not(:has(input:checked)) .other {
    display: none;
}

.question .range-cntr {
    display: flex;
    align-items: center;
    width: 100%;
}

.question .range-value {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    text-wrap: nowrap;
    width: 60px;
    flex: 1 0 60px;
    font-family: monospace;
}

.question .range-value :is(.v1, .v2)::after {
    content: "" attr(data-unit);

}

.question :is(input[type="radio"], input[type="checkbox"]) {
    scale: 1.5;
}

.question li li {
    width: 100%;
    padding-left: 16px;
}

#message_div div:has(> #send) {
    text-align: center;
    margin: 3rem 0;
}

#message_div #send {
    outline: 0;
    padding: 10px 25px;
    background: #00cef0;
    color: #fff;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    border: 0;
}

#message_div #send:hover {
    background: #03ffe4;
}

.send-success {
    background: lightgreen;
    padding: 16px;
    border-radius: 3px;
    color: darkgreen;
    text-align: center;
}

@media(max-width: 767px) {
    .question label {
        width: 100%;
        flex: 1 0 100%;
    }

    .question label:has(.other) {
        flex-wrap: wrap;
    }

    .question li:has(input:checked, ul) {
        flex-wrap: wrap;
    }

    .question .other {
        display: block;
        width: 100%;
    }

    .question ul:has(input:checked) ul {
        display: flex!important;
        flex-direction: column;
        flex-wrap: wrap;
    }
}