@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Noto+Sans&display=swap');

a,a:visited {color: #fff;text-decoration:none;font-weight: bold;}
a:hover,a:active {color: #aaa;}

/*ingame*/
*::-webkit-scrollbar-track {
	box-shadow: 0 0 10px #000;
	background-color: #333;
	
}

*::-webkit-scrollbar {
	width: 12px;
	background-color: #333;
}

*::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #4f71ff;
	border-radius: 30px;
}

#question {
	width: calc(100% - 20px);
	padding: 5px !important;
	height: 15vh;
	min-height: 120px;
	position:relative;
}

#question h3 {
	margin: 0;
	position: absolute;
	top: 60%;
	left: 0;
	width: calc(100% - 20px);
	padding: 0 10px;
	transform: translate(0, -60%);
}


#mycards,#answers {
	height: 23vh;
	padding: 5px !important;
    width: calc(100% - 20px);
    overflow-x: auto;
    white-space: nowrap;
	position: relative;
	min-height: 150px;
}


#players {
    width: calc(100% - 50px);
    overflow-x: auto;
    white-space: nowrap;
}

#players .player, .account {
	padding: 10px;
	background: #222;
	border-radius: 4px;
	margin-right: 10px;
	box-shadow: 0 0 5px Cyan;
	
	color: #aaa;
}
	.account {
		box-shadow: 0 0 5px #add8e6 !important;
		color: #fff !important;
	}
	
	
	.price {
		font-weight: normal !important;
		background: #000;
		border-radius: 4px;
		padding: 10px;
		font-weight: bold;
		color: #fff;
		font-size: 11px;
	}
	
	.price_desc {float:right;color:#fff;font-size:16px;}
	
	#players .player img,.account img,.price img, .beer {margin-bottom:-2px;}
		

#players a {text-decoration: none !important;}
	
#players .player_waiting {
	box-shadow: 0 0 0 !important;
}

#players .player_selecting, .card_winner {
	box-shadow: 0 0 5px Gold;
}

#players .player .points,.account .points {
	font-weight: normal !important;
	background: #000;
	border-radius: 4px;
	margin: -10px 10px -10px -10px;
	padding: 10px;
	font-weight: bold;
	color: #fff;
}

#load_answers {
	position: relative;
	height: 100%;
	width: 100%;
}

	

.card {
	position:relative;
	min-height: calc(100% - 10px);
	width: 10%;
	min-width:120px;
	max-width: 150px;
	border: 2px solid #000;
	
	background: url(../img/cardsignature.png) bottom center no-repeat, url(../img/card.png) center;
	color: #eee;
	display: inline-block;
	margin: 0 5px;
	
	border-radius: 5px;
	text-decoration: none;
	font-weight: normal;
	text-align: center;
}

.card2 {
	height: 120px;
	width: 150px;
	border: 2px solid #000;
	
	background: url(../img/cardsignature.png) bottom center no-repeat, url(../img/card.png) center;
	color: #eee;
	float: left;
	margin: 5px;
	padding: 10px 4px;
	display: inline-block;
	border-radius: 5px;
	text-decoration: none;
	font-weight: normal;
	text-align: center;
	font-size: 15px;
}

.card span {
	margin: 0;
	position: absolute;
	top: 20%;
	left: 0;
	transform: translate(0, -20%);
	white-space: pre-line;
	width: calc(100% - 8px);
	padding: 0 4px;
	text-align: center;
	display: block;
	font-size: 15px;
}



#answers {
	padding-top: 30px !important;
}

.oneAnswer, .oneAnswer_select {
	border: 2px solid rgba(255,255,255,0.6);
	border-radius: 25px;
	box-shadow: inset 0 4px 10px rgba(255,255,255,0.6), 0 -4px 10px rgba(255,255,255,0.6);
	margin-left: 10px;
	transition: ease-in 250ms;
}

.winAnswer, .oneAnswer_select:hover, .oneAnswer_select:active {
	border: 2px solid gold;
	box-shadow: inset 0 4px 10px gold,0 -4px 10px gold;
	border-radius: 25px;
	transition: ease-in 250ms;
}

.yourAnswer {
	border: 2px solid Cyan;
	box-shadow: inset 0 4px 10px Cyan,0 -4px 10px Cyan;
	border-radius: 25px;
}
/*
#answers .card span {
	padding: 10px;
	display: inline-block;
	border-right: 2px solid #aaa;
	position:relative;
	height: calc(100% - 30px);
}

#answers .card span:last-child {
	border-right: 0 !important;
}
*/


.white {
	box-shadow: 0 0 5px white;
	float:left;
}

.card-title,.points_limit {
	color: #aaa;
	margin: 0 auto;
	font-size: 0.75rem;
	position: absolute;
	top:5px;
	line-height: normal;
	display: inline-block;
}
#answers #load_answers .card-title {top: -25px;}
.card-title{left:5px;}

.points_limit {right: 5px;}

.clear{clear:both;}

/**/

/*end ingame*/

