/* SEA Pages Custom Frontend Styles */

/* TODO: Seperate preview styles from grapejs editor styles an put later in grapejs/css directory */

* {
    font-family: FiraSans, sans-serif;
}

/* bg-page is a class that only exist in cue imported pages */
body:not(.bg-page) {
    body a {
        text-decoration: underline;
        color: var(--placeholder-main);
    }

    body a:hover {
        color: var(--placeholder-dark);
    }

    body footer a,
    body footer a:hover,
    body [data-module-id="HeaderModule"] a,
    body [data-module-id="HeaderModule"] a:hover {
        text-decoration: unset;
        color: unset;
    }

    body footer a {
        text-decoration: none;
        color: unset;
    }
}

@media (min-width: 600px) {
    body footer .border-copy-secondary + div div {
        display: block;

        span {
            display: inline-block;
        }
    }

    body footer .border-copy-secondary ~ .md\:flex-row {
        flex-direction: row;
    }
}

[data-module-id="HorizontalSlideMenuModule"] {
    .bg-hover {
        &:hover {
            background-color: rgba(0, 0, 0, .05);
        }
    }
}

p {
    margin-bottom: 1em;
}

#WAZ {
    a {
        color: var(--waz-main);

        &:hover {
            color: var(--waz-dark);
        }
    }

    .custom-list-style {
        li {
            background-image: url('data:image/svg+xml;base64,CjxzdmcgZGF0YS1uYW1lPSJJY29uIC8gYWRkIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij4KICAgIDxwYXRoIGQ9Ik0wIDBoMTR2MTRIMHoiIHN0eWxlPSJmaWxsOm5vbmUiLz4KICAgIDxwYXRoIGNsYXNzPSJmaWxsLXBsYWNlaG9sZGVyLW1haW4gIWZpbGwte21pbn0tbWFpbiIgZD0iTTkuMTEgMTQuODI1VjEwLjU5SDQuODc1VjkuMDg1SDkuMTFWNC44NWgxLjUwNXY0LjIzNWg0LjIzNXYxLjUwNWgtNC4yMzV2NC4yMzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMi44NjMgLTIuODM2KSIgc3R5bGU9ImZpbGw6I2NjMDAyMCIvPgo8L3N2Zz4K');
        }
    }

    .ribbon::before,
    .ribbon::after {
        border-color: var(--waz-dark);
    }

    .ribbon span {
        background-color: var(--waz-main);
    }
}

#WP {
    a {
        color: var(--wp-main);

        &:hover {
            color: var(--wp-dark);
        }
    }

    .custom-list-style {
        li {
            background-image: url('data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9Ikljb24gLyBhZGQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTQgMTQiPgo8cGF0aCBkPSJNMCAwaDE0djE0SDB6IiBzdHlsZT0iZmlsbDpub25lIi8+CjxwYXRoIGNsYXNzPSJmaWxsLXBsYWNlaG9sZGVyLW1haW4gIWZpbGwte21pbn0tbWFpbiIgZD0iTTkuMTEgMTQuODI1VjEwLjU5SDQuODc1VjkuMDg1SDkuMTFWNC44NWgxLjUwNXY0LjIzNWg0LjIzNXYxLjUwNWgtNC4yMzV2NC4yMzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMi44NjMgLTIuODM2KSIgc3R5bGU9ImZpbGw6IzAwNzdBQSIvPgo8L3N2Zz4K');
        }
    }

    .ribbon::before,
    .ribbon::after {
        border-color: var(--wp-dark);
    }

    .ribbon span {
        background-color: var(--wp-main);
    }
}


