/* - */
/* Accordion
------------------------------------------ */

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: rgba(0,0,0,0.20);
    color: #444;
    cursor: pointer;
    font-size: 1.15rem;
    padding: 0.75rem 1rem 1rem 1rem;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: all 0.4s;
    font-weight: bold;
    line-height: 1.5;
}

.sub.accordion {
	background-color: rgba(0,0,0,0.10);
	padding: 0.5rem 1rem 0.66rem 1rem;
}

.accordion-container select {
	margin-bottom: 0.5rem;
}


dt[data-accordion-schueler-id] {
	display: flex;
	justify-content: space-between;
}


dt[data-accordion-schueler-id] .right.print_student_button_container {
	float: none;
	flex-grow: 2;
}

.grey .sub.accordion {
	background-color: transparent;
	flex-grow: 13;
	width: auto;
}

.accordion-container .print_student_button_container label {
	font-weight: bold;
}

.accordion-container .print_student_button_container .quickresult {
	font-weight: normal;
}


.lazy_message + .quickresult_container {
	display: none;
}


.lazy_message.hide + .quickresult_container {
	display: inline-block;
	position: relative;
	transform: translateY( 0.75rem );
}

.quickresult_container .note {
	position: absolute;
	left: 50%;
	background-color: #eee;
	border: 1px solid #999;
	padding: 0 0.5rem 0 0.5rem;
	transform: translateX( -50% ) translateY( -0.75rem );
	color: #555;
}


.quickresult_container .quickresult {
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

.quickresult.s0 {
	background: hsl( 0, 200%, 50% );
}

.quickresult.s1 {
	background: hsl( 50, 180%, 50% );
}

.quickresult.s2 {
	background: hsl( 180, 140%, 50% );
}

.quickresult.s3 {
	background: hsl( 150, 130%, 50% );
}

.quickresult.s4 {
	background: hsl( 130, 120%, 50% );
}


/*.print_student_button_container .quickresult::before {
	content: '[';
	color: #999;
	font-weight: bold;
}

.print_student_button_container .quickresult::after {
	content: ']';
	color: #999;
	font-weight: bold;
}*/


.print_student_button_container input {
	margin-left: 1.25rem;
}

.print_student_button_container label {
	display: inline;
	margin-right: 1rem;
}



.progress {
	float: right;
}



.empty_accordion  progress {
	display: none;
}


/*progress::-moz-progress-bar { background: hsl(120,90%,60%); }
progress::-webkit-progress-value { background: hsl(120,90%,60%); }
progress { color: hsl(120,90%,60%); }*/


.grey{
	background-color: rgba(0,0,0,0.10);
}


.sub.accordion:hover, .sub.accordion.active:hover,
.accordion-container .active .sub.accordion {
	background-color: hsl(170,100%,60%);
	color: #111;
}




.print_student_button_container .round {
	background-color: transparent
}


.print_student_button_container svg,
.print_class_button_container svg {
	margin: 0 auto;
	fill: #fff;
	background: #555;
	border: #555 solid 0.33rem;
	width: auto;
	height: 1.5rem;
	transition: all 0.3s ease-out;
	transform: scale(2) translateY(0.2rem) translateX(-0.3rem);
}


.print_class_button_container svg {
	transform: scale(2) translateY(0) translateX(0)
}





.print_student_button_container svg:hover,
.print_class_button_container svg:hover {
	background: #000;
	border: #000 solid 0.33rem;
}



.user_form .accordion {
	font-size: 1rem;
	padding: 0.25rem 1rem 0.5rem 1rem;
}


dl dd {
	background-color: #fff;
	margin: 0 0.5rem 0.5rem;
	opacity: 0.45;
	padding: 0 1rem;
	overflow: hidden;
	max-height: 0;
	transition: all 0.4s ease-in-out;
}


#datenschutz_container {
	margin: 0;
}

#datenschutz_container dl dd {
	margin: 0;
}


dt.active + dd,
.active .panel {
	max-height: 400vh;
	padding: 1rem;
	opacity: 1;
}



.accordion svg {
	transform: translateY(0.4rem);
	margin-right: 0.5rem;
}




.panel {
	margin-bottom: 0;
	padding: 0.5rem;
	font-size: 1rem;
	border: 1px solid #ddd;
}



.accordion:hover, .accordion.active:hover {
	background-color: #555;
	color: #ddd;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.accordion-container.active .accordion {
    background-color: hsl(100,100%,70%);
    color: #444;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 1rem;
    background-color: white;
}


.right_marker {
  float: right;
  transform: rotate(180deg) translate(0.5rem,-0.25rem);
  transition: transform 0.4s ease-in-out;
}

.active .right_marker {
  transform: rotate(0);
}


.empty_accordion .accordion {
	font-weight: normal;
	color: #999;
	font-size: 11px;
}