.node--type-webform.node--view-mode-full{
    div.banner {
        background: #efefef;
        padding: 2rem 0;
        margin-bottom: 0rem;
        display: flex;
        flex-wrap: wrap;
    
        > .inner {
            max-width: 85em;
            margin: 0 auto;
            padding: 2em;
            display: flex;
            width: 100%;
            flex-wrap: nowrap;

            .intro {
                flex-grow: 1;
                max-width: 50rem;
                max-width: min(100%, 50rem);
            }
        }
    }

    > .content {
        margin: 2em auto;
        padding: 0 2em;

        > .primary {
            background-color: white;
            padding: 2em 0;
            box-shadow: 0 4px 4px rgba(0,0,0,0.15);
            margin-bottom: 2rem;

            > .field,
            > .attachments {
                padding-left: 2rem;
                padding-right: 2rem;
                margin-bottom: 1rem;

                .field__label {
                    font-size: 1.25rem;
                    line-height: inherit;
                    color: var(--primaryDark);
                }
            }
            
        }
    }

    @media screen and (min-width: 60em) {
        > .content {
            max-width: 85em;
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
            width: 100%;

            > .primary {
                max-width:  60em;
                max-width: min(100%, 60em);
                margin-right: 2em;
                margin-bottom: 0;
                padding: 2em;
                width: 100%;
            }
        }
    }

    .node-links {
        padding: 1rem 2rem;
    }

    .geolocation-map-wrapper {
        margin: 2rem;
    }

    .field--name-webform {
        background: var(--background);
        padding: 2rem !important;
        margin: 0 2rem !important;
    }
}

.webform-submission-form {
    accent-color: var(--primary);
}

.webform-submission-form fieldset > legend span {
    font-size: 1.25rem;
    display: flex !important;
    color: var(--primary);
}

/* Entity Radios and Normal Radios */
.webform-entity-radios--wrapper,
.radios--wrapper {
    border-bottom: 1px solid var(--highlightMagenta);
    margin: 0 0 2rem;
}
.webform-entity-radios--wrapper legend > span,
.radios--wrapper legend > span,
.webform-radios-other--wrapper legend > span,
.webform-checkboxes-other--wrapper legend > span {
    font-size: 1.25rem;
    font-weight: bold;
    font-family: var(--fontBold);
    color: var(--primary);
    margin-bottom: 0.25rem;
}

.webform-entity-radios--wrapper legend > span.form-required,
.radios--wrapper legend > span.form-required  {
    display: flex;
    width: 100%;
    align-items: center;
    margin-top: 0;
    border: 0;
}

.webform-entity-radios--wrapper legend > span.form-required .webform-element-help,
.radios--wrapper legend > span.form-required .webform-element-help {
    order: 1;
}

.webform-entity-radios--wrapper .description,
.webform-radios-other--wrapper .description,
.webform-checkboxes-other--wrapper .description,
.radios--wrapper .description {
    font-size: 1em;
}

.webform-entity-radios--wrapper .form-radios,
.webform-radios-other--wrapper .form-radios,
.radios--wrapper .form-radios {
    margin: 0 0 2rem 0;
    width: 100%;
    max-width: 100vw;
}

@media screen and (min-width: 60em) {
    .webform-entity-radios--wrapper .form-radios,
    .webform-radios-other--wrapper .form-radios,
    .radios--wrapper .form-radios {
        margin: 0 0 2rem 0;
        width: calc(100% - 3rem);
    }
}

.webform-entity-radios--wrapper .field-prefix + .form-radios,
.radios--wrapper .field-prefix + .form-radios {
    margin: 2rem 0 2rem 0;
}

.webform-entity-radios--wrapper .form-radios:has(strong:empty),
.radios--wrapper .form-radios:has(strong:empty) {
    margin-top: 0;
}
.webform-entity-radios--wrapper .field-prefix + .form-radios:has(strong:empty),
.radios--wrapper .field-prefix + .form-radios:has(strong:empty) {
    margin-top: 2rem;
} 

