@charset "UTF-8";
/* ÜTF-8 ENCÖDED */
body {
	background-color : black;
	color            : white;
	font-family      : Tahoma, Arial, sans-serif;
	font-size        : 25px;
	line-height      : 30px;
	margin           : 0px;
	padding          : 0px;
}
#bingo-joker {
	font-size   : 19px;
	line-height : 24px;
}
body ,
body * {
	box-sizing : border-box;
}
h1, h2, h3, h4, h5 {
	font-size : 1em;
	margin    : 0px;
}
#bingo-container {
	display        : table;
	margin-left    : auto;
	margin-right   : auto;
	width          : auto;
}
.bingo {
	background-color : rgba(255, 255, 255, 0.1);
	border-radius    : 5px;
	display          : inline-block;
	height           : 130px;
	margin           : 5px;
	padding          : 0px;
	padding-left     : 5px;
	padding-right    : 5px;
	width            : 130px;
}
.bingo.active {
	background-color : rgba(249, 0, 255, 0.1);
}
.bingo.pling {
	background-color : rgba(249, 0, 255, 0.3);
}
.bingo.pling:before {
	content  : '♣';
	display  : inline-block;
	position : absolute;
	top      : 5px;
	left     : 10px;
}
.bingo.pling.active:before {
	content : '';
	display : none;
}

.bingo.joker.active {
	background-color : rgba(138, 255, 0, 0.1);
}
.bingo.joker.pling {
	background-color : rgba(138, 255, 0, 0.3);
}
.bingo .card {
	cursor         : default;
	display        : table-cell;
	height         : 130px;
	text-align     : center;
	vertical-align : middle;
	width          : 130px;
}
.table {
	display      : table;
	margin-left  : auto;
	margin-right : auto;
	width        : auto;
}
#bingo-joker.table {
	width : auto;
}
.row {
	display : table-row;
}
.cell {
	display  : table-cell;
	position : relative;
}
.help {
	cursor        : help;
	border-bottom : 1px dotted silver;
}
#bingo-highlight {
	background-image: url('../images/feuerwerk-0057.gif');
	background-color: black;
	color           : rgba(255,0,255,1);
	font-weight     : bold;
	font-size       : 200px;
	height          : 100%;
	line-height     : 200px;
	margin-left     : auto;
	margin-right    : auto;
	text-align      : center;
	vertical-align  : middle;
	width           : 100%;
}
#bingo-highlight[style*="block;"] {
	display : table-cell !important;
}

.bingo-joker-headline {
	display     : inline-block;
	float       : left;
	font-size   : 25px;
	line-height : 30px;
	margin      : 0px;
	text-align  : center;
	width       : 25px;
	white-space : normal;
	word-break  : break-all;
}

.description {
	margin-top  : 1em;
	font-size   : 16px;
	line-height : 22px;
}

.pointer ,
.pointer * {
	cursor : pointer;
}

#bingo-pattern {
	background-color    : rgba(255,0,255,0.8);
	background-image    : url('../images/bingo.png');
	background-position : center center;
	background-repeat   : no-repeat;
	background-size     : auto auto;
}
body.show-bingo-highlight #bingo-table ,
body.show-bingo-pattern #bingo-table ,
body.show-bingo-rules #bingo-table ,
body.show-bingo-debug #bingo-table {
	display : table !important;
}
body.show-bingo-highlight #bingo-highlight ,
body.show-bingo-pattern #bingo-pattern ,
body.show-bingo-rules #bingo-rules ,
body.show-bingo-debug #bingo-debug {
	background-color : black;
	display          : table-cell !important;
	text-align       : center;
	vertical-align   : middle;
}

.bingo-active-highlight-pattern {
	display     : block;
	font-size   : 13px;
	line-height : 16px;
}

@media (max-width: 1280px) {
	#bingo-container {
		margin-top: 50px;
	}
}

/*
@media (max-width: 525px) {
	#bingo ,
	#bingo-joker-container {
		float : initial !important;
	}
	#bingo-joker.table .row {
		display : inline-block;
	}
	.bingo-joker-headline {
		display    : block;
		float      : initial;
		text-align : center;
		width      : 100%;
	}
}
@media (max-height: 525px) {
	#bingo ,
	#bingo-joker-container {
		float : initial !important;
	}
	#bingo-joker.table .row {
		display : inline-block;
	}
	.bingo-joker-headline {
		display    : block;
		float      : initial;
		text-align : center;
		width      : 100%;
	}
}
*/