body,
html {
	background-color: #222;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;

	/*overflow: hidden;*/
	height: 100%;
}

h1 {
	text-transform: uppercase;
	margin: 0;
	margin-top: 5px;
	padding: 0;
	font-size: 2em;
}

a {
	color: gray;
	text-decoration: none;
	font-weight: bold;
}



.flag-de {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAZpJREFUSIm11b9LVWEYB/DPc7jkFDSkYRa4mNdBiKZwqCGdI6gog6glaBOHqP6YFrUo6i+4V6gGx4harNaSwkDEybzcp+GqXPzR1Tz3C8/ynsPnyzmc9z3h3zmDSVzCKE5urv/GZ7zHHH50cPaEn6OB7DAbmyUDB8VvYu0A8M5Zw41O+DSa/4FvTRNT++G3j4i3l9zaiQ9gpQR8a1Zxtr1grkR8a2Yg7jkx+NH6QkP2JpX93t9hEjQqYvm8nrHKE33XUvSXAbelgn5cLVKMl4xvJ8VEgZFuFYQcKdDXrQKcKrqIQxb41S095M8Ci90qaCq+FCHr3SoIWYuVxxcHey4cW4hK9JKlbDSikY1cXv/wZywgv47P4k45+GbSTAzX77a+omY80jrsysqqovEUCohqbUnmQ61D6qhpCg9i6O337QKI4fmXwvQRSxJTMVR/te3uuuPblesynuH4IfE13I9z9Tfti7t2cgzNv9aMqsxZrR96p2xIM5pR3YmzxxO0JxcnTityEpelUaG3dcGyyE+yeCe9iGptaT/jL7QcykA+pd7xAAAAAElFTkSuQmCC');
    background-size: cover;
  background-position: center center;
  display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
position: relative;
overflow: hidden;
top: 6px;
margin-right: 3px;
}
.flag-usa {
  background-size: cover;
  background-position: center center;
  display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
position: relative;
overflow: hidden;
top: 6px;
margin-right: 3px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAA29JREFUSIm1lV1sk1UYx3/n7bsWu5nSzrlGqiFowBghRFlYzJwbiQoREqDChfYCUK+MwYyFiEZjNFGzLRoRjQaDkSgBJ8NlGORDIrtwbowF2Qg4WTfXrmPr59qt68f7vscLncpct6Hb/+rkOc/z+59z8pw8gmlUtf9CaU8wsyc6qq2+OpgsjCd19fonD40BfqBPCHFc07TGwsJCXy6GmCr4+ZkrS+t/ih092xW937nQwo5KJx+fDuCPpIkdKJucbgBHpZS77XZ734wGvqGY2x9KHtxQ02mNjGrUeZawrcLJurc7ab0WJ1AemvqoupEyfht4y7X31TdzGmytbW3QDDYiEQ1tQQAeXWHHMKB7MIkvnOZqw65crwFCsODJx44trt+7eSKkTCw877XXftUS3NTyy4houxb/q+b0pSjxcQ1fOJ0bPCEpSdWf3NTrqX7nhhu8/uXllftO+TvyLSZR57kbRYHqL3oYjGaoesKFe3URrxzu5bufI3gjR2b0UQqs2i3bNywrdq/3qgA9wfEDoURWhBJZwqNZhIDe4RQAoYRGMJ6l3ZsAwPHNBzPfBFRgD/CcqNp/ofTTH4Zb4uM6ADariiIgOqYBkG8xYUiJIgRjaX2qLsolXdf1xeqOSld5Y0eMjJbGajFRcd9CTAp83xUjmdYptpl5Zo2Tj04FGEvr6H0DszUwyfH006rrNkvlC2sXUXWwB6sFqtffiaLA2csxMprk+cfvYHuFk8b2MAORNMGVm2dG/6m8kuW7VPe7XQ8LITCkJDKapaapH4BwIgvAiYsRjneECURm0UWTpPUP2oV567cyo8lZF037DybLYkbEYrEEUHDTx5ud4goQmCc4QEABvPNo4FUT1XWh1Jkf54VuWVMaUsk379N91z3o+tzSTSZEvvlDAeB9xPNr5tz5e+aSby5/sHtJ86FlKkBe5Sp3wU5PC4pinQu41PWk7Ox203zo73kwMjKyTkrZBJj+J98wDGOjw+Fogn/MA5vNdkIIUcUfI/A/w4UQL07AYYqRGTzX+lTq65OfycSY+WbI4taC9IIta7cVlZccviE+VbLv2ZdXZK/0Hsm2XbpXZrXpwXkqeWUPeAtWLXffXrv74r/2pyvu3/lGieEffskYGCrT/EN2IiMqAA6bprqKoyaXs1ksKqq56/3Xzudi/A4h2G7zDwoIggAAAABJRU5ErkJggg==');
}
.flag-fr {
  background-size: cover;
  background-position: center center;
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
position: relative;
overflow: hidden;
top: 6px;
margin-right: 3px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAlFJREFUSIljZMADJmy8oZfoIGn///9/bwYGBgUGBgYZqNQTBgaGB4yMjFs+zV13ULYo8TIuMxixCWZNPWV68cmPZZ+//1M+1GCAVQ0MvLGLY2AS5n/EZWUQLtFafAJdngldILL3dO/io+9OHr35SeXPv394DWdgYGBg+POH4df+U3IfJy099jCysAuvBaFdJ9evOPay6POPP4QNRgP/P39l/L5ie+mD0Lx1WC2In3i2c83J1wH//5NqNLIt/xl+rNkV+CiioBvFgvxZ503XnHhdSpHhyJZsOVj8ILvBCG7B2ftfVnz9SXqw4AL/vnxj/Hv59koGBgYGppJ5F81P3PmkRC3DYeDPsfMqjwpbTJjuvvxe9ecvNcIGFfz/85fh34PnVUxP3/+ypLrpUPD3+StrpkdvfgjSzIJHzwWZPnz9w0IrC/6//8TKxEi1tIMJGBkZ/zPxc7H8oZkNArx/mOREON7TynxmOcn3TFKCbMdoZQGThOgRJjUxthZWZupHBCMLMwOzolQ7U1ey0RlzVb671LaA1crollx/zRkmBgYGBgM57ghudhaqZWcmHq7/POZ64QwM0MJuSobRmQAT4TaqJFlGRgY2b7sese6yC3ALGBgYGJYWm9aEmIuup8gSJiYGznDPNQorJ5bBhZDlV5eZB4VbiPXwcjCTHFyMfDz/uSM8O+VX9Iei2ImucEWpWWmohbihlRr/TWZGRsIWsbAwsNmb3uOJ9zeWXdZXgWExPr3d667ppDlLw5otigyozZZ7jIyMWz/OWn1IrjTlCi4zAKL0z/CGXLA9AAAAAElFTkSuQmCC');
}
.flag-es {
  background-size: cover;
  background-position: center center;
  display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
position: relative;
overflow: hidden;
top: 6px;
margin-right: 3px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdNJREFUSIm1lT9rFEEYh593dk4Eo4h/wWgXs3NgyrTaREhvCHgBIRaC3ZkihR/AIoXfQJskmIuxF7TRj6CCOxet1KBoEP9BcGfvtbk71iSXM97ur9t3dp/nnWGHV9gj64yczYhqilwUdAw40V76oshLQZ8LuhzT/NCLIb3ALcyCItNAtFcTQABWBZ3fTbRDkBBPA/eAoT7g7fkJXHf4h/miyT94RueAlf+A0/6mkRDX88XuDl7jrgq6TI9j20dU0FpMc6Ur8IwOK/IKODogvJPvlnBhhLfvDIAiCwXCAY4E7B0A2ZwdP7e59uuxWA6KpSIVrEQcwBorERUsFYmwiPx9dKqqGYFAqhkpoRU047emBA2kGtg6PnVoUnR94hbK3QK7z0XqBmWiHDiAXjZAtTwBVQOcKlFw2vR/Z6CoAT6VKPhogKREgTcIT8vjy5PSLhqZbh27MjQpAAnxEjBTcPuLDn+t8xfNA18LhH+LyG5Dex44/IagNwEtAN4CbpznzfuuACCm2QDmBpSoInWHX+0UdhuZU8B94PA+4T8Uma2SPMoXd9xkh18DHLAEpP8AToFFwG2HQ5/xmBCfUaRmaF1SZAw42V76DLxQ5JmgDxx+oxfjD1UGrO9FOUf6AAAAAElFTkSuQmCC');
}

