/* sudoku style sheet  */
body {
    font-family: 'PT Sans', sans-serif;
    font-size: 14px;
    color: #0C3E06;
    height: 100%;
	background-color: #e9ecef;
    overflow-x: hidden;
    overflow-y: auto;
	padding: 8px;
	padding-top: 80px;
}

h1, .h1 {color: #0C3E06;font-size: 2.5rem;}
h2, .h2 {color: #0C3E06;font-size: 2rem;}
h3, .h3 {color: #0C3E06;font-size: 1.75rem;}
h4, .h4 {color: #0C3E06;font-size: 1.5rem;}
h5, .h5 {color: #0C3E06;font-size: 1.25rem;}
h6, .h6 {color: #0C3E06;font-size: 1rem;font-weight: bold}

@media (max-width: 576px) { /* change default font size */
    body {
        font-size: 11px;
    }
    .alert {
        font-size: 14px;
    }
}
.cell, .cell2, .cell3 {
	width: 60px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center; 
	font-size: 60px;
	background: #e6ffff;
	color: blue;
}

.cell4 {
	width: 60px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center; 
	font-size: 20px;
	background: #e6ffff;
	color: blue;
}

.cgreen {
	font-size: 40px;
	color: green;
}

 .cell.focus {
	background: white;
 }
 
 .cell2.focus, .cell3.focus {
	 background: lightgreen;
}
 
.cell.option, .cell2.option {
	font-size: 24px;
	color: blue;
}

.cell.option.underline, .cell2.option.underline {
	text-decoration: underline;
}

.cell.fixed {
	color: black;
}

.cell.error {
	color: red;
}
.flex-container {
  display: flex;
  width: 60px;
  height: 60px;
  padding: 0px;
  margin: 0px; 
  flex-wrap: wrap;
  align-content: center;
  overflow: hidden;  
  
}

.flex-container > div {
  width: 20px;
  height: 20px;
  text-align: center;
  font-size: 17px;
}
.cell.connected {
	background: lightgreen;
}
.highlight {
	background: lightgreen;
}
.sudokuStatus {
	color: blue;
	font-size: 16px;
}