@font-face {
    font-family: Sans-serif;
    src: url("./webfonts/MADEGoodTimeGroteskPERSONALUSE.otf") format("opentype");
}

html, 
body {
    height: 				100%;
	margin: 				0px;
	background:				lightgrey;
	overflow:				auto;
	font-family: 			Sans-serif;
	font-size: 				16px;
	-webkit-touch-callout: 	none; /* iOS Safari */
    -webkit-user-select:	none; /* Safari */
    -khtml-user-select: 	none; /* Konqueror HTML */
    -moz-user-select: 		none; /* Firefox */
    -ms-user-select: 		none; /* Internet Explorer/Edge */
    user-select: 			none; /* Non-prefixed version, currently supported by Chrome and Opera */
}	

p {
	margin:				0px;
}

.menue {
	position:			relative;
	height:				40px;
	margin:				5px;
	display:			flex;
}

.inputfield {
	position:			fixed;
	text-align:			center;
	top:				-120px;
	left:				500px;
	width:				100px;
}

.buttons {
	background:			gold;
	color:				black;
	text-align:			center;
	font-size:			22px;
	height:				32px;
	width:				32px;
    border: 			3px solid;
	border-radius: 		12px;
	margin-left:		28px;
}

.buttons.inactive {
	background:			beige;
	color:				grey;	
}

i {
	padding-top:		5px;
}

.content {
	touch-action: 		none;
	position:			relative;
	margin:				5px;
}

.settings {
	background:			burlywood;

	/*
	-webkit-transition:	max-height 0.5s linear, height 0.5s linear;
	-moz-transition:	max-height 0.5s linear, height 0.5s linear;
	transition:			max-height 0.5s linear, height 0.5s linear;
	*/
    border: 			3px solid;
	border-radius: 		15px;
	margin-bottom:		5px;	
}

ul {
	margin:				0px;
	padding:			0px;
	display:			inline-block;
}
 li {
	display:			inline-block;	
    border: 			2px solid;
	border-radius: 		10px;
	background:			beige;
	padding:			2px 8px 2px 8px;
	/*
	box-shadow:			3px 3px 3px 2px #888888;
	*/
	margin-top:			5px;
	margin-bottom:		5px;
	margin-right:		5px;
}

.settings_c1 { 
	width:				135px;
	margin-top:			5px;
}

.settings_c2 { 
	width:				100%;
}

.selected { 
	background:			gold;
}

.unselectable { 
	color:				lightgrey;
}

.configuration {
	margin:				10px;
	padding:			2px;
	display:			flex;
    border: 			3px solid;
	border-radius: 		15px;
	background:			lightgrey;
}

span {
	vertical-align:		sub;
	padding-left:		10px;
}

.vocabulary {
	background:			burlywood;
    border: 			3px solid;
	border-radius: 		15px;
	margin-bottom:		5px;
	display:			none;
}

.sentence {
	padding-top:		5px;
	padding-bottom:		5px;
	text-align: 		center;
}

.word {
	display:			inline-flex;		
	vertical-align:		middle;
    font-size: 			22px;
    font-weight: 		600;
    padding-right: 		8px;	
    padding-left: 		8px;	
}

.description {
	display:			inline-flex;		
	vertical-align:		middle;
    font-size: 			18px;
    font-weight: 		400;
	font-style: 		italic;
	padding-bottom:		5px;
}

.letter {
    display: 			block;
    background: 		lightgrey;
    /*border: 			1px solid #79430f;*/
    color: 				black;
    border-radius: 		5px;
    width: 				18px;
    text-align: 		center;
    font: 				600 22px Courier;
    margin-top: 		0px;
    margin-bottom: 		2px;
}	

.letter.question.special {
    background: 		burlywood;
	border:				none;
	display:			block;
}
	
.letter.answer {
    background: 		gold;
	display:			none;
}

.wrong {
    background: 		coral !important;
	display:			block;
	color:				coral !important;
}

.repeat {
	border-style: 		dashed !important;
}

.letter.answer.easy {
    background: 		peru;
	display:			block;
	color:				peru;
}

.letter.answer.special {
    background: 		none;
	border:				none;
	display:			block;
}

.letter.answer.mistake {
    border: 			2px solid red;
}

.shadow {
   -moz-box-shadow:    5px 5px 5px white;
   -webkit-box-shadow: 5px 5px 5px white;
   box-shadow:         5px 5px 5px white;
}

.debug {
	color:				white;
	background:			darkcyan;
    border: 			3px solid;
	border-radius: 		15px;
	display:			none;
	font-size:			12px;
	vertical-align:		middle;
	padding:			20px;
}

.debugline {
	display:			flex;
}

.debugline_c1 {
	width:				150px;
}

.debugline_c2 {
}

.debug span {
	vertical-align:		middle;
	font-weight:		bold;
}

.debug span1 {
	height:				14px;
}

.overview {
	background:			peru;
    border: 			3px solid;
	border-radius: 		15px;
	display:			block;
	text-align:			center;
	padding:			5px;
	margin-bottom:		5px;
}

.overview .space {
 	display:			inline-block;
    text-align: 		center;
	vertical-align:		middle;
	margin:				2px;
}

.overview .space .letter {
    background: 		grey;
    color: 				black;	
	border: 			2px solid black;
    border-radius: 		10px;
    font: 				800 18px Courier;
	width:				42px;
	height:				20px;
}

.overview .space .words {
    background: 		white;
    color: 				black;	
	border: 			2px solid black;
    font: 				800 14px Courier;
	width:				auto;
	padding:			1px 5px 1px 5px;
}

.overview .space .bad {
    background: 		red;	
}

.overview .space .good {
    background: 		gold;	
}

.overview .space .current {
	border: 			2px solid white;
	color:				white;
}

.summary {
    display: 			block;
    color: 				black;
    border-radius: 		5px;
    width: 				auto;
    text-align: 		center;
    font: 				400 18px Sans-serif;
    margin-top: 		0px;
}

.summary.total {
    background: 		darkgrey;
	border:				2px;
	padding:			0px 7px 0px 7px;
	display:			block;
}

.summary.good {
    background: 		gold;
	border:				2px;
	padding:			0px 7px 0px 7px;
	display:			block;
}

.summary.bad {
    background: 		coral;
	border:				2px;
	padding:			0px 7px 0px 7px;
	display:			block;
}