/*!
Custon CSS - overrites some Botstrap settings.
created by Emanuel
 */

/*custom Font*/
/* Die CSS ist lang. In mehrere nach Thema splitten? */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap');
	
.merriweather-regular {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: normal;
}

.merriweather-bold {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: normal;
}

.merriweather-regular-italic {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: italic;
}

.merriweather-bold-italic {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: italic;
}
	
/* general */
.btn-primary{
	background-color:#0BFADE;
	border-color: #0BFADE;
	color:#002140;
}
.btn-primary:hover{
	background-color:#04DBC2;
	border-color: #04DBC2;
	color:#002140;
}
.jumbotron.dark-bg{
	background: #002140
}

h1, h4, h5 {
	color:#002140 ;
	font-family: "Merriweather", serif;
    font-weight: 700;
    font-style: normal;
}

.only-print{
	display: none
}

/* Konfigurator */

.progress {
	background-color: #cdcdcd;
}
.progress-bar{
	background-color: #002140
}
.konfigurator .card:hover,
.konfigurator .card.active{
	border:1px solid #0BFADE;
	cursor: pointer;
	background: #E1F3F1;
}

.jumbotron.jumbotron-fluid.konfigurator {
	margin: 0 16px 32px;
	border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.konfigurator input{
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 5px; /* Specified height */
  background: #ababab; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

.konfigurator input::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 20px; /* Set a specific slider handle width */
  height: 20px; /* Slider handle height */
	
  background: #0BFADE; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.konfigurator input::-moz-range-thumb {
  width: 20px; /* Set a specific slider handle width */
  height: 20px; /* Slider handle height */
  background: #0BFADE; /* Green background */
  cursor: pointer; /* Cursor on hover */
border-radius:20px;
}

/* ENDE Konfigurator */

/* Netzwerk Startseite */
.visnet-box{
  position: relative;
}
.visnet-box .card{
  position:absolute;
  z-index: 2;
  left: 20px;
  top:20px;
  max-width: 700px;
  max-height: 100%;
  overflow-y: auto;
}
.visnet-box > div{
  padding: 0;
}

/* bootstrap basics - just copied by now */
:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;
}

/*erweitern custom*/

#bmbf-logo{
	max-width: 100%;
	width: 200px;
	margin-right: 50px;
}

#eu-logo{
	max-width: 100%;
	width: 300px;
}

#logo-container{
	margin-bottom: 20px;
}

.quickcheck-content .tabbable ul{
	display:none;
}

.shiny-input-container:not(.shiny-input-container-inline){
	width:auto;
}

.quickcheck-content .card-body .row:last-child{
	text-align:center;
	display:initial;
}
.quickcheck-content .card-body .row:last-child button{
	max-width:200px;
	display:inline-block;
}
#quickcheck-btnLeft{
	margin-right:20px
}
.quickcheck-intro{
	padding:40px 0
}

.shiny-input-container .checkbox input:checked {
	background-color: #002140;
	border-color: #002140;
}


.control-label,
.quickcheck-intro .cardd-header{
	color: #002140;
	font-family: "Merriweather", serif;
}
.quickcheck-content{
	border-radius:0;
	background:#f2f2f2;
	padding:20px;
}
.quickcheck-content .control-label,
.quickcheck-content .card-body{
	margin-bottom:60px;
}

.quickcheck-content .form-group > .irs{
	width:70%;
	margin:0 auto 60px;
}
.question-with-img img{
  max-width:30%;
	float:right;
}
.quickcheck-content .question-with-img .form-group{
  max-width: 70%;
  padding-right:12px;
}
.quickcheck-content .question-with-img .form-group > .irs{
	width:100%;
	margin:0;
}
.quickcheck-content .progress{
	height:5px;
}

.quickcheck-content .shiny-options-group {
display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px 20px;
  grid-auto-flow: row;
  width: 70%;
margin: 0 auto 30px;
}
.quickcheck-content .shiny-options-group .checkbox {
	background-color:#fff;
	padding: 16px;
}

.quickcheck-content .shiny-options-group .checkbox span{
	width: calc(100% - 30px);
  display: inline-block;
}

.quickcheck-content .shiny-options-group .checkbox input:checked {
	background-color: #002140;
	border-color: #002140;
}

.irs--shiny .irs-bar {
	background: #002140;
}

.irs--shiny .irs-handle {
	background: #002140;
}

.irs--shiny .irs-handle:hover {
	background: #002140;
}

.irs.irs--shiny .irs-handle:active {
	color: #002140;
	background-color: #002140;
	border-color: #002140;
}
	

.irs--shiny .irs-single{
	background-color: #002140;
}

#lernpfad-cards {
  margin-bottom: 25px;
}