.webform-entity-radios--wrapper .form-type-radio,
.webform-radios-other--wrapper .form-type-radio,
.webform-checkboxes-other--wrapper .form-type-checkbox,
.radios--wrapper .form-type-radio {
    padding: 1.5rem 2rem 1.5rem 1rem;
    border: 2px solid var(--borderGrey);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    font-family: var(--fontBold);
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    max-width: 85%;
    font-size: 0.875rem;
}

.webform-entity-radios--wrapper .form-type-radio:has(input:checked),
.webform-radios-other--wrapper .form-type-radio:has(input:checked),
.webform-checkboxes-other--wrapper .form-type-checkbox:has(input:checked),
.radios--wrapper .form-type-radio:has(input:checked) {
    border: 2px solid var(--primary)
}

.webform-entity-radios--wrapper .form-type-radio input,
.webform-radios-other--wrapper .form-type-radio input,
.webform-checkboxes-other--wrapper .form-type-checkbox input,
.radios--wrapper .form-type-radio input {
    appearance: none;
    border: 1px solid var(--primaryLight);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    margin-right: 1rem
}

.webform-entity-radios--wrapper .form-type-radio input:checked,
.webform-radios-other--wrapper .form-type-radio input:checked,
.webform-checkboxes-other--wrapper .form-type-checkbox input:checked,
.radios--wrapper .form-type-radio input:checked {
    background-color: var(--primary);
    border: 4px solid white;
    box-shadow: 0 0 2px #000;
}

.webform-entity-radios--wrapper .form-type-radio input:checked + label,
.webform-radios-other--wrapper .form-type-radio input:checked + label,
.webform-checkboxes-other--wrapper .form-type-checkbox input:checked + label,
.radios--wrapper .form-type-radio input:checked + label {
    color: var(--primary);
}

.webform-entity-radios--wrapper .form-type-radio label,
.webform-radios-other--wrapper .form-type-radio label,
.webform-checkboxes-other--wrapper .form-type-checkbox label,
.radios--wrapper .form-type-radio label {
    display: inline-flex;
    width: 100%;
    width: calc(100% - 3rem);
    justify-content: space-between;
    align-items: center;
}

.webform-entity-radios--wrapper .form-type-radio label h3 {
    margin: 0;
}

legend i {
    font-style: normal;
    display: block;
}

/* Flexbox Radio Buttons */
.webform-options-display-buttons-horizontal {
    width: 100%;
    gap: 2rem;
    display: flex;
}

.webform-options-display-buttons-horizontal .webform-options-display-buttons-wrapper {
    margin: 0;
    width: 100%;
}

@media screen and (min-width: 60em) {
    .webform-options-display-buttons-horizontal .webform-options-display-buttons-wrapper {
        margin: 0;
        width: calc(25% - 2rem);
    }
}

.webform-options-display-buttons-horizontal .webform-options-display-buttons-wrapper .form-item {
    padding: 0;
    margin: 0;
}

.webform-options-display-buttons-horizontal .webform-options-display-buttons-wrapper .form-item label {
    flex-direction: column;
    background-color: transparent;
    border: 0;
    padding: 1.5rem;
    height: auto;
    width: 100%;
}

@media screen and (min-width: 60em) {
    .webform-options-display-buttons-horizontal .webform-options-display-buttons-wrapper .form-item label {
        padding: 2rem;
    }
}

.webform-options-display-buttons-horizontal .webform-options-display-buttons-wrapper .form-item label span {
    display: block;
    height: auto;
}

.webform-options-display-buttons-horizontal .webform-options-display-buttons-wrapper .form-item label:after {
    display: none;
}

.webform-options-display-buttons input:checked:focus + label.webform-options-display-buttons-label {
    box-shadow: none;
}

/* Number field */
.form-type-number > label {
    font-size: 1.25rem;
    font-weight: bold;
    font-family: var(--fontBold);
    color: var(--primary);
    margin-bottom: 1.5rem;
    display: block;
}

