/*<link rel="stylesheet" href="https://chargeflow-harel.vercel.app/styles/cookies.css" />*/

#CybotCookiebotDialog {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backdrop-filter: blur(5px);
    border-radius: 1.25em !important;
    border: none !important;
    font-family:
        Helvetica Now,
        sans-serif !important;
    line-height: 1.2em !important;
    padding: 1.25rem !important;
    border: 2px solid #61616150 !important;
    background-color: rgba(44, 44, 44, 0.95) !important;

    /**/
    max-height: 44dvh !important;
    &[data-uw-cer-popup-wrapper] {
        max-width: 40em !important;
    }
    /* If .CollapseCard comes BEFORE the intro */
    .CollapseCard ~ .CybotCookiebotDialogDetailBodyContentCookieTypeIntro {
        display: block !important;
    }
    .CollapseCard.CybotCookiebotDialogHide
        ~ .CybotCookiebotDialogDetailBodyContentCookieTypeIntro {
        display: none !important;
    }
    /* If .CollapseCard comes AFTER the intro */
    .CybotCookiebotDialogDetailBodyContentCookieTypeIntro:has(~ .CollapseCard) {
        display: block !important;
    }
    .CybotCookiebotDialogDetailBodyContentCookieTypeIntro:has(
        ~ .CollapseCard.CybotCookiebotDialogHide
    ) {
        display: none !important;
    }

    &[data-template="popup"] {
        & #CybotCookiebotDialogTabContent {
            padding: 1.5em 0.5em !important;

            & .CybotCookiebotDialogBodyBottomWrapper {
                display: none !important;
            }
        }
    }

    & #CybotCookiebotDialogDetailBodyContentCookieContainerTypes,
    & #CybotCookiebotDialogDetailBodyContentIABv2Tabs {
        padding: 0 1.125em !important;
    }
    & #CybotCookiebotDialogDetailBulkConsent {
        margin: 0 0.625em 1em !important;
        padding: 1em !important;
    }
    /**/

    & #CybotCookiebotDialogTabContentDetails {
        /* The scrollbar track (background) */
        &::-webkit-scrollbar {
            width: 8px;
        }

        &::-webkit-scrollbar-track {
            background: #1a1a1a;
        }

        /* The draggable thumb */
        &::-webkit-scrollbar-thumb {
            background: #555;
            border-radius: 4px;
        }

        &::-webkit-scrollbar-thumb:hover {
            background: #888;
        }
    }

    & .CookieCard {
        padding: 1.5em 0 !important;
    }

    &
        #CybotCookiebotDialogNav
        .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
        border-width: 1px !important;
    }

    &.CybotEdge {
        width: 94svh !important;
        max-width: 24rem !important;
        min-width: 0 !important;
    }

    &[data-template="slideup"].CybotCookiebotDialogActive {
        transform: translate(0%, -100%) !important;
    }

    &[data-template="slideup"] {
        top: calc(100% - 2svw) !important;
        left: 2svw !important;
    }

    & .CybotCookiebotScrollContainer .CybotCookiebotScrollbarContainer {
        background-color: inherit !important;
    }

    & #CybotCookiebotDialogBodyContentText,
    & #CybotCookiebotDialogBodyEdgeMoreDetailsLink {
        font-weight: 500;
        font-size: 1.125rem;
        line-height: 0.9;
        font-family:
            Degular Display,
            sans-serif !important;
    }

    & #CybotCookiebotDialogBodyEdgeMoreDetailsLink {
        transition: opacity 0.4s ease;
        height: 1.125rem !important;
        &:hover {
            opacity: 0.8;
        }
        &::after {
            content: ">" !important;
            color: #97a3b6 !important;
            margin-left: 0.25em !important;
            border: none !important;
            height: auto !important;
            transform: rotate(0deg) !important;
            width: auto !important;
        }
    }

    /*start*/
    #CybotCookiebotDialogBodyButtonsWrapper {
        display: flex !important;
        gap: 0.25rem !important;
    }

    #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
        --d: 5s;
        --angle: 0;
        --c1: #f9faff;
        --border-radius: 999px;
        --border-size: 1px;
        --border-blur: 10px;
        --border-blur-size: -3px;
        --border-blur-opacity: 0.5;
        border-radius: var(--border-radius);
        position: relative;
        height: 1.875rem;
        white-space: pre;
        font-size: 0.75em !important;
        background-color: rgba(255, 255, 255, 0.15);
        color: var(--lightmode--onprimary);
        margin: 0 !important;
        width: auto !important;
        padding: 0.25em !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        flex-shrink: 1;
        width: min-content;
        min-width: 0 !important;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: var(--border-radius);
            padding: 2px;
            background-size: 100% 100%;
            background-position: 0 0;
            background-image: conic-gradient(
                from var(--angle) at 50% 50%,
                rgba(255, 255, 255, 0.09) 85%,
                var(--c1) 98%
            );
            mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.3s ease;
            animation: borderRotate var(--d) linear infinite forwards;
        }
        &::after {
            content: "";
            left: var(--border-blur-size);
            right: var(--border-blur-size);
            top: var(--border-blur-size);
            bottom: var(--border-blur-size);
            position: absolute;
            background-size: 200% 200%;
            background-position: 0 0;
            background-image: conic-gradient(
                from var(--angle) at 25% 25%,
                var(--c2) 90%,
                var(--c1) 100%
            );
            z-index: -1;
            filter: blur(var(--border-blur));
            opacity: var(--border-blur-opacity);
        }

        &:hover {
            background-color: rgba(255, 255, 255, 0.15);
            border-color: transparent;

            &::before,
            &::after {
                opacity: 1;
            }
        }

        &#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
            background-image: none !important;
            padding: 0.25em !important;
            padding-left: 1rem !important;
            padding-right: 1rem !important;

            &::before {
                padding: 2px;
                background-size: 100% 100%;
                background-position: 0 0;
                background-image: conic-gradient(
                    from var(--angle) at 50% 50%,
                    rgba(255, 255, 255, 0.09) 85%,
                    var(--c1) 98%
                );
            }
            &::after {
                left: var(--border-blur-size);
                right: var(--border-blur-size);
                top: var(--border-blur-size);
                bottom: var(--border-blur-size);
                position: absolute;
                background-size: 200% 200%;
                background-position: 0 0;
                background-image: conic-gradient(
                    from var(--angle) at 25% 25%,
                    var(--c2) 90%,
                    var(--c1) 100%
                );
                z-index: -1;
                content: "";
                filter: blur(var(--border-blur));
            }
            &:hover {
                background-color: #2330aa;
            }
            padding-left: 1.25rem !important;
        }
        &#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
            color: transparent;
            font-size: 0.25rem !important;
            min-width: 104px !important;
            display: none !important;
            &::after {
                content: "Customize" !important;
                font-size: 0.75rem !important;
                color: #ffffff !important;
                position: absolute !important;
                inset: 0 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                background: none !important;
                filter: none !important;
                opacity: 1 !important;
            }
        }
    }

    & #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
        &#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
            padding: 0.25em !important;
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }
    }

    #CybotCookiebotDialogBodyLevelWrapper {
        display: none !important;
    }

    & .CybotCookiebotDialogContentWrapper {
        flex-direction: column !important;
    }

    #CybotCookiebotDialogFooter {
        position: relative !important;
        border-bottom: none !important;
    }

    & #CybotCookiebotDialogTabContent {
        margin-left: 0 !important;
    }

    & .CybotCookiebotScrollContainer {
        width: 100% !important;
        padding: 0 !important;
        border-bottom: none !important;
    }
    & #CybotCookiebotDialogBodyContent,
    & .CybotCookiebotScrollArea {
        padding: 0 !important;
    }

    & .CybotCookiebotDialogBodyContentHeading {
        line-height: 1.2rem !important;
        letter-spacing: 0 !important;
        text-transform: uppercase;
        font-size: 1.75rem !important;
        font-weight: 700 !important;
        font-family:
            Degular Display,
            sans-serif !important;
        margin-bottom: 0.75rem !important;
    }

    & #CybotCookiebotDialogBodyContentText,
    & #CybotCookiebotDialogBodyEdgeMoreDetailsLink {
        font-weight: 500;
        font-size: 0.875rem;
        line-height: 0.9;
        font-family:
            Degular Display,
            sans-serif !important;

        & a {
            color: #97a3b6 !important;
            font-weight: inherit !important;
        }
    }

    & #CybotCookiebotDialogBodyEdgeMoreDetails {
        display: flex !important;
        justify-content: flex-start !important;
        height: auto !important;
    }
    &.CybotEdge {
        & #CybotCookiebotDialogBodyEdgeMoreDetails {
            margin-top: 0.75rem !important;
            margin-bottom: 1.25rem !important;
        }
    }

    & #CybotCookiebotDialogBodyEdgeMoreDetails a {
        color: #97a3b6 !important;
    }

    & .CybotCookiebotDialogBodyBottomWrapper {
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .CybotCookiebotFader {
        background-image: linear-gradient(
            to top,
            rgba(44, 44, 44, 0.95),
            #26262680,
            #26262600
        ) !important;
    }

    /*end*/
}

