html 
{
	font-size: 62.5%;
	font-family: bahnschriftLight;
	color: var(--textCol);
}

@media only screen and (orientation: portrait)

{
	html
	{
		font-size: 80%;
	}
}


:root
{
	--contentWidth: 80vmin;
	--bgCol: #323232;
	--textCol: #ffffff;
	--hoverCol: #ffffff5f;
	--textBoxBorder: none;
	--shadowCol: rgba(0,0,0,0.2);
	--shadowColFullOpacity: #000000;
	--footerTextCol: white;
	--mainHeight: 5vmin;

	--switchWidth: 7vh;
	--switchHeight: 4vh;
    --padding: 0.5vh;
	--handleSize: calc(var(--switchHeight) - (var(--padding) * 2));
    --switchMovement: calc(var(--switchWidth) - var(--handleSize) - (var(--padding) * 2));
}

@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;
} 


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

a
{
	font-size: 3rem /*3vmin*/;
	color: rgb(0,130,255);
	text-decoration: none;
	font-family: bahnschriftBold;
}

b
{
	font-family: bahnschriftBold;
}

.form
{
	width: var(--contentWidth);
	margin-left: auto;
	margin-right: auto;
	text-align center;
	font-size: 3rem /*3vmin*/;
	color: var(--textCol);
}

.textbox
{
	color: rgb(0,0,0);
	font-size: 3rem /*3vmin*/;
	font-family: bahnschriftLight;
	text-align: center;
	margin-top: 2vmin;
	margin-bottom: 2vmin;
	width: 100%;
	height: var(--mainHeight);
	border-radius: 0.2vmin;
	background-color: rgb(255,255,255);
	border: var(--textBoxBorder);
}

.inputError
{
	background-color: rgb(255,100,100);
	border-color: rgb(200,0,0);
}

.inputCorrect
{
	background-color: rgb(100,200,100);
	border-color: rgb(0,100,0);
}

.numBox
{
	color: rgb(0,0,0);
	font-size: 3rem /*3vmin*/;
	font-family: bahnschriftLight;
	text-align: center;
	margin-top: 2vmin;
	margin-bottom: 2vmin;
	margin-left: 10px;
	margin-right: 10px;
	width: 5vmax;
	height: var(--mainHeight);
	border-radius: 0.2vmin;
	background-color: rgb(255,255,255);
	border: var(--textBoxBorder);
}

.textarea
{
	padding: 1vmin;
	color: rgb(0,0,0);
	font-size: 3rem /*3vmin*/;
	font-family: bahnschriftLight;
	text-align: center;
	margin-top: 2vmin;
	margin-bottom: 2vmin;
	width: 100%;
	resize: vertical;
	border-radius: 0.2vmin;
	background-color: rgb(255,255,255);
	border: var(--textBoxBorder);
}


.select
{
	color: rgb(0,0,0);
	font-size: 3rem /*3vmin*/;
	font-family: bahnschriftLight;
	text-align: center;
	margin-top: 2vmin;
	margin-bottom: 2vmin;
	width: 100%;
	height: var(--mainHeight);
	border-radius: 0.2vmin;
	background-color: rgb(255,255,255);
	border: var(--textBoxBorder);
}

.inputError
{
	background-color: rgba(255,150,150);
}

.button
{
	-webkit-appearance:none;
	font-family: bahnschrift;
	font-size: 3rem /*3vmin*/;
	margin-top: 2vmin;
	margin-bottom: 2vmin;
	width: 100%;
	height: calc(var(--mainHeight)*1.4);
	border-radius: 0.2vmin;
	border: none;
	background-color: rgb(0, 98, 255);
	transition: 0.5s;
}

.button:hover
{
	font-family: bahnschriftBold;
	background-color: rgb(0, 0, 255);
}

#negBtn
{
	background-color: rgb(255, 69, 69);
}

#negBtn:hover
{
	background-color: rgb(255, 0, 0);
}

#posBtn
{
	background-color: rgb(83, 191, 55);
}

#posBtn:hover
{
	background-color: rgb(0,220,0);
}

#disabledBtn
{
	background-color: rgb(100,100,100);
}

#disabledBtn:hover
{
	font-family: bahnschrift;
}

.button[disabled]
{
	background-color: rgb(100,100,100);
}

.button[disabled]:hover
{
	background-color: rgb(100,100,100);
	font-family: bahnschrift;
}

.button.negBtn
{
	background-color: rgb(255, 69, 69);
}

