body {
  font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
  background-color: #E2EBED;
  margin: 0;
  padding: 0;
}

#dhtmlgoodies_dragDropContainer {
  width: 1020px;
  margin: 20px auto;
  background: #fff;
  border: 1px solid #bc98ec;
  padding: 20px;
}

/* SAMPLE BEHAVIORS ACROSS TOP */
#dhtmlgoodies_listOfItems.top {
  width: 100%;
  margin-bottom: 20px;
}

#dhtmlgoodies_listOfItems.top .list-card {
  border: 1px solid #999;
  background: #fff;
}

#dhtmlgoodies_listOfItems.top p {
  margin: 0;
  padding: 6px 12px;
  font-weight: bold;
  background-color: #bc98ec;
  color: #fff;
}

#dhtmlgoodies_listOfItems.top ul {
  list-style: none;
  margin: 0;
  padding: 10px;
  max-height: 180px;
  overflow-y: auto;
}

/* GRID FOR COMPETENCY BOXES */
#dhtmlgoodies_mainContainer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
}

#dhtmlgoodies_mainContainer > div {
  border: 1px solid #efe3ff;
  background: #fff;
}

#dhtmlgoodies_mainContainer > div p {
  margin: 0;
  padding: 6px 12px;
  font-weight: bold;
  background-color: #bc98ec;
  color: #fff;
}

#dhtmlgoodies_mainContainer > div ul {
  list-style: none;
  margin: 0;
  padding: 10px;
  min-height: 80px;
}

/* DRAG ITEMS */
#allItems li {
  background-color: #eadbff;
  border: 1px solid #000;
  padding: 4px;
  margin-bottom: 6px;
  cursor: pointer;
}

.correctAnswer {
  background-color: green !important;
  color: white;
}

.wrongAnswer {
  background-color: red !important;
  color: white;
}

#dragContent{
  position: absolute;
  background: #eadbff;
  display: none;          
  margin: 0;
  padding: 0;
  z-index: 99999;        
  pointer-events: none;  
}


#dragContent li{
  list-style: none;
  background: #eadbff;
  border: 1px solid #000;
  padding: 2px 6px;
  margin: 0;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0,0,0,.25); 
}


#dragDropIndicator{
  position: absolute;
  display: none;
  z-index: 99998;
}