h1 {
		color: #FFFFFF;
}
A:ACTIVE, A:LINK, A:VISITED {
		Color: #ffffff;
		Text-Decoration: none;
}
A:HOVER {
		Color: #000000;
		Background-Color: #ACACAC;
		Text-Decoration: none;
}
table {
		border: 3px solid #000000; 
		width: 98%;
		border-collapse: collapse;
		margin: 20px;
		font-size: 16px;
		text-align: left;
		background-color: #313131;
}
th, td {
		border: 1px solid #4A4A4A;
		margin: 0px;
		padding: 0px;
}
th {
		background-color: #4A4A4A;
		font-weight: bold;
		margin: 0px;
		padding: 10px;
}

canvas {
		border: 1px solid #ccc;
		cursor: grab;
		display: block;
		margin: 20px auto;
		max-width: 100%;
		touch-action: none; /* Prevent default touch behaviors */
}
.section {
		background: #333333;
		padding: 5px;
		margin: 10px 0;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
label {
		text-align: right;
		margin-left: 5px;
		margin-right: 5px;
		font-weight: bold;
		color: #B1B1B1;
}
input, select, textarea {
		margin: 1px 0;
		padding: 1px;
		border-radius: 4px;
		border: 1px solid #ddd;
}
button {
		padding: 5px 5px;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		margin: 5px;
}

button:hover {
		background-color: #0056b3;
}
.controls {
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
}


@media (max-width: 600px) {
		.controls {
				flex-direction: column;
		}
}


/* Media Query for very small screens (max-width: 400px) */
@media (max-width: 400px) {
	main {
			padding: 0px;
			padding-right: 30px;
	}
	button {
			padding: 1px 1px;
			/*background-color: #26A200;*/
			margin: 1px;
	}
}

.slider-container {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    cursor: grab; /* Default cursor for draggable area */
}

.slider-container:active {
    cursor: grabbing; /* Cursor when dragging */
}

.thumbnail {
    display: inline-block;
    margin-right: 5px;
    width: 160px;
    height: 90px;
    object-fit: cover;
    cursor: pointer;
}

.hidden {
    display: none;
}