:root {
	--card1Rotate: rotate(-12deg);
	--card1space: 0;
	--card2Rotate: rotate(-10deg);
	--card2space: -10px;
	--card3Rotate: rotate(-8deg);
	--card3space: -19px;
	--card4Rotate: rotate(-6deg);
	--card4space: -25px;
	--card5Rotate: rotate(-4deg);
	--card5space: -30px;
	--card6Rotate: rotate(-2deg);
	--card6space: -33px;
	--card7Rotate: rotate(0deg);
	--card7space: -33px;
	--card8Rotate: rotate(2deg);
	--card8space: -33px;
	--card9Rotate: rotate(4deg);
	--card9space: -30px;
	--card10Rotate: rotate(6deg);
	--card10space: -25px;
	--card11Rotate: rotate(8deg);
	--card11space: -19px;
	--card12Rotate: rotate(10deg);
	--card12space: -11px;
	--card13Rotate: rotate(12deg);
	--card13space: -2px;
	--card14Rotate: rotate(13deg);
	--card14space: 2px;
	--card15Rotate: rotate(14deg);
	--card15space: 6px;
	--card16Rotate: rotate(15deg);
	--card16space: 11px;
	--card17Rotate: rotate(16deg);
	--card17space: 17px;
	--card18Rotate: rotate(17deg);
	--card18space: 24px;
	--card19Rotate: rotate(18deg);
	--card19space: 32px;
	--card20Rotate: rotate(19deg);
	--card20space: 41px;
	--card21Rotate: rotate(20deg);
	--card21space: 51px;
	--card22Rotate: rotate(21deg);
	--card22space: 62px;
	--card23Rotate: rotate(22deg);
	--card23space: 74px;
	--card24Rotate: rotate(23deg);
	--card24space: 87px;
	--card25Rotate: rotate(24deg);
	--card25space: 101px;
	--card26Rotate: rotate(25deg);
	--card26space: 116px;
	--card27Rotate: rotate(26deg);
	--card27space: 132px;
	--card28Rotate: rotate(27deg);
	--card28space: 149px;
	--card29Rotate: rotate(28deg);
	--card29space: 167px;
	--card30Rotate: rotate(29deg);
	--card30space: 186px;
	--card31Rotate: rotate(30deg);
	--card31space: 206px;
	--card32Rotate: rotate(31deg);
	--card32space: 227px;
	--card33Rotate: rotate(32deg);
	--card33space: 249px;
	--card34Rotate: rotate(33deg);
	--card34space: 272px;
	--card35Rotate: rotate(34deg);
	--card35space: 296px;
	--card36Rotate: rotate(35deg);
	--card36space: 321px;
	--card37Rotate: rotate(36deg);
	--card37space: 347px;
	--card38Rotate: rotate(37deg);
	--card38space: 374px;
	--card39Rotate: rotate(38deg);
	--card39space: 402px;
	--card40Rotate: rotate(39deg);
	--card40space: 431px;
	--card41Rotate: rotate(40deg);
	--card41space: 461px;
	--card42Rotate: rotate(41deg);
	--card42space: 492px;
	--card43Rotate: rotate(42deg);
	--card43space: 524px;
	--card44Rotate: rotate(43deg);
	--card44space: 557px;
	--card45Rotate: rotate(44deg);
	--card45space: 591px;
	--card46Rotate: rotate(45deg);
	--card46space: 626px;
	--card47Rotate: rotate(46deg);
	--card47space: 662px;
	--card48Rotate: rotate(47deg);
	--card48space: 699px;
	--card49Rotate: rotate(48deg);
	--card49space: 737px;
	--card50Rotate: rotate(49deg);
	--card50space: 776px;
	--card51Rotate: rotate(50deg);
	--card51space: 816px;
	--card52Rotate: rotate(51deg);
	--card52space: 857px;
	--transformTOP: 0;
	--animateCards: translateX(-25px) translateY(var(--transformTOP));
	--topCard1Rotate: rotate(11deg);
	--topCard1space: -4px;
	--rotation-degree: 0deg;
	--dialogHeight: calc(100vh - 230px);
	--modalZoom: 1;
	--inGameZoom: 1;
	--mainGameZoom: 1;
	--mainPageSpacing: 100px;
	--enterGameTopSpacing: 75px;
	--gameTableZoom: 1;
	--slickArrowSpacing: 60px;
	--gameSpacing: 40px;
	--gameTitleSpacing: 50px;
	--left19CardSpace: -46px;
	--left20CardSpace: -46px;
	--left21CardSpace: -48px;
	--left22CardSpace: -48px;
	--left23CardSpace: -48px;
	--left24CardSpace: -47px;
	--left25CardSpace: -50px;
	--left26CardSpace: -50px;
	--left27CardSpace: -52px;
	--left28CardSpace: -54px;
	--left29CardSpace: -56px;
	--left30CardSpace: -58px;
	--left31CardSpace: -60px;
	--left32CardSpace: -62px;
	--left33CardSpace: -64px;
	--left34CardSpace: -66px;
	--left35CardSpace: -68px;
	--left36CardSpace: -70px;
	--left37CardSpace: -72px;
	--left38CardSpace: -74px;
	--left39CardSpace: -76px;
	--left40CardSpace: -78px;
	--left41CardSpace: -80px;
	--left42CardSpace: -82px;
	--left43CardSpace: -84px;
	--left44CardSpace: -86px;
	--left45CardSpace: -88px;
	--left46CardSpace: -90px;
	--left47CardSpace: -92px;
	--left48CardSpace: -94px;
	--left49CardSpace: -96px;
	--left50CardSpace: -98px;
	--left51CardSpace: -100px;
	--left52CardSpace: -102px;
}

html, body {

    overflow:  hidden !important;

}

.selected-card {
	--transformTOP: -40px;
}

.two_player {
	--card8space: -35px;
	--card9space: -34px;
	--card10space: -33px;
	--card11space: -30px;
	--card12space: -26px;
	--card13space: -20px;
	--card14space: -15px;
}

@media screen and (max-width: 575.98px) {
	.two_player {
		--card1space: -7px;
		--card2space: -11px;
		--card3space: -15px;
		--card4space: -19px;
		--card5space: -22px;
		--card6space: -24px;
		--card7space: -26px;
		--card8space: -26px;
		--card9space: -25px;
		--card10space: -26px;
		--card11space: -25px;
		--card12space: -23px;
		--card13space: -16px;
		--card14space: -15px;
	}

	.middle-cards {
		--card7space: -26px;
		--card8space: -28px;
		--card9space: -29px;
		--card10space: -25px;
		--card11space: -24px;
		--card13space: -18px;
		--card14space: -14px;
	}

	.bunch-cards {
		/* --card1space: -7px;
        --card2space: -11px;
        --card3space: -15px;
        --card4space: -19px;
        --card5space: -22px;
        --card6space: -24px;
        --card7space: -26px;
        --card8space: -24px;
        --card9space: -27px;
        --card10space: -25px;
        --card11space: -23px;
        --card12space: -19px;
        --card13space: -17px;
        --card14space: -15px; */
	}

}

@media screen and (min-width: 992px) and (max-height: 920px) {
	:root {
		--gameTableZoom: 0.95;
	}
}

@media screen and (min-width: 992px) and (max-height: 800px) {
	:root {
		--gameTableZoom: 0.92;
	}
}

@media screen and (min-width: 992px) and (max-height: 700px) {
	:root {
		--gameTableZoom: 0.8;
		--slickArrowSpacing: 40px;
		--gameSpacing: 30px;
		--gameTitleSpacing: 35px;
	}
}

@media screen and (min-width: 1100px) and (max-height: 600px) {
	:root {
		--gameTableZoom: 0.8;
		--slickArrowSpacing: 30px;
	}
}

@media screen and (max-width: 1024px) {

	/* #cardscontainer.cards-boxwrapper {
		height: 200px;
	}
	*/

	#cardSelectionPopup, #teammateSelectionPopup {
		padding: 10px !important;
	}

	#teammateSelectionContainer {
		max-height: 130px !important;
	}

	#joingamedialog {
		height: 400px !important;
    	overflow: auto !important;
	}

	.ui-button.ui-widget {
		z-index: 555;
	}
	#cardscontainer img {
		top: 50px;
	}

	.two_player .played-card.player4.test4,
	.two_player .played-card.player2.test2 {
		left: 0 !important;
		x: 0 !important;
	}

	/* .two_player #team_2_container,
	.two_player #team_1_container {
		bottom: 10px !important;
	} */

	.card-solitairtext {
		bottom: 15px !important;
	}


	/* #rightnamecontainer {
		right: 180px !important;
	} */

	#bid-info {
		width: 315px !important;
		left: 30px !important;
	}
}

@media screen and (max-width: 991.98px) {
	:root {
		--modalZoom: 0.6;
		--inGameZoom: 0.65;
		--mainGameZoom: 0.85;
		--mainPageSpacing: 50px;
		--enterGameTopSpacing: 45px;
		--gameTableZoom: 0.75;
	}
}

@media screen and (min-width: 320px) and (max-height: 700px) {
	:root {
		/* --gameTableZoom: 0.65; */
	}
}

@media screen and (min-width: 320px) and (max-height: 600px) {
	:root {
		--mainGameZoom: 0.7;
		--mainPageSpacing: 30px;
		--enterGameTopSpacing: 30px;
		--gameTableZoom: 0.69;
	}
}



@media screen and (min-width: 320px) and (max-height: 500px) {
	
	:root {
		--dialogHeight: calc(100vh);
		--modalZoom: 0.5;
		--inGameZoom: 0.5;
		--mainGameZoom: 0.63;
		--gameTableZoom: 0.45;
		--slickArrowSpacing: 20px;
		--gameSpacing: 15px;
		--gameTitleSpacing: 20px;
	}
}

@media screen and (min-width: 320px) and (max-height: 400px) {
	:root {
		--mainGameZoom: 0.5;
		--mainPageSpacing: 20px;
		--gameTableZoom: 0.37;
		--inGameZoom: 0.4;
	}
}

@media screen and (min-width: 320px) and (max-height: 330px) {
	:root {
		--inGameZoom: 0.35;
		--mainGameZoom: 0.4;
		--gameTableZoom: 0.32;
	}
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0px;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	line-height: 1;
	margin: 0;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

html {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

img {
	max-width: 100%;
}

*,
*::after,
*::before {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent
}

*:hover,
*:focus,
*:focus-visible,
*:focus-within {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

body {
	flex-grow: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	font-family: "Averia Serif Libre", serif;
	overflow: hidden;
	overflow: auto;
}

.main-wrapper {
	height: 100%;
	flex-grow: 1;
	background: #0a2c07 url(../Images/solitair/BG.jpg) no-repeat center;
	background-size: cover;

	overflow: hidden;
}

@media screen and (min-width: 1124px) {
	.main-wrapper {
		position: relative;
	}
}

#gametable {
	zoom: var(--gameTableZoom);
}

.mb-25 {
	margin-bottom: 25px;
}

.input-box {
	background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%) !important;
	border-radius: 18px;
	padding: 1px;
	position: relative;
}

.form-control {
	background: #242833 !important;
	border-radius: 18px;
	height: 60px;
	color: #fff !important;
	font-weight: 300;
	font-size: 18px !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none;
	width: 100%;
	font-family: "Averia Serif Libre", serif !important;
	padding: 0 15px;
	transition: all 500ms ease;
}

.form-control:focus {
	box-shadow: 0 0 1px 1px #ffffff57 !important;
}

.form-control::-webkit-input-placeholder {
	color: rgba(255, 255, 255, 0.6) !important;
}

.form-control::-moz-placeholder {
	color: rgba(255, 255, 255, 0.6) !important;
}

.form-control:-ms-input-placeholder {
	color: rgba(255, 255, 255, 0.6) !important;
}

.form-control:-moz-placeholder {
	color: rgba(255, 255, 255, 0.6) !important;
}

.text-center {
	text-align: center;
}

.text-whitegradient {
	text-transform: capitalize;
}

.splash-screen::after {
	content: '';
	display: block;
	width: 100%;
	height: 284px;
	background: linear-gradient(180deg, rgba(4, 28, 1, 0) 0%, #041C01 100%);
	position: absolute;
	bottom: 0;
	pointer-events: none;
	z-index: 0;
	left: 0;
}

.entergame-form {
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--enterGameTopSpacing);
}

.formblock-wrap {
	position: relative;
	z-index: 1;
}

.formblock-wrap::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 8px;
	bottom: -8px;
	background: #301101;
	border: 2px solid #471F03;
	border-radius: 40px;
	z-index: 0;
	filter: drop-shadow(0px 8px 0px rgba(0, 0, 0, 0.5));
}

.form-box {
	background: linear-gradient(180deg, #121827 0%, #090C13 100%);
	border: 2px solid #FFB933;
	border-radius: 40px;
	position: relative;
	z-index: 1;
	padding: 30px;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: none;
	display: flex;
	justify-content: center;
	gap: 38px;
}

.ui-button.ui-widget {
	/* background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%); */
	border-radius: 18px;
	font-size: 30px;
	font-weight: 700;
	color: #fff;
	border: 0;
	font-family: "Averia Serif Libre", serif;
	padding: 1px;
	transition: box-shadow 200ms ease;
	margin: 0;
	background: transparent !important;
}

.ui-button.ui-widget:before {
	content: '';
	display: block;
	position: absolute;
	background: #023313;
	left: 0;
	right: 0;
	top: 5px;
	bottom: -5px;
	border-radius: inherit;
}

.ui-button.ui-widget .ui-button-text {
	background: linear-gradient(180deg, #39D361 0%, #0C7D35 100%);
	border-radius: inherit;
	padding: 9px 21px;
	color: #fff;
	text-shadow: 1.5px 0 #023313, -1.5px 0 #023313, 0 1.5px #023313, 0 -1.5px #023313, 1.5px 1.5px #023313, -1.5px -1.5px #023313, 1.5px -1.5px #023313, -1.5px 1.5px #023313;
	text-transform: capitalize;
	position: relative;
	z-index: 1;
}

.ui-button.ui-widget .ui-button-text::after {
	content: '';
	display: block;
	position: absolute;
	left: 1px;
	right: 1px;
	top: 1px;
	bottom: 1px;
	background: linear-gradient(180deg, #39D361 0%, #0C7D35 100%);
	z-index: -1;
	border-radius: inherit;
}

.ui-button.btn-danger .ui-button-text,
.ui-button.btn-danger .ui-button-text::after {
	background: linear-gradient(180deg, #F43837 0%, #AC2325 100%);
}

.ui-button.btn-blue .ui-button-text,
.ui-button.btn-blue .ui-button-text::after {
	background: linear-gradient(180deg, #038FF9 0%, #0F55B7 100%);
}

.ui-button.btn-blue:before {
	background: #160102;
}

.btn-danger.ui-button.ui-widget:before {
	background: #160102;
}

.btn-danger.dangerlight-shade.ui-widget:before {
	background: #560F12;
}

.btn-blue.blue-lightshade.ui-widget:before {
	background: #06224C;
}

.btn.btn-danger:hover {
	box-shadow: 0px 3px 12px 0px #e43333 !important;
}

#jointeam1button,
#jointeam2button {
	width: 100%;
	max-width: 190px;
}

#jointeam1button .ui-button-text,
#jointeam2button .ui-button-text {
	padding-top: 13px;
	padding-bottom: 13px;
}

#joingamedialog .modal-header {
	padding-bottom: 26px;
}

.ui-button.btn-dark .ui-button-text,
.ui-button.btn-dark .ui-button-text::after {
	background: linear-gradient(180deg, #121827 0%, #090C13 100%);
}

.ui-button.btn-dark:before {
	background: #06080E;
}

.ui-button.btn-dark {
	background: transparent;
}

.ui-button.btn-small {
	font-size: 24px;
}

.bid-container .btn-dark .ui-button-text {
	min-width: 100px;
	padding: 8px 10px 5px;
}

.bid-container .ui-button.ui-widget {
	border-radius: 12px;
}

.btn.btn-primary:hover {
	box-shadow: 0px 3px 12px 0px #2cba54;
}

.ui-button-text:before {
	content: '';
	display: block;
	background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
	border-radius: inherit;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}

#chatcontainer .form-box {
	height: 100%;
	padding: 30px 30px 20px 30px;
	display: flex;
	flex-direction: column;
}

.text-light {
	color: #C4CDEB;
}

.creategame-btn .ui-button-text {
	min-width: 282px;
}

.chat-text {
	font-size: 26px;
	margin-bottom: 20px;
	text-align: left;
	display: block;
}

.chat-inputwrap {
	display: flex;
	gap: 20px;
	align-items: center;
}

.chat-inputwrap .input-box {
	flex-grow: 1;
}

.chat-inputwrap input {
	height: 80px;
	background: #1F2228 !important;
}

.chat-inputwrap .btn {
	flex-shrink: 0;
}

.lobbychat {
	color: #858EA3;
	font-size: 22px;
	font-weight: 300;
	max-width: 100%;
	align-self: center;
	text-align: left;
	margin-bottom: 15px;
	word-break: break-word;
}

#lobby {
	padding: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: auto;
}

#gamecontainer {
	width: calc(50% - 10px);
	display: flex;
	justify-content: center;
	height: 100%;
}