@media (max-width: 480px) {
    #CybotCookiebotDialog {
        bottom: 4svw !important;
        top: auto !important;
        transform: translate(0) !important;
        left: 2svw !important;
        max-width: 94svw !important;

        &[data-template="slideup"] {
            top: auto !important;
            left: 2svw !important;
            &.CybotCookiebotDialogActive {
                transform: translate(0) !important;
            }
        }

        & .CybotCookiebotDialogBodyContentHeading {
            font-size: 1.375rem !important;
        }

        & #CybotCookiebotDialogBodyButtonsWrapper {
            flex-direction: row !important;
        }

        &.CybotEdge {
            max-width: 94svw !important;
            width: 21.375rem !important;
        }

        & .CybotCookiebotDialogContentWrapper {
            max-height: 50svh !important;
        }
    }
}

@media (min-width: 481px) {
    #CybotCookiebotDialog {
        & #CybotCookiebotDialogBodyButtonsWrapper {
            flex-direction: row !important;
        }
    }
}

@media (min-width: 601px) {
    #CybotCookiebotDialog {
        & #CybotCookiebotDialogBodyButtonsWrapper {
            flex-direction: row-reverse !important;
            justify-content: flex-end !important;
        }
    }
}
@media (min-width: 1280px) {
    #CybotCookiebotDialog {
        & #CybotCookiebotDialogBodyButtonsWrapper {
            flex-direction: row !important;
            justify-content: flex-start !important;
        }

        & .CookieCard {
            & .CybotCookiebotDialogDetailBodyContentCookieTypeIntro {
                padding-left: 0 !important;
            }
        }

        & #CybotCookiebotDialogDetailBulkConsent {
            margin: 0 0.625em 1em !important;
            padding: 1em !important;
        }

        & #CybotCookiebotDialogDetailFooter {
            padding: 0 1em 1em !important;
        }

        &[data-template="popup"] {
            & #CybotCookiebotDialogBodyButtonsWrapper {
                flex-direction: row-reverse !important;
                justify-content: flex-end !important;
            }
        }
    }
}