/*
 *
 * Das "Haupt" CSS. Hier sind alle Style angegeben, welche für die Ansicht der Reservationsliste zuständig sind.
 *
 */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

*
{
	padding: 0;
	margin: 0;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-family: "Open Sans", sans-serif;
}

/* Layout */
.reservationListWrapper {
	margin: 0;
	border: 0;
	z-index: 100;
	font-size: 1.5rem; /* 24px */
	line-height: 2rem; /* 32px */
	color: white;
	height: 100%;
	width: 100%;
}

.reservationListWrapper > div {
	position: absolute;
	width: 100%;
}

.reservationListWrapper .header {
	top: 0;
	position: relative;
	height: 200px;
	color: #FFFFFF;
	background-color: black;
	border-bottom: none;
	padding: 0;
	font-size: 1.875rem; /* 30px */
	line-height: 2.25rem; /* 36px */
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.reservationListWrapper .header .title {
	font-size: 50px;
	font-weight: bold;
	padding-right: 50px;
}

.reservationListWrapper .header .logo {
	height: 150px;
	width: auto;
}

.reservationListWrapper .content {
	top: 200px;
	bottom: 0;
	margin-top: 0;
	padding: 0;
	overflow: hidden;
	color: #000000;
	font-size: 2.25rem;
	line-height: 2.5rem; 
	font-weight: 500;
}

.reservationListWrapper .footer {
	padding-left: 15px;
	padding-right: 50px;
	padding-bottom: 15px;
	text-align: right;
	color: black;
	height: 150px;
}

.footer {
	bottom: 0;
	height: 90px;
	padding: 0 5%;
	position: absolute;
}

.footer .timeonly-info {
	font-size: 50px;
}

.date {
	display: table-row;
}

.date-part {
	margin-right: 5px;
}

.dateTo {
	display: table-row;
	font-size: 1.25rem; /* 20px */
	line-height: 1.75rem; /* 28px */
	position: relative;
	text-align: center;
}

.smalltext {
	font-size: 1.25rem; /* 20px */
	line-height: 1.75rem; /* 28px */
}

.logo {
	float: right;
}

.teilnehmerList {
	margin-left: 20px;
	color: #d3d3d3;
	white-space: nowrap;
}

.reservation .organisator::before {
	content: 'Organisator: ';
}

.organisator {
	margin-left: 20px;
}

/* Room markers */
.room-marker {
	display: inline-flex;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	width: 50px;
	height: 50px;
}

.stair-down-right {
	background-image: url("../img/stair-down-right.png");
}

.stair-down-left {
	background-image: url("../img/stair-down-left.png");
}

.arrow-right {
	background-image: url("../img/arrow-right.png");
}

.arrow-left {
	background-image: url("../img/arrow-left.png");
}

 /*CSS Grid classes */
.reservation-container {
	display: grid;
	padding: 20px 40px 20px 40px;
	position: relative;
}

.reservation {
	display: grid;
	grid-template-columns: 20% 60% 20%;
	align-items: start;
	line-height: 1.25;
	padding-bottom: 40px; /* padding hier setzen anstatt gap auf grid -> Berechnung Scrolling in ContentHandler.js */
}

.reservation .teilnehmerList {
	display: none;
}

.reservation .date {
	display: inline-block;
}

.reservation .date-part {
	display: none;
}

.reservation .date:first-child:after {
	content: " - ";
}

.reservation .dateTo {
	display: none;
}

.reservation .room-location {
	/* display: none; */
	color: black;
}

.reservation .title {
	font-weight: bold;
}

.no-reservation {
	grid-column: 1 / -1;
	line-height: 1.25;
}

.column-datetime {
	grid-column: 1;
}

.column-title {
	grid-column: 2;
}

.column-room-markers {
	grid-column: 3;
}

.column-checkinstate {
	display: none;
}

/*
 *	Welcome Screen customizations
 */
.welcomeScreenWrapper .header {
	background-color: black;
}

.welcomeScreenWrapper .sidepanel {
	background-color: black;
}

.welcomeScreenWrapper .card {
	color: white;
	background-color: rgb(0, 0, 0, 0.5);
}

.welcomeScreenWrapper .sidepanel .header {
	display: flex;
	padding-left: 20px;
}