.locksquare {
    font-weight:bold;
    display:inline-block;
    width:40px;
    length:40px;
    display:none;
}
.gamesquare {
    color:white;
    display:inline-block;
    background-color:grey;
    position:relative;
    
}

.gamesquare {
	display:none;
	position:absolute;
    	top:-60px:
    	left:-10px:
    	height:38px;
    	width:50px;
    	line-height:38px;
    	font-size:38px;
} 

.dlocksquare {
color:blue;
}

.dlocksquare, .dgamesquare {
	height:40px;
	width:40px;
	line-height:40px;
	font-size:32px;
	vertical-align:middle;
	text-align:center;
}
.dgamesquare:hover {
	background-color:lightblue;
}

.mask {
    color:red;
}

.input {
  text-align:center;
  vertical-align:middle;
  border: 0px solid black;
  height:37px;
  width:37px;
  margin:auto;
}

#sudokudiv {
  width:380px;
  margin:auto;
}

.grid-container {
  width:380px;
  height:380px;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto;
  padding: 0px;
  border: 2px solid black;
  background-color:white;
}

.grid-container > div {
  border: 1px solid grey;
  text-align:center;
}


.grid-container > div:nth-child(3),
.grid-container > div:nth-child(6),
.grid-container > div:nth-child(12),
.grid-container > div:nth-child(15),
.grid-container > div:nth-child(21),
.grid-container > div:nth-child(24),
.grid-container > div:nth-child(30),
.grid-container > div:nth-child(33),
.grid-container > div:nth-child(39),
.grid-container > div:nth-child(42),
.grid-container > div:nth-child(48),
.grid-container > div:nth-child(51),
.grid-container > div:nth-child(57),
.grid-container > div:nth-child(60),
.grid-container > div:nth-child(66),
.grid-container > div:nth-child(69),
.grid-container > div:nth-child(75),
.grid-container > div:nth-child(78)
{
  border-right: 2px solid black;
}
.grid-container > div:nth-child(19),
.grid-container > div:nth-child(20),
.grid-container > div:nth-child(21),
.grid-container > div:nth-child(22),
.grid-container > div:nth-child(23),
.grid-container > div:nth-child(24),
.grid-container > div:nth-child(25),
.grid-container > div:nth-child(26),
.grid-container > div:nth-child(27),
.grid-container > div:nth-child(46),
.grid-container > div:nth-child(47),
.grid-container > div:nth-child(48),
.grid-container > div:nth-child(49),
.grid-container > div:nth-child(50),
.grid-container > div:nth-child(51),
.grid-container > div:nth-child(52),
.grid-container > div:nth-child(53),
.grid-container > div:nth-child(54)
{
    border-bottom: 2px solid black;
}

.xgrid-item {
  text-align: center;
  height:500px;
  padding: 20px;
  font-size: 30px;
  aspect-ratio:1/1;  
  color:orange;
}



.xgamesquare, .xlocksquare {
    display:none;
    position: fixed;
    top: 30vh;
    left: 30vw;
    width: 40vw;
    height: 40vh;
    	line-height:40vh;
	font-size:35vh;
    
}