#chatcontainer {
	width: calc(50% - 10px);
	max-width: 670px;
}

.gameopen-container {
	max-width: 100%;
	/* align-self: center; */
	/* width: 100%; */
	min-width: 100%;
}

.gameopen-container img {
	margin-bottom: 50px;
}

.gameopen-container p {
	margin-bottom: 100px;
	max-width: 380px;
	margin: 0 auto;
}

.modal-wrapper::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 8px;
	bottom: -8px;
	background: #301101;
	border: 2px solid #471F03;
	border-radius: 40px;
	z-index: 0;
	filter: drop-shadow(0px 8px 0px rgba(0, 0, 0, 0.5));
}

.modal-wrapper.ui-dialog::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(180deg, #121827 0%, #090C13 100%);
	border: 2px solid #FFB933;
	border-radius: 40px;
}

.modal-wrapper .ui-dialog-titlebar {
	display: none;
}

.modal-wrapper.ui-widget-content {
	border: 0;
	background: transparent;
	padding: 30px;
	overflow: visible;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	left: 50% !important;
	zoom: var(--modalZoom);
	z-index: 1;
}

.modal-wrapper.ui-dialog .ui-dialog-content {
	z-index: 9999;
	padding: 0;
	overflow: auto;
}

#leavegameconfirmationdialog,
#confirmbegingamedialog,
#abortdialog,
#joinConfirmationDialog {
	min-height: auto !important;
}

.ui-button.btn-smaller {
	font-size: 19px;
}

.ui-button.btn-smaller .ui-button-text {
	padding-top: 13px;
	padding-bottom: 13px;
}

.modal-wrapper.ui-dialog .ui-dialog-buttonpane {
	/* z-index: 9999; */
	/* position: relative; */
	margin-top: 40px;
	background: transparent;
	border: 0;
}

.ui-widget-overlay {
	opacity: .8;
	background: #000;
	width: 100% !important;
	height: 100% !important;
	z-index: 0;
}

.modal-header {
	width: 100%;
	color: #858EA3;
	/* max-width: 446px; */
	margin: auto;
	font-size: 22px;
	font-weight: 300;
	border: 0;
	padding-bottom: 60px;
	position: relative;
}

.joingame-modalwrapper .ui-dialog-buttonpane {
	margin: 0 !important;
	height: 0;
	padding: 0;
}

.modal-header:not(.no-pattern)::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: auto;
	bottom: 0;
	background: url('../Images/solitair/header-pattern.png') no-repeat center bottom;
	height: 40px;
	mix-blend-mode: soft-light;
	opacity: 0.3;
}

.modal-header img {
	margin-bottom: 20px;
}

.modal-header p {
	line-height: 1.5;
}

.modal-header p:not(:last-child) {
	margin-bottom: 10px;
}

#serverdisconnectdialog .modal-header {
	padding-bottom: 0;
	max-width: 505px;
}

#serverdisconnectdialog .modal-header p:not(:last-child) {
	margin-bottom: 25px;
}

.ui-button.btn.btn-cancel {
	border-radius: 50%;
	z-index: 55555;
}

.btn.btn-cancel:hover {
	box-shadow: 0px 3px 12px 0px #c72a2b;
}

.close-modal {
	position: absolute;
	top: -20px;
	right: -10px;
}

.btn.btn-cancel .ui-button-text {
	padding: 0;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #F43837 0%, #AC2325 100%);
}

.btn.btn-cancel:before {
	background: #560F12;
}

.btn.btn-cancel .ui-button-text::after {
	background: linear-gradient(180deg, #F43837 0%, #AC2325 100%);
}

.form-label {
	color: #C4CDEB;
	font-size: 22px;
	display: block;
	margin-bottom: 10px;
	text-transform: capitalize;
}

.text-whitegradient {
	font-family: "Cinzel Decorative", serif;
	font-size: 28px;
	font-weight: bold;
	/* Make text bolder for better clarity */
	color: #F5FCFF;
	color: #DAEBF5;
	filter: drop-shadow(0px 2px 0px #041A02) drop-shadow(0px 4px 0px rgba(0, 0, 0, 0.3));
	text-shadow: 1px 1px 2px #053501;
	/* Reduced shadow complexity */
	position: relative;
	/* Added to ensure positioning works well with pseudo-elements */
	-webkit-font-smoothing: antialiased;
	/* Smoother text rendering */
	text-rendering: optimizeLegibility;
	line-height: 2;
}

.text-whitegradient:before {
	content: attr(title);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	/* Adjusted to match main text */
	bottom: 0;
	color: transparent;
	/* Make text transparent to avoid overlap blur */
	text-shadow: 1px 0 #3BA931, -1px 0 #3BA931, 0 1px #3BA931, 0 -1px #3BA931;
	/* Simplified shadow for :before */
	z-index: -1;
	/* Place it behind the main text */
}

.heading-textwrap {
	font-family: "Cinzel Decorative", serif;
	font-size: 28px;
	font-weight: bold;
	/* Make text bolder for better clarity */
	color: #F5FCFF;
	/* color: #DAEBF5; */
	/* filter: drop-shadow(0px 2px 0px #041A02) drop-shadow(0px 4px 0px rgba(0, 0, 0, 0.3)); */
	/* text-shadow: 1px 1px 2px #053501;  */
	position: relative;
	/* Added to ensure positioning works well with pseudo-elements */
	-webkit-font-smoothing: antialiased;
	/* Smoother text rendering */
	text-rendering: optimizeLegibility;
	line-height: 2;
	display: inline-block;
}

.heading-textwrap:before {
	content: attr(title);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	/* Adjusted to match main text */
	bottom: 0;
	color: transparent;
	/* Make text transparent to avoid overlap blur */
	/* text-shadow: 1px 0 #3BA931, -1px 0 #3BA931, 0 1px #3BA931, 0 -1px #3BA931;  */
	z-index: -1;
	/* Place it behind the main text */
}

.heading-textwrap span {
	display: inline-block;
	background: linear-gradient(180deg, #FED825 18.94%, #FDB512 87.69%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	font-size: 33px;
}

.ui-widget {
	font-family: "Averia Serif Libre", serif;
}

#startpage {
	padding: var(--mainPageSpacing);
}

#startpage::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: url('../Images/solitair/cards-banner.png') no-repeat center bottom;
	background-size: contain;
	pointer-events: none;
}

.applogo-image {
	margin-bottom: 6px;
}

.mainpage-pattern {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: url('../Images/solitair/landing-pattern.png') no-repeat;
	background-size: cover;
	opacity: 0.3;
}

.top-pattern {
	position: absolute;
	left: 0;
	right: 0;
	width: 640px;
	height: 209px;
	background: url('../Images/solitair/top-pattern.png') no-repeat;
	top: 0;
	margin: auto;
	z-index: 0;
}

.cardgame-mainpage {
	position: relative;
	z-index: 2;
	zoom: var(--mainGameZoom);
}

.creategame-form {
	margin-top: 30px;
	overflow: hidden;
}

.creategame-form>div:not(:last-child) {
	margin-bottom: 20px;
}

.ui-dialog .ui-dialog-buttonpane button {
	margin: 0;
}

#gamedescription {
	width: 100%;
	flex-grow: 1 !important;
	/* height: 104px !important; */
	;
}

#gameaccordiancontainer:not(.gameopen-container) {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

#gameaccordiancontainer:not(.gameopen-container) .games-titlebox,
#gameaccordiancontainer:not(.gameopen-container) .gamein-container,
#gameaccordiancontainer:not(.gameopen-container) #lobbybuttonscontainer,
#gameaccordiancontainer:not(.gameopen-container) .custom-slick-nav {
	zoom: var(--inGameZoom);
}

#ingamecontainer {
	display: flex;
	flex-direction: column;

}

#ingamecontainer>div {
	zoom: var(--inGameZoom);
}

.gamein-container {
	width: 100%;
	max-width: 580px;
	background: rgba(0, 0, 0, 0.4);
	mix-blend-mode: normal;
	border-radius: 40px;
	align-self: center;
	padding: 20px;
	height: 577px;
	display: flex !important;
	flex-direction: column;
	/* justify-content: space-between; */
	max-height: 690px;
	overflow: auto;
	border: 2px solid rgb(255 255 255 / 28%);
	flex-grow: 1;
	margin-left: auto;
	margin-right: auto;
}

.join-button.btn.btn-primary {
	margin-top: 20px;
}

.initial-show.hide {
	display: none;
}

.gametitle_wrap {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 22px;
	padding: 17px;
	margin-bottom: var(--gameTitleSpacing);
}

.gametitle_wrap {
	margin-bottom: 15px;
}

#gameaccordiancontainer .join-link-container {
	padding-bottom: 30px;
}

.gametitle-text {
	background: linear-gradient(270deg, rgba(255, 255, 255, 0.5) -4.53%, #FFFFFF 49.92%, rgba(255, 255, 255, 0.5) 104.37%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	font-size: 30px;
	font-weight: 700;
	margin-bottom: 15px;
	line-height: 45px;
}

.gamestatuscontainer {
	background: linear-gradient(270deg, rgba(255, 255, 255, 0.5) -3.83%, #FFFFFF 50.96%, rgba(255, 255, 255, 0.5) 105.74%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	font-size: 24px;
	line-height: 1.5;
}

.text-subheading {
	background: linear-gradient(270deg, rgba(255, 255, 255, 0.5) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0.5) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	font-size: 25px;
	margin: 15px 0 !important;
	line-height: 1.50;
	margin-bottom: 30px;
	font-weight: 700;
	display: inline-block;
}

.playerbox-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
}

.team-box {
	width: calc(50% - 25px);
}

.player-name span {
	color: #082706;
	display: inline-block;
	font-size: 20px;
	font-weight: 700;
	padding: 8px 24px;
	border-radius: 50px;
	text-shadow: -2px -1px 0 #FFFFFF, 1px 1px 0 #FFFFFF, 0px 0px 0 #FFFFFF, 0px 1px 0 #FFFFFF, 1px 0 0 #FFFFFF, 1px 0 0 #FFFFFF, -1px 1px 0 #FFFFFF, 2px 0px 0 #FFFFFF;
	position: relative;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.2) 100%);
	z-index: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 100%;
}

.player-name span:before {
	content: '';
	display: block;
	position: absolute;
	left: 3px;
	right: 3px;
	top: 3px;
	bottom: 3px;
	z-index: -1;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) -34.29%, #FFFFFF 50.76%, rgba(255, 255, 255, 0.6) 135.82%);
	border-radius: inherit;
}

/* .player-name:not(:last-child) {
	margin-bottom: 30px;
} */

.emptytext span {
	background: linear-gradient(0deg, rgba(79, 86, 108, 0.2) 0%, rgba(79, 86, 108, 0.8) 50%, rgba(79, 86, 108, 0.2) 100%);
	color: #4F566C;
	text-shadow: none;
}

.emptytext span::before {
	left: 3px;
	right: 3px;
	top: 3px;
	bottom: 3px;
	background: #0c1019;
}

.player-name-title {
	background: linear-gradient(90deg, rgba(1, 15, 1, 0) 0%, #010F01 50%, rgba(1, 15, 1, 0) 100%);
	padding: 8px;
	font-size: 26px;
	color: #FFB933;
	text-align: center;
	line-height: 1.19;
	margin-bottom: 10px;
	position: relative;
	max-width: 100%;
	display: inline-block;
	width: 210px;
}

.player-name-title::before,
.player-name-title::after {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, rgba(1, 15, 1, 0) 0%, #FFB933 50%, rgba(1, 15, 1, 0) 100%);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: auto;
}

.player-name-title::after {
	bottom: 0;
	top: auto;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

#confirmbegingamedialog p {
	max-width: 321px;
}

.bid-input {
	width: 103px;
	margin: 0 auto 18px;
	background: transparent url('../Images/solitair/input-pattern.png') no-repeat !important;
	padding: 1px 3px 1px 2px;
}

.teamplayers-box {
	margin-bottom: 30px;
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

#creategamedialog .modal-header p {
	max-width: 446px;
	margin-left: auto;
	margin-right: auto;
}

.bid-container {
	display: flex;
	gap: 20px;
	justify-content: center;
}

.jointeam-containerwrap {
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
	justify-content: center;
	padding-bottom: 5px;
}

#creategamedialog {
	max-height: var(--dialogHeight);
	height: calc(100dvh - 220px) !important;
	overflow: auto;
	margin-left: -20px;
	margin-right: -20px;
	padding-left: 20px;
	padding-right: 20px;
}

.jointeam-box {
	width: calc(50% - 25px);
	max-width: 225px;
	text-align: center;
}