#WR {
    a {
        color: var(--wr-main);

        &:hover {
            color: var(--wr-dark);
        }
    }

    .custom-list-style {
        li {
            background-image: url('data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9Ikljb24gLyBhZGQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTQgMTQiPgo8cGF0aCBkPSJNMCAwaDE0djE0SDB6IiBzdHlsZT0iZmlsbDpub25lIi8+CjxwYXRoIGNsYXNzPSJmaWxsLXBsYWNlaG9sZGVyLW1haW4gIWZpbGwte21pbn0tbWFpbiIgZD0iTTkuMTEgMTQuODI1VjEwLjU5SDQuODc1VjkuMDg1SDkuMTFWNC44NWgxLjUwNXY0LjIzNWg0LjIzNXYxLjUwNWgtNC4yMzV2NC4yMzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMi44NjMgLTIuODM2KSIgc3R5bGU9ImZpbGw6I0NDMDAyMiIvPgo8L3N2Zz4K');
        }
    }

    .ribbon::before,
    .ribbon::after {
        border-color: var(--wr-dark);
    }

    .ribbon span {
        background-color: var(--wr-main);
    }
}

#NRZ {
    a {
        color: var(--nrz-main);

        &:hover {
            color: var(--nrz-dark);
        }
    }

    .custom-list-style {
        li {
            background-image: url('data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9Ikljb24gLyBhZGQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTQgMTQiPgo8cGF0aCBkPSJNMCAwaDE0djE0SDB6IiBzdHlsZT0iZmlsbDpub25lIi8+CjxwYXRoIGNsYXNzPSJmaWxsLXBsYWNlaG9sZGVyLW1haW4gIWZpbGwte21pbn0tbWFpbiIgZD0iTTkuMTEgMTQuODI1VjEwLjU5SDQuODc1VjkuMDg1SDkuMTFWNC44NWgxLjUwNXY0LjIzNWg0LjIzNXYxLjUwNWgtNC4yMzV2NC4yMzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMi44NjMgLTIuODM2KSIgc3R5bGU9ImZpbGw6IzAwODc2NSIvPgo8L3N2Zz4K');
        }
    }

    .ribbon::before,
    .ribbon::after {
        border-color: var(--nrz-dark);
    }

    .ribbon span {
        background-color: var(--nrz-main);
    }
}

#IKZ {
    a {
        color: var(--ikz-main);

        &:hover {
            color: var(--ikz-dark);
        }
    }

    .custom-list-style {
        li {
            background-image: url('data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9Ikljb24gLyBhZGQiIHhtbG5zPSJodHRwOi8vd3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij4KPHBhdGggZD0iTTAgMGgxNHYxNEgwWiIgc3R5bGU9ImZpbGw6bm9uZSIvPgo8cGF0aCBjbGFzcz0iZmlsbC1wbGFjZWhvbGRlci1tYWluICFmaWxsLXtteW59LW1haW4iIGQ9Ik05LjExIDE0LjgyNVYxMC41OUg0Ljg3NVY5LjA4NUg5LjExVjQuODVoMS41MDV2NC4yMzVoNC4yMzV2MS41MDVoLTQuMjM1djQuMjM1eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIuODYzIC0yLjgzNikiIHN0eWxlPSJmaWxsOiMwMDg1NjgiLz4KPC9zdmc+Cg==');
        }
    }

    .ribbon::before,
    .ribbon::after {
        border-color: var(--ikz-dark);
    }

    .ribbon span {
        background-color: var(--ikz-main);
    }
}

#BM {
    a {
        color: var(--bmo-main);

        &:hover {
            color: var(--bmo-dark);
        }
    }

    .custom-list-style {
        li {
            background-image: url('data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9Ikljb24gLyBhZGQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTQgMTQiPgo8cGF0aCBkPSJNMCAwaDE0djE0SDB6IiBzdHlsZT0iZmlsbDpub25lIi8+CjxwYXRoIGNsYXNzPSJmaWxsLXBsYWNlaG9sZGVyLW1haW4gIWZpbGwte21pbn0tbWFpbiIgZD0iTTkuMTEgMTQuODI1VjEwLjU5SDQuODc1VjkuMDg1SDkuMTFWNC44NWgxLjUwNXY0LjIzNWg0LjIzNXYxLjUwNWgtNC4yMzV2NC4yMzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMi44NjMgLTIuODM2KSIgc3R5bGU9ImZpbGw6IzAwNWQzMCIvPgo8L3N2Zz4K');
        }
    }

    .ribbon::before,
    .ribbon::after {
        border-color: var(--bmo-dark);
    }

    .ribbon span {
        background-color: var(--bmo-main);
    }
}

