/* frame class */
@media all {
    .ce-frame-inverted > div > div {
        color: var(--color-text-light);
        background-color: rgba(var(--color-accent-rgb), .8);
    }

    .content-main .ce-frame-lightbox-element {
        display: none;
    }

    .ce-frame-lightbox-element {
        position: relative;
    }

    .ce-frame-lightbox-element.ce-layout-box .ce-type-textmedia {
        margin-top: calc(var(--gap-6) * -1);
        margin-left: calc(var(--gap-5) * -1);
        margin-right: calc(var(--gap-5) * -1);
    }
}

/* layout class */
@media all {
    .ce-layout-box-outer {
        background-color: rgba(var(--color-bg-light-rgb), .8);
        box-shadow: var(--box-shadow);
        border-radius: var(--border-radius);
        backdrop-filter: blur(var(--backdrop-filter));
    }

    .mfp-container .ce-layout-box-outer {
        background-color: rgba(var(--color-bg-light-rgb), 1);
    }

    .ce-grid-fullwidth-largeimage .ce-layout-box-outer {
        backdrop-filter: blur(var(--backdrop-filter));
    }

    .ce-layout-box-inner .ce-teaser-image .ce-media-image,
    .ce-layout-box-outer .ce-above .ce-media-image {
        border-radius: var(--border-radius) var(--border-radius) var(--border-radius-half) var(--border-radius-half);
    }

    .ce-layout-box-inner {
        padding: var(--gap-6) var(--gap-5);
    }

    .ce-layout-box-inner > .ce-teaser-set-img .ce-teaser-image,
    .ce-layout-box-inner > :is(
    .ce-above,
    .ce-below) > .ce-gallery {
        margin-left: calc(-1 * var(--gap-5));
        margin-right: calc(-1 * var(--gap-5));
        width: calc(100% + var(--gap-5) * 2);
    }

    .ce-layout-box-inner > .ce-teaser-set-img .ce-teaser-image,
    .ce-layout-box-inner > .ce-above {
        margin-top: calc(-1 * var(--gap-6));
    }   
}

@media (min-width:48rem) {
    .ce-layout-box .ce-element:last-child {
        margin-bottom: 0;
    }

    .ce-frame-lightbox-element.ce-layout-box .ce-type-textmedia {
        margin-right: 0;
        margin-bottom: calc(var(--gap-6) * -1);
    }
}

/* space classes */
@media all {
    .ce-space-before-none {
        margin-top: 0 !important
    }

    .ce-space-before-extra-small {
        margin-top: var(--gap-2) !important
    }

    .ce-space-before-small {
        margin-top: var(--gap-4) !important
    }

    .ce-space-before-medium {
        margin-top: var(--gap-6) !important
    }

    .ce-space-before-large {
        margin-top: var(--gap-8) !important
    }

    .ce-space-before-extra-large {
        margin-top: var(--gap-y-xl) !important
    }

    .ce-space-after-none {
        margin-bottom: 0 !important
    }

    .ce-space-after-extra-small {
        margin-bottom: var(--gap-2) !important
    }

    .ce-space-after-small {
        margin-bottom: var(--gap-4) !important
    }

    .ce-space-after-medium {
        margin-bottom: var(--gap-6) !important
    }

    .ce-space-after-large {
        margin-bottom: var(--gap-8) !important
    }

    .ce-space-after-extra-large {
        margin-bottom: var(--gap-y-xl) !important
    }
}

@media all {

    .ce-frame-application .ce-textmedia {
        flex-wrap: nowrap;
        align-items: center;
        font-weight: 700;
    }

    .ce-frame-application .init-application .powermail_field .powermail_radio_text {
        text-align: left;
        hyphens: auto;
    }

    .ce-frame-application .ce-layout-box-outer {
        align-items: center;
    }

    .ce-frame-application .ce-layout-box-inner > .ce-teaser-set-img .ce-teaser-image,
    .ce-layout-box-inner > :is(
    .ce-above,
    .ce-below) > .ce-gallery {
        margin: 0;
        display: flex;
        align-items: center;
    }

    .ce-frame-application .ce-layout-box-inner > .ce-above {
        margin: 0;
    }

    .ce-frame-application .ce-layout-box-inner {
        padding: 1rem 1.5rem;
    }

    .ce-frame-application .ce-gallery {
        width: calc(25% - var(--gap-5) / 2)!important;
    }


    .ce-frame-application .ce-media-image {
        border-radius: 0!important;
    }
    
    .page-modifier-dios .ce-frame-application form > .ce-type-header {
        display: none;
    }
}

@media (min-width: 48rem) {
    .ce-frame-application .ce-gallery {
        width: calc(50% - var(--gap-10) / 2)!important;
    }

}