body {
	padding: 50px 0 0 0;
	margin: 0;
	background: url(../img/bg.png) center;
	color: #fff;
	font-family: 'Noto Sans', sans-serif;
}

#userpanel {
	background: #000;
	color: rgba(255,255,255,0.88);
	min-height: 50px;
	line-height: 50px;
	padding: 0 15px;
	position: fixed;
	width: calc(100% - 30px);
	top:0;
	left: 0;
	z-index: 2;
}

	#userpanel .buttons a {
		color: #fff;
		background: #333;
		height: 40px;
		line-height: 40px;
		margin-top: 5px;
		margin-right: 5px;
		display: inline-block;
		padding: 0 10px;
		border-radius: 4px;
		text-decoration: none;
		font-weight: normal
	}
	
	#userpanel .welcome {float:left; margin-right:15px;}
	#userpanel .welcome h3 {margin:0;padding:0;font-size: 14px;}
	#userpanel .buttons {float:right;margin-right: -5px;font-size:14px;}
	#userpanel .buttons .ui-icon{padding-right:2px;}
	/*
@media only screen and (max-width: 850px) {
	#userpanel .buttons {float:left !important;margin-right: 0 !important;}
}
*/
#wrap {
	padding: 0 15px;
	margin-top: 10px;
	text-align: center;
}

.box {
	width: calc(100% - 48px);
	padding: 20px;
	border: 4px solid rgba(0,0,0,0.7);
	background: rgba(0,0,0,0.7);
	margin-bottom: 15px;
	overflow-x: auto;
}


.box h1, .box h3 {
	font-family: 'Montserrat', sans-serif;
	padding: 0;
}

.box h1 {margin: 0 0 20px 0;}

.box h3 {margin: 0 0 10px 0;}

.box input, .box select {
	border: 2px solid #555;
	background: #333;
	padding: 0 10px;
	margin: 0 auto 15px auto;
	height: 40px;
	line-height: 40px;
	color: #fff;
	width: 80%;
	max-width: 400px;
	display: block;
	font-size: 1.4rem;
	text-align: center;
}

input[type="checkbox"] {
	width: 32px;
	height: 16px;
	display: inline-block;
}

.box select {
	max-width: 425px !important;
	width: calc(80% + 25px);
}

.input-title {
	width: 80%;
	max-width: 400px;
	color: #aaa;
	margin: 0 auto;
	text-align: left;
}

.box button, .btn {
	padding: 0 15px;
	height: 40px;
	line-height: 40px;
	border: 2px solid rgba(0,0,0,0.3);
	text-align: center;
	background: #163edd;
	cursor: pointer;
	color: #fff !important;
	width: calc(80% + 25px);
	max-width: 425px;
	display: block;
	margin: 0 auto 15px auto;
	text-transform: uppercase;
	font-weight: bold !important;
	font-size: 14px !important;
}

	a.btn{
		max-width: 390px !important;
		margin-top: 20px;
	}


.flex-center { 
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	z-index: 10000;
} 
 
	.preloader { 
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background: url(../img/bg.png) center;
	} 
 
	.dots .dot { 
		display:inline-block;
		width:30px;
		height:30px;
		border-radius: 100%;
		margin:0 10px;
		background:#fff;
		-webkit-animation:dot-dot-dot 1s linear infinite;
		animation:dot-dot-dot 1s linear infinite;
	} 
 
		.dots .dot:nth-child(2) { 
			animation-delay: 100ms;
		}
	 
		.dots .dot:nth-child(3){ 
			animation-delay: 200ms;
		}
 
			@keyframes dot-dot-dot{ 

				20% {
					opacity: 1;
					-webkit-transform: scale3d(1, 1, 1);
					transform: scale3d(1, 1, 1);
				}

				50%,55% {
					opacity: 0.5;
					-webkit-transform: scale3d(1.3, 1.3, 1.3);
					transform: scale3d(1.3, 1.3, 1.3);
				}

				to {
					opacity: 1;
					-webkit-transform: scale3d(1, 1, 1);
					transform: scale3d(1, 1, 1);
				}
			}
			
/*tables*/
table {
	margin:0 auto;
	color: #fff;
	border-radius: .4em;
	overflow: hidden;
}

tr {
	padding: 10px 0;
}
th, td {
	padding: 10px;
	border-bottom: 2px solid #aaa;
}
th, td:before {
color: #6666ff;
}

tr:first-child td {
	font-weight:bold;
}

/*sidenav*/
/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 3; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 18px;
  font-weight: normal;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.notifyjs-container {z-index:1010 !important;}

/*
<div class="notifyjs-corner" style="top: 0px; right: 0px;"><div class="notifyjs-wrapper notifyjs-hidable">
	<div class="notifyjs-arrow" style=""></div>
	<div class="notifyjs-container" style=""><div class="notifyjs-bootstrap-base notifyjs-bootstrap-warn">
<span data-notify-text="">Masz za mało piw by to kupić</span>
</div></div>
</div></div>