html {
	--cell-size: 20px;
	--marker: calc(var(--cell-size) - 6px);
	--cell-mar: 2px;
}

.input-col,
.input-row {
	display: inline-block;
	margin: 0 0 var(--cell-mar) var(--cell-mar);
	width: var(--marker);
	height: var(--marker);
	border: 2px solid grey;
	border-radius: 3px;
}
.input-col:focus,
.input-row:focus {
	box-shadow: 0 0 4px 2px orange;
}
.input-col[checked="true"],
.input-row[checked="true"] {
	border-radius: 50%;
	border-color: orange;
}
.input-row {
	margin-right: var(--cell-mar);
}

.row {
	display: block;
	line-height: 0;
}
.row:first-child {
  margin-left: calc(var(--cell-size) + var(--cell-mar));
}

.cell {
	display: inline-block;
	width: var(--cell-size);
	height: var(--cell-size);
	background-color: #fff;
}