: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: #000000;
--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: #ffffff;
--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);
}