my-demo { display: block; aspect-ratio: 3 / 1; box-shadow: rgb(0, 0, 0) 1px 1px 1px 1px inset; grid-row: span 2 / span 3; background-color: rgb(215, 240, 249); width: 100px; margin-top: 144px; margin-left: 50px; }
main-panel { display: inline-flex; background-color: rgb(255, 255, 255); flex-flow: column; row-gap: 7px; }
prop-wrapper { display: flex; gap: 5px 3px; flex-wrap: wrap; }
prop-name { padding-right: 5px; display: inline-block; font-size: 18px; cursor: context-menu; }
prop-name:hover { text-decoration-color: rgb(255, 0, 0); text-decoration-line: underline; text-decoration-thickness: 3px; }
value-wrapper { display: inline-flex; border-radius: 4px; height: 19px; }
value-wrapper.color { position: relative; outline: rgba(0, 0, 0, 0.7) solid 1px; }
value-wrapper.text { }
value-wrapper.func { }
value-wrapper.slesh { }
value-wrapper.checkbox { }
demo-panel textarea { field-sizing: content; }
demo-panel select { font-size: 12px; field-sizing: content; height: 18px; background-color: rgb(255, 255, 255); border: 0px solid rgb(176, 176, 176); box-shadow: rgb(173, 173, 173) 1px 1px 1px 1px; border-radius: 4px; }
demo-panel option { font-size: 16px; }
.text select { field-sizing: fixed; }
demo-panel .not { background-color: rgb(212, 212, 212); }
demo-panel input { font-family: sans-serif; font-size: 12px; height: 19px; }
demo-panel input[type="text"] { field-sizing: content; padding: 0px; }
demo-panel input[type="text"]:disabled { color: rgb(0, 0, 0); font-weight: bold; }
demo-panel input[type="number"] { field-sizing: content; margin-left: 1px; min-width: 45px; direction: rtl; }
demo-panel input[type="color"] { appearance: none; opacity: 0; font-size: 0px; width: 24px; height: 19px; padding: 0px; visibility: hidden; position: absolute; bottom: 0px; left: 0px; }
demo-panel input[data-opacity="1"] { background-color: rgb(255, 255, 255); width: 44px; border-style: none; font-size: 12px; margin-left: 24px; }
demo-panel input[type="checkbox"] { }
hidden-wrapper { }
hidden-wrapper::after { content: attr(title); }
checkbox-wrapper { }
checkbox-wrapper::after { content: attr(title); }
not-supported { display: inline-block; color: rgb(255, 0, 0); font-size: 18px; }