:root {
	--dullaccent-bg: gainsboro;
	--dullaccent-text: black;
	--radius: 0.4rem;
	--border-width: 1px;
	--border-radius: 2px;

	--sand-dune: #ece4c7ff;
	--white: #ffffffff;
	--dark-wine: #6b2516ff;
	--accent: rgba(92,37,0,1);
	--dark: rgba(61,61,61,1);
	--warn: #ece4c7ff;
	--error: rgba(204,8,44,1);
	--success: rgba(15,170,62,1);

  --bg: #fff;
  --accent-bg: rgba(242,242,242,1); /* #ece4c7ff;*/
  --text: #212121;
  --text-dark: rgba(0,0,0,1);
  --text-light: rgba(61,61,61,1);
  --text-lighter: rgba(91,91,91,1);
  --text-faint: rgba(200,200,200,1);
  --back-faint: rgba(250,250,250,1);
  --back-light: rgba(230,230,230,1);
  --border: #898EA4;
  --accent-hover: #1266e2;
  --accent-text: var(--bg);
  --code: #d81b60;
  --preformatted: #444;
  --marked: #ffdd33;
  --disabled: #efefef;
  --pale-highlight: #b3e6cc;
}

/*@font-face {
	font-family: hind;
	src: url( 'fonts/Hind-Regular.ttf' );
}*/

html, body {
	width: 100%;
	height: 100%;
	margin: 0; padding: 0;
	color: var(--text); 
	background-color: var(--bg);
}		

sup {
	vertical-align: 0.2em;
}

abbr.username {cursor: copy;}
abbr.code {cursor: copy;}

header {
	padding: 0;
	margin: 0;
}
section {
	padding: 0;
	margin: 0;
}	
footer {
	background-color: var(--dark);
	color: var(--sand-dune);
	min-height: 4rem;
	justify-content: center;
	align-items: center;
	display: flex;
}		
footer a:visited {
	color: var(--sand-dune);
}
footer a {
	color: var(--sand-dune);
	text-decoration: none;
}		

.logo {
	width: 100%;
	height: auto;
	margin-top: 1rem;
}	

.grid {
	font-family: Hind, "Lucida Grande", sans-serif;
	font-weight: 400;
	color: var( --text-light);
	font-size: 1.15em;

	display: grid;
	grid-template-columns: 1fr min(75rem,90%) 1fr;  			
	row-gap: 1rem;
	margin: 0;
	padding: 0;
}


.twincol {
	margin: 0;
	padding: 0;
}

/* Switch up to two columns  */
@media (min-width: 1000px) {
	.twincol {
		display: grid;
		grid-template-columns: repeat(2, 1fr);  
		grid-gap: 2rem;
	}

}

@media (min-width: 1000px) {
	.flex-cell.first {
		flex: 0 0 10em !important;
	}	
}

@media (max-width: 600px) {
	.mobilehide {
		display: none;
	}
.footer-left {
	text-align: right !important;
}	
}
@media (min-width: 600px) {
	.desktophide {
		display: none;
	}
}

@media (min-width: 1000px) {
	header nav a,
	header nav a:visited {
	  margin: 0 0.5rem 1rem 0.5rem !important;
	}
	.hover-underline-animation::after {
		bottom: -4px !important;
	}
}

.footer-left {
	text-align: left;
}
.footer-right {
	text-align: right;
}


h1, h2, h3, h4 {
	margin: 0 0 0 0;
}
h1+p, h2+p, h3+p, h4+p {
	margin-top: 0;
}

strong {
	font-weight: 700;
}

.or {
	text-align: center;
	font-size: 1.5em;
	width: 100%;
}
.or:after { content: ' ~' }
.or:before { content: '~ ' }

.and {
	text-align: center;
	font-size: 1.5em;
	width: 100%;
}
.and:after { content: ' ~' }
.and:before { content: '~ ' }

.faint { color: var(--text-faint); }
.light { color: var(--text-light); }
.lighter { color: var(--text-lighter); }
.small { font-size: 80%; }

a {
	text-decoration: none;
	color: var(--text-dark);
}
a:visited {
	color: var(--text-dark);
}
a:hover {
	text-decoration: underline;
	color: var(--text-dark);
}

.center {
	text-align: center;
}

.column {
	/*background-color: rgba(0,0,0,.2);*/
	padding: 0;
	margin: 0;
}

.notification {
	text-align: center;
	font-size: 2em;
}