.modal-heading {
	background: linear-gradient(270deg, rgba(255, 255, 255, 0.5) -4.53%, #FFFFFF 49.92%, rgba(255, 255, 255, 0.5) 104.37%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	font-weight: 700;
	font-size: 36px;
	line-height: 1.5;
	display: inline-block;
	margin-bottom: 30px;
	text-transform: capitalize;
}

.modal-headingcontent {
	font-size: 26px;
	background: linear-gradient(270deg, rgba(255, 255, 255, 0.5) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0.5) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	line-height: 1.50 !important;
	font-weight: bold;
}

/*
input {
	border-radius: 4px;
	font-family: 'Quando', serif;
	font-size: .8em;
	background-color: #fff9dc;
	border-style: solid;
	border-color: black;
}
*/

#alertbox {
	position: absolute;
	top: -80px;
	left: auto;
	white-space: normal;
	font-size: 22px;
	font-weight: bold;
	background: #0b2707 linear-gradient(90deg, rgba(191, 40, 42, 0) 0%, #BF282A 50%, rgba(191, 40, 42, 0) 100%);
	padding: 9px 20px;
	border: 0;
	font-family: 'Averia Serif Libre';
	width: 335px;
	max-width: 50%;
	right: 30px;
	text-align: center;
	line-height: 1.18;
	margin-left: 0 !important;
	z-index: 99;
}

#alertbox:before,
#alertbox:after {
	content: '';
	display: block;
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
}

#alertbox:after {
	top: auto;
	bottom: 0;
}

#lobbychatarea {
	height: auto;
	resize: none;
	border-radius: 10px;
	border-style: solid;
	border-color: black;
	font-size: .6em;
	padding: 0 30px;
	overflow: auto;
	margin: 0 -30px;
	width: calc(100% + 60px);
	flex-grow: 1;
	max-height: calc(100vh - 300px);
}

.chatsend-box {
	width: 100%;
	flex-shrink: 0;
	padding-top: 20px;
}

#connectingpage {
	position: absolute;
	width: 100%;
}

.gamedescription {
	font-size: .6em;
	height: 100%;
}

#cardscontainer {
	/* position: absolute;
	width: 700px;
	margin-left: -350px;
	left: 50%;
	bottom: 260px; */
	overflow-x: auto;
	white-space: nowrap;
	cursor: grab;
	/* Hide scrollbar for Chrome, Safari and Opera */
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

#cardscontainer::-webkit-scrollbar {
	display: none;
}

#cardscontainer:active {
	cursor: grabbing;
}

.cards-boxwrapper img {
	/* position: absolute; */
	/* position: static !important; */
	margin-left: -31px;
	margin-right: -31px;
	width: auto;
	height: auto;
	max-width: 115px;
	transition: transform 700ms ease, opacity 200ms ease;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: auto;
}

.points-bottombox .cards-boxwrapper img {
	opacity: 0;
}

#cardscontainer .card:not(.ui-draggable-dragging) {
	left: 0 !important;
	position: relative !important;
}

.cards-boxwrapper img:first-child {
	/* transform: var(--card1Rotate) var(--animateCards); */
	margin-top: var(--card1space);
}

.two_player .cards-boxwrapper:not(.topcards-wrapper) img:first-child {
	margin-left: 0;
}

.points-bottombox .cards-boxwrapper img.show {
	--animateCards: translateX(0) translateY(var(--transformTOP));
	opacity: 1;
}

.cards-boxwrapper img:nth-child(2) {
	/* transform: var(--card2Rotate) var(--animateCards); */
	margin-top: var(--card2space);
}

.cards-boxwrapper img:nth-child(3) {
	/* transform: var(--card3Rotate) var(--animateCards); */
	margin-top: var(--card3space);
}

.cards-boxwrapper img:nth-child(4) {
	/* transform: var(--card4Rotate) var(--animateCards); */
	margin-top: var(--card4space);
}

.cards-boxwrapper img:nth-child(5) {
	/* transform: var(--card5Rotate) var(--animateCards); */
	margin-top: var(--card5space);
}

.cards-boxwrapper img:nth-child(6) {
	/* transform: var(--card6Rotate) var(--animateCards); */
	margin-top: var(--card6space);
}

.cards-boxwrapper img:nth-child(7) {
	/* transform: var(--card7Rotate) var(--animateCards); */
	margin-top: var(--card7space);
}

.cards-boxwrapper img:nth-child(8) {
	/* transform: var(--card8Rotate) var(--animateCards); */
	margin-top: var(--card8space);
}

.cards-boxwrapper img:nth-child(9) {
	/* transform: var(--card9Rotate) var(--animateCards); */
	margin-top: var(--card9space);
}

.cards-boxwrapper img:nth-child(10) {
	/* transform: var(--card10Rotate) var(--animateCards); */
	margin-top: var(--card10space);
}

.cards-boxwrapper img:nth-child(11) {
	/* transform: var(--card11Rotate) var(--animateCards); */
	margin-top: var(--card11space);
}

.cards-boxwrapper img:nth-child(12) {
	/* transform: var(--card12Rotate) var(--animateCards); */
	margin-top: var(--card12space);
}

.cards-boxwrapper img:nth-child(13) {
	/* transform: var(--card13Rotate) var(--animateCards); */
	margin-top: var(--card13space);
}

.cards-boxwrapper img:nth-child(14) {
	/* transform: var(--card14Rotate) var(--animateCards); */
	margin-top: var(--card14space);
	/* -webkit-transform: var(--card14Rotate) var(--animateCards); */
	/* -moz-transform: var(--card14Rotate) var(--animateCards); */
	/* -ms-transform: var(--card14Rotate) var(--animateCards); */
	/* -o-transform: var(--card14Rotate) var(--animateCards); */
}

.cards-boxwrapper img:nth-child(15) {
	/* transform: var(--card15Rotate) var(--animateCards); */
	margin-top: var(--card15space);
}

.cards-boxwrapper img:nth-child(16) {
	/* transform: var(--card16Rotate) var(--animateCards); */
	margin-top: var(--card16space);
}

.cards-boxwrapper img:nth-child(17) {
	/* transform: var(--card17Rotate) var(--animateCards); */
	margin-top: var(--card17space);
}

.cards-boxwrapper img:nth-child(18) {
	/* transform: var(--card18Rotate) var(--animateCards); */
	margin-top: var(--card18space);
}

.cards-boxwrapper img:nth-child(19) {
	/* transform: var(--card19Rotate) var(--animateCards); */
	margin-top: var(--card19space);
}

.cards-boxwrapper img:nth-child(20) {
	/* transform: var(--card20Rotate) var(--animateCards); */
	margin-top: var(--card20space);
	/* -webkit-transform: var(--card20Rotate) var(--animateCards); */
	/* -moz-transform: var(--card20Rotate) var(--animateCards); */
	/* -ms-transform: var(--card20Rotate) var(--animateCards); */
	/* -o-transform: var(--card20Rotate) var(--animateCards); */
}

.cards-boxwrapper img:nth-child(21) {
	/* transform: var(--card21Rotate) var(--animateCards); */
	margin-top: var(--card21space);
}

.cards-boxwrapper img:nth-child(22) {
	/* transform: var(--card22Rotate) var(--animateCards); */
	margin-top: var(--card22space);
}

.cards-boxwrapper img:nth-child(23) {
	/* transform: var(--card23Rotate) var(--animateCards); */
	margin-top: var(--card23space);
}

.cards-boxwrapper img:nth-child(24) {
	/* transform: var(--card24Rotate) var(--animateCards); */
	margin-top: var(--card24space);
}

.cards-boxwrapper img:nth-child(25) {
	/* transform: var(--card25Rotate) var(--animateCards); */
	margin-top: var(--card25space);
}

.cards-boxwrapper img:nth-child(26) {
	/* transform: var(--card26Rotate) var(--animateCards); */
	margin-top: var(--card26space);
}

.cards-boxwrapper img:nth-child(27) {
	/* transform: var(--card27Rotate) var(--animateCards); */
	margin-top: var(--card27space);
}

.cards-boxwrapper img:nth-child(28) {
	/* transform: var(--card28Rotate) var(--animateCards); */
	margin-top: var(--card28space);
}

.cards-boxwrapper img:nth-child(29) {
	/* transform: var(--card29Rotate) var(--animateCards); */
	margin-top: var(--card29space);
}

.cards-boxwrapper img:nth-child(30) {
	/* transform: var(--card30Rotate) var(--animateCards); */
	margin-top: var(--card30space);
}

.cards-boxwrapper img:nth-child(31) {
	/* transform: var(--card31Rotate) var(--animateCards); */
	margin-top: var(--card31space);
}

.cards-boxwrapper img:nth-child(32) {
	/* transform: var(--card32Rotate) var(--animateCards); */
	margin-top: var(--card32space);
}

.cards-boxwrapper img:nth-child(33) {
	/* transform: var(--card33Rotate) var(--animateCards); */
	margin-top: var(--card33space);
}

.cards-boxwrapper img:nth-child(34) {
	/* transform: var(--card34Rotate) var(--animateCards); */
	margin-top: var(--card34space);
}

.cards-boxwrapper img:nth-child(35) {
	/* transform: var(--card35Rotate) var(--animateCards); */
	margin-top: var(--card35space);
}

.cards-boxwrapper img:nth-child(36) {
	/* transform: var(--card36Rotate) var(--animateCards); */
	margin-top: var(--card36space);
}

.cards-boxwrapper img:nth-child(37) {
	/* transform: var(--card37Rotate) var(--animateCards); */
	margin-top: var(--card37space);
}

.cards-boxwrapper img:nth-child(38) {
	/* transform: var(--card38Rotate) var(--animateCards); */
	margin-top: var(--card38space);
}

.cards-boxwrapper img:nth-child(39) {
	/* transform: var(--card39Rotate) var(--animateCards); */
	margin-top: var(--card39space);
}

.cards-boxwrapper img:nth-child(40) {
	/* transform: var(--card40Rotate) var(--animateCards); */
	margin-top: var(--card40space);
}

.cards-boxwrapper img:nth-child(41) {
	/* transform: var(--card41Rotate) var(--animateCards); */
	margin-top: var(--card41space);
}

.cards-boxwrapper img:nth-child(42) {
	/* transform: var(--card42Rotate) var(--animateCards); */
	margin-top: var(--card42space);
}

.cards-boxwrapper img:nth-child(43) {
	/* transform: var(--card43Rotate) var(--animateCards); */
	margin-top: var(--card43space);
}

.cards-boxwrapper img:nth-child(44) {
	/* transform: var(--card44Rotate) var(--animateCards); */
	margin-top: var(--card44space);
}

.cards-boxwrapper img:nth-child(45) {
	/* transform: var(--card45Rotate) var(--animateCards); */
	margin-top: var(--card45space);
}

.cards-boxwrapper img:nth-child(46) {
	/* transform: var(--card46Rotate) var(--animateCards); */
	margin-top: var(--card46space);
}

.cards-boxwrapper img:nth-child(47) {
	/* transform: var(--card47Rotate) var(--animateCards); */
	margin-top: var(--card47space);
}

.cards-boxwrapper img:nth-child(48) {
	/* transform: var(--card48Rotate) var(--animateCards); */
	margin-top: var(--card48space);
}

.cards-boxwrapper img:nth-child(49) {
	/* transform: var(--card49Rotate) var(--animateCards); */
	margin-top: var(--card49space);
}

.cards-boxwrapper img:nth-child(50) {
	/* transform: var(--card50Rotate) var(--animateCards); */
	margin-top: var(--card50space);
}

.cards-boxwrapper img:nth-child(51) {
	/* transform: var(--card51Rotate) var(--animateCards); */
	margin-top: var(--card51space);
}

.cards-boxwrapper img:nth-child(52) {
	/* transform: var(--card52Rotate) var(--animateCards); */
	margin-top: var(--card52space);
}

.topcards-wrapper img:first-child {
	margin-top: -11px !important;
}

.topcards-wrapper img:nth-child(2) {
	margin-top: -4px !important;
}

.topcards-wrapper img:nth-child(3) {
	margin-top: 1px !important;
}

.topcards-wrapper img:nth-child(4) {
	margin-top: 6px !important;
}

.topcards-wrapper img:nth-child(5) {
	margin-top: 9px !important;
}

.topcards-wrapper img:nth-child(6) {
	margin-top: 11px !important;
}

.topcards-wrapper img:nth-child(7) {
	margin-top: 12px !important;
}

.topcards-wrapper img:nth-child(8) {
	margin-top: 12px !important;
}

.topcards-wrapper img:nth-child(9) {
	margin-top: 10px !important;
}

.topcards-wrapper img:nth-child(10) {
	margin-top: 8px !important;
}

.topcards-wrapper img:nth-child(11) {
	margin-top: 4px !important;
}

.topcards-wrapper img:nth-child(12) {
	margin-top: -1px !important;
}

.topcards-wrapper img:nth-child(13) {
	margin-top: -6px !important;
}

.target-area {
	position: fixed;
	width: 670px;
	height: 386px;
	border-style: none;
	left: 0;
	bottom: 0;
	top: -50px;
	margin: auto;
	right: 0;
}

/* .two_player .target-area {
	top: 46%;
} */
.initial-targetarea {
	align-items: center;
	display: flex;
}

#shadow-player3 {
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

#shadow-player2 {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

#shadow-player1 {
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

#shadow-player4 {
	top: 0;
	left: 0;
}

#shadow-player5 {
	top: 0;
	right: 0;
}

#shadow-player6 {
	bottom: 0;
	left: 0;
}

#shadow-player7 {
	bottom: 0;
	right: 0;
}

.games-titlebox {
	margin-bottom: 30px;
}

.player4 img {
	position: static !important;
}

.solitair-card {
	width: 130px;
	height: 183px;
	background: #00000040;
	border: 2px solid #1D7416;
	border-radius: 8px;
}

#faketarget {
	font-size: 26px;
	color: #fff;
	display: none;
}

.boxmiddle-block {
	display: flex;
	flex-direction: column;
}

.boxcard {
	width: 130px;
	height: 183px;
	border-radius: 8px;
	background: transparent;
	border: 2px solid #1D7416;
	display: none;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: absolute;
}

.boxcard.show {
	display: flex !important;
}

.boxcard.show p {
	display: flex;
	align-items: center;
	height: 100%;
	border-radius: 10px;
	background: #00000040;
}

.played-card img {
	width: auto;
	height: auto;
	opacity: 1 !important;
}

/* .played-card.player2{
	position: absolute;width: 130px;top: 0 !important;bottom: 0 !important;display: flex;align-items: flex-start;left: 0 !important;right: 0 !important;margin: auto;
}
.played-card.player3{
	position: absolute;width: 130px;left: auto !important;top: 0 !important;right: 0 !important;bottom: 0 !important;display: flex;align-items: center;
} */
/* .played-card.player1{
	position: absolute;width: 130px;left: 0 !important;top: 0 !important;bottom: 0 !important;display: flex;align-items: center;
} */
.round-summarybox {
	display: flex;
	gap: 40px;
	font-size: 24px;
	flex-wrap: wrap;
	color: #858EA3;
	font-weight: bold;
	overflow: hidden;
	margin: 40px 0 0;
}

.round-summaryinfo {
	width: calc(50% - 20px);
}

.round-summaryinfo span {
	display: block;
	font-size: 34px;
	margin-top: 15px;
}

.roundsummary-content {
	color: #858EA3;
	font-size: 26px;
	font-weight: bold;
	text-transform: capitalize;
}

.boxcard-wrapper {
	/* display: none;
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%); */
}

.played-card:empty {
	/* display: none; */
}

