.main-container {
	max-width: 100%;
	max-height: 100%;
	margin: 40px auto;
	text-align: center;
}

.img-container {
	position: relative;
	display: inline-block;
	border: 2px solid #ddd;
	margin: 20px;
	max-width: 100%;
	max-height: 100%;
}

#userUploadedImg {
	display: block;
	max-width: 100%;
	max-height: 100%;
}

#gridColorPicker {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 50px;
	height: 38px;
	padding: 0;
	border: 1px solid #fff;
	border-radius: 0.375rem;
	cursor: pointer;
}


	#gridColorPicker::-webkit-color-swatch {
		border: none;
		border-radius: 0.375rem;
	}

	#gridColorPicker::-moz-color-swatch {
		border: none;
		border-radius: 0.375rem;
	}


.grid-overlay {
	position: absolute;
	top: 50px;
	left: 50px;
	width: 200px;
	height: 200px;
	border: 2px dashed #fff;
	background: rgba(0, 123, 255, 0.1);
	display: grid;
	cursor: move;
}

.resize-handle {
	position: absolute;
	width: 12px;
	height: 12px;
	background: #007bff;
	border: 2px solid #fff;
	border-radius: 50%;
	cursor: pointer;
	z-index: 10;
	transform: translate(-50%, -50%);
}

	.resize-handle:hover {
		background: #0056b3;
		transform: translate(-50%, -50%) scale(1.3);
	}

	/* Corner handles */
	.resize-handle[data-dir="tl"] {
		top: 0;
		left: 0;
		cursor: nw-resize;
	}

	.resize-handle[data-dir="tr"] {
		top: 0;
		right: 0;
		cursor: ne-resize;
		transform: translate(50%, -50%);
	}

	.resize-handle[data-dir="bl"] {
		bottom: 0;
		left: 0;
		cursor: sw-resize;
		transform: translate(-50%, 50%);
	}

	.resize-handle[data-dir="br"] {
		bottom: 0;
		right: 0;
		cursor: se-resize;
		transform: translate(50%, 50%);
	}

	/* Edge handles */
	.resize-handle[data-dir="t"] {
		top: 0;
		left: 50%;
		cursor: n-resize;
	}

	.resize-handle[data-dir="b"] {
		bottom: 0;
		left: 50%;
		cursor: s-resize;
		transform: translate(-50%, 50%);
	}

	.resize-handle[data-dir="l"] {
		left: 0;
		top: 50%;
		cursor: w-resize;
	}

	.resize-handle[data-dir="r"] {
		right: 0;
		top: 50%;
		cursor: e-resize;
		transform: translate(50%, -50%);
	}

.grid-cell {
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.05);
}

	.grid-cell:hover {
		background: rgba(255, 255, 255, 0.2);
	}

.btn-group {
	margin-top: 20px;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

#page-spinner {
	position: fixed;
	top: 50px;
	z-index: 1000;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.6);
}

	#page-spinner #htmlloader {
		display: block;
		margin: 80px auto;
	}

	#page-spinner #loader {
		border: 16px solid #f3f3f3;
		border-top: 16px solid #449d44;
		border-radius: 50%;
		width: 120px;
		height: 120px;
		animation: spin 2s linear infinite;
		left: 50%;
		top: 50%;
		margin: 150px auto;
	}