#ccc .ccc-content--light h1,
#ccc .ccc-content--light h2,
#ccc .ccc-content--light h3,
#ccc .ccc-content--light h4 {
    color: #6c59a8 !important;
}

#ccc-icon svg {
    width: 80px !important;
    height: 80px !important;
}

#ccc-close svg {
    width: 50px !important;
    height: 50px !important;
    fill: #6c59a8 !important;
    stroke: #6c59a8 !important;
}

#ccc-close {
    color: var(--text) !important;
}

#ccc-content {
    fill: var(--text) !important;
    background-color: var(--surface) !important;
    color: var(--text) !important;
}

.ccc-icon--light svg #triangle {
    fill: #6c59a8 !important;
    stroke: none !important;
}

.ccc-icon--light svg #star {
    fill: var(--color-white) !important;
    stroke: none !important;
}

.ccc-icon--dark {
    fill: var(--text) !important;
}

.ccc-content--light {
    --surface: #f4f4f4 !important;
    --text: #333 !important;
}

.ccc-content--dark {
    --surface: #313147 !important;
    --text: #fff !important;
}

#ccc .ccc-content--light .ccc-notify-button {
    border: 2px solid #6c59a8 !important;
    color: #6c59a8 !important;
    border-radius: 3rem !important;
}

    #ccc .ccc-content--light .ccc-notify-button:hover {
        border: 2px solid #6c59a8 !important;
        color: var(--color-white) !important;
        background-color: #6c59a8 !important;
    }

    #ccc .ccc-content--light .ccc-notify-button span {
        color: inherit !important;
        font-weight: var(--font-weight-7) !important;
    }

#ccc .checkbox-toggle--slider .checkbox-toggle-off {
    opacity: 1 !important;
}

#ccc .checkbox-toggle--slider .checkbox-toggle-off,
#ccc .checkbox-toggle--slider .checkbox-toggle-on {
    background-color: #6c59a8 !important;
}

#ccc .checkbox-toggle--light {
    border-color: #6c59a8 !important;
}

    #ccc .checkbox-toggle--light .checkbox-toggle-toggle {
        background-color: white !important;
    }

#ccc .ccc-content--light a {
    font-weight: var(--font-weight-7) !important;
    fill: #6c59a8 !important;
    color: #6c59a8 !important;
}

#ccc .ccc-content--light span {
    fill: #6c59a8 !important;
    color: #6c59a8 !important;
}

#ccc .ccc-notify-buttons {
    display: flex !important;
    flex-direction: column !important;
    padding-right: 0 !important;
}

@media (max-width: 649px) {
    #ccc .ccc-notify-buttons > * {
        order: 2 !important;
    }
}

@media (min-width: 650px) {
    #ccc .ccc-notify-buttons {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
}

#ccc #ccc-notify-dismiss {
    min-width: 50px !important;
    min-height: 50px !important;
    margin-left: auto !important;
    position: static !important;
}

@media (max-width: 649px) {
    #ccc #ccc-notify-dismiss {
        order: 1 !important;
    }
}

#ccc-notify-dismiss svg {
    width: 100% !important;
    height: 100% !important;
    fill: #6c59a8 !important;
    color: #6c59a8 !important;
}