#faketarget {
	position: absolute;
	top: auto;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	z-index: initial !important;
}

.boxcard-wrapper.show,
#faketarget.show {
	display: flex !important;
	align-items: center;
}

#currentbidcontainer {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0.7) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	font-size: 26px;
	line-height: 40px;
	font-weight: 700;
	display: inline-flex;
	justify-content: center;
	margin-bottom: 15px;
	/* position: absolute;
	width: 100%;
	text-align: center;
	bottom: 310px;
	font-size: 26px; */
}

#yourbidcontainer {
	/* position: absolute;
	left: 50%;
	margin-left: -240px;
	text-align: center;
	bottom: 244px; */
}

#yourbidcontainer input {
	height: 50px;
	background: #00000059 !important;
	border-radius: 12px;
	font-size: 24px !important;
	width: 100%;
	padding: 0 10px;
}

#bidbutton {
	/* position: absolute;
	bottom: 266px;
	left: 50%;
	margin-left: 100px; */
}

#passbutton {
	/* position: absolute;
	bottom: 266px;
	left: 50%;
	margin-left: 160px; */
}

#trumpoptions {
	display: flex;
}

#newsfeed {
	/* position: absolute; */
	max-width: 690px;
	text-align: center;
	/* bottom: 270px; */
	/* left: 50%; */
	/* margin-left: -350px; */
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0.7) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.50;
	margin-bottom: 5px;
	display: inline-block;

}

.title-light {
	color: #FFD37E;
	font-weight: bold;
	padding: 8px 20px;
}

#ace_card {
	min-width: 335px;
	position: absolute;
	left: 30px;
	top: 30px;
	z-index: 2;
}

#submitkitty {
	background: #FFD37E !important;
	width: auto;
	display: inline-block;
	padding: 16px 20px;
	color: #000 !important;
	border-radius: 5px;
	text-transform: capitalize;
	font-size: 22px;
	font-weight: 700;
	cursor: pointer;
	margin-top: 30px;
	transition: all 400ms ease;
}

#submitkitty:hover {
	box-shadow: 0px 3px 12px 0px #ffd37e !important;
}

#submitkitty::before,
#submitkitty::after {
	background: linear-gradient(90deg, rgba(1, 15, 1, 0) 0%, #FFD37E 50%, rgba(1, 15, 1, 0) 100%);
}

.trump-selectwrapper {
	position: absolute;
	top: 45%;
	transform: translate(-50%, -50%);
	left: 50%;
	text-align: center;
	z-index: 555;
}

#trumpselector {
	text-align: center;
}

.gap-20 {
	gap: 20px;
}

#trumpselector>span {
	min-width: 270px;
	width: auto;
}

.trumpoption {
	border-style: solid;
	margin: 6px;
	height: 86px;
	width: 86px;
	cursor: pointer;
	background: linear-gradient(180deg, #E6E6E6 0%, #C0C0C0 50%, #E5E5E5 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-position: center;
	position: relative;
}

.trumpoption span {
	width: 100%;
	height: 100%;
	display: block;
	background-position: center;
	z-index: 1;
	pointer-events: none;
}

.trumpoption.active::before {
	content: '';
	display: block;
	position: absolute;
	left: -6px;
	right: -6px;
	top: -6px;
	bottom: -6px;
	border: 2px solid #FFB933;
	border-radius: inherit;
	pointer-events: none;
}

.trumpoption::after {
	content: '';
	display: block;
	position: absolute;
	left: 2px;
	right: 2px;
	top: 2px;
	bottom: 2px;
	background: #fff;
	border-radius: inherit;
	z-index: 0;
	pointer-events: none;
}

#topcardscontainer,
#topcardscontainer2 {
	left: 0;
	right: 0;
	width: 100%;
	position: relative;
	height: 186px;
	margin: -50px 0 0;
	align-items: flex-start;
	display: flex;
	justify-content: center;
	flex-direction: row-reverse;
	transform: rotate(0deg);
}

#topcardscontainer img:last-child {
	margin-left: 0 !important;
}

.card-xbuckets {
	width: auto;
	height: 0;
	/* bottom: 0; */
	/* position: absolute; */
	align-items: flex-start;
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	margin-top: 0;
	/* top: 37%; */
}

#leftcardscontainer {
	width: auto;
	height: 0;
	margin-top: -60px;
	transform: rotate(-89deg);
	/* bottom: 0; */
	position: relative;
	left: 90px;
	height: 186px;
	align-items: flex-start;
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	/* top: 37%;
	left: -155px; */
}

.topcards-wrapper img {
	margin: auto;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	max-width: 115px;
	margin-left: -41px;
	margin-right: -41px;
	width: auto;
	height: auto;
	box-shadow: 8px 0px 10px 0px #00000026;
}

#rightcardscontainer {
	width: auto;
	transform: rotate(-269deg);
	/* bottom: 0; */
	position: relative;
	right: 90px;
	height: 186px;
	align-items: flex-start;
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	margin-top: 0;
	margin-bottom: -60px;
	/* top: 37%;
	right: -155px; */
}

#submitkitty.disabled {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}

#bottomnamecontainer {
	position: absolute;
	text-align: center;
	bottom: 204px !important;
	padding-left: 15px;
	padding-right: 15px;
	left: 50%;
	border-radius: 4px;
	background-color: transparent;
	left: 0;
	right: 0;
	z-index: 55;
	margin: auto !important;
	bottom: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#topnamecontainer {
	/* position: absolute; */
	text-align: center;
	/* top: 130px; */
	padding-left: 15px;
	padding-right: 15px;
	/* left: 50%; */
	border-radius: 4px;
	background-color: transparent;
	margin-left: 0 !important;
	/* transform: translateX(-50%); */
	display: flex;
	column-gap: 10px;
	align-items: center;
}

.two_player #topnamecontainer {
	/* top: 144px; */
}

/* .two_player .target-area {
	top: 47%;
} */

#leftnamecontainer {
	position: relative;
	text-align: center;
	left: 60px;
	/* top: 50%; */
	/* margin-top: -20px; */
	/* left: 56px; */
	padding-left: 15px;
	padding-right: 15px;
	border-radius: 4px;
	background-color: transparent;
	display: flex;
	column-gap: 10px;
	align-items: center;
}

#rightnamecontainer {
	position: relative;
	right: 60px;
	text-align: center;
	/* top: 50%; */
	/* right: 127px; */
	/* margin-top: -20px; */
	padding-left: 15px;
	padding-right: 15px;
	border-radius: 4px;
	background-color: transparent;
	display: flex;
	column-gap: 10px;
	align-items: center;
}

#leftpulsatinggreen {
	z-index: -100;
	position: absolute;
	width: 35px;
	margin-top: -100px;
	top: 50%;
	left: 80px;
	height: 200px;
}

#rightpulsatinggreen {
	z-index: -100;
	position: absolute;
	width: 35px;
	margin-top: -100px;
	top: 50%;
	right: 80px;
	height: 200px;
}

#toppulsatinggreen {
	z-index: -100;
	position: absolute;
	width: 200px;
	margin-left: -100px;
	left: 50%;
	top: 85px;
	height: 35px;
}

#bottompulsatinggreen {
	z-index: -100;
	position: absolute;
	width: 200px;
	margin-left: -100px;
	left: 50%;
	bottom: 8px;
	height: 35px;
}

.confirm-leavedialogue .ui-dialog-buttonset .btn {
	width: calc(50% - 19px);
	max-width: 246px;
}

.confirm-leavedialogue.ui-dialog .ui-dialog-buttonpane {
	margin-top: 20px;
}

.points-bottombox {
	display: flex;
	width: 100%;
	align-items: flex-end;
	justify-content: center;
	padding: 0 20px;
}

.team-points {
	width: 295px;
	text-align: center;
}

.card-solitairtext {
	position: fixed;
    bottom: 20px;
    top: auto;
    text-align: center;
    width: 100%;
    z-index: 55;
}

#cardscontainer {
	width: calc(100% - 410px);
	position: relative;
	/* height: 124px; */
	max-width: 1440px;
	margin: 0 40px;
	align-items: flex-start;
	/* display: flex; */
	overflow: auto !important;
	justify-content: center;
	transition: transform 700ms ease;
	transform-origin: bottom center;

}

.bid-boxwrap {
	width: 100%;
	text-align: center;
	margin-bottom: 190px;
}

.team-name {
	font-size: 22px;
	font-weight: 700;
	display: block;
	margin-bottom: 10px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.two_player .outer-border {
	top: calc(50% + -30px);
}

.team-numberpoints .ui-button-text {
	align-items: center;
	display: inline-flex;
	justify-content: space-between;
	min-width: 140px;
}

.team-numberpoints:before {
	background: transparent !important;
}

.team-pointstext {
	font-size: 24px;
	padding: 10px 8px;
	background: #5B0F11;
	border-radius: 14px;
	line-height: 1.2;
}

.btn-blue .team-pointstext {
	background: #07244E;
}

.ui-button.btn-blue:before {
	background: #010B18;
}

.points-count {
	display: block;
	font-size: 22px;
	flex-grow: 1;
	font-weight: 700;
}

.team-pointswrapper {
	display: flex;
	gap: 15px;
}

.team-pointsbox {
	width: calc(50% - 7.5px);
	display: flex;
	flex-direction: column;
}

.team-numberpoints {
	flex-grow: 1;
}

.team-pointsbox .ui-button.btn-danger:before {
	bottom: -7px;
	background: #160102;
}

.team-pointsbox .ui-button.btn-danger .ui-button-text:before {
	box-shadow: 0px 4px 0px 0px #560F12;
}

.team-pointsbox .ui-button.btn-blue:before {
	bottom: -7px;
	background: #010B18;
}

.team-pointsbox .ui-button.btn-blue .ui-button-text:before {
	box-shadow: 0px 4px 0px 0px #06224C;
}

.team-pointswrapper .ui-button.ui-widget .ui-button-text {
	padding: 5px;
	height: 100%;
	width: 100%;
}

/* #team_1_container {
	position: absolute;
	text-align: center;
	bottom: 10px;
	padding-left: 15px;
	padding-right: 15px;
	left: 10%;
	border-radius: 4px;
	background-color: transparent;
} */
/* #team_2_container {
	position: absolute;
	text-align: center;
	bottom: 10px;
	padding-left: 15px;
	padding-right: 15px;
	left: 81%;
	border-radius: 4px;
	background-color: transparent;
} */
.rotatedclockwise {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
}

.rotatedcounterclockwise {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
}

.card.ui-draggable.ui-draggable-dragging {
	transform: rotate(calc(-1 * var(--rotation-degree))) !important;
}

/* Starst Css for selection */
span.select2.select2-container {
	width: 100% !important;
}

.select2.select2-container {
	background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%) !important;
	border-radius: 18px;
	padding: 1px;
	position: relative;
	border: 0;
}

.select2.select2-container .select2-selection {
	background: #242833 !important;
	border-radius: 18px;
	height: 60px;
	color: #fff !important;
	font-weight: 300;
	font-size: 18px !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none;
	width: 100%;
	font-family: "Averia Serif Libre", serif !important;
	padding: 0 15px;
	transition: all 500ms ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #FFFFFF;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	width: 25px;
	height: 25px;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
	border-radius: 6px;
	right: 18px;
	padding: 1.25px;
	top: 50%;
	transform: translateY(-50%);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	width: 100%;
	height: 100%;
	margin: 0;
	top: 0;
	left: 0;
	position: relative;
	display: block;
	background: #242833 url(../Images/solitair/arrow-down.svg) no-repeat center;
	border: 0;
	border-radius: inherit;
}

.select2-dropdown {
	background: #242833;
	border: 0;
	border-radius: 0 0 20px 20px;
}

.select2-results__option {
	padding: 10px 20px;
	font-family: 'Averia Serif Libre';
	font-size: 18px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: transparent;
	color: #fff;
}

.select2-container--default .select2-results__option--selected {
	background-color: #3b4357 !important;
}

.modal-wrapper .ui-button {
	z-index: 1;
}

.custom-slick-nav {
	display: inline-flex;
	align-items: center;
	margin: 0 auto;
	position: relative;
}

.slick-dotswrapper {
	width: 200px;
	max-width: calc(100% - 100px);
	padding: 0 10px;
	margin-bottom: var(--slickArrowSpacing);
}

#gamecontainer .slick-list,
#gamecontainer .slick-track,
#gamecontainer .slick-slide,
#gamecontainer .slick-slide>div,
#gamecontainer .slick-slide .gamein-container {
	height: 100%;
	width: 100%;
}

.custom-slick-nav .slick-dots {
	position: static !important;
	font-size: 0;
}

.custom-slick-nav .slick-arrow {
	position: relative !important;
	width: 45px;
	height: 45px;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
	border-radius: 11px;
	left: 0 !important;
	top: 0 !important;
	transform: none;
	margin-bottom: var(--slickArrowSpacing);
}

.slick-dots li button {
	background: rgba(0, 0, 0, 0.25);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	border: 1px solid #134010;
}

.slick-dots .slick-active button {
	background-color: #FFB933;
	border-color: #FFDD9D;
}

.slick-dots li button:before {
	display: none;
}

.slick-dots li {
	width: 12px;
	height: 12px;
}

.custom-slick-nav .slick-arrow:after {
	content: '';
	display: block;
	position: absolute;
	left: 2px;
	right: 2px;
	top: 2px;
	bottom: 2px;
	background: #092a07;
	border-radius: inherit;
}

.custom-slick-nav .slick-arrow::before {
	position: relative;
	z-index: 1;
	content: '';
	background: url('../Images/solitair/arrow-right.svg') no-repeat center;
	width: 13px;
	opacity: 1;
	display: block;
	height: 17px;
	margin: auto;
	background-size: contain;
}

.custom-slick-nav .slick-prev.slick-arrow::before {
	transform: rotate(180deg);
}

#leavegamebutton {
	width: 100%;
	max-width: 250px;
}

#copyjoinbutton {
	width: 100%;
	max-width: 250px;
}

.namecontainer.player-name span {
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.player-name span.active:after {
	animation: backgroundChange 1.5s infinite 4s;
	content: '';
	display: block;
	position: absolute;
	left: 3px;
	right: 3px;
	top: 3px;
	bottom: 3px;
	background: #ffde32;
	z-index: -1;
	border-radius: inherit;
}

@keyframes backgroundChange {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	50% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}

	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

.player-name span.active {
	text-shadow: none !important;
}

/* Ends Css for selection */
::-webkit-scrollbar {
	width: 8px;
	height: 10px;
	border-radius: 5px;
}

::-webkit-scrollbar-track {
	background: #5f5e5e;
	border-radius: 5px;
}

::-webkit-scrollbar-thumb {
	background: #202020;
	border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
	background: #202020;
	border-radius: 5px;
}

.games-wrapper {
	margin-bottom: var(--gameSpacing) !important;
}

#bid-info:not(:empty()) {
	top: 90px;
	width: 245px;
	position: absolute;
	left: 70px;
	background: #009fff14;
	border: 1px solid #ffffff12;
	border-radius: 15px;
	padding: 15px;
	box-shadow: 0 0 30px -10px #0808082e;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 16px;
	text-shadow: 1px 2px 4px BLACK;
	color: #efefef;
	font-family: "Averia Serif Libre", serif;
	z-index: 2;
}

