.szpf-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.szpf-colors .szpf-title { margin: 0; }
.szpf-colors .szpf-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; list-style: none; padding: 0; margin: 0; }
.szpf-colors .szpf-color { position: relative; display: inline-flex; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; overflow-wrap: anywhere; max-width: 100%; }
.szpf-colors .szpf-dot { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; display: inline-block; border: 1px solid #aab4bf; box-sizing: border-box; }
.szpf-colors.szpf-size-small .szpf-dot { width: 14px; height: 14px; flex-basis: 14px; }
.szpf-colors.szpf-size-large .szpf-dot { width: 24px; height: 24px; flex-basis: 24px; }
.szpf-colors.szpf-align-left, .szpf-colors.szpf-align-left .szpf-list { justify-content: flex-start; }
.szpf-colors.szpf-align-center, .szpf-colors.szpf-align-center .szpf-list { justify-content: center; }
.szpf-colors.szpf-align-right, .szpf-colors.szpf-align-right .szpf-list { justify-content: flex-end; }
.szpf-colors .szpf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.szpf-grid-colors.szpf-grid-spacing-0 { margin-top: 0; }
.szpf-grid-colors.szpf-grid-spacing-4 { margin-top: 4px; }
.szpf-grid-colors.szpf-grid-spacing-8 { margin-top: 8px; }
.szpf-grid-colors.szpf-grid-spacing-12 { margin-top: 12px; }
.szpf-grid-colors.szpf-grid-spacing-16 { margin-top: 16px; }
.szpf-grid-colors.szpf-grid-spacing-24 { margin-top: 24px; }