.flag-se {
  background-size: cover;
  background-position: center center;
  display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
position: relative;
overflow: hidden;
top: 6px;
margin-right: 3px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAArJJREFUSImtlUlMU1EYhc97rwOkBWSQIBShDBICBiigUTC6wIWrRlxAFQkxusIQ5hLKHEhISxFl48JggomgCeBKXGoQFBxQbMSWIZiKYCPBUlrSlr7nBhvSyRTet7r5/5tz7rnJ/S8BHzBLBcfhgFQ+fq587EuieM0s4DI0iAjBjj0mZNsYH2p8FXXE2tNb0fTWmwbhqVjT05xbkrtUmXnMUASAujVSgAfv0j0KcEkHLibrV7JEv691lbdNufZJ10Jpp0p9/3329IaFfxUA5SshANhpCs+18fH3JjJel3aplD4NitvVzwY/plabbRyPyXxhsnGJwQ+pdbJ29ahHg9JOlXr4c4rUX2FXnsylXC7bl4QEgNq+5tMjmuSqw4oDAM0Ao5rE2pq7HdlOgxm9aOgg1+KNLSuPmF2NGAYAsrK/I2/ye7SYLfF/TCzHJCn6FTmkfiNI7qBZO7wTO01Bt3G0kdRvBp1hXX0PgynwLEeWqaUL0xbdmklhRue6MH0JSeF//Dbgc2gQjK7ABEB4mJP6YNvtJbMMzemblJitdtItQXGGDnGhWwCAca0Yc2vhfqsHcHYtnOFPJ6hpfZRbMyf2l9NgVJPoddj54nzCD5CxwSa3CcgWkQLLFCkK2+mmSIZ1cR5F42SsoZPsq2p8kxe3usy2Qb74p67lZvcsCQDZMesyAW+XtRghATYmU2QoBvaG3Z3qthlp6oLbZ3EQSAK4krag7K1omXUaAMDj1roGWYZ2jCAOHoQgGJRJNE8HFPIGp+H+DUOtNYXXJd9UQr7db5dgvo0pyZpXDigaivbX3V7yoKKuXpb+VRIaaH0IYPd/wlzSgUspK4s3Ts3nPGqql7v2fc5pZuGCCDRXWv8i//aYJkG8vi3k0TSBSKHFHh1kNiaEG19GCzZ7lNVdM940/gKcHOswN52ZhQAAAABJRU5ErkJggg==');
}
.flag-da {
  background-size: cover;
  background-position: center center;
  display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
position: relative;
overflow: hidden;
top: 6px;
margin-right: 3px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAqZJREFUSImtlV1IU2EYx//v+dL5UUp+lG7OSWhBYpmVWVFCH0qZlJnOoOvKkpRKiSZSEmFq0SiCLqKIZpb2oXWhEBNimgRKYBchOiWwpA2nzX0dz+kiG+LZJtPzuzq8D+f3f5+X8z6HIABWqzWJpunC6Vp9uaPDqMGkhRUFgZA1UR56XZyNSU7ooeNjG5X6a33+HMTX4vg53TaFtuAim55aAoC2VdyE4+lb3wKWAZe73Uw2pZ1Kbq4xLa5TixfM2qom55OOz6LVVgaADtQhAIgeHq4uU7L7UeunMW1lQ8CA0aILb5yG91WC3eGzs0AIM3biMHy4PF5c0e4zwKytanK1dRUGK17MbFv3MfOCTigAGC2/vsP97mPlSuUAAEGAq7Pn0thZ3VZvgDj4zbCcY/GHOGMn/NBICwBQY2d0u9x9XzVyyf/D9w6uH6+sz6Iw8bsac3Ny+yF6eAjmiasU/+PnTtnt88z9suQwiuI8IbQgV1KkU1Te59CCfWBSlMEncBzI1NTUDICIFWw0EH8kN1lmBMb+oMUOt1vSQWjRQdCqtQAAV7cJ/NBw0HYSws4yzvYu2vNlSFJkt2z0Bjg7jH6HXSC43ZmgqIQ4yQSUCxITbaJYVcIt0EsOzeDlHAsufUM9pbxf28tlZ4zIHcBmb/6eeKNi4N9XlJ6mpcIVolxysipCDMlILQXmh13Kw7r+kPw9kp/FsqAocEf2NiTqawe8AQCgfqWvCSs+9BpkBUOVECjKDrdqnjfXePMW1pNe3juuKM2/TUWEBX1cJDJcVJzMa1A/ayxZuC65yWrDnSthJ/ZnYnXkYwD8kmKWAXcgZzjy9NEs9Yu71ZJ6oJctFouSYZjCaZ3+vLPTqBEnLRwEASQmykPiY22MJtFIx0c3qvR1/f4cfwGejNv+Sy0ohAAAAABJRU5ErkJggg==');
}

