/*switcher css start*/
/*.desktop-view{display: none;}
.mobile-view{display: block;}*/
.guest_show{
	display: none;
}
#footer .copyright p{color:black;padding: 10px 0; margin-bottom: 0; font-size: 14px; font-family: Gotham Pro; font-weight: 400;}
#footer .footer_bg{background-color: #FFFFFF;}
.icon .fas{font-size: 30px; color: #000;}
.icon{padding: 0 !important;}
.header_logo img{
	width:300px!important;
}
.main-menu{display: flex; align-items: center; justify-content: space-between; padding: 3px 0;}
.theme-switch-wrapper {display: flex;align-items: center;}
.theme-switch { display: inline-block; height: 45px; position: relative; width: 90px; margin-bottom: 0;}
.theme-switch input { display: none;}
.slider {
	background-image: linear-gradient(#646aa0, #b9bfeb);
	bottom: 0;
	cursor: pointer;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: .4s;
	border: 4px solid var(--bg-color-main-body-c1) !important;
}
.slider:before {
	bottom: 3px !important;
	content: "";
	height: 32px;
	width: 32px;
	background-image: url(../img/sun-btn.png);
	background-position: center;
	background-size: contain;
	left: 4px;
	position: absolute;
	transition: .4s;
}
.giftclose{
	color:#fff;
	position: absolute;
    left: 91%;
    top: 3%;
    font-size: 19px;
}
.theme-switch input:checked + .slider { background-image: linear-gradient(#0c924d, #007b3c);}
.theme-switch input:checked + .slider:before {transform: translateX(40px);background-image: url(../img/moon-btn.png);}
.slider.round {border-radius: 34px;}
.slider.round:before {border-radius: 50%;}

.theme-switch-wrapper-1 {display: flex;align-items: center;}
.theme-switch-1 { display: inline-block; height: 45px; position: relative; width: 90px; }
.theme-switch-1 input { display: none;}
.slider-1 {
	background-image: linear-gradient(#646aa0, #b9bfeb);
	bottom: 0;
	cursor: pointer;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: .4s;
	border: 2px solid #fff;
}
.slider-1:before {
	bottom: 1px;
	content: "";
	height: 38px;
	width: 38px;
	background-image: url(../img/sun-btn.png);
	background-position: center;
	background-size: contain;
	left: 4px;
	position: absolute;
	transition: .4s;
}
.theme-switch input:checked + .slider { background-image: linear-gradient(#0c924d, #007b3c);}
.theme-switch-1 input:checked + .slider-1:before {transform: translateX(40px);background-image: url(../img/moon-btn.png);}
.slider-1.round-1 {border-radius: 34px;}
.slider-1.round-1:before {border-radius: 50%;}
@media (min-width: 1024px){
	/*.desktop-view{display: block;}
	.mobile-view{display: none;}*/
}
/*swichaer css end*/

/*game layout css start*/

:root {
	--font-color: #7d787e;
	--bg-color-main-header-c1: #343965;
	--bg-color-main-header-c2: #676da2;
	--bg-color-main-body-c1: #63699f;
	--bg-color-main-body-c2: #bfc5f0;
	--bg-game-board:#343965;
	--bg-game-menu:#6089ff;
	--font-game-menu:#383f6d;
	--font-color:#383f6d;
	
}
[data-theme="dark"] {
	--font-color: #fff;
	--bg-color-main-header-c1: #017b3d;
	--bg-color-main-header-c2: #0c924d;
	--bg-color-main-body-c1: #007b3c;
	--bg-color-main-body-c2: #0c924d;
	--bg-game-board:#00a651;
	--bg-game-menu:#ffffff;
	--font-game-menu:#383f6d;
	--font-color:#fff;
}

body{ margin: 0; padding: 0; }
#game-wappe{
	background-image: linear-gradient(to right, var(--bg-color-main-header-c1), var(--bg-color-main-header-c2));
}
.header-menu{ width: 100%; display: flex; align-items: center; justify-content: center!important; padding:5px 0; }
.menu-top{background-color: #fff;}
.icon{ display: block; padding: 10px 30px; float: right; cursor: pointer;}
.icon span{ width: 25px; height: 3px; margin: 5px 0; display: block; background-color:#4bbfee; }
.menu {
	display: none;
	position: absolute; 
	width: 100%; 
	height: auto;
	left: 0;
	top: 50px !important;
	right: 0;
	z-index: 10000!important;
	background-color: #eae6df;
	transition: all 1s;
}
.menu.active{ display: block; }
.menu ul { list-style: none; margin-bottom: 0; padding: 0; text-align: center;}
.menu ul li{ display: block; }
.menu ul li a{ 
	display: block; 
	padding: 10px 10px; 
	color: #343965; 
	font-family: Gotham Pro; 
	font-weight: 400;
	border-bottom: 1px solid #6f6f6f;
}
.menu ul li a:hover{text-decoration: none;}
.menu ul li a.active-1{font-weight: 700;}
/*.game-title{display: none;}*/
#main-game-wapper{
	background-image: linear-gradient(to right, var(--bg-color-main-body-c2), var(--bg-color-main-body-c1));
	padding-top: 20px;
}
.game-name img{margin: auto;}
.game-title{
	margin: 0;
	font-family: Lithos Pro;
	font-size: 40px;
	color: #fff;
	font-weight: 400;
}
#game-board{
	/*margin-top: 20px;*/
	margin-bottom: 20px;
	background-color:var(--bg-game-board);
	/*height: 600px;*/
	/*border-radius: 20px;*/
}
.game-menu{
	background-color: var(--bg-game-board);
	border-radius: 20px;
	text-align: center;
	margin-top: 20px;
	cursor:pointer;
	margin-bottom:10px;
}
.game-menu ul{padding: 0; margin: 0;}
.game-menu ul li{
	list-style-type: none;
	display: inline-block;
}
.game-menu ul li.active-2 a{
	background-color: var(--bg-game-menu);
	border-radius: 10px;
	color: var(--font-game-menu);
}
.game-menu ul li a{
	display: block;
	padding: 20px;
	font-size: 20px;
	font-weight: 500;
	font-family: Gotham Pro;
	color: #fff;
	text-transform: uppercase;
}
.game-rules{margin-top: 40px; margin-bottom: 30px;}
.game-rules h2{
	font-size: 30px;
	font-weight: 700;
	font-family: Gotham Pro;
	color:var(--font-color);
	text-transform: uppercase;
}
.game-rules p{
	font-size: 20px;
	font-weight: 300;
	font-family: Gotham Pro;
	color:#fff;	
}

/*side bar menu css start*/



.siderbar_menu .toggle_btn {
	margin-right: 16px;
	width: 18px;
	height: 16px;
	position: relative;
	-webkit-transition: .5s ease-in;
	-o-transition: .5s ease-in;
	transition: .5s ease-in;
	cursor: pointer;
	display: inline-block;
}
.siderbar_menu .toggle_btn, .siderbar_menu .line_card {
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
}
.siderbar_menu .line_card {
	display: block;
	position: absolute;
	height: 2px;
	width: 100%;
	background: #000;
	opacity: 1;
	left: 0;
	-webkit-transition: .3s ease-in;
	-o-transition: .3s ease-in;
	transition: .3s ease-in;
}
.siderbar_menu .line_card-top { top: 0; }
.siderbar_menu .line_card-mid { top: 7px; }
.siderbar_menu .line_card-bottom { top: 14px; }
.siderbar_menu .toggle_btn.open .line_card-top {
	top: 7px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.siderbar_menu .toggle_btn.open .line_card-mid { opacity: 0; }
.siderbar_menu .toggle_btn.open .line_card-bottom {
	top: 7px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
#sidebar-wrapper {
	z-index: 1000;
	position: absolute;
	right: 0;
	width: 0;
	/*height: 100vh;*/
	margin-left: 0;
	height: 1000px;
    	overflow-x: auto;
	background-color:#ffffff;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	/*visibility: hidden;*/
	display: none;
	opacity: 0;
	top: 50px;
}
#sidebar-wrapper.menu_active { width:300px; opacity: 1; /*visibility: visible;*/ display: block;}
.siderbar_menu{position: relative;z-index: 1000;}
#sidebar-wrapper ul{margin: 0; padding: 0;border-top: 1px solid #6f6f6f;}
#sidebar-wrapper ul li{list-style-type: none;}
#sidebar-wrapper ul li a{
	padding: 10px;
	color: #343965;
	font-family: Gotham Pro;
	border-bottom: 1px solid #6f6f6f;
	font-weight: 400;
	font-size: 14px;
	display: block;
	transition: 0.5s all;
}

.sidebar_image{height: 40px;width: 40px; max-width: unset; margin-right: 10px;}
#sidebar-wrapper ul li a:hover{
	text-decoration: none;
	background-color: var(--bg-game-board);
	color: #fff;
}

.remove-header{display: none !important;}
.overlay_bg{ 
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(86, 86, 86, 0.4);
	z-index: 1000;
	transition: all 0.5s ease-in-out;
}
.overlay_bg.bg_active {
    display: block;
    width: 100%;
    left: auto;
    top: 0;
    cursor: pointer;
}
.open-nav{overflow: hidden;}
.ol-center{text-align: left;width: 360px;margin: auto;}
#rules table {
    margin: 10px auto;
    border:1px solid #fff;
}
#rules table td,th{border:1px solid #fff;padding:3px;}
.table-description{text-align:left;}
.mini_card_r{padding-right: 1px;padding-left: 1px;color:red;}
.mini_card_b{padding-right: 1px;padding-left: 1px;color:black;}

#myoptionModal, #myoptionsModal, #myModal {
    top: 30%;
}

@media (min-width: 768px){
	.game-title{
		font-family: Lithos Pro;
		font-size: 90px;
		color: #fff;
		font-weight: 400;
	}
	.game-menu ul li a{padding: 10px;}
}
@media (min-width: 1024px){
	.icon {display:none; }
	.menu {position: relative;display: block;width: auto;height: auto;top: 0!important;background-color: unset;}
	.menu ul li{display: inline-block;}
	.menu ul li a{display: block;color: #343965;border-bottom: 0px solid #6f6f6f;}
	.game-menu ul li a{ display: block; padding: 20px 40px;}

}
@media(max-width: 1023px){
	.remove-header{display: inline!important;}
	#menubutton{display: none;}
	#sidebar-wrapper{display: none;}
}
@media (max-width: 765px){
    #myoptionModal, #myoptionsModal, #myModal {
        top: 20%;
    }
    #availableUserModel{
  	margin:0!important;
	width:90%!important;
	left:50%!important;
	top:50%!important;
	transform: translate(-50%, -50%)!important;
    }
}