.checkbox-wrapper{align-items:center;display:flex}.checkbox-wrapper.sm input[type=checkbox]{height:16px;width:16px}.checkbox-wrapper.md input[type=checkbox]{height:18px;width:18px}.checkbox-wrapper.lg input[type=checkbox]{height:24px;width:24px}.checkbox-wrapper input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#393b4b;border:1px solid #000;border-radius:4px;cursor:pointer;height:16px;position:relative;transition:border-color .2s;width:16px}.checkbox-wrapper input[type=checkbox]:focus,.checkbox-wrapper input[type=checkbox]:hover{border-color:var(--ui-primary)}.checkbox-wrapper input[type=checkbox]:checked{background-color:var(--ui-primary);border:1px solid var(--ui-primary)}.checkbox-wrapper input[type=checkbox]:before{background-color:#fff;border-radius:2px;content:"";height:10px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:10px}.checkbox-wrapper input[type=checkbox]:checked:before{transform:translate(-50%,-50%) scale(1)}.checkbox-wrapper .checkbox-label{color:#ddd;font-size:1rem;margin-left:10px}.checkbox-wrapper.disabled input[type=checkbox]{background-color:var(--color-light-shade);border:1px solid var(--color-medium);cursor:not-allowed;opacity:.6}.checkbox-wrapper.disabled .checkbox-label{color:#dedede80}.toggle-wrapper{align-items:center;display:flex;position:relative}.toggle-wrapper input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:0;position:absolute}.toggle-wrapper input[type=checkbox]:checked+.toggle-switch{background-color:var(--ui-primary)}.toggle-wrapper input[type=checkbox]:disabled+.toggle-switch{background-color:var(--color-light-shade)}.toggle-wrapper input[type=checkbox]:checked:disabled+.toggle-switch{background-color:var(--color-medium)}.toggle-wrapper.sm .toggle-switch{height:16px;width:30px}.toggle-wrapper.md .toggle-switch{height:20px;width:40px}.toggle-wrapper.lg .toggle-switch{height:24px;width:50px}.toggle-wrapper .toggle-switch{background-color:#393b4b;border-radius:12px;position:relative;transition:background-color .2s}.toggle-wrapper .toggle-switch:before{background:#fff;border-radius:50%;content:"";height:12px;left:4px;position:absolute;top:50%;transform:translateY(-50%);transition:transform .2s;width:12px}.toggle-wrapper .toggle-switch.active:before{transform:translateY(-50%) translate(calc(100% - 12px))}.toggle-wrapper .toggle-label{color:#ddd;font-size:1rem;margin-left:10px}.toggle-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.toggle-wrapper.disabled .toggle-switch{background-color:var(--color-light-shade)}.toggle-wrapper.disabled .toggle-label{color:#dedede80}.color-picker-wrapper{align-items:center;display:flex;flex-direction:column;gap:.5rem}.color-picker-wrapper.disabled{opacity:.5;pointer-events:none}.color-picker-wrapper .custom-color-picker{border:1px solid #ccc;border-radius:6px;cursor:pointer;height:2rem;width:2rem}.color-picker-wrapper .color-picker-label{font-size:1rem}.color-picker-wrapper .hex-input{text-align:center;width:100px}.color-picker-wrapper .color-menu{background-color:#4c426f;border-radius:6px;display:flex;flex-wrap:wrap;padding:.5rem;width:300px}.color-picker-wrapper .color-space{border-radius:6px;cursor:crosshair;height:150px;position:relative;width:100%}.color-picker-wrapper .color-space-thumb{border:2px solid #fff;border-radius:50%;box-shadow:0 0 2px #00000080;height:10px;position:absolute;transform:translate(-50%,50%);width:10px}.color-picker-wrapper .range-input-group{display:flex;flex-direction:column;gap:.5rem;width:100%}.color-picker-wrapper .range-input-label{align-items:center;display:flex;height:20px;justify-content:space-between}.color-picker-wrapper .range-input{margin:0;width:100%}.color-picker-wrapper .value-zone{align-items:center;display:flex;gap:.5rem}.color-picker-wrapper .copy-button{align-items:center;background-color:#f0f0f0;border:1px solid #ccc;cursor:pointer;display:flex;justify-content:center;padding:.5rem;width:100%}.color-picker-wrapper .visually-hidden{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0}.color-picker-wrapper .icon{fill:currentColor}.color-picker-wrapper .rgb-input{text-align:center;width:50px}.page-test{color:#fff}.page-test,.page-test .elements{align-items:center;display:flex;flex-direction:column;justify-content:center}.page-test .elements{gap:20px}.page-test .slidebar-zone{width:200px}