/* (A) LIST STYLES */
.slist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.slist li {
  margin: 5px;
  padding: 10px;
  border: 1px solid #dfdfdf;
  background: #f5f5f5;
}

ul li:nth-child(-n+10) {  
  background-color: #0097449f;
  color:#000000f8;
}


/* (B) DRAG-AND-DROP HINT */
.slist li.hint {
  border: 1px solid #ffc49a;
  background: #feffb4;
}
.slist li.active {
  border: 1px solid #ffa5a5;
  background: #ffe7e7;
}

.slist li.hint:nth-child(-n+10) {
  background-color: #9400009f;
  color:#000000f8;
}

.slist li.active:nth-child(-n+10) {
  background-color: #0097449f;
  color:#000000f8;
}

/* (X) DOES NOT MATTER */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}