:root {
    --color-bg-main: #232428;
    --color-bg-box: #2B2D31;
    --color-bg-hover: #383A40;
    --color-border: #1E1F22;
    --color-text-main: #F2F3F5;
    --color-text-muted: #B5BAC1;
    --color-shadow: #000;
    --color-accent: #5865F2;
    --color-success: #57F287;
    --color-warning: #FEE75C;
    --color-danger: #ED4245;
    --color-pink: #EB459E;
    --color-cyan: #00BCD4;
    --color-orange: #FF7A22;
    --color-purple: #8E5CFF;
    --color-light-blue: #6EC6FF;
    --color-soft-red: #FF5C5C;
    --service-color-1: var(--color-purple);
    --service-color-2: var(--color-pink);
    --service-color-3: var(--color-accent);
    --service-color-4: var(--color-success);
    --service-color-5: var(--color-warning);
    --service-color-6: var(--color-danger);
    --service-color-7: var(--color-cyan);
    --service-color-8: var(--color-orange);
    --service-color-9: #FF4FD8;
    --service-color-10: var(--color-light-blue);
    --service-color-11: #B86BFF;
    --service-color-12: var(--color-soft-red);
    --staff-color: #5865F2
}

.kz-service-badges-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    background: var(--color-bg-main)
}

.kz-service-badge,.kz-staff-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 41px;
    box-sizing: border-box;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 10px;
    background: var(--color-bg-box);
    color: var(--color-text-main);
    transition: all .25s ease
}

.kz-service-badge {
    --service-color: var(--service-color-2)
}

.kz-staff-badge:hover {
    background: var(--color-bg-hover)
}

.kz-service-badge-icon-wrap,.kz-staff-badge-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px
}

.kz-staff-badge-icon-wrap {
    width: 24px;
    height: 24px;
    flex: 0 0 24px
}

.kz-service-badge-icon,.kz-staff-badge-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center
}

.kz-service-badge-icon {
    color: var(--service-color)
}

.kz-staff-badge-icon {
    color: var(--staff-color)
}

.kz-service-badge-icon svg,.kz-staff-badge-icon svg {
    position: absolute;
    display: block
}

.kz-service-badge-icon svg:first-child {
    width: 20px;
    height: 14px;
    z-index: 2;
    transition: all .5s ease
}

.kz-service-badge-icon svg:last-child {
    width: 28px;
    height: 20px;
    z-index: 1;
    opacity: .35;
    transition: all .75s ease
}

.kz-staff-badge-icon svg:first-child {
    width: 20px;
    height: 20px;
    z-index: 2;
    transition: all .5s ease
}

.kz-staff-badge-icon svg:last-child {
    width: 32px;
    height: 32px;
    z-index: 1;
    opacity: .22;
    transition: all .75s ease
}

.kz-service-badge:hover svg,.kz-staff-badge:hover svg {
    transform: scale(1.08)
}

.service-duration {
    position: relative;
    z-index: 5;
    font-size: 13px;
    line-height: 16px;
    font-weight: 700;
    color: var(--color-text-main);
    text-shadow: 0 0 3px var(--color-shadow);
    margin: 0 1px 0 0;
    padding: 0
}

.service-duration span {
    display: inline-block;
    min-width: 14px;
    text-align: center
}

.service-badge-text,.staff-badge-text {
    position: relative;
    z-index: 2;
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    /* margin:0 0 0 8px; */
    color: var(--color-text-main);
    white-space: nowrap;
    text-shadow: 0 0 3px var(--color-shadow)
}

.kz-service-color-1 {
    --service-color: var(--service-color-1)
}

.kz-service-color-2 {
    --service-color: var(--service-color-2)
}

.kz-service-color-3 {
    --service-color: var(--service-color-3)
}

.kz-service-color-4 {
    --service-color: var(--service-color-4)
}

.kz-service-color-5 {
    --service-color: var(--service-color-5)
}

.kz-service-color-6 {
    --service-color: var(--service-color-6)
}

.kz-service-color-7 {
    --service-color: var(--service-color-7)
}

.kz-service-color-8 {
    --service-color: var(--service-color-8)
}

.kz-service-color-9 {
    --service-color: var(--service-color-9)
}

.kz-service-color-10 {
    --service-color: var(--service-color-10)
}

.kz-service-color-11 {
    --service-color: var(--service-color-11)
}

.kz-service-color-12 {
    --service-color: var(--service-color-12)
}

.kz-service-color-10 .kz-service-badge-icon-wrap,.kz-service-color-11 .kz-service-badge-icon-wrap,.kz-service-color-12 .kz-service-badge-icon-wrap {
    width: 30px;
    flex: 0 0 30px
}

.kz-service-color-10 .service-duration span,.kz-service-color-11 .service-duration span,.kz-service-color-12 .service-duration span {
    min-width: 22px;
    font-size: 12px
}