.for-pad {
		position: fixed;
		z-index: 10;
		background-color: #fff;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
		border-radius: 8px;
		overflow: hidden;
		user-select: 'none'; /* Prevent text selection during drag */
		/*resize: both;*/
	}

	.for-pad-header {
		background-color: #adadad;
		color: #ffffff;
		padding: 5px 10px;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: move;
	}

	.for-pad-content {
		position: relative;
		padding: 12px;
		background-color: #e0e0e0;
	}

	.for-pad-footer {
		/*padding: 10px;*/
		background-color: #e0e0e0;
		display: flex;
		align-items: center;
		/*gap: 10px;*/
	}

	.for-pad-icon {
		cursor: pointer;
		transition: background-color 0.3s;
		border-radius: 99px;
	}

	.for-pad-icon:hover {
		background-color: rgba(255, 255, 255, 0.2);
	}

	.resizer-right {
		width: 10px;
		height: 100%;
		background: transparent;
		position: absolute;
		right: 0;
		bottom: 0;
		cursor: e-resize;
	}
	.resizer-bottom {
		width: 100%;
		height: 10px;
		background: transparent;
		position: absolute;
		right: 0;
		bottom: 0;
		cursor: n-resize;
	}
	
	.pad-toolbar-container {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: 30;
		width: 85%;
		max-width: 900px;
	}
	
	.pad-toolbar {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 20px;
		background-color: #fff;
		padding: 2px 10px;
		box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		width: 100%;
	}

	.pad-toolbar .tool-category {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.tool-category button {
		border-radius: 50%;
		padding: 5px;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: transform 0.2s, background-color 0.3s;
	}

	.tool-category button.uk-button-default {
		background-color: #f1f3f6;
		color: #4e5a6a;
		border: none;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	}

	.tool-category button.uk-button-default:hover {
		background-color: #d0d9e3;
		transform: translateY(-2px);
	}

	.tool-category button.uk-button-default:active {
		background-color: #a0b5d4;
		transform: translateY(0);
	}

	.tool-category button:disabled {
		background-color: #e0e7ef; 
		color: #9aa4b5; 
		opacity: 0.6; 
		box-shadow: none; 
		transform: none; 
	}

	.toolbar-separator {
		height: 30px;
		border-left: 2px solid #e0e5ec;
	}
		
	.pad-toolplate {
		max-width: 370px;
		max-height: 70%;
		overflow-y: auto;
		position: absolute;
		bottom: 40px; /* Adjust based on the height of your footer and button group */
		left: 10px;
		right: 10px; /* Keeps the width dynamic and responsive */
		/*height: 70%;  Adjust as needed for the panel's height */
		background-color: #fff;
		border: 1px solid #ccc;
		box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		padding: 5px 15px;
		z-index: 20; /* Ensure it appears above other elements */
	}
	.uk-card.pad-toolplate {
		position: absolute;
	}

	.plate-close-button {
		background: none;
		border: none;
		font-size: 1rem;
		cursor: pointer;
		color: #b5b5b5; /* Use preferred gray color */
		padding: 0;
		align-self: center; /* Align with other items */
		transition: color 0.2s;
	}

	.plate-section {
		border-bottom: 1px solid #ddd;
		padding-bottom: 10px;
		margin-bottom: 15px;
	}

	.plate-section:last-child {
		border-bottom: none;
	}

	/* Section Titles */
	.plate-title {
		font-weight: bold;
		margin-bottom: 5px;
		color: #333;
	}

	.plate-button button {
		border-radius: 10px;
		padding: 3px;
		font-size: 12px;			
		transition: transform 0.2s, background-color 0.3s;
	}

	.plate-stroke-button button {
		height: 25px;
		width: 25px;
		border-radius: 5px;
	}
	
	.dropdown-color-button {
		display: flex; /* Makes the button a flex container */
		justify-content: center; /* Center horizontally */
		align-items: center;
		height: 30px;
		width: 30px;
		border-radius: 5px;
		background-color: #ffffff;
	}
	
	.dropdown-color-button svg {
		display: block; /* Ensures SVG takes its intrinsic size without extra spacing */
		margin: auto; /* Center the SVG within its container */
	}

	.plate-button button.uk-button-default {
		background-color: #f1f3f6;
		color: #4e5a6a;
		border: none;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	}

	.plate-button button.uk-button-default:hover {
		background-color: #d0d9e3;
		transform: translateY(-2px);
	}

	.plate-button button.uk-button-default:active {
		background-color: #a0b5d4;
		transform: translateY(0);
	}

	/* Scrollbar Styling */
	.pad-toolplate::-webkit-scrollbar,
	textarea::-webkit-scrollbar	{
		width: 8px;
	}
	.pad-toolplate::-webkit-scrollbar-thumb,
	textarea::-webkit-scrollbar-thumb {
		background-color: #888;
		border-radius: 8px;
	}
	.pad-toolplate::-webkit-scrollbar-thumb:hover
	textarea::-webkit-scrollbar-thumb:hover	{
		background-color: #555;
	}

	.plate-input-range {
		-webkit-appearance: none;
		appearance: none;
		width: 120px;
		height: 8px;
		background: linear-gradient(to right, #1e87f0 0%, #1e87f0 50%, #dcdcdc 50%, #dcdcdc 100%);
		border-radius: 5px;
		outline: none;
		transition: background 0.3s;
	}

	/* Thumb styling */
	.plate-input-range::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 16px;
		height: 16px;
		background: #1e87f0;
		border-radius: 50%;
		border: 2px solid white;
		cursor: pointer;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		transition: transform 0.2s;
	}

	.plate-input-range::-webkit-slider-thumb:hover {
		transform: scale(1.2);
	}

	.plate-input-range::-moz-range-thumb {
		width: 16px;
		height: 16px;
		background: #1e87f0;
		border-radius: 50%;
		border: 2px solid white;
		cursor: pointer;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		transition: transform 0.2s;
	}

	.plate-input-range::-moz-range-thumb:hover {
		transform: scale(1.2);
	}
	
	textarea::placeholder {
		white-space: pre-line; /* Preserve line breaks in the placeholder */
		line-height: 1.5;      /* Adjust line spacing for readability */
		color: #888;           /* Subtle placeholder color */
		font-size: 12px;
		font-style: italic;    /* Optional: italicized text for better distinction */
	}
	input[type='url']::placeholder {
		font-size: 12px;
		font-style: italic;
	}

	#floatCanvasContainer {
		position: fixed !important;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
		z-index: 9999;
		pointer-events: none;
	}
	#floatCanvas {
		position: absolute !important;
		border: 3px solid #007acc;
		background-color: #e0e0e0;
		display: none;
		box-shadow: 0 10px 30px rgba(0,0,0,0.3);
		border-radius: 8px;
		pointer-events: auto;
	}