.flag-no {
  background-size: cover;
  background-position: center center;
  display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
position: relative;
overflow: hidden;
top: 6px;
margin-right: 3px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAupJREFUSImtVFtIVFEUXefec2ccdRhTS3GaUTONCEN8FkiRWImQEMnEpQd+hRpkljYKvQ0q08ryowI/IvKBJkYPEso+lEKdVPqIijSd6DljmZnjOM49/dSQMzd1YtbXuWvvs9Y+++x7CObA/rrna80W26GtKaHa7BWqIGtUZiwECk6jdnD6iDF+aVgXHxl+RnfhcM+/NIgcabVatfl1g3fbTNaEGSfDpbxY7ErW4HPEek8BgUJITzQL6UkGXcX+bvc45058vNZYSCl9aRl3JMw42VwHBAAwxwymH/foJ2tuPB0WiyvnNBg2FLXa2x7VAgicV9ndaHyCTDU9KB0RD7TIGozkGU9PNbdvZYzJtm1BkCTYGu9vG9lx8OwsA3PRyRR7c7sRbP6WzAvGYL/dUTpScCTJZeAceN0g/bT9f+VukCYmifPFUAMAcOayqhR7V1+Mr8T/YLqzL9ZcfCqZstGxIl4X7gpwS0JkNxCOgI/SemXCxm37qOZcibyiO/yUWDzQ6pUBgBB6omU4Ve5qh77YXOs7fdZZ3wsGY6lEabjH7DM+mB4ZKCnx/JN9CUIIaMGmiFGAeNzDrW4L3o3aAQAbVy/CqqUB3jswZqXHc6N7AWS5x/rfTrgMtiSGYve6MO8NgB76vaTKOv3wiYtRrE+BpqbcM3XKDssa0St1VeZaCyXB6hrnu0874XQCAKSVy2STmcTgHH6/cHWOg6RW1XL6SqNJSE9841VpC4BiXdIr/YXDJg4AhPjlIheg8tmskkB/poyPE4Hfj52+9rhJlbu5AsQH7x0hUORsqNRePtrvMgAA3fWzx/wMWa2EkP8/CcchQMxujq4/X+ai/o5HNV3cpsjJKATww2ttTSBTidlndPXnDbN498SIfPEKz/MxIWqhl/Lzt4woBPhlpA3679meGHmz2mO+qdwmtVptAZC696op7cNXh1Hjz2klSQoilI+DQEGCNQ6qC//Ga8M6EaU9HVld/gwd8gX8AsYF9gdeshQFAAAAAElFTkSuQmCC');
}

