/* 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:50px!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: nowrap;
}
.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 ****/