/* form styling */
form .row {
	margin: 0 0 .75rem;
	display: flex;
	flex-flow: column;
}

form .row .label {
	display: block;
	width: 100%;
}
form .row .input {
	width: 100%;
}

form .row.actions,
form .row.actions .submit {
	display: flex;
	justify-content: space-between;
}

form legend {
	font-size: 1.33rem
}

.form-control .form-label,
.form-control .control-label {
	color: #333;
	font-weight: 600;
}


/* special form styling */

form fieldset {
	margin-block-start: 2rem;
	padding: 2.5rem 3rem 3.5rem ;
}

form .actions {
	margin-block-start: 2rem;
	padding: 0;
}

.inputs-list .form-group:has(.form-check) {
	padding-block-start: .5rem;
}
.form-check {
	padding-block: .5rem;
}
.form-check-label span {
	display: inline-flex;
	text-wrap: balance;
}

.form-control + .form-control {
	margin-block-start: 3rem;
}
form .row label {
	font-size: .9rem;
	margin-block-end: 1rem;
}

.help-block {
	padding-block-start: .5rem;
	font-size: .9rem;
}

.form .error {
	color: #800
}
.has-error input:not([type="checkbox"]):not([type="radio"]),
.has-error select,
.has-error textarea {
	background-color: #8002;
}
.has-error input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.has-error select:focus-visible,
.has-error textarea:focus-visible {
	background-color: unset;
	color: inherit;
}
.has-error input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(:placeholder-shown),
.has-error input[type="file"]:valid,
.has-error select:valid,
.has-error textarea:not(:placeholder-shown) {
	background-color: #8802;
	color: initial;

}


form select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='32' width='32' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 99%;
  background-position-y: 5px;
}



