@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Quicksand|Raleway&display=swap');

@font-face {
    font-family: Arcade;
    font-display: swap;
    src: url('res/arcade.ttf');
}

/* General */

* {
	box-sizing: border-box;
	margin: 0;
	cursor: default;
}

input, label {
	cursor: pointer;
}

button, select, input, .btn {
	white-space: nowrap;
	font-size:1em;
	display:inline-block;
	height:2em;
	vertical-align: middle;
	border:2px solid black;
	border-radius:5px;
	color:black;
	text-transform:uppercase;
	text-align:center;
	cursor:pointer;
	margin: 3px;
	padding:0 1em;
	background: rgba(181, 141, 141, 0.4);
	box-shadow: 2px 1px 4px rgba(0,0,0,.4);
	line-height: 1.7;
}

button:hover, input[type="submit"]:hover, input[type="button"]:hover, button.active, .btn:hover {
	background:black;
	color: white;
}

input[type="submit"] {
	border-width:3px;
}

input[type="text"], input[type="password"], input[type="email"] {
	padding:0 .2em;
	text-transform:none;
	background: rgba(255, 255, 255, 0.4);
	cursor: text;
	font-family: "Quicksand";
}

input.hidden {
  position: absolute;
  left: -9999px;
}

input:focus::placeholder {
	color: transparent;
}
input:focus::-webkit-input-placeholder {
/* WebKit browsers */
	color: transparent;
}
input:focus:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
	color: transparent;
}
input:focus::-moz-placeholder {
/* Mozilla Firefox 19+ */
	color: transparent;
}
input:focus:-ms-input-placeholder {
/* Internet Explorer 10+ */
	color: transparent;
}
input:focus::placeholder {
	color: transparent;
}

textarea:focus, button:focus, input:focus, select:focus {
  outline: none;
}

body {
	text-align: center;
	font-size: .8em;
	font-family: Quicksand;
	text-rendering: geometricPrecision;
	overflow: hidden;
	text-shadow: 1px 1px 2px rgba(0,0,0,.4);
}

div {
	display:inline-block;
	width:100%;

	user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

h1 {
	font-family: 'Playfair Display';
	letter-spacing: 2px;
	text-align: center;
}

h2 {
	font-size: 1.1em;
	font-weight: bold;
	font-style: italic;
  color: black;
  text-decoration: none;
}

hr {
    border: 3px double black;
    margin-left: 15%;
    width: 70%;
}

label:after {
	content: '\A';
	white-space: pre;
}


/* Background */

div#container {
	background-image: url('res/bg/whisky.jpg');
	background-size: cover;
	width: 100%;
	height: 100vh;
	overflow: auto;
	transition: .3s filter linear;
}

div#container.blur:before {
  content:'';
  position:fixed;
  width:100%;height:100vh;top:0;left:0;
  opacity:0.4;
  z-index:999;
  background-color:black;
}
div#container.blur {
	/* filter: brightness(0.9); /* blur(3px) works terribly on firefox */
	pointer-events: none;
}

div#templates { display: none; }

/* Lobby general */

div#lobby {
	position: relative;
	min-width: 20em;
	width: 30%;
	min-height: 80vh;
	margin-top: 10vh;
	overflow: hidden;
	white-space: nowrap;
}

div#lobby > div {
	box-shadow: 3px 3px 6px black;
	background: lightgray;
	border: 3px solid #64afc7;
	font-size: 1.3em;
	border-radius:5px;
	transition: .3s left ease-in;
	position: relative;
	width: 94%;
	margin: 0 3% 0 3%;
	top: 0;
	white-space: normal;
	vertical-align: top;
}
div#lobby > div:before {
  content: 'CORONA SKAT \2660';
  display: block;
  background-color: #64afc7;
  color: lightgray;
}

div#lobby input {
	width: 90%;
	margin: 3px;
}

div#lobby form {
	width: 100%;
}

div#lobby p {
	font-style: italic;
	font-size:.8em;
	text-align: center;
}

