:root
{
    --woof-sd-ie-clr_width: 60px;
    --woof-sd-ie-clr_height: 60px;
    --woof-sd-ie-clr_show_tooltip: none;
    --woof-sd-ie-clr_show_tooltip_count: block-inline;
    --woof-sd-ie-clr_color: #000;
    --woof-sd-ie-clr_image: url();
    --woof-sd-ie-clr_hover_scale: 110;
    --woof-sd-ie-clr_selected_scale: 110;
    --woof-sd-ie-clr_border_radius: 50%;
    --woof-sd-ie-clr_border_width: 1px;
    --woof-sd-ie-clr_hover_border_width: 1px;
    --woof-sd-ie-clr_selected_border_width: 1px;
    --woof-sd-ie-clr_border_color: #79b8ff;
    --woof-sd-ie-clr_hover_border_color: #79b8ff;
    --woof-sd-ie-clr_selected_border_color: #79b8ff;
    --woof-sd-ie-clr_border_style: solid;
    --woof-sd-ie-clr_hover_border_style: dashed;
    --woof-sd-ie-clr_selected_border_style: dashed;
    --woof-sd-ie-clr_margin_right: 9px;
    --woof-sd-ie-clr_margin_bottom: 11px;
    --woof-sd-ie-clr_transition: 300s;
    --woof-sd-ie-clr_counter_show: inline-flex;
    --woof-sd-ie-clr_counter_width: 14px;
    --woof-sd-ie-clr_counter_height: 14px;
    --woof-sd-ie-clr_counter_side_padding: 0;
    --woof-sd-ie-clr_counter_top: 4px;
    --woof-sd-ie-clr_counter_right: 0;
    --woof-sd-ie-clr_counter_font_size: 9px;
    --woof-sd-ie-clr_counter_font_family: consolas;
    --woof-sd-ie-clr_counter_font_weight: 500;
    --woof-sd-ie-clr_counter_color: #477bff;
    --woof-sd-ie-clr_counter_bg_color: #fff;
    --woof-sd-ie-clr_counter_bg_image: url();
    --woof-sd-ie-clr_counter_border_width: 1px;
    --woof-sd-ie-clr_counter_border_radius: 50%;
    --woof-sd-ie-clr_counter_border_color: #477bff;
    --woof-sd-ie-clr_counter_border_style: solid;
}
.woof-sd-ie.woof-sd-ie-color
{
    position: relative;
    display: inline-flex;
    margin-right: var(--woof-sd-ie-clr_margin_right)!important;
    margin-bottom: var(--woof-sd-ie-clr_margin_bottom)!important;
    box-sizing: border-box;
}
.woof-sd-ie.woof-sd-ie-color>input
{
    display: none;
}
.woof-sd-ie.woof-sd-ie-color>label
{
    position: relative;
    display: flex!important;
    flex-direction: row!important;
    line-height: 0!important;
    box-sizing: border-box!important;
    user-select: none!important;
    width: auto;
    min-width: var(--woof-sd-ie-clr_width)!important;
    height: var(--woof-sd-ie-clr_height)!important;
    margin: 0 0 0 0!important;
    transition: all calc(var(--woof-sd-ie-clr_transition) / 1000);
    border-color: var(--woof-sd-ie-clr_border_color)!important;
    border-style: var(--woof-sd-ie-clr_border_style)!important;
    border-width: var(--woof-sd-ie-clr_border_width)!important;
    border-radius: var(--woof-sd-ie-clr_border_radius);
    background-color: var(--woof-sd-ie-clr_color);
    background-image: var(--woof-sd-ie-clr_image);
    background-size: cover;
    width: 100%;
    max-width: var(--woof-sd-ie-clr_width)!important;
    min-width: fit-content;
}
.woof-sd-ie.woof-sd-ie-color:hover>label
{
    border-color: var(--woof-sd-ie-clr_hover_border_color)!important;
    border-style: var(--woof-sd-ie-clr_hover_border_style)!important;
    border-width: var(--woof-sd-ie-clr_hover_border_width)!important;
    scale: calc(var(--woof-sd-ie-clr_hover_scale) / 100);
}
.woof-sd-ie.woof-sd-ie-color:has(input:checked)>label
{
    border-color: var(--woof-sd-ie-clr_selected_border_color)!important;
    border-style: var(--woof-sd-ie-clr_selected_border_style)!important;
    border-width: var(--woof-sd-ie-clr_selected_border_width)!important;
    scale: calc(var(--woof-sd-ie-clr_selected_scale) / 100)!important;
}
.woof-sd-ie.woof-sd-ie-color>label:hover>span
{
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    border-color: var(--woof-sd-ie-clr_hover_color)!important;
    transition: all calc(var(--woof-sd-ie-clr_transition) / 1000);
}
.woof-sd-ie.woof-sd-ie-color .woof-sd-ie-count
{
    user-select: none;
    display: var(--woof-sd-ie-clr_counter_show);
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: var(--woof-sd-ie-clr_counter_right);
    top: var(--woof-sd-ie-clr_counter_top);
    border: var(--woof-sd-ie-clr_counter_border_width) var(--woof-sd-ie-clr_counter_border_style) var(--woof-sd-ie-clr_counter_border_color);
    border-radius: var(--woof-sd-ie-clr_counter_border_radius);
    min-width: var(--woof-sd-ie-clr_counter_width);
    min-height: var(--woof-sd-ie-clr_counter_height);
    padding-left: var(--woof-sd-ie-clr_counter_side_padding);
    padding-right: var(--woof-sd-ie-clr_counter_side_padding);
    font-size: var(--woof-sd-ie-clr_counter_font_size);
    font-weight: var(--woof-sd-ie-clr_counter_font_weight);
    font-family: var(--woof-sd-ie-clr_counter_font_family);
    color: var(--woof-sd-ie-clr_counter_color);
    line-height: 0;
    background-color: var(--woof-sd-ie-clr_counter_bg_color);
    background-image: var(--woof-sd-ie-clr_counter_bg_image);
    background-size: cover;
    box-sizing: content-box;
    z-index: 99;
}
.woof-sd-ie.woof-sd-ie-color .woof-sd-ie-count:empty
{
    display: none;
}
.woof-sd-ie.woof-sd-ie-color:hover>label
{
    cursor: pointer;
}
.woof-sd-ie.woof-sd-ie-color>label>span
{
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 100%;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.woof-sd-ie.woof-sd-ie-color>label>span
{
    border-radius: var(--woof-sd-ie-clr_border_radius);
}
.woof-sd-ie.woof-sd-ie-color .woof-sd-tooltiptext
{
    display: var(--woof-sd-ie-clr_show_tooltip);
}
.woof-sd-ie.woof-sd-ie-color .woof-sd-tooltiptext b
{
    display: var(--woof-sd-ie-clr_show_tooltip_count);
}