body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            padding: 20px;
            margin: 0;
        }

        h1, h2 {
            text-align: center;
            color: #333;
        }

        header {
            display: flex;
            align-items: center;
            padding: 10px 20px;
            margin-bottom: 10px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        /* Container for the top section */
        #topSection {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20px;
        }

        /* Left container for configuration data */
        #configContainer {
            width: 30%;
            margin-right: 20px;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        /* Center container for the canvas */
        #canvasContainer {
            width: 70%;
            display: flex;
            flex-direction: column;
            align-items: center; /* Centers child elements horizontally */
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        /* Style the canvas */
        #wallCanvas2D {
            border: none;
            max-width: 100%;
            height: auto;
            margin-bottom: 10px;
        }

        /* Style for Wall Dimensions without border and background */
        #wallDimensions {
            margin-bottom: 15px;
            padding: 10px 15px;
            background-color: transparent; /* No background */
            border: none;                   /* No border */
            font-size: 1.1em;
            color: #333;
            display: flex;
            align-items: center;
        }

        /* Optional: Remove icon if not needed */
        #wallDimensions i {
            display: none; /* Hides the icon */
        }

        #rentexLogo {
            height: 60px; /* Adjust the height as needed */
            width: auto;  
            margin-right: 20px;
        }

        /* Total Weight and Power Display */
        #totalWeight, #totalPower {
            margin-top: 10px;
            font-weight: bold;
            font-size: 1.2em;
        }

        /* Updated #totalPower to align left */
        #totalPower {
            align-self: flex-start; /* Aligns to the start (left) */
            text-align: left;       /* Ensures text is left-aligned */
            width: 100%;            /* Takes full width of the container */
            box-sizing: border-box; /* Includes padding and border in width */
            margin-top: 10px;       /* Optional spacing */
        }

        /* Equipment table styling */
        #equipmentTable {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        #equipmentTable th, #equipmentTable td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        #equipmentTable th {
            background-color: #f2f2f2;
        }

        #equipmentTable tbody tr:nth-child(odd) {
            background-color: #ffe6e6;
        }

        #equipmentTable tbody tr.excluded {
            background-color: #f9f9f9 !important;
        }

        /* Style for the controls */
        #controls {
            margin-top: 20px;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        /* Style for buttons */
        button {
            padding: 10px 15px;
            margin-top: 10px;
            margin-right: 5px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
        }

        button:hover {
            background-color: #45a049;
        }

        /* Responsive Design */
        @media (max-width: 800px) {
            #topSection {
                flex-direction: column;
            }

            #configContainer, #canvasContainer {
                width: 100%;
                margin-right: 0;
                margin-bottom: 20px;
            }

            #wallDimensions {
                font-size: 1em;
                padding: 8px 12px;
            }
        }

        label {
            display: inline-block;
            width: 180px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        input[type="number"],
        select {
            width: 150px;
            padding: 5px;
            margin-bottom: 15px;
        }

        /* Additional styling for radio buttons */
        .radio-group {
            margin-bottom: 15px;
            align-items: center;   /* Vertically align items */
        }

        .radio-group label {
            width: auto;
            font-weight: normal;
            margin-right: 10px;
        }

        /* Hide Dimension Inputs by default */
        #dimensionInputs {
            display: none;
        }

        /* New styles for dimension inputs */
        .input-group {
            margin-bottom: 15px;
        }
        .input-group label {
            margin-right: 15px;
        }

        .warning {
            color: red;
            font-weight: bold;
            margin-top: 5px;
            display: block;
        }
        #popularFormatsDropdown {
            margin-bottom: 15px;
        }

        #popularFormatsDropdown label {
            display: block;
            margin-bottom: 5px;
        }

        #aspectRatio {
            width: 100%;
            padding: 5px;
            margin-bottom: 10px;
        }

        #screenSizeDropdown {
            margin-top: 15px;
        }

        #screenSizeDropdown label {
            display: block;
            margin-bottom: 5px;
        }

        #screenSize {
            width: 100%;
            padding: 5px;
            margin-bottom: 10px;
        }