/* lobby lists */

div#lobby ul {
	list-style-type: none;
	padding: 20px 0;
	display: inline-block;
	width: 100%;
}

div#lobby ul > li {
	text-align: left;
	padding-left: 1em;
	line-height: 1.7em;
	cursor: pointer;
}

div#lobby ul > li * {
  cursor: pointer;
}

div#lobby ul > li:hover,
div#lobby ul > li.active {
	background-color: #64afc7;
}


/* entrance */

form#login.register .login,
form#login .register {
	display: none;
}

form#login.register .register,
form#login .login {
	display: inline-block;
}

form#login.register p.register,
form#login p.login {
  display: block;
}

#players_members li {
	display: flex;
}
#players_members img {
	width: 3em;
	height: 3em;
	margin: 0 4px 2px 0;
	border-radius: 100%;
	border: 1px solid black;
	box-shadow: 2px 2px 4px rgb(0 0 0 / 40%);
}

#players_members li:hover {
	filter:grayscale(0.5);
}

#players_members li.online img {
	border: 2px solid #5be65b;
	box-shadow: 2px 2px 4px #075807;
}

#players_members li.online.isMyself img {
	border: 2px solid #e6775b;
	box-shadow: 2px 2px 4px #582607;	
}

#players_members li.online {
	background-color: #acccac;
}
#players_members li.online.isMyself {
	background-color: #7a8f7a;
}

#players_members div.name {
	font-weight: bold;
}
#players_members div.chat {
	font-style: italic;
	color: red;
}


/* video active in group */
#container.videoActive #players_members li.online.videoActive div.chat {
	display: none;
}
#container.videoActive #players_members li.online.videoActive,
#container.videoActive #players_members li.online.isMyself {
	padding-left: 0;
}
#container.videoActive #players_members li.online.videoActive video,
#container.videoActive #players_members li.online.isMyself video {
	display: inline;
	height: 3em;
}
#container.videoActive #players_members li.online.videoActive img,
#container.videoActive #players_members li.online.isMyself img {
	display: none;
}



#players h1 {
  display: inline;
}

#players_back_btn {
  border-radius: 100%;
  max-height: 30px;
  width: 30px;
  margin-right: 1em;
  margin-bottom: .5em;
  padding: 0;
}

#players_games_new_options {
  text-align: left;
  padding-left: 5px;
  font-size: .7em;
  font-weight: bold;
}

#players_games_new_options label {
  margin: 5px 0;
}

#players_games li.gameOver {
  color: darkgray;
}

/* bg select carousel */

div.carousel-left, div.carousel-right {
	display:inline-block;
	font-family: serif;
	width: 1em;
	font-size: 3em;
	z-index:6;
	color:#333;
	cursor:pointer;
	padding: 10px;
	text-shadow: 1px 1px 3px black;
	vertical-align: top;
	transition:.1s all ease-in;
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

div.carousel-left:hover, div.carousel-right:hover {
	transform: scale(1.1);
	text-shadow: 2px 2px 4px black;
}

div.carousel-container {
	display: inline-block;
	width: 45%;
	white-space: nowrap;
	overflow: hidden;
}

div.carousel-entry {
	width:96%;
	left:-2%;
	transition:.2s ease-in all;
	position:relative;
	display: inline-block;
	margin: 5px -4.5px 5px 4%;
	padding-bottom: 66%;
	text-shadow: 1px 1px 3px gray;
	vertical-align:top;
	font-size: 1em;
	overflow: hidden;
	text-align: left;
	white-space: normal;
	border: 3px solid darkgray;
	cursor: pointer;
	background-size: cover;
	background-position: center;
}
div.carousel-entry:hover {
  filter: brightness(1.3);
}

/* deck select */
div#pub div.deck {
	width: 20%;
	padding-bottom: 33.2%;
}
#deck_berliner {
	background-image: url('res/carddeck/berliner/16.png');
}
#deck_deutsch {
	background-image: url('res/carddeck/deutsch/16.png');
}