#TA {
    a {
        color: var(--ta-main);

        &:hover {
            color: var(--ta-dark);
        }
    }

    .custom-list-style {
        li {
            background-image: url('data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9Ikljb24gLyBhZGQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTQgMTQiPgo8cGF0aCBkPSJNMCAwaDE0djE0SDB6IiBzdHlsZT0iZmlsbDpub25lIi8+CjxwYXRoIGNsYXNzPSJmaWxsLXBsYWNlaG9sZGVyLW1haW4gIWZpbGwte21pbn0tbWFpbiIgZD0iTTkuMTEgMTQuODI1VjEwLjU5SDQuODc1VjkuMDg1SDkuMTFWNC44NWgxLjUwNXY0LjIzNWg0LjIzNXYxLjUwNWgtNC4yMzV2NC4yMzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMi44NjMgLTIuODM2KSIgc3R5bGU9ImZpbGw6IzI5ODUzRCIvPgo8L3N2Zz4K');
        }
    }

    .ribbon::before,
    .ribbon::after {
        border-color: var(--ta-dark);
    }

    .ribbon span {
        background-color: var(--ta-main);
    }
}

#OTZ {
    a {
        color: var(--otz-main);

        &:hover {
            color: var(--otz-dark);
        }
    }

    .custom-list-style {
        li {
            background-image: url('data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9Ikljb24gLyBhZGQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTQgMTQiPgo8cGF0aCBkPSJNMCAwaDE0djE0SDB6IiBzdHlsZT0iZmlsbDpub25lIi8+CjxwYXRoIGNsYXNzPSJmaWxsLXBsYWNlaG9sZGVyLW1haW4gIWZpbGwte21pbn0tbWFpbiIgZD0iTTkuMTEgMTQuODI1VjEwLjU5SDQuODc1VjkuMDg1SDkuMTFWNC44NWgxLjUwNXY0LjIzNWg0LjIzNXYxLjUwNWgtNC4yMzV2NC4yMzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMi44NjMgLTIuODM2KSIgc3R5bGU9ImZpbGw6I0UzMDYxNCIvPgo8L3N2Zz4K');
        }
    }

    .ribbon::before,
    .ribbon::after {
        border-color: var(--otz-dark);
    }

    .ribbon span {
        background-color: var(--otz-main);
    }
}

#TLZ {
    a {
        color: var(--tlz-main);

        &:hover {
            color: var(--tlz-dark);
        }
    }

    .custom-list-style {
        li {
            background-image: url('data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9Ikljb24gLyBhZGQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTQgMTQiPgo8cGF0aCBkPSJNMCAwaDE0djE0SDB6IiBzdHlsZT0iZmlsbDpub25lIi8+CjxwYXRoIGNsYXNzPSJmaWxsLXBsYWNlaG9sZGVyLW1haW4gIWZpbGwte21pbn0tbWFpbiIgZD0iTTkuMTEgMTQuODI1VjEwLjU5SDQuODc1VjkuMDg1SDkuMTFWNC44NWgxLjUwNXY0LjIzNWg0LjIzNXYxLjUwNWgtNC4yMzV2NC4yMzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMi44NjMgLTIuODM2KSIgc3R5bGU9ImZpbGw6IzAwNTM4RCIvPgo8L3N2Zz4K');
        }
    }

    .ribbon::before,
    .ribbon::after {
        border-color: var(--tlz-dark);
    }

    .ribbon span {
        background-color: var(--tlz-main);
    }
}

