/* Style the tab */
.res_tab {
	overflow: hidden;
	border: 1px solid #b3b3b3;
	background-color: #fafafa;
}

.res_bit form {
	display: inline;
}

/* Style the buttons that are used to open the tab content */
.res_tab button {
	background-color: #fafafa;
	background-image: none;
	border-radius: 0;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 5px 10px;
	transition: 0.3s;
	font-size: 1.1em;
	font-weight: bold;
}

/* Change background color of buttons on hover */
.res_tab button:hover {
	background-color: #ddd;
}

/* Create an active/current tablink class */
.res_tab button.active {
	/* background-color: #dadbda; */
	border-bottom: 3px solid #3b3b3b;
	/* font-weight: 600; */
}

/* Style the tab content */
.res_tabcontent {
	background: #e9e9e9;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
	animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
	from {opacity: 0;}
	to {opacity: 1;}
}

.res_ausgabe {
	display: flex;
	flex-wrap: wrap;
}

.res_ausgabe h1 {
	flex-basis: 100%;
	text-align: center;
}

.res_ausgabe .res_bit {
	flex-grow: 1;
}
.res_add {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.res_add h2 {
	flex-basis: 100%;
	text-align:center;
}

.res_add_save {
	flex-basis: 100%;
	text-align: center;
}
.res_mod {
	background: #e9e9e9;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
}

.res_add_inputs, .res_add_select {
	/* flex-grow: 1; */
	margin: 5px 25px;
}

.res_add_inputs {
	text-align: right;
}    

.reservations_main {
    width: 80%;
}

.reservations_typ {
    background: var(--content-background);
    padding: 10px;
    margin-bottom: 20px;
}

.reservations_typ:last-child {
    margin: 0;
}

.reservations_typ-content {
    background: var(--body-background);
    padding: 10px 15px;
    text-align: justify;
    font-size: 12px;
    color: var(--font-color);
}

.reservations_typ-headline {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--mainfont);
    font-size: 16px;
    font-weight: bold;
    color: var(--headline-color);
    margin-bottom: 5px;
}

.reservations_typBit {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-around;
    gap: 20px;
}

.reservations_bit {
    width: 100%;
}

.reservations_bit-headline {
    font-family: var(--subfont);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--font-color);
    /* font-weight: bold; */
}

.reservations_bituser {
    margin-top: 10px;
    font-family: var(--subfont);
}

.reservations_bituserBit.content {
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--headline-color);
}

.reservations_typ-add {
    margin: 40px auto 0;
    width: 35%;
}

.reservations_formular-input {
    margin-bottom: 8px;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: space-between;
}

.reservations_formular-label {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 35%;
}

.reservations_formular-field {
    text-align: right;
}

.reservations_indexalert {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.reservations_indexalertBit {
    width: 100%;
}

.res_us {
    display: block;
    margin-top: 10px;
}