a.ddslink {
	color: var(--orange);
	background-color: var(--bgcolor);
	text-decoration: none;
	font-size: 1.5rem;
	padding: 0.5rem;
	margin-bottom: 1rem;
	font-weight: bold;
	line-height: 2rem;
}

body.activebidplay {
	overflow: hidden;
}

.kontrakt.cardplayavail,
.prvcontract.cardplayavail,
.prvlead.cardplayavail {
	border: thin solid blue;
	cursor: pointer;
}

.kontrakt.cardplayavail.bzttllead,
.prvlead.cardplayavail {
	border-left: none;
}

.kontrakt.cardplayavail:not(.bzttllead),
.prvcontract.cardplayavail {
	border-right: none;
}

#holobidplay {
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	z-index: 4000;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	animation: showholo 0.2s ease;
	overflow: auto;
}

#holobidplay>* {
	animation: moveup 0.2s ease;
}

#holobidplay>div.bidplaytblwrapper {
	display: inline-flex;
	min-width: 100%;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
}

#holobidplay>div.changetrickbtnline {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
}

#holobidplay>.hidemobttip {
	margin: auto;
	padding: 0.5rem 1rem;
	font-size: 2rem;
	line-height: 3rem;
	font-weight: bold;
	border-radius: 0.3rem;
	border: none;
	background-color: var(--orange);
	color: white;
	-webkit-appearance: none;
	appearance: none;
	display: block;
	cursor: pointer;
}

button#lasttrick,
button#nexttrick {
	-webkit-appearance: none;
	appearance: none;
	border: var(--orange);
	background-color: white;
	color: var(--orange);
	font-size: 1.5rem;
	padding: 0.5rem;
	margin: 1rem;
	cursor: pointer;
}

button#lasttrick:disabled,
button#nexttrick:disabled {
	background-color: lightgray;
	color: darkgray;
	cursor: default;
}

div.biddingttip {
	position: fixed;
	background-color: white;
	z-index: 3;
}

table.bidding {
	background-color: white;
	padding: 2rem;
	border: thin solid black;
	font-size: 1.7rem;
}

table.bidding th.vul {
	background-color: red;
	color: white;
}

table.bidding td:not(:nth-child(5)) {
	text-align: center;
	width: 5rem;
}

table.bidding td.alert {
	border: 3px solid red;
	border-radius: 2px;
}

div.pass {
	color: green;
	display: inline;
}

div.double {
	color: red;
	display: inline;
}

div.redouble {
	color: blue;
	display: inline;
}

div.bidplaydiagram {
	display: grid;
	width: unset;
	max-width: unset;
	height: unset;
	max-height: unset;
	grid-template-rows: repeat(6, auto);
	grid-template-rows: repeat(5, auto) minmax(auto, 1fr);
	grid-template-columns: 20rem 10rem 20rem;
	grid-template-columns: 20rem 10rem minmax(20rem, max-content);
	background-color: white;
}

div.bidplaydiagram:not([data-trick="-1"])>.diamiddle,
div.bidplaydiagram[data-trick="-1"]>.playmiddle,
div.bidplaydiagram[data-trick="-1"] .trickcounter {
	display: none;
}

div.bidplaydiagram>#bidplaybottomleft {
	grid-row: 5/7;
	grid-column: 1/2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
}

#bidplaybottomleft>div:last-child {
	font-weight: bold;
}

div.bidplaydiagram>.playername,
#bidplaybottomleft>div {
	padding-left: 0.5rem;
}

div.bidplaydiagram:not([data-trick="-1"])>.playmiddle {
	display: grid;
	height: 100%;
	width: 100%;
	grid-template: repeat(3, calc(100%/3)) / repeat(2, 50%);
}

div.bidplaydiagram:not([data-trick="-1"])>.playmiddle>.playcontainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
}

.bidplaymiddle[data-lead]>.playcontainer>div {
	animation-fill-mode: both;
	animation-name: cardplay;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.bidplaymiddle[data-lead="N"] #play-north,
.bidplaymiddle[data-lead="E"] #play-east,
.bidplaymiddle[data-lead="S"] #play-south,
.bidplaymiddle[data-lead="W"] #play-west {
	border: thin solid black;
	padding: 0.8rem;
	animation-delay: 0s;
}

.bidplaymiddle[data-lead="N"] #play-east,
.bidplaymiddle[data-lead="E"] #play-south,
.bidplaymiddle[data-lead="S"] #play-west,
.bidplaymiddle[data-lead="W"] #play-north {
	animation-delay: 0.5s;
}

.bidplaymiddle[data-lead="W"] #play-east,
.bidplaymiddle[data-lead="N"] #play-south,
.bidplaymiddle[data-lead="E"] #play-west,
.bidplaymiddle[data-lead="S"] #play-north {
	animation-delay: 1s;
}

.bidplaymiddle[data-lead="S"] #play-east,
.bidplaymiddle[data-lead="W"] #play-south,
.bidplaymiddle[data-lead="N"] #play-west,
.bidplaymiddle[data-lead="E"] #play-north {
	animation-delay: 1.5s;
}

div.bidplaydiagram:not([data-trick="-1"])>.playmiddle>#playcontainer-n {
	grid-row: 1/2;
	grid-column: 1/3;
}

div.bidplaydiagram:not([data-trick="-1"])>.playmiddle>#playcontainer-e {
	grid-row: 2/3;
	grid-column: 2/3;
	justify-content: flex-end;
}

div.bidplaydiagram:not([data-trick="-1"])>.playmiddle>#playcontainer-s {
	grid-row: 3/4;
	grid-column: 1/3;
}

div.bidplaydiagram:not([data-trick="-1"])>.playmiddle>#playcontainer-w {
	grid-row: 2/3;
	grid-column: 1/2;
	justify-content: flex-start;
}

div.bidplaydiagram>.diainfo {
	grid-row: 1/3;
}

div.bidplaydiagram[data-trick="-1"]>.diamiddle,
div.bidplaydiagram:not([data-trick="-1"])>.playmiddle {
	grid-row: 3/5;
	grid-column: 2/3;
}

div.bidplaydiagram>#bidplayer-n {
	grid-column: 2/3;
	grid-row: 1/2;
}

div.bidplaydiagram>#playhand-n {
	grid-column: 2/3;
	grid-row: 2/3;
}

div.bidplaydiagram>#bidplayer-e {
	grid-column: 3/4;
	grid-row: 3/4;
}

div.bidplaydiagram>#playhand-e {
	grid-column: 3/4;
	grid-row: 4/5;
}

div.bidplaydiagram>#bidplayer-s {
	grid-column: 2/3;
	grid-row: 5/6;
}

div.bidplaydiagram>#playhand-s {
	grid-column: 2/3;
	grid-row: 6/7;
	align-self: flex-start;
}

div.bidplaydiagram>#bidplayer-w {
	grid-column: 1/2;
	grid-row: 3/4;
}

div.bidplaydiagram>#playhand-w {
	grid-column: 1/2;
	grid-row: 4/5;
}

div.bidplaydiagram>#biddingcontainer {
	grid-column: 3/4;
	grid-row: 5/7;
	padding: 0;
}

#biddingcontainer>.bidding {
	border: none;
	padding: 0;
}

#trickcounter-ns::before,
#trickcounter-ew::before {
	content: attr(data-before)': ';
}

div.singlecard {
	display: inline;
}

div.singlecard.playedcard {
	color: gray;
	text-decoration: line-through;
}

@keyframes cardplay {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}