.field {
	position: absolute;
	background: #387D38;
	width: 860px;
	height: 800px;
}

.card_place > * {
	position: absolute;
	display: inline-block;

	width: 110px;
	height: 170px;
	
	border-radius: 5px;

	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: inset 2px 2px 4px 0px rgba(0, 0, 0, 0.45);
}

.card {
	position: absolute;
	display: inline-block;
	left: 10px;
	top: 10px;
	width: 110px;
	height: 170px;
	border: 1px solid black;
	border-radius: 5px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	background-color: white;
}

	.card > * {
		color: black;
	}


	.card.red {
		--background-color: pink;
	}

		.card.red > * {
			color: red;
		}

	.card.black {
		--background-color: lightgray;
	}

		.card.black > * {
			color: black;
		}

	.card.close_card {
		border: 1px solid black;
		box-shadow: inset 0px 0px 0px 1px #DCDCDC, inset 0px 0px 0px 4px white;
		background-color: #0D32E1;
		background-image: url(card_suit_pattern_white.png);
		background-repeat: repeat;
	}

		.card.close_card > * {
			display: none;
		}





.left_top_card_name {
	position: absolute;
	width: 20px;
	height: 20px;
	display: inline-block;
	left: 10px;
	top: 10px;
}

.right_bottom_card_name {
	position: absolute;
	width: 20px;
	height: 20px;
	display: inline-block;
	right: 10px;
	bottom: 10px;
}

.center_card_name {
	position: absolute;
	width: 40px;
	height: 40px;
	display: inline-block;
	left: 35px;
	top: 55px;
	font-size: 40px;
	text-align: center;
}



/*.close_card:before{
    content:"";
    display:block;
    height: 100%;
    width:100%;
    background: yellow;
}*/

.deck_close {
	left: 10px;
	top: 10px;
}

.deck_close_suit {
	z-index: 100;

	border: 1px solid black;
	box-shadow: inset 0px 0px 0px 1px #DCDCDC, inset 0px 0px 0px 4px white;
	--background-color:#506EF5;
	--background-color:#960000;
	--background-color:#007800;
	background-color: #0D32E1;
	background-image: url(card_suit_pattern_white.png);
	background-repeat: repeat;
}

.deck_open {
	left: 130px;
	top: 10px;
}

.suit_1 {
	left: 370px;
	top: 10px;
}

.suit_2 {
	left: 490px;
	top: 10px;
}

.suit_3 {
	left: 610px;
	top: 10px;
}

.suit_4 {
	left: 730px;
	top: 10px;
}

.col_1 {
	left: 10px;
	top: 240px;
}

.col_2 {
	left: 130px;
	top: 240px;
}

.col_3 {
	left: 250px;
	top: 240px;
}

.col_4 {
	left: 370px;
	top: 240px;
}

.col_5 {
	left: 490px;
	top: 240px;
}

.col_6 {
	left: 610px;
	top: 240px;
}

.col_7 {
	left: 730px;
	top: 240px;
}

.top_card {
	z-index: 50 !important;
}