html 
{
	font-size: 62.5%;
}

:root
{
	--rowHeight: 4vmin;
	--trainingCol: ;
	--matchCol: ;
	--matchGuestCol: ;
	--eventCol : ;
	--bgCol: #323232;
	--textCol: #ffffff;
	--errCol: rgb(255,0,0);
	--corrCol: rgb(0,255,0);
	--shadowCol: rgba(0,0,0,0.2);
	--nameFontSize: 1.5rem;
}

@media screen and (orientation: portrait) {
	:root
	{
		--rowHeight: 4vmax;
		--nameFontSize: 2rem;
	}
	html 
	{
		font-size: 70%;
	}

}

@font-face
{
    font-family: bahnschrift;
    font-display: swap;
    src: url(./fonts/bahnschrift.ttf), url(./fonts/bahnschrift.ttf);
} 

@font-face
{
    font-family: bahnschriftLight;
    font-display: swap;
    src: url(./fonts/bahnschrift.ttf), url(./fonts/bahnschrift.ttf);
	font-weight: 100;
} 

@font-face
{
    font-family: bahnschriftBold;
    font-display: swap;
    src: url(./fonts/bahnschrift.ttf), url(./fonts/bahnschrift.ttf);
	font-weight: 600;
} 

*
{
	font-family: bahnschriftLight;
	padding: 0;
}


body
{
	background-color: var(--bgCol);
	text-align: center;
}

.table
{
	background-color: transparent;
	width: 100%;
	text-align: center;
	table-layout: fixed;
	
}

.table tr
{
	height: auto;
	padding: 0;
}

.table td
{
	
	border-radius: 0;/*calc(var(--rowHeight)*0.1);*/
	height: var(--rowHeight);
	overflow: hidden;
	overflow-wrap: break-word;
	background-color: rgb(150,150,150);
	transition: 0.5s;
	padding: 0;
}

.table th
{
	color: black;
	border-radius: calc(var(--rowHeight)*0.1);
	height: calc(var(--rowHeight)*1.5);
	overflow: hidden;
	overflow-wrap: break-word;
	/*font-size: 1.7vw;*/
	font-size: 3rem;
	font-family: bahnschriftBold;
	background-color: rgb(100,100,100);
}

.deletedBookingType
{
	-webkit-appearance:none;
	border-radius: 0px;
	border: none;
	font-family: bahnschriftBold;
	line-height: var(--rowHeight);
	height: var(--rowHeight);
	width: 100%;
	background-color: rgb(100,100,100);
}

		.match		{
			-webkit-appearance:none;
			border-radius: 0px;
			font-size: var(--nameFontSize);
			border: 0px;
			font-family: bahnschriftBold;
			line-height: var(--rowHeight);
			height: var(--rowHeight);
			width: 100%;
			background-color: #ff0000;
		}
				.matchWithGuest		{
			-webkit-appearance:none;
			border-radius: 0px;
			font-size: var(--nameFontSize);
			border: 0px;
			font-family: bahnschriftBold;
			line-height: var(--rowHeight);
			height: var(--rowHeight);
			width: 100%;
			background-color: #ffff00;
		}
				.event		{
			-webkit-appearance:none;
			border-radius: 0px;
			font-size: var(--nameFontSize);
			border: 0px;
			font-family: bahnschriftBold;
			line-height: var(--rowHeight);
			height: var(--rowHeight);
			width: 100%;
			background-color: #ff00ff;
		}
				.double		{
			-webkit-appearance:none;
			border-radius: 0px;
			font-size: var(--nameFontSize);
			border: 0px;
			font-family: bahnschriftBold;
			line-height: var(--rowHeight);
			height: var(--rowHeight);
			width: 100%;
			background-color: #00ffff;
		}
				.blocked		{
			-webkit-appearance:none;
			border-radius: 0px;
			font-size: var(--nameFontSize);
			border: 0px;
			font-family: bahnschriftBold;
			line-height: var(--rowHeight);
			height: var(--rowHeight);
			width: 100%;
			background-color: #000000;
		}
				.training		{
			-webkit-appearance:none;
			border-radius: 0px;
			font-size: var(--nameFontSize);
			border: 0px;
			font-family: bahnschriftBold;
			line-height: var(--rowHeight);
			height: var(--rowHeight);
			width: 100%;
			background-color: #00ff00;
		}
				.subscription		{
			-webkit-appearance:none;
			border-radius: 0px;
			font-size: var(--nameFontSize);
			border: 0px;
			font-family: bahnschriftBold;
			line-height: var(--rowHeight);
			height: var(--rowHeight);
			width: 100%;
			background-color: #ff6400;
		}
		