#HA {
    a {
        color: var(--hao-main);

        &:hover {
            color: var(--hao-dark);
        }
    }

    .custom-list-style {
        li {
            background-image: url('data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9Ikljb24gLyBhZGQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTQgMTQiPgo8cGF0aCBkPSJNMCAwaDE0djE0SDB6IiBzdHlsZT0iZmlsbDpub25lIi8+CjxwYXRoIGNsYXNzPSJmaWxsLXBsYWNlaG9sZGVyLW1haW4gIWZpbGwte21pbn0tbWFpbiIgZD0iTTkuMTEgMTQuODI1VjEwLjU5SDQuODc1VjkuMDg1SDkuMTFWNC44NWgxLjUwNXY0LjIzNWg0LjIzNXYxLjUwNWgtNC4yMzV2NC4yMzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMi44NjMgLTIuODM2KSIgc3R5bGU9ImZpbGw6IzRBN0UzRSIvPgo8L3N2Zz4K');
        }
    }

    .ribbon::before,
    .ribbon::after {
        border-color: var(--hao-dark);
    }

    .ribbon span {
        background-color: var(--hao-main);
    }
}

#BGZ {
    a {
        color: var(--bgz-main);

        &:hover {
            color: var(--bgz-dark);
        }
    }

    .custom-list-style {
        li {
            background-image: url('data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9Ikljb24gLyBhZGQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTQgMTQiPgo8cGF0aCBkPSJNMCAwaDE0djE0SDB6IiBzdHlsZT0iZmlsbDpub25lIi8+CjxwYXRoIGNsYXNzPSJmaWxsLXBsYWNlaG9sZGVyLW1haW4gIWZpbGwte21pbn0tbWFpbiIgZD0iTTkuMTEgMTQuODI1VjEwLjU5SDQuODc1VjkuMDg1SDkuMTFWNC44NWgxLjUwNXY0LjIzNWg0LjIzNXYxLjUwNWgtNC4yMzV2NC4yMzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMi44NjMgLTIuODM2KSIgc3R5bGU9ImZpbGw6IzAwOTY0MCIvPgo8L3N2Zz4K');
        }
    }

    .ribbon::before,
    .ribbon::after {
        border-color: var(--bgz-dark);
    }

    .ribbon span {
        background-color: var(--bgz-main);
    }
}


#bzv, #BZ {
    a {
        color: var(--bzv-main);

        &:hover {
            color: var(--bzv-dark);
        }
    }

    .custom-list-style {
        li {
            background-image: url('data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9Ikljb24gLyBhZGQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTQgMTQiPgo8cGF0aCBkPSJNMCAwaDE0djE0SDB6IiBzdHlsZT0iZmlsbDpub25lIi8+CjxwYXRoIGNsYXNzPSJmaWxsLXBsYWNlaG9sZGVyLW1haW4gIWZpbGwte21pbn0tbWFpbiIgZD0iTTkuMTEgMTQuODI1VjEwLjU5SDQuODc1VjkuMDg1SDkuMTFWNC44NWgxLjUwNXY0LjIzNWg0LjIzNXYxLjUwNWgtNC4yMzV2NC4yMzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMi44NjMgLTIuODM2KSIgc3R5bGU9ImZpbGw6IzBGNzU5NyIvPgo8L3N2Zz4K');
        }
    }

    .ribbon::before,
    .ribbon::after {
        border-color: var(--bzv-dark);
    }

    .ribbon span {
        background-color: var(--bzv-main);
    }
}


