/* Page styling
================================== */
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,700);
html { 
  height: 100%;
  background-color: #EEE; 
}
body {
  box-sizing: border-box;
  min-height: 100%;
  margin: 0 auto;
  padding: 2em;
  max-width: 800px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.2em;
  background-color: white;
  border: double 3px #DDD;
  border-top: none; border-bottom: none;
}
h1, h2, h3, h4, h5, h6 { margin-top: 0; }
h3 { font-size: 1.2em; }
h4 { font-size: 1em; }
strong { color: darken(slategrey,20%); }


.app-description {
	font-size:1.4rem;
	
}

.players-container {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
   position: relative;
}

.buyin-type {  
  font-size: 100%;
}

.player-card {
  border: 2px solid black;
  box-shadow: .5px 1px #888888;
  margin:.3em;
  width: max(45%, 321px);
  height: 10em;
  position: relative;
}

.player-name { 
  padding-top:.3rem;
  outline:2px solid black;
  font-size:2.0rem;
  text-align: center;
  height:15%;
}
.player-buyins {
  font-size: 100%;
  display:flex;
  justify-content: space-around;
  text-align: center;
  height:50%;
  font-weight:bold;
}

.player-card-summary {
  background:white;
  border: 2px solid black;
  box-shadow: .5px 1px #888888;
  border-radius: 4px;
  margin:auto;
  
  height: 9em;
  position: relative;
  transform-style: preserve-3d;
  transition: .5s;
}

.flip-box {
	perspective: 1000px;
	 position: relative;
	 width: max(22%, 130px);
	 margin:auto;
	 margin-top:.5em;
}

.flip-box:hover .player-card-summary {
	transform: rotateY(180deg);
}


.front, .back {
	width:100%;
	height:100%;	
	backface-visibility:hidden;
}

.front {
	position: absolute;
	transform: rotateX(0deg);
}

.back {
	transform: rotateY(180deg);
	position: absolute;
}


.player-name-summary {
  overflow-wrap: break-word;
  padding-top:.3rem;
  border-bottom: 2px solid black;
  font-size:1.8rem;
  text-align: center;
  height:20%;
}

.player-results-card-details
{
	padding:0.2rem;
	font-size:0.95rem;
}

.smaller-font {
	font-size:1.2rem;
}

.player-wonlost-summary {
  padding-top:.8rem;
  font-size:2.2rem;
  text-align: center;
}

.card-wonlost-back {
border-top:2px solid black;
  text-align: center;
  position: absolute;
   bottom: 0; 
   padding-top:0.1rem;
  height:14%;
  width:100%;
  font-size:1.3rem;
}

tr.spaceUnder>td {
  padding-bottom: 0.5em;
}

.winner-summary {
	background: #f5fff0;
}
.loser-summary {
	background: #f7dfdf;
}


.buyin-types {
  font-size: 90%;
  text-align:left;
  padding-top:1.6rem;
  padding-left:.5rem;
  width: 60%;
}

.total-buyin {
  font-size: 105%;
  padding-top:1rem;
  width: 45%;
  background: #fffee0;
}

 .total-buyin p {
  font-size: 120%;
 line-height: .1;
}

.player-buttons {
  display:flex;
  justify-content:space-around;
  align-items:center;
  text-align: center;
  position: absolute;
  bottom:.2rem;
  height:30%;
  width:100%;
  font-size:1.2rem;
}

.rebuy-button {
  font-size:inherit;
  background-color: #207a2a;
  color: white;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  width: 50%;
  margin:.1rem;
  height:100%;
}

.cashout-button {
  font-size:inherit;
  background-color: #611a0c;
  color: white;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  width: 50%;
  margin:.1rem;
  height:100%;
}

.endgame-button {
  background-color: #211a0c;
  color: white;
  font-size:1.5em;
  padding: 14px;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  width: min(50%, 300px);
  margin:10px;
  margin-right:0px;
}

.gameconcluded-button {
	width: min(65%, 500px);
}

.add-player-button {
  background-color: #216ade;
  color: white;
  font-size:1.5em;
  padding: 14px;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  width: min(50%, 3000px);
  margin:10px;
  margin-right:0px;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: absolute;  
  bottom: 15%;
  right: 10%;
  border: 3px solid #f1f1f1;
  z-index: 11;
}

/* Add styles to the form container */
.form-container {
  max-width: 250px;
  padding: 10px;
  background-color: white;
}
.gameName {
	font-size:2rem;
	color: #0090ff;
	padding:.25em;
	margin-left:1.25em;
	box-shadow: 2px 4px #888888;
	
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: grey;
  opacity: .5; /* Firefox */
}

/* Set a style for the submit/login button */
.btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: min(200px, 85%);
  margin-bottom:8px;
  opacity: 0.7;
}

.btn-startgame {
	margin-top:10px;
}

/* Button to access additional options when needed */
.btn-options {
	width: min(350px, 85%);
	padding: 8px 20px;
	opacity: 0.8;
	font-size:1.2rem;
  background-color: #8f9ff2;
}

/* Add a red background color to the cancel button */
.cancel {
	opacity: 0.7;
  background-color: red;
}

