.dpcm-GroupConsentElement,
.dpcm-ServiceConsentElement {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    position: relative;
}
.dpcm-GroupConsentElement[data-dpcmui-state="updating"],
.dpcm-ServiceConsentElement[data-dpcmui-state="updating"],
.dpcm-GroupConsentElement[data-dpcmui-state="disabled"],
.dpcm-ServiceConsentElement[data-dpcmui-state="disabled"]{
    pointer-events: none;
}

.dpcm-GroupConsentElement[data-dpcmui-state="updating"]::before,
.dpcm-ServiceConsentElement[data-dpcmui-state="updating"]::before {
    opacity: 0.5;
}

.dpcm-GroupConsentElement[data-dpcmui-state="disabled"]::before,
.dpcm-ServiceConsentElement[data-dpcmui-state="disabled"]::before {
    --dpcmui-element-toggle-knob: var(--dpcmui-element-toggle-knob--disabled, #AAA);

    opacity: 0.5;
}

.dpcm-GroupConsentElement--checkbox,
.dpcm-ServiceConsentElement--checkbox {
    --dpcm-color: var(--dpcmui-element-toggle-bg-no, #e50000);
    --dpcm-width: var(--dpcmui-element-toggle-width, 2.5rem);

    align-items: center;
    cursor: pointer;
}

.dpcm-GroupConsentElement--checkbox::before,
.dpcm-ServiceConsentElement--checkbox::before {
    --dpcmui-element-toggle-symbol-internal: url("data:image/svg+xml, %3Csvg%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width=%2227.25%22%20height=%2227.25%22%20viewBox=%220%200%2027.25%2027.25%22%3E%0A%20%20%3Cpath%20id=%22Pfad_1%22%20data-name=%22Pfad%201%22%20d=%22M5.031-12.781l9.844-9.844L5.063-32.437,8.875-36.25l9.813,9.813,9.781-9.781,3.75,3.781-9.75,9.781,9.813,9.813L28.469-9.031l-9.812-9.812L8.813-9Z%22%20transform=%22translate(-5.031%2036.25)%22%20fill=%22%23FFF%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --dpcmui-element-toggle-symbol-scalefactor-internal: 0.5;

    background:
            radial-gradient(circle closest-side, var(--dpcmui-element-toggle-knob, white) 0, var(--dpcmui-element-toggle-knob, white) 90%, transparent 100%), var(--dpcm-color)
            var(--dpcmui-element-toggle-symbol-internal)
    ;
    background-size: calc(var(--dpcmui-element-toggle-height, 20px) - 4px) calc(var(--dpcmui-element-toggle-height, 20px) - 4px), auto calc(100% * var(--dpcmui-element-toggle-symbol-scalefactor-internal));
    background-repeat: no-repeat;
    background-position: 5% 50%, calc(100% - calc(var(--dpcmui-element-toggle-height, 20px) * 0.3)) 50%;

    border: var(--dpcmui-element-toggle-border, 1px solid grey);
    border-radius: var(--dpcmui-element-toggle-height, 20px);
    content: '';
    display: flex;
    height: var(--dpcmui-element-toggle-height, 20px);
    transition: background-color 300ms, background-position 300ms;
    width: var(--dpcm-width);

    color: white;
    align-items: flex-end;
    flex-direction: column;
    padding: 0 0.5rem 0 0.4rem;

}

.dpcm-GroupConsentElement--checkbox[data-dpcmui-consent="REQUIRED"]::before,
.dpcm-GroupConsentElement--checkbox[data-dpcmui-consent="GRANTED"]::before,
.dpcm-ServiceConsentElement--checkbox[data-dpcmui-consent="REQUIRED"]::before,
.dpcm-ServiceConsentElement--checkbox[data-dpcmui-consent="GRANTED"]::before,
.dpcm-ServiceConsentElement--checkbox[data-dpcmui-consent="IMPLICIT"]::before {
    --dpcmui-element-toggle-symbol-internal: url("data:image/svg+xml, %3Csvg%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width=%2241.188%22%20height=%2247.438%22%20viewBox=%220%200%2041.188%2047.438%22%3E%0A%20%20%3Cpath%20id=%22Pfad_1%22%20data-name=%22Pfad%201%22%20d=%22M19.75,1.156q-2.906-5.25-4.469-7.719L13.625-9.156l-1.25-1.906A55.243,55.243,0,0,0,3.844-21.594a7.642,7.642,0,0,1,4.719-2.094,6.786,6.786,0,0,1,4.781,1.969,35.167,35.167,0,0,1,5.281,7.5,128.131,128.131,0,0,1,9.219-22.344q3.094-5.75,5.516-7.734a9.817,9.817,0,0,1,6.422-1.984,26.345,26.345,0,0,1,5.25.656A50.262,50.262,0,0,0,32.188-30.25Q27.375-21.344,19.75,1.156Z%22%20transform=%22translate(-3.844%2046.281)%22%20fill=%22%23FFF%22%2F%3E%0A%3C%2Fsvg%3E");
    --dpcmui-element-toggle-symbol-scalefactor-internal: 0.6;
    --dpcm-color: var(--dpcmui-element-toggle-bg-yes, #009b00);

    align-items: flex-start;
    content: '';
    font-size: calc(var(--dpcmui-element-toggle-height, 20px) / 1.35);
    background-position: 95% 50%, calc(0% + calc(var(--dpcmui-element-toggle-height, 20px) * 0.3)) 50%;
}

.dpcm-GroupConsentElement--checkbox[data-dpcmui-consent="MIXED"]::before {
    --dpcm-color: var(--dpcmui-element-toggle-bg-mixed, #ead700);

    background-position: 50% 50%, 50% 50%;
    content: '';
}

.dpcm-GroupConsentElement--checkbox .dpcm-GroupConsentElement-input,
.dpcm-ServiceConsentElement--checkbox .dpcm-ServiceConsentElement-input {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}