/* notifications */
.notice {
	background-color: var(--dark);
	color: var(--sand-dune);
	margin-bottom: 0.2rem;
	animation: fade-in 1s ease-out forwards
}

@keyframes fade-in {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

.notice .linktext {
	padding-left: 0.5rem;
}
.notice .linkicon {}
.notice.error {
	border-left: 8px solid var(--error);
}
.notice.info {
	border-left: 8px solid var(--success);
}
.notice ul {
	list-style-type: none;
	margin: 0;
	padding: 0.5rem 1rem 0.5rem 1rem;
}

/* Notice close button */
.closeflag {
  display: none;
}
.closebutton {
  float: right;
  cursor: pointer;
}
.closeflag:checked+.notice {
  display: none;
}

.booking-notes {
}
dl.booking-notes {
	display: grid;
	grid-template-columns: auto 1fr;
}
dl.booking-notes dd {
	margin: 0; /* remove browser default margin */
	padding-left: 1rem;
}

.slot-notes {
	border: var(--border-width) solid var(--border);
	background-color: var(--accent-bg);
	padding: .5rem .9rem;
	line-height: normal;	
	border-radius: var(--radius);
}
.game-thumb {
	max-width: 300px;
	height: auto;
}
.game-thumb-tiny {
	max-width: 100px;
	height: auto;
}		
.booking-title {
	border: var(--border-width)solid var(--dullaccent-bg);
	background-color: var(--dullaccent-bg);
	color: var(--dullaccent-text);
	padding: .5rem .9rem;
	line-height: normal;
	text-decoration: none;
	width: 100%;
}
ul.slots {
	list-style-type: none;
		padding: 0;
		margin: 0;			
}
ul.slots li {
	border: var(--border-width) solid var(--border);
	background-color: var(--accent-bg);
	border-radius: var(--radius);
	margin: 1rem;
}
ul.slots li p {
	margin: 1rem;
	padding: 1rem;
}
dl.slot-notes {
	display: grid;
	grid-template-columns: auto 1fr;
}
dl.slot-notes dd {
	margin: 0; /* remove browser default margin */
	padding-left: 1rem;
}	

.flex-table {
	display: flex;
	flex-direction: column;			
}
 
.flex-row {
	display: flex;
}
 
.flex-cell {
	flex: 1;
	border: 1px solid #ccc;
	padding: 0.5rem 0.5rem 0.3rem 0.5rem;
	align-content: center;
	overflow: hidden; /* not ideal, but otherwise table distorts */
}
.flex-cell.header {
	background-color: var(--dullaccent-bg);
	font-weight: 600;
}
.flex-row:nth-child(even) {
	background-color: var(--accent-bg);
}
.flex-cell.first {
	flex: 0 0 4em;
}
.flex-cell.hidden {
	border: none;
	background-color: none;
}
/*
[href*="//"]:not([href*="localhost"]):after {
	content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAXklEQVR4AWN4cOscCu7tbPqPDWMomjOj/z+QjYJB4rhMxFTYWFv2HwmDBfdsX4tVIUIAoQhEg/goCnEqgroZrhAmCRKEKwKJQ90MpmEK0a2DK4RhhEIExq0QC8ZQCABn/RtHdBFe7wAAAABJRU5ErkJggg==);
}
*/



/* Format tables */
th {
  background-color: var(--accent-bg);
}

table {
  border-collapse: collapse;
  margin: 1.5rem 0;
}

td,
th {
  border-right: var(--border-width) solid #e6e6e6;
  border-left: var(--border-width) solid #e6e6e6;
  border-bottom: var(--border-width) solid #808080;
  text-align: start;
  padding: 0.5rem;
}


.radio input {



}


/*
figure > table {
  width: max-content;
  margin: 0;
}

td,
th {
  border: var(--border-width) solid var(--border);
  text-align: start;
  padding: 0.5rem;
}



tr:nth-child(even) {
  background-color: var(--accent-bg);
}

table caption {
  font-weight: bold;
  margin-bottom: 0.5rem;
}
8/


/* Format forms */
legend {
	font-size: 1.2em;
}
fieldset {
	border-radius: var(--radius);	
	margin: 0 0 2rem 0;
	background-color: var(--back-faint);
}
.column input[type="submit"].delete  { 
	background-color: var(--warn);
	color: var(--accent);
}
.column input[type="submit"].delete:disabled  { 
  cursor: not-allowed;
  background-color: var(--disabled);
  border-color: var(--disabled);
  color: var(--text-faint);
}

textarea,
select,
input,
button,
.button {
  font-size: inherit;
  font-family: inherit;
  padding: 0.5em;
  margin-bottom: 0.5rem;
  border-radius: var(--radius);
  box-shadow: none;
  max-width: 100%;
  display: inline-block;
}
textarea,
select,
input {
  color: var(--text);
  background-color: var(--accent-bg);
  border: var(--border-width) solid var(--border);
}
label {
  display: block;
}
label.inline {
  display: inline-block;
  margin-left: 0.5rem;
}
textarea:not([cols]) {
  width: 100%;
}
textarea {
  width: 100%;
}
input[type="email"] { width: 30rem; } /* Median email length is apparently 28 characters */
input[type="url"],
input[type="text"]  { 
	width: 100%; 
}

.column input[type="submit"]:not(.delete)  { 
	margin-top: 2rem;
	width: 100%; 
}
select {
	width: 100%;
}

input[type="submit"].fit {
	margin-top: 0 !important;
	width: auto !important;
}

.collapse form input[type="submit"] {
	margin: 0 !important;
	width: 100%; 
}
.collapse form {
	margin-block-end: 0;
}

input[type="submit"].pale {
	background-color: var(--sand-dune);
	/*color: var(--accent);*/
	color: var(--sand-dune);
}
.pale {
	background-color: var(--sand-dune) !important;
	color: var(--accent) !important;
}


button,
.button,
a.button, /* extra specificity to override a */
input[type="submit"],
input[type="reset"],
input[type="button"] {
  border: var(--border-width) solid var(--accent);
  background-color: var(--accent);
  /*color: var(--accent-text);*/
  color: var(--sand-dune);
  padding: 0.6rem 1rem 0.5rem 1rem;
  text-decoration: none;
  line-height: normal;
  cursor: pointer;
}

.button[aria-disabled="true"], 
input:disabled,
textarea:disabled,
select:disabled,
button[disabled] {
  cursor: not-allowed;
  background-color: var(--disabled);
  border-color: var(--disabled);
  color: var(--text-light);
}

input[type="checkbox"] {
	font-size: inherit;
	font-family: inherit;
	padding: 0.5rem;
}


/* Use flexbox to allow items to wrap, as needed */
header nav ul,
header nav ol {
  text-transform: uppercase;
  font-weight: 900;
  align-content: space-around;
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  list-style-type: none;
  padding: 0;
}

header nav.navbar ul,
header nav.navbar ol {
  margin: 2rem 0 0 0;
}
header nav.userbar ul,
header nav.userbar ol {
  margin: 0 0 0 0;
}



/* List items are inline elements, make them behave more like blocks */
header nav ul li,
header nav ol li {
  display: inline-block;
}

header nav a,
header nav a:visited {
	margin: 0 0.3rem 0.3rem 0.3rem;
  color: var(--text);
  display: inline-block;
  padding: 0.1rem 1rem;
  text-decoration: none;
}

header nav a:hover,
header nav a.current,
header nav a[aria-current="page"],
header nav a[aria-current="true"] {
  background: var(--bg);
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}

header nav li:not(:last-child)::after {	
  content: "|";
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
}

.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  /*bottom: -4px;*/
  bottom: 0px;
  left: 0;
  background-color: var(--dark);
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
  transform: scaleX(1);
}

