body {
	background-color: blue;
	font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
	color: yellow;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge */
	user-select: none;           /* Non-prefixed version, currently not supported by any browser */
	padding: 0px;
	margin: 0px;
}

#titleString {
	padding: 1em;
	font-weight: bold;
	text-align: right;
}

#mainMenu {
	position: sticky;
	top: 0px;
	overflow: hidden;
	background-color: green;
	padding: 3px;
	margin: 0px;
	
}

#btnWordCardOnOff, #spanToHideFilter, #btnApplyFilter {
	display: none;
}

#divAllVocab {
	text-align: center;
	justify-content: center;
	align-items: center;
	font-size: 1vw;
	display: table;
	width: 100%;
}

/* Dropdown Content (block by Default) */
#myDropdown {
	display: block;
	min-width: 10em;
	border: 1px solid yellow;
	border-radius: 5px;
	width: 80vw;
	margin: 1em;
	margin-left: 10vw;
	
}

/* Links inside the dropdown */
.punktMenuSlovar {
	color: yellow;
	padding: 0.7em;
	font-weight: bold;
	text-decoration: none;
	display: block;
	border: 1px solid yellow;
}

.punktMenuSlovar small {
	color: white;
}

/* Change color of dropdown links on hover */
.punktMenuSlovar:hover {
	color: white;
	background-color: green;
	cursor: pointer;
}

input.mainMenuButtons {
	/*position: inline;*/
	height: 3em;
	border: 1px solid yellow;
	border-radius: 5px;
	width: fit-content;
	cursor: pointer;
}

/* button on hover & focus */
.input.mainMenuButtons:hover, input.mainMenuButtons:focus {	
	background-color: blue;
	cursor: pointer;
}

#btnApplyFilter {
	height: 3em;
}

div.allignRight {
	float: right;
	text-align: right;
	
}

.inputNum {
	width: 12%;
	position: inline;
	height: 1.5em;
	border: 1px solid yellow;
	border-radius: 5px;
}

@keyframes inputNumBlinkOn {
	0% {
	}
	100% {
		height: 2.5em;
		width: 15%;
	}
}

@keyframes inputNumBlinkOff {
}

#fullScreen {
	border: 2px solid yellow;
	border-radius: 5px;
	margin: 0.3em;
	padding: 0.3em;
	float:right;
	cursor: zoom-in;
	animation-name: blinkFS;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

@keyframes blinkFS {
	100% {
		color: red;
	}
}

#tableAllVocab {
	border-spacing: 0px;
	width: 100%;
}

tr:hover {
	cursor: pointer;
	background-color: magenta;
}

td {
	padding: 3px;
	text-align: left;
	border-bottom: 1px solid white;
	font-size: 200%;
}

td.wordNummer {
	color: lightgrey;
	font-size: 100%;
}

td.wordArtikel {
	color: yellow;
	font-size: 200%;
}

td.wordItself {
	color: lightyellow;
	font-size: 200%;
}

td.wordTranslation {
	color: lightgreen;
	font-size: 200%;
}

td.wordUseExampleDe {
	font-size: 150%;
}

td.wordUseExampleRu {
	color: lightgrey;
	font-size: 150%;
}

#divWordCard {
	position: fixed;
	top: 10%;
	right: 1vw;
	width: 75vw;
	height: 83vh;
	padding: 1%;
	overflow: hidden;
	font-size: 2.3vw;
	border: 1px solid;
	border-radius: 15px;
	background-color: green;
	color: yellow;
	display: none;
}

@keyframes animDivWordCardOn {
	0% {
		opacity: 0.1;
	}
	10% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

@keyframes animDivWordCardOnOn {
	0% {
		opacity: 0.1;
	}
	10% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

@keyframes animDivWordCardOff {
	from {
		opacity: 1;
		display: block;
	}
	to {
		opacity: 0;
		display: none;
	}
}

#divMaximizeWordCard {
	position: absolute;
	top: 1vh;
	right: 1vh;
	/*width: 1vw;*/
	border: 2px solid yellow;
	border-radius: 5px;
	padding: 0.3em;
	font-size: 0.7em;
	cursor: zoom-in;
}

#divProgressBar {
	position: absolute;
	width: 88%;
	top: 0vh;
	left: 6%;
	display: flex;
	justify-content: space-evenly;
	align-items: flex-start;
	flex-wrap: nowrap;
}

