* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    /* on iOS/Safari remove the tap highlight */
    -webkit-tap-highlight-color: transparent;
}

#main-grid {
    display: grid;
    height: 100vh;
    width: 100vw;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 14% 43% 43%;
    grid-template-areas:
        "controls add-thousands add-hundreds add-tens add-ones"
        "controls thousands-red-dropzone hundreds-red-dropzone tens-red-dropzone ones-red-dropzone"
        "controls thousands-blue-dropzone hundreds-blue-dropzone tens-blue-dropzone ones-blue-dropzone";
    gap: 0;
    padding: 0;
    background: #222;
    color: #000000;
}

#controls {
    grid-area: controls;
}

#add-thousands {
    grid-area: add-thousands;
}

#add-hundreds {
    grid-area: add-hundreds;
}

#add-tens {
    grid-area: add-tens;
}

#add-ones {
    grid-area: add-ones;
}

#thousands-red-dropzone {
    grid-area: thousands-red-dropzone;
}

#hundreds-red-dropzone {
    grid-area: hundreds-red-dropzone;
}

#tens-red-dropzone {
    grid-area: tens-red-dropzone;
}

#ones-red-dropzone {
    grid-area: ones-red-dropzone;
}

#thousands-blue-dropzone {
    grid-area: thousands-blue-dropzone;
}

#hundreds-blue-dropzone {
    grid-area: hundreds-blue-dropzone;
}

#tens-blue-dropzone {
    grid-area: tens-blue-dropzone;
}

#ones-blue-dropzone {
    grid-area: ones-blue-dropzone;
}

.top-cell {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    height: 100%;
    border: solid 3px #000000;
    border-top: solid 6px #000000;
}

.top-cell-last {
    border-right: solid 6px #000000;
}

.subcell {
    background: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    border-radius: 0;
    padding: 6px;
    overflow: hidden;
}

.cell {
    background: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    font-size: .9rem;
    padding: 6px;
    border: solid 3px #000000;

    position: relative;
    /* new: needed so children can be absolute without affecting layout */
    overflow: hidden;
    /* optional: keep floats from escaping */
}

.cell-last {
    border-right: solid 6px #000000;
}

.cell-middle {
    border-bottom: dashed 3px #afafaf;
}


.cell-bottom {
    border-top: dashed 3px #afafaf;
    border-bottom: solid 6px #000000;
}

#controls {
    background: #d6d6d6;
    color: #000;
    display: grid;
    grid-template-rows: min-content min-content 1fr;
    /* button, button, then problem takes remaining space */
    row-gap: 8px;
    padding: 8px;
    font-weight: bold;

    border-top: 6px solid #000;
    border-right: 3px solid #000;
    border-bottom: 6px solid #000;
    border-left: 6px solid #000;
}

#controls>button {
    width: 100%;
    padding: 8px;
    font-size: 1rem;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.add-icon {
    display: block;
    max-height: 100%;
    width: auto;
    padding: 7px;
    box-sizing: border-box;
}

.red-bkg {
    background: #e2d2d4;
}

.blue-bkg {
    background: #d7e9eb;
}

.border-left {
    border-left: 2px solid #000000;
}

.floating-block {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    cursor: grab;
    z-index: 10;
    touch-action: none;
    /* for pointer events */
    display: inline-flex;
}

.floating-block.dragging {
    cursor: grabbing;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3));
}

.floating-block img {
    display: block;
    max-height: 100%;
    width: auto;
    pointer-events: none;
    /* let wrapper handle pointer */
}

.clickable {
    cursor: pointer;
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    /* on iOS/Safari remove the tap highlight */
    -webkit-tap-highlight-color: transparent;
}

#problem {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    /* Aligns content to the baseline */
    border-collapse: collapse;
    /* Collapses adjacent borders into a single border */
    border-spacing: 0;
    /* Removes spacing between table cells */
    font-size: 50px;
    line-height: 50px;
    height: 150px;
    width: 175px;
    justify-self: center;
    /* horizontal centering in its grid cell */
    align-self: center;
    /* vertical centering in its grid cell */
    text-align: right;
}

#problem td {
    min-width: 35px;
}

tr.difference {
    border-top: solid 3px #000000;
}