#lernpfad-qrcode,
#lernpfad-pdf {
  margin-bottom: 20px;
}

#lernpfad-cards .card-body h5,
#marktplatz-cards .card-body h5{
  font-size:1rem;
  margin-bottom: 0;
}

#lernpfad-cards[data-full-screen="true"],
#marktplatz-cards [data-full-screen="true"] {
	height: fit-content !important;
	bottom: auto;
	padding-bottom: 50px !important;
}

#lernpfad-cards  .card-header,
#marktplatz-cards .card-header{
  min-height: 60px;
}

#lernpfad-cards  .card-header .lernpfad-button {
  float:right;
  padding: 5px;
  margin-top: 4px;
}

#lernpfad-cards .card-body,
#marktplatz-cards .card-body{
  max-height:250px; 
  overflow: hidden;
  margin-bottom: 20px;
}

#lernpfad-cards .card-body:after,
#marktplatz-cards .card-body:after{
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	display:block;
	content:'';
	width:100%;
	height:40px;
	position:absolute;
	bottom:20px;
	left:0;
} 

#marktplatz-cards > .bslib-grid{
  padding-top: 20px;
}

#lernpfad-cards .bslib-card,
#marktplatz-cards .bslib-card{
  padding-bottom: 20px;
}

.selectize-dropdown .selected{
	background-color: #002140ba;
}


#qrplot{
	display: none
}

.bslib-card{
	max-width: 1300px;
	margin: auto;
}
#lernpfad-cards  .card-header .form-group,
#marktplatz-cards .card-header .form-group{
	line-height: 1.3;
	background: #f2f2f2;
	padding: 7px 12px 2px 12px;
	border-radius: 4px;
	position: absolute;
	top: 10px;
  right:10px;
  text-align: left;
	z-index: 2;
	margin: auto;
}
#lernpfad-cards .card-header .form-group:hover,
#marktplatz-cards .card-header .form-group:hover{
  background: #56feca;
}

#marktplatz-ButtonFilter .btn{
  width: calc(33.33% - 16px);
  margin: 0 4px 12px
}

.bslib-card.warenkorb{
  display:block;
  width: calc(100% - 30%);
  max-width: none;
  margin:auto;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
  position:fixed;
  height:calc(100% - 20px);
  z-index: 5
}
.warenkorb .card-body,
.warenkorb .card-header{
  max-width:1300px;
}
.warenkorb .card-header{
  cursor: pointer;
}
#marktplatz-warenkorb .card{
  margin-bottom:10px
}
#marktplatz-warenkorb .card-header{
  width:100%;
}

.warenkorb .card-header .bi-x-lg{
  float:right;
}

#marktplatz-warenkorb .card-header .shiny-input-container{
  float: right;
}
.warenkorb.klein {
  position: fixed;
  top:50%;
  right:0;
  z-index: 3;
  height: auto;
  width: fit-content;
  left: auto;
  transform: translate(0, 0);
}
.warenkorb.klein .card-body{
  width: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
}

.warenkorb.klein .card-header{
  background: none;
}

.warenkorb.klein .card-header .bi-x-lg{
  display: none;
}

#marktplatz-ButtonFilter .btn-outline-primary{
  --bs-btn-color: #002140;
  --bs-btn-border-color: #002140;
  --bs-btn-hover-bg: #002140;
  --bs-btn-hover-border-color: #002140;
  --bs-btn-active-bg: #002140;
  --bs-btn-active-border-color: #002140;
}
#marktplatz-suche{
  padding: 30px 0;
  overflow: visible;
  margin-bottom: 15px;
}
#marktplatz-suche > .card,
#marktplatz-suche > .card .card-body{
  overflow: visible;
}

@media (max-width: 1024px) {
  #lernpfad-cards .accordion-body > .bslib-grid,
  #marktplatz-cards > .bslib-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  #marktplatz-suche .card-body > .bslib-grid {
    grid-template-columns:repeat(1, minmax(0, 1fr)) !important;
  }
  .quickcheck-content .shiny-options-group{
    width:100%;
  }
}

@media (max-width: 768px) {
	.quickcheck-content .shiny-options-group {
	  grid-template-columns: 1fr 1fr;
	  gap: 10px ;
	  grid-auto-flow: row;
	  width:100%
	}
	.quickcheck-content .form-group > .irs{
		width:100%;
	}
	#logo-container{
		flex-direction: column;
		margin-bottom: 20px;
	}

}

/* pdf Export */
@media print {
	.navbar, .no-print{
		display:none;
	}
	.collapse:not(.show):not(.in){
		display:block
	}
	.accordion,
	#lernpfad-cards,
  .container{
	width: 100%;
	max-width: 100%;
  }
}