.gameGroup
{
	position:relative;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

.gameGroup .divGameGroupIcon
{
	background-position:center left;
	background-repeat:no-repeat;
	background-size:30px 30px;
	float:left;
	height:40px;
	line-height:40px;
	margin-right:5px;
	position:absolute;
	width:36px;
}

.gameGroup .h3GameGroupLabel
{
	height:40px;
	left:40px;
	line-height:40px;
	position:absolute;
}

.gameGroup .divButtonBar
{
	position:absolute;
	right:0px;
	top:0px;
	z-index:2;
}

.gameGroup .btnSearch, .gameGroup .btnPrevious, .gameGroup .btnNext
{
	background-color:#292a2f;
    border:2px solid #3f4656;
    border-radius:50%;
	color:#888b90;
    cursor:pointer;
    float:left;
    height:36px;
	line-height:36px;
    margin-right:15px;
	text-align:center;
    transition:border 0.25s, box-shadow 0.25s, color 0.25s;
    width:36px;
}

.gameGroup .btnSearch:hover, .gameGroup .btnSearch:focus, .gameGroup .btnPrevious:hover, .gameGroup .btnPrevious:focus, .gameGroup .btnNext:hover, .gameGroup .btnNext:focus
{
	border:2px solid #cffdff;
    box-shadow:inset 0px 0px 5px #01eff9, 0px 0px 5px #01eff9;
	color:#ffffff;
}

.gameGroup .btnSearch:after
{
	color:#fbd3ff;
	content:"Search";
	display:none;
	font-family:"Jost", sans-serif;
	text-decoration:underline;
	text-shadow:0 0 5px #e600ff;
}

.gameGroup .btnButton
{
	float:left;
}

.gameGroup .divGamesContainer
{
	left:-30px;
	padding:20px 0px 10px;
	position:relative;
	width:calc(100% + 60px);
}

.gameGroup .divGamesContainer:before
{
	background-color:#1b1c20;
	bottom:10px;
	box-shadow:0px 0px 15px 10px #1b1c20;
	content:"";
	display:block;
	left:0px;
	position:absolute;
	top:30px;
	width:20px;
	z-index:1;
}

.gameGroup .divGamesContainer:after
{
	background-color:#1b1c20;
	bottom:10px;
	box-shadow:0px 0px 10px 10px #1b1c20;
	content:"";
	display:block;
	position:absolute;
	right:0;
	top:30px;
	width:20px;
	z-index:1;
}

.gameGroup .divGamesScroller
{
	overflow-x:scroll;
	overflow-y:hidden;
	padding:0 30px;
	position:relative;
	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;
}

.gameGroup .divGamesScroller::-webkit-scrollbar
{
	background:transparent;
	height:0;
	width:0;
}

.gameGroup .divGamesRow
{
	min-height:250px;
	white-space:nowrap;
}

.gameGroup .divGamesRow.auto
{
	display:grid;
	gap:20px;
	grid-template-columns:repeat(8, 1fr);
	min-height:268px;
	white-space:normal;
}

.gameGroup .divGamesRow:first-child
{
	margin-top:40px;
}

.gameGroup .divGamesRow:after
{
	clear:both;
	content:"";
	display:block;
}

.gameGroup .divGame
{
	background-color:#292a2f;
	border-radius:10px;
	contain:layout style paint;
	cursor:pointer;
	display:inline-block;
	height:224px;
	margin-bottom:20px;
	margin-right:20px;
	overflow:hidden;
	position:relative;
	transition:height 0.25s, margin 0.25s, transform 0.25s, width 0.25s;
    width:calc((100% - 140px) / 8);
}

.gameGroup .divGame:after
{
    box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75);
    content:"";
    display:block;
    height:100%;
    left:0px;
    opacity:0px;
    position:absolute;
    top:0px;
    transition:opacity 0.2s;
    width:100%;
}

.gameGroup .divGame.loaded:after
{
    opacity:1;
}

.gameGroup .divGame:last-child
{
	margin-right:50px;
}

.gameGroup .auto .divGame
{
	margin-bottom:0;
	margin-right:0;
	width:auto;
}

.gameGroup .auto .divGame:last-child
{
	margin-right:0;
}

.gameGroup .divGame:hover, .gameGroup .divGame:focus
{
	transform:scale(1.05);
	z-index:2;
}

.gameGroup .spRating
{
    bottom:2px;
    font-size:14px;
    right:10px;
    position:absolute;
}

.gameGroup .spStar
{
    margin-left:4px;
}

.gameGroup .spMinBet
{
    bottom:2px;
    color:#966dff;
    font-size:14px;
    left:10px;
    position:absolute;
}

.gameGroup .imgGame
{
	height:calc(100% - 24px);
	left:0px;
	object-fit:cover;
	opacity:0;
	position:absolute;
	top:0px;
	transition:opacity 0.2s;
	width:100%;
}

