.previewMetaBox{width:100%;flex-basis:100%;border:1px solid var(--line-color);padding:.5rem}.fullPreviewControls{position:absolute;z-index:9999999;left:0;bottom:1rem;height:2rem;width:auto;background:#fff}.sectionRow{width:100%}.svgColumn{border-right:1px solid var(--line-color)}.svgColumn .controlsColumn,.svgColumn .svgPreviewColumn,.svgFormColumn{overflow:scroll}.controlsColumn{flex-basis:50%;height:100%;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}.grid{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.grid .gridItem{flex-basis:40%;padding:.5rem;margin:.5rem}.grid .gridItem .svgPreviewWrap{width:100%;height:100%}.danger{color:var(--danger-color,red)}.column-title{text-transform:uppercase;font-size:.75rem;font-weight:800}.reloadBtn{margin:0 auto}.reloadPosition{width:100%;text-align:center}.preview-position{display:flex;justify-content:center}.preview-position.full{background:#fff;position:absolute;left:0;top:0;right:0;bottom:0;z-index:99999}.preview-position.full .svgPreviewWrap{width:100%!important;height:100%!important}.preview-position.full .svgPreviewWrap #svg{height:100%;width:100%}.svgPreviewWrap{width:400px;height:400px}.svgPreviewWrap svg{width:100%;height:100%;display:block}#svg{display:block}.optionsControl{height:100%;flex-basis:100%;flex-shrink:1;flex-grow:0}.newElement.panel{box-shadow:0 0 1rem #000;position:absolute;z-index:99999;left:1rem;right:1rem;bottom:2rem;top:1rem}.newElement.panel.edit{background:#333;border-radius:.5rem;border:1px solid var(--line-color)}.newElement.panel:before{position:absolute;z-index:-1;left:0;right:0;top:0;bottom:0;content:""}.newElement.panel .panelrow{display:flex;flex-direction:row;flex-wrap:nowrap}.newElement.panel .panelitem{flex-basis:50%;flex-shrink:0}.newElement.panel .panelitem.previewpanel{border-right:1px solid var(--line-color)}.newElement.panel .panelitem.previewpanel .previewcontainer{width:100%;justify-content:center;display:flex}.newElement.panel .v-card.v-sheet{height:100%;border:1px solid var(--line-color);display:flex;flex-direction:column}.newElement.panel .v-card.v-sheet .v-card__title{padding-top:.25rem;padding-bottom:.25rem;border-bottom:1px solid var(--line-color)}.newElement.panel .v-card.v-sheet .v-card__text{overflow:scroll;border-bottom:1px solid var(--line-color)}.elementRow{margin:.25rem 0;background:var(--line-color);padding:.25rem;border-radius:.5rem}.v-btn.typeSelectButton{height:40px!important}.typeSelectButton .v-btn__content{padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center}.buttonRow{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;width:100%}.buttonRow>.v-btn{border-radius:2px}.buttonRow>.v-btn:first-child{border-radius:.75rem 0 0 .75rem}.buttonRow>.v-btn:last-child{border-radius:0 .75rem .75rem 0}.typeSelectWrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(10rem,100%),1fr));grid-auto-rows:1fr;gap:0 0}.tabrow{display:flex;align-items:center;justify-content:center}.tabrow .newRuleTabButton{border-radius:0;background-color:#333}.tabrow .newRuleTabButton:first-child{border-radius:4px 0 0 4px}.tabrow .newRuleTabButton:last-child{border-radius:0 4px 4px 0}.swatchElement{background-color:#eee;cursor:pointer;height:30px;width:30px;transition:border-radius .2s ease-in-out;border:1px solid var(--line-color)}.swatchController .v-input__slot{background:hsla(0,0%,100%,.1)!important}.supporting-content{margin-top:.5rem}.codeControl{width:100%}.code-position{margin-bottom:1rem}.height-200{min-height:200px;max-height:50vh}.height-200.large-view{max-height:80vh;height:500px}.my-editor{background:#2d2d2d;color:#ccc;font-family:Fira code,Fira Mono,Consolas,Menlo,Courier,monospace;font-size:14px;line-height:1.5;word-spacing:unset!important;line-height:unset!important}.prism-editor__textarea{width:999999px!important}.prism-editor__editor{white-space:pre!important}.prism-editor__container{overflow-x:scroll!important}.prism-editor__textarea:focus{outline:none}#fragment-view-panel{max-height:100vh}#compiled-code-editor,#original-code-editor{border:2px solid var(--secondary-color);background:var(--line-color)}.compiled-code-header,.original-code-header{color:var(--background-color);background:var(--secondary-color);padding:0 .5rem;font-size:small}.render-fragment{width:100%;height:100%;--checker-lighter:rgba(10,10,10,0.1)}.render-fragment svg{width:100%;height:100%;object-fit:contain}.render-fragment.show-checkerboard{background:repeating-conic-gradient(var(--checker-lighter) 0 25%,transparent 0 50%) 50%/10% 10%;background-size:1rem 1rem}.menu{display:flex;flex-direction:row}.versionInfo{opacity:.5}