.hover-underline-animation::after {
  transform-origin: bottom center;
}

.hover-underline-animation:hover::after {
  transform-origin: bottom center;
}

.NavItemSelected::after {
  transform: scaleX(1);
}


.linked:after {
	display: inline-flex;
	content: '';
	background-image: url('noun-link-1880307-5b5b5b.svg');
	background-size: 0.6em 0.6em;
	height: 0.6em;
	width: 0.6em;
	margin-left: 0.2em;
}


.content h1
 {
  text-transform: uppercase;
  font-weight: 700;	
	color: var( --text-light);
	font-size: 200%;  
}

.content h2
 {
  text-transform: uppercase;
  font-weight: 700;	
	color: var( --text-light);
	font-size: 200%;  
}

.note {
	margin: 0 0 4rem 0;
}

.underline {
	text-decoration: underline;
}


.linkicon,
.linktext {
  vertical-align: middle;
  display: inline-block;
}
.linkicon svg {
	margin: 0 0.2rem 0 0;
}
.linktext {
	padding-top: 0.2rem;
}

.footnote {
	color: var(--text-lighter);
	font-size: 0.9em;	
}
.footnote > strong {
	color: var(--text-light);;
	font-size: 1.1em;	
}
div.footnote {
	border-left: 0.2rem solid var(--text-faint);
	padding-left: 1rem;
}


