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

/* Style the buttons that are used to open and close the accordion panel */
.accordion {

    color: #444;
    cursor: pointer;
    font-size: 1.08rem;
    padding: var(--global_small_padding);
    width: 100%;
    text-align: left;
/*    border: none;*/
    outline: none;
    transition: all 0.4s;
    font-weight: bold;
    line-height: 1.3;
    min-height: 2.4rem;
}

#page .panel {
	border: none;
}

.accordion,
button.accordion:focus {
	    background-color: rgba(0,0,0,0.11);
}

.sub.accordion {
	background-color: rgba(0,0,0,0.08);
	padding:var(--global_small_padding);
}

.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: 500;
}


.lazy_message + .quickresult_container {
	display: none;
}

.accordion_thema {
	margin-left: 2.4rem;
	margin-right: 1rem;
}


.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: var(--global_small_padding);
	transform: translateX( -50% ) translateY( -0.75rem );
	color: #555;
}

/*#jdf_container_btn {
	float: right;
}*/

.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);
}

.no_job_creation.cloud .sub.accordion:hover,
.sub.accordion:hover, .sub.accordion.active:hover,
.accordion-container .active .sub.accordion {
	background-color: hsl(140,0%,85%);
	color: #111;
}


.accordion small {
	color: hsl(150, 90%, 20%);
	margin-left: 0.5rem;
}


.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:var(--global_small_padding);
}


dl dd {
	background-color: #fff;
	margin: 0 0.5rem 0.5rem;
	opacity: 0;
	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,
.active > .check_block > .panel {
	max-height: 400vh;
	padding: var(--global_padding);
	opacity: 1;
  	overflow-y: auto;
}



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




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


.accordion-container .accordion:hover, 
.accordion-container .accordion.active:hover,
.accordion-container.active .accordion:hover {
	background-color: var(--hmkb_kick);
	color: #333;
}

#ticket_temp .sub.accordion.cancel,
#ticket_container .sub.accordion.cancel,
#ticket_container .accordion-container.active .sub.accordion.cancel {
	background-color: rgba(0,0,0,0.13);
}


#ticket_temp .sub.accordion.cancel:hover,
#ticket_container .sub.accordion.cancel:hover,
#ticket_container .accordion-container.active .sub.accordion.cancel:hover {
	background-color: hsl(210,92%,75%);
}



#ticket_temp .sub.accordion.done,
#ticket_container .sub.accordion.done,
#ticket_container .accordion-container.active .sub.accordion.done {
	border-color: hsl(170,80%,50%);
}


#ticket_temp .sub.accordion.done:hover,
#ticket_container .sub.accordion.done:hover,
#ticket_container .accordion-container.active .sub.accordion.done:hover {
	background-color: hsl(140,85%,75%);
}

#tickets .sub-container {
	margin-bottom: 0.23rem;
}

#ticket_temp .accordion-container.active .sub-container.subordinate .sub.accordion.cancel,
#ticket_container .accordion-container.active .sub-container.subordinate .sub.accordion.cancel {
	background-color: hsl(210,24%,85%);
}


#ticket_temp .accordion-container.active .sub-container.subordinate .sub.accordion.cancel:hover,
#ticket_container .accordion-container.active .sub-container.subordinate .sub.accordion.cancel:hover {
	background-color: hsl(210,24%,75%);
}


.no_job_creation.cloud .sub.accordion.done,
#ticket_temp .accordion-container.active .sub-container.subordinate .sub.accordion.done,
#ticket_container .accordion-container.active .sub-container.subordinate .sub.accordion.done {
	background-color: hsl(160,14%,84%);
}


.no_job_creation.cloud .sub.accordion.done:hover,
#ticket_temp .accordion-container.active .sub-container.subordinate .sub.accordion.done:hover,
#ticket_container .accordion-container.active .sub-container.subordinate .sub.accordion.done:hover {
	background-color: hsl(160,44%,75%);
}

/*#ticket_container .accordion:focus,
#ticket_container .accordion:hover, 
#ticket_container .accordion.active:hover {
	background-color: hsl(180,90%,75%);
	color: #333;
}*/

/*#ticket_container .accordion-container.active .accordion {
    background-color: hsl(200,100%,90%);
    color: #000;
}*/

/* 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: var(--hmkb_kick);
    color: #000;
}*/

/* 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: 500;
	color: #999;
	font-size: 11px;
}


input.visible_switch ~ section.visible_switch_content {
	display: none;
}

input.visible_switch:checked ~ section.visible_switch_content {
	display: block;
}