.form-type-number .field-prefix {
    font-size: 1.25rem;
    opacity: 0.5;
}

.form-type-number input {
    padding: 1rem 1.5rem;
    width: 40%;
    border-radius: 1rem;
    border: 1px solid var(--borderGrey);
    font-size: 1.25rem;
}

/* Select */
.form-type-select > label {
    font-size: 1.25rem;
    font-weight: bold;
    font-family: var(--fontBold);
    color: var(--primary);
    margin-bottom: 0.75rem;
    display: block;
}

.form-type-select select {
    padding: 1rem 1.5rem;
    width: 40%;
    border-radius: 1rem;
    border: 1px solid var(--primary);
    font-size: 1.25rem;
}

.form-type-select .form-item--error-message {
    margin-top: 1rem;
}

.form-type-datelist select {
    width: 100%;
}

/* Text / Date /Email / Telephone */
.form-type-textfield > label,
.form-type-date > label,
.form-type-datelist > label,
.form-type-tel > label,
.form-type-email > label,
.form-type-textarea > label,
.form-type-webform-document-file > label {
    font-size: 1.25rem;
    font-weight: bold;
    font-family: var(--fontBold);
    color: var(--primary);
    margin-bottom: 0.5rem;
    display: block;
}

.form-type-number .field-prefix,
.form-type-textfield .field-prefix,
.form-type-date .field-prefix,
.form-type-datelist .field-prefix,
.form-type-tel .field-prefix,
.form-type-email .field-prefix {
    font-size: 1.5rem;
    opacity: 1;
}

.form-type-number input,
.form-type-textfield input,
.form-type-date input,
.form-type-tel input,
.form-type-email input {
    padding: 0.5rem;
    border-radius: 2rem;
    border: 1px solid var(--primary);
    font-size: 1rem;
    max-width: 100%;
    width: 100%;
}

.form-type-checkbox:not(.form-checkboxes >.form-type-checkbox) {
    border: 2px solid #cecece;
    padding: 1rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    padding-left: 3rem;
    position: relative;
}

.form-type-checkbox:not(.form-checkboxes >.form-type-checkbox) input {
    height: 1.5rem;
    width: 1.5rem;
    position: absolute;
    left: 1rem;
}

.form-item .description {
    font-size: 1rem;
}

.form-type-email .description + input {
    margin-top: 1rem;
}

@media screen and (min-width: 60em) {
    .form-type-number input,
    .form-type-textfield input,
    .form-type-date input,
    .form-type-tel input,
    .form-type-email input {
        width: 40%;
        padding: 1rem 1.5rem;
        font-size: 1.25rem;
    }

    .form-type-datelist .container-inline {
        display: inline-flex !important;
        justify-content: space-between;
        gap: 1rem;
        width: 80%;
    }

    .form-type-datelist .container-inline .form-item {
        margin: 0;
        width: 25%;
    }

    .form-type-datelist .container-inline .form-item[class*="year"] {
        width: 50% !important;
    }

    .form-type-datelist .form-type-textfield input {
        width: 100%;
        padding: 1.125rem;
        text-align: center;
        max-width: inherit;
    }
}

.form-type-textarea textarea {
    padding: 0.5rem;
    width: 80%;
    border-radius: 1rem;
    border: 1px solid var(--primary);
    font-size: 1rem;
}

@media screen and (min-width: 60em) {
    .form-type-textarea textarea {
        padding: 1rem 1.5rem;
        font-size: 1.25rem;
    }
}

.form-type-webform-document-file label.button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 2px solid;
    border-radius: 2rem;
    margin-bottom: 0.5rem;
    color: var(--primary);
    cursor: pointer;
}

.form-type-webform-document-file label.button:hover,
.form-type-webform-document-file label.button:focus-visible {
    background-color: var(--primary);
    color: #fff;
}