.footer {
display: inline;
line-height: 24px;
position: relative;
overflow: hidden;
font-size: 16px;
font-weight:  bold;
text-align: left;
}

.footer a {padding-right: 10px !important}



.kontainer {
	/*position: fixed;*/
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
}

.huvud {
	flex: 0 0;
	border-bottom: solid 1px #555;
	padding-bottom: 10px;
}

.meddelanden {
	position: absolute;
	left: 0;
	top: 10px;
	right: 0;

	max-height: 2em;
	display: flex;
	flex-direction: column;
	padding: 5px;
}

.meddelande {
	background-color: grey;
	color: white;
	display: inline-block;
	padding: 10px;
	border-radius: 3px;
}

.rutnät {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tangentbord {
	flex: 0 0;
	padding: 0.5em;
}

.rad {
	width: 100%;
	display: flex;
	justify-content: center;
}

.ruta {
	display: flex;
	align-items: center;
	width: 2em;
	height: 2em;
	border: solid 2px #555;
	display: flex;
	margin: 3px;
	font-size: 25px;
	text-align: center;
}

.ruta span {
	flex: 1 1;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
}

.rätt {
	background-color: green !important;
	border-color: green !important;
}

.finns {
	background-color: orange !important;
	border-color: orange !important;
}

.fel {
	background-color: #333 !important;
	border-color: #333 !important;
	color: #666 !important;
}

.tangentbord .tangentbordsrad {
	display: flex;
	justify-content: center;
	user-select: none;
}

.tangent,
.bred-tangent {
	font-size: 1em;
	width: 2.5em;
	padding-top: 12px;
	padding-bottom: 12px;
	background-color: grey;
	margin: 2px;
	border-radius: 3px;
	text-transform: uppercase;
	cursor: pointer;
}

.tangent:hover,
.bred-tangent:hover {
	opacity: 0.75;
	transform: scale(110%);
}

.tangent:active,
.bred-tangent:active {
	opacity: 0.5;
}

.bred-tangent {
	width: 6em;
	font-size: 0.75em;
	padding-top: 14px;
}

@keyframes blop {
	0% {
		transform: scale(1);
	}
	25% {
		transform: scale(1.25);
	}
	100% {
		transform: scale(1);
	}
}