.button.negBtn:hover
{
	background-color: rgb(255, 0, 0);
}

.button.posBtn
{
	background-color: rgb(83, 191, 55);
}

.button.posBtn:hover
{
	background-color: rgb(0,220,0);
}

.button.disabledBtn
{
	background-color: rgb(100,100,100);
}

.button.disabledBtn:hover
{
	font-family: bahnschrift;
}


.headline
{
	color: var(--textCol);
	text-align: center;
	font-family: bahnschriftBold;
	font-size: 4.5rem;
	margin-left: auto;
	margin-right: auto;
	width: var(--contentWidth);
	margin-top: 5vmin;
	margin-bottom: 5vmin;
}

.headline a
{
	color: var(--textCol);
	text-decoration: none;
}


.error
{
	color: red;
	text-align: center;
	font-family: bahnschriftBold;
	font-size: 3rem;
	margin-left: auto;
	margin-right: auto;
	width: var(--contentWidth);
	margin-top: 5vmin;
	margin-bottom: 5vmin;
	background-color: rgba(200,0,0,0.2);
	border-left: 1rem solid red;
}

.correct
{
	color: green;
	text-align: center;
	font-family: bahnschriftBold;
	font-size: 3rem;
	margin-left: auto;
	margin-right: auto;
	width: var(--contentWidth);
	margin-top: 5vmin;
	margin-bottom: 5vmin;
	background-color: rgba(0,200,0,0.1);
	border-left: 1rem solid green;
}

.errorSmall
{
	color: red;
	text-align: center;
	font-family: bahnschriftBold;
	background-color: rgba(200,0,0,0.2);
	border-left: 1rem solid red;
}

.correctSmall
{
	color: green;
	text-align: center;
	font-family: bahnschriftBold;
	background-color: rgba(0,200,0,0.1);
	border-left: 1rem solid green;
}

.info
{
	color: var(--textCol);
	text-align: center;
	font-family: bahnschriftBold;
	font-size: 3rem;
	margin-left: auto;
	margin-right: auto;
	width: var(--contentWidth);
	margin-top: 5vmin;
	margin-bottom: 5vmin;
	
}

.info.card
{
	background-color: var(--shadowCol);
	border-left: 1rem solid var(--textCol);
}

.text
{
	color: var(--textCol);
	text-align: center;
	font-size: 3rem;
	margin-left: auto;
	margin-right: auto;
	width: var(--contentWidth);
	margin-top: 5vmin;
	margin-bottom: 5vmin;
}

.bottomNavLink
{
	font-size: 3rem;
	color: var(--textCol);
	width: var(--contentWidth);
	margin-left: auto;
	margin-right: auto;
	margin-top: 5vmin;
	margin-bottom: 5vmin;
	text-align: center;
}

.fileInput
{
	font-size: 3rem /*3vmin*/;
	text-align: center;
	justify-content: center;
	margin-top: 2vmin;
	margin-bottom: 2vmin;
	padding: 1vmin;
	border-radius: 0.2vmin;
	color: var(--textCol);
	border: none;
}

.managementList
{
	color: var(--textCol);
	font-size: 3rem /*3vmin*/;
	table-layout: fixed;
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
	text-align: left;
}


.managementList tr
{
	cursor: pointer;
	transition: 0.3s;
}

.managementList tr:hover
{
	background-color: var(--hoverCol);
}

.managementList .noClick:hover
{
	background-color: transparent !important;
}

.managementList td
{
	padding: 1vmin;
}

.managementList th
{
	padding: 1vmin;
	font-family: bahnschriftBold;
}

.colPicker
{
	padding: 0;
	height:  var(--mainHeight);
	border: none;
}

.listTable
{
	color: var(--textCol);
	font-size: 3rem /*3vmin*/;
	table-layout: fixed;
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
	text-align: left;
	max-width: 45vmax;
	min-width: 25vmax;
}

.listTable td:not([class="listTableHeadline"])
{
	padding: 1vmin;
	text-align: left;
}

.listTableHeadline
{
 text-align: center;
 padding: 1vmin;
 font-family: bahnschriftBold;
}

.listTable th
{
	padding: 1vmin;
	font-family: bahnschriftBold;
	vertical-align: top;
	text-align: left;
}

.listTable td.negative
{
	background-color: rgba(200,0,0,0.8);
}

.listTable td.positive
{
	background-color: rgba(0,200,0,0.8);
}

.listTable td.pending
{
	background-color: rgba(255,200,0,0.8);
}

