.templatebuilder_PLUG_element_maincontainer_MainContainer {
    font-family: sans-serif;
    box-sizing: border-box;
    font-size: 1em;
    color: #909090;
    cursor: auto;
}

html {
    height: 100%;
}

/*
Portal pages often insert extra elements which can produce unnecessary gaps. To avoid this, we hide empty elements without CSS classes.
This means every empty element that should be visible must have a CSS class.
*/
.templatebuilder_PLUG_element_maincontainer_MainContainer > :not([class]):empty {
    display: none;
}

/*
All elements without a set width in row-oriented containers need to grow to fill available space.

Class naming conventions:
- .ContentDirectionRow-* classes are added to containers with row content orientation in templatebuilder_PLUG_element_container_Base
- .ElementHasWidthAuto classes are added to elements without a set width in templatebuilder_element_Base
- .templatebuilder_PLUG_element_dropzone_DropZone selectors ensure proper behavior for elements inside drop zones
*/

@media (min-width: 992px) {
    .ContentDirectionRow-desktop.HorizontalAlignStretch-desktop > *,
    .ContentDirectionRow-desktop.HorizontalAlignStretch-desktop > .templatebuilder_PLUG_element_dropzone_DropZone > * {
        flex-grow: 1;
    }

    .ContentDirectionRow-desktop.VerticalAlignStretch-desktop > *,
    .ContentDirectionRow-desktop.VerticalAlignStretch-desktop > .templatebuilder_PLUG_element_dropzone_DropZone > * {
        align-self: stretch;
    }

    .ContentDirectionColumn-desktop.VerticalAlignStretch-desktop > *,
    .ContentDirectionColumn-desktop.VerticalAlignStretch-desktop > .templatebuilder_PLUG_element_dropzone_DropZone > * {
        flex-grow: 1;
    }

    .ContentDirectionColumn-desktop.HorizontalAlignStretch-desktop > *,
    .ContentDirectionColumn-desktop.HorizontalAlignStretch-desktop > .templatebuilder_PLUG_element_dropzone_DropZone > * {
        align-self: stretch;
    }

    .ContentDirectionRow-desktop.HorizontalAlignStretch-desktop > .ElementHasntWidthAuto-desktop,
    .ContentDirectionRow-desktop.HorizontalAlignStretch-desktop > .templatebuilder_PLUG_element_dropzone_DropZone > .ElementHasntWidthAuto-desktop{
        flex-grow: 0;
    }

    .ContentDirectionRow-desktop.VerticalAlignStretch-desktop > .ElementHasntHeightAuto-desktop,
    .ContentDirectionRow-desktop.VerticalAlignStretch-desktop > .templatebuilder_PLUG_element_dropzone_DropZone > .ElementHasntHeightAuto-desktop {
        align-self: auto;
    }

    .ContentDirectionColumn-desktop.VerticalAlignStretch-desktop > .ElementHasntHeightAuto-desktop,
    .ContentDirectionColumn-desktop.VerticalAlignStretch-desktop > .templatebuilder_PLUG_element_dropzone_DropZone > .ElementHasntHeightAuto-desktop {
        flex-grow: 0;
    }

    .ContentDirectionColumn-desktop.HorizontalAlignStretch-desktop > .ElementHasntWidthAuto-desktop,
    .ContentDirectionColumn-desktop.HorizontalAlignStretch-desktop > .templatebuilder_PLUG_element_dropzone_DropZone > .ElementHasntWidthAuto-desktop {
        align-self: auto;
    }

    .ContentDirectionRow-desktop > .ElementHasHeightFull-desktop,
    .ContentDirectionRow-desktop > .templatebuilder_PLUG_element_dropzone_DropZone > .ElementHasHeightFull-desktop {
        /* We need !important because builder-generated rules use element IDs (higher specificity) with user-set values */
        height: auto !important;
        align-self: stretch;
    }
}

