/* Base styles for partial backgrounds */
.background-half,
.background-top-half,
.background-bottom-half {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
    background-color: transparent !important; /* Remove background from the row itself */
}

/* Create the colored portion using :before */
.background-half:before,
.background-top-half:before,
.background-bottom-half:before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    left: 0 !important;
    right: 0 !important;
    height: 50% !important;
    pointer-events: none !important;
}

/* Extract the background color from the row class */
.style-color-161147-bg.background-half:before,
.style-color-161147-bg.background-top-half:before,
.style-color-161147-bg.background-bottom-half:before {
    background-color: #f2f2f2 !important; /* Hardcode the color */
}

/* Add other color classes as needed */
.style-color-xsdn-bg.background-half:before,
.style-color-xsdn-bg.background-top-half:before,
.style-color-xsdn-bg.background-bottom-half:before {
    background-color: #ffffff !important;
}

/* Position variations */
.background-half:before,
.background-bottom-half:before,
.background-half.background-position-bottom:before {
    top: auto !important;
    bottom: 0 !important;
}

.background-top-half:before,
.background-half.background-position-top:before {
    top: 0 !important;
    bottom: auto !important;
}

.background-half.background-position-center:before {
    top: 25% !important;
    bottom: auto !important;
}

/* Ensure content stays above the background */
.background-half > *,
.background-top-half > *,
.background-bottom-half > * {
    position: relative !important;
    z-index: 2 !important;
}

/* Handle media elements */
.background-half .uncode-single-media-wrapper,
.background-top-half .uncode-single-media-wrapper,
.background-bottom-half .uncode-single-media-wrapper {
    position: relative !important;
    z-index: 2 !important;
}