#divProgressBar > div {
	/*border: 1px solid white;*/
	width: 100%;
	max-width: 50%;
}

#divProgressBar > div.active {
	border: 2px solid red;
	/*margin: 1px;*/
}

#divCloseWordCard {
	position: absolute;
	top: 1vh;
	left: 1vh;
	/*width: 1vw;*/
	border: 2px solid yellow;
	border-radius: 5px;
	padding: 0.2em 0.4em;
	font-size: 0.7em;
	cursor: pointer;
}

#inCardWordIndex {
	color: lightgrey;
	font-size: 50%;
}

#inCardWordArtikel {
	color: yellow;
	font-size: 200%;
}

#inCardWordDe {
	color: white;
	font-size: 250%;
	white-space: pre-wrap;
	text-overflow: ellipsis;
	word-break: break-all;
}

#inCardWordRu {
	font-size: 200%;
	text-align: right;
}

#inCardWordExamples {
	position: absolute;
	bottom: 0;
	width: 100%;
}

#inCardWordExampleDe {
	color: lightgrey;
	font-size: 120%;

}

#inCardWordExampleRu {
	color: lightgrey;
	font-size: 120%;
}

#wordInCardDe:hover, #inCardWordRu:hover, #inCardWordExampleDe:hover, #inCardWordExampleRu:hover {
	cursor: pointer;
}

.blockElement {
	margin: 1%;
}

div.buttonsLR {
	position: absolute;
	width: 8%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 9vh;
	height: 70vh;
	font-size: 2em;
	
}

#buttonLeft {
	left: 2%;
	border: 1px solid;
	border-radius: 50vw 0px 0px 5vw;
	border-right: 0;
}

.buttonLeftPressed {
	box-shadow: 7px 7px 7px 0px yellow inset;
	text-shadow: 5px 5px 5px yellow;
}

#buttonRight {
	right: 2%;
	border: 1px solid;
	border-radius: 0px 50vw 5vw 0px;
	border-left: 0;
}

.buttonRightPressed {
	box-shadow: -7px 7px 7px 0px yellow inset;
	text-shadow: -5px 5px 5px yellow;
}

#mainWordCardContent {
	position: absolute;
	left: 11%;
	width: 78%;
	height: 96%;
	overflow: hidden;
}

p {
	margin: 1em;
	text-align: justify;
}

li {
	margin: 1em;
}

#alertMsg {
	position: absolute;
	top: 55%;
	width: 98%;
	text-align: center;
	color: white;
	opacity: 0;
	font-size: 0em;
}

@keyframes animAlertMsg {
	50% {
		opacity: 1;
		font-size: 1em;
	}
	100% {
		opacity: 0;
		font-size: 0em;
	}
}

@keyframes animAlertMsgOff {
}

.w3-border-red:hover{border-color:red!important}
.w3-border-red{border-bottom:3px solid red!important;}
.w3-container{padding:0.01em 16px; }
.w3-container:after,.w3-container:before{content:"";display:block;clear:both}
.w3-third{float:left;width:95%}
.w3-third{padding:0 4px; white-space: nowrap; margin: 2px;}
@media (min-width:601px){.w3-third{width:15%}}
.w3-bottombar{border-bottom:3px solid #ccc!important; border-left:2px solid #ccc!important; border-top:2px solid #ccc!important; border-top-left-radius: 15px 15px; color: yellow; }
/*.w3-hover-light-grey:hover:hover{color:#000!important;background-color:#f1f1f1!important}*/
.w3-hover-light-grey:hover{cursor:pointer;color:#000!important;background-color:#f1f1f1!important}
.w3-padding{padding:8px 16px!important}
/*.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}*/
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
.w3-button{border:1px solid;display:inline-block;padding:4px 8px;margin: 4px; vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-display-topright{text-align: right; float:right;}

a.externLink {
	color: lightgreen;
	text-decoration: none;
	font-weight: bold;
}