.tab-layout{list-style:none;margin:0;padding:0;text-align:center}.tab-layout .tab{display:inline-block;position:relative;margin:0;padding:1em;background-color:#eee;text-align:center;line-height:0;overflow:hidden;cursor:default;-webkit-user-select:none;user-select:none;z-index:1}.tab-layout .tab[data-selected]{z-index:2}.grid-layout{list-style:none;margin:0;padding:0;line-height:0}.grid-layout .cell{display:inline-block;position:relative;background:#e0e0e0 center no-repeat;background-size:cover;z-index:1}.grid-layout .cell[data-selected]{box-shadow:0 0 0 .1em #000;z-index:2}.pinboard-layout{position:relative;width:100%;height:100%}.pinboard-layout .item{position:absolute}:root{color-scheme:light dark;--bg-color: #ffffff;--mf-btn-bg: #E0E0E0;--mf-btn-color: #757575;--mf-btn-glow: 0, 0, 0;--mf-btn-glow-alpha: .25;--mf-color-btn-glow-alpha: .1}.mf-designer-screen-tpl{position:relative;width:100%;height:0;padding-top:45%;background:var(--bg-color);background-size:contain;border-radius:5px;box-shadow:0 0 0 10px #00000080;overflow:hidden;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.mf-designer-screen-tpl .cat-frame,.mf-designer-screen-tpl .res-frame,.mf-designer-screen-tpl .shapes-frame,.mf-designer-screen-tpl .preview-frame{text-align:center;box-sizing:border-box}.mf-designer-screen-tpl .preview-frame{display:flex;flex-direction:column;align-items:center;padding:2%;height:auto;position:relative}.mf-designer-screen-tpl .cat-frame{width:12.13%}.mf-designer-screen-tpl .res-frame{width:14.7%}.mf-designer-screen-tpl .command-panel-frame{width:45%;display:flex;flex-direction:row;gap:2%;position:relative}.mf-designer-screen-tpl .shapes-frame{width:100%;padding:.25%;direction:rtl}.mf-designer-screen-tpl .colors-frame{width:10%;box-sizing:border-box;direction:rtl;margin-top:5%}.mf-designer-screen-tpl .preview-frame{width:20%}.mf-designer-screen-tpl .canvas-frame{width:180px;height:187px;border-radius:15%;overflow:hidden}.mf-designer-screen-tpl .renderer-container{position:relative;width:100%;height:100%}.mf-designer-screen-tpl .renderer-container button{opacity:0;font-size:1.5em;font-weight:700;text-wrap:nowrap;text-transform:uppercase;position:absolute;top:0;left:0;z-index:999;width:100%;height:100%;background:transparent;border:none;padding:0;margin:0;cursor:pointer;outline:none}.mf-designer-screen-tpl .renderer-container button,.mf-designer-screen-tpl .renderer-container button:hover{background-color:#546e7a;color:#fff}.mf-designer-screen-tpl .renderer-container button:hover{opacity:1}.mf-designer-screen-tpl .cat-frame .tab-layout{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2%}.mf-designer-screen-tpl .cat-frame .tab{display:block;height:0;padding:50% 0 0;width:50%;border-radius:50%;background:var(--mf-btn-bg) no-repeat center;background-size:auto 70%;border:none;opacity:.75}.mf-designer-screen-tpl .cat-frame .tab:hover,.mf-designer-screen-tpl .cat-frame .tab[data-selected]{opacity:1}.mf-designer-screen-tpl .cat-frame .tab[data-selected]{background-color:#90a4ae;width:75%;padding-top:75%}.mf-designer-screen-tpl .res-frame .tab{display:block;width:88%;margin:5% auto 0;padding:12% 0;border-radius:2em;background-color:var(--mf-btn-bg);color:var(--mf-btn-color);font-size:1em;border:0;font-weight:700;text-wrap:nowrap;text-transform:uppercase}.mf-designer-screen-tpl .res-frame .tab[data-selected]{background-color:#546e7a;color:#eceff1;font-size:1.5em}.mf-designer-screen-tpl .shapes-frame .cell,.mf-designer-screen-tpl .colors-frame .cell{border-radius:15%;overflow:hidden;background-color:var(--mf-btn-bg);opacity:.9}.mf-designer-screen-tpl .shapes-frame .cell:hover,.mf-designer-screen-tpl .colors-frame .cell:hover,.mf-designer-screen-tpl .shapes-frame .cell[data-selected],.mf-designer-screen-tpl .colors-frame .cell[data-selected]{opacity:1}.mf-designer-screen-tpl .shapes-frame .cell{background-size:100% 100%}.mf-designer-screen-tpl .shapes-frame .cell[data-selected]{background-size:150% 150%;box-shadow:0 0 0 1.5em rgba(var(--mf-btn-glow),var(--mf-btn-glow-alpha));border-radius:50%}.mf-designer-screen-tpl .colors-frame .grid-layout{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem}.mf-designer-screen-tpl .colors-frame .cell{border-radius:50%;margin:0;background:transparent;width:60%;padding-top:60%}.mf-designer-screen-tpl .colors-frame .cell[data-selected]{box-shadow:0 0 0 1.25em rgba(var(--mf-btn-glow),var(--mf-color-btn-glow-alpha));width:90%;padding-top:90%}#fdFacePreview{position:relative;width:180px;height:187px;margin:16px 0 13px 5px;overflow:hidden}#fdFacePreview:after{content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;z-index:999}#fdFacePreview img{position:absolute}.mf-designer-screen-tpl .frame-box{display:block;width:95%;padding:2px 0;margin:5px auto 0;background-color:#fff;border:1px solid #bdbdbd;border-radius:4px;text-align:center;line-height:0}.mf-designer-screen-tpl .frame-box .g-btn{display:inline-block;width:32px;height:32px;margin:0 2px;background:no-repeat center;background-size:cover}#fdColorBox ul{line-height:0;list-style:none}#fdColorBox ul li{display:inline-block;width:15%;height:0;padding-top:15%;margin:2px 5%;background:var(--mf-btn-bg) center;background-size:cover;opacity:.8}#fdColorBox ul li:hover{opacity:1}.mf-designer-screen-tpl .frame-bar{display:table;position:absolute;width:100%;height:30px;top:0;left:0;background:#0288d1}.mf-designer-screen-tpl .frame-bar>section{display:table-cell;vertical-align:middle;padding:0 10px;box-sizing:border-box;color:#fff}.mf-designer-screen-tpl .frame-bar section.title{width:200px;background:#01579b;font-size:1.2em;font-weight:700;text-align:center}.mf-designer-screen-tpl .frame-bar a{font-weight:700;font-size:.85em;text-decoration:none;color:#0288d1;background-color:#fff}.mf-designer-screen-tpl .frame-bar a:hover{color:#fff;background-color:transparent}#monitor{display:none;width:100%;height:100%;padding-top:100px;position:fixed;top:0;left:0;background:#00000080;text-align:center;z-index:999}#monitor>img{-webkit-box-shadow:0 0 0 10px rgba(255,255,255,.5);-moz-box-shadow:0 0 0 10px rgba(255,255,255,.5);box-shadow:0 0 0 10px #ffffff80;border-radius:5px}.mf-designer-screen-tpl button{color:#fff;background:#0091ea;border:1px solid #01579b;border-radius:5px;font-family:inherit}.mf-designer-screen-tpl button:hover{background-color:#00b0ff}.mf-designer-screen-tpl button:disabled{background-color:#bdbdbd;border-color:#9e9e9e}.mf-designer-screen-tpl .btn-save{width:140px;padding:8px;margin-top:7px}.splitter{width:0;height:50%;border-left:.1rem solid #c4c4c4}.designer-container{width:100%;height:100%;padding:2% 1%;position:absolute;top:0;left:0;display:flex;flex-direction:row;align-items:start;justify-content:center;gap:2%;box-sizing:border-box}.designer-container>*{height:100%}@media (prefers-color-scheme: dark){:root{--bg-color: #424242;--mf-btn-bg: #757575;--mf-btn-color: #212121;--mf-btn-glow: 255, 255, 255;--mf-btn-glow-alpha: .5;--mf-color-btn-glow-alpha: .25}}.mf-designer-screen-tpl{background:transparent;border-radius:0;box-shadow:none}.designer-container:before{content:"";display:block;background-color:var(--bg-color);position:absolute;top:0;left:21%;width:65%;height:100%;border-radius:12px;box-shadow:5px 15px 15px #000;z-index:1}.designer-container:after{content:"";display:block;background-color:var(--bg-color);position:absolute;top:3%;right:2%;width:50%;height:94%;border-radius:12px}.mf-designer-screen-tpl .preview-frame:before{content:"";background:var(--bg-color);border-radius:12px;position:absolute;top:0;left:0;width:100%;height:100%}.mf-designer-screen-tpl .cat-frame .tab{transition:background-color .2s,opacity .2s,width .2s,padding-top .2s}.mf-designer-screen-tpl .cat-frame .tab:hover{width:75%;padding-top:75%}.mf-designer-screen-tpl .res-frame .tab{transition:font-size .1s}.mf-designer-screen-tpl .res-frame .tab:hover{font-size:1.5em}.mf-designer-screen-tpl .shapes-frame .cell{background-size:100% 100%;transition:background-size .1s,opacity .1s}.mf-designer-screen-tpl .shapes-frame .cell:hover{background-size:150% 150%}.mf-designer-screen-tpl .colors-frame .cell{transition:width .2s,padding-top .2s}.mf-designer-screen-tpl .colors-frame .cell:hover{width:90%;padding-top:90%}.mf-designer-screen-tpl .renderer-container button{transition:opacity .2s}