/*
 * 
 * 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: #325c80;
$baseColor: #4e555c;
$fontColorTable: rgb(78, 85, 92	);
$fontColorLink: #cd1719;
$fontColorAuszeichnung: #cd1719;

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

$backgroundColorHeader: #f2f2f2;
$borderColor: #DBDEE1;

body#bidat {
	margin: 0% 5%;
	font-family: 'Montserrat', sans-serif;
}
body#bidat_teaser {
	margin: 0% 0%;
	font-family: 'Montserrat', sans-serif;
	background-color: #234667;
	color:white;
	.container {
		width:100%;
	}
	.bidat_table .tr:nth-child(odd) {
			background-color: rgba(192, 197, 234, 0.27);

	}
	.teaser_monat {
		text-align: center;
		background-color: rgba(192, 197, 234, 0.97);
		padding: 0px 2px;
		    width: 30px;
	}
	.teaser_tag {
		text-align: center;
		background-color: white;
		padding: 0px 5px;
		    width: 30px;
		
	}
	.col-1 {
		margin-right: 15px;
	}
	.row {
		min-height: 5rem;
	}
	a {
		color: white;
	}
	a:hover {
		color: $fontColorAuszeichnung;
	}
	
}

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

#bidat .btn {
	border-radius: 0px;
}
#monatname {
	min-width: 200px;
	display: inline;
}

nav.monatbar {
	font-size: 2rem;
	width: 100%;
	text-align: center;
	border-bottom: 2px dotted grey;
	border-top: 2px dotted grey;
	padding: 2px 0px;
}

nav.monatbar a {
	padding: 10px;
	margin: 15px;
	color: white;
	text-decoration: none;
}

nav.monatbar a:hover {
	padding: 10px;
	margin: 5 px;
	color: blue;
}

#bidat article {
	grid-area: content;
	background-color: white;
	border: 1px solid $borderColor;
	//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: $fontColorAuszeichnung;
}

h2 {
	text-transform: uppercase;
}

article {
	header {
		text-align: center;	
		padding: 1rem;
	}
}

header {
	background-color: $backgroundColorHeader;
	color: $fontColorAuszeichnung;
	min-height: 3rem;
	border-bottom: 1px solid $borderColor;
}
header {
	& h1,h2,h3,h4,h5,h6 {
	color: $fontColorAuszeichnung;
	}
}

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:2.5rem;
	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:block;
		h3 {
			display:none;
		}
	}
	a {
		color: $fontColorLink;
	}
	color: $fontColorTable;
}

.bidat_table .th {
	background-color: white;
	border-radius: 7px 7px 0 0;
	border-bottom: 3px solid $borderColor;
	color: $fontColorAuszeichnung;
	min-height: 3rem;
	margin-top: 2rem;
	font-weight: bold;
	color: $fontColorTable
}

.bidat_table .tf {
	background-color: white;
	border-radius: 0 0 7px 7px;
	color: $fontColorAuszeichnung;
	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: $buttonColorPrimary;
	border-color:darken($buttonColorPrimary, 0.1);
	color: white !important;
}

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

#bidat_cat_table {
	a {
		margin-right: 5px;
	}	
}

#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 $borderColor;
		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;
	}
	i {
		color:$fontColorAuszeichnung;
		font-size: smaller;
		position: relative;
		top:-10px;
	}

}

.description {
	h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1em;
}

}


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

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