.prevBtn
{
	-webkit-appearance:none;
	color: var(--textCol);
	border-top-left-radius: calc(var(--rowHeight));
	border-bottom-left-radius: calc(var(--rowHeight));
	font-size: 4rem;
	writing-mode: vertical-rl;
	text-orientation: upright;
	border: none;
	height: auto;
	padding-top: 3vh;
	padding-bottom: 3vh;
	width: 5vw;
	background: linear-gradient(to left, rgba(0,0,0,0), rgba(0, 98, 255, 0.5));
}

.prevBtn:hover
{
	background: linear-gradient(to left, rgba(0,0,0,0), rgba(0, 0, 255, 0.5));
}

.prevBtn:focus
{
	outline: none;
}

.nextBtn
{
	-webkit-appearance:none;
	color: var(--textCol);
	border-top-right-radius: calc(var(--rowHeight));
	border-bottom-right-radius: calc(var(--rowHeight));
	font-size: 4rem;
	writing-mode: vertical-rl;
	text-orientation: upright;
	border: none;
	height: auto;
	padding-top: 3vh;
	padding-bottom: 3vh;
	width: 5vw;
	background: linear-gradient(to right, rgba(0,0,0,0), rgba(0, 98, 255, 0.5));
}

.nextBtn:hover
{
	background: linear-gradient(to right, rgba(0,0,0,0), rgba(0, 0, 255, 0.5));
}

.nextBtn:focus
{
	outline: none;
}

.mainTable
{
	margin-left: auto;
	margin-right: auto;
}

.bookingButton
{
	-webkit-appearance:none;
	font-size: 2rem;
	border: none;
	height: var(--rowHeight);
	width: 100%;
	background-color: rgba(0,0,0,0);
	overflow: hidden;
}

.bookingButton:hover
{

	background-color: rgba(0,255,0,0.5);
}

.bookingForm
{
	box-sizing: border-box;
	display: inline-block;
	border: 0px;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0);
}

.bookingForm.isOwnRes
{
	outline-offset: -2px;
	outline: 2px solid rgb(255,150,0);
}
.bookingForm.isPartnerRes
{
	outline-offset: -2px;
	outline: 2px solid rgb(162,0,255);
}

.past
{
	color: black;
	background-color: rgba(0,0,0,0.3);
	height: var(--rowHeight);
	line-height:var(--rowHeight);
}

.bookingContent
{
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 40vmax;
	color: var(--textCol);
	font-size: 3rem;
}

.err
{
	margin-top: 5vh;
	color: var(--errCol);
	font-size: 5rem;
}

.errBtn
{
	font-family: bahnschriftBold;
	color: var(--textCol);
	border-radius: 2vh;
	padding: 2vmin;
	border: none;
	margin-top: 5vh;
	background-color: var(--errCol);
	font-size: 5rem;
}


.bookingInfo
{
	margin-left: auto;
	margin-right: auto;
	width: 50vmax;
	margin-top: 2vh;
	margin-bottom: 2vh;
	text-align: center;
	font-size: 3rem;
	color: var(--textCol);
	table-layout: fixed;
}

.bookingInfo th
{
	font-family: bahnschrift;
	font-weight: 100;
}

.bookingInfo td
{
	padding-bottom: 1vmin;
	padding-left: 1vw;
	padding-right: 1vw;
	font-family: bahnschriftBold;
}

