.dd {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dd-item > button,
.dd-list {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dd-collapsed .dd-item > button, .dd-collapsed
.dd-list {
  display: none;
}

html:not([dir=rtl]) .dd-item > button .dd-list, html:not([dir=rtl])
.dd-list .dd-list {
  padding-left: 2rem;
}

[dir=rtl] .dd-item > button .dd-list, [dir=rtl]
.dd-list .dd-list {
  padding-right: 2rem;
}

.dd-item,
.dd-empty,
.dd-placeholder {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}

.dd-handle,
.dd-content {
  display: block;
  margin: 0.3125rem 0;
  padding: 0.3125rem 0.75rem;
  text-decoration: none;
  cursor: move;
}

.dd-handle + .dd-content {
  cursor: auto;
}

.dd-item > button {
  position: absolute;
  display: block;
  float: left;
  overflow: hidden;
  margin: 0.3125rem 0 0.3125rem 1px;
  padding: 0;
  width: 2rem;
  border: 0;
  background: transparent;
  text-align: center;
  text-indent: 100%;
  white-space: nowrap;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  color: inherit;
}

.dd-item > button:before {
  content: '+';
  position: absolute;
  display: block;
  width: 100%;
  text-align: center;
  text-indent: 0;
}

.dd-item > button[data-action="collapse"]:before {
  content: '-';
}

html:not([dir=rtl]) .dd-item > button ~ .dd-handle {
  padding-left: 2rem;
}

[dir=rtl] .dd-item > button ~ .dd-handle {
  padding-right: 2rem;
}

.dd-placeholder,
.dd-empty {
  box-sizing: border-box;
  margin: 0.3125rem 0;
  padding: 0;
}

.dd-empty {
  min-height: 6.25rem;
}

.dd-dragel {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
}

.dd-dragel > .dd-item .dd-handle {
  margin-top: 0;
}

.light-style .dd-handle,
.light-style .dd-content {
  border: 1px solid rgba(24, 28, 33, 0.1);
  border-radius: 0.25rem;
}

.light-style .dd-placeholder,
.light-style .dd-empty {
  border: 1px dashed rgba(24, 28, 33, 0.2);
  background: rgba(24, 28, 33, 0.06);
}

.material-style .dd-handle,
.material-style .dd-content {
  border: 1px solid rgba(24, 28, 33, 0.1);
  border-radius: 0.125rem;
}

.material-style .dd-placeholder,
.material-style .dd-empty {
  border: 1px dashed rgba(24, 28, 33, 0.2);
  background: rgba(24, 28, 33, 0.06);
}

.dark-style .dd-handle,
.dark-style .dd-content {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.25rem;
}

.dark-style .dd-placeholder,
.dark-style .dd-empty {
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

