:root {
	--tcgs-timetable--width-threshold: 750px;
	--tcgs-timetable--day--font-size: 20px;
	--tcgs-timetable--day--font-weight: 600;
	--tcgs-timetable--day--line-height: 1em;
	--tcgs-timetable--court--font-size: 18px;
	--tcgs-timetable--court--font-weight: 600;
	--tcgs-timetable--court--line-height: 1em;
	--tcgs-timetable--time--font-size: 17px;
	--tcgs-timetable--time--font-weight: 500;
	--tcgs-timetable--time--line-height: 1em;
	--tcgs-timetable--junior--font-size: 16px;
	--tcgs-timetable--junior--line-height: 1.2em;
	/* colors */
	--tcgs-timetable--color--light-blue: #c2e2ee;
	--tcgs-timetable--color--light-green: #c2ffc2;
	--tcgs-timetable--color--light-red: #f3d3d8;
	--tcgs-timetable--color--light-orange: #f5dac0;

	--fwk-cal-date-font-size: 13px;
	--fwk-cal-date-box-size: 22px;
	--fwk-cal-border-color: #606060;
	--fwk-cal-border-light-color: #60606080;
	--fwk-cal-border-over-color: #600000f0;
	--fwk-cal-color-blue: #8fd2e9;
	--fwk-cal-color-green: #79eb79;
	--fwk-cal-color-red: #fca5b2;
	--fwk-cal-color-orange: #f5c497;
	--fwk-cal-color-none: transparent;
	--fwk-cal-color-light-none: transparent;
}

.tcgs-timetable-container.tcgs-timetable-by-days {
	display: flex;
	flex-direction: column;
	row-gap: 30px;

	.tcgs-timetable-day {
		display: flex;
		flex-direction: column;
		row-gap: 15px;
		background-color: var(--wp--preset--color--custom-bloc-vert);
		padding: 15px;
		border-radius: 20px;
		box-shadow: var(--wp--preset--shadow--natural);
	}

	.tcgs-timetable-day-title {
		padding-left: 5px;
		font-size: var(--tcgs-timetable--day--font-size);
		font-weight: var(--tcgs-timetable--day--font-weight);
		line-height: var(--tcgs-timetable--day--line-height);
	}

	.tcgs-timetable-courts-list {
		display: flex;
		flex-direction: row;
		column-gap: 20px;

		@media (max-width: 750px) {
			flex-direction: column;
			row-gap: 15px;
		}
	}

	.tcgs-timetable-court {
		flex-grow: 1;
		width: 50%;
		display: flex;
		flex-direction: column;
		row-gap: 10px;
		padding: 10px;
		border-radius: 10px;

		&.tcgs-timetable-blue {
			background-color: var(--tcgs-timetable--color--light-blue);
		}

		&.tcgs-timetable-green {
			background-color: var(--tcgs-timetable--color--light-green);
		}

		&.tcgs-timetable-red {
			background-color: var(--tcgs-timetable--color--light-red);
		}

		&.tcgs-timetable-orange {
			background-color: var(--tcgs-timetable--color--light-orange);
		}

		@media (max-width: 750px) {
			width: 100%;
		}
	}

	.tcgs-timetable-court-title {
		padding-left: 5px;
		font-size: var(--tcgs-timetable--court--font-size);
		font-weight: var(--tcgs-timetable--court--font-weight);
		line-height: var(--tcgs-timetable--court--line-height);
	}

	.tcgs-timetable-times-list {
		display: flex;
		flex-direction: column;
		row-gap: 10px;
	}

	.tcgs-timetable-time {
		display: flex;
		flex-direction: column;
		row-gap: 10px;
		background-color: var(--wp--preset--color--custom-page-background);
		padding: 10px;
		border-radius: 5px;

		&.tcgs-timetable-empty {
			background-color: transparent;
		}
	}

	.tcgs-timetable-time-title {
		font-size: var(--tcgs-timetable--time--font-size);
		font-weight: var(--tcgs-timetable--time--font-weight);
		line-height: var(--tcgs-timetable--time--line-height);
	}

	.tcgs-timetable-juniors-list {
		display: flex;
		flex-direction: column;
		padding-left: 10px;
	}

	.tcgs-timetable-junior {
		font-size: var(--tcgs-timetable--junior--font-size);
		line-height: var(--tcgs-timetable--junior--line-height);
	}

	.tcgs-timetable-empty {

		@media (max-width: 750px) {
			display: none;
		}
	}
}

.tcgs-timetable-container.tcgs-timetable-by-names {
	background-color: var(--wp--preset--color--custom-bloc-vert);
	padding: 20px;
	border-radius: 20px;
	box-shadow: var(--wp--preset--shadow--natural);

	table {

		thead th {
			text-align: left;
		}

		tbody {

			tr {

				td {
					padding: 4px 0px;
					font-size: var(--tcgs-timetable--junior--font-size);
					line-height: var(--tcgs-timetable--junior--line-height);
					vertical-align: text-top;
					white-space: nowrap;
				}

				td:not(:last-child) {
					padding-right: 20px;
				}
			}
		}
	}
}