/* total_recall
	ak 2023
*/

:root {
	font-size: max(1.9vh, 0.9vw);

	--col-btn: #286090;
	--col-panel: #D0D0D0;
	--col-panel-dark: #A0A0A0;
	--col-score: #800000;
	--col-text: #0e0e0e;

	--font-big: 1.2rem;
	--spacing: 1rem;
}
  
* {
	box-sizing: border-box;
}

body {
   display: flex;  
   align-items: center;
   justify-content: center;
 
   height: 100vh;
   width: 100vw;
   padding: 0;
   margin: 0;

   color: var(--col-text);
   background: url(graph/bg.jpg);
   background-size: cover;
   font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
   font-style: normal;
   font-weight: normal; 
}


a {
	color: #F7F7F7 !important; 
	font-weight: bolder !important;
	text-decoration: none !important;
	transition: all 0.5s ease-in-out 0s;
}

a:hover {
	color: #C7D5FF !important;
	text-decoration: none !important;
}

button {
	color: #fff !important;
	background-color: #286090;
	border: none;
	border-radius: 0.4rem;
	cursor: pointer;
	font-family: inherit;
	line-height: 1.42857143;
	margin-right: 0.7rem;
	padding: 0.5rem 0.8rem;
	transition: all 0.5s ease-in-out 0s;
	vertical-align: middle;
}
button:hover {
	color: #fff;
	background-color: #337ab7;
}
button:disabled {
	background-color: #A0A0A0;
	cursor: default;
}


.button_big { 
	font-size: var(--font-big);
	padding: 0.7rem 1.1rem;
}
  
input, select {
	background: white;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 0.2rem;
	/* -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); */
	/*height: 35px;*/
	color: #555;
	font-family: inherit;
	line-height: 1.42857143;
	margin-right: 0.7rem;
	padding: 0.5rem 0.8rem;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	vertical-align: middle;
	width: 25rem;
}

label {
	display: inline-block;
	font-size: 0.9rem;
	margin-right: 0.7rem;
	min-width: 100px;
	min-width: 6.25rem;
	text-align: right;
}


/****** CSS CLASSES ***************************************************************************************************************************/

.bold {
	font-weight: bold;
}

.center {
	text-align: center;
}

.container {
	width: 55vw;
	margin: auto;	
	/* margin-top: 1rem; */
}


.cursorHand {
	cursor: pointer;
}

.div_Answer {
	display: flex;
	align-items: center;
	justify-content: center;

	background: var(--col-panel);
	min-height: 5.4rem;
	margin-bottom: var(--spacing);
	padding: var(--spacing);
	width: 100%;	
}

.div_AnswerNr {
/* 	display: flex;
	align-items: center;
	justify-content: center; */
	background-color: var(--col-btn);
	color: var(--col-panel);
	font-size: var(--font-big);
	text-align: center;
	height: 100%;
	width: 2.5rem;
}

.div_Answertext {
	padding-left: var(--spacing);
	width: 100%;	
}



.div_Category {
	background: transparent !important;
	color: var(--col-panel-dark);
	font-size: 0.8rem;
	margin-bottom: calc(0.5*var(--spacing)) !important;
	margin-top: 1rem;
	/* margin-right: calc(0.5*var(--spacing)) !important; */
	padding: 0 !important;
	padding-top: 0px !important;
	width: 15%;
}

.div_Category > div {
	background: var(--col-panel-dark) !important;
	color: var(--col-text);
	font-size: 0.8rem;
	height: 1.8rem;
	margin: 0 !important;
	padding: calc(0.5*var(--spacing)) !important;
	padding-top: 0.3rem !important;
	padding-bottom: 0.5rem !important;
	overflow: hidden;
}


.div_Flex {
	display: flex;  
	flex-wrap: wrap;
	gap: calc(0.5*var(--spacing)) !important;
}

.div_Grid {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}


.div_HeaderLogo {
	margin-left: auto; 
	margin-top: auto;
}

.div_HeaderLogo img {
	width: 26vw;
}


.div_Panel { 
	background: var(--col-panel);
	padding: var(--spacing);
	margin-bottom: var(--spacing);
	position: relative;
}

.div_Panel_Question { 
	font-size: var(--font-big);
	min-height: 6.3rem;
}

.div_QNr {
	color: var(--col-panel);
	font-size: var(--font-big);
	padding: 0.8rem;
}

.div_Score {
	border: 0.2rem solid var(--col-score);
	color: var(--col-score);
	font-size: var(--font-big);
	margin-left: auto;
	margin-bottom: 0;
	padding: 0.8rem;
}

.div_Score > div {
	display: inline-block;
	min-width: 8rem;
	text-align: right;
}

.div_Select > div:not(:last-child) {
	margin-bottom: 0.7rem;
}

.div_Solution {
	background: #B0B0B0;
	min-height: 8.6rem;
}


.div_Source {
	background: #A0A0A0 !important;
	font-size: 0.8rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.hidden_ak {
	display: none;
}

.hoverLight:hover {
	background: #F0F0F0 !important;
	transition: all 0.5s ease-in-out 0s;
}


.Quiz_Antwort_correct {
	background: #93B555;
	cursor: default;
}

.Quiz_Antwort_incorrect {
	background: #C65C22;
	cursor: default;
}


.small {
	font-size: small;
}

.smaller {
	font-size: smaller;
}

  

/* Tablet adjustments */

@media (max-width: 1024px) {
	:root {
		font-size: clamp(1.5vh, 14px, 0.9vw);
		/* font-size: clamp(1.9vh, 14px, 0.9vw); */
	}

	.container {
		width: 90vw;
	}
	
	.div_Category {
		flex: 1;
	  }
	  
	.div_HeaderLogo {
		order: -1;
		text-align: right;
		width: 100%;
	}
	
	.div_HeaderLogo img {
		width: 42vw;
	}
}


/* Smartphone adjustments */

/* @media (max-width: 767px) { */
@media (max-width: 600px) {
	:root {
		font-size: 12px;
		--font-big: 14px;
		--spacing: 12px;
	}

	.container {
		min-height: 100vh;
		padding-top: 1rem;
	}

	.div_Answer {
		min-height: 60px;
	}

	.div_Category {
		flex-grow: 1;
		margin-top: 0;
	}
	._div_Category:last-of-type {
		margin-right: 0;
	}
	
	.div_HeaderLogo {
		order: -1;
	}
	
	.div_HeaderLogo img {
		width: 90vw;
	}

	.div_Panel_Question {
		min-height: 5.5rem;
	}

	.div_Score > div {
		min-width: unset;
	}


	.hidden-xxs {
		display: none !important;
	}

	input, select {
		width: 100%;
	}

	label {
		margin-right: 0;
		text-align: left;
	}
		
	.nobr {
		white-space: normal;
	}

}


@media (max-width: 380px) {
/* Slim mobiles */
	.div_Score {
		min-width: 7rem;
		font-size: 1rem;
	}
}


@media (max-aspect-ratio: 80/100) and (min-width: 769px) {
	/* hochkant */
		:root {
			/* font-size: max(0.8vh, 0.9vw) !important; */
		}
	
		.container {
			/* width: 80vw; */
		}
	}


@supports not (display: grid) {
/* For f*****g old iPads */
	.div_Flex > div {
		margin-right: 0.4rem;
	}
}