#hk {
    a {
        color: var(--hk-main);

        &:hover {
            color: var(--hk-dark);
        }
    }

    .custom-list-style {
        li {
            background-image: url('data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9Ikljb24gLyBhZGQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTQgMTQiPgo8cGF0aCBkPSJNMCAwaDE0djE0SDB6IiBzdHlsZT0iZmlsbDpub25lIi8+CjxwYXRoIGNsYXNzPSJmaWxsLXBsYWNlaG9sZGVyLW1haW4gIWZpbGwte21pbn0tbWFpbiIgZD0iTTkuMTEgMTQuODI1VjEwLjU5SDQuODc1VjkuMDg1SDkuMTFWNC44NWgxLjUwNXY0LjIzNWg0LjIzNXYxLjUwNWgtNC4yMzV2NC4yMzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMi44NjMgLTIuODM2KSIgc3R5bGU9ImZpbGw6I2NjMDAyMCIvPgo8L3N2Zz4K');
        }
    }

    .ribbon::before,
    .ribbon::after {
        border-color: var(--hk-dark);
    }

    .ribbon span {
        background-color: var(--hk-main);
    }
}

.custom-list-style {
    li {
        padding-left: 20px;
        background-image: url('data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9Ikljb24gLyBhZGQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTQgMTQiPjxnPjxwYXRoIGQ9Ik0wIDBoMTR2MTRIMHoiIHN0eWxlPSJmaWxsOm5vbmUiLz48cGF0aCBjbGFzcz0iZmlsbC1wbGFjZWhvbGRlci1tYWluICFmaWxsLXttaW59LW1haW4iIGQ9Ik05LjExIDE0LjgyNVYxMC41OUg0Ljg3NVY5LjA4NUg5LjExVjQuODVoMS41MDV2NC4yMzVoNC4yMzV2MS41MDVoLTQuMjM1djQuMjM1eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIuODYzIC0yLjgzNikiIHN0eWxlPSJmaWxsOiM4MDgwODAiLz48L2c+PC9zdmc+');
        background-repeat: no-repeat;
        background-size: 16px 16px;
        background-position: 0 3px;
        line-height: 24px;

        &:first-child {
            margin-top: 12px;
        }

        &:last-child {
            margin-bottom: 18px;
        }
    }
}

/*MASTER SETTINGS FOR ALL CONTAINER*/

.container-fluid {
    max-width: 960px !important;
    margin: 0 auto !important;
}

.pull-right {
    @extend .float-right;
}

.pull-left {
    @extend .float-left;
}

.float-left {
    float: left;
}

/*This file can change grapejs hud elements, but will not be used for changing things in the canva of grapjs itself.
  Therefore use the /grapejs/css/custom.css */

.icons-flex {
    background-size: 70% 65% !important;
    height: 15px;
    width: 17px;
    opacity: 0.9;
}

.icon-dir-row {
    background: url("./img/flex-dir-row.png") no-repeat center;
}

.icon-dir-row-rev {
    background: url("./img/flex-dir-row-rev.png") no-repeat center;
}

.icon-dir-col {
    background: url("./img/flex-dir-col.png") no-repeat center;
}

.icon-dir-col-rev {
    background: url("./img/flex-dir-col-rev.png") no-repeat center;
}

.icon-just-start {
    background: url("./img/flex-just-start.png") no-repeat center;
}

.icon-just-end {
    background: url("./img/flex-just-end.png") no-repeat center;
}

.icon-just-sp-bet {
    background: url("./img/flex-just-sp-bet.png") no-repeat center;
}

.icon-just-sp-ar {
    background: url("./img/flex-just-sp-ar.png") no-repeat center;
}

.icon-just-sp-cent {
    background: url("./img/flex-just-sp-cent.png") no-repeat center;
}

.icon-al-start {
    background: url("./img/flex-al-start.png") no-repeat center;
}

.icon-al-end {
    background: url("./img/flex-al-end.png") no-repeat center;
}

.icon-al-str {
    background: url("./img/flex-al-str.png") no-repeat center;
}

.icon-al-center {
    background: url("./img/flex-al-center.png") no-repeat center;
}

[data-tooltip]::after {
    background: rgba(51, 51, 51, 0.9);
}

