.form-group {
    position: relative;
}

.group-help-container {
    position: relative;
}

.helpsystem-box {
    position: absolute;
    left: calc(100% + var(--grid-gap) * 3);
    width: calc(49% - var(--grid-gap) * 2);
    background-color: var(--color-blue-light);
    border-radius: var(--border-radius-inputs);
    margin-top: 2em;
    max-height: 75vh;
}

/* Headline */

.helpsystem-box .headline {
    background-color: var(--color-blue);
    color: var(--color-blue-dark);
    text-transform: uppercase;
    font-weight: 700;
    padding: .75em 1em;
    border-radius: var(--border-radius-inputs) var(--border-radius-inputs) 0 0;
    position: relative;
}

.helpsystem-box .headline:before {
    display: block;
    content: '';
    width: 1.5em;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='23' viewBox='0 0 12 23'%3E%3Cpath id='Polygon_1' data-name='Polygon 1' d='M10.056,1.507a2,2,0,0,1,2.888,0l6.813,7.109A2,2,0,0,1,18.313,12H4.687A2,2,0,0,1,3.243,8.616Z' transform='translate(0 23) rotate(-90)' fill='%2332bfd1'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: right center;
    position: absolute;
    left: -1.25em;
    top: 0;
}

.helpsystem-box .headline:after {
    display: block;
    content: '';
    position: absolute;
    right: 1.25em;
    bottom: .75em;
    width: 3em;
    height: 3em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35.977' height='47.727' viewBox='0 0 35.977 47.727'%3E%3Cg id='Gruppe_20' data-name='Gruppe 20' transform='translate(0 0)'%3E%3Cpath id='Pfad_29' data-name='Pfad 29' d='M65.82,9.218a8.594,8.594,0,1,0-12.929,9.429L50.656,22.1l9.089-2.382A8.589,8.589,0,0,0,65.82,9.218ZM58.432,15.1h-1.8V13.447h1.8Zm0-3.111h-1.8V7.08h1.8Z' transform='translate(-32.129 -2.805)' fill='%2300545f'/%3E%3Cg id='people-fill' transform='translate(0 20.744)'%3E%3Cpath id='Pfad_11' data-name='Pfad 11' d='M8.249,28.983A2.2,2.2,0,0,1,6,26.734c0-2.249,2.249-8.994,11.243-8.994s11.243,6.746,11.243,8.994a2.2,2.2,0,0,1-2.249,2.249Zm8.994-13.491A6.746,6.746,0,1,0,10.5,8.746,6.746,6.746,0,0,0,17.243,15.491Z' transform='translate(7.491 -2)' fill='%2300545f'/%3E%3Cpath id='Pfad_12' data-name='Pfad 12' d='M11.729,20.243a5.032,5.032,0,0,1-.486-2.249A10.731,10.731,0,0,1,15.6,9.63,14.222,14.222,0,0,0,11.243,9C2.249,9,0,15.746,0,17.995a2.2,2.2,0,0,0,2.249,2.249Z' transform='translate(0 6.739)' fill='%2300545f' fill-rule='evenodd'/%3E%3Cpath id='Pfad_13' data-name='Pfad 13' d='M7.621,14.243A5.621,5.621,0,1,0,2,8.621,5.621,5.621,0,0,0,7.621,14.243Z' transform='translate(2.497 -0.751)' fill='%2300545f'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: bottom right;
}

/* list of all help text for each input within a group */
.helpsystem-group {
    padding: 1.5em 0;
    overflow-y: auto;
    max-height: 67vh;
}

.helpsystem-group::-webkit-scrollbar {
    width: 4px;
}

.helpsystem-group::-webkit-scrollbar-track {
    background: var(--color-blue-light);
}

.helpsystem-group::-webkit-scrollbar-thumb {
    background: var(--color-blue);
}

/* help text for a single input field */
.helpsystem-item {
    position: relative;
    padding: 0 1em;
}

.helpsystem-item + .helpsystem-item {
    margin-top: 2em;
}

.helpsystem-item:before {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background-color: transparent;
    border-radius: 0 20px 20px 0;
}

.helpsystem-item.is-hovered:before {
    background-color: var(--color-blue-medium);
}

.helpsystem-item h3 {
    margin: 0 0 .5em;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 700;
}

.helpsystem-item p {
    margin: 0;
}

.helpsystem-item p + p {
    margin-top: 1em;
}