:root{--preview-color:#7925ff;--layout:white;--background:#fff;--layout-border:#f0f0f0;--layout-hover:#f9f9f9;--text-color:#49454e;--color:black}.dark-theme{--layout:var(--preview-background-color);--background:black;--color:white;--layout-border:#3a3535;--layout-hover:#3a3535}.draggable{background:var(--preview-bg-color);cursor:move;width:100px;height:40px;color:var(--preview-color);touch-action:none;border-radius:4px;justify-content:center;align-items:center;font-weight:500;display:flex}.droppable{background:var(--sidebar-background-color);width:200px;height:100px;color:var(--text-color);touch-action:none;border:2px dashed #ccc;border-radius:4px;justify-content:center;align-items:center;margin:30px auto;font-weight:500;transition:all .3s;display:flex}.droppable.dropped{border:2px dashed #4caf50}.drag-handle{cursor:grab;color:#666;margin-right:10px;padding:5px}.drag-handle:active{cursor:grabbing}.scoped-container{padding-left:40px}.list-container{width:100%;max-width:35%;margin:0 auto}.draggable-list{background:var(--layout);color:var(--text-color);touch-action:none;border-radius:8px;margin:0;padding:0;list-style:none;box-shadow:0 2px 10px #0000000d}.list-item{border-bottom:1px solid var(--layout-border);cursor:move;align-items:center;padding:8px 16px;transition:background-color .2s;display:flex}.list-item-clone{background-color:var(--background);color:var(--color)}.list-item:last-child{border-bottom:none}.list-item:hover{background-color:var(--layout-border)}.handle{color:var(--color);cursor:grab;margin-top:-1px;margin-right:12px}.handle:active{cursor:grabbing}.item-content{flex:1;font-size:14px}.list-item-clone{border:2px dashed #3498db;border-radius:8px;width:calc(100% - 40px);max-width:460px}.draggable-demo{-webkit-user-select:none;user-select:none}#dragarea p{text-align:center;padding-top:23px}#dragarea{background:var(--sidebar-background-color);width:750px;height:200px;color:var(--text-color);touch-action:none;font-size:14px;line-height:170px}.draggable-demo .sf-icons{padding-top:5px}@media (max-width:580px){.scoped-container{padding-left:0}.drag-axis .droppable{width:150px}}@media (max-width:1024px){.list-container{width:100%;max-width:65%}}