@charset "utf-8";


.material-symbols-outlined {
	font-variation-settings:
	  'FILL' 1,
	  'wght' 800,
	  'GRAD' 0,
	  'opsz' 24;
	font-size: 32px;
}

.content-teetimes-width {
	max-width: 54rem;
}

.tee-sheet__header {
	font-size: 1rem;
	margin-bottom: 1.2rem;
}

.print-icon {
	display: none;
}


.teetimes-grid {
	display: grid;
	grid-row-gap: 1rem;
	margin: 0 .8rem;
}

.teetime-box {
	display: grid;
	grid-template-areas:
	 "header"
	 "people"
	 "names";
	 grid-row-gap: .8rem;
	 border: 1px solid black;
	 border-radius: 20px;
	 background-color: white;
	 padding: .8rem 0;
}

.teetime-box__header {
	display: grid;
	grid-area: header;
	grid-template-areas:
	  "time button";
	margin-bottom: .5rem;
	margin-right: .5rem;
	/* border: 1px solid red; */
}

.time  {
	display: grid;
	grid-area: time;
	font-size: 1.2rem;
	margin-left: 1rem;
}

.res-button{
	justify-self: end;
	align-self: center;
}
.show button {
	display: grid;
}
.hide button {
	display: none;
}
.res-button button {
	/* display: grid; */
	grid-area: button;
	margin-right: 1rem;
	padding: .35rem .5rem;
	vertical-align: middle;
}


.people {
	display: grid;
	grid-area: people;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.names {
	display: grid;
	grid-area: names;
	grid-row-gap: .8rem;
	font-size: 1.2rem;
}
.available {
	color: #366091; /*dark blue*/
}
.reserved {
	color: #DBDBDB; /*light gray*/
}
.empty {
	color: #366091;
	font-weight: 300;
	font-style: italic;
}



/* 480px */
@media (min-width: 30em) {
	.teetimes-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 1rem;
	}

	.names {
		font-size: 1rem;
	}

}

/* 570px */
@media (min-width: 35.625em) {
	.print-icon {
		display: inline;
	}
}

/* 660px */
@media (min-width: 41.25em) {
	.teetimes-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.names {
		font-size: 1rem;
	}

}


/* 1000px */
@media (min-width:  62.5em) {
	.teetimes-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}