.dropareahover {
background-color:#EFD2A4 ! important;
border-color:#DFA853 ! important;
}

.cls_move {
background-color:#ffffcc  !important;
border-color:#ff0000  !important;
}

.cls_draggable {
background-color:#d1ffff  !important;
border-color:#000099  !important;
color:#000000 !important; /* ensure readable over pale background */
}

.cls_selected {
background-color:#ffffcc  !important;
border-color:#00ff00  !important;
}


.cls_mismatch{
background-color:#ff4d4f !important;
border-color:#b8000f !important;
color:#ffffff !important;
}
.rr-guts-dark .cls_mismatch{
background-color:#b8000f !important;
border-color:#ff8087 !important;
color:#ffffff !important;
}

.cls_start{
}

.menu{
}

.menu:hover
{
background-color: #245250;
cursor:pointer
}

.dragbox, .dropbox, .cls_completed {
display:block;
border:2px solid #999;
background:#fff;
width:180px;
padding:5px 10px;
cursor:move;
float:none;
margin-top:10px;
margin-bottom:10px;
border-radius:8px;
}

/* Remove default UL indentation so alignment is controlled by the question layout */
#sideA, #sideB{
  margin:0;
  padding:0;
}

.dragbox {
z-index: 100;
}

.cls_completed {
background-color:#CCFF66  !important;
border-color:#009933  !important;
color:#000000 !important; /* ensure readable over light-green */
}

/* Dark-mode friendly variants within guts */
.rr-guts-dark .dragbox,
.rr-guts-dark .dropbox {
  background:#2b2f36 !important;
  color:#ffffff !important;
  border-color:#4a4f57 !important;
}
.rr-guts-dark .cls_completed {
  background:#244a24 !important;
  color:#ffffff !important;
  border-color:#55aa55 !important;
}
.rr-guts-dark .dropareahover {
  background-color:#343a42 !important;
  color:#ffffff !important;
}
/* Dark mode: when dragging, force high-contrast text on the helper clone */
.rr-guts-dark .cls_draggable {
  background-color:#9edfff !important; /* slightly deeper blue for contrast */
  color:#000000 !important;
  border-color:#2a6fb3 !important;
}