.form-type-number .form-item--error-message,
.form-type-textfield .form-item--error-message,
.form-type-date .form-item--error-message,
.form-type-tel .form-item--error-message,
.form-type-email .form-item--error-message {
    margin-top: 1rem;
}

/* Method Field */
.form-type-radio .field--name-description {
    font-family: var(--fontNormal);
    text-align: left;
    font-size: 1rem;
    border-top: 1px solid var(--borderGrey);
    padding: 1.5rem 0 0;
}

.form-type-radio .field--name-description ul {
    padding-left: 1rem;
}

/* More info styling */
.webform-element-more {
    margin: 1rem 0 2rem;
}

.webform-element-more--link:before {
    content: none !important;
}

.webform-element-more--link a:after {
    font-family: 'icomoon';
    content: "\e90d";
    display: inline-block;
    margin-left: 0.25rem;
    top: 2px;
}

.webform-element-more--content {
    padding: 1rem 0;
}

.webform-element-more.is-open .webform-element-more--link a:after {
    content: "\e90c";
    position: relative;
    top: 1px;
}


/* Buttons */
.webform-actions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.webform-actions .button {
    display: flex;
    border: 1px solid var(--primary);
    border-radius: 2rem;
    padding: 1rem 1.5rem;
    font-family: var(--fontBold);
    background-color: var(--primary);
    color: #fff;
    cursor: pointer;
    white-space: unset;
}

.webform-actions .button:hover,
.webform-actions .button:focus-visible {
    background-color: var(--primaryDark);
}

.webform-actions.form-disabled {
    filter: grayscale(1);
    opacity: 0.5;
}

.webform-actions input.webform-button--next {
    margin: 0;
}

.webform-actions input.webform-button--previous {
    background-color: transparent;
    border-color: var(--text);
    color: var(--text);
    font-family: var(--fontNormal);
    order: 2;
}

@media screen and (min-width: 60em) {
    .webform-actions input.webform-button--previous {
        order: 0;
    }
}

.webform-actions input.webform-button--previous:hover,
.webform-actions input.webform-button--previous:focus-visible {
    background-color: #fff;
}

.webform-confirmation-modal {
    border-radius: 1rem;
}

.ui-dialog.webform-confirmation-modal .ui-dialog-titlebar {
    border: 0;
    margin-bottom: 1rem;
}

.webform-confirmation-modal .ui-dialog-title {
    font-family: var(--fontBold);
    color: var(--primary);
    font-size: 1.5rem;
    visibility: visible !important;
    width: 100%;
    text-align: center;
    font-family: var(--fontBold);
    font-weight: 700 !important;
}

.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.webform-confirmation-modal {
    background: white;
    border: 4px solid var(--primary) !important;
    border-radius: 1rem;
    max-width: 100ch;
    overflow: hidden;
}

span.ui-button-icon.ui-icon.ui-icon-closethick {
    filter: hue-rotate(90deg);
}

.ui-corner-all.ui-widget.ui-widget-content.ui-front.webform-confirmation-modal .ui-dialog-titlebar-close {
    right: 1rem;
    top: 1rem;
    transform: none;
    width: auto;
    text-indent: unset;
    border: 2px solid var(--white);
    border-radius: 2rem;
    font-size: 0.75rem;
    padding: 0.25rem 1rem;
    color: var(--white);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.25px;
    height: auto;
    line-height: 1;
}

.ui-corner-all.ui-widget.ui-widget-content.ui-front.webform-confirmation-modal .ui-dialog-titlebar-close:hover,
.ui-corner-all.ui-widget.ui-widget-content.ui-front.webform-confirmation-modal .ui-dialog-titlebar-close:focus-visible {
    background-color: var(--highlightRed);
    color: white;
    outline-offset: 2px;
}

.ui-corner-all.ui-widget.ui-widget-content.ui-front.webform-confirmation-modal .webform-confirmation-modal--content {
    padding: 0 2rem 1.5rem 2rem;
    text-align: center;
}