*,
*::before,
*::after
{
	box-sizing: border-box;
}

body
{
	margin: unset;
	font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
}

button,
input,
textarea,
select
{
	font: inherit;
	-webkit-appearance: none
}

img,
picture,
svg,
canvas
{
	display: block;
	max-inline-size: 100%;
	block-size: auto;
}

html,
body
{
	margin: 0;
	padding: 0.5rem;
	background: rgba(32,36,42,1);
	background: #000;
	color: #fff;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

h1,h2,h3
{
	font-size: 1.4rem;
	margin-bottom: 0.5rem;
}

p
{
	margin-top: 0.2rem;
	line-height: 1.5
}

a
{
	color: rgb(0, 122, 255);
}

form
{
	margin: 0;
	padding: 0;
}

input[type="email"]
{
	font-size: 16px;
	width: 100%;
	height: 44px;
	border: 0 solid;
	border-radius: 16px;
	padding: 1rem;

}

input[type="submit"]
{
	font-size: 16px;
	width: 60%;
	height: 36px;
	border-radius: 16px;
	border: 0 solid;
	margin-top: 1rem;
	margin-left: 40%;
	color: #fff;
	background: rgb(0, 122, 255)
}

section
{
	position: relative;
	max-width: 480px;
	margin: 2rem auto 0 auto;
}

section#pending h2
{
	color: rgb(0, 122, 255);
}

section#allReady h2
{
	color: rgba(65, 215, 101, 0.8);
}

.collision
{
	border: 1px solid red;
	border-radius: 8px;
	padding: 0 1rem 0.5rem 1rem;
}

.collision h2
{
	color: red;
}

#infoArea
{
	display: none;
	border: 1px solid #656565;
	border-radius: 8px;
	padding: 0.5rem 0.8rem
}

#infoArea.visible
{
	display: block;
}

button#infoToggle
{
	-webkit-appearance: none;
	border: none;
	background: transparent;
	color: #fff;
	padding: 0;
	color: rgb(0, 122, 255);
}

button#infoToggle[aria-expanded="true"]
{
	color: #f90;
}

#slots button
{
	font-size: 1.3rem;
	width: 100%;
	height: 44px;
	border: 1px solid transparent;
	margin-top: 2.5px;
	background: rgba(65, 215, 101, 0.8);
	color: #fff;
	cursor: pointer;
	border-radius: 4px;
}

#slots button.available
{
}

#slots button[data-state="unavailable"]
{
	background: rgba(120, 120, 120, 0.8);
}

#slots button[data-state="unavailable"] span
{
	text-decoration: line-through;
}

#slots button[data-state="myreservation"]
{
	background: rgb(0, 122, 255);
	box-shadow: 0 0 8px -4px rgba(32,32,32,0.2) inset
}

#slots button:active:not(:disabled)
{
	color:#333;
	background: rgba(255,255,255,0.8);
}

#slots button:disabled
{
	opacity: 0.5
}

#slots form:nth-last-child(-n+16),
#slots form:nth-child(43),
#slots form:nth-child(44)
{
	display: none;
}

#reloadPrompt
{
	position: fixed;
	opacity: 1;
	text-align: center;
	top: 12px;
	right: 12px;
	width: 240px;
	padding: 4px;
	background: rgb(0, 122, 255);
	border-radius: 8px;
	animation: pulse 3s ease-in-out infinite;
	transition: 1s opacity ease-in;
	z-index: 9999;
}

#reloadPrompt.hidden
{
	opacity: 0;
	user-select: none;
	pointer-events: none;
	transition: 1s opacity ease-in;
}

#reloadPrompt p
{
	line-height: 2;
	margin: 0;
}

#reloadPrompt p a
{
	text-decoration: none;
	color: #fff;
}

@keyframes pulse
{
	0%
	{
  		transform: scale(1);
	}
	50%
	{
  		transform: scale(1.05);
	}
	100%
	{
  		transform: scale(1);
	}
}

#privacyPolicy
{
	border-top: 1px solid #aaa;
	margin-top: 2rem;
/* 	text-align: center; */
	padding: 1rem;
	color: #aaa;

}