* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
}
.login {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}








.navtop {
	background-color: #2f3947;
	height: 60px;
	width: 100%;
	border: 0;
}
.navtop div {
	display: flex;
	margin: 0 auto;
	width: 1000px;
	height: 100%;
}
.navtop div h1, .navtop div a {
	display: inline-flex;
	align-items: center;
}
.navtop div h1 {
	flex: 1;
	font-size: 24px;
	padding: 0;
	margin: 0;
	color: #eaebed;
	font-weight: normal;
}
.navtop div a {
	padding: 0 20px;
	text-decoration: none;
	color: #c1c4c8;
	font-weight: bold;
}
.navtop div a i {
	padding: 2px 8px 0 0;
}
.navtop div a:hover {
	color: #eaebed;
}
body.loggedin {
	background-color: #f3f4f7;
}
.content {
	width: 1000px;
	margin: 0 auto;
}
.content h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: #4a536e;
}
.content > p, .content > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.tische {
	width: 1000px;
	margin: 0 auto;
}
.table, .table_unav, .table_occ  {
margin: 25px 0;
padding: 25px;
width: 250px;
border:solid 3px #ccc;
border-radius:20px;
float:left;
}

.table {
background-color: #fff;
}
.table_unav {
background-color: #bbb;
}
.table_occ  {
background-color: #555;
}
















.register {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.register h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.register form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.register form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
 	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.register form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
  	margin-top: 20px;
  	background-color: #3274d6;
 	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.register form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}













#desk {
width:1470px;
position:absolute;
top:150px;
left:50%;
margin:0 0 0 -735px;
border:solid 3px #fff;
border-radius:20px;
height:700px;
}

#card_stack_old,#card_stack_new, .text {
  background:rgba(255,255,255,0.4);
  cursor:default;
}

#desk .text {
width:164px;
height:2px;
padding:10px 10px 27px 10px;
border-radius:10px;
border:solid 3px #bbb;
margin:10px 10px 0 10px;
text-align:center;}

#desk .cards2 {
width:164px;
height:240px;
margin:10px;
padding:10px;
border-radius:10px;
border:solid 3px #bbb;
float:left;
position:relative;
}

#desk .cards {
width:164px;
height:240px;
margin:10px;
padding:10px;
border-radius:10px;
border:solid 3px #bbb;
float:left;
position:absolute;
}

#desk .gamebutton {
width:164px;
height:48px;
margin:5px;
padding:10px;
border-radius:10px;
border:solid 3px #bbb;
float:left;
position:absolute;
}

#desk .cards2 img {transition:all 400ms; position:absolute; top:4%; left:5%; bottom:5%; right:5%; width:90%; cursor:pointer;}
#desk .cards2 img {transition:all 400ms; position:absolute; top:4%; left:5%; bottom:5%; right:5%; width:90%; cursor:pointer;}

#deskxxxxx .cards img {transition:all 400ms; position:absolute; top:4%; left:5%; top:10%; right:5%; width:90%; cursor:pointer;}

#desk .cards img {position:absolute; top:4%; left:5%; top:10%; right:5%; width:90%; cursor:pointer;}


#desk .cards img:hover {width:95%; top:1%; left:2%; right:2%; top:10%;}

#desk #card_stack_old img:hover { width:90%; top:4%; left:5%; bottom:5%; right:5%; cursor:default;}
#Spieler1 { position:relative; float:left; top:0px; }
#Spieler2 {  position:absolute; top:0px; left:50%;margin:0 0 0 -735px;}
#Spieler3 { position:relative; float:right; top:0px;}
#Spieler4 {  position:absolute; bottom:0; left:50%;}

#statusdiv {  position:absolute; float:left; left:50px; top:150px; }

#card0   { transform: rotate(-7.0deg); left:0%;  top:0%;}
#card1   { transform: rotate(-6.0deg); left:6%;  top:0%;}
#card2   { transform: rotate(-5.0deg); left:12%; top:0%;}
#card3   { transform: rotate(-4.0deg); left:18%; top:0%;}
#card4   { transform: rotate(-3.0deg); left:24%; top:0%;}
#card5   { transform: rotate(-2.0deg); left:30%; top:0%;}
#card6   { transform: rotate(-1.0deg); left:36%; top:0%;}
#card7   { transform: rotate( 0.0deg); left:42%; top:0%;}
#card8   { transform: rotate( 1.0deg); left:48%; top:0%;}
#card9   { transform: rotate( 2.0deg); left:54%; top:0%;}
#card10  { transform: rotate( 3.0deg); left:60%; top:0%;}
#card11  { transform: rotate( 4.0deg); left:66%; top:0%;}
#card12  { transform: rotate( 5.0deg); left:72%; top:0%;}
#card13  { transform: rotate( 6.0deg); left:78%; top:0%;}
#card14  { transform: rotate( 7.0deg); left:85%; top:0%;}

#game0 { position:relative; float:left; top:150px; left:330px;}
#game1 { position:relative; float:left; top:200px; left:330px;}
#game2 { position:relative; float:left; top:150px; left:510px;}
#game9 { position:relative; float:left; top:250px; left:330px;}
#game10 { position:relative; float:left; top:150px; left:690px;}
#game11 { position:relative; float:left; top:200px; left:690px;}
#game12 { position:relative; float:left; top:250px; left:690px;}
#game13 { position:relative; float:left; top:300px; left:690px;}
#game20 { position:relative; float:left; top:150px; left:870px;}
#game21 { position:relative; float:left; top:150px; left:1050px;}
#game22 { position:relative; float:left; top:150px; left:1230px;}

#game99 { position:relative; float:left; top:300px; left:330px; width:1370px;}