/*
** flex
*/

.flextable {
	position: relative;
	padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
	margin-bottom: 5px;
}

.border {
	border: 1px solid green;
	border-radius: 6px; 
 }
 
.north-row,
.south-row {
    display: flex;
    justify-content: center;
}

.middle-row {
    display: flex;
    align-items: center;
}

.west-column,
.east-column {
	/* width: 50%; */
    flex: 1;
	min-width: 0;
    display: flex;
}

.west-column {
    justify-content: flex-end;
}

.east-column {
    justify-content: flex-start;
}

.west-columnx {
    background: rgba(255,0,0,.2);
}

.table-columnx {
    background: rgba(0,255,0,.2);
}

.east-columnx {
    background: rgba(0,0,255,.2);
}
.table-column {
    flex: 0 0 auto;
    /* margin: 0 12px; */
}

.board {
	max-width: 320px;
}

.table {
	position: relative;
	/* top: -50px; */
	/* left:-50px; */
	background: linear-gradient(180deg, #2e7d32 0%, #06723a 100%);
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.25);
	width: 80px;
	height: 80px;
}

/* center labels N, O, Z, W */
.table .label {
position: absolute;
color: white;
font-weight: 700;
font-size: 16px;
letter-spacing: 1px;
cursor: pointer;
}
.table .label.north { top:    8px; left: 50%; transform: translateX(-50%); }
.table .label.east  { right:  8px; top: 50%;  transform: translateY(-50%); }
.table .label.south { bottom: 8px; left: 50%; transform: translateX(-50%); }
.table .label.west  { left:   8px; top: 50%;  transform: translateY(-50%); }


.hand {
	/* position: absolute; */
	/* white-space: nowrap; */
	/* padding: 3px 3px; */
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1px;
	font-family: var(--font-family, sans-serif);
	font-size: 20px;
	font-weight: bold;
	/* padding: 8px; */
	background: transparent;
}
.hand.west-hand {
	margin-right: 10px;
}
.hand.east-hand {
	mragin-left: 5px;
}

.suits {
	display:flex;
	align-items: flex-start;
	flex-direction: column;
	justify-content: flex-start;
}

.suit-description {
	display: flex;
	flex-direction: row;
}


.suits .suit {
	font-family: var(--card-font);
	font-size: 12px;
	color: #111;
	/* display: flex; */
	align-items: center;
	white-space: nowrap;
	padding: 3px 3px;
	border-radius: 6px;
	display: inline-flex;
}

.suits .suit img {
	height: 18px;
	width: auto;
	min-width:23px;
	/* object-fit: cover; */
}

.cards {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: 1px;
	min-width: 0;
	width:100%;
	align-items: center;
    /* justify-content: center; */
}

.cardx {
	display: inline-flex;
    flex: 0 0 auto;       /* niet uitrekken */
	background: white;
	background-color: transparent;
	border-radius: 6px;
	border: 1px solid grey;
	white-space: nowrap;
	/* min-width: 25px; */
	margin-right: 0px;
}

.card {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 20px;      /* of wat je mooi vindt */
    /* padding: 0 3px; */
	padding-right: 0.5px;
    /* border: 0.5px solid grey; */
    /* border-radius: 6px; */
    background: rgb(255,255,255,0.6);
	/* opacity: 40%; */
}
.card span {
	position: relative;
	top: +0.5px;
	font-size: 18px; 
	line-height: 1;
	font-weight: bold;
	/* margin: 1px 1px 1px 0; */
	/* padding: 0px 3px 0px 3px; */
	/* justify-content: center; */
	vertical-align: middle;
	cursor: pointer;
}


.card[data-card="10"] span {
  transform: scaleX(1); /* horizontaal samendrukken */
  /* display: inline-block;   /* nodig voor transform, maar heft hidden op */
}

.card.hidden {
	display: none;
}

.invullijn {
	font-weight: normal;
}
.deck_button {
	position: absolute;
	right:	5px;
	bottom: 5px;
}

.deck_button img {
	height: 30px;
	width: auto;
}


.deal_button {
	position: absolute;
	left:	5px;
	bottom: 5px;
}

.deal_button img {
	height: 30px;
	width: auto;
}


/* ==============================
   Deck layout
   ============================== */
   
   
.deck {
	display: flex;
	justify-content: center;
	padding: 10px;
    display: block;
	align-items: center;
    flex-direction: column;
	margin-bottom: 20px;
    /* gap: 20px; */
}

.deck-content {
	margin-left:10px;
	width: 100%;
}

.deck .hands_suits {
	display: flex;
	flex-direction: row;
	/* width:100% */
	justify-content: center;
	/* gap: 20px; */
}

.deck .cards_container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* gap: 20px; */
}


.deck .tekst_deck {
	font-size: 18px;
	font-weight: bold;
	/* padding: 5px 20px 5px 20px; */
	justify-content: left;
	vertical-align: center;
	width:100%;
}

.deck .deck_hands, .deck .deck_suits {
	display: flex;
	flex-direction: row;
}


.xdeck div {
	display: flex; /* of inline-block, afhankelijk van layout */
	position: relative;
	align-items: center; /* verticale centrering */
	justify-content: center;
	/* border: 1px solid #333; /* voorbeeld */ 
	padding: 5px;
	box-sizing: border-box;
}


.deck_hand, .deck_suit, .deck_card {
display: inline-block;
white-space: nowrap;
background: white;
font-size: 25px;
font-weight: bold;
margin: 4px;
padding: 3px 3px;
border-radius: 6px;
border: 1px solid black;
justify-content: center;
vertical-align: center;
}

.deck_hand img {
	display: block;
	height: 20px;
}

.deck_hand.selected {
	background: yellow;
}

.deck_suit.selected {
	background: yellow;
}

.deck_suit img {
	display: block;
	height: 20px;
}

.deck_hands, .deck_suits, .deck_cards {
	white-space: nowrap;
	padding: 3px 3px;
	border-radius: 6px;
	display:flex;
}

.deck_cards {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.deck_cards .card-row {
	display:flex;
	flex-direction: row;
	align-items: center;
}

.deck_cards.selected {
	/* display: flex !important; */
}

.deck_card img {
	display: block;
	height: 25px;
}

.deck_card.assigned {
    background-color: rgb(255 255 255 / 40%);
    color: rgb(0 0 0 / 40%);
}

.deck_card.assigned.border {
    background-color: rgb(255 255 255 / 80%);
    color: rgb(0 0 0 / 60%);
    border: 1px solid green;
}

[hidden] {
	display: none !important;
}