#bid-info p {
	display: flex;
	justify-content: space-between;
}

div#bid-info {
	min-width: 335px;
	position: absolute;
	left: 30px;
	top: 90px;
	z-index: 2;
}

.value-box {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 120px;
	display: inline-block;
}

#randomJoinGameDialog {
	min-height: 170px !important;
}

#deletegameconfirmationdialog {
	min-height: auto !important;
}

@media screen and (min-width: 320px) and (max-height: 800px) {
	.gameopen-container {
		zoom: 0.8;
	}
}

@media screen and (min-width: 320px) and (max-height: 500px) {
	.gameopen-container {
		zoom: 0.6;
	}

	.games-titlebox {
		margin-bottom: 20px;
	}
}

@media screen and (max-height: 500px) {
	#cardscontainer.cards-boxwrapper {
		max-width: 60%;
	}
	.cardSelectionPopup {
		height: calc(100dvh - 200px) !important;
	}
}

@media screen and (min-width: 992px) and (max-height: 980px) {

	.custom-slick-nav .slick-arrow,
	.slick-dotswrapper {
		margin-bottom: 30px;
	}
}

@media screen and (min-width: 992px) and (max-height: 940px) {
	.games-titlebox {
		margin-bottom: 30px;
	}
}

@media screen and (min-width: 992px) and (max-height: 920px) {

	#newsfeed,
	#currentbidcontainer {
		font-size: 18px !important;
	}

	.games-wrapper {
		margin-bottom: 20px !important;
	}
}

@media screen and (min-width: 992px) and (max-height: 870px) {
	.target-area {
		max-width: 600px;
		max-height: 350px;
		width: 100%;
	}

	.boxcard {
		width: 120px;
		height: 167px;
	}

	.played-card {
		max-width: 120px;
	}

	.gametitle_wrap {
		margin-bottom: 30px;
	}

	.games-wrapper {
		margin-bottom: 15px !important;
	}

	.custom-slick-nav .slick-arrow,
	.slick-dotswrapper {
		margin-bottom: 15px;
	}
}

@media screen and (min-width: 992px) and (max-height: 820px) {
	.target-area {
		max-width: 600px;
		max-height: 350px;
		width: 100%;
	}

	.boxcard {
		width: 100px;
		height: 139px;
	}

	.played-card {
		max-width: 100px;
	}

	#startpage {
		padding: 50px;
	}

	.entergame-form {
		margin-top: 50px;
	}

	.gamein-container {
		/* max-height: 80%; */
	}

	#gameaccordiancontainer:not(.gameopen-container) {
		display: flex;
		flex-direction: column;
	}

	#gameaccordiancontainer:not(.gameopen-container) #gamedescription {
		flex-grow: 1;
		height: 50px;
	}

	.games-titlebox {
		margin-bottom: 30px;
	}

	.player-name-title,
	.player-name:not(:last-child),
	.gametitle_wrap {
		margin-bottom: 15px;
	}

	.text-subheading {
		margin-bottom: 15px;
	}
}

@media screen and (min-width: 992px) and (max-height: 800px) {
	/* #rightnamecontainer {
		right: 177px;
	}
 */


	#startpage {
		zoom: 0.94;
	}

	.gametitle_wrap {
		margin-bottom: 20px;
	}

	#lobby {
		padding-top: 30px;
		padding-bottom: 30px;
		position: absolute;
	}

	.gametitle-text,
	.ui-button.ui-widget {
		font-size: 24px;
	}

	.ui-button.ui-widget .ui-button-text {
		padding: 6px 15px;
		font-size: 18px;
	}

	.text-subheading {
		font-size: 20px;
	}

	.player-name span {
		font-size: 16px;
	}

	#newsfeed,
	#currentbidcontainer,
	.player-name-title {
		font-size: 20px;
	}
}

@media screen and (min-width: 992px) and (max-height: 730px) {
	#startpage {
		zoom: 0.89;
	}

	.lobbychat {
		font-size: 20px;
	}
}

@media screen and (min-width: 992px) and (max-height: 700px) {
	.trumpoption {
		height: 70px;
		width: 70px;
	}

	.trumpoption span {
		background-size: 38px !important;
	}

	.games-titlebox {
		max-width: 230px;
		margin-bottom: 20px;
	}

	.chat-inputwrap input {
		height: 70px;
	}

	#lobbychatarea {
		max-height: calc(100vh - 252px);
	}

	.gametitle-text {
		font-size: 26px;
	}

	.gamestatuscontainer {
		font-size: 20px;
	}

	.text-subheading {
		font-size: 22px;
	}

	.ui-button.ui-widget {
		font-size: 24px;
	}

	#gameaccordiancontainer:not(.gameopen-container) .gamein-container {
		max-height: 100%;
	}

	.modal-header img {
		margin-bottom: 10px;
	}

	.modal-header {
		padding-bottom: 50px;
	}

	.creategame-form {
		margin-top: 20px;
	}

	.form-label {
		font-size: 18px;
		margin-bottom: 8px;
	}

	.modal-wrapper.ui-widget-content {
		padding: 30px;
	}

	.ui-button.btn.btn-cancel {
		z-index: 9999;
	}

	.form-control {
		height: 55px;
	}

	.modal-heading {
		font-size: 32px;
	}

	.modal-headingcontent {
		font-size: 22px;
	}

	/* .player-name:not(:last-child) {
		margin-bottom: 15px;
	} */

	.custom-slick-nav .slick-arrow {
		width: 40px;
		height: 40px;
	}
}

@media screen and (max-height: 675px) and (min-height: 400px) {

	.cardtype-box,
	.applogo-image {
		max-width: 330px;
		margin-left: auto;
		margin-right: auto;
	}

	.text-whitegradient {
		font-size: 24px;
	}
}

@media screen and (max-width: 1500px) {
	#cardscontainer {
		margin: 0 10px;
	}

	#cardscontainer img {
		margin-left: -35px;
		margin-right: -35px;
	}
}

@media screen and (max-width: 1320px) {
	.cards-boxwrapper img {
		max-width: 108px;
	}

	/* 
	#leftcardscontainer {
		left: -95px;
	}

	#rightcardscontainer {
		right: -95px;
	} */

	.team-numberpoints .ui-button-text {
		min-width: 120px;
	}

	.team-pointstext,
	.points-count {
		font-size: 20px;
	}

	.team-numberpoints.ui-button.ui-widget {
		border-radius: 14px;
	}

	#newsfeed,
	#currentbidcontainer,
	.player-name-title {
		font-size: 22px;
	}
}

@media screen and (max-width: 1200px) {
	.team-pointswrapper {
		gap: 10px;
	}
}

@media screen and (max-width: 991.98px) {

	/* #lobby {
		padding: 20px;
		position: absolute;
	} */
	#chatcontainer .form-box {
		padding: 10px 10px 15px;
	}

	.chat-inputwrap .form-control {
		border-radius: 7px;
		height: 28px;
		font-size: 12px !important;
	}

	.chat-inputwrap .btn {
		font-size: 10px;
	}

	.chat-inputwrap .btn .ui-button-text {
		padding: 4px 10px;
		font-size: 12px;
	}

	.chat-inputwrap .ui-button.ui-widget:before {
		bottom: -1px;
	}

	.form-box {
		border-radius: 14px;
		border-width: 1px;
	}

	#lobbychatarea {
		max-height: calc(100vh - 124px);
		width: calc(100% + 20px);
		margin: 0 -10px;
		padding: 0 10px;
	}

	.chat-text {
		font-size: 12px;
		margin-bottom: 7px;
	}

	.chat-inputwrap {
		gap: 8px;
	}

	.ui-button.ui-widget {
		border-radius: 11px;
	}

	.form-control {
		/* font-size: 12px !important; */
	}

	.chat-inputwrap .btn {
		border-radius: 7px;
	}

	.chatsend-box {
		padding-top: 8px;
	}

	.formblock-wrap::before {
		bottom: -4px;
		border-width: 1px;
		filter: drop-shadow(0px 4px 0px rgba(0, 0, 0, 0.5));
		border-radius: 14px;
	}

	.lobbychat {
		font-size: 12px;
		margin-bottom: 8px;
	}

	/* .modal-header img {
		max-width: 254px;
	}
	.modal-header {
		font-size: 14px;
	}
	.form-label {
		font-size: 12px;
		margin-bottom: 6px;
	}
	.modal-wrapper.ui-dialog .ui-dialog-buttonpane {
		margin-top: 10px;
	}
	.modal-header img {
		margin-bottom: 8px;
	}
	.modal-wrapper.ui-widget-content {
		max-width: 250px;
	} */
	.copy_link_wrap {
		font-size: 20px;
	}

	.copy_link_wrap button {
		font-size: 14px;
	}

	#confirmbegingamedialog p {
		max-width: 100%;
	}

	#creategamedialog .form-control {
		zoom: 1.6;
	}

}

.round_table thead tr th {
	background: linear-gradient(180deg, #FED825 18.94%, #FDB512 87.69%);
	color: #0C1018;
	padding: 13px 18px;
	font-size: 18px;
	line-height: 21px;
	/* border-right: 1px solid #1E273F; */
}

.round_table thead tr th {
	background: linear-gradient(180deg, #FED825 18.94%, #FDB512 87.69%);
	color: #0C1018;
	padding: 13px 18px;
	font-size: 18px;
	line-height: 21px;
	border-right: 1px solid #111725;
}

.round_table .player_row th {
	background: #111625;
	padding: 13px 18px;
	font-size: 18px;
	line-height: 21px;
	color: #ffffff;

	border-bottom: 1px solid #111625;
	border-spacing: 12px;
}

.border-right_box {
	border-right: 1px solid #0b0f17 !important;
}

.round_table .player_row th:last-child {
	border-right: 0;
}

.round_table thead tr th:first-child {
	border-top-left-radius: 20px;
}

.round_table thead tr th:last-child {
	border-top-right-radius: 20px;
}

.round_table tbody th {
	padding: 10px 13px;
	font-size: 18px;
	line-height: 21px;
	position: relative;
}

.round_table tbody tr th {
	border-right: 1px solid #0f1521;
	border-bottom: 1px solid #1E273F;
}

.round_table tbody tr:last-child th {
	border-bottom: 0;
}

.round_table tbody tr:last-child th {
	border-bottom: 0;
}

.round_table tfoot tr th:first-child {
	border-bottom-left-radius: 20px;
}

.round_table tfoot tr th:last-child {
	border-bottom-right-radius: 20px;
}

.round_table tbody tr .round_border_bottom {
	position: relative;
	border-bottom: 0 !important;
}

.round_table tbody tr:last-child .round_border_bottom:after {
	display: none;
}

.round_table tbody tr .round_border_bottom:after {
	width: 95%;
	background-color: #1E273F;
	content: '';
	bottom: 0;
	position: absolute;
	height: 1px;
	left: 0;
	right: 0;
}

.round_table tbody tr .round_border_bottom.w-100:after {
	width: 100%;
}

.round_table tbody tr .round_border_bottom.w-100:after {
	width: 100%;
}

.round_table th {
	text-align: left;
}

#endrounddialog .modal-header {
	padding-bottom: 0;
}

#endrounddialog .modal-header:not(.no-pattern)::after {
	background: none;
	height: 0;
}

#endrounddialog .modal-header img {
	margin-bottom: 0;
}

/*------- Start (Two Player) -------*/
.two_player #target.boxcard-wrapper {
	width: 130px;
}

.two_player #target.boxcard-wrapper .played-card.player1.test1 {
	align-items: flex-start !important;
}

.two_player .cards-boxwrapper img {
	margin-left: 0;
	margin-right: -43px;
}

.two_player .team-pointswrapper {
	justify-content: center;
}

