.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;
    }
}