.userInfo
{
	font-family: bahnschriftBold;
	text-align: center;
	margin-top: 3vmin;
	margin-left: auto;
	margin-right: auto;
	font-size: 4rem; /*vmin*/
	background-color: red;
	max-width: 70vw;
	color: var(--textCol);
}

.userInfo a 
{
	font-family: bahnschriftBold;
	font-size: 4rem; /*vmin*/
	color: var(--textCol);
	padding-left: 2vw;
	padding-right: 2vw;
}

.calender
{
	width: 100%;
	table-layout: fixed;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.calenderCell
{
	background-color: rgb(200,200,255);
	height: 8vh;
	cursor: pointer;
}

.calenderCell:hover
{
	background-color: rgb(200,255,200);
}

.calenderCell.today
{
	filter: brightness(0.7) saturate(2);
}

.calenderCell.gray
{
	filter: brightness(0.5);
	background-color: rgb(255,255,255);
}

.calenderCell a
{
	font-family: bahnschriftBold;
	text-decoration: none;
	color: black;
	width: 100%;
	height: 100%;
	display: block;
	line-height: calc(8vh);
	/*font-size: calc(var(--rowHeight)/2);*/
	font-size: 2.5rem;
}


.publicCalender
{
	width: 100%;
	table-layout: fixed;
	border-spacing: 2vmin;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.publicCalenderCell
{
	border-radius: 1vmin;
	width:80%;
	background-color: var(--bgCol);
	color: var(--textCol);
	box-shadow: 0px 0px 5px var(--shadowCol);
	cursor: pointer;
	transition: 0.2s;
}

.publicCalenderCell:hover
{	
	filter: brightness(110%);
	box-shadow: 0px 0px 2vmin var(--shadowCol);
}

.publicCalenderCell[data-past="true"]
{
	filter: brightness(75%);
}

.publicCalenderCell[data-today="true"]
{
	filter: brightness(110%);
}


.publicCalenderCell[data-hidden="true"]
{
	opacity: 0.5;
	filter: brightness(75%);
}

#today
{
	background-color: rgb(150,150,255);
}

#gray
{
	background-color: rgb(150,150,150);
}

#orange
{
	background-color: rgb(255,150,0);
}

#darkOrange
{
	background-color: rgb(170,100,0);
}

#green
{
	background-color: rgb(72, 176, 79);
}

#darkGreen
{
	background-color: rgb(46, 110, 50);
}

#greenOrange
{
	background-image: linear-gradient(to right, rgb(72, 176, 79)45%,rgb(255,150,0)55%);
}
#darkGreenDarkOrange
{
	background-image: linear-gradient(to right, rgb(46, 110, 50)45%, rgb(170,100,0)55%);
}

#dayName
{
	background-color: transparent;
}

.whiteText
{
	font-size: 2rem; /*vmin*/
	color: var(--textCol);
}


.bookingDescription
{
	border-top: 1px solid var(--textCol);
	padding: 1vmin;
	text-align: justify;
	margin-left: auto;
	margin-right: auto;
	font-size: 3rem; /*vmin*/
	width: 40vw;
	color: var(--textCol);
}

.bookingTitle
{
	margin-left: auto;
	margin-right: auto;
	width: 40%;
	font-family: bahnschriftBold;
	font-size: 4rem; /*vmin*/
	color: var(--textCol);
}

.logoutContainer
{
	margin-left: auto;
	margin-right: auto;
	width: 90%;
}

.headlineContainer
{
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	justify-content: space-around;
}

.headlineContainer div
{
	justify-content: center;
	display: flex;
	flex: 1;
}

.colorLegendWraper
{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
}
.colorLegendContainer
{
	margin: 10px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
	width: 80%;
	max-width: 80%;
}

.colorLegendContainer>div
{
	white-space: nowrap;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	width: 100%;
	color: var(--textCol);
}

.colorLegendColor
{
	width: 3vmin;
	height: 3vmin;
	margin: 5px;
}