.wil-scd-container .style1 {
    --gap: 6;
    --num-color: #111;
    --num-bg-color: #eee;
    --text-color: #eee;
    --text-bg-color: #111;
    --align: center;
    --font-size1: 20;
    --font-size2: 12;
    --text-size-title: 16;
}

.wil-scd-container .style2 {
    --gap: 4;
    --num-color: #8659ef;
    --num-bg-color: #eee;
    --text-color: #666;
    --text-bg-color: transparent;
    --align: center;
    --font-size1: 20;
    --font-size2: 12;
    --text-size-title: 16;
}

.wil-scd-container .style3 {
    --gap: 4;
    --num-color: #fff;
    --num-bg-color: #ef6d59;
    --text-color: #fff;
    --text-bg-color: transparent;
    --align: center;
    --font-size1: 20;
    --font-size2: 12;
    --text-size-title: 20;
}

.wil-scd-container .style4 {
    --gap: 4;
    --num-color: #fff;
    --num-bg-color: #34cd69;
    --text-color: #fff;
    --text-bg-color: transparent;
    --align: center;
    --font-size1: 20;
    --font-size2: 12;
    --text-size-title: 16;
}

.wil-scd-container {
    text-align: var(--align);
}

.wil-scd-desc {
    font-size: calc(var(--font-size-title) * 1px);
    margin-bottom: 10px;
}

.wil-scd-inner-wrapper {
    display: flex;
    justify-content: center;
    margin-left: calc(var(--gap) / -2 * 1px);
    margin-right: calc(var(--gap) / -2 * 1px);
}

.wil-scd-container[style*="--align: left"] .wil-scd-inner-wrapper,
.wil-scd-container[style*="--align:left"] .wil-scd-inner-wrapper {
    justify-content: flex-start;
}

.wil-scd-container[style*="--align: right"] .wil-scd-inner-wrapper,
.wil-scd-container[style*="--align:right"] .wil-scd-inner-wrapper {
    justify-content: flex-end;
}

.wil-scd-inner-wrapper > span {
    overflow: hidden;
    width: 100%;
    padding-left: calc(var(--gap) / 2 * 1px);
    padding-right: calc(var(--gap) / 2 * 1px);
}

.wil-scd-value,
.wil-scd-text {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.wil-scd-value {
    font-size: clamp(10px, 6.6667vw + 4px, calc(var(--font-size1) * 1px));
    color: var(--num-color);
    background-color: var(--num-bg-color);
}

.wil-scd-text {
    font-size: clamp(10px, 6.6667vw + 4px, calc(var(--font-size2) * 1px));
    background-color: var(--text-bg-color);
    color: var(--text-color);
}

.wil-scd-control.style1 .wil-scd-value {
    padding: 26% 0;
}

.wil-scd-control.style1 .wil-scd-text {
    padding: 6px 4px;
}

.wil-scd-control.style2 .wil-scd-value {
    position: relative;
    padding-top: 100%;
    border-radius: 50%;
}

.wil-scd-control.style2 .wil-scd-value span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wil-scd-control.style2 .wil-scd-text {
    padding: 6px 4px;
}

.wil-scd-control.style3 .wil-scd-inner-wrapper > span {
    position: relative;
    border-radius: 50%;
}

.wil-scd-control.style3 .wil-scd-value {
    position: relative;
    padding-top: 100%;
    border-radius: 50%;
}

.wil-scd-control.style3 .wil-scd-value span {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wil-scd-control.style3 .wil-scd-text {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 2px 0 12%;
}

.wil-scd-control.style4 .wil-scd-inner-wrapper > span {
    position: relative;
    border-radius: 6px;
}

.wil-scd-control.style4 .wil-scd-value {
    position: relative;
    padding-top: 110%;
    border-radius: 6px;
}

.wil-scd-control.style4 .wil-scd-value span {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wil-scd-control.style4 .wil-scd-text {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 2px 0 15%;
}