.gameGroup .divGame.loaded .imgGame
{
	opacity:1;
}

.gameGroup .divGameOverlay
{
	background-color:rgba(0, 0, 0, 0.85);
	bottom:0;
	left:0;
	opacity:0;
	position:absolute;
	right:0;
	top:0;
	transition:opacity 0.25s;
}

.gameGroup .noBackground .divGameOverlay
{
	opacity:1;
}

.gameGroup .divGame:hover .divGameOverlay, .gameGroup .divGame:focus .divGameOverlay
{
	opacity:1;
}

.gameGroup .divGameOverlay:after
{
	background-image:url('../../images/iconNeon.webp');
	background-position:center;
	background-repeat:no-repeat;
	background-size:1% 1%;
	content:"";
	display:block;
	height:100px;
	left:calc(50% - 50px);
	position:absolute;
	top:calc(50% - 65px);
	transform:rotate(0deg);
	transition:background-size 0.25s, transform 0.25s;
	width:100px;
}

.gameGroup .noBackground .divGameOverlay:after
{
	background-size:100% 100%;
}

.gameGroup .divGame:hover .divGameOverlay:after, .gameGroup .divGame:focus .divGameOverlay:after
{
	background-size:100% 100%;
	transform:rotate(360deg);
}

.gameGroup .divGameLabel
{
	bottom:20px;
	color:#cffdff;
	font-size:16px;
	left:20px;
	overflow:hidden;
	position:absolute;
	right:20px;
	text-align:center;
	text-overflow:ellipsis;
    text-shadow:0 0 5px #01eff9;
	white-space:nowrap;
}

.gameGroup .btnFavourite
{
	color:#888b90;
	font-size:24px;
	height:40px;
	line-height:40px;
	position:absolute;
	right:0;
	text-align:center;
	top:0;
	transition:color 0.25s, text-shadow 0.25s;
	width:40px;
	z-index:1;
}

.gameGroup .btnFavourite:hover, .gameGroup .btnFavourite:focus, .gameGroup .btnFavourite.fa-heart
{
    color:#ffffff;
    text-shadow:0 0 5px #e600ff;
}

.gameGroup .btnShowMore
{
	display:none;
	left:50%;
	margin-bottom:30px;
	position:relative;
	transform:translateX(-50%);
}

.gameGroup .btnShowMore.show
{
	display:inline-block;
}