.form-control:has(#hilfsmittelberatung-521-2-1-4-1:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-2-1-5)   { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-2-1-5)   { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-2-1-14-0:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-2-1-14-0-1)   { display: block; visibility: visible; padding-block-end: 3rem; }
                                                               .form-control.input:has(#hilfsmittelberatung-521-2-1-14-0-1)   { display: none;  visibility: hidden;  }
.form-control:has(#hilfsmittelberatung-521-2-1-14-1:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-2-1-14-1-1)   { display: block; visibility: visible; padding-block-end: 3rem; }
                                                               .form-control.input:has(#hilfsmittelberatung-521-2-1-14-1-1)   { display: none;  visibility: hidden;  }
.form-control:has(#hilfsmittelberatung-521-2-1-14-2:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-2-1-14-2-1)   { display: block; visibility: visible; padding-block-end: 3rem; }
                                                               .form-control.input:has(#hilfsmittelberatung-521-2-1-14-2-1)   { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-2-2-2-1:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-2-2-3)   { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-2-2-3)   { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-2-2-4-1:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-2-2-5)   { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-2-2-5)   { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-2-4-1-1:checked) ~ #Hilfsmittelberatung-521-2-4-2                            { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              #Hilfsmittelberatung-521-2-4-2                            { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-2-5-1-1:checked) ~ #Hilfsmittelberatung-521-2-5-2                            { display: block; visibility: visible; padding-block-end: 3rem; padding-block-start: 1rem; }
                                                              #Hilfsmittelberatung-521-2-5-2                            { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-3-1-2-4:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-3-1-3) { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-3-1-3) { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-3-3-2-1:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-3-3-3-1) { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-3-3-3-1) { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-3-3-2-1:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-3-3-3-2) { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-3-3-3-2) { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-3-3-5-1:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-3-3-6)   { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-3-3-6)   { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-4-5-2-0:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-4-5-3)   { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-4-5-3)   { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-4-5-2-1:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-4-5-4)   { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-4-5-4)   { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-4-2-1-1:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-4-2-2)   { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-4-2-2)   { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-4-5-4-2:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-4-5-5)   { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-4-5-5)   { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-5-1-1-1:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-5-1-2)   { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-5-1-2)   { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-5-1-3-1:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-5-1-4)   { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-5-1-4)   { display: none;  visibility: hidden;  }
.form-control:has(#hilfsmittelberatung-521-5-1-3-2:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-5-1-4)   { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-5-1-4)   { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-5-2-1-9:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-5-2-2)   { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-5-2-2)   { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-5-3-1-2:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-5-3-2)   { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-5-3-2)   { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-5-3-3-1:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-5-3-4)   { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-5-3-4)   { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-4-1-7-1:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-4-1-7-2) { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-4-1-7-2) { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-4-1-7-1:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-4-1-7-3) { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-4-1-7-3) { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-4-1-8-1:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-4-1-8-2) { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-4-1-8-2) { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-4-1-8-1:checked) ~ .form-control.input:has(#hilfsmittelberatung-521-4-1-8-3) { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-4-1-8-3) { display: none;  visibility: hidden;  }

.form-control:has(#hilfsmittelberatung-521-6-1-5:checked)   ~ .form-control.input:has(#hilfsmittelberatung-521-6-2)     { display: block; visibility: visible; padding-block-end: 3rem; }
                                                              .form-control.input:has(#hilfsmittelberatung-521-6-2)     { display: none;  visibility: hidden;  }

label[for="hilfsmittelberatung-521-2-1-14-0-1"]:not(:has(span.required))::after,
label[for="hilfsmittelberatung-521-2-1-14-1-1"]:not(:has(span.required))::after,
label[for="hilfsmittelberatung-521-2-1-14-2-1"]:not(:has(span.required))::after {
  content: " *";
}

#Hilfsmittelberatung-521-fieldset-4-1 .form-control + .form-control {
	margin-block-start: 0;
}
#Hilfsmittelberatung-521-fieldset-4-1 fieldset {
	border: 0;
	margin-block-start: 0;
	padding: 0;
	display: flex;
	gap: 2rem;
	justify-content: space-between;
}

.summary-table-first-col {
	text-wrap: balance;
}

.form-navigation .btn-group {
	display: flex;
	justify-content: flex-end;
}
.form-navigation .btn-group:has(.previous) {
	justify-content: space-between;
}

.btn {
	transition: .2s background-color ease-in-out;
}

.btn-cancel {
	color: var(--color-primary, var(--color-text));
  	background-color: var(--color-bg);
  	border: 1px solid var(--color-primary, var(--color-text));
}

.btn-primary:hover {
	background-color: #555;
}
.btn-cancel:hover {
	background-color: #fff;
}

.file-upload-clearable {
	display: block;
	width: 100%;
}

.file-upload-clearable input[type="file"] {
	display: block;
	width: 100%;
}

.file-upload-clearable__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .75rem;
	margin-block-start: .75rem;
}

.file-upload-clearable__filename {
	display: inline-block;
	font-size: .9rem;
}

.file-upload-clearable__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	margin: 0;
	padding: .5rem .75rem;
	cursor: pointer;
}

.file-upload-clearable__clear[hidden] {
	display: none !important;
}



#Hilfsmittelberatung-521 table {
    border-collapse: collapse;
}

#Hilfsmittelberatung-521 table .summary-table-first-col {
	width: 50%
}
#Hilfsmittelberatung-521 table .summary-table-first-col + td {
	width: 60%
}




/* form stepper */

/**
 * Button-reset utility class
 * Removes all default browser styles for a button.
 * Is used for the form buttons in the stepper component.
 */
.u-button-reset {
    all: unset;
}


/**
 * Stepper component
 * Loosely based on: https://ishadeed.com/article/stepper-component-html-css/
 */
.c-stepper {
    --blue: #2a2a85;
    --green: #2a963e;
    --grey: #333;
    --grey-light: #ddd;

    display: flex;
    flex-wrap: wrap;
    margin: 0 -4rem 4rem;
    padding-left: 0;
}


/* List item */
.c-stepper__item {
    --item-state-color: var(--green);
    --circle-size: 1.5rem;
    --circle-font-size: .8rem;
    --circle-font-weight: 500;
    --circle-bg: var(--green);
    --circle-color: #fff;
    --circle-outline: 2px;
    --circle-outline-offset: 2px;

    color: var(--item-state-color);
    counter-increment: step-counter;
    display: flex;
    flex: 1;
    text-align: center;
    flex-direction: column;
    justify-content: end;
}
.c-stepper__item:not(.c-stepper__item--next) {
	cursor: pointer;
}


.c-stepper__item--current {
    --item-state-color: var(--blue);
    --circle-bg: var(--blue);
    --circle-color: #fff;
}

.c-stepper__item--next {
    --item-state-color: var(--grey);
    --circle-bg: var(--grey-light);
    --circle-color: currentColor;
}


/* Progress bar */
.c-stepper__item:not(:first-child)::before {
    --progress-color: var(--green);
    --progress-gap: 6px;
    --progress-outline: 0px;

    content: "";
    position: relative;
    bottom: calc(var(--circle-size) / 2);
    right: calc(50% - calc(var(--circle-size) / 2 + var(--progress-gap)));
    height: 2px;
    background-color: var(--progress-color);
    order: 1;
    width: calc(100% - var(--circle-size) - var(--progress-outline) - calc(var(--progress-gap) * 2));
}

.c-stepper__item.c-stepper__item--current::before {
    --progress-outline: calc(var(--circle-outline) + var(--circle-outline-offset));
}

.c-stepper__item--current + .c-stepper__item::before {
    --progress-outline: calc(var(--circle-outline) + var(--circle-outline-offset));

    right: calc(50% - calc(var(--circle-size) / 2 + var(--progress-gap) + var(--progress-outline)));
}

.c-stepper__item.c-stepper__item--next::before {
    --progress-color: var(--grey-light);
}


/* Numbered circle */
.c-stepper__circle {
    align-self: center;
}

.c-stepper__circle::after {
    background: var(--circle-bg);
    border-radius: 50%;
    color: var(--circle-color);
    content: counter(step-counter);
    display: block;
    font-size: var(--circle-font-size);
    font-weight: var(--circle-font-weight);
    height: var(--circle-size);
    line-height: var(--circle-size);
    margin: 0 auto;
    position: relative;
    width: var(--circle-size);
    z-index: 1;
}

.c-stepper__circle:focus-visible:after {
    outline: var(--circle-outline) solid var(--circle-bg);
    outline-offset: var(--circle-outline-offset);
}


.c-stepper__item--current .c-stepper__circle::after {
    outline: var(--circle-outline) solid var(--circle-bg);
    outline-offset: var(--circle-outline-offset);
}


/* Label */
.c-stepper__label {
    color: currentColor;
    display: block;
    font-size: 12px;
    padding-bottom: 0.25em;
}

@media (min-width: 768px) {
    .c-stepper__label {
        font-size: 16px;
    }
}