.cw {
    flex: 1 1 auto;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
}

.cw-grid {
    flex: 1 1 0;
    border: 1px solid #000;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.cw-grid-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}

.cw-grid-cell {
    height: 60px;
    width: 60px;
    border: 1px solid #000;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.cw-grid-cell.cw-grid-cell-block {
    background: black;
}

.cw-grid-cell.cw-grid-cell-input {}

.cw-grid-cell.cw-grid-cell-input.subactive {
    background: #bbf;
}

.cw-grid-cell.cw-grid-cell-input.active {
    background: #ff0;
}

.cw-grid-cell.cw-grid-cell-input .cw-grid-cell-number-wrapper {
    position: relative;
    height: 0;
}

.cw-grid-cell.cw-grid-cell-input .cw-grid-cell-number-wrapper .cw-grid-cell-number {
    position: absolute;
    left: 3px;
    font-size: 14px;
}

.cw-grid-cell.cw-grid-cell-input .cw-grid-cell-text {
    padding-top: 11px;
    font-size: 36px;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
}

.cw-clues {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.cw-clues .cw-header {
    padding: .5rem 0;
    font-weight: bold;
}

.cw-clues .cw-clue {
    padding: .25rem .5rem;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}

.cw-clues .cw-clue.active {
    background: #ff0;
}

.cw-clues .cw-clue .cw-clue-number {
    flex: 0 0 24px;
    font-weight: bold;
}

.cw-clues .cw-clue .cw-clue-text {}