@media (max-width: 991.98px) and (min-width: 575.99px) {
    .ContentDirectionRow-tablet.HorizontalAlignStretch-tablet > *,
    .ContentDirectionRow-tablet.HorizontalAlignStretch-tablet > .templatebuilder_PLUG_element_dropzone_DropZone > * {
        flex-grow: 1;
    }

    .ContentDirectionRow-tablet.VerticalAlignStretch-tablet > *,
    .ContentDirectionRow-tablet.VerticalAlignStretch-tablet > .templatebuilder_PLUG_element_dropzone_DropZone > * {
        align-self: stretch;
    }

    .ContentDirectionColumn-tablet.VerticalAlignStretch-tablet > *,
    .ContentDirectionColumn-tablet.VerticalAlignStretch-tablet > .templatebuilder_PLUG_element_dropzone_DropZone > * {
        flex-grow: 1;
    }

    .ContentDirectionColumn-tablet.HorizontalAlignStretch-tablet > *,
    .ContentDirectionColumn-tablet.HorizontalAlignStretch-tablet > .templatebuilder_PLUG_element_dropzone_DropZone > * {
        align-self: stretch;
    }

    .ContentDirectionRow-tablet.HorizontalAlignStretch-tablet > .ElementHasntWidthAuto-tablet,
    .ContentDirectionRow-tablet.HorizontalAlignStretch-tablet > .templatebuilder_PLUG_element_dropzone_DropZone > .ElementHasntWidthAuto-tablet {
        flex-grow: 0;
    }

    .ContentDirectionRow-tablet.VerticalAlignStretch-tablet > .ElementHasntHeightAuto-tablet,
    .ContentDirectionRow-tablet.VerticalAlignStretch-tablet > .templatebuilder_PLUG_element_dropzone_DropZone > .ElementHasntHeightAuto-tablet {
        align-self: auto;
    }

    .ContentDirectionColumn-tablet.VerticalAlignStretch-tablet > .ElementHasntHeightAuto-tablet,
    .ContentDirectionColumn-tablet.VerticalAlignStretch-tablet > .templatebuilder_PLUG_element_dropzone_DropZone > .ElementHasntHeightAuto-tablet {
        flex-grow: 0;
    }

    .ContentDirectionColumn-tablet.HorizontalAlignStretch-tablet > .ElementHasntWidthAuto-tablet,
    .ContentDirectionColumn-tablet.HorizontalAlignStretch-tablet > .templatebuilder_PLUG_element_dropzone_DropZone > .ElementHasntWidthAuto-tablet {
        align-self: auto;
    }

    .ContentDirectionRow-tablet > .ElementHasHeightFull-tablet,
    .ContentDirectionRow-tablet > .templatebuilder_PLUG_element_dropzone_DropZone > .ElementHasHeightFull-tablet {
        /* We need !important because builder-generated rules use element IDs (higher specificity) with user-set values */
        height: auto !important;
        align-self: stretch;
    }
}