/* groups list */

img#user_profile {
	width: 3em; height: 3em;
	border-radius: 100%;
	cursor: pointer;
}
img#user_profile:hover {
	filter: grayscale(0.5);
}

li.listItem span.name {
	font-weight: bold;
	margin-left: 1.5em;
}

li.listItem span.members {
	font-style: italic;
}
li.listItem span.members::before { content: '('; }
li.listItem span.members::after { content: ')'; }

div#lobby input.hidden + label:before,
li.listItem span.add,
li.listItem span.leave {
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	font-weight: bold;
	text-align: center;
	vertical-align: text-bottom;
	color: white;
	font-size: 1.1em;
	line-height: 1em;
	background-color: gray;
	border-radius: 100%;
}
li.listItem:hover span.add {
	background-color: green;
}
li.listItem span.leave:hover {
	background-color: red;
}
li.listItem.gameOver span.leave {
  visibility: hidden;
}

/* flat animated login view */

div#entrance { left: 0; }
div#groups { left: 100%; }
div#players { left: 200%; }

div#container.loggedIn div#lobby > div { left: -100%; }
div#container.loggedIn.showPlayers div#lobby > div { left: -200%; }

/* message */

div#message {
	position: absolute;
	top: 0;
	font-family: 'Arcade', sans-serif;
	font-size: 2.4em;
	text-shadow: 1px 1px 4px #3c2700;
	padding-top: 10px;
	padding-bottom: 7px;
	transition: .5s transform ease-out;
	transform: translate3d(-50%, -100%, 5px);
	background: black;
	color: orange;
	max-width: 50%;
	left: 50%;
	height: auto;
	border: 3px solid #6e4800;
	border-radius: 7px;
	box-shadow: 2px 2px 4px black;
}
div#message.inactive {
	transform: translate3d(-50%, -88%, 5px);
	border-bottom-width: 6px;
}
div#message.active {
	transform: translate3d(-50%, -5px, 5px);
}

/* dialog */

div#dialog:before {
	content: attr(title);
	display: block;
	background-color: indianred;
	color: lightgray;
}

div#dialog {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%,-50%,20px);
	z-index:1000;
	margin:5px;
	background: lightgray;
	border:3px solid indianred;
	box-shadow:2px -3px 25px black;
	border-radius:5px;
	opacity: 1;
	width: auto;
	font-size: 1.3em;
	transition: .3s all ease-out;
}

div#dialog div {
	padding: 2em;
}

div#dialog > button.default {
	border-width: 3px;
}


/* Punkteliste */

div#scoreList:before {
	content: 'Punkte';
	display: block;
	background-color: darkgoldenrod;
	color: lightgray;
}

div#scoreList {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%,-50%,20px);
	z-index:1000;
	margin:5px;
	background: lightgray;
	border:3px solid darkgoldenrod;
	box-shadow:2px -3px 25px black;
	border-radius:5px;
	opacity: 1;
	width: auto;
	font-size: 1.3em;
	transition: .3s all ease-out;
	text-align: center;
	width: 80%;
	max-height: 80vh;
}

div#scoreList > table > tr:first-child > td {
	font-weight: bold;
	margin-bottom: 1em;
}

div#scoreList > table td {
  width: 10em;
}
div#scoreList > table td:last-child {
	width: auto;
}
  
div#scoreList > table td.won {
  color: green;
}

div#scoreList > table td.lost {
  color: red;
}

/* Game on / Game off */

div#game {
	display: none;
	max-width: 160vh;
}
div#container.showGame {
	overflow: hidden;
}

div#container.showGame div#lobby {
	display: none;
}
div#container.showGame div#game {
	display: inline-block;
}



/* Setup-Round dialog for Doppelkopf */

div#dkopfRound {
	display: none;
	text-align: left;
	position: absolute;
	left: 45%;
	width: 20%;
	top: 5vh;
	border: 3px solid black;
	box-shadow: 2px 2px 4px black;
	background: rgba(235,235,235,.9);
	border-radius: 5px;
	z-index: 2;
	padding: 10px;
}