/******** Start (Bottom Card) ********/
.two_player #cardscontainer.cards-boxwrapper {
	position: relative;
	left: 0px;
	bottom: -15px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(8) {
	margin-top: var(--card8space);
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(9) {
	margin-top: var(--card9space);
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(10) {
	/* transform: rotate(4deg) var(--animateCards); */
	margin-top: var(--card10space);
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(11) {
	/* transform: rotate(5deg) var(--animateCards); */
	margin-top: var(--card11space);
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(12) {
	/* transform: rotate(8deg) var(--animateCards); */
	margin-top: var(--card12space);
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(13) {
	/* transform: rotate(12deg) var(--animateCards); */
	margin-top: var(--card13space);
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(14) {
	/* transform: rotate(13deg) var(--animateCards); */
	margin-top: var(--card14space);
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(15) {
	/* transform: rotate(15deg) var(--animateCards); */
	margin-top: -8px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(16) {
	/* transform: rotate(18deg) var(--animateCards); */
	margin-top: 0px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(17) {
	/* transform: rotate(22deg) var(--animateCards); */
	margin-top: 10px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(18) {
	/* transform: rotate(26deg) var(--animateCards); */
	margin-top: 20px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(19) {
	/* transform: rotate(28deg) var(--animateCards); */
	margin-top: 30px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(20) {
	/* transform: rotate(30deg) var(--animateCards); */
	margin-top: 42px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(21) {
	/* transform: rotate(34deg) var(--animateCards); */
	margin-top: 56px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(22) {
	/* transform: rotate(37deg) var(--animateCards); */
	margin-top: 72px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(23) {
	/* transform: rotate(40deg) var(--animateCards); */
	margin-top: 90px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(24) {
	/* transform: rotate(43deg) var(--animateCards); */
	margin-top: 109px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(25) {
	/* transform: rotate(46deg) var(--animateCards); */
	margin-top: 126px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(26) {
	/* transform: rotate(48deg) var(--animateCards); */
	margin-top: 145px;
	/* -webkit-transform: rotate(48deg) var(--animateCards); */
	/* -moz-transform: rotate(48deg) var(--animateCards); */
	/* -ms-transform: rotate(48deg) var(--animateCards); */
	/* -o-transform: rotate(48deg) var(--animateCards); */
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(27) {
	/* transform: rotate(50deg) var(--animateCards); */
	margin-top: 164px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(28) {
	/* transform: rotate(52deg) var(--animateCards); */
	margin-top: 184px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(29) {
	/* transform: rotate(54deg) var(--animateCards); */
	margin-top: 204px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(30) {
	/* transform: rotate(56deg) var(--animateCards); */
	margin-top: 224px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(31) {
	/* transform: rotate(58deg) var(--animateCards); */
	margin-top: 244px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(32) {
	/* transform: rotate(60deg) var(--animateCards); */
	margin-top: 264px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(33) {
	/* transform: rotate(62deg) var(--animateCards); */
	margin-top: 284px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(34) {
	/* transform: rotate(64deg) var(--animateCards); */
	margin-top: 304px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(35) {
	/* transform: rotate(66deg) var(--animateCards); */
	margin-top: 324px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(36) {
	/* transform: rotate(68deg) var(--animateCards); */
	margin-top: 344px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(37) {
	/* transform: rotate(70deg) var(--animateCards); */
	margin-top: 364px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(38) {
	/* transform: rotate(72deg) var(--animateCards); */
	margin-top: 384px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(39) {
	/* transform: rotate(74deg) var(--animateCards); */
	margin-top: 404px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(40) {
	/* transform: rotate(76deg) var(--animateCards); */
	margin-top: 424px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(41) {
	/* transform: rotate(78deg) var(--animateCards); */
	margin-top: 444px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(42) {
	/* transform: rotate(80deg) var(--animateCards); */
	margin-top: 464px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(43) {
	/* transform: rotate(82deg) var(--animateCards); */
	margin-top: 484px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(27) .two_player #cardscontainer.cards-boxwrapper img:nth-child(44) {
	/* transform: rotate(84deg) var(--animateCards); */
	margin-top: 504px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(45) {
	/* transform: rotate(86deg) var(--animateCards); */
	margin-top: 524px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(46) {
	/* transform: rotate(88deg) var(--animateCards); */
	margin-top: 544px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(47) {
	/* transform: rotate(90deg) var(--animateCards); */
	margin-top: 564px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(48) {
	/* transform: rotate(92deg) var(--animateCards); */
	margin-top: 584px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(49) {
	/* transform: rotate(94deg) var(--animateCards); */
	margin-top: 604px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(50) {
	/* transform: rotate(96deg) var(--animateCards); */
	margin-top: 624px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(51) {
	/* transform: rotate(98deg) var(--animateCards); */
	margin-top: 644px;
}

.two_player #cardscontainer.cards-boxwrapper img:nth-child(52) {
	/* transform: rotate(100deg) var(--animateCards); */
	margin-top: 664px;
}


/******** End (Bottom Card) ********/

/******** Start (Top Card) ********/
.two_player #topcardscontainer.cards-boxwrapper {
	margin-top: -60px;
	transform: rotate(10deg);
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(1) {
	transform: rotate(-12deg) var(--animateCards);
	margin-top: -16px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(2) {
	transform: rotate(-12deg) var(--animateCards);
	margin-top: -10px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(3) {
	transform: rotate(-12deg) var(--animateCards);
	margin-top: -5px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(4) {
	transform: rotate(-12deg) var(--animateCards);
	margin-top: 0px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(5) {
	transform: rotate(-12deg) var(--animateCards);
	margin-top: 4px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(6) {
	transform: rotate(-12deg) var(--animateCards);
	margin-top: 10px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(7) {
	transform: rotate(-12deg) var(--animateCards);
	margin-top: 14px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(8) {
	transform: rotate(-12deg) var(--animateCards);
	margin-top: 20px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(9) {
	transform: rotate(-12deg) var(--animateCards);
	margin-top: 24px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(10) {
	transform: rotate(-8deg) var(--animateCards);
	margin-top: 28px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(11) {
	transform: rotate(-3deg) var(--animateCards);
	margin-top: 28px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(12) {
	transform: rotate(-1deg) var(--animateCards);
	margin-top: 28px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(13) {
	transform: rotate(0deg) var(--animateCards);
	margin-top: 28px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(14) {
	transform: rotate(2deg) var(--animateCards);
	margin-top: 27px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(15) {
	transform: rotate(4deg) var(--animateCards);
	margin-top: 25px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(16) {
	transform: rotate(4deg) var(--animateCards);
	margin-top: 22px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(17) {
	transform: rotate(6deg) var(--animateCards);
	margin-top: 18px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(18) {
	transform: rotate(6deg) var(--animateCards);
	margin-top: 14px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(19) {
	transform: rotate(6deg) var(--animateCards);
	margin-top: 10px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(20) {
	transform: rotate(6deg) var(--animateCards);
	margin-top: 6px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(21) {
	transform: rotate(6deg) var(--animateCards);
	margin-top: 4px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(22) {
	transform: rotate(6deg) var(--animateCards);
	margin-top: 0px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(23) {
	transform: rotate(8deg) var(--animateCards);
	margin-top: -4px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(24) {
	transform: rotate(8deg) var(--animateCards);
	margin-top: -8px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(25) {
	transform: rotate(8deg) var(--animateCards);
	margin-top: -12px !important;
}

.two_player #topcardscontainer.cards-boxwrapper img:nth-child(26) {
	transform: rotate(10deg) var(--animateCards);
	margin-top: -16px !important;
}

/* Join Link Styles */

h2.text-subheading.text-center.mt_mb_0 {
	margin: 0 0 15px 0;
}

.copy_link_wrap {
	background: #fff;
	padding: 10px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	column-gap: 10px;
}

.copy_link_wrap input {
	width: 100%;
	border: none;
	font-size: 16px;
	color: #000;
	font-weight: 500;
	padding: 0;
}

.copy_link_wrap button {
	border: none;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	background: #FFB933;
	border-radius: 16px;
	padding: 5px 17px;
	color: #000;
}

.text-white {
	color: #fff !important;
}

.join-link-container input[type="text"]:focus {
	outline: none;
	border-color: #007bff;
	box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.copy_link_wrap button:hover {
	box-shadow: 0px 0px 0px 0px #5a906a !important;
}

.copy-link-btn {
	white-space: nowrap;
}

.copy-link-btn.btn-success {
	background-color: #28a745;
	border-color: #28a745;
}

.copy-link-btn.btn-success:hover {
	background-color: #218838;
	border-color: #1e7e34;
}

@media (max-width: 768px) {
	.join-link-container {
		padding: 10px;
		margin: 10px 0;
	}

}

.selected-card {
	border: 3px solid #FFB933 !important;
	box-shadow: 0 0 5px #FFB933, 0 0 10px #FFB933;
	transition: border-color 0.2s, box-shadow 0.2s;
	border-radius: 10px;
}

#page-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background: rgba(255, 255, 255, 0.8); */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.spinner {
	width: 50px;
	height: 50px;
	border: 6px solid #ccc;
	border-top-color: #3498db;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}


#languageDropdownDiv {
	position: absolute;
	right: 92px;
	top: 6px;
	padding: 5px 10px;
	height: 38px;
}

.dropdown-wrapper {
	display: inline-flex;
	align-items: center;
	border-radius: 50px;
	padding: 15px 24px;
	position: relative;
	border: 3px solid transparent;
	background: linear-gradient(#fff, #fff) padding-box,
		linear-gradient(0deg,
			rgba(255, 255, 255, 0.2) 0%,
			rgba(255, 255, 255, 0.8) 50%,
			rgba(255, 255, 255, 0.2) 100%) border-box;
	margin-bottom: 30px;
	margin: auto;
	margin-bottom: 30px;
}

.dropdown-wrapper label {
	font-weight: 700;
	font-size: 20px;
	margin-right: 10px;
	color: #082706;
	white-space: nowrap;
	text-shadow: -1px -1px 0 #fff, 1px 1px 0 #fff;
}

.select-container {
	position: relative;
	display: inline-block;
}

.custom-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	background: transparent;
	font-weight: 700;
	font-size: 18px;
	cursor: pointer;
	color: #082706;
	padding-right: 30px;
	text-shadow: -1px -1px 0 #fff, 1px 1px 0 #fff;
	outline: none;
	line-height: 30px;
}

/* Chevron arrow */
.select-container::after {
	content: "";
	position: absolute;
	right: 5px;
	top: 38%;
	transform: translateY(-50%) rotate(43deg);
	width: 10px;
	height: 10px;
	border-right: 3px solid #082706;
	border-bottom: 3px solid #082706;
	pointer-events: none;
}

/* responsive */

@media only screen and (max-width: 1500px) {
	.two_player #cardscontainer.cards-boxwrapper img {
		margin-left: -43px;
		margin-right: -35px;
	}

	.two_player .points-bottombox {
		padding: 0;
	}

	@keyframes backgroundChange {
		0% {
			-webkit-transform: scale(1);
			transform: scale(1);
		}

		50% {
			-webkit-transform: scale(1.1);
			transform: scale(1.05);
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
		}
	}

	.two_player .namecontainer.player-name span {
		padding: 8px 20px;
		font-size: 18px;
		position: relative;
	}

	.player-name-title {
		font-size: 22px;
	}
}

@media only screen and (max-width: 1400px) {
	.two_player #ace_card {
		left: -50px;
	}

	.two_player #bid-info {
		left: 20px;
	}

}

@media only screen and (min-width : 1300px) and (max-width: 1400px) {
	body:not(.two_player) #bottomnamecontainer {
		bottom: -10px;
	}

	.two_player #cardscontainer {
		max-width: 850px;
	}

	.two_player #cardscontainer.cards-boxwrapper img {
		margin-right: -43px;
	}

	.two_player .namecontainer.player-name span {
		left: -10px;
	}
}

@media only screen and (max-width : 1300px) {

	.two_player #team_1_container,
	.two_player #team_2_container {
		position: relative;
	}

	/* .two_player #team_1_container {
		left: -10px;
		right: auto;
	}

	.two_player #team_2_container {
		right: -10px;
		left: auto;
	} */

	.two_player #cardscontainer.cards-boxwrapper {
		left: 10px;
		/* transform: rotate(-12deg) !important; */
	}
}


@media only screen and (max-width : 1200px) and (min-width: 1100px) {

	.two_player #cardscontainer.cards-boxwrapper img {
		margin-right: -39px;
	}

	.two_player .namecontainer.player-name span {
		left: -20px;
	}
}

@media only screen and (max-width : 1180px) and (orientation: landscape) {
	#cardscontainer {
		top: 0;
	}

	.two_player #cardscontainer {
		top: 15px;
	}

	#bottomnamecontainer {
		bottom: 210px;
	}

	.two_player #bottomnamecontainer {
		/* bottom: 160px !important; */
	}

	/* .two_player .target-area {
		top: -40px;

	} */
	/* .target-area {
		top: -40px !important;
	} */

	/* body:not(.two_player) #leftnamecontainer {
		margin-right: 0 !important;
		top: 0;
		bottom: 0;
		right: auto !important;
		left: 155px;
		margin: auto;
		display: flex;
		margin-left: 0 !important;
		align-items: center;
		justify-content: center;
	} */

	#newsfeed,
	#currentbidcontainer {
		font-size: 18px !important;
		max-width: 550px;
	}

	.outer-border {
		top: -32px !important;
	}

	.boxcard-wrapper.show+.card-solitairtext #cardinfo-wrapper {
		position: unset;
	}

	.newsFeedClass {
		top: 80px !important;
	}

}

@media only screen and (min-width : 800px) and (max-width : 1099px) and (min-height: 700px) {
	body:not(.two_player) #cardscontainer img {
		margin-left: -38px;
		margin-right: -38px;
	}

	body:not(.two_player) .player-name-title {
		font-size: 20px;
	}

	body:not(.two_player) .team-pointswrapper .team-name {
		font-size: 16px;
	}

	body:not(.two_player) .points-bottombox {
		padding: 0 15px;
	}


	body:not(.two_player) #bottomnamecontainer {
		bottom: 230px;
	}

	.two_player .player-name-title {
		font-size: 19px;
		min-width: 200px !important;
		left: 0 !important;

	}

	#bid-info {
		width: 185px;
		left: 20px !important;
	}

	.two_player #cardscontainer.cards-boxwrapper img {
		margin-right: -42px;
	}

	/* .two_player #team_1_container {
		left: -30px;
		right: auto;
	}

	.two_player #team_2_container {
		right: -30px;
		left: auto;
	} */

	.two_player .namecontainer.player-name span {
		padding: 8px 15px;
	}
}

@media only screen and (max-width : 1000px) and (max-height: 600px) {
	.two_player .player-name-title {
		font-size: 32px;
		width: auto;
	}

	.two_player #bid-info {
		top: 100px !important;
	}

	.two_player #ace_card {
		left: 20px;
	}

	.two_player #bid-info {
		left: 10px;
	}

	.two_player #team_1_container {
		left: -70px;
	}

	/* .two_player #team_2_container {
		right: -60px;
	} */

	.two_player #bid-info {
		font-size: 32px;
		width: 370px;
	}
}

@media only screen and (max-width: 999px) {
	.two_player #cardscontainer.cards-boxwrapper img {
		margin-right: -12px;
	}

	.two_player #newsfeed {
		font-size: 34px;
	}

	.two_player #cardscontainer .card:not(.ui-draggable-dragging) {
		left: 45px !important;
	}
}

@media only screen and (max-width: 575.98px) {
	.two_player #cardscontainer.bunch-cards {
		left: 33px !important;
		bottom: 55px !important;
	}

	.two_player #cardscontainer.bunch-cards.cards-boxwrapper img {
		margin-left: -39px !important;
		margin-right: -32px !important;
	}

	.two_player #cardscontainer.cards-boxwrapper.middle-cards {
		left: 8px !important;
		bottom: 75px !important;
	}

	.two_player #cardscontainer.cards-boxwrapper.sm-cards {
		left: -18px;
		bottom: 75px;
	}

	.two_player #cardscontainer.sm-cards img {
		margin-right: -22px;
		margin-left: -31px;
	}

	.two_player #cardscontainer.middle-cards img {
		margin-right: -32px;
		margin-left: -33px;
	}

	.two_player #cardscontainer.cards-10 {
		bottom: 35px;
	}

	.two_player #cardscontainer.cards-10 img {
		margin-right: -30px;
		margin-left: -30px;
	}

	#cardscontainer {
		zoom: 0.80;
	}
}

/******** End (Top Card) ********/
/*------- End (Two Player) -------*/

.inactive-card {
	filter: brightness(0.9) invert(25%) contrast(1);
	cursor: not-allowed;
}


/********* For Chat Validation ********/
.red-border {
	box-shadow: 0 0 20px red !important;
}

.red-border:focus {
	box-shadow: 0 0 20px red !important;
}

/********* End For Chat Validation ********/


#gamedescription:has(.slick-track:nth-of-type(2))+.custom-slick-nav {
	display: block !important;
}

#gamedescription+.custom-slick-nav {
	/* display: none !important; */
	margin-bottom: 20px;
}

#gamedescription .slick-track:has(.slick-slide:only-child) {
	width: inherit !important;
}

#gamedescription .slick-track .slick-slide:only-child {
	width: 100% !important;
}

select.form-control {
	appearance: none;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMzUiIHZpZXdCb3g9IjAgMCAzNCAzNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzLjU2MzkgMTIuNjgzNkwxNy4wOTk3IDE5LjE0NzhMMTAuNjM1NCAxMi42ODM2TDguNjQ5NjkgMTQuNjgzNEwxNy4wOTk3IDIzLjEzMzRMMjUuNTQ5NyAxNC42ODM0TDIzLjU2MzkgMTIuNjgzNloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=) !important;
	background-size: 25px !important;
	background-repeat: no-repeat !important;
	background-position: 98% 50% !important;
	line-height: 30px;
}

.two_player #bottomnamecontainer {
	left: 0;
	right: 0;
	margin: auto !important;
	bottom: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only:hover {
	box-shadow: 0px 3px 12px 0px #2cba54;
}

#deletegamebutton:hover {
	box-shadow: 0px 3px 12px 0px #e43333 !important;
}

div#ace_card:empty {
	padding: 0;
	box-shadow: none;
}

div#ace_card:empty:after {
	display: none;
}

div#ace_card:empty:before {
	display: none;
}

/*---- loader css here---- */
.loader-main-wrap {
	position: fixed;
	width: 100%;
	height: 100dvh;
	background: #0a2c07 url(../Images/solitair/BG.jpg) no-repeat center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 20px
}

.loding-text {
	color: #ffffff;
	font-size: 30px;
	font-family: "Cinzel Decorative", serif;
}

.loader-main-wrap img {
	animation: 2s infinite pulse !important;
}

.timer-circle {
	padding-left: 8px;
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.08);
	}

	100% {
		transform: scale(1);
	}
}

.privacy-wrapper {
	/* font-family: "Cinzel Decorative", serif; */
	padding: 0 30px 30px;
	max-width: 800px;
	margin: auto;
	font-size: 18px;
	line-height: 1.6;
	color: #DAEBF5;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: 12px;
	margin-top: 60px;
}

.privacy-wrapper h1,
h2 {
	color: #FFB933;
	margin-top: 30px;
}

.privacy-wrapper h1 {
	font-size: 36px;
}

.privacy-wrapper h2 {
	font-size: 24px;
}

.privacy-wrapper ul {
	margin: 10px 0 20px 20px;
	list-style: disc;
}

.no-prompt {
	font-family: "Cinzel Decorative", serif;
}

/* horizonal screen  */

/* @media only screen and (orientation: portrait) {
    body {
        transform: rotate(90deg);
    }
    #startpage {
        padding: var(--mainPageSpacing);
        width: 1136px;
        height: 494px;
        left: -240px;
        position: relative;
    }
	#alertbox {
		top: 0px !important;
		right: 46px;
		max-width: 100%;
		width: 340px;
	}
}
@media (max-width: 567px) {
	    #startpage {
        width: 840px !important;
    }
}
@media (max-width: 375px) {
	    #startpage {
			width: 770px !important;
			left: -249px;
    	}
		#alertbox {
        right: -140px;
    }
} */


/* table */

.outer-border {
	width: 910px;
	position: fixed;
	left: 0;
	right: 0;
	height: calc(50dvh - -20px);
	top: -60px !important;
	bottom: 0;
	margin: auto;
	border-radius: 230px;
	/* border: 4px solid rgba(255, 255, 255, 0.1); */
	display: flex;
	background: linear-gradient(180deg, #FFEBA6 0%, #FCE9A3 25%, #C69942 50%, #955F09 75.48%, #895700 100%);
	padding: 20px;
}

.middle-border {
	order: 1px solid #000;
	border-radius: 230px;
	border: 4px solid rgba #ffffff1a (255, 255, 255, 0.1);
	width: 100%;
	height: 100%;
	background: radial-gradient(50% 50% at 50% 50%, #12470F 0%, #072105 100%);
}

.newsFeedClass {
	top: 70px;
	position: relative;
}

.two_player .newsFeedClass {
	top: 80px;
}

@media (min-width: 767px) and (max-width: 1200px) and (orientation: landscape) {
	/* #creategamedialog {
		max-height: calc(100vh - 300px);
	} */


	/* #rightnamecontainer {
		right: 190px;
	} */

	/* #leftcardscontainer {
		top: 33%;
	} */

	.chat-inputwrap input {
		height: 50px;
	}

	#languageDropdownDiv .dropdown-wrapper label {
		font-weight: 700;
		font-size: 14px;
	}

	#languageDropdownDiv .custom-select {
		line-height: inherit;
		font-size: 14px;
	}

	.dropdown-wrapper#languageDropdownDiv label {
		font-size: 14px;
	}

}

@media (min-width: 568px) and (max-width: 1024px) and (orientation: portrait) {
	:root {
		--gameTableZoom: 0.70;
	}

	.jointeam-box {
		max-width: 100%
	}

	#jointeam1button,
	#jointeam2button {
		max-width: 100%
	}

	#leavegamebutton {
		width: 100%;
		max-width: 100%;
	}

	#copyjoinbutton {
		width: 100%;
		max-width: 100%;
	}

	.gamein-container {
		height: 100%;
		max-height: 900px;
		zoom: 1 !important;
	}

	.modal-wrapper.ui-widget-content {
		max-width: 900px !important;
		width: 100% !important;
	}

	.confirm-leavedialogue .ui-dialog-buttonset .btn {
		max-width: 100%;
	}

	.ui-button.ui-widget {
		font-size: 24px !important;
	}

	.bid-boxwrap {
		margin-bottom: 110px;
	}

	.two_player .bid-boxwrap {
		margin-bottom: 200px;
	}

	#cardscontainer {
		bottom: 0px;
	}

	#ace_card {
		top: 113px;
	}

	#bid-info {
		top: 180px;
	}




	body:not(.two_player) #bottomnamecontainer {
		margin-left: -82px;
		bottom: 238px;
	}

	#creategamedialog .modal-header p {
		max-width: 100%
	}

	/* two player */
	/* .two_player .bid-boxwrap {
		margin-bottom: 310px;
	} */

	/* .two_player #cardscontainer {
		bottom: 250px;
		z-index: 9;
	} */

	/* .two_player #bottomnamecontainer {
		bottom: 467px;
	} */

	/* .two_player #team_2_container {
		right: 40px;
	} */

	.two_player #team_1_container {
		left: 40px;
	}

	.two_player #newsfeed {
		font-size: 28px;
	}

	.two_player .player-name-title {
		min-width: 280px !important;
	}

	#bid-info {
		left: 8px !important;
	}

	/* #rightcardscontainer {
		top: 40%;
	} */


	/* .two_player #team_2_container,
	.two_player #team_1_container {
		bottom: 170px !important;
	} */


}

@media (max-width: 991px) and (orientation: portrait) {
	.outer-border {
		width: 830px !important;
		height: calc(50dvh - 100px) !important;
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		margin: auto !important;
		transform: none !important;
	}

	/* #leftcardscontainer {
		left: -180px;
		top: 41%;
	}

	#rightcardscontainer {
		right: -180px;
		top: 44%;
	} */

	.target-area {
		bottom: auto;
		top: 0;
		transform: none;
		bottom: 0;
		margin: auto;
		left: 0;
		right: 0;
	}

	/* body:not(.two_player) #rightnamecontainer {
		margin-right: 0 !important;
		top: 0;
		bottom: 0;
		right: 47px !important;
		left: auto;
		margin: auto;
		display: flex;
		margin-left: 0 !important;
		align-items: center;
		justify-content: center;
		height: fit-content;
	} */
	/* 
	body:not(.two_player) #leftnamecontainer {
		top: 0px !important;
		bottom: 0px;
		margin: auto;
		left: 10px !important;
		height: fit-content;
	} */


	.target-area {
		top: 0px !important;
	}

	.two_player #cardscontainer {
		bottom: 46px;
	}

	.two_player #newsfeed {
		font-size: 20px
	}

	#leftnamecontainer {
		margin-left: 0 !important;
	}
}

@media (min-width: 820px) and (max-width:1200px) and (orientation: landscape) {
	#teammateSelectionContainer {
		max-height: 130px !important;
	}
	.outer-border {
		width: 950px !important;
		height: calc(40dvh - -7px) !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		margin: auto !important;
		transform: none !important;
		min-height: 430px !important;
		top: -62px !important;
	}

	.card-solitairtext {
		bottom: 0
	}

	.target-area {
		bottom: auto;
		top: 0;
		transform: none;
		bottom: 0;
		margin: auto;
		left: 0;
		right: 0;
	}

	/* #rightcardscontainer {
		right: -135px;
	}

	#leftcardscontainer {
		left: -150px;
	} */

	/* body:not(.two_player) #leftnamecontainer {
        margin-left: -50px !important;
    } */
	/* #rightnamecontainer {
		right: 135px;
	} */

	#bottomnamecontainer {
		bottom: 160px !important;
	}

	/* .two_player .target-area {
		top: 0 !important;
	} */
	.newsFeedClass {
		top: 118px;
	}
}

