body {
	background-color: #0a0a0a;
	color: #ffffff;
}
.crop-card {
	transition: all 0.2s;
	width: 87px;
	height: 100px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 2px;
}
.crop-grid {
	gap: 10px;
}
.crop-card:hover {
	border-color: #4ade80;
}
.mutation-btn {
	transition: all 0.2s;
}
.mutation-btn.selected {
	background-color: rgba(74, 222, 128, 0.2);
	border-color: #4ade80;
	color: #4ade80;
}
.expand-icon {
	position: absolute;
	bottom: 8px;
	right: -24px;
	width: 24px;
	height: 24px;
	background-color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s;
	z-index: 10;
}
.mutation-btn:hover {
	border-color: #4ade80;
}
.expand-icon svg {
	width: 12px;
	height: 12px;
	color: black;
	font-weight: bold;
	stroke-width: 3;
}
::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-track {
	background: #1a1a1a;
}
::-webkit-scrollbar-thumb {
	background: #333333;
	border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
	background: #4a4a4a;
}

.slider {
	-webkit-appearance: none;
	appearance: none;
	background: #374151;
	outline: none;
	border-radius: 5px;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #3b82f6;
	cursor: pointer;
	border: 2px solid #ffffff;
}

.slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #3b82f6;
	cursor: pointer;
	border: 2px solid #ffffff;
}

@media (max-width: 1023px) {
	.mutation-panels-container {
		flex-direction: column !important;
		gap: 1.5rem !important;
	}
	.mutation-left-column {
		flex-direction: row !important;
		gap: 1.5rem !important;
	}
	.mutation-panel {
		width: auto !important;
		height: auto !important;
		flex: 1;
	}
	.mutation-panel-right {
		margin-left: 0 !important;
		height: auto !important;
	}
}
@media (max-width: 508px) {
	#mutationGrid .mutation-btn span {
		font-size: 0.75rem;
		font-weight: 500;
	}
	#mutationGrid .mutation-btn {
		padding: 0.5rem !important;
	}
}

@media (max-width: 405px) {
	#mutationGrid .mutation-btn {
		padding: 0.25rem !important;
	}
}

@media (max-width: 395px) {
	#mutationGrid .mutation-btn {
		padding: 0.125rem !important;
	}
	#mutationGrid .mutation-btn span {
		font-size: 0.625rem;
	}
}

@media (max-width: 420px) {
	#totalPrice {
		font-size: 1.85rem !important;
	}
}

.mutation-panel.bg-gray-800 {
	background-color: transparent !important;
}

.mutation-panel .bg-gray-900 {
	background-color: transparent !important;
}