.dd {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  line-height: 1.25rem;
}

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

.dd-list .dd-list {
  padding-left: 1.875rem;
}

.dd-collapsed .dd-list {
  display: none;
}

.dd-item, .dd-empty, .dd-placeholder {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
}

.dd-grab {
  position: absolute;
  margin: 0;
  pointer-events: none;
  left: 0;
  top: 0;
  width: 1.875rem;
  height: 1.875rem;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid $border-color;
  background: $base-background-color;
  border-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.dd-grab:before {
  content: '≡';
  pointer-events: none;
  display: block;
  position: absolute;
  left: 0;
  top: 0.1875rem;
  width: 100%;
  text-align: center;
  text-indent: 0;
  font-size: 20px;
  font-weight: normal;
}

.dd-grab-cat {
  position: absolute;
  margin: 0;
  pointer-events: none;
  left: 0;
  top: 0;
  width: 1.875rem;
  height: 1.875rem;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border-right: 1px solid $base-background-color;
  background: $color-primary;
  border-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.dd-grab-cat:before {
  content: '≡';
  pointer-events: none;
  display: block;
  position: absolute;
  left: 0;
  top: 0.1875rem;
  width: 100%;
  text-align: center;
  text-indent: 0;
  color: $base-background-color;
  font-size: 1.25rem;
  font-weight: normal;
}

.dd-handle, .dd-root-handle {
  display: block;
  height: 1.875rem;
  cursor: pointer;
  margin: 0.3125rem 0;
  padding: 0.3125rem 0.625rem 0.3125rem 3.125rem;
  color: $base-font-color;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid $border-color;
  background: $base-background-color;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  border-radius: 2px;
}

.dd-root-handle {
  color: $base-background-color;
  border: 1px solid $color-primary;
  background: $color-primary;
  border-radius: 2px;
}

.dd-root-item > button:before {
  color: $base-background-color !important;
}

.dd-item > button {
  display: block;
  position: relative;
  cursor: pointer;
  float: left;
  width: 1.5625rem;
  height: 1.25rem;
  margin: 0.3125rem 0 0.3125rem 1.875rem;
  padding: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border: 0;
  background: transparent;
  font-size: 0.75rem;
  line-height: 1;
  text-align: center;
  font-weight: bold;
}

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

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

.dd-placeholder, .dd-empty {
  margin: 0.3125rem 0;
  padding: 0;
  height: 1.875rem;
  background: $sub-header-color;
  border: 1px dashed $border-color;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.dd-empty {
  border: 1px dashed $border-color;
  min-height: 1.875rem;
  background-color: $sub-header-color;
  background-image:
    -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
    -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
  background-image:
    -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
    -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
  background-image:
    linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
    linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
  background-size: 3.75rem 3.75rem;
  background-position: 0 0, 1.875rem 1.875rem;
}

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

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

.dd-dragel .dd-handle {
  -webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
}

.dd-right-icon {
  float: right !important;
  cursor: pointer;
  padding-top: 0.1875rem;
  padding-left: 0.3125rem;
}

.dd-desc {
  width: 75%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.dd-desc > span {
  font-weight: normal;
  color: $secondary-font-color-dark;
  font-size: 0.6875rem;
  padding-left: 10px;
}

.fill-btn {
  width: 100%;
  height: 2.3125rem;
  padding-top: 0.5rem;
  margin-bottom: 16px;
}

.status {
  display: none !important;
  padding-right: 0.3125rem !important;
}

.modified {
  color: #40BFFF;
  display: inline-block !important;
  float: left;
  padding-top: 0.25rem;
}

.modified::before {
  content: "\f0c8";
}

@include media($mobile) {
  .dd-desc span { display: none; }
  .dd-desc { width: 70% };
}
