#bookitemlist {
  width: 100%;  
}

.bookdrag {
  border-left: 2px dotted black; !important
}

.bookitemgroup {
  margin-left: 10px;
}

.bookitem, .bookitemgroupheading {
  width: 100%;
  min-height: 22px;
  border: 0.5px solid #687aac;
  padding: 5px;
  margin-bottom: 5px;
  font-size: 1.1em;
  cursor: pointer;
  background-color: #f8f8f8;
  color: black;
}

.bookitem.is-dragging, .bookitemgroupheading.bookitem.is-dragging {
  z-index: 99;
}

.bookitemgroupheading .grouppointerRight {
  display: inline-block;
  background-image: url('../grafik/morethan-32-777.png');
  background-size: 14px;
  background-repeat: no-repeat;
  height: 16px;
  width: 16px;
  margin-right: 3px;
}

.bookitemgroupheading .grouppointerDown {
  display: inline-block;
  background-image: url('../grafik/morethan-32-777.png');
  background-size: 12px;
  background-repeat: no-repeat;
  transform: rotate(90deg);
  height: 16px;
  width: 16px;
  margin-right: 3px;
}

.bookitem:hover, .bookitemgroupheading:hover {
  background-color: #e5e5e5;
}

.bookitemtitle {
  font-weight: normal;
}

.bookitemsubtitle {
  margin-top: 10px;
  font-size: 0.8em;
}

.bookiteminfoicon {
  display: inline-block;
  height: 20px;
  width: 40px;
  margin-left: 15px;
  background-image: url('../grafik/status-notice-icon.png');
  background-size: 16px;
  background-repeat: no-repeat;
}

.bookiteminfoicon:hover {
  background-size: 20px;  
}

.mandatory {
  color: red;
}