/*
 * 
 * Default CSS für Kalender-App
 * bitte erstellen Sie selbst eine Kopie und binden Sie diese in Ihr templates/header.inc ein
 * dann können Sie jederzeit auf eine korrekte Version zurückkeheren
 * 
 */

$baseColor: #d36f16;
//$baseColor: #d36f16;
$fontColorTable: rgb(78, 85, 92	);


$fontColorTable: rgb(78, 85, 92	);
$fontColorLink: #325c80;
$fontColorAuszeichnung: #d36f16;

$buttonColorPrimary:rgb(207, 207, 207);

$backgroundColorHeader: #d36f16;
$borderColor: #d36f16;



body#bidat {
	margin: 0% 5%;
}

#bidat tbody tr:nth-child(odd) {
	background-color: fade-out($baseColor, 0.9);
}

#monatname {
	min-width: 200px;
	display: inline;
}


nav#bidat-monatbar {
	font-size: 2rem;
	width: 100%;
	text-align: center;
	padding: 2px 0px;
}

nav#bidat-monatbar a {
	padding: 10px;
	color: white;
	text-decoration: none;
}

nav#bidat-monatbar a:hover {
	padding: 10px;
	margin: 5 px;
	color: blue;
}

#bidat article {
	grid-area: content;
	background-color: white;
	border: 1px solid $baseColor;
	//border-image: linear-gradient(to top, #d36f16, rgba(211, 111, 22, 0)) 1 100%;
}

#bidat input {
	line-height: 1.5rem;
	padding: 4px 10px;
	width: 300px;
}

#bidat input[type=checkbox] {
	width: 8px;
	margin-top: 0.5em;
}

#bidat .form-check-label {
	padding-left: 2.5rem;
	margin-bottom: 0;
	cursor: pointer;
}

#bidat .was-validated input:valid {
	border-color: green;
}

#bidat .was-validated input:invalid {
	border-color: red;
}

#bidat form .formrow {
	margin-bottom: 1em;
}

#bidat form label {
	line-height: 1.5rem;
	padding-top: 2px;
	display: inline-block;
	min-width: 200px;
	text-align: right;
	font-weight: bold;
	margin-right: 2rem;
}

#bidat form .invalid-feedback {
	display: none;
	padding-left: 250px;
	color: red;
	font-size: 0.8em;
}

#bidat form input:invalid ~ .invalid-feedback {
	display: block;
}

#bidat .form-control {
	margin-top: 20px;
	width: 300px;
	display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: $baseColor;
}

article {
	header {
		text-align: center;	
	}
}

header {
	background-color: $baseColor;
	color: white;
	min-height: 3rem;
}
header {
	& h1,h2,h3,h4,h5,h6 {
	color: white;
	}
}

header nav div.active {
	border-bottom: 2px solid white;
}

header nav div.inactive {
	color: rgba(255, 255, 255, 0.2);
}

header nav div.col-md-auto {
	padding-left: 1rem;
	padding-right: 1rem;
}

select#sw_nav {
	min-width: 200px;
	line-height: 1.5rem;
	height:2rem;
	padding: 4px 10px;
}

body > footer {
	position: fixed;
	border-top: 1px solid #5a90be;
	left: 0px;
	bottom: 0px;
	height: 3rem;
	width: 100%;
	background-color: $baseColor;
	color: white;
}

footer .container .row,
header .container .row {
	height: 3rem;
}

.capitalize {
	text-transform: uppercase;
}

main {
	padding-top: 2em;
}

main #bidat_content {
	border-right: 1px dotted gray;
}

.bidat_table {
	border-color: $baseColor; 
	font-size: 0.85rem;
	.brd-bottom {
		border-bottom: 1px solid $baseColor;	
	}
	.brd-left {
		border-left: 1px solid $baseColor;	
	}
	.brd-right {
		border-right: 1px solid $baseColor;	
	}
	details {
		display:none;
	}
	a {
		color: $baseColor;
	}
	color: $fontColorTable;
}

.bidat_table .th {
	background-color: $baseColor;
	border-radius: 7px 7px 0 0;
	color: white;
	min-height: 3rem;
	margin-top: 2rem;
}

.bidat_table .tf {
	background-color: $baseColor;
	border-radius: 0 0 7px 7px;
	color: white;
	min-height: 3rem;
	margin-top: 0rem;
}

.bidat_table .tr {
	min-height: 3.5em;
}

.bidat_table .tr:nth-child(odd) {
	background-color: fade-out($baseColor, 0.9);
}

.var_hidden {
	display: none;
}

.btn-primary {
	background-color: $baseColor;
	border-color:darken($baseColor, 0.1);
	color: white !important;
}

.btn-primary:hover {
	background-color: fade-out($baseColor, 0.2);
	border-color:darken($baseColor, 0.1);
	color: white !important;
}