.emailTable
{
	color: var(--textCol);
	font-size: 3rem /*3vmin*/;
	width: 35vmax;
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
	text-align: left;
	max-width: 45vmax;
}

.timeInput
{
	color: rgb(0,0,0);
	font-size: 3rem /*3vmin*/;
	text-align: center;
	margin-top: 1vmin;
	margin-bottom: 1vmin;
	width: 100%;
	height: var(--mainHeight);
	border-radius: 0.2vmin;
	background-color: rgb(255,255,255);
	border: var(--textBoxBorder);
}


.cookieInfo
{
	color: black;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: rgb(255,255,255);
	width: 100vw;
	line-height: 10vh;
	text-align: center;
	border: 2px solid red;
	font-family: bahnschrift;
	font-size: 2.5rem;
}

.cookieInfo button
{
	font-family: bahnschrift;
	font-size: 2.5rem;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
	border-radius: 0.2vmin;
	border: none;
	background-color: rgb(0, 98, 255);
	transition: 0.5s;
}

.cookieInfo button:hover
{
	font-family: bahnschriftBold;
	background-color: rgb(0, 0, 255);
}

/*######### CHECKBOX #########*/
/* The container */
.checkContainer {
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 3rem /*3vmin*/;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkContainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkContainer input:checked ~ .checkmark {
  background-color: rgb(0, 98, 255);
}

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

/* Show the checkmark when checked */
.checkContainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkContainer .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*####### CHECKBOX END #######*/

footer
{
	text-align: center;
}

.footerContent a
{
	color: var(--footerTextCol);
	flex: 1;
	text-align: center;
}

.footerContent
{
	width: 90vw;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: row;
}

.pageContainer
{
	min-height: 90vh;
}

.ruleHeadline
{
	display: flex;
	justify-content: space-between;
	color: var(--textCol);
	opacity: 0.5;
	font-size: 2rem /*2vmin*/;
}

.switch
{
position: relative;
display: inline-block;
width: var(--switchWidth);
height: var(--switchHeight);
justify-content: center;
}

.switch input
{
opacity: 0;
width: 0;
height: 0;
}

.slider
{
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--hoverCol);
-webkit-transition: 0.4s;
transition: 0.4s;
}

.slider:before
{
position: absolute;
content: "";
height: var(--handleSize);
width: var(--handleSize);
left: var(--padding);
bottom: var(--padding);
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}

input:checked + .slider
{
background-color: #2196f3;
}

