@charset "utf-8";

@media print {
    #warning,
	.ts-header__booking-window,
	.header-container,
	.footer-container {
       display: none !important;
    }
	.content{
		border: 0;
	}
    .content-header {
        border-bottom: 1px solid black;
    }
}

@page {
  size: 8.5in 11in;
  margin: 0pt 20pt;
}

.content-teesheetprint-width {
	max-width: 40rem;
}

.content-container-grid {
	display: grid;
	gap: .75rem;
	margin: auto;
	/* background-color: red; */
}

.teesheet-header {
	display: grid;
    grid-template-areas:
	 "warning"
     "title"
	 "round"
	 "booking";
	text-align: center;
	}
	.ts-header__edit-warning {
		display: grid;
		grid-area: warning;
		font-weight: 400;
		font-size: 1rem;
		color: red;
		/* margin-bottom: 1rem; */
	}
	.ts-header__title {
		display: grid;
		grid-area: title;
        /* justify-content: flex-start; */
		font-size: 1.2rem;
		margin-bottom: .5rem;
	}
	.ts-header__round {
		display: grid;
		grid-area: round;
        /* justify-content: flex-end; */
		font-size: 1rem;
	}
	.ts-header__booking-window {
		display: grid;
		grid-area: booking;
		font-weight:400;
		font-size:.8rem;
		/* text-align: center; */
	}

.time-group {
	margin-bottom: .8rem;
}

.time-header {
    border: 1px solid black;
    background-color: #fff;
    padding: .175rem .3rem;
    margin-bottom: .3rem;
}

.golfer {
    font-size: .8rem;
    border-bottom: 1px solid black;
	/* margin-top: .5rem; */
}


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

	.teesheet-header {
	  	grid-template-columns: 2fr 1fr;
	    grid-column-gap: 1rem;
	    grid-template-areas:
		 "warning warning"
	     "title round"
		 "booking booking";
	    font-size: 1.2rem;
	    font-weight: 600;
		padding: 0 .8rem;
		}
		.ts-header__title {
	        justify-content: flex-start;
			font-size: 1rem;
			margin-bottom: 0;
		}
		.ts-header__round {
			font-size: 1rem;
	        justify-content: flex-end;
		}

	.time-header {
		margin: 0 .8rem .3rem; /* top, left/right, bottom */
	}

	.golfer {
		margin: .2rem .8rem;  /* top/bottom, left/right */
	}
}