<vbox class="Form">
    <style>
        .CellContainer {
            position: relative;
            box-sizing: border-box;
            background-image: linear-gradient(to bottom, #D0D0D0 0px, #FFFFFF 100%);
            background-repeat: repeat-x;
        }
        @xCellContainer {
            height: 1.5em;
            margin-left: 1.5em;
        }
        @yCellContainer {
            width: 1.5em;
            background-image: linear-gradient(to right, #D0D0D0 0px, #FFFFFF 100%);
            background-repeat: repeat-y;
        }
        .CellContainer > .Cell {
            position: absolute;
            background: @selected_bg;
            opacity: 0.5;
            cursor: move;
        }
        .CellContainer > .Cell:hover {
            opacity: 0.7;
        }
        .CellContainer > .Cell:active {
            opacity: 1;
        }
        .CellContainer > .Cell > .Resizer {
            position: absolute;
            opacity: 0;
            cursor: ew-resize;
        }
        .CellContainer > .Cell:hover > .Resizer {
            z-index: 999999;
        }
        @xCellContainer > .Cell > .Resizer {
            top: 0px;
            bottom: 0px;
            width: 0.5em;
        }
        @xCellContainer > .Cell > .StartResizer {
            left: -0.25em;
        }
        @xCellContainer > .Cell > .EndResizer {
            right: -0.25em;
        }
        @yCellContainer > .Cell > .Resizer {
            left: 0px;
            right: 0px;
            height: 0.5em;
            cursor: ns-resize;
        }
        @yCellContainer > .Cell > .StartResizer {
            top: -0.25em;
        }
        @yCellContainer > .Cell > .EndResizer {
            bottom: -0.25em;
        }
        @xCellContainer > .Cell {
            top: 0px;
            bottom: 0px;
        }
        @yCellContainer > .Cell {
            left: 0px;
            right: 0px;
        }

        .CellContainer > .Cell > .Indicator {
            position: absolute;
            background: @selected_bg;
            opacity: 0.2;
            cursor: default;
        }

        .CellContainer > .Cell > .XCellInfo {
            align-items: center;
            justify-content: center;
            text-align: center;
            height: 1.5em;
        }
        .CellContainer > .Cell > .YCellInfo {
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 1.5em;
        }
        .CellContainer > .Cell > .XCellInfo > .Info {
            margin-top: 0.25em;
        }
        .CellContainer > .Cell > .YCellInfo > .Info {
            margin-left: 0.25em;
        }
        @xCellContainer > .Cell > .Indicator {
            top: 1.5em;
            left: 0px;
            right: 0px;
        }
        @xCellContainer > .Cell > .Indicator {
            top: 1.5em;
            left: 0px;
            right: 0px;
        }
        @yCellContainer > .Cell > .Indicator {
            top: 0px;
            left: 1.5em;
            bottom: 0px;
        }

        @container {
            align-items: center;
            justify-content: center;
            margin-bottom: 1ex;
        }
        @container[dark='true'] {
            background: #555;
        }
        @container > * {
            /* background: rgba(0, 0, 0, 0.2); */
            padding-right: 0em;
            padding-bottom: 0em;
        }
        @image {
            box-shadow: 0em 0em 0.8em rgba(0, 0, 0, 0.2);
        }
    </style>
    <div anon-id="container">
         <vbox>
             <vbox>
                 <div anon-id="xCellContainer" class="CellContainer" flex="1"></div>
             </vbox>
             <hbox>
                <div anon-id="yCellContainer" class="CellContainer"></div>
                <img anon-id="image" />
            </hbox>
       </vbox>
   </div>
   <hbox><input anon-id="useDarkBackgroundCheckbox" type="checkbox" /><label for="useDarkBackgroundCheckbox">Use dark background</label></hbox>
</vbox>
