/* ------------   BASIC ------------*/
body {
    font-family: Candara; sans-serif;
    font-weight: 100;
    font-size: 1em;
}

.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1400px;
}

a:hover {
    color: var(--main-o)!important;
}


/* ------------ STICKY FOOTER ----------------- */
.footer {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    text-align: center;
    z-index: 9999;
}

.container {
    padding-bottom: 5em;
    margin-bottom: 
}


/* ------------ BACKGROUND FARBEN ----------------- */
.bg-main {
    background-color: var(--main);
    color: var(--main-o);
}

.bg-main a {
    color: var(--main-o) !important;
}

.bg-main-second {
    background-color: var(--minor);
    color: var(--minor-o);
}

.bg-main-second a {
    color: var(--primary);
}
.bg-primary {
    background-color: var(--primary)!important;
    color: var(--primary-o)!important;
}
.bg-info {
    background-color: var(--info)!important;
    color: var(--info-o)!important;
}
.bg-danger {
    background-color: var(--danger)!important;
    color: var(--danger-o)!important;
}
.bg-success {
    background-color: var(--success)!important;
    color: var(--success-o)!important;
}

/* ------------ TEXT FARBEN ----------------- */

.text-main {
    color: var(--main) !important;
}

.text-main-o {
    color: var(--main-o) !important;
}


.text-minor {
    color: var(--minor) !important;
}

.text-minor-o {
    color: var(--minor-o) !important;
}
.text-accent {
    color: var(--primary) !important;
}
.text-secondary {
    color: var(--secondary) !important;
}
a.text-secondary:hover {
    color: var(--primary) !important;
}
.text-primary {
    color: var(--primary) !important;
}
.text-info {
    color: var(--info) !important;
}
.text-success {
    color: var(--success) !important;
}

/* ------------ BORDER FARBEN ----------------- */
.border-info {
    border-color: var(--info) !important;
}

.border-main {
    border-color: var(--main) !important;
}
.border-main-o {
    border-color: var(--main-o) !important;
}
/* ------------ BUTTON FARBEN ----------------- */

.btn-accent {
    background-color: var(--primary);
    color: var(--primary-o);
}
.btn-accent:hover {
    background-color: var(--primary);
    color: var(--primary-o);
}
.btn-accent:active {
    background-color: var(--primary);
    color: var(--primary-o);
}
.btn-accent:visited {
    background-color: var(--primary);
    color: var(--primary-o);
}

.btn-main-o {
    background-color: var(--main-o);
    color: var(--main);
}
.btn-main-o:hover {
    background-color: var(--main-o);
    color: var(--main);
}
.btn-main-o:active {
    background-color: var(--main-o);
    color: var(--main);
}
.btn-main-o:visited {
    background-color: var(--main-o);
    color: var(--main);
}

.btn-outline-main-o {
    background-color: transparent;
    color: var(--main-o);
    border-color: var(--main-o);
}
.btn-outline-main-o:hover {
    background-color: var(--main-o);
    color: var(--main);
}
.btn-outline-main-o:active {
    background-color: var(--main-o);
    color: var(--main);
}
.btn-outline-main-o:visited {
    background-color: transparent;
    color: var(--main-o);
    border-color: var(--main-o);
}

