#canvas-container {
    border: 1px solid #ccc; /* Optional: Add a visible border */
    margin: 10px auto; /* Center the container horizontally */
    width: 100%; /* Make the container responsive */
    max-width: 500px; /* Limit the container's maximum width */
    aspect-ratio: 1; /* Ensure the container maintains a square ratio */
    overflow: hidden; /* Prevent content overflow */
    box-sizing: border-box; /* Include padding and border in size calculations */
    position: relative; /* Required for proper canvas alignment */
}

canvas {
    display: block; /* Prevent inline-block whitespace */
    width: 100%; /* Scale the canvas to fully occupy the container width */
    height: 100%; /* Scale the canvas height to match the container */
    margin: 0; /* Remove any default margin */
    padding: 0; /* Remove any default padding */
    box-sizing: border-box; /* Include padding and border in size calculations */
    position: absolute; /* Ensure the canvas aligns perfectly within the container */
    left: 0; /* Align the canvas to the left edge */
    top: 0; /* Align the canvas to the top edge */
    touch-action: manipulation; /* Allow touch gestures like pinch-zoom */
    user-select: none; /* Prevent text selection */
}


.toggle-container{
    display: flex; /* Enable Flexbox */
    justify-content: space-between; /* Space between buttons */
    align-items: left; /* Vertically align items */
    width: 100%; /* Full width of the container */
    box-sizing: border-box; /* Include padding/border in width calculation */
}

/* Style the Select2 container */
.select2-container--default .select2-selection--single {
    background-color: #f4f4f4 !important; /* Background color */
    border: 1px solid #f4f4f4 !important; /* Border styling */
    color: #000000 !important; /* Text color */
    font-family: "Press Start 2P", serif !important; /* Font family */
    font-size: 10px !important; /* Font size */
    height: 35px !important; /* Fixed height */
    display: flex !important; /* Use flexbox for alignment */
    align-items: center !important; /* Vertically align text */
    padding: 0 10px !important; /* Horizontal padding for spacing */
    box-sizing: border-box !important;
    text-align: center !important; /* Center align text */
    position: relative; /* Required for custom arrow */
}

/* Remove default Select2 arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none !important;
}

/* Add a custom dropdown arrow */
.select2-container--default .select2-selection--single::after {
    content: "▼"; /* Dropdown arrow */
    font-size: 12px; /* Arrow size */
    color: black; /* Arrow color */
    position: absolute; /* Position the arrow */
    right: 10px; /* Adjust position from the right */
    top: 50%; /* Position vertically at the center */
    transform: translateY(-50%); /* Center arrow vertically */
    pointer-events: none; /* Prevent interaction with the arrow */
}

/* Ensure selected value text is perfectly aligned */
.select2-container--default .select2-selection__rendered {
    margin: 0 !important; /* Remove any default margins */
    padding: 0 !important; /* Adjust padding */
    display: flex !important; /* Flexbox for alignment */
    align-items: center !important; /* Center text vertically */
    justify-content: center !important; /* Center text horizontally */
    height: 100% !important; /* Full height to align properly */
    line-height: normal !important; /* Reset line-height for proper alignment */
    text-align: center !important; /* Ensure horizontal centering */
}

/* Style dropdown menu */
.select2-container--default .select2-dropdown {
    background-color: #f4f4f4 !important; /* Dropdown background */
    border: 1px solid #000 !important; /* Border for dropdown */
    font-family: "Press Start 2P", serif !important; /* Consistent font */
    font-size: 10px !important; /* Font size for dropdown options */
    text-align: center !important; /* Center dropdown options */
}

/* Style dropdown options */
.select2-container--default .select2-results__option {
    color: #000000 !important; /* Option text color */
    font-size: 10px !important; /* Font size for options */
    padding: 10px !important; /* Add padding inside options */
    text-align: center !important; /* Center align options */
    cursor: pointer; /* Pointer cursor for options */
}

/* Highlight the selected option */
.select2-container--default .select2-results__option--selected {
    background-color: #000000 !important; /* Background for selected option */
    color: #f4f4f4 !important; /* Text color for selected option */
}

/* Hover effect for options */
.select2-container--default .select2-results__option--highlighted {
    background-color: #555555 !important; /* Background on hover */
    color: white !important; /* Text color on hover */
}

/* Style the 'x' mark (clear button) */
.select2-container--default .select2-selection__clear {
    background-color: red !important; /* Red background for clear button */
    color: white !important; /* White text for contrast */
    padding: 2px 6px !important; /* Adjust padding */
    font-size: 12px !important; /* Adjust size */
    position: relative; /* Position adjustment */
    top: -1px; /* Center align the button */
    margin-left: 5px;
    margin-right: 5px; /* Add some spacing from the text */
    cursor: pointer; /* Show pointer cursor */
}