/* Add here all your CSS customizations */

/********** DRAG DROP ****/
 #sourceDiv {
	display: block;
	width: 100%;
	height:100px;
	padding: 10px auto!important;
	/* overflow: auto; /* Mobil cihazlarda kaydırma desteği için ekledik */
}
span.draggableItem {
	background-color: #f05727;
	height:35px!important;
	line-height:30px!important;
	color: #fff;
	font-size:18px!important;
	margin: 5px 5px;
	padding: 5px 10px;
	cursor: move;
	text-align: center;
	transition: background-color 0.3s ease;
	z-index:9999;
	border-radius: 5px;
	white-space: pre-wrap;
	  display: inline-block;
	  word-break: break-word;
}
.draggableItem.ui-draggable-dragging {
	background-color: lightgray; /* Sürükleme sırasında rengi değiştir */
}
.draggableItem.ui-draggable-disabled {
	opacity: 0.5; /* Pasif hale geldiğinde opaklık ayarla */
	cursor: move; /* Mobil cihazlarda da sürükleme özelliğini etkinleştir */
}
.undoButton {
	display: none; /* Başlangıçta geri alma butonlarını gizle */
	color:darkred;
	background:none;
	border:none;
	margin:0;
	padding:0;
	margin-left:10px;
	font-weight: bold;
	font-size:15px;
}
#targetDiv .target {
	display: inline-block;
	min-width: 100px;
	min-height: 30px;
	line-height: 25px;
	padding: 3px 6px;
	box-sizing: border-box;
	background-color: #dcdcdc;
	border-radius: 5px;
	vertical-align: middle;
	margin-bottom: 10px;
	margin-top: 10px;
}
.area {
	padding:0;
	margin:0;
	font-size:16px;
}
.target.hover {
	background-color: #ccffcc; /* Çok açık yeşil */
}
.target.filled {
	background-color: #d9f5d9; /* Daha koyu yeşil */
}
/********** DRAG DROP ****/


/*** Match Image **/
.click-disable {
  pointer-events: none;
  opacity: 0.5;
}

.mathchedQuestion__question {
  cursor: pointer;
}

.question__img {
  max-width: 720px;
}
.question__img--zoom {
  display: flex;
  position: absolute;
  left: calc(7% - 1rem); 
  bottom: 0rem;
  cursor: pointer;
  height: 35px;
}
.question__img img {
  max-height: 220px;
  border-radius: 0.5rem !important;
}

.question__answers__item {
  background: #e78c17;
  border-bottom: 3px solid #983d04;
  margin: 0 0.8rem;
  padding: 0.1rem 0.4rem;
  color: #fff;
  border-radius: 0.25rem;
  transition: all 0.3s ease;
  cursor: pointer;
	font-weight: bold;
}
.question__answers__item:hover {
  background: #17b7ff !important;
border-bottom: 3px solid #1080b3;
}

.activeAnswerBtn {
  /* background: #983d04 !important; */
  background: #17b7ff !important;
	border-bottom: 3px solid #1080b3;
}

.removeButton { cursor:pointer; }