div#game.Ansage.myself div#dkopfRound {
  display: inline;
}
/* Pflichtsolo wurde schon gespielt? */
div#dkopfRound form#dkRoundType h2:before {
  content: 'Pflichtsolo';
}
div#dkopfRound.Lustsolo form#dkRoundType h2:before {
  content: 'Lustsolo';
}
/* Hochzeit ist möglich? */
input#dkrtHochzeit, label[for='dkrtHochzeit'] {
  display: none;
}
div#dkopfRound.Hochzeit label[for='dkrtHochzeit'] {
  display: inline;
}


/* Setup-Round dialog for the Skat solo player */
div#roundDialog {
	display: none;
	text-align: left;
	position: absolute;
	left: 10%;
	width: 80%;
	top: 5vh;
	border: 3px solid black;
	box-shadow: 2px 2px 4px black;
	background: rgba(235,235,235,.9);
	border-radius: 5px;
	z-index: 2;
}

div#game.Spielwahl.myself div#roundDialog {
	display: inline;
}

div#roundDialog div#skat {
	margin:3vh 5%;
	width: 40%;
	height: 40vh;
	max-height: 25vw;
	border: 3px dashed black;
	border-radius:10px;
	cursor: pointer;
	position: relative;
}
div#roundDialog div#skat:before {
	content:'';
	position:absolute;
	left:0; top:0;
	width: 50%;
	height: 100%;
	border-right: 3px dashed black;
}
div#roundDialog div#skat div.card {
	position: relative;
	width: 50%;
	height: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

div#roundDialog div#skat span {
	position: absolute;
  top: 50%;
  text-align: center;
  z-index: 9000;
  left: 50%;
  transform: translate3d(-50%,-50%,1px);
  font-size:1.1em;
  opacity: 1;
}

div#container.drag div#skat span {
	display: none;
}


/* Game Table */

div#table {
	width:90%;
	height:70vh;
	margin: 0 5%;
	background: black;
	background: linear-gradient(to bottom, #000000B0, transparent), radial-gradient(closest-side,rgba(0,255,0,.5),transparent), #075807;
	border: 2px solid rgba(0,0,0,.7);
	border-radius:100%;
	box-shadow: inset -3px 7px 18px black;
	transition: .3s all ease-out;
	overflow: hidden;
	-webkit-perspective: 800px;
	perspective: 800px;
	perspective-origin: 50% 30vh;
	transform-style: preserve-3d;
	position: relative;
	z-index: 0;
}

div#table:before {
	content: 'Skat';
	color:white;
	font-variant: small-caps;
	letter-spacing: 3px;
	font-family: 'Playfair Display';
	text-shadow: 0 0 12px white;
	font-size: 4em;
	opacity: .3;
}

div#game.Ramsch div#table {
	background: linear-gradient(to bottom, #000000B0, transparent), radial-gradient(closest-side,rgba(255,0,0,.5),transparent), #580707;
}

div#game.Ramsch div#table:before {
	content:'Ramsch';
}

div#game.Bock div#table {
	background: linear-gradient(to bottom, #000000B0, transparent), radial-gradient(closest-side,rgba(0,0,255,.5),transparent), #070758;
}

div#game.Bock div#table:before {
	content:'Bock';
}

div#game.DKopf div#table {
	background: linear-gradient(to bottom, #000000B0, transparent), radial-gradient(closest-side,rgba(0, 255, 255, 0.5),transparent), #075858;
}

div#game.DKopf div#table:before {
	content:'Doppelkopf';
}


div#game.Spiel div#table {
	cursor: pointer;
}

/* CARDS */

div#hand {
	width: 95%;
	height: 30vh;
	transform-style: preserve-3d;
	perspective: 800px;
	perspective-origin: 50% 0;
	position: relative; /* new because of card swap stacking */
}

