/* -------------------------------------- */
/* ----- ominos_layout.css 20251213 ----- */
/* -------------------------------------- */

.centered {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.stopmodal-content {
  background-color:rgba(226,236,247,1.0);
  color: black;
  margin: auto;
  padding: 10px;
  text-align: left;
  border: 1px solid #888;
  width: 80%;
  height: 80%;
}


.piclabel { 
  position: absolute; 
  top:  0px; 
  left: 0px;
  min-width: 1vw;
  min-height: 1vw;
  max-height: 1vw;
  border: 1px solid black;
  font-size: 8px;
  font-weight: bold;
  text-align: center;
}
.tilecontainer {
}

.tilegridcel {
}

.tile {
	width:100%;
	height:100%;
	border:1px solid blue;
	//border-radius:12px;
}
.yesnobutton {
  float: left;
  margin:0px 5px 0px 5px;
  background-color:blue;
  border: 1px solid white;
  border-radius:10px;
  color: white;
  padding:10px 0px 0px 0px;
  height: 40px;
  width: 6.25vw;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;	
}

.yesnobutton:hover, .yesnobutton:focus {
  background-color: #0099ff;
  color: white;
}	
	

	
/* ----- GRID ----- ----- ----- ----- ----- ----- ----- ----- ----- */
.grid {
  display: grid;
  grid-template-columns: repeat(16, [col] 1fr);
  grid-template-rows: repeat(20, [row] auto);
  grid-column-gap: 0px; /* grid-column-gap: 0.5em; */
  grid-row-gap: 0px; /* 0.5em;*/
}
.grid__item {
  text-align: center; 
  border: 0px solid #a9c5e7;
  font-size: 12px;
}

/* ----- header ----- */
.grid__item_item100 {grid-column: col 1/span 16;grid-row:row 1 /span 2;}

/* ----- navbar ----- */
.grid__item_item500 {grid-column: col 1/span 16;grid-row:row 3 /span 1;}

/* ----- menu ----- */
.grid__item_item502 {grid-column: col 2/span 1;grid-row:row 3;}
/* ----- messagebox ----- */
.grid__item_item503 {grid-column: col 3/span 9;grid-row:row 3;}
/* ----- check button ----- */
.grid__item_item504 {grid-column: col 14/span 1;grid-row:row 3;}
/* ----- info button ----- */
.grid__item_item505 {grid-column: col 13/span 1;grid-row:row 3;}
/* ----- stop button ----- */
.grid__item_item506 {grid-column: col 15/span 1;grid-row:row 3;}
/* ----- solve button ----- */
/* .grid__item_item507 {grid-column: col 14/span 1;grid-row:row 5;} */
/* ----- back button ----- */
.grid__item_item508 {grid-column: col 16/span 1;grid-row:row 3;}
/* ----- exp button ----- */
/* .grid__item_item509 {grid-column: col 15/span 1;grid-row:row 5;} */

/* ----- blance tussenregel -------------------------------------- ----- */
.grid__item_item600 {grid-column: col 1/span 16;grid-row:row 6;}

/* ---- pics regel 1 ----- */
.grid__item_item701 {grid-column: col 2 /span 2;grid-row: row 7;}
.grid__item_item702 {grid-column: col 4 /span 2;grid-row: row 7;}
.grid__item_item703 {grid-column: col 6 /span 2;grid-row: row 7;}

/* ---- pics regel 2 ----- */
.grid__item_item801 {grid-column: col 2 /span 2;grid-row: row 8;}
.grid__item_item802 {grid-column: col 4 /span 2;grid-row: row 8;}
.grid__item_item803 {grid-column: col 6 /span 2;grid-row: row 8;}

/* ---- pics regel 3 ----- */
.grid__item_item901 {grid-column: col 2 /span 2;grid-row: row 9;}
.grid__item_item902 {grid-column: col 4 /span 2;grid-row: row 9;}
.grid__item_item903 {grid-column: col 6 /span 2;grid-row: row 9;}

/* ----- bottom line --------------------------------------------- ----- */
.grid__item_item1601 {grid-column: col 1 /span 16;grid-row: row 16 /span 1;}

/* ----- textvak1 ----- */
.grid__item_item1700 {grid-column: col 9 /span 1;grid-row: row 7 /span 3;}

/* ----- textvak2 ----- */
.grid__item_item1701 {grid-column: col 10 /span 4;grid-row: row 7 /span 3;}

/* ----- textvak3 ----- */
.grid__item_item1702 {grid-column: col 9 /span 6;grid-row: row 9 /span 1;}