/*
 * As of the complex structure of the CSS classes and the JavaScripts of EXT:wacon_cookie_management
 * the classes of the extension are redefined here in order to style the cookie banner in our cooperate design.
 */

#CookieBox {
    top: 17.35%;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    max-width: 48.5rem; /* 776px */
    padding-top: 6.25rem; /* 100px */
    padding-bottom: 2.1875rem; /* 35px */
    border-radius: 0;

    h3 {
        text-align: center;
        margin-bottom: 0;
        padding-bottom: 1.25rem; /* 20px */
    }

    .ji_cookiebanner_logo img {
        position: absolute;
        top: 1.875rem; /* 30px */
        left: 2.1875rem; /* 35px */
        width: 7.6875rem; /* 123px */
        height: auto;
    }

    .intro {
        width: 100%;

        p {
            margin-bottom: 0;
            padding-bottom: 1.25rem; /* 20px */
        }

        .cookieclose {
            background: white;
            color: var(--ji-red);
            border: 1px solid var(--ji-red);
            border-radius: 0;
        }

        .cookie-management-container {
            margin-bottom: 0;
            padding-bottom: 4.6875rem; /* 75px */

            .cookie-management {
                margin: 0;
                text-align: center;
                cursor: pointer;
                border: none;
                padding: 0;
                background-color: transparent;
                color: var(--ji-red);
            }
        }

        .cookie-legal {
            a {
                display: inline-block;
                font-size: 0.75rem; /* 12px */
                padding: 0 0.625rem; /* 10px */
                margin: 0;

            }

            .ji_cookiebanner_pipe {
                color: var(--ji-light-grey);
            }
        }
    }

    .box-cookie-management {
        .category {
            background-color: transparent;
        }

        .ji_cookiebanner_accordion_wrapper {
            border: 1px solid #DEDEDE;
        }

        .ji_cookiebanner_accordion_closed {
            position: relative;
            padding: 0.625rem 0.5rem 0.625rem 0.5rem;
            background-color: #FFFFFF;
            transition: background-color 0.3s ease;
            list-style: none;
            border: 1px solid var(--ji-anthracite);
        }

        .ji_cookiebanner_accordion_closed:after {
            position: absolute;
            content: "+";
            right: 1.25rem;
            font-size: 1.25rem;
            font-weight: normal;
        }

        .ji_cookiebanner_accordion_closed:hover {
            background-color: #e2e2e2;
        }

        .ji_cookiebanner_accordion_opened {
            position: relative;
            padding: 0.625rem 0.5rem 0.625rem 0.5rem;
            background-color: var(--ji-anthracite);
            list-style: none;
            border: 1px solid var(--ji-anthracite);
            color: white;
        }

        .ji_cookiebanner_accordion_opened:after {
            position: absolute;
            content: "-";
            right: 1.25rem;
            font-size: 1.25rem;
            font-weight: normal;
        }
    }

    .cookie-btn {
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        background: var(--ji-gradient-red);
        border-radius: 0;
    }

    .cookie-fix .cookieback {
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        background: var(--ji-gradient-red);
        border-radius: 0;
        color: white;
        padding: 0.5rem 1rem;
        margin: 0.9375rem auto; /* 15px */
    }

    .cookie-fix {

        .cookie-legal {

            padding-top: 3.125rem; /* 50px */
            padding-bottom: 1.25rem; /* 20px */

            a {
                display: inline-block;
                font-size: 0.75rem; /* 12px */
                padding: 0 0.625rem; /* 10px */
                margin: 0;

            }

            .ji_cookiebanner_pipe {
                color: var(--ji-light-grey);
            }
        }
    }

    a.cookie-accept {
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 1.5625rem; /* 25px */
        padding-right: 1.5625rem; /* 25px */
    }
}

.cookie-set.cookie-has-overlay > img,
.cookie-set.cookie-has-overlay > picture,
.cookie-set.cookie-has-overlay > iframe,
.cookie-set.cookie-has-overlay > .ce-media,
.cookie-set.cookie-has-overlay > .frame,
.cookie-set.cookie-has-overlay > .csc-default {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.cookie-set.cookie-has-overlay .cookie-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem; /* 16px */
    pointer-events: none;
    z-index: 2;
}

.cookie-set.cookie-has-overlay .cookie-overlay p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 1.25rem)); /* 20px */
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
    margin: 0 auto;
    padding: 1.25rem 1.875rem; /* 20px 30px */
    border-radius: 0.3125rem; /* 5px */

    max-width: 37.5rem; /* 600px */
    width: 90%;
}

.cookie-set.script {
    min-height: 0;
}