div#hand .ouvert {
	opacity: .8;
}

div#ouvert {
	position: absolute;
	left:50%;
	top:0;
	transform: translate3d(-50%,-34px,1px) scale(.6);
	transition: .5s all ease-in-out;
	/* height: 20vh; */
	padding:5px;
	background: radial-gradient(closest-side, rgba(0,0,0,.3), transparent);
	border:3px solid transparent;
	border-radius:5px;
}
div#game.foursome div#ouvert {
	transform: translate(-50%,-34px) scale(.4); /* possibly place above each player */
}

div#ouvert:hover {
	background-color: rgba(255,255,255,.1);
	border-color: rgba(255,255,255,.5);
}

div.card, div.deck {
	background-color: floralwhite;
	border-radius: 10px;
	width: 10%;
	height: auto;
	padding-bottom: 16.6%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: inline-block;
	cursor: pointer;
	transition: .3s all ease-in;
	box-shadow: 0px 2px 6px rgba(0,0,0,.7);
}

div.card.hand:hover, div.card.skat:hover, div.card.active, div.deck.active {
	filter: invert(20%);
}

div#container.drag div.card.active {
	opacity: .9;
	z-index: 9999;
}
div#container.drag div.card:hover {
	opacity: .9;
}

div#game.Spielwahl.myself div#hand div.card {
	width:8%;
}

div.card.table {
	width: 13.8vh;
	padding-bottom: 23vh;
	position: absolute;
	top: 30%;
	left: 50%;
	margin-left: -6.9vh;
	/* myself.3player */
	transform: rotateX(43deg) rotateZ(0deg) translate3d(0, 100%, 0);
}
div.card.table:hover ~ div#message {
	opacity: 0;
}

div.card.right {
	transform: rotateX(43deg) rotateZ(240deg) translate3d(0, 100%, 0);
}
div.card.left {
	transform: rotateX(43deg) rotateZ(120deg) translate3d(0, 100%, 0);
}

div.card.init {
	transform: rotateX(43deg) rotateZ(0deg) translate3d(0, 200%, 100px);
}
div.card.right.init {
	transform: rotateX(43deg) rotateZ(240deg) translate3d(0, 200%, 100px);
}
div.card.left.init {
	transform: rotateX(43deg) rotateZ(120deg) translate3d(0, 200%, 100px);
}

/* 4player */
div#game.foursome div.card.myself {
	transform: rotateX(43deg) rotateZ(-45deg) translate3d(0, 100%, 0);
}
div#game.foursome div.card.left {
	transform: rotateX(43deg) rotateZ(45deg) translate3d(0, 100%, 0);
}
div#game.foursome div.card.right {
	transform: rotateX(43deg) rotateZ(225deg) translate3d(0, 100%, 0);
}
div#game.foursome div.card.middle {
	transform: rotateX(43deg) rotateZ(135deg) translate3d(0, 100%, 0);
}

div#game.foursome div.card.myself.init {
	transform: rotateX(43deg) rotateZ(-45deg) translate3d(0, 200%, 100px);
}
div#game.foursome div.card.left.init {
	transform: rotateX(43deg) rotateZ(45deg) translate3d(0, 200%, 100px);
}
div#game.foursome div.card.right.init {
	transform: rotateX(43deg) rotateZ(225deg) translate3d(0, 200%, 100px);
}
div#game.foursome div.card.middle.init {
	transform: rotateX(43deg) rotateZ(135deg) translate3d(0, 200%, 100px);
}

div.card.ouvert {
	display: inline-block;
	position: static;
}

div#container.drag div.card {
	transition: none;
}

div#container.drag div.card.table {
	opacity:.5;
	filter: grayscale(1%);
}

div#container.drag div.card.active {
	cursor: grab;
}

/* Card sorting */