/* Format the expanding box */
details {
  margin-bottom: 1rem;
}

details p {
	padding: 0 1em 0 1em;
}

summary {
	background: var(--accent-bg);
  cursor: pointer;
  font-weight: 600;
  padding: 1rem 1rem;
  color: var(--accent);
}

details[open] {
  padding-bottom: 1rem;
}

details[open] > *:last-child {
  margin-bottom: 0;
}



/* The radiogroup container */
.radiogroup {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 1rem;
  cursor: pointer;
  user-select: none;
}

/* Hide the browser's default radio button */
.radiogroup input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: var(--accent-bg);
  border-radius: 50%;
  border: 1px solid var(--dark);;
}

/* On mouse-over, add a grey background color */
.radiogroup:hover input ~ .checkmark {
  background-color: var(--accent);
}

/* When the radio button is checked, add a blue background */
.radiogroup input:checked ~ .checkmark {
  background-color: var(--dark);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radiogroup input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radiogroup .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}


div.countdown {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--dark);
	color: var(--sand-dune);
	font-size: 1em;
	border-radius: 1rem;
	text-align: center;
	padding: 0.5rem 0.5rem 1rem 0.5rem;
}
div.countdown p {
	margin: 0;
}
div.countdown_group {
	font-size: 3rem;
	font-family: 'Consolas', 'Lucida Console', monospace;
}
div.countdown_group div {
	display: inline-block;
	position: relative;
	margin: 0 0.2rem 0 0.2rem;
}

div.countdown_group div:after {
	font-family: Hind, "Lucida Grande", sans-serif;
	font-size: 0.3em;
  position: absolute;
  top: 3rem;
  left: 0;
  right: 0;
}
div.days:after { content: 'Days'; }
div.hours:after { content: 'Hours'; }
div.minutes:after { content: 'Minutes'; }
div.seconds:after { content: 'Seconds'; }


@media (max-width: 500px) {
	input[type="email"] { width: 100%; }
	div.countdown_group {
		font-size: 2.5rem !important;
	}
	div.countdown_group div:after {
		font-size: 0.3em !important;
	  top: 2.5rem !important;
	}
}

@media (min-width: 800px) {
	div.countdown {
		width: 80%;
		font-size: 2em;
		padding: 1rem 1rem 2rem 1rem;
	}
	div.countdown_group {
		font-size: 4rem;
	}
	div.countdown_group div {
		margin: 0 0.5rem 0 0.5rem;
	}

	div.countdown_group div:after {
		font-size: 0.3em;
	  top: 4rem;
	}
}

label span.note, legend span.note {
	color: var(--text-lighter);
	font-size: 0.8em;
}

dl.settings {
  display: grid;
  grid-template-columns: auto 1fr;
}
dl.settings dd {
  margin: 0; /* remove browser default margin */
}
dl.settings dt {
	padding-right: 1em;
}
dl.settings dt:nth-child(4n+1), dl.settings dt:nth-child(4n+1) + dd {
  background-color: var(--back-light);
}

/* highlight after booking */
div.flex-cell.highlight { 
	background-color: var(--pale-highlight);
	animation: fade-in 4s ease-out forwards;
}


@media print {
	.notice { margin-top: 1em }
  body{
      background-color: white;
      color: black;
  }
  .schedule-book-button, .my-bookings, .userbar, .navbar, footer, .your-account-details, .account-logout, .delete-account, .create-slot, .create-resource, .delete-booking, .update-booking-button, .event-list-menu, .settings-change { display: none; }
  details::details-content { display: contents; }
  .dt-paging, .dt-length, .dt-search { display: none; }
  .booking-link { display: none !important; }

}  

/* show hide for fieldsets */
.hide:after {
    content: " ▸";
}

.show:after {
    content: " ◅";
}
.hide { cursor: pointer; }
.show { cursor: pointer; }

.link {
	font-family: 'Consolas', 'Lucida Console', 'Courier New', Courier, monospace;
}

.ordinal {
	vertical-align: super;
	font-size: 0.6em;	
}