@charset "utf-8";
/* 22/09/21 Removed body background color as it was overriding the one from app.css
/* 08/08/21 Small change to height of cards.*/

@font-face {
  font-family: 'NFBSuits';
  src:  url('fonts/NFBsuits/NFBSuits.eot?edezsb');
  src:  url('fonts/NFBsuits/NFBSuits.eot?edezsb#iefix') format('embedded-opentype'),
url('fonts/NFBsuits/NFBSuits.ttf?edezsb') format('truetype'),
url('fonts/NFBsuits/NFBSuits.woff?edezsb') format('woff'),
url('fonts/NFBsuits/NFBSuits.svg?edezsb#NFBSuits') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
    font-family: 'card_charactersregular';
    src: url('fonts/card_charactersregular/cardc___-webfont.woff2') format('woff2'),
url('fonts/card_charactersregular/cardc___-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


.cards {
/*  text-align: center;*/
	margin: 0;
}
.pcard {
  position: relative;
  display: inline-block;
  font-family: NFBsuits;
  width: 80px;
  height: 108px;
  border-radius: 4px;
  background: #ffffff;
  border: solid 1px #222;
}

/* top left index */
.pc-tl {
	position: absolute;
	font-family: "card_charactersregular";
	font-size: 17px;
	width: 15px;
	line-height: 60%;
	text-align: center;
	left: -1px;
	top: 7px;	
}

/* bottom right index */
.pc-br {
	position: absolute;
	font-family: "card_charactersregular";
	font-size: 17px;
	width: 15px;
	line-height: 60%;
	text-align: center;
	right: -1px;
	bottom: 7px;
	transform: rotate(180deg);
}


.pc-h {
  color: #DF0101;
}
.pc-h .pc-tl:after,
.pc-h .pc-br:after {
  content: '\A\2665';
  font-family: 'NFBsuits';
  font-weight: normal;
  font-size: 115%;
}
.pc-d {
  color: #DF0101;
}
.pc-d .pc-tl:after,
.pc-d .pc-br:after {
  content: '\A\2666';
  font-family: 'NFBsuits';
  font-weight: normal;
  font-size: 115%;
}
.pc-s {
  color: #252525; 
}

.pc-s .pc-tl:after,
.pc-s .pc-br:after {
  content: '\A\2660';
 font-family: 'NFBsuits';
  font-weight: normal;
  font-size: 115%;
}
.pc-c {
  color: #252525;
}

.pc-c .pc-tl:after,
.pc-c .pc-br:after {
  content: '\A\2663';
  font-family: 'NFBsuits';
  font-weight: normal;
  font-size: 115%;
}
/* playing card inner */
.pc-i {
  box-sizing: border-box;
  position: absolute;
  display: flex;
  justify-content: space-between;
  top: 10%;
  left: 33%;
  right: 18%;
  bottom: 10%;
}
/* playing card inner centered */
.pc-ic {
  justify-content: center;
}
/* playing card column */
.pc-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
   margin-left: -12px;
}
/* playing card column */
.pc-colc {
  justify-content: center;
}
/* playing card symbol.. Altering this affect the vertical spacing with column */
.pc-sy {
  display: inline-block;
  height: 20px;
  text-align: center;
}
.pc-sy:before {
  font-size: 190%;
  line-height: 35%;
}
.pc-h .pc-sy:before {
  content: '\2665';
}
.pc-d .pc-sy:before {
  content: '\2666';
}
.pc-s .pc-sy:before {
  content: '\2660';
}
.pc-c .pc-sy:before {
  content: '\2663';
}
/* playing card symbol rotated */
.pc-syr,
.pc-sy:last-of-type {
  transform: rotate(180deg);
}
.pc-sy:first-of-type {
  transform: rotate(0);
}
.pc-sy-for10 {
  flex-basis: 31px;
}

.pc-sy-for8 {
  flex-basis: 27px;
}

.pc-sy-for7 {
  flex-basis: 53px;
}

.pc-sa {
  font-size: 18px;
  flex-basis: 30px;
}

.pc-face {
	background-position: center; 
    background-repeat: no-repeat; 
	background-size: 66%;
}
.pc-hk {
	background-image: url("face-king-heart.png"); 
}

.pc-hq {
	background-image: url("face-queen-heart.png"); 
}

.pc-hj {
	background-image: url("face-jack-heart.png"); 
}
.pc-dk {
	background-image: url("face-king-diamond.png"); 
}

.pc-dq {
	background-image: url("face-queen-diamond.png"); 
}

.pc-dj {
	background-image: url("face-jack-diamond.png"); 
}
.pc-sk {
	background-image: url("face-king-spade.png"); 
}

.pc-sq {
	background-image: url("face-queen-spade.png"); 
}

.pc-sj {
	background-image: url("face-jack-spade.png"); 
}
.pc-ck {
	background-image: url("face-king-club.png"); 
}

.pc-cq {
	background-image: url("face-queen-club.png"); 
}

.pc-cj {
	background-image: url("face-jack-club.png"); 
}


/*Suit Symbols */
.H {
	font-family: 'NFBSuits';
	color:red;
	font-size: 1.2em;
	font-weight: normal;
	}

.D {
	font-family: 'NFBSuits';
	color: #f2690d;
	font-size: 1.3em;
	font-weight: normal;
	}

.C {
	font-family: 'NFBSuits';
	color:green;	
	font-size: 1.2em;
	font-weight: normal;
	}
.S {
	font-family: 'NFBSuits';
	font-size: 1.2em;
	font-weight: normal;
	}