/* Add some hover effects to buttons */
.btn:hover, .open-button:hover {
  opacity: 1;
}

.form-cashout {
	background: #ffd2c9;	
}

.bottombuttons {
	display:flex;
	align-items: center;
	justify-content: space-around;	
	width: 100%;
}

.payout-container {
	background: #e1f9fa;
	width: min(450px, 75%);
	padding: 10px;
	margin: 10px;
}
.payout-title, .cashbox-title {
	font-weight: bold;
	text-align: center;
}

.already-paid {
	color:#1d20b3;
}

.cashbox-container {
	background: #f0ffe6;
	width: min(450px, 75%);
	padding: 10px;
	margin: 10px;
}

.cashbox-content, .payout-content {
	font-size:1.4rem;
}

.gamesummary-container {
	width: min(750px, 95%);
	padding: 10px;
}
.gamesummary-title {
	width:100%;
	padding: 1px;
	font-weight: bold;
	text-align: center;	
}

.gamesummary-players {
	width:100%;
	display: block;
}

.gamesummary-winner {
	vertical-align: top;
	width:45%;
}

.gamesummary-loser {
	width:45%;
}

/* The Confirm Popup (background) */
.confirm-popup {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Confirm Popup Content */
.confirm-popup-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: min(70%, 600px);
}



.confirmation-message-text {
	font-weight:bold;	
}

.popup-window-buttons { /* Holding the buttons for all popup windows */
	padding-top:15px;	
}

.dollars-input, .player-input {
	width:min(30%, 8.5em);
	font-size:26px;
}

.cash-credit-radio {
  display:flex;
	width:min(40%, 10.5em);
	padding:0.15em;  
  justify-content:center;
}

.cc-switch {
  border:1px solid black;
  width:36%;
  margin:.2em;
  padding:.8em;
  cursor:pointer;
  background: #dedede;
  text-align: center;
}

.cc-switch-on {
  background:#dbffea;
}

.status-boxes {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	padding:.2em;
}

.game-total-status, .bank-status {
	padding:.8em;
	border: 2px solid green;
	background:#f0ffe6;
	min-height: 4em;
	min-width: 10em;
	text-align: center;
}

.bank-note {
	width:100%;	
	padding:1em;
}

.expand-cashout-advanced-options {
	cursor:pointer;
	color:blue;
	font-family:verdana;
	width:100%
}

.cashout-advanced-options-container  {
	position:relative;
	height:3rem;
}

.cashout-advanced-options  {
	font-family:verdana;
}

.red-warning {
	border: 6px solid red;
}

input[type="radio"]{margin-left: 20px;}



@media screen and (min-device-width : 320px) and (max-device-width : 700px) { /* Confirm Popup  for Mobile */
  .confirm-popup-content {
      background-color: #fefefe;
	  font-size:3rem;
	  margin: auto;
	  padding: 20px;
	  border: 1px solid #888;
	  width: 95%;
	  height: 95%;
	  text-align:center;
  }
	  .dollars-input, .player-input {
		width:max(75%, 11.5em);
		font-size:4.5rem;
		text-align:center;
	}
	
	
	.app-description {
		font-size:1.8rem;
		padding:2rem;

	}
	.newGameForm {
		width:100%;
		text-align:center;
	}
	
	.gameName { 
		font-size:3.5rem;
		text-align:center;
		margin:auto;
	}

	.btn {
	  padding: 28px 20px;
	  border: none;
	  cursor: pointer;
	  width: min(100%);
	  min-height: 12%;
	  font-size:3.0em;
	  margin-bottom:10px;
	  opacity: 0.7;
	}

	.cash-credit-radio {
	  display:flex;
		width:90%;
		padding:0.25em;  
	  justify-content:center;
	  margin:auto;
	}
	
	.player-card {
		width:75%;
		height:11em;
		font-size:150%;
	}
	
	.player-name {
		font-size:150%;
		padding-top:1rem;
	}
	
	.player-buttons {
		font-size:2.4rem;
		height:40%;
	}
	
	.player-buyins {
	  height:40%;
	}
	

	
	.gameconcluded-button {
		width: min(65%, 600px);
	}

	.add-player-button {
		Opacity:100%;
		font-size:2.5em;
		padding: 22px;
		margin:0px;
		padding-right: 0px;
		width: 50%;
		height:3.5em;
		position: fixed;
		bottom:0px;
		left:0px;
		line-height:3em;
	}
	
	.endgame-button {
		Opacity:100%;
		font-size:2.5em;
		padding: 22px;
		margin:0px;
		padding-right: 0px;
		width: 50%;
		height:3.5em;
		position: fixed;
		bottom:0px;
		right:0px;
		line-height:3em;
	}
	
	.game-total-status, .bank-status {
		position: fixed;
		padding:0px;
		padding-top:1.5%;
		font-size:2rem;
		width:10em;
		height:4em;
		bottom:calc(3.5em + 36px);
		width:50%;		
	}
	.game-total-status {
		left:0px;
	}
	.bank-status {
		right:0px;
	}
	
	.filler-div {
		height:40vh;
	}


	body {
	  max-width: 95%;
	}


}