@media (max-height:345px) and (orientation: landscape) {
	#creategamedialog {
		height: 400px !important;
		overflow: auto;
	}
}

@media (max-width: 567px) and (orientation: portrait) {
	:root {
		--gameTableZoom: 0.60;
	}

	/* #rightcardscontainer {
		top: 42%;
	} */

	.cards-boxwrapper img {
		max-width: 100px;
	}

	/* #rightcardscontainer {
		right: -200px;
	} */

	/* #leftcardscontainer {
		left: -200px;
	} */

	.boxcard {
		width: 100px;
		height: 141px;
	}

	.target-area {
		width: 310px;
		height: 310px;
	}

	#cardscontainer {
		/* height: 320px; */
		width: calc(100% - 605px);
	}

	.two_player #cardscontainer {
		/* height: 170px; */
		width: calc(100% - 545px);
	}

	#bid-info {
		width: 277px !important;
		left: 0px !important;
		top: 172px;
	}



	/* #rightnamecontainer {
		top: 48%;
		right: 66px !important;
	} */

	#topnamecontainer {
		top: 130px;
	}

	.played-card {
		width: 100px !important;
		bottom: 0 !important;
	}

	.player-name-title {
		font-size: 18px;
	}

	#ace_card {
		left: 0px;
		top: 128px;
		width: 0 !important;
		min-width: 218px;
	}

	.ui-button.ui-widget {
		font-size: 24px;
	}

	.ui-button.ui-widget .ui-button-text {
		padding: 5px 12px;
	}

	.leave_button {
		right: 0px !important;
		top: 90px !important;
		position: fixed !important;
		z-index: 555 !important;		
	}

	html body {
		overflow: hidden !important;
	}

	/* open game screen  */
	#gamecontainer,
	#chatcontainer {
		width: 100% !important;
		height: auto;
	}

	#lobby {
		row-gap: 30px;
	}

	#chatcontainer .form-box {
		overflow: auto;
	}

	div#chatcontainer {
		max-height: 350px;
		min-height: 350px;
	}

	#newsfeed {
		font-size: 16px;
	}

	#creategamedialog .modal-header p {
		max-width: 100%;
	}

	#newsfeed {
		max-width: 440px;
	}

	#send-chat-btn .ui-button-text {
		padding: 2px 15px !important;
		font-size: 20px;
		font-size: 16px;
	}

	.bid-container {
		gap: 5px
	}

	.ui-button.ui-widget {
		font-size: 22px;
	}

	#newsfeed,
	#currentbidcontainer,
	.player-name-title {
		font-size: 16px;
	}

	.two_player #newsfeed {
		font-size: 22px;
	}

	#topcardscontainer {
		left: 0;
		right: 0;
		width: 100%;
		position: relative;
		height: 173px;
	}

	.outer-border {
		width: 464px !important;
		height: 400px !important;
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		margin: auto !important;
		transform: none !important;

	}

	/* .android .outer-border {
		transform: rotate(269deg) !important;
	} */

	/* two player */
	.two_player .cards-boxwrapper img {
		max-width: 95px;
	}

	/* .two_player #cardscontainer.cards-boxwrapper img { padding: 0 14px;} */
	.two_player #cardscontainer.cards-boxwrapper {
		/* left: 20px;
		bottom: 32px; */
	}

	.two_player .cards-boxwrapper img {
		margin-left: -38px;
		margin-right: -43px;
	}



	#newsfeed {
		max-width: 480px;
		width: 100%;
	}

	.two_player #currentbidcontainer {
		margin-bottom: 60px;
		position: relative;
		top: 5px;
	}

	.two_player .bid-boxwrap {
		padding-bottom: 200px;
	}

	.two_player #bottomnamecontainer {
		/* bottom: 270px; */
	}

	.two_player #ace_card {
		left: -14px;
	}

	.two_player .trump-selectwrapper {
		top: 40%;
	}

	.two_player .leave_button {
		top: 60px;
	}

	/* .two_player #team_1_container {
		top: -8px;
	} */
	/* .two_player #team_1_container {
		top: -150px;
	}

	.two_player #team_2_container {
		top: -150px;
	} */

	.modal-wrapper.ui-widget-content {
		width: 100% !important;
		max-width: 95% !important;
	}

	.cards-boxwrapper img.show {
		/* zoom: 1.1; */
	}

	.bid-container {
		margin-top: 20px;
	}

	.game-rules.modal-wrapper.ui-widget-content {
		top: 50% !important;
	}

	.how-to-play.modal-wrapper.ui-widget-content {
		top: 50% !important;
	}

	/* body:not(.two_player) #leftnamecontainer {
		margin-left: 0 !important;
		left: 16px !important;
	} */

	body:not(.two_player) #bottomnamecontainer {
		bottom: 160px !important;
	}

	/* 
	body:not(.two_player) #rightnamecontainer {
		right: 30px !important;
	} */

	body:not(.two_player) .newsFeedClass {
		top: 50px;
	}

	.two_player #cardscontainer {
		zoom: 0.88 !important;
	}

	.two_player #bottomnamecontainer {
		/* bottom: 160px !important; */
	}

}

@media (min-width:567px) and (max-width:900px) and (orientation: landscape) {

	/* .android .target-area {
		top: 0% !important;
	}
	 .target-area {
		top: 47% !important;
	} */
	.outer-border {
		top: -75px !important;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		transform: none;
	}

	.android .outer-border {
		height: 490px !important;
	}

	#currentbidcontainer {
		margin-bottom: 34px !important;
		flex-wrap: wrap;
	}
}

@media screen and (max-width:567px) {
	.dropdown-wrapper {
		padding: 8px 26px;
		position: relative;
		max-width: 318px;
	}

	.select-container::after {
		top: 40%;
	}

	.custom-select,
	.dropdown-wrapper label {
		font-size: 14px;
		font-weight: 600;
	}

}

/* Rules Dialog Styles */
.rules-dialog-header {
	padding: 20px;
	text-align: center;
}

.rules-dialog-header img {
	max-width: 50px;
	margin-bottom: 15px;
}

.rules-content {
	padding: 20px 30px;
}

.rules-label {
	color: #C4CDEB;
	font-size: 20px;
	/* display: block; */
	margin-bottom: 12px;
	/* text-transform: capitalize; */
}

.rules-heading {
	color: #C4CDEB;
	font-size: 28px;
	display: block;
	margin-bottom: 15px;
	/* text-transform: capitalize; */
}

.rules-content ul {
	margin: 0 0 20px 25px;
	list-style-type: disc;
}

.rules-content ul li {
	margin-bottom: 12px;
	line-height: 30px;
}

.rules-content p {
	margin-bottom: 15px;
}