.gameGroup .divGame.tournament-badge:before
{
    content:'TOURNAMENT';
    background-color:#e4b5cb;
    background-image:linear-gradient(315deg, #e4b5cb 0%, #722ae6 74%);
    border-radius:5px;
    color:#ffffff;
	filter:drop-shadow(5px 5px 10px #000000);
    font-size:9px;
    height:20px;
    left:10px;
	line-height:21px;
    position:absolute;
    top:10px;
    text-align:center;
    width:70px;
    z-index:1;
}

/* MEDIA QUERIES */
@media (max-width: 2600px)
{
    .gameGroup .divGame
    {
        width:calc((100% - 120px) / 7);
    }

    .gameGroup .divGamesRow.auto
    {
        grid-template-columns:repeat(7, 1fr);
    }
}

@media (max-width: 2400px)
{
    .gameGroup .divGame
    {
        width:calc((100% - 100px) / 6);
    }

    .gameGroup .divGamesRow.auto
    {
        grid-template-columns:repeat(6, 1fr);
    }
}

@media (max-width: 2200px)
{
    .gameGroup .divGame
    {
        width:calc((100% - 80px) / 5);
    }

    .gameGroup .divGamesRow.auto
    {
        grid-template-columns:repeat(5, 1fr);
    }
}

@media (max-width: 1800px)
{
	.gameGroup .divGame
	{
		height:194px;
	}

	.gameGroup .divGamesRow, .gameGroup .divGamesRow.auto
	{
		min-height:220px;
	}
}

@media (max-width: 1600px)
{
	.gameGroup .divGame
	{
		height:204px;
		width:calc((100% - 60px) / 4);
	}

	.gameGroup .divGamesRow, .gameGroup .divGamesRow.auto
	{
		min-height:230px;
	}

	.gameGroup .divGamesRow.auto
	{
		grid-template-columns:repeat(4, 1fr);
	}
}

@media (max-width: 1400px)
{
	.gameGroup .divGame
	{
		height:224px;
		width:calc((100% - 40px) / 3);
	}

	.gameGroup .divGamesRow.auto
	{
		grid-template-columns:repeat(3, 1fr);
	}
}

@media (max-width: 1200px)
{
	.gameGroup .divGame
	{
		height:204px;
		width:calc((100% - 60px) / 4);
	}

	.gameGroup .divGamesRow.auto
	{
		grid-template-columns:repeat(4, 1fr);
	}
}

@media (max-width: 1100px)
{
	.gameGroup .divGame
	{
		height:184px;
	}

	.gameGroup .divGamesRow, .gameGroup .divGamesRow.auto
	{
		min-height:210px;
	}
}

@media (max-width: 1000px)
{
	.gameGroup .divGame
	{
		height:214px;
		width:calc((100% - 40px) / 3);
	}

	.gameGroup .divGamesRow, .gameGroup .divGamesRow.auto
	{
		min-height:240px;
	}

	.gameGroup .divGamesRow.auto
	{
		grid-template-columns:repeat(3, 1fr);
	}
}

@media (max-width: 900px)
{
	.gameGroup .divGame
	{
		height:194px;
	}

	.gameGroup .divGamesRow, .gameGroup .divGamesRow.auto
	{
		min-height:220px;
	}
}

@media (max-width: 800px)
{
	.gameGroup .divGamesContainer
	{
		left:-20px;
		width:calc(100% + 40px);
	}

	.gameGroup .divGamesContainer:before, .gameGroup .divGamesContainer:after
	{
		width:10px;
	}

	.gameGroup .divGamesScroller
	{
		padding:0 20px;
	}

	.gameGroup .divGame
	{
		height:180px;
		margin-bottom:15px;
		margin-right:15px;
		width:calc((100% - 30px) / 3);
	}

	.gameGroup .divGamesRow, .gameGroup .divGamesRow.auto
	{
		min-height:200px;
	}

	.gameGroup .divGamesRow.auto
	{
		gap:15px;
		grid-template-columns:repeat(3, 1fr);
	}

	.gameGroup .divGameOverlay:after
	{
		height:80px;
		left:calc(50% - 40px);
		top:calc(50% - 55px);
		width:80px;
	}
}

@media (max-width: 700px)
{
	.gameGroup .divGame
	{
		height:154px;
	}

	.gameGroup .divGamesRow, .gameGroup .divGamesRow.auto
	{
		min-height:175px;
	}

    .gameGroup .imgGame
    {
        height:calc(100% - 16px);
    }

    .gameGroup .spMinBet
    {
        bottom: 0;
        font-size: 10px;
        left: 5px;
    }

    .gameGroup .spRating{
        bottom: 0;
        font-size: 10px;
        right: 5px;
    }
}

@media (max-width: 600px)
{
	.gameGroup .btnSearch
	{
		background:none;
		border:none;
		box-shadow:none;
		height:40px;
		line-height:40px;
		margin-right:0px;
		width:auto;
	}

	.gameGroup .btnSearch:hover, .gameGroup .btnSearch:focus
	{
		border:none;
		box-shadow:none;
	}

	.gameGroup .btnSearch:before
	{
		display:none;
	}

	.gameGroup .btnSearch:after
	{
		display:inline;
	}
	
	.gameGroup .btnPrevious, .gameGroup .btnNext
	{
		display:none;
	}

	.gameGroup .btnButton
	{
		font-size:12px;
		height:32px;
		line-height:28px;
		margin-top:3px;
		min-width:60px;
		padding:0px 10px;
	}

	.gameGroup .divGamesContainer
	{
		left:-15px;
		width:calc(100% + 30px);
	}

	.gameGroup .divGamesContainer:before, .gameGroup .divGamesContainer:after
	{
		width:5px;
	}

	.gameGroup .divGamesScroller
	{
		padding:0px 15px;
	}

	.gameGroup .divGamesRow:first-child
	{
		margin-top:30px;
	}

	.gameGroup .divGame
	{
		height:140px;
		margin-bottom:10px;
		margin-right:10px;
		width:160px;
	}

	.gameGroup .divGamesRow, .gameGroup .divGamesRow.auto
	{
		min-height:156px;
	}

	.gameGroup .divGamesRow.auto
	{
		gap:10px;
		grid-template-columns:repeat(3, 1fr);
	}

	.gameGroup .divGameOverlay
	{
		display:none;
	}
}

@media (max-width: 500px)
{
	.gameGroup .divGame
	{
		height:112px;
		width:140px;
	}

	.gameGroup .divGamesRow, .gameGroup .divGamesRow.auto
	{
		min-height:128px;
	}
}

@media (max-width: 420px)
{
	.gameGroup .divGame
	{
		height:100px;
		width:130px;
	}

	.gameGroup .divGamesRow, .gameGroup .divGamesRow.auto
	{
		min-height:116px;
	}
}

@media (max-width: 380px)
{
	.gameGroup .divGame
	{
		height:90px;
		width:120px;
	}

	.gameGroup .divGamesRow, .gameGroup .divGamesRow.auto
	{
		min-height:106px;
	}
}