.btn-outline-accent {
    background-color: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline-accent:hover, a.btn-outline-accent:hover {
    background-color: var(--primary);
    color: var(--primary-o);
}
.btn-outline-accent:active {
    background-color: var(--primary);
    color: var(--primary-o);
}
.btn-outline-accent:visited {
    background-color: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary {
    background-color: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline-primary:hover, a.btn-outline-primary:hover {
    background-color: var(--primary);
    color: var(--primary-o);
}
.btn-outline-primary:active {
    background-color: var(--primary);
    color: var(--primary-o);
}
.btn-outline-primary:visited {
    background-color: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
/* ------------ BORDER COLORS ----------------- */
.border-accent {
    border-color: var(--primary) !important;

}

.border-accent .card-header {
    border-color: var(--primary) !important;
}

/* ----------- CARDS ---------------------------*/
.card a:hover {
    text-decoration: none !important;
}

/* ------------ ÜBERSCHRIFTEN ----------------- */
h1 {
    font-size: 1.6em;
    font-weight: 200;
}
h2 {
    font-size: 1.4em !important;
    margin-bottom: 0px;
    padding-bottom: 0px;
    font-weight: 200;
}
h3 {
    font-size: 1.2em !important;
    font-weight: 200;
}

.footer .nav {
    font-size: 1.7em;
}

/* --------------- NAVTABS --------------------*/
.nav-tabs {
    border-bottom: 1px solid var(--primary);
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--primary);
    background-color: transparent;
    border-color: var(--primary);
    border-bottom: 2px solid var(--minor);
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: var(--primary);
    border-bottom: 2px solid var(--minor);
}
/* --------------- HELPER --------------------*/
.awl-buttons {
    font-size: 2.5em;
    line-height: 0;
    text-align: right;
}
.bigger {
    font-size: 150%;
}

hr.minor {
    border-top: 1px solid var(--minor);
}
.icon {
 font-size: 1em;
}
.w-95 {
    width: 95%;
}

.note-input {
    background-color: var(--main);
    border: 1px dotted var(--primary-p);
    
    color: var(--primary-p);
    margin-right: 1em;
    padding: 0.5em 0.7em;
    border-radius: 5px;
    resize: none;
}
input.note-input:focus, textarea.note-input:focus {
    background-color: transparent;
    border: 1px solid var(--primary);
    outline: none !important;
    color: var(--primary);

}
.name { 
    font-size: 1.4em;
    font-weight:100;
}
.time {
    color: var(--primary);
}
.instrument {
    font-style: italic;
}
.textarea-studentinfo {
    width: 100%;
    color: var(--main-o);
    height: 500px;
    padding: 0em;
    border: 0px;
    border-left: 2px solid var(--main-o);
    padding-left: 1em;
    background-color: var(--minor);
}

.textarea-studentinfo:focus {
    outline: none !important;

    color: var(--primary);

    padding-left: 1em;
    border-left: 2px solid var(--primary);

}

.dropdown-toggle.caret-off::after {
    display: none;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  color: var(--primary-o)!important;
  background-color: var(--primary-p)!important;
  border-color: var(--primary-p)!important;
}

/* ----------------- Timeline ---------------------------*/

.flex-parent {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 98%;
	height: 100%;
}

.input-flex-container {
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 60vw;
	height: 200px;
	max-width: 95%;
	position: relative;
	z-index: 0;
}

.input {
	width: 25px;
	height: 25px;
	position: relative;
	border-radius: 50%;

}

.input:hover {
	cursor: pointer;
}

.input::before {
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
	top: 50%;
	transform: translateY(-50%);

	width: 6vw;
	height: 5px;
	max-width: 150px;
}
.input.bg-success::before {
    background-color: var(--success-p);
}
.input.bg-danger::before {
    background-color: var(--danger-p);
}
.input.bg-info::before {
    background-color: var(--info-p);
}
.input::before {
	left: calc(-4vw + 12.5px);
}

.input::after {
	right: calc(-4vw + 12.5px);
}

.input.active {
	background-color: var(--main-o)!important;
}



.input.active span {
	font-weight: 700;
}

.input.active span::before {
	font-size: 13px;
}

.input.active span::after {
	font-size: 15px;
}

.input.active ~ .input, .input.active ~ .input::before, .input.active ~ .input::after {
	
}

.input span {
	width: 1px;
	height: 1px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	visibility: hidden;
}

.input span::before, .input span::after {
	visibility: visible;
	position: absolute;
	left: 50%;
}

.input span::after {
	content: attr(data-year);
	top: 25px;
	transform: translateX(-50%);
	font-size: 14px;
}

.input span::before {
	content: attr(data-info);
	top: -105px;
	width: 170px;
	transform: translateX(-5px) rotateZ(-45deg);
	font-size: 12px;
	text-indent: -10px;
}

.description-flex-container {
	width: 80vw;
	font-weight: 400;
	font-size: 22px;
	margin-top: 100px;
	max-width: 100%;
}

.description-flex-container p {
	margin-top: 0;
	display: none;
}

.description-flex-container p.active {
	display: block;
}

@media (min-width: 1250px) {
	.input::before {
		left: -37.5px;
	}

	.input::after {
		right: -37.5px;
	}
}

@media (max-width: 850px) {
	.input {
		width: 17px;
		height: 17px;
	}

	.input::before, .input::after {
		height: 3px;
	}

	.input::before {
		left: calc(-4vw + 8.5px);
	}

	.input::after {
		right: calc(-4vw + 8.5px);
	}
}

@media (max-width: 600px) {
	.flex-parent {
		justify-content: initial;
	}

	.input-flex-container {
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		height: auto;
		margin-top: 15vh;
	}

	.input {
		width: 60px;
		height: 60px;
		margin: 0 10px 50px;
		background-color: #AEB6BF;
	}

	.input::before, .input::after {
		content: none;
	}

	.input span {
		width: 100%;
		height: 100%;
		display: block;
	}

	.input span::before {
		top: calc(100% + 5px);
		transform: translateX(-50%);
		text-indent: 0;
		text-align: center;
	}

	.input span::after {
		top: 50%;
		transform: translate(-50%, -50%);
		color: #ECF0F1;
	}

	.description-flex-container {
		margin-top: 30px;
		text-align: center;
	}
}

@media (max-width: 400px) {
	body {
		min-height: 950px;
	}
}


.btn:focus,.btn:active {
    outline: none !important;
    box-shadow: none;
 }
 .img-thumbnail {
    background-color: var(--secondary-h);
    border-color: var(--secondary-h);
 }

 .table>:not(caption)>*>* {
    background-color: transparent !important;
 }


 b, strong {
    font-weight: bold !important;
}

.form-control {
    background-color: var(--main-p);
    border-color: var(--main-p);
}
.form-control:focus {
    background-color: var(--main-p);
    border-color: var(--primary-p);
}
input::placeholder {
    color: var(--main-o) !important;
}

.progress, .progress-stacked {

    --bs-progress-bg: var(--main-p) !important;

}

.vertical {
    transform: rotate(-90deg);
  } 

.btn {
    border-radius: 5px;
}