html{
	--inner-size: max(
        160px,
        min(
          400px,
          calc(100vw / 2.25),
          max(
            calc(100vh / (6 / 5 * 2.25)),
            calc(100vw / 4.5)
          )
        )
      );
    --bx-width: calc( var(--inner-size) / 5 - (4px / 5) );
	--inner-border-width: calc(.0025 * var(--inner-size) );
	--outer-border-width: calc(15 / 400 * var(--inner-size));
	--webkit-print-color-adjust: exact;
	         print-color-adjust: exact;
    
    -webkit-touch-callout: text;
	  -webkit-user-select: text; 
	   -khtml-user-select: text; 
	     -moz-user-select: text; 
	      -ms-user-select: text;
	          user-select: text; 
	

  }
  .grid-container {
    font-family: 'Open Sans', Helvetica, Arial sans-serif;
    font-weight: 700;
    
    display: inline-grid;
    grid-template-columns: repeat(5, var(--bx-width));
    grid-template-rows: repeat(6, var(--bx-width));
    grid-template-areas: 'B I N G O' 'B0 I0 N0 G0 O0' 'B1 I1 N1 G1 O1' 'B2 I2 FREE G2 O2' 'B3 I3 N2 G3 O3' 'B4 I4 N3 G4 O4';
	
	background: var(--inner-bg);
	color: var(--text-color);
    
  
  }
  
svg{
  height: calc( 1.5 * var(--bx-width) );
}

.bx{
	font-size: calc( var(--bx-width) * .5 );
	line-height: calc( var(--bx-width) - calc(.005 * var(--inner-size) ) );
	background-color: #fff;
	outline: 2px solid var(--inner-border-color);
	position: relative;
	isolation: isolate;

	
	
	/*border: var(--inner-border-width) solid var(--inner-border-color);*/
	text-align: center;
  
  	-webkit-touch-callout: none;
	  -webkit-user-select: none; 
	   -khtml-user-select: none; 
	     -moz-user-select: none; 
	      -ms-user-select: none;
	          user-select: none; 
}
.bx.active{
	cursor: default;
}
.bx.active.FREE{
	color: #000;
}
.bx::before{
	display: block;
	content: "";
	inset: 0;
	margin: auto;
	border-radius: 100%;
	width: 77%;
	width: 71%;
	aspect-ratio: 1;
	position: absolute;
	z-index: -1;
	/*outline: 2px solid black/*#959495*/;
}
.bx.active::before{
	background-color: #ee960066;
}
.bx{
	cursor: pointer;
	&:focus-visible::before{
		outline: 2px solid black;
		outline-offset: 4px;
	}
}
  
.grid-container{
	border: var(--outer-border-width) solid var(--outer-border-color);
	border-top-width: 0px;
	border-radius: 10px;
	background-color: var(--outer-border-color);
}

.B, .I, .N, .G, .O {
	font-size: calc( var(--inner-size) * .13 );
	border: none;
  	font-family:  'Open Sans', Helvetica, Arial sans-serif; 
	background: var(--outer-border-color);
	color: var(--bingo-color) !important;
	outline: none;
	border-radius: 20px;
	cursor: default;
}

.left{
	border-left: none;
}

.top{
	border-top:none;
}

.right{
	border-right: none;
}

.bottom{
	border-bottom-width: calc( 2 * var(--inner-border-width));
}

.FREE { 
	font-size: calc( var(--bx-width) * .3 );
	color: var(--free-text-color);
	background: var(--free-bg);
}

.cards{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--outer-border-width);
	margin: var(--outer-border-width);
	position: relative;
}
.cards-wrapper{
	display: grid;
	place-items: center;
	min-width: 100%;
	min-height: 100vh;
}

.bottom-cards{
	display: flex;
	gap: var(--outer-border-width);
}

.new-cards{
	font-weight: 700;
	font-family: "Open Sans", Helvetica, Arial;
	font-size: 20px;
	flex-shrink: 0;
	width: calc(2 * var(--inner-size) + (7 * var(--outer-border-width)));
	text-align: center;
	-webkit-touch-callout: none;
	  -webkit-user-select: none; 
	   -khtml-user-select: none; 
	     -moz-user-select: none; 
	      -ms-user-select: none;
	          user-select: none; 

	a{
		background-color: #000;
		color: white;
		padding: 4px 15px;
		text-decoration: none;
		margin: auto;
		margin-top: 0px;
		border-radius: 20px;
		display: block;
		width: fit-content;
	}

	&:hover{
		opacity: .8;
	}
	a:focus-visible{
		outline: 2px solid black;
		outline-offset: 4px;
	}

}

.below-calls{
	font-weight: 700;
	font-family: "Open Sans", Helvetica, Arial;
	font-size: 20px;
	flex-shrink: 0;
	/*width: calc(2 * var(--inner-size) + (7 * var(--outer-border-width)));*/
	button{
		background-color: #000;
		color: white;
		font-family: "Open Sans", Helvetica, Arial;
		font-weight: 700;
	font-size: 20px;
	flex-shrink: 0;
		padding: 4px 15px;
		height: 36px;
		text-decoration: none;
		margin: auto;
		margin-top: 15px;
		border-radius: 20px;
		display: block;
		width: fit-content;
		border: none;
		cursor: pointer;
		&:hover{
			opacity: .8;
		}
		&:focus-visible{
			outline: 2px solid black;
			outline-offset: 4px;
		}
	}
	button.reset{
		background-color: #e00;
		margin-bottom: 15px;
		font-weight: 700;
	}

	
}

#confirm-reset{
	font-family: "Open Sans", Helvetica, Arial;
	font-size: 20px;
	font-weight: bold;
	text-align: center;

	.dialog-cancel{
		color: white;
		background-color: black;
		height: 36px;
		border-radius: 36px;
		padding: 4px 15px;
		font-size: 20px;
		font-weight: bold;
		border: none;
		cursor: pointer;
		&:hover{
			opacity: .8;
		}
		&:focus-visible{
			outline: 2px solid black;
			outline-offset: 4px;
		}
	}
	.dialog-confirm{
		color: white;
		background-color: #e00;
		height: 36px;
		border-radius: 36px;
		padding: 4px 15px;
		font-size: 20px;
		font-weight: bold;
		border: none;
		cursor: pointer;
		&:hover{
			opacity: .8;
		}
		&:focus-visible{
			outline: 2px solid black;
			outline-offset: 4px;
		}
	}

}



@media print{
	.new-cards{
		a{
			display: none;
		}
	}
	.below-calls{
		display: none;
	}
}