@charset "utf-8";

:root { --woof-sd-ie-vertex_enabled_bg_color: #79b8ff; --woof-sd-ie-substrate_enabled_bg_color: #c8e1ff; --woof-sd-ie-vertex_disabled_bg_color: #ffffff; --woof-sd-ie-substrate_disabled_bg_color: #9a9999; --woof-sd-ie-vertex_size: 20px; --woof-sd-ie-vertex_border_radius: 50%; --woof-sd-ie-vertex_top: 0; --woof-sd-ie-substrate_width: 34px; --woof-sd-ie-substrate_height: 14px; --woof-sd-ie-substrate_border_radius: 8px; --woof-sd-ie-label_font_color: #333333; --woof-sd-ie-label_font_size: 16px; --woof-sd-ie-label_left: 15px; --woof-sd-ie-label_top: -18px; }

label.switcher23-toggle { position: relative; display: inline-block; width: auto; height: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; transform: translate3d(0px, 0px, 0px); padding: 0px !important; }

.switcher23-toggle::before { content: ""; position: relative; top: 3px; left: 3px; width: var(--woof-sd-ie-substrate_width); height: var(--woof-sd-ie-substrate_height); display: block; background: var(--woof-sd-ie-substrate_disabled_bg_color); border-radius: var(--woof-sd-ie-substrate_border_radius); transition: background 0.2s; }

.switcher23-toggle > span { position: absolute; top: var(--woof-sd-ie-vertex_top); left: -3px; width: var(--woof-sd-ie-vertex_size); height: var(--woof-sd-ie-vertex_size); display: block; background: var(--woof-sd-ie-vertex_disabled_bg_color); border-radius: var(--woof-sd-ie-vertex_border_radius); box-shadow: rgba(154, 153, 153, 0.5) 0px 3px 8px; transition: 0.2s; }

.switcher23-toggle > span::before { content: ""; position: absolute; display: block; margin: calc((var(--woof-sd-ie-vertex_size) - var(--woof-sd-ie-vertex_size)/9) * -1); width: calc(var(--woof-sd-ie-vertex_size)*3); height: calc(var(--woof-sd-ie-vertex_size)*3); background: rgba(79, 46, 220, 0.5); border-radius: var(--woof-sd-ie-vertex_border_radius); transform: scale(0); opacity: 1; pointer-events: none; }

.switcher23 { display: none !important; }

.switcher23:checked + .switcher23-toggle::before { background: var(--woof-sd-ie-substrate_enabled_bg_color); }

.switcher23:checked + .switcher23-toggle > span { background: var(--woof-sd-ie-vertex_enabled_bg_color); transform: translateX(calc(var(--woof-sd-ie-substrate_width) - var(--woof-sd-ie-vertex_size)/2)); transition: 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s; box-shadow: rgba(79, 46, 220, 0.2) 0px 3px 8px; }

.switcher23:checked + .switcher23-toggle > span::before { transform: scale(1); opacity: 0; transition: 0.4s; }

.switcher23-toggle-dir > span { width: 23px; border-radius: 10px 0px 0px 10px; background: rgb(121, 184, 255) !important; }

.switcher23-toggle-dir::before { background: rgb(200, 225, 255); }

.switcher23:checked + .switcher23-toggle-dir > span { border-radius: 0px 10px 10px 0px; }

.switcher23-title { display: block; position: relative; width: fit-content; right: 0px; top: var(--woof-sd-ie-label_top); left: calc(var(--woof-sd-ie-substrate_width) + var(--woof-sd-ie-label_left)); font-size: var(--woof-sd-ie-label_font_size); user-select: none; max-width: calc(100% - var(--woof-sd-ie-counter_width)*2 - var(--woof-sd-ie-substrate_width) + var(--woof-sd-ie-label_left)); overflow: hidden; color: var(--woof-sd-ie-label_font_color) !important; }

.switcher23-container { display: inline-flex; width: fit-content; flex-wrap: nowrap; align-items: baseline; }

.switcher23-container label { width: 100%; margin: 0px !important; }

.switcher23-container .switcher23-title2 { display: block; width: fit-content; flex-wrap: nowrap; white-space: nowrap; margin-left: 47px; line-height: 0; margin-top: -4px; color: rgb(51, 51, 51); }