input:focus + .slider
{
box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before
{
-webkit-transform: translateX(var(--switchMovement));
-ms-transform: translateX(var(--switchMovement));
transform: translateX(var(--switchMovement));
}

/* Rounded sliders */
.slider.round
{
border-radius: calc(var(--switchHeight) * 0.5);
}

.slider.round:before
{
border-radius: 50%;
}

#warningBg
{
	background-color: rgb(255,200,0);
}

#correctBg
{
	background-color: rgb(0,200,0);
}

#errorBg
{
	background-color: rgb(200,0,0);
}

.adContainer
{
	align-items: center;
	width: max-content;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
	padding: 0.2vmin;
	border-radius: 0.1vmin;
}

.dpdPopup
{
	background-color: rgba(255,255,255,0.8);
	font-family: bahnschrift;
	color: black;
	text-align: center;
}

.dateSelect
{
	color: rgb(0,0,0);
	font-size: 3rem /*3vmin*/;
	text-align: center;
	margin-top: 2vmin;
	margin-bottom: 2vmin;
	height: var(--mainHeight);
	border-radius: 0.2vmin;
	background-color: rgb(255,255,255);
	border: var(--textBoxBorder);
}

.contentContainer
{
	margin-left: auto;
	margin-right: auto;
	max-width: 70%;
}


.gridContainer
{
	margin-left: auto;
	margin-right: auto;
	max-width: 80%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
	grid-template-rows: minmax(100px, auto);
	grid-auto-flow: dense;
	grid-gap: 2vmin;
}

.gridContainer .box
{
	display: grid;
	padding: 1vmin;
	border-radius: 1vmin;
	color: var(--textCol);
	font-size: 3rem /*3vmin*/;
	box-shadow: 0px 0px 2vmin var(--shadowColFullOpacity);
	transition: 0.2s;
}

.gridContainer .box:hover
{
	box-shadow: 0px 0px 3vmin var(--shadowColFullOpacity);
}

.appLinkingQrCodeContainer
{
	display: flex;
	margin-left: auto;
	margin-right: auto;
	align-items: center;
	justify-content: center;
	background-color: white;
	width: 8vw;
	height: 8vw;
	border-radius: 10%;
}
.clickable
{
	<!-- transition: 0.1s; -->
}

.clickable:hover
{
	scale: 1.08;
	cursor: pointer;

}

.priceProfilesTable
{
	color: var(--textCol);
	font-size: 3rem /*3vmin*/;
	table-layout: fixed;
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
	text-align: left;
	min-width: 25vmax;
	max-width: 80%;
}

.priceProfilesTable th
{
	font-family: bahnschriftBold;
	padding: 1vmin;
}

.priceProfilesTable td
{
	padding: 1vmin;
}

.flexContainer
{
	display: flex;
	width: 40vmax;
	margin-left: auto;
	margin-right: auto;
}

.flexContainer.row
{
	flex-direction: row;
}

.flexContainer.col
{
	flex-direction: column;
}

.flexEl
{
	color: var(--textCol);
	font-size: 3rem /*3vmin*/;
	display: flex;
	width: 100%;
}

.flexEl>*
{
	flex: 1;
}

.flexEl.row
{
	flex-direction: row;
}

.flexEl.col
{
	flex-direction: column;
}

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


.racePyramidEl
{
	box-sizing: border-box;
	background-color: var(--bgCol);
	color: var(--textCol);
	font-size: 3rem;
	padding: 0;
	display: flex;
	flex-direction: row;
	margin: 2rem 3rem;
	width: 19vw;
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
	position: relative;
	border-radius: 1rem;
	box-shadow: 0px 0px 10px 5px var(--shadowCol);
	/*border: 1px solid white;*/
}

.pulse
{
	animation: pulse 1s linear infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0px 0px 10px 5px var(--shadowCol);
		filter: saturate(1);
		transform: scale(1);
	}

	50% {
		box-shadow: 0px 0px 20px 10px var(--shadowCol);
		filter: saturate(1.2);
		transform: scale(1.005);
	}

	100% {
		box-shadow: 0px 0px 10px 5px var(--shadowCol);
		filter: saturate(1);
		transform: scale(1);
	}
}

.racePyramidEl.own
{
	border: 2px solid rgb(255,100,0);
}


.posEl
{
	display: flex;
	flex-diretion: row;
	align-items: center;
	justify-content: center;
	flex: 1.5;
	font-family: bahnschriftBold !important;
	font-size: 4rem;
	z-index: 2;
}

.arrowEl
{
	justify-content: space-evenly;
	align-items: center;
	color: rgb(255,255,255);
	display: flex;
	flex: 0.5;
	font-size: 2rem;
	z-index: 2;
	/*background-clip: text;*/
}


.arrowEl i
{
	opacity: 1;
}

.arrowEl.pos
{
	flex-direction: column;
	color: rgb(0,255,0);
	/*background-image: linear-gradient(to top,rgba(0,255,0,0),rgba(0,255,0,1));*/
}

.arrowEl.neg
{
	flex-direction: column;
	color: rgb(255,0,0);
	/*background-image: linear-gradient(to bottom,rgba(255,0,0,0),rgba(255,0,0,1));*/
}

.arrowEl.ntl
{
	flex-direction: row;
	color: rgb(255,200,0);
	/*background-image: linear-gradient(to left,rgba(255,200,0,0),rgba(255,200,0,1));*/
}
.posEl.own
{
	color: rgb(255,100,0);
}

.deviderEl
{
	flex: 0.2;
	
	background-color: var(--bgCol);
	filter: hue-rotate(40deg) saturate(2);
}


.rightSideContainer
{
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	display: flex;
	flex-direction: column;
	
	flex: 4;
}

.scoreEl
{
	display: flex;
	flex-diretion: row;
	align-items: center;
	justify-content: center;
	flex: 1;
	font-size: 2.5rem;
	opacity: 0.5;
}

.nameEl
{
	overflow: hidden;
	display: flex;
	flex-diretion: row;
	align-items: center;
	justify-content: center;
	flex: 2;
}

.racesGridContainer
{
	margin-left: auto;
	margin-right: auto;
	max-width: 80%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	grid-auto-flow: dense;
	grid-gap: 2vmin;
}

.raceGroupEl
{
	width: 100%;
	height: 20rem;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	border-radius: 1rem;
	box-shadow: 0px 0px 10px 5px var(--shadowCol);
	align-items: stretch;
	color: var(--textCol);
	transition: 0.3s;
}