.gjs-pn-commands {
    min-height: 40px;
}

#gjs-sm-float {
    display: none;
}

.gjs-logo-version {
    background-color: #756467;
}

.gjs-pn-btn.gjs-pn-active {
    box-shadow: none;
}

.CodeMirror {
    min-height: 450px;
    margin-bottom: 8px;
}

.grp-handler-close {
    background-color: transparent;
    color: #ddd;
}

.grp-handler-cp-wrap {
    border-color: transparent;
}

.gjs-pn-buttons {
    align-items: center;
    display: flex;
    justify-content: flex-end;
}

body.gjs-dashed *[data-gjs-highlightable] {
    outline: 1px dashed rgba(217, 122, 166, .7);
}

#gjs-canva {
    max-width: 960px;
    margin: 20px auto 20px auto;
}

#gjs-canva > div[data-gjs-type="wrapper"] {
    padding: 8px 0 !important;
}

@media (max-width: 768px) {
    #gjs-canva .hero-three-products .carousel {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}


.article-teaser-link {
    display: block;
    outline: 2px solid transparent;
    outline-offset: 2px;
    font-size: 13px;
}

.fira-sans-light {
    font-family: "Fira Sans", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.fira-sans-medium {
    font-family: "Fira Sans", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.fira-sans-bold {
    font-family: "Fira Sans", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.leading-xs {
    line-height: 18px;
}

.underline-title {
    h2 {
        padding-left: 10px;
        padding-right: 10px;
    }

    &:before {
        bottom: 12px;
        background-color: rgb(158 158 158);
    }
}

.text-gray-td {
    --tw-text-opacity: 1;
    color: rgb(158 158 158 / var(--tw-text-opacity));
}

.line-height-45 {
    line-height: 45px !important;
}

.customModalContainer-Notification {
    display: none;
}

.gjs-toolbar-items .gjs-toolbar-item:nth-child(1) {
    display: none;
}

[data-tooltip="Style Manager öffnen"] {
    order: 3;
    display: none;
}

[data-tooltip="Einstellungen"] {
    order: 2;
}

[data-tooltip="Ebenen öffnen"] {
    order: 4;
    display: none;
}

[data-tooltip="Blöcke öffnen"] {
    order: 1;
}

/* Hide Import and Clear Canva Buttons */
.gjs-pn-options {
    .gjs-pn-btn:nth-child(4),
    .gjs-pn-btn:nth-child(5) {
        display: none;
    }
}

.admin-category {
    display: none;
}

.access-all [data-tooltip="Style Manager öffnen"],
.access-all [data-tooltip="Ebenen öffnen"],
    /*.access-all .gjs-pn-btn:nth-child(4),*/
.access-all .gjs-pn-btn:nth-child(5),
.access-all .admin-category {
    display: block;
}

.placeholderModalContainer {
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    z-index: 9999;
    background: #463a3d;
    margin: 0 auto;
    color: #fff;
    padding: 30px 20px;
    border-radius: 4px;
    cursor: move;

    td {
        cursor: text;
    }
}

.placeholderModalHeader {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 0 16px 12px;
    font-weight: bold;
    border-bottom: 2px solid #ffffff22;
    align-items: center;
}

.placeholderModalClose {
    cursor: pointer;

    &:hover {
        svg {
            fill: #ff9da4;
        }
    }
}

details {
    border-bottom-width: 0 !important;
    background: unset !important;

    summary {
        font-size: 17px;
        font-weight: 600;
        line-height: 21px;
    }
    &[open] {
        border-bottom-width: 1px !important;
        background: var(--color-background-200) !important;
    }
}

.btn-save-close {
    background-color: #ff9da4;
    color: #2a2a2a;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 16px;
    margin-left: 6px;
    min-height: 24px;

    &:hover {
        background-color: #ff7f8d;
    }
}

.black-gradient {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.74) 75%, black);
}

.video-block {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.skeleton {
    background-color: rgba(255, 255, 255, 0);
    animation: pulse 1.5s infinite;
    width: 100%;
    object-fit: cover;
}

.gjs-pn-status-panel {
    margin-left: 125px;
    height: 40px;
    line-height: 30px;
    background: transparent;
}

.gjs-block__media {
    display: flex;
    justify-content: center;
    margin: 0;
}

.loading-spinner::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid #ccc;
    border-top-color: #000;
    animation: spinner .6s linear infinite;
}

.gjs-block-disabled {
    pointer-events: none;
    opacity: 0.5;
}

.text-caption {
    font-size: 12px;
    line-height: 18px;
}

.text-gray-ts {
    color: #525252;
}

.gjs-trt-trait--select {
    [value="ytnc"],
    [value="so"] {
        display: none;
    }
}

.container-fluid {
    &.my-5 {
        margin-top: 1.25rem !important;
        margin-bottom: 1.25rem !important;
    }
}

.iframe-container {
    width: 100%;
}

.iframe-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9; /* 16:9 aspect ratio */
    border: 0;
}

@media (min-width: 768px) {
    .hero-three-products {
        .flickity-button {
            display: none;
        }
    }
}


@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        background-color: #e0e0e0;
    }
    50% {
        background-color: #f0f0f0;
    }
    100% {
        background-color: #e0e0e0;
    }
}