select#sortCards, button#lastGain  {
	display: none;
}
div#game.Reizen select#sortCards,
div#game.Spiel button#lastGain.active {
	display: inline-block;
}
select#sortCards, button#lastGain {
	position: absolute;
	z-index: 2;
	margin:5px;
	width: 20%;
	height: auto;
	left: 40%;
	bottom: 4vh;
	background: transparent;
	box-shadow: 0 0 10px lightgray inset;
	color: white;
	border-color: white;
	opacity: .5;
	transition: .3s opacity ease-in;
}

select#sortCards:hover, button#lastGain:hover {
	opacity: 1;
}

select#sortCards:focus option {
	color:black;
}
div#table div.card.previous {
	visibility: hidden;
	opacity: 0;
	filter: grayscale(0.5);
	z-index: 1;
}
div#table button#lastGain:hover ~ div.card.previous {
	visibility: visible;
	opacity: 1;
}



/* PLAYERS */

div.player {
	margin:5px;
	background: lightgray;
	border:3px solid black;
	box-shadow:2px 2px 4px black;
	border-radius:5px;
	overflow: visible;
	font-size: 1.3em;
	z-index:1;
	opacity:0.95;
	display: inline;
	position: absolute;
	top:0;
	left: 10%;
	max-width:40vh;
	height:auto;
	transition: .3s all ease-out;
	margin-bottom:-5px;
	width: auto;
}

div.player div {
	width: auto;
	display: block;
	min-width: 5em;
	height: auto;
	padding:0 5px;
}

div.player#right {
	left:auto;
	right: 10%;
}

div.player#myself {
	bottom: 34vh;
	left: 66%;
	top: auto;
}

div.player#middle {
	display: none;
}

div#game.foursome div.player#left {
	bottom: 40vh;
	left: 10%;
	top: auto;
}
div#game.foursome div.player#middle {
	display: inline;
	left: 10%;
}
div#game.foursome div.player#right {
	right: 10%;
}
div#game.foursome div.player#myself {
	right: 5%;
	left: auto;
}

div.player.kiebitzen {
	border: 4px solid red;
	opacity: 1;
}

div.player.active {
	box-shadow: 3px 3px 5px black;
	opacity: 1;
}

div.player div.name:before {
	content: '';
	position:absolute;
	left:.2em;
	top:.2em;
	height:.5em;
	width:.5em;
	border: 3px solid darkgray;
	border-radius:100%;
	background-color: lightgray;
}

div.player.online div.name:before  {
	background-color: #5be65b;
	border-color: #075807;
	box-shadow: 0 0 4px #075807;
	/* animation: blinker_green 1.5s ease-in infinite; */
}

div.player.active div.name:before {
	background-color: red;
	border-color: darkred;
	box-shadow: 0 0 4px darkred;
}

div.player.active.online div.name:before {
	animation: blinker_red 1.5s ease-in infinite;
}

@keyframes blinker_red {
	0%, 100% {  }
	50% {
		background-color: red;
		box-shadow: 0 0 25px red;
		border-color: red;
	}
}

div.player#myself.active {
	animation: glowing_player 3.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes glowing_player {
	0%, 100% {  }

	15% {
		border-color: white;
    	background-color: white;
    	box-shadow: 3px 3px 15px #e6dddd;
	}
}
div#container.blur div.player.active div.name:before,
div#container.blur div.player#myself.active {
	animation: none;
}

div.player.inactive {
	opacity: .93;
}
div.player:hover {
	opacity: 1;
}

div.player div.score {
	display: block;
	font-weight: bold;
	cursor: pointer;
}
div.player div.score:hover {
	text-decoration: underline;
}
div.player div.score:after {
	content: ' Punkte';
	display: inline;
}

div.player div.name {
	padding-left: 1.2em;
	display: block;
	background: darkgray;
	color: white;
	white-space: nowrap;
	overflow: hidden;
}

