.dd, .dd-list { position: relative } .dd-list { margin: 0; padding: 0; display: flex; flex-direction: column; list-style: none } .dd-list .dd-list { padding-left: 1.25rem } .dd-list .dd-list .dd-handle { border-left: 1px solid #ecedf1 } .dd-item { position: relative; display: flex; flex-direction: column } .dd-item:first-child>.dd-nodrag { margin-top: 2rem } .dd-item>button { position: absolute; left: 2.3rem; top: 1.125rem; padding: 0 0 0 20px; width: 20px; height: 20px; border: 0; line-height: 1; white-space: nowrap; vertical-align: middle; background-color: transparent; background-repeat: no-repeat; background-position: 50%; background-size: 10px; overflow: hidden } .dd-item>button.dd-expand { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fas' data-icon='caret-right' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' class='svg-inline--fa fa-caret-right fa-w-10 fa-3x'%3E%3Cpath fill='currentColor' d='M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z'/%3E%3C/svg%3E") } .dd-item>button.dd-collapse { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fas' data-icon='caret-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' class='svg-inline--fa fa-caret-down fa-w-10 fa-3x'%3E%3Cpath fill='currentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") } .dd-item>button+.dd-handle { padding-left: 2.5rem } .dd-item .drag-indicator { display: inline-block; margin: 0 0.5em; height: 18px; width: 18px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAu0lEQVR4nL2USwrCQBBEX8SNn0sIXkDvEsiRXM3gwk1wnZ2XMLlGzqI01AQJGckM0YKCppJUuqszgT+hADzgVGeb3ICXeAdWOUYV0AMPsZeWjDWw12hetWnZcGJSJuXEW4/iuNtyagEm1Mph86GfgVa0OmCre+uxmdNmGuAiWhcdcBU7aeF6o2csvwF+hlEbMXKx0aztgBPwFK0O2MVG+xb2QZwV9qLr/9kHWS11RIqlDm0wCxll/0aS8AYveDOZzazM3QAAAABJRU5ErkJggg==); transform: translate3d(-0.5em, 0, 0); cursor: move; cursor: -webkit-grab; cursor: grab; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .dd-item>button+.dd-handle>.drag-indicator { transform: translate3d(-2rem, 0, 0); margin-right: .25rem } .dd-footer { display: block; background-color: #f6f7f9 } .dd-handle { margin-bottom: -1px; padding: .75rem 1rem; display: flex; align-items: center; background-color: #fff; border-top: 1px solid #ecedf1; border-bottom: 1px solid #ecedf1 } .dd-handle .dd-title { font-size: 16px; font-weight: 500; } .dd-handle:focus, .dd-handle:hover { text-decoration: none } .dd-collapsed .dd-collapse, .dd-collapsed .dd-list, .dd-expand { display: none } .dd-collapsed .dd-expand { display: block } .dd-placeholder { min-height: 30px; background: rgba(52, 108, 176, .12); border: 1px dashed #346cb0 } .dd-empty, .dd-placeholder { position: relative; margin: 0; padding: 0 } .dd-empty { min-height: 56px; background-color: #f6f7f9; border: 1px dashed rgba(34, 34, 48, .1) } .dd-dragel { position: absolute; pointer-events: none; z-index: 2000 } .dd-dragel>.dd-item .dd-handle { margin-top: 0 } .dd-nochildren .dd-placeholder { display: none }