.dd { position: relative; display: block; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 30px; padding:0 2rem; } .dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; } .dd-list .dd-list { padding-left: 40px; } .dd-item, .dd-empty, .dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 30px; font-size: 14px; line-height: 30px; } .dd-handle { display: block; height: 40px; margin: 5px 0; padding: 5px 10px; color: var(--bs-body-color); text-decoration: none; font-weight: bold; border: 1px solid var(--bs-border-color); border-right: none; border-right: 1px solid rgba(var(--bs-body-color-rgb), 0.075); background: #fafafa; background: #f5f7fa; background: var(--bs-primary-bg-subtle); border-radius: 3px; box-sizing: border-box; } .dd-handle:hover { color: #2ea8e5; background: var(--bs-body-bg); } .dd-item > button { position: relative; cursor: pointer; float: left; width: 25px; height: 30px; margin: 5px 35px; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; } .dd-item > button:before { display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; font-size:12px; color:var(--bs-body-color); } .dd-item > button.dd-expand:before { content: '+'; content: '⏷'; content: "\f107"; font-family: Line Awesome Free; font-weight: 900; } .dd-item > button.dd-collapse:before { content: '-'; content: '⏶'; content: "\f106"; font-family: Line Awesome Free; font-weight: 900; } .dd-expand { display: none; } .dd-collapsed .dd-list, .dd-collapsed .dd-collapse { display: none; } .dd-collapsed .dd-expand { display: block; } .dd-empty, .dd-placeholder { margin: 5px 0; padding: 0; min-height: 40px; background: var(--bs-border-color); border: 1px dashed var(--bs-border-color); box-sizing: border-box; -moz-box-sizing: border-box; } .dd-empty { border: 1px dashed var(--bs-border-color); min-height: 100px; background-color: #e5e5e5; background-size: 60px 60px; background-position: 0 0, 40px 40px; } .dd-dragel { position: absolute; pointer-events: none; z-index: 9999; } .dd-dragel > .dd-item .dd-handle { margin-top: 0; } .dd-dragel .dd-handle { box-shadow: 2px 4px 6px 0 rgba(var(--bs-body-color-rgb),.1); } .dd-nochildren .dd-placeholder { display: none; } .dd3-content { display: block; height: 45px; margin: 5px 0; padding: 5px 80px 5px 60px; color: var(--bs-body-color); text-decoration: none; border: 1px solid rgba(var(--bs-body-color-rgb), 0.1); background: var(--bs-body-bg); /* background: -webkit-linear-gradient(top, #fafafa 0%, var(--bs-border-color) 100%); background: -moz-linear-gradient(top, #fafafa 0%, var(--bs-border-color) 100%); background: linear-gradient(top, #fafafa 0%, var(--bs-border-color) 100%);*/ //box-shadow:-1px 1px 8px 2px rgba(var(--bs-body-color-rgb), 0.1), -1px 1px 2px 0px rgba(var(--bs-body-bg-rgb), 0.2) inset; //box-shadow:1px 1px 8px 2px rgba(var(--bs-body-color-rgb), 0.03); box-shadow:1px 1px 2px 1px rgba(var(--bs-body-color-rgb), 0.02); -webkit-border-radius: 3px; border-radius: 5px; box-sizing: border-box; -moz-box-sizing: border-box; } /* .dd-item .expand { margin-top:-10px; } .dd-item .expand .card { border-top:none; } */ .dd3-content label.form-check .form-check-input { vertical-align: text-bottom; margin-right:0.2rem; margin-top:0.5rem; } .dd3-content:hover { color: #2ea8e5; background: var(--bs-body-bg); } .dd3-content .type-icon { margin-right:0.5rem; } .dd-dragel > .dd3-item > .dd3-content { margin: 0; } .dd3-item > button { margin-left: 50px; } .dd3-item > .dd3-buttons { position: absolute; margin: 0; right: 10px; top: 6px; cursor: pointer; } .dd3-item > .dd3-buttons .btn.btn-outline-secondary { color: var(--bs-link-color); } .dd3-item > .dd3-buttons .btn-outline-danger { visibility:hidden; } .dd3-item > .dd3-buttons:hover .btn-outline-danger{ visibility:visible; } .dd3-handle { position: absolute; margin: 0; left: 0; top: 0; cursor: pointer; width: 40px; height: 45px; text-indent: 300%; white-space: nowrap; overflow: hidden; border: 1px solid var(--bs-border-color); border: none; border-right: 1px solid rgba(var(--bs-body-color-rgb), 0.075); background: #fafafa; background: #f5f7fa; background: var(--bs-tertiary-bg); background: rgba(var(--bs-body-color-rgb), 0.015); /* background: -webkit-linear-gradient(top, var(--bs-border-color) 0%, #bbb 100%); background: -moz-linear-gradient(top, var(--bs-border-color) 0%, #bbb 100%); background: linear-gradient(top, var(--bs-border-color) 0%, #bbb 100%);*/ border-top-right-radius: 0; border-bottom-right-radius: 0; cursor:move; } .dd3-handle:before { content: '≡'; display: block; position: absolute; left: 0; //top: 3px; width: 100%; text-align: center; text-indent: 0; color: rgba(var(--bs-body-color-rgb), 0.7); font-size: 22px; font-weight: normal; } .dd3-handle:hover { background: var(--bs-border-color); } .dd .custom-control { min-height: 1.1rem; padding-left: 1.5rem; margin-right: 0rem; } .dd .custom-control label { margin-bottom:0rem; }