/* Shared Dialog Button Styles */
.rules-icon-btn {
	position: fixed;
	bottom: 20px;
	left: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: linear-gradient(180deg, #39D361 0%, #0C7D35 100%);
	/* border: 2px solid #6c757d; */
	border-radius: 50%;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	transition: all 0.3s ease;
	z-index: 10;
}

.rules-icon-btn:hover {
	background: linear-gradient(180deg, #39D361 0%, #0C7D35 100%);
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.rules-icon-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.rules-icon-btn svg {
	width: 24px;
	height: 24px;
	stroke: #fff;
}

/* How-to-play (play) icon button */
.how-to-play-icon-btn {
	position: fixed;
	bottom: 50px;
	/* stack slightly above the info button */
	left: 20px;
	/* same left as info button */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: linear-gradient(180deg, #39D361 0%, #0C7D35 100%);
	border-radius: 50%;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	z-index: 10;
}

.how-to-play-icon-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.how-to-play-icon-btn svg {
	width: 26px;
	height: 26px;
	stroke: #fff;
	/* ensure white outline */
}

@media (max-width: 768px) {
	.rules-icon-btn {
		width: 36px;
		height: 36px;
		bottom: 15px;
		left: 15px;
	}

	.rules-icon-btn svg {
		width: 18px;
		height: 18px;
	}

	.dropdown-wrapper {
		padding: 0px 12px;
		position: relative;
	}

	.custom-select {
		font-size: 14px;
		font-weight: 600;
		padding-right: 20px;
	}

	.dropdown-wrapper label {
		font-size: 14px;
		font-weight: 600;
	}

	.select-container::after {
		top: 41%;
		border-right: 2px solid #082706;
		border-bottom: 2px solid #082706;
	}

	.gameopen-container img {
		margin-bottom: 26px;
	}

}

@media (max-width: 480px) {
	.rules-icon-btn {
		position: fixed;
		bottom: 20px;
		right: 20px;
		width: 50px;
		height: 50px;
	}

	.rules-icon-btn svg {
		width: 24px;
		height: 24px;
	}

	/* Stack above on small screens too */
	.how-to-play-icon-btn {
		position: fixed;
		bottom: 10px;
		width: 50px;
		height: 50px;
		left: 14px;
	}

	.how-to-play-icon-btn svg {
		width: 22px;
		height: 22px;
	}
}

@media only screen and (max-width : 1180px) and (orientation: landscape) {
	#gameChatPopup {
		zoom: 0.48 !important;
	}
	.outer-border {
		top: -32px !important;
	}

	.languageDropdownDiv {
		display: none;
	}
}

@media (max-width: 760px) and (orientation: portrait) {
	.two_player #bottomnamecontainer {
		/* bottom: 190px !important; */
	}

	.two_player #cardscontainer {
		top: -48px;
	}
}

@media (max-width: 567px) and (orientation: portrait) {
	#bid-info {
		top: 178px;
		width: 0 !important;
		min-width: 218px;
	}

	.two_player #bottomnamecontainer {
		/* bottom: 230px !important; */
	}

	.two_player #cardscontainer {
		top: 0;
	}
}

@media (max-width: 390px) and (orientation: portrait) {
	.two_player #bottomnamecontainer {
		/* bottom: 215px !important; */
	}
}

#howToContentId {
	max-height: 65vh;
	overflow-y: auto;
	padding-right: 8px;
}

/* Jay code */
div#rightcardscontainer2 {
	width: auto;
	transform: rotate(-269deg);
	bottom: 0;
	position: relative;
	right: 90px;
	height: 186px;
	align-items: flex-start;
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	margin-top: 0;
	margin-bottom: -60px;
	/* top: 63%;
    right: -155px; */
}


div#leftcardscontainer2 {
	width: auto;
	transform: rotate(-89deg);
	/* bottom: 0;*/
	position: relative;
	left: 70px;
	height: 186px;
	margin-top: -60px;
	align-items: flex-start;
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	/* top: 63% !important;
    left: -155px; */
}

/* #leftcardscontainer {
	top: 25% !important;
}


#rightcardscontainer {
	top: 25% !important;
}

#rightnamecontainer {
	top: 33% !important;
} */


div#rightnamecontainer2 {
	position: relative;
	text-align: center;
	right: 60px;
	/* top: 72%;
    right: 127px; */
	/* margin-top: -20px; */
	padding-left: 15px;
	padding-right: 15px;
	border-radius: 4px;
	background-color: transparent;
	display: flex;
	column-gap: 10px;
	align-items: center;
}


div#leftnamecontainer2 {
	position: relative;
	left: 60px;
	text-align: center;
	/* top: 75% !important; */
	/* margin-top: -20px; */
	/* left: 127px; */
	padding-left: 15px;
	padding-right: 15px;
	border-radius: 4px;
	background-color: transparent;
	display: flex;
	column-gap: 10px;
	align-items: center;
}

/* 
#leftnamecontainer {
	top: 38% !important;
	left: 127px !important;
}

#rightnamecontainer {
	top: 35% !important;
	right: 127px !important;
} */


/* new fixed css start */
div#leftContainerParentDiv {
	position: fixed;
	width: 280px;
	height: calc(100% - 250px);
	margin: auto;
	top: 0;
	left: -150px;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

div#rightContainerParentDiv {
	position: fixed;
	width: 280px;
	height: calc(100% - 250px);
	margin: auto;
	top: 0;
	right: -150px;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

#leftContainer,
#leftContainer2,
#rightContainer,
#rightContainer2 {
	display: flex;
	height: 310px;
	align-items: center;
}

#topContainer,
#topContainer2 {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
}

#topContainerParentDiv {
	left: 0;
	right: 0;
	width: calc(100% - 250px);
	position: relative;
	margin: -50px auto auto;
	align-items: flex-start;
	display: flex;
	justify-content: space-around;
	flex-direction: row-reverse;
}

.seven_player #shadow-player1 {
	left: -6%;
	top: 50%;
	transform: translateY(-50%);
}

.seven_player #shadow-player2 {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.seven_player #shadow-player3 {
	right: -6%;
	top: 50%;
	transform: translateY(-50%);
}

.seven_player #shadow-player4 {
	top: 0;
	left: 17%;
}

.seven_player #shadow-player5 {
	top: 0;
	right: 17%;
}

.seven_player #shadow-player6 {
	bottom: 0;
	left: 17%;
}

.seven_player #shadow-player7 {
	bottom: 0;
	right: 17%;
}

.seven_player #faketarget {
	top: auto;
	bottom: auto;
}

.six_player #shadow-player4 {
	left: -36%;
	top: 32%;
	right: 35%;
}

.six_player #shadow-player5 {
	top: 32%;
	right: -35%;
}

.six_player .target-area,
.five_player .target-area {
	position: absolute;
	width: 430px;
}

.five_player #faketarget {
	position: absolute;
	top: 20%;
}

.five_player #shadow-player1 {
	left: -40%;
	top: 55%;
}

.five_player #shadow-player4 {
	top: 25%;
	left: -3%;
}

.five_player #shadow-player5 {
	top: 31%;
	right: -40%;
}

.five_player #shadow-player3 {
	right: -3%;
	top: 49%;
}

.four_player #cardscontainer .card:not(.ui-draggable-dragging) {
	left: 0 !important;
}

.three_player #cardscontainer .card:not(.ui-draggable-dragging) {
	left: 31px !important;
}
@media screen and (min-width: 1000px) {
	.two_player #cardscontainer .card:not(.ui-draggable-dragging) {
		left: 0 !important;
	}
}

.five_player #cardscontainer .card:not(.ui-draggable-dragging) {
	left: 0 !important;
}

.six_player #cardscontainer .card:not(.ui-draggable-dragging) {
	left: 0 !important;
}

.seven_player #cardscontainer .card:not(.ui-draggable-dragging) {
	left: 0 !important;
}
.three_player .target-area {
	width: 430px;
    height: 386px;
    top: -150px;
}
.four_player .target-area {
	width: 430px;
    height: 386px;
}

/* new fixed css end */

/* Team Total Points Styles */
.team-total-points-box {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px;
}

.team-total-points-box .team-numberpoints {
	font-size: 24px;
	width: auto;
	min-width: 60px;
}

/* Individual Points Hover Styles */
.individual-points-hover {
	display: none;
	position: absolute;
	bottom: 100%;
	/* Show above the team box */
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.9);
	padding: 10px;
	border-radius: 8px;
	z-index: 1000;
	min-width: 200px;
	flex-direction: column;
	gap: 5px;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.team-points {
	position: relative;
	/* Context for absolute positioning */
	cursor: pointer;
}

/* Hover Effect */
.team-points:hover .individual-points-hover {
	display: flex !important;
}

/* Adjust individual items in hover list */
.individual-points-hover .team-pointsbox {
	display: flex;
	/* Ensure flex layout */
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 2px 0;
}

.individual-points-hover .team-name {
	margin-right: 10px;
	font-size: 16px;
	white-space: nowrap;
	text-align: left;
	flex-grow: 1;
}

.individual-points-hover .team-numberpoints {
	font-size: 16px;
	width: auto;
	min-width: 40px;
	padding: 0;
}

.individual-points-hover .team-numberpoints .ui-button-text {
	padding: 5px 10px;
}

@media screen and (orientation: portrait) {

	
	.four_player #shadow-player1 {
    left: 15%;
	}
	.four_player #shadow-player3 {
    	right: 15%;
	}
	.five_player #shadow-player1 {
		left: -1px;
		top: 54%;
	}
	.five_player #shadow-player3 {
		right: 16%;
		top: -11%;
	}
	.five_player #shadow-player4 {
		top: -35%;
		left: 13%;
	}
	.five_player #shadow-player5 {
		top: 31%;
		right: 0%;
	}

	.six_player #shadow-player1 {
    	left: 15%;
    	top: 3%;
    	transform: translateY(-50%);
	}
	.six_player #shadow-player2 {
    	top: 34%;
    	left: 30%;
    	transform: translateX(-50%);
	}
	.six_player #shadow-player3 {
    	right: 15%;
    	top: 3%;
    	transform: translateY(-50%);
	}
	.six_player #shadow-player4 {
    	left: 14%;
    	top: 88%;
    	right: 35%;
	}
	.six_player #shadow-player5 {
    	top: 88%;
    	right: 15%;
	}
	.six_player div#faketarget {
    	top: 34%;
    	left: 69%;
	}

	.seven_player #shadow-player1 {
		left: -1%;
		top: 50%;
	}
	.seven_player #shadow-player3 {
    	right: -1%;
    	top: 50%;
	}
	.seven_player #shadow-player4 {
    	top: -28%;
    	left: 16%;
	}
	.seven_player #shadow-player5 {
    	top: -28%;
    	right: 16%;
	}
	.seven_player #shadow-player6 {
    	bottom: -28%;
    	left: 16%;
	}
	.seven_player #shadow-player7 {
		bottom: -28%;
		right: 16%;
	}
	div#bid-info {
		min-width: 185px;
		left: 30px;
		top: 180px;
	}
	.two_player #bottomnamecontainer {
		bottom: 150px !important;
	}
	.team-points {
		zoom: 0.6;
	}
	/* #cardscontainer {
		overflow: visible !important;
	} */
	#lobby, .modal-wrapper.ui-widget-content {
		zoom: 0.65;
	}
	.bid-boxwrap {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bid-container {
        margin-top: 20px;
        max-width: 350px;
        flex-wrap: wrap;
		gap: 15px 5px;
    }
	div#cardSelectionContainer {
		height: 240px;
	}
	#cardscontainer.cards-boxwrapper {
		height: 200px;
		top: 40px;
	}
	.points-bottombox {
		padding: 0 !important;
	}

	.middle-border {
		border-radius: 90px !important;
	}
	.points-bottombox .cards-boxwrapper img {
		margin-top: 0 !important;
	}
	.five_player .target-area {
		top: 170px !important
	}
	.outer-border {
		width: 360px !important;
		height: 600px !important;
		max-height: 600px;
		padding: 15px;
		border-radius: 100px !important;
	}
	.target-area {
		width: 320px !important;
		top: -50px !important;
	}
	.four_player .target-area {
		height: 476px !important;
	}
	.two_player #topcardscontainer.cards-boxwrapper {
		margin-top: 0 !important;
	}

}
button#hideShowCardsBtn {
	width: 42px;
    height: 42px;
    min-height: 20px;
    display: flex;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    border-radius: 30px !important;
    order: -1;
    margin-right: 10px;
    background: linear-gradient(180deg, #39D361 0%, #0C7D35 100%);
    box-shadow: none;
    border: 0;
}

#cardscontainer.cards-boxwrapper {
	display: inline !important;
	margin: 0 !important;
	overflow-y: hidden !important;
}
@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {
	.outer-border {
		width: 530px !important;
		height: 700px !important;
		max-height: 700px;
	}
	div#cardinfo-wrapper {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		letter-spacing: 0;
		margin: auto;
		width: 100%;
		justify-content: center;
	}
		.three_player .target-area {
        width: 420px !important;
	}
	.four_player .target-area {
        width: 620px !important;
	}
	.five_player .target-area {
        width: 450px !important;	
	}
    .six_player .target-area {
        width: 450px !important;
	}
    .seven_player .target-area {
        width: 450px !important;
        top: 0px !important;
	}
	#ace_card {
		top: 153px;
	}
	#bid-info {
		left: 40px !important;
		top: 210px;
	}
	.bid-container {
		margin-top: -140px;
		flex-wrap: wrap;
		gap: 15px 5px;
		width: 100%;
		max-width: 780px;
	}
	}
	
/* Game Chat UI */
#gameChatPopup {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 300px;
    height: 400px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #444;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    z-index: 10000;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.chat-header {
    background: #242833;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #444;
    color: #fff;
    font-weight: bold;
}

#gameChatName {
    display: inline-block;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    margin-left: 2px;
}

.chat-header .close-btn {
    border: none;
	color: #ffffff;
	font-size: 20px;
	cursor: pointer;
	background-color: #ff4d4d;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 6px;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	min-height: 25px;
	padding: 0 !important;
}

#gameChatHistory {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    color: #fff;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
	background-color: #000000 !important;
}

.game-chat-message {
    word-wrap: break-word;
}

.game-chat-sender {
    font-weight: bold;
    color: #39D361;
    margin-right: 5px;
}
.chat-input-area {
    padding: 10px;
    background: #2c313c;
    border-top: 1px solid #444;
    display: flex;
    gap: 10px;
}

#gameChatInput {
    flex: 1;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid #555;
    background: #1e222b;
    color: #fff;
    outline: none;
    transition: border-color 0.3s;
}

#gameChatInput:focus {
    border-color: #007bff;
}

#sendGameChatBtn {
    padding: 8px 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    border: none;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

#sendGameChatBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4);
}

#sendGameChatBtn:active {
    transform: translateY(0);
}

/* Chat Button Style (similar to hideShowCardsBtn) */
button#gameChatBtn {
    width: 42px;
    height: 42px;
    min-height: 20px;
    display: flex;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    border-radius: 30px !important;
    order: -1;
    margin-right: 10px;
    background: linear-gradient(180deg, #038FF9 0%, #0F55B7 100%); /* Blue to distinguish from Green Hide Button */
    box-shadow: none;
    border: 0;
}

@media screen and (max-width:767px) and (orientation: portrait) {
	#creategamedialog {
		height: calc(100dvh - 440px) !important;
	}
	#lobby {
		padding-top: 90px;
	}
	.cardgame-mainpage {
		padding-top: 70px !important;
	}
	#gameChatPopup {
        left: 0;
		right: 0;
		top: 5% !important;
		width: 100% !important;
		height: 95% !important;
		margin: auto;
		bottom: 0;
    }
}

/* Hide outer-border by default */
.outer-border {
	display: none;
}

/* Show outer-border during play phase */
.play-phase .outer-border {
	display: block;
}

/* Hide outer-border when popup is active */
body.popup-active .outer-border {
    display: none !important;
}