div.player div.pic {
	width: 50%;
	padding: 0 0 50% 0;
	background-size: cover;
	min-width: 0;
	display: inline-block;
	border-radius: 100%;
}
div.player div.status, div.player div.alert {
	font-weight: bold;
	font-style: italic;
	margin: .1em 0;
	font-family: 'Playfair Display';
	font-size: 1.3em;
	text-shadow: 0 0 1px;
}
div.player div.alert {
	font-size: 1.4em;
	color: red;
}
div.player.emph div.status {
	color: darkgreen;
}

div.player.active div.name {
	background-color: darkgoldenrod;
	font-weight: bold;
	text-shadow: 2px 2px 4px black;
}
div.player div.seat {
	font-size: .7em;
	font-style: italic;
	display: block;
	text-transform: uppercase;
}

video {
	display:none;
	height:15vh;
	margin:0;
	border:none;
	cursor:pointer;
	transition: .2s all ease-in;
 	/*filter: hue-rotate(180deg) saturate(200%);*/
 	/*filter: blur(4px) invert(1) opacity(0.5);*/
}
video:hover {
	filter: blur(1px) opacity(0.8);
}
video.muted {
	filter: grayscale(1);
}

div#myself video {
	height: 10vh;
	transform: scale(-1,1);
}

div#container div#game div.player.videoActive div.name:after {
	content: ' Video';
	font-weight: bold;
	text-transform: uppercase;
	font-size:.7em;
}
div#container.videoActive div#game div.player.videoActive div.name:after {
	content: '';
}

div#container.videoActive div#game div.player.videoActive {
	opacity: 1;
}

div#container.videoActive div#game div.player.videoActive video,
div#container.videoActive div#game div.player#myself video
{
	display: inline;
}

div#container.videoActive div#game div.player.videoActive div.pic {
	display: none;
}

div#container.videoActive div#game div.player.videoActive div {
	padding: 0;
}
div#container.videoActive div#game div.player.videoActive div.status {
	margin: .08em 0;
}


/* CHAT */

form#chat_input {
	font-size: 1em;
	margin: 0 5px;
	border: 3px solid black;
	border-radius: 5px;
	color: black;
	text-align: center;
	padding: 0 1em;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 2px 1px 4px rgba(0,0,0,.4);
	padding: 0;
	display: none;
}
form#chat_input input[type="text"] {
	width: 100%;
	padding: 0 .2em;
	margin: 0;
	resize: none;
	box-shadow: none;
	font-size: .9em;
	overflow: hidden;
	border: 0;
	background: none;
	cursor: text;
	text-align:left;
}
textarea:focus, button:focus, input:focus, select:focus {
  outline: none;
}

div.player.chatting form#chat_input {
	display: block;
}

div.player.chatting div.chat,
div.player.chatting div.score,
div.player.chatting div.status,
div.player.chatting div.seat,
div#container.Reizen div.player.chatting button.response,
div#container.videoActive div.player.videoActive.chatting video {
	display: none;
}


/* Show button as selected */

div.player.chatting button#chat_button, div#container.videoActive button#chat_video_button,
div#container.videoActive button#players_chat_video_button 
{
	background:black;
	color: white;
}

div.player div.chat {
	color: white;
	opacity: .3;
	font-weight: bold;
	white-space: normal;
	margin: 0;
	padding: .3em .3em;
	text-shadow: 1px 1px 4px rgba(255,255,255,.3);
	font-size: .8em;
	height: auto;
	padding: 5px;
	text-align: left;
	background: black;
	border: 3px solid indianred;
	border-radius: 10px;
	position: absolute;
	top: 110%;
	z-index: 999;
	filter:grayscale(1%);
	right: -4em;
	transition: .2s all ease-in;
	max-width: 17em;
	visibility: hidden;
	top: 100%;
}

div.player#right div.chat {
	left: -4em;
	right: auto;
}

div.player#myself div.chat {
	bottom: 100%;
	left: 0;
	right: auto;
	top: auto;
	width: auto;
}

div#game.foursome div.player#left div.chat {
	bottom: 105%;
	top: auto;
}

div.player div.chat:before {
	content: '\03E\03E  ';
	font-family: "Quicksand";
	color: indianred;
}