@media (max-width: 575.98px) {
    .ContentDirectionRow-mobile.HorizontalAlignStretch-mobile > *,
    .ContentDirectionRow-mobile.HorizontalAlignStretch-mobile > .templatebuilder_PLUG_element_dropzone_DropZone > * {
        flex-grow: 1;
    }

    .ContentDirectionRow-mobile.VerticalAlignStretch-mobile > *,
    .ContentDirectionRow-mobile.VerticalAlignStretch-mobile > .templatebuilder_PLUG_element_dropzone_DropZone > * {
        align-self: stretch;
    }

    .ContentDirectionColumn-mobile.VerticalAlignStretch-mobile > *,
    .ContentDirectionColumn-mobile.VerticalAlignStretch-mobile > .templatebuilder_PLUG_element_dropzone_DropZone > * {
        flex-grow: 1;
    }

    .ContentDirectionColumn-mobile.HorizontalAlignStretch-mobile > *,
    .ContentDirectionColumn-mobile.HorizontalAlignStretch-mobile > .templatebuilder_PLUG_element_dropzone_DropZone > * {
        align-self: stretch;
    }

    .ContentDirectionRow-mobile.HorizontalAlignStretch-mobile > .ElementHasntWidthAuto-mobile,
    .ContentDirectionRow-mobile.HorizontalAlignStretch-mobile > .templatebuilder_PLUG_element_dropzone_DropZone > .ElementHasntWidthAuto-mobile {
        flex-grow: 0;
    }

    .ContentDirectionRow-mobile.VerticalAlignStretch-mobile > .ElementHasntHeightAuto-mobile,
    .ContentDirectionRow-mobile.VerticalAlignStretch-mobile > .templatebuilder_PLUG_element_dropzone_DropZone > .ElementHasntHeightAuto-mobile {
        align-self: auto;
    }

    .ContentDirectionColumn-mobile.VerticalAlignStretch-mobile > .ElementHasntHeightAuto-mobile,
    .ContentDirectionColumn-mobile.VerticalAlignStretch-mobile > .templatebuilder_PLUG_element_dropzone_DropZone > .ElementHasntHeightAuto-mobile {
        flex-grow: 0;
    }

    .ContentDirectionColumn-mobile.HorizontalAlignStretch-mobile > .ElementHasntWidthAuto-mobile,
    .ContentDirectionColumn-mobile.HorizontalAlignStretch-mobile > .templatebuilder_PLUG_element_dropzone_DropZone > .ElementHasntWidthAuto-mobile {
        align-self: auto;
    }

    .ContentDirectionRow-mobile > .ElementHasHeightFull-mobile,
    .ContentDirectionRow-mobile > .templatebuilder_PLUG_element_dropzone_DropZone > .ElementHasHeightFull-mobile {
        /* We need !important because builder-generated rules use element IDs (higher specificity) with user-set values */
        height: auto !important;
        align-self: stretch;
    }
}

.templatebuilder_PLUG_element_static_Image img {
    border: 0;
    -ms-interpolation-mode: bicubic;
}

.templatebuilder_PLUG_element_static_Image svg:not(:root) {
    overflow: hidden;
}

.templatebuilder_PLUG_element_static_Image_PictureElement {
    display: flex;
}

.templatebuilder_PLUG_element_static_Image_PictureElement,
.templatebuilder_PLUG_element_static_Image_Img {
    width: 100%;
    height: 100%;
}

.templatebuilder_PLUG_element_static_Image_Img {
    align-self: flex-start;
    object-fit: contain;
}

.templatebuilder_PLUG_element_static_Image.autoWidth,
.templatebuilder_PLUG_element_static_Image.autoWidth .templatebuilder_PLUG_element_static_Image_PictureElement,
.templatebuilder_PLUG_element_static_Image.autoWidth .templatebuilder_PLUG_element_static_Image_Img {
    width: fit-content;
}

.templatebuilder_PLUG_element_static_Image.autoHeight,
.templatebuilder_PLUG_element_static_Image.autoHeight .templatebuilder_PLUG_element_static_Image_PictureElement,
.templatebuilder_PLUG_element_static_Image.autoHeight .templatebuilder_PLUG_element_static_Image_Img {
    height: fit-content;
}

.templatebuilder_PLUG_element_static_Image_BoldLabel .templatebuilder_element_editor_GridFieldLabel {
    font-weight: bold;
}

@supports (-webkit-hyphens:none){
    .templatebuilder_PLUG_element_static_Image_PictureElement {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .templatebuilder_PLUG_element_static_Image.autoWidth,
    .templatebuilder_PLUG_element_static_Image.autoWidth .templatebuilder_PLUG_element_static_Image_PictureElement,
    .templatebuilder_PLUG_element_static_Image.autoWidth .templatebuilder_PLUG_element_static_Image_Img {
        width: auto;
    }

    .templatebuilder_PLUG_element_static_Image.autoHeight,
    .templatebuilder_PLUG_element_static_Image.autoHeight .templatebuilder_PLUG_element_static_Image_PictureElement,
    .templatebuilder_PLUG_element_static_Image.autoHeight .templatebuilder_PLUG_element_static_Image_Img {
        height: auto;
    }
}