:root {
    /*
     * Safe fallbacks: each block sets --icon-bg-color/--title-color/--bg-color/
     * --content-color via an inline style="" on .bobex-block-maindiv (see
     * Advice.php/Grants.php/Price.php/Savings.php), which always wins over
     * these :root defaults for descendants.
     */
    --icon-bg-color: transparent;
    --title-color: inherit;
    --bg-color: transparent;
    --content-color: inherit;
}
.bobex-block-maindiv{
    display:flex;
    width:100%;
    margin-bottom: 15px;
    min-width:300px;
    background-color: var(--bg-color);
    container-name: maindiv;
    container-type: normal;

}

.bobex-lightblock-maindiv{
    display:flex;
    justify-content: left;
    align-items: center;
    margin-bottom: 15px;
}
.bobex-tip-block__content-area{
    width: 70%;
    word-break: break-word ;
    padding: 1em;
}

.bobex-tip-block__icon-area {
    width:30%;
    min-width:100px;
    /*
     * IMPORTANT: the mask shape is inlined as a data: URI (instead of
     * referencing img/mask.svg via a PHP-generated plugin_dir_url()) because
     * on this multisite setup (and potentially in prod across be/nl/...
     * sub-networks on different domains), the plugin's asset URL can point
     * to a DIFFERENT origin than the page being viewed. Firefox silently
     * refuses to apply a cross-origin SVG as a CSS mask-image (the element
     * renders fully unmasked/invisible-mask — i.e. this icon area disappears
     * or shows as a plain unmasked rectangle), while Chromium is more
     * lenient — hence this only reproduced in Firefox. A data: URI is always
     * same-origin, so this works identically in every browser regardless of
     * domain/port mapping.
     */
    mask-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.0%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22946.000000pt%22%20height%3D%22709.000000pt%22%20viewBox%3D%220%200%20946.000000%20709.000000%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cg%20transform%3D%22translate(0.000000%2C709.000000)%20scale(0.100000%2C-0.100000)%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22%3E%20%3Cpath%20d%3D%22M0%203547%20l0%20-3547%204220%200%204220%200%2030%2033%20c55%2059%20120%20161%20141%20222%2048%20133%2033%20328%20-36%20489%20-65%20151%20-151%20278%20-353%20520%20-151%20181%20-230%20289%20-309%20419%20-171%20283%20-272%20575%20-330%20947%20-14%2089%20-18%20176%20-18%20385%200%20348%2017%20460%20145%20975%20135%20544%20149%20636%20157%201030%206%20333%20-4%20493%20-41%20645%20-74%20300%20-215%20579%20-393%20776%20-260%20287%20-552%20458%20-1009%20589%20l-175%2050%20-3125%207%20-3124%206%200%20-3546z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.0%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22946.000000pt%22%20height%3D%22709.000000pt%22%20viewBox%3D%220%200%20946.000000%20709.000000%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cg%20transform%3D%22translate(0.000000%2C709.000000)%20scale(0.100000%2C-0.100000)%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22%3E%20%3Cpath%20d%3D%22M0%203547%20l0%20-3547%204220%200%204220%200%2030%2033%20c55%2059%20120%20161%20141%20222%2048%20133%2033%20328%20-36%20489%20-65%20151%20-151%20278%20-353%20520%20-151%20181%20-230%20289%20-309%20419%20-171%20283%20-272%20575%20-330%20947%20-14%2089%20-18%20176%20-18%20385%200%20348%2017%20460%20145%20975%20135%20544%20149%20636%20157%201030%206%20333%20-4%20493%20-41%20645%20-74%20300%20-215%20579%20-393%20776%20-260%20287%20-552%20458%20-1009%20589%20l-175%2050%20-3125%207%20-3124%206%200%20-3546z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: right;
    -webkit-mask-position: right;
    z-index: 10;
    padding:2.6em;
    background-color: var(--icon-bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bobex-block-tips-title{
    font-size: 1.2rem !important;
    /*font-weight: 500;*/
    font-weight: bold;
    color: var(--title-color);
    word-wrap: break-word;
}

.bobex-block-tips-content{
    font-size: 1rem !important;
    font-weight: 300;
    margin-bottom: 0.5em;
    color:var(--content-color);
    word-wrap: break-word;
}
.bobex-tip-block__tipsLogo{
    width:65%;
    transform: translateX(-15%);
}

@media only screen and (max-width: 970px) {
    .bobex-block-maindiv{
        flex-direction: column;
    }

    .bobex-tip-block__icon-area {
        transform: rotate(90deg);
        padding: unset;
    }

    .bobex-tip-block__icon-area > img {
        transform: rotate(-90deg);
        position: relative;
        top: -10%;
        left: -10%;
    }


    .bobex-block-tips-content{
        word-break: break-word;
    }

    .bobex-tip-block__tipsLogo{
        width:100%;
        scale: 0.5;
    }

    .bobex-tip-block__content-area{
        width:100%;
        z-index:1;
        word-wrap: break-word;
        padding-top: 0 !important;
    }

    .bobex-block-tips-title{
        margin-top: 0;
    }

}