div.player.showChat div.chat {
	visibility: visible;
	opacity: .9;
	top: 110%;
}

div.player.showChat#myself div.chat {
	bottom: 110%;
	top: auto;
}


div.player.showChat {
	opacity: .99;
	filter: grayscale(1%);
}


/* SKAT Round Select Rules */

div#roundDialog input[type=submit] {
	font-size: 1.2em;
	width: 7em;
	margin-left: 10%;
}

div#roundOption {
	position: absolute;
	top: 0;
	left: 100%;
	border-left: 2px solid black;
	border-radius: 7px;
	margin: 15px;
	padding:5%;
	display: none;
}

/* Normal moeglich (beim Null) or Hand */
input#roHand, input#roHand + label { display: none; }

div#roundDialog button { background: white; box-shadow: 0 0 4px rgba(0,0,0,.7); }
div#roundDialog button:hover { background: black; }
div#roundDialog.handspiel button#leaveSkat, div#roundDialog:not(.handspiel) button#takeSkat {
	color: white;
	background: black;
}

div#roundDialog.handspiel button#sortSkat, div#roundDialog:not(.handspiel) button#leaveSkat {
	color: darkgray;
	border-color: darkgray;
}
div#roundDialog.handspiel button#sortSkat:hover, div#roundDialog:not(.handspiel) button#leaveSkat:hover {
	background: white;
	color: darkgray;
}


div#roundDialog.handspiel input#roNone + label { display: none; }
div#roundDialog.handspiel input#roHand + label { display: inline; }

/* Show game selector */
div#roundDialog input#rtNullspiel:checked ~ div#roundOption, div#roundDialog.handspiel div#roundOption { display: inline-block; }

/* Kein Schneider oder Schwarz ansagen beim Hand */
div#roundDialog input#rtNullspiel:checked ~ div#roundOption input#roSchneider,
div#roundDialog input#rtNullspiel:checked ~ div#roundOption input#roSchneider + label,
div#roundDialog input#rtNullspiel:checked ~ div#roundOption input#roSchwarz,
div#roundDialog input#rtNullspiel:checked ~ div#roundOption input#roSchwarz + label { display: none; }

div#roundDialog form {
	display: inline-block;
    vertical-align: top;
    margin-left:10px;
    padding: 1em;
    max-width:40%;
    font-size: 1.1em;
	position: relative;
}

div#game.Ramsch div#roundDialog input[type=radio], div#game.Ramsch div#roundDialog label { display: none;  }
div#game.Ramsch div#roundDialog button#takeSkat, div#game.Ramsch div#roundDialog button#leaveSkat { display: none; }


div#roundDialog > h1:before { content: 'Spiel einstellen'; }
div#game.Ramsch div#roundDialog > h1:before { content: 'Karten austauschen'; }
div#roundDialog > h2 { text-align: center; }

input[type="radio"], input[type="checkbox"] {
	display: none;
}
input[type="radio"] + label:before, input[type="checkbox"] + label:before {
	content: '';
	display: inline-block;
  width: .5em;
  font-size: 2em;
  line-height: .4;
  height: .5em;
  margin-right: .3em;
  margin-top: 2px;
  overflow: visible;
  border: 2px solid black;
  color: black;
  border-radius: 100%;
  vertical-align: bottom;

}
input[type="radio"]:checked + label:before, input[type="checkbox"]:checked + label:before {
	content: '\2713';
	background: radial-gradient(transparent,rgba(0,0,0,.4));
}

/* lobby-select */

.lobby-option:not(.active) {
  display: none;
}

div.lobby-select {
  background-color: #9cbfca;
}

div.lobby-select button {
  font-size:.7em;
  border: initial;
}

div.lobby-select button:hover, div.lobby-select button.active {
  background: #64afc7;
}

/* Hide N/A message */
div#players.available div#players_members_new > p {
  display: none;
}

.hide_away {
	position: fixed;
	left: -9999px;
}