.raceGroupEl:hover
{
	box-shadow: 0px 0px 10px 10px var(--shadowCol);
}

.raceGroupNameEl
{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 4rem;
	flex: 1;
	font-family: bahnschriftBold;
}

.raceGroupOwnerEl
{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	flex: 1;
	opacity: 0.5;
}

.raceGroupmemberNumEl
{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	flex: 2;
	opacity: 0.5;
}



.chatBox
{
	display: flex;
	flex-direction: column;
	font-family: 'bahnschrift';
	font-size: 2rem;
	color: var(--textCol);
	width: 50vw;
	border-top: 1px solid white;
	max-height: 80rem;
	overflow-y: scroll;
	margin-left: auto;
	margin-right: auto;
}


@media only screen and (orientation: portrait)
{
	.chatBox
	{
		width: 90vw;
	}
}

.chatBox .headlineRow
{
	padding-top: 1rem;
	padding-bottom: 1rem;
	width: 100%;
	font-family: 'bahnschriftBold';
	font-size: 3rem;
	text-align: center;
}

.chatBox .dateRow
{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding-top: 1rem;
	padding-bottom: 1rem;
	width: 100%;
	font-family: 'bahnschrift';
	font-size: 2rem;
	text-align: center;
	
}

.chatBox .dateRow .dateEl
{
	padding: 0.2rem;
	padding-left: 1rem;
	padding-right: 1rem;
	
	
	border-radius: 1rem;
	width: max-content;
}

.chatBox .inputRow
{
	padding-top: 1rem;
	padding-bottom: 1rem;
	width: 100%;
	text-align: center;
}

.chatBox .msgRow
{
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	padding-top: 0.1rem;
	padding-bottom: 0.1rem;
}

.chatBox .msgDiv
{
	position: relative;
	width: max-content;
	max-width: 40%;
	min-width: 5rem;
	border: 1px solid white;
	padding: 1rem;
	padding-bottom: 2rem;
	border-radius: 1rem;
	border-bottom-left-radius: 0px;
}

.chatBox .msgDiv.own
{
	border-radius: 1rem;
	border-bottom-right-radius: 0px;
}

.chatBox .msgDiv .msgTime
{
	position: absolute;
	font-size: 1.5rem;
	opacity: 0.5;
	right: 1rem;
	bottom: 0.2rem;
}

.chatBox .msgDiv.own .msgTime
{
	left: 1rem;
	bottom: 0.2rem;
}



.msgRow.own
{
	justify-content: flex-end;
}

.publicOverviewBtn
{
	position: absolute;
	top: 1rem;
	right: 1rem;
}

.publicOverviewSingleDayCanvasContainer
{
	max-width: 90vw;
	overflow-x: scroll;
}

.linkBtn
{
	background-color: transparent;
	border-radius: 2rem;
	border: 1px solid var(--textCol);
	padding: 1rem;
	width: max-content;
	max-width: 50%;
	margin-left: auto;
	margin-right: auto;
}

.linkBtn:hover
{
	background-color: var(--hoverCol);
}

.linkBtn a
{
	color: white;
	font-weight: bold;
}

.redirectPopupContainer
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 100;
	background-color: var(--shadowCol);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

@keyframes popupContainerBackgroundBlur {
  from {
	  filter: opacity(0);
	  backdrop-filter: blur(0px);
	}
  to {
	  filter: opacity(1);
	  backdrop-filter: blur(10px);
	}
}

.popupContainer.openSoft
{
	-webkit-animation: popupContainerBackgroundBlur 0.1s forwards;
    animation: popupContainerBackgroundBlur 0.1s forwards;
}

.popupContainer
{
    position: fixed;
    z-index: 200;
    background-color: var(--shadowCol);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    transition: 0.3s;
}

.popup
{
	position: relative;
	font-family: bahnschrift;
	color: black;
    padding: 2rem;
    font-size: 2rem;
    width: 40%;
    background-color: white;
    border-radius: 1rem;
    max-height: 90%;
    overflow-x: hidden;
	box-shadow: 0 0 30px 5px var(--shadowCol);
	text-align: left;
}

.popup h1
{
	font-family: bahnschriftBold;
}

.popup a
{
	font-size: inherit;
}

.popupButtonRow
{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	padding-top: 2rem;
}

.popupButton
{
	padding: 1rem;
	border: none;
	border-radius: 0.5rem;
	background-color: rgb(0, 98, 255);
	min-width: 5rem;
	cursor: pointer;
	font-size: 2rem;
	margin-left: 1rem;
}

.popupButton:hover
{
	background-color: rgb(0, 0, 255);
}

.popupCloseBtn
{
	position: absolute;
	top: 0.5rem;
	right: 1rem;
	cursor: pointer;
}

@media only screen and (max-width: 1200px) 
{
	.popup
	{
		width: 90% !important;
	}
}

.loadingEl
{
	font-size: 6rem;
	animation: spin 2s infinite;
	color: var(--textCol);
}

@keyframes spin{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

.inlineClickable
{
	display: inline-block;
	padding-top: 0.1rem;
	padding-bottom: 0.1rem;
	padding-left: 2rem;
	padding-right: 2rem;

	border-radius: 2rem;
	background-color: rgb(0, 98, 255);
	box-shadow: 0px 0px 3px 2px var(--shadowCol);
	transition: 0.1s;
	cursor: pointer;
}

.inlineClickable:hover
{
	box-shadow: 0px 0px 3px 4px var(--shadowCol);
	background-color: rgb(0, 50, 255);
}

.inlineClickable.negBtn
{
	background-color: rgb(255, 69, 69);
}

.inlineClickable.negBtn:hover
{
	background-color: rgb(255, 0, 0);
}

.inlineClickable.posBtn
{
	background-color: rgb(83, 191, 55);
}

.inlineClickable.posBtn:hover
{
	background-color: rgb(0,220,0);
}

.map
{
	min-height: 60rem;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.notificationCircle
{
	display: inline-block;
  	width: 3rem;
  	height: 3rem;
  	font-size: 2rem;
	border-radius: 50%;
  	background-color: rgb(200,100,0);
  	display: flex;
  	align-items: center;
  	justify-content: center;
}

.notificationCircle.positive
{
	background-color: rgb(0,200,0);
}

.hidden
{
	display: none;
}

.groupbox
{
	box-sizing: border-box;
	margin: 2rem 0;
	border: 2px solid var(--textCol);
	border-radius: 1rem;
}

.priceManagementContainer
{
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: row;
	overflow-y: scroll;
}

.priceManagementContainer .court
{
	display: flex;
	flex: 1;
	flex-direction: column;
	margin: 0.2rem;
	background-color: var(--shadowCol);
}

.priceManagementContainer .court .courtName
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-size: 2rem;
	font-family: bahnschrift;
	/*background-color: red;*/
}

.priceManagementContainer .court .memberGuestSubheadline
{
	display: flex;
	flex-direction: row;
	width: 100%;
}

.priceManagementContainer .court .memberGuestSubheadline div
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	/*background-color: green;*/
	margin: 0.2rem;
	font-size: 1.5rem;
	font-family: bahnschrift;
}

.priceManagementContainer .court .priceSectionsParentContainer
{
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 70rem;
}

.priceManagementContainer .court .priceSectionsParentContainer .priceSectionsContainer
{
	flex: 1;
	margin: 0.2rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	/*background-color: pink;*/
	position: relative;
}

.priceManagementContainer .court .priceSectionsParentContainer .priceSectionsContainer .priceSection
{
	flex: 1; 
	width: 100%;
	background-color: var(--shadowCol);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0px 1px black inset;
	padding-top: 0.2rem;
}

.priceManagementContainer .court input
{
	text-align: center;	
	background-color: var(--shadowCol);
	font-size: 1.5rem;
	font-family: bahnschrift;
	color: var(--textCol);
	border: none;
}

.priceManagementContainer .court .priceSectionsParentContainer .priceSectionsContainer .priceSection .priceInputContainer
{
	font-size: 1.5rem;
	font-family: bahnschrift;
	color: var(--textCol);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}


.priceManagementContainer .court .priceSectionsParentContainer .priceSectionsContainer .priceSection .priceInputContainer .priceInput
{
	text-align: center;	
	background-color: var(--shadowCol);
	font-size: 1.5rem;
	font-family: bahnschrift;
	color: var(--textCol);
	border: none;
	padding: 0.5rem 0;
	-webkit-appearance: none;
	-moz-appearance: textfield;
}


.tableButton
{
	-webkit-appearance:none;
	font-family: bahnschrift;
	font-size: inherit;
	border-radius: 0.2vmin;
	border: none;
	background-color: rgb(0, 98, 255);
	transition: 0.5s;
	padding: 0.5rem;
	cursor: pointer;
}

.tableButton:hover
{
	background-color: rgb(0, 0, 255);
}