﻿/** Light color-scheme **/
.tema-pink,
.tema-pinkgradient,
.tema-orangegradient,
.tema-greengradient,
.tema-blue,
.tema-bluegradient {
    --cc-bg: #fff;
    --cc-text: #000;
    --cc-btn-primary-bg: var(--color-gradient);
    --cc-btn-primary-hover-bg: var(--color-gradient);
    --cc-btn-primary-border-color: transparent;
    --cc-btn-primary-hover-border-color: transparent;
    --cc-btn-border-radius: 20px;
    --cc-btn-primary-text: var(--cc-bg);
    --cc-btn-secondary-bg: fff;
    --cc-btn-secondary-text: #606060;
    --cc-btn-secondary-hover-bg: #fff;
    --cc-btn-secondary-color: #606060;
    --cc-toggle-bg-off: #fff;
    --cc-toggle-bg-on: #fff;
    --cc-toggle-bg-readonly: #d5dee2;
    --cc-toggle-knob-bg: #ABAAAA;
    --cc-toggle-knob-icon-color: transparent;
    --cc-cookie-category-block-bg: #f0f4f7;
    --cc-cookie-category-block-bg-hover: #e9eff4;
    --cc-section-border: #f1f3f5;
    --cc-cookie-table-border: #e9edf2;
    --cc-overlay-bg: rgba(4, 6, 8, .85);
    --cc-webkit-scrollbar-bg: #cfd5db;
    --cc-webkit-scrollbar-bg-hover: #9199a0;
    --cc-toggle-on-bg: #fff;
    --cc-toggle-off-bg: #fff;
    --cc-cookie-category-block-bg: #e9eff4;
}

/** Dark color-scheme **/
.c_darkmode {
    --cc-bg: #181b1d;
    --cc-text: #d8e5ea;
    --cc-btn-primary-bg: #a6c4dd;
    --cc-btn-primary-text: #000;
    --cc-btn-primary-hover-bg: #c2dff7;
    --cc-btn-secondary-bg: #33383c;
    --cc-btn-secondary-text: var(--cc-text);
    --cc-btn-secondary-hover-bg: #3e454a;
    --cc-toggle-bg-off: #667481;
    --cc-toggle-bg-on: var(--cc-btn-primary-bg);
    --cc-toggle-bg-readonly: #454c54;
    --cc-toggle-knob-bg: var(--cc-cookie-category-block-bg);
    --cc-toggle-knob-icon-color: var(--cc-bg);
    --cc-cookie-category-block-bg: #23272a;
    --cc-cookie-category-block-bg-hover: #2b3035;
    --cc-section-border: #292d31;
    --cc-cookie-table-border: #2b3035;
    --cc-webkit-scrollbar-bg: #667481;
    --cc-webkit-scrollbar-bg-hover: #9199a0;
}

#cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-circle,
#cc-main .pm__service-counter {
    background: var(--color-gradient);
}

#cc-main .section__toggle ~ .toggle__icon .toggle__icon-circle {
    background: #919ea6;
}

#cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-on,
#cc-main .section__toggle ~ .toggle__icon .toggle__icon-off {
    opacity: 0;
}

#cc-main .pm__section--toggle.is-expanded .pm__section-title, #cc-main .pm__service {
    background: #e9eff4;
}

.cc_div *, .cc_div :before, .cc_div :after {
    font-family: 'Noto Sans';
}

#cc-main .cc--anim .cm {
    border: 1px solid var(--color-primary);
}

#cc-main .cm--cloud .cm__btn {
    margin: .625em 0 0 0;
    width: 100%;
    font-size: 0.8em;
}

#cc-main .cm__btn.cm__btn--secondary,
#cc-main .pm__btn.pm__btn--secondary {
    background: var(--color-gradient);
    background-image: var(--color-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border: 1px solid var(--color-primary);
}

#cc-main .cm__btn-group:last-of-type .cm__btn.cm__btn--secondary,
#cc-main .pm__btn-group:last-of-type .pm__btn.pm__btn--secondary {
    background: #fff;
    -webkit-text-fill-color: unset;
    color: #606060;
    border: 0;
}

#cc-main .section__toggle:checked:disabled ~ .toggle__icon .toggle__icon-circle {
    background: var(--color-gradient);
}

@media (min-width:641px) {

    #cc-main table {
        display: block;
        overflow-x: auto !important;
    }

        #cc-main table th,
        #cc-main table td {
            width: 7rem;
        }

    html body #cc-main ::-webkit-scrollbar,
    html body #cc-main ::-webkit-scrollbar-thumb,
    html body #cc-main ::-webkit-scrollbar-track {
        all: unset;
    }

    html body #cc-main ::-webkit-scrollbar {
        width: 0.6rem;
        height: 0.6rem;
        background: transparent;
    }

    html body #cc-main ::-webkit-scrollbar-thumb {
        background: #56565673;
        border-radius: 4px;
    }

        html body #cc-main ::-webkit-scrollbar-thumb:hover {
            background: #56565673; 
        }
 
}