#bidat-event-single {
	display: grid;
	grid-template-columns: 100%;
	margin-top: 2rem;
	border-radius: 7px;

	header {
		border-radius: 7px 7px 0 0;
		padding-top:0.5rem;
		grid-row: 1;
	}

	
	a {
		color: $baseColor;
		font-weight: bold;
	}
	
	footer {
		grid-row: 4;
		text-align: center;
		border-top: 2px dotted $baseColor;
		padding-top:0.5rem;
		padding-bottom:0.5rem;
		background-color: fade-out($baseColor, 0.9);

		
	}
	.underline {
		margin-top:1rem;
		color:$baseColor;
		font-weight: bold;
		border-bottom: 1px solid $baseColor;
	}
	
	.ch {
		color:$baseColor;
		font-weight: bold;
	}
	
}

#bidat-event-description {
	grid-row: 2;
	padding:2rem;
}

#bidat-event-details {
	grid-row: 3;
	background-color: fade-out($baseColor, 0.7);
	padding:2rem;
}


#bidat-event-registration {
		border-radius: 7px 7px 7px 7px;
		margin: 2rem 0; 
		.infoblock {
				background-color: fade-out($baseColor, 0.7);
				padding: 1rem 4rem;
				margin:0px 0px 18px 0px;
		}
		.submitrow {
			margin-left: 4rem;
		}

}


#bidat-nav {
	display: grid;
	grid-template-columns: 50% 25% 25%;
	
}
#bidat-monatbar {
	grid-column:1;
	grid-row:1;
	#th_name {
		background-color: fade-out($baseColor, 0.8);
		height:2rem;
		padding-top: 0.3rem;
	    margin-left: -15px;
		margin-right: -15px;

	}
	#th_back {
		text-align: right;
		margin-right: 0px;
	}
	#th_fwd {
		text-align: left;
		margin-left:0px;
	}

} 
#bidat-kategorie {
	grid-column:2;
	grid-row:1;
} 
#bidat-suche {
	grid-column:3;
	grid-row:1;
} 
#bidat-suche {
	input {
		border-radius: 7px 0px 0px 7px;
		margin-right: 0px;
		width: 150px;
		padding:0px;
		height:2rem;
	}
	button {
		border-radius: 0px 7px 7px 0px;
		margin-left: 0px;
		height:2rem;
		span {
			display:none;
		}
	} 
	.form-control {
		margin-top: 0px;
		width: 150px;
		display: inline-block;
	}
	
}

#termin-selector {
	margin-top:5px;
	section {
		&.inactive{
			background-color: fade-out($baseColor, 0.7);
		}
		h3 {
			font-size: 1.2rem;
			font-weight: bold;
		}
		
		background-color: $baseColor;
		min-height: 5rem;
		border-radius: 7px;
		padding: 5px;
	}
}

.th2 {
	h3 {
		font-size: 1.0rem;
		font-weight: bold;
	}
	background-color: fade-out($baseColor, 0.7);
	padding:0px 5px;
	margin-bottom: 5px;

}

.alertbox {
		background-color: fade-out(red, 0.7);
		margin-left:4rem;
		padding:10px;
		border-radius: 7px;
		max-width: 600px;

}
input.inaktiv{
	background-color: grey;
}

.warenkorb {
	background-color: fade-out($baseColor, 0.7);
	padding:20px;
	.sumrow {
		border-top: 1px solid $baseColor;
		font-weight: bold;
	}
	.row {
		min-height:2rem;
	}
	.headrow {
		border-bottom: 1px solid $baseColor;
		font-weight: bold;

	}
}



@media (min-width: 576px) {}

@media (min-width: 768px) {
	
	#bidat-event-single {
		grid-template-columns: 60% 40%;
		header {
			grid-row: 1;
			grid-column: 1 / span 2;
		}
		
	}
	
	#bidat-event-description {
		grid-column: 1;
	}
	
	#bidat-event-details {
		grid-column: 2;
		grid-row: 2 /span 2;
	}
	footer {
		grid-column: 1 / span 2;
		
	}
	
	.var_hidden {
		display: block;
	}

	#bidat-event-registration {
		display:grid;
		grid-template-columns: 50% 50%;
		header {
			grid-column: 1 / span 2;

		}
		.infoblock {
			grid-column: 1 / span 2;
		}
		
		section {
			grid-row:3;
			grid-column:1;
			
		}
		aside {
			grid-row:3;
			grid-column:2;
			align-self:end;
		}
	}
 

}

@media (min-width: 1024px) {
	.var_hidden {
		display: block;
	}
}
/* Add Animation */

@-webkit-keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}
	to {
		top: 0;
		opacity: 1;
	}
}

@keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}
	to {
		top: 0;
		opacity: 1;
	}
}

.bold {
	font-weight: bold;
}