.toClipboard {
    &:hover {
        color: #ff9da4;
        cursor: copy;
    }

    &:active {
        color: limegreen;
    }
}

.video-container {
    position: relative;
    display: inline-block;
    width: 100%; /* Set the width you want */
}

.video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.3s ease-in-out;
}

.video-container video.hovered {
    opacity: 1; /* Show video on hover */
}

.subnav-shadow {
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.bg-gray-900 {
    background-color: rgb(59, 59, 59) !important;
}

.gjs-block {
    gap: 6px;
}

.riddle {
    width: 100%;
    min-height: 600px;
    height: auto;
}

/*ribbon*/
.ribbon {
    width: 90px;
    height: 90px;
    overflow: hidden;
    position: absolute;
}

.ribbon::before,
.ribbon::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid gray;
}

.ribbon span {
    position: absolute;
    display: block;
    width: 258px;
    padding: 6px 0;
    background-color: darkgray;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    text-align: center;
}

/* top right*/
.ribbon-top-right {
    top: -10px;
    right: -10px;
}

.ribbon-top-right::before,
.ribbon-top-right::after {
    border-top-color: transparent;
    border-right-color: transparent;
}

.ribbon-top-right::before {
    top: 0;
    left: 0;
}

.ribbon-top-right::after {
    bottom: 0;
    right: 0;
}

.ribbon-top-right span {
    left: -75px;
    top: 24px;
    transform: rotate(45deg);
}

/* Header */
#block-category-1 {
    order: 1;
}

/* Seiten Elemente */
#block-category-2 {
    order: 4;
}

/* Admin Elemente */
#block-category-3 {
    order: 5;
}

/* Überschriften */
#block-category-4 {
    order: 2;
}

/* Medien */
#block-category-5 {
    order: 3;
}

/* Custom styles for Flickity buttons */
.card-content-slider {
    .flickity-button {
        @apply bg-white shadow-lg rounded-full w-10 h-10 opacity-90 transition-opacity hover:opacity-100;
    }

    .flickity-button:hover {
        @apply bg-white;
    }

    .flickity-button-icon {
        @apply fill-gray-600;
    }

    /* Custom styles for pagination dots */

    .flickity-page-dots {
        @apply bottom-4;
    }

    .flickity-page-dots .dot {
        @apply w-2 h-2 bg-gray-400 opacity-50;
    }

    .flickity-page-dots .dot.is-selected {
        @apply bg-gray-800 opacity-100;
    }

    /* Responsive settings */
    @media (min-width: 768px) {
        .flickity-slider > div {
            width: 33.333% !important;
        }
    }
}

.flickity-viewport {
    overflow-y: visible !important;
}

@media (min-width: 768px) {
    .flickitySliderThreeEl.card-content-slider .flickity-slider > div {
        width: 100% !important;
    }
}

/* hides link option till its working properly */
[data-tooltip="Link"] {
    display: none;
}

#gjs-canva .flickity-enabled.is-draggable .flickity-viewport {
    cursor: auto !important;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotate {
    animation: rotate 1s linear;
}

/*
#assetmanagerStepsContainer li:after {
    content: '';
    width: 20px;
    height: 3px;
    background: rgb(71 85 105 / var(--tw-bg-opacity));
    display: inline-block;
    position: absolute;
    top: 13px;
    left: 38px;
}

#assetmanagerStepsContainer li:last-of-type:after  {
    display:none;
}*/

/*
 * darkmode hotfix
 * for old oranjespark Elements
 * new elements won't need this
 */
html.dark {
    --tlz-main: #136CAA !important;
    --bmo-main: #0E8149 !important;

    .\!text-bmo-main {
        color: #0E8149 !important;
    }

    .\!text-tlz-main {
        color: var(--tlz-main) !important;
    }

    .hero-three-products li.bg-white{
        background: #181818;
        border-color: grey;
    }

    .underline-title .bg-white {
        background: #181818;
    }

    li.bg-gray-100 {
        background: #242424;
    }

    .carousel-cell .bg-white {
        background: #242424;
    }

    .md\:max-w-\[294px\].bg-white {
        background: #181818;
        border-color: grey;
    }

    details.bg-gray-50 {
        background: #181818;
        color: #f2f2f2;
    }

    details.bg-gray-50:hover {
        background: #242424;
    }

    details[open] summary {
        background: #242424 !important;
    }

    details[open]  {
        border-color: grey;
    }

    details p {
        color: #f2f2f2;
    }

    summary.bg-gray-50 {
        background: #181818;
        color: #f2f2f2;
    }

    .top-\[52px\].bg-white {
        background: #181818;

        a {
            background: #242424;
        }
    }
    .md\:-mt-\[70px\].bg-white {
        background: #242424;
    }

    .text-overline.text-gray-ts {
        color: #9E9E9E;
        border-color: #9E9E9E;;
    }
}

/*
 * darkmode hotfix end
 *
 */

.text-overline {
    font-size: 13px;
    line-height: 18px;
}

.animate-pingY {
    animation: 1s pingY infinite;
}


@keyframes pingY {
    75%, 100% {
        transform: scaleY(1.5);
        opacity: 0;
    }
}

/*
 full-with highlight-section
 */

.with-lines {
    position: relative;
    padding: 1rem;
    text-align: center;
    z-index: 1;
}

.with-lines::before,
.with-lines::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 9999px; /* möglichst groß, damit es "unendlich" wirkt */
    z-index: -1;
}

.with-lines::before {
    right: 100%;
}

.with-lines::after {
    left: 100%;
}

/* buy-box */
.buy-box {
    transform: translateY(0%);
    transition: transform 0.3s ease-in-out;
}
.buy-box.buy-box--hidden {
    transform: translateY(135%);
    transition: transform 0.3s ease-in-out;
}
.buy-box.buy-box--minimized {
    transform: translateY(calc(100% - 63px));
    transition: transform 0.3s ease-in-out;
}
@media (min-width: 768px) {
    .buy-box.buy-box--minimized {
        transform: translateY(calc(100% - 69px));
    }
}

.buybox-toggle svg {
    transform: rotate(180deg);
    transition: transform 0.3s ease-in-out;
}
.buy-box.buy-box--minimized .buybox-toggle svg {
    transform: rotate(0deg);
    transition: transform 0.3s ease-in-out;
}
.buybox-toggle-wrapper {
    top: calc(-2.75rem - 1px);
}