/* FORMS

GENERAL
FORM ELEMENTS
TOOLTIP
TOOLTIP TOGGLE
DRAFT SUBMISSION

*/

/* -----------------------------------------------------------------------
    GENERAL
/* ---------------------------------------------------------------------*/

.path-webform #block-wfbb-content {
    display: grid;
    grid-template-columns: var(--grid-columns);
    grid-column-gap: var(--grid-gap);
    padding: calc(var(--header-height) + 4rem) var(--section-inner-side-padding) 0;
}

.path-webform #block-wfbb-content > div {
    grid-column: 3 / 11;
}

.paragraph--type--wfbb-webform {
    padding: 0 var(--section-inner-side-padding);
    display: grid;
    grid-template-columns: var(--grid-columns);
    grid-column-gap: var(--grid-gap);
}

.paragraph--type--wfbb-webform > div {
    grid-column: 3 / 11;
}

.webform-flex--container .fieldset-legend {
    font-weight: 400;
}

fieldset.js-webform-select-other-input {
    margin-top: 1em;
}

@media (max-width: 1280px) {

    .paragraph--type--wfbb-webform > div {
        grid-column: 4 / 13;
    }

}

@media (max-width: 767px) {

    .paragraph--type--wfbb-webform {
        padding: 0;
    }

    .paragraph--type--wfbb-webform legend {
        font-size: var(--font-size);
    }

    .paragraph--type--wfbb-webform > div {
        grid-column: span 12;
    }

}

.webform-submission-form .form-group {
    margin-bottom: 1rem;
}

.form-group:only-child {
    margin-bottom: 0;
}

.fieldset-wrapper .fieldset-wrapper .form-group {
    margin-bottom: 0;
}

.webform-flexbox {
    margin-top: 0;
}

.webform-submission-form legend {
    font-size: var(--font-size);
    font-weight: 700;
}


/* -----------------------------------------------------------------------
	02	FORM ELEMENTS
/* ---------------------------------------------------------------------*/

/* CHECKBOX + RADIO */

.form-check.checkbox,
.form-check.radio {
    padding: 0;
}

.form-check.checkbox input,
.form-check.radio input {
    display: none;
}

.form-check.checkbox label,
.form-check.radio label {
    padding-left: 2rem;
    position: relative;
}

.form-check.checkbox label:before,
.form-check.radio label:before {
    display: inline-block;
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--color-grey);
    position: absolute;
    top: .4rem;
    left: 0;
    z-index: 1;
}

.form-check.checkbox label:before {
    border-radius: 3px;
}

.form-check.radio label:before {
    border-radius: 50%;
}

.form-check.checkbox input:checked + label:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.177' height='12.509' viewBox='0 0 13.177 12.509'%3E%3Cpath id='Pfad_64' data-name='Pfad 64' d='M-381.03,1995.452l4.1,4.1,6.29-10.132' transform='translate(382.444 -1988.04)' fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E%0A");
    background-size: .65rem;
    background-repeat: no-repeat;
    background-position: center;
    border-color: #000;
}

.form-check.radio label:after {
    display: block;
    content: '';
    position: absolute;
    left: 9px;
    top: 16px;
    height: 1px;
    width: 1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle id='Ellipse_4' data-name='Ellipse 4' cx='7' cy='7' r='7' fill='%23333'/%3E%3C/svg%3E%0A");
    background-size: .65rem;
    background-repeat: no-repeat;
    background-position: center;
    border-color: #000;
    z-index: 2;
    opacity: 0;
}

.form-check.radio input:checked + label:before {
    border-color: #000;
}

.form-check.radio input:checked + label:after {
    display: block;
    content: '';
    position: absolute;
    left: 5px;
    top: 11px;
    height: .65rem;
    width: .65rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle id='Ellipse_4' data-name='Ellipse 4' cx='7' cy='7' r='7' fill='%23333'/%3E%3C/svg%3E%0A");
    background-size: .65rem;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
    opacity: 1;
}

.form-required::after,
.js-form-item input.required + label:after {
    content: '*';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 0.3em;
    color: var(--color-primary);
    background: none;
    vertical-align: unset;
}

/* SELECT */

.custom-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.827' height='11.914' viewBox='0 0 20.827 11.914'%3E%3Cpath id='Pfad_65' data-name='Pfad 65' d='M-738.128,2465.216l8.292,8.292,8.292-8.292' transform='translate(740.25 -2463.094)' fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/svg%3E%0A");
    background-size: 1rem auto;
    background-position: center right 1rem;
    background-repeat: no-repeat;
    border-color: var(--color-grey);
    padding-right: 2.5rem;
}


/* -----------------------------------------------------------------------
    TOOLTIP
/* ---------------------------------------------------------------------*/

.js-webform-tooltip-element {
    position: relative;
}

.js-webform-tooltip-element label {
    display: inline-block;
    position: relative;
    padding-right: 1.25rem;
}

.js-webform-tooltip-element label:before {
    display: inline-block;
    content: '?';
    height: 1rem;
    width: 1rem;
    font-size: 60%;
    background: var(--color-primary);
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    line-height: 1rem;
    text-align: center;
    position: absolute;
    right: 0;
    top: calc( 50% - .5rem);
}

.js-webform-tooltip-element label:hover ~ .description {
    display: block;
    position: absolute;
    width: auto;
    height: unset;
    clip: unset;
    top: 2.25rem;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0 0 0 / .2);
    color: inherit !important;
    padding: .5rem 1rem;
    border-radius: var(--border-radius);
    max-width: 70%;
    white-space: inherit;
    z-index: 10;
    border: 1px solid var(--color-grey-light);
    overflow: visible;
}

.js-webform-tooltip-element label ~ .description:before {
    display: block;
    content: '';
    height: .75rem;
    width: 1.125rem;
    position: absolute;
    top: calc(-.75rem + 1px);
    left: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9'%3E%3Cg id='Polygon_7' data-name='Polygon 7' fill='%23fff'%3E%3Cpath d='M 16.79290008544922 8.5 L 1.207100033760071 8.5 L 9 0.707099974155426 L 16.79290008544922 8.5 Z' stroke='none'/%3E%3Cpath d='M 9 1.414219856262207 L 2.414219856262207 8 L 15.58578014373779 8 L 9 1.414219856262207 M 9 0 L 18 9 L 0 9 L 9 0 Z' stroke='none' fill='%23EBEBEB'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center bottom;
}

.js-webform-tooltip-element label ~ .description:after {
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 1rem;
    width: 1.125rem;
    height: 1px;
    background-color: var(--color-item-bg-1);
    z-index: 1;
}


.js-webform-tooltip-element label:hover ~ .description > div.visually-hidden {
    position: relative !important;
    clip: unset;
    width: auto;
    height: auto;
}

.js-webform-tooltip-element label:hover ~ .description:before {
    display: block;
}


/* -----------------------------------------------------------------------
    TOOLTIP TOGGLE
/* ---------------------------------------------------------------------*/

.webform-element-more--link {
    position: absolute;
    right: 0;
    top: 0;
}

fieldset.js-form-item {
    position: relative;
}

.webform-element-more--link:before {
    display: none;
}

.webform-element-more--link:after {
    display: inline-block;
    content: '+';
    width: 1rem;
    height: 1rem;
    margin-left: .5rem;
    color: var(--color-primary);
    position: relative;
    top: -.05rem
}

.is-open .webform-element-more--link:after {
    content: '-';
}

.webform-element-more--content {
    font-size: 80%;
    padding-bottom: 1rem;
}

/* -----------------------------------------------------------------------
    DRAFT MESSAGE
/* ---------------------------------------------------------------------*/

.draft-message {
    padding: 0 var(--section-inner-side-padding);
    display: grid;
    grid-template-columns: var(--grid-columns);
    grid-column-gap: var(--grid-gap);
    margin-bottom: 2rem;
}

.draft-message-wrapper {
    grid-column: 3/11;
    position: relative;
}

.draft-message-wrapper {
    background-color: #ffefb0;
    border-radius: var(--border-radius);
    border: 1px solid #ffd223;
    padding: .75em 3em .75em 1em;
    position: relative;
}

.close-draft-message {
    position: absolute;
    top: 1em;
    right: 1em;
    text-indent: -99999px;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28.243' height='28.243' viewBox='0 0 28.243 28.243'%3E%3Cg id='Gruppe_365' data-name='Gruppe 365' transform='translate(-1241.379 -2376.88)'%3E%3Cline id='Linie_119' data-name='Linie 119' x2='24' y2='24' transform='translate(1243.5 2379.001)' fill='none' stroke='%23000' stroke-linecap='round' stroke-width='3'/%3E%3Cline id='Linie_120' data-name='Linie 120' x2='24' y2='24' transform='translate(1267.5 2379.001) rotate(90)' fill='none' stroke='%23000' stroke-linecap='round' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-size: contain;
    cursor: pointer;
}

.close-draft-message:hover {
    opacity: .7;
}

@media (max-width: 1280px) {
    .draft-message-wrapper {
        grid-column: 4/13;
    }
}

@media (max-width: 768px) {
    .draft-message {
        padding: 0;
    }

    .draft-message-wrapper {
        grid-column: span 12;
    }
}

/* Honeypot field */
form fieldset.form-item-url {
  display: none;
}

.webform-flex--container {
    margin: 0;
}