.cookie-dimmer {
    position: fixed;
    z-index: 98;
    background-color: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

.cookie-dimmer.hidden {
    display: none;
}

.cookie-banner.hidden {
    display: none;
}

.cookie-banner {
    position: fixed;
    z-index: 99;
    background-color: rgb(243, 243, 243);
    padding: 16px;
    border-radius: 12px;
    max-width: 550px;
    left: calc(calc(100% * 0.5) - 275px);
    top: calc(calc(100% * 0.5) - 200px);
}

@media (max-width: 550px) {
    .cookie-banner {
        position: fixed;
        z-index: 99;
        background-color: white;
        padding: 16px;
        border-radius: 12px;
        width: 80%;
        left: calc(calc(100% * 0.5) - 40%);
        top: calc(calc(100% * 0.5) - 200px);
    }
}

.cookie-banner-inner {
    display:flex;
    flex-direction: column;
    gap: 16px;
}

.cookie-banner-buttons {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cookie-banner-buttons button,
.cookie-details button,
.blocked-open {
    cursor: pointer;
    background-color: rgb(0, 51, 181);
    color: rgb(239, 239, 239);
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
}

.cookie-details button {
    align-self: center;
    justify-self: center;
}

.cookie-banner-buttons button:hover,
.cookie-details button:hover,
.blocked-open:hover {
    cursor: pointer;
    background-color: rgb(13, 71, 218);
    color: rgb(255, 255, 255);
}

@media (max-width: 550px) {
    .cookie-banner-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .cookie-banner-buttons button {
        width: 100%;
    }
}

.cookie-text {
    font-size: clamp(0.8rem, 0.7197rem + 0.2336vw, 1rem);
}

.cookie-page.hidden {
    display: none;
}

.cookie-details, .cookie-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cookie-details.hidden {
    display: none;
}

.cookie-open.hidden {
    display: none;
}

.cookie-banner-footer {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.cookie-banner-footer a {
    font-size: clamp(0.7rem, 0.6599rem + 0.1168vw, 0.8rem);
}

@media (max-width: 550px) {
    .cookie-banner-footer {
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .cookie-banner-footer a {
        font-size: clamp(0.8rem, 0.7167rem + 0.5333vw, 0.9rem);
    }
}
/*
=====================================================
=====================================================
*/
.blocked-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    gap: var(--m16);
    width: 100%;
    padding: var(--m16);
}
.section-dark .blocked-content {
    border: 4px dashed var(--txt-light-2);
}
.section-light .blocked-content {
    border: 4px dashed var(--txt-dark-2);
}

.blocked-content p {
    align-self: center;
}

.blocked-open {
    width: max-content;
    align-self: center;
}


.cookie-open {
    position: fixed;
    z-index: 100;
    background-color: white;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border: solid 1px rgb(41, 41, 41);
    border-bottom: none;
    right: 70px;
    bottom: 0px;
    cursor: pointer;

    font-size: 80%;
    display: flex;
    text-align: center;
    justify-content: center;
    padding: 8px
}

.cookie-open.hidden {
    display: none;
}