.dd {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  /* max-width: 600px; */
  /* max-width: 255px; */
  list-style: none;
  font-size: 14px;
  line-height: 20px;
}

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

.dd-list .dd-list .dd-handle {
  background: #fff;
  /* color: #ccc; */
  color: #8f9ea6;
  /* font-weight: normal; */
  /* #587da9; */
  padding-left: 0px;
}

/* color: #2ea8e5; */
/* .dd-list .dd-list .dd-handle:hover {
  color: #587da9;  
  background: #fff;
} */

/* .dd-list .dd-list .dd-item {
  background: #ffffff;
}
 */

.dd-item, .dd-empty, .dd-placeholder {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 20px;
  font-size: 14px;
  line-height: 20px;
  background: #fff;
}

.dd-handle {
  display: block;
  height: 30px;
  /*margin: 5px 0;*/
  /* padding: 5px 10px; */
  padding: 2px;
  font-size: 13px;
  /* color: #fff; */
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid #ccc;
  background: #587da9;
  /* background: #fafafa; */
  /* border-radius: 3px;
  box-sizing: border-box; */
}

/* color: #2ea8e5; */

/* 
.dd-handle:hover {
  color: #587da9;  
  background: #fff;
} 
*/

.dd-item>button {
  position: relative;
  cursor: pointer;
  float: left;
  width: 20px;
  height: 18px;
  margin: 5px 5px;
  padding: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border: #ffffff;
  background: #587da9;
  /* background: transparent; */
  font-size: 12px;
  border-radius: 3px;
  line-height: 1;
  text-align: center;
  font-weight: bold;
  color: #ffffff;
  /* border-color: blue; */
}

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

.dd-item>button.dd-expand:before {
  /* content: '+'; */
  font-family: FontAwesome;
  /* arrow */
  /* content: "\f150"; */
  /* eye */
  /* content: "\f06e"; */
  /* plus */
  content: "\f067";
  /* arrow-sort-down */
  /* content: "\f0dd"; */
  /* arrow-L-down */
  /* content: "\f149"; */
  /* squar-unfill */
  /* content: "\f096"; */
  /* toggle-unfill */
  /* content: "\f204"; */
  /* toggle-fill */
  /* content: "\f205"; */
}

.dd-item>button.dd-collapse:before {
  /* content: '-'; */
  font-family: FontAwesome;
  /* arrow */
  /* content: "\f152"; */
  /* eye */
  /* content: "\f070"; */
  /* minus */
  content: "\f068";
  /* arrow-sort-up */
  /* content: "\f0de"; */
  /* arrow-L-up */
  /* content: "\f148"; */
  /* squar-fill */
  /* content: "\f0c8"; */
  /* toggle-fill */
  /* content: "\f205"; */
  /* toggle-unfill */
  /* content: "\f204"; */
}

.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: 30px;
  background: #f2fbff;
  border: 1px dashed #b6bcbf;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.dd-empty {
  border: 1px dashed #bbb;
  min-height: 100px;
  background-color: #e5e5e5;
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
}

.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 #0000001a;
}

.dd-nochildren .dd-placeholder {
  display: none;
}

.dd-nodrag {
  padding: 7px 0px 2px 0px;
}