::-webkit-scrollbar {
    width:6px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.52);
    border-radius: 10px; 
} 
::-webkit-scrollbar-track {
       background: rgba(0, 0, 0, 0.25); 
}
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  color: #62c169;
  text-decoration: none;

}
.content a{
	color: #ffc107;
    text-decoration:none;
    text-shadow: 1px 1px 1px #333;
}
@font-face {
	font-family: vazir;
	font-style: normal;
	font-weight: normal;
	src: url('fonts/Vazir.eot');
	src: url('fonts/Vazir.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
	url('fonts/Vazir.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
	url('fonts/Vazir.ttf') format('truetype');
}
.hidden{
	display:none;
}
.animated {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.rotatePushTop {
	-webkit-transform-origin: 50% 0%;
	-webkit-animation: rotatePushTop .4s both ease;
	-moz-transform-origin: 50% 0%;
	-moz-animation: rotatePushTop .4s both ease;
	transform-origin: 50% 0%;
	animation: rotatePushTop .4s both ease;
}
.rotatePullTop {
	-webkit-transform-origin: 50% 0%;
	-webkit-animation: rotatePullTop .4s both ease;
	-moz-transform-origin: 50% 0%;
	-moz-animation: rotatePullTop .4s both ease;
	transform-origin: 50% 0%;
	animation: rotatePullTop .4s both ease;
}

@-webkit-keyframes rotatePushTop {
	to { opacity: 0; -webkit-transform: rotateX(-90deg); }
}
@-moz-keyframes rotatePushTop {
	to { opacity: 0; -moz-transform: rotateX(-90deg); }
}
@keyframes rotatePushTop {
	to { opacity: 0; transform: rotateX(-90deg); }
}
@-webkit-keyframes rotatePullTop {
	from { opacity: 0; -webkit-transform: rotateX(-90deg); }
}
@-moz-keyframes rotatePullTop {
	from { opacity: 0; -moz-transform: rotateX(-90deg); }
}
@keyframes rotatePullTop {
	from { opacity: 0; transform: rotateX(-90deg); }
}

body{
	position:relative;
	margin:0px;
	font-family : vazir,tahoma;
	direction:rtl;
	font-size: 15px;
	background:#afd6f5 url(bg.jpg);
	overflow:hidden;
}
#hokm,.cd-popup{
	width:800px;
	height:650px;
	max-height:750px;
	max-width:800px;
	margin:0 auto;
	position:relative;
}
#login,#lobby,.lobby .full-menu,.fullScreen .chat-messages{
	background:url(hokm.jpg);
	background-size:cover;
}
#table,.table .full-menu{
    background-blend-mode: screen;
	background:url(xhokm.jpg);
	background-size:cover;
}

header {
    position: absolute;
    top: 0;
    width: 100%;
	color:#03A9F4;
	background:#fff;
	font-size:1em;
	padding:.4em;
	text-align: center;
	left: 0;
    right: 0;
	z-index: 99999999;
	line-height: 1.9em;
}
.lobby header {
    top: auto;
    bottom: 0;
}
header a{
	color :#3aaee2;
}
header a+a{
	margin-right:1.3em;
}
.table header{
	width: 60%;
	background: rgba(255, 255, 255, 0);
}
.table header a{
	background: rgba(255, 255, 255, 0.74);
    padding: .2em .5em;
    border-radius: 20px;
	color: #0c0c0c;
}
.left-side{
	float:left;
}
.right-side{
	float:right;
}
.ltr{
	direction: ltr;
}
input,button {
	font-family : vazir;
}
/*  login */
.content {
  position:relative;
  width: 540px;
  background-color:rgba(255, 255, 255, 0.59);
  margin: auto auto;
  padding:20px 40px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 1em;
  -moz-box-shadow: 0 0 10px black;
  -webkit-box-shadow: 0 0 10px black;
  box-shadow: 0 0 10px black;
  margin-top:2em;
}
.content .title {
  text-align: center;
  font-size: 1.5em;
  font-weight: 600;
  padding-bottom: 30px;
color: #e5b07b;
text-decoration: none;
text-shadow: 1px 1px 1px #000000;
}
.content input ,.row input {
  width: 100%;
  font-size: 1.5em;
  margin: 10px 0px;
  border: 1px solid #ddd;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  text-align: center;
  background:rgba(255, 255, 255, 0.81);
  padding: .5em;
}
.is-mobile .content input {
	border-radius: 1em;
}
.row {
	margin:.5em;
}
.row .label{
	font-size: 1.2em;
    color: #607D8B;
	float: right;
}

.row .input{
	text-align:right;
	margin-right:7em;
}
.row input {
	border:1px solid #bbb;
}
.content input[type=checkbox] {
  display: none;
}
.content label,.row label {
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: relative;
  margin-left: 5px;
  margin-right: 10px;
  top: 5px;
}

.content .sxx{
	width: 100px;
    float: right;
    margin-top: 10px;
}
.content span {
  font-size: 1em;
}
.content button {
  width: 100%;
  font-size: 1.1em;
  padding: 1em;
  margin: 1em 0px ;
  background-color: #66A756;
  color: White;
  border: none;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  font-family : vazir;
}
#signIn{
	 margin: 3em 0px 1em 0px;
}
.content .social {
  width: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.content .social span {
  display: inline-block;
  vertical-align: baseline;
  padding: 0 20px;
}
.content .social span:before, .content .social span:after {
  content: '';
  display: block;
  width: 500px;
  position: absolute;
  top: 0.9em;
  border-top: 2px solid #fff;
}
.content .social span:before {
  right: 75%;
}
.content .social span:after {
  left: 75%;
}
.content .buttons {
  width: 100%;
  margin: 20px 0px;
}
.content .buttons button {
  float: left;
  width: 99%;
  margin: 0px 1.5%;
}
.content .buttons button i {
  padding-right: 7px;
}
.content .buttons button.facebook {
  background-color: #4464B2;
}
.content button.doreg {
  background-color: #525252;
}
.content .buttons button.google {
  background-color: #DA4735;
}
.content .buttons:after {
  content: "";
  display: block;
  clear: both;
}
.app{
	position:absolute;
	margin-top:3em;
	display:block;
	margin-right:-2em;
}
.app > div{
	margin:1em;
	border-radius:1em;
	display:block;
	position:relative;
	float:right;
	padding: 1px 15px;
	height:5em;
	padding-right:5em;
	font-size:1em;
}
.app .android{
	background:rgba(255, 255, 255, 0.66) url(android.png) right;
	background-repeat:no-repeat;
	background-size: contain;
}
.app .iphone{
	background:rgba(255, 255, 255, 0.66) url(apple.png) right;
	background-repeat:no-repeat;
	background-size: contain;
}
.is-mobile .app > div{
	width:100%;
}
.app a{
	color:#0c0c0c;
	text-shadow:none;
	float: right;
    margin-top: 1.5em;
}
.app img{
	width:5em;
	height:5em;
	float: right;
}
.gift-menu,.report,.user-img{
	z-index:99999 !important;
}
.report textarea{
	width: 100%;
    height: 8em;
	padding:.5em;
	font-family:vazir;
}
.the-gift{
	cursor:pointer;
	padding:5px;
	display:inline-block;
	text-align: center;
}
.the-gift img{
	max-height:3em;
}
.is-mobile .the-gift img{
    margin:1em;
}
.gift0,.gifte{
	height:40px;
	border:1px solid #ddd;
}
.gifte{
	width: 100%;
    margin-top: 10px;
    background: #e8e7e7;
	border-radius:5px;
}
.is-mobile .gifte{
	width:100%;
    margin-top: 20px;
    padding:20px;
	border-radius:10px;
	font-size:1.2em;
	height:3em;
}
/*loby*/
#lobby{
	display:none;
}
#table-list{
	display:inline-block;
	margin:0 auto;
	padding: .5em .7em;
	width:100%;
	overflow-x: hidden;
    overflow-y: auto;
    height: 94%;
}
.xcard a{
	display: block;
	
}
.xcard {
display:inline-block;
margin: 6px 8px;
position: relative;
border-radius: 20px;
overflow: hidden;
background-color: rgba(224, 224, 224, 0.81);
width: 365px;
padding:10px;
cursor:pointer;
text-align:center;
}
.card {
display: inline-block;
margin: 6px 7px;
position: relative;
border-radius: 20px;
overflow: hidden;
background-color: #fff;
width: 365px;
padding:15px;
cursor: pointer;
}

.card_image {
border-radius: 1px 0 0 1px;
left: 0;
top: 0;
width: 110px;
height: 100%;
position: absolute;
font-size: 1.1em;
text-align: center;
overflow: hidden;
line-height: 9em;
}

.card_title {
color: #000;
font-size:20px;
margin:0;
margin-bottom:.7em;
font-family: vazir,arial;
}
.is-mobile .card_title {
font-size:1.5em;
}
.card_subtitle {
font-size:1em;
}
.is-mobile .card_subtitle {
font-size:1.1em;
}

.card_subtitle.cs2 {
margin-right:1em;
}

.card_action-bar {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding-top: .1em;
margin-top: .9em;
border-top: 1px solid rgba(0, 0, 0, 0.13);
boz-sizing: border-box;
-webkit-transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card_button {
outline: none;
position: relative;
display: inline-block;
border: none;
background: transparent;
font-size:1em;
}
.is-mobile .card_button {
font-size:1.1em;
}
.card_button.cb2{
	margin-right:4em;
}
.pr{
color: #FF1744;
}
.pb{
color: #62c169;
}

.card.a1 .card_title{
	color:#8BC34A;
}.card.a2 .card_title{
	color:#2196F3;
}.card.a3 .card_title{
	color: #9C27B0;
}.card.a4 .card_title{
	color: #F5961C;
}.card.a5 .card_title{
	color:#F44336;
}.card.a6 .card_title{
	color:#0c0c0c;
}

/*color*/
.b1{
	background: linear-gradient( #4CAF50, transparent ), linear-gradient( 90deg, #2196F3, transparent ), linear-gradient( -90deg, #4CAF50, transparent );
}
.b2{
	background: linear-gradient( #2196F3, transparent ), linear-gradient( 90deg, #9C27B0, transparent ), linear-gradient( -90deg, #2196F3, transparent );
}.b3{
	background: linear-gradient( #9C27B0, transparent ), linear-gradient( 90deg, #FFEB3B, transparent ), linear-gradient( -90deg, #9C27B0, transparent );
}.b4{
	background: linear-gradient( #FFEB3B, transparent ), linear-gradient( 90deg, #E91E63, transparent ), linear-gradient( -90deg, #FFC107, transparent );
}.b5{
	background: linear-gradient( #E91E63, transparent ), linear-gradient( 90deg, #777777, transparent ), linear-gradient( -90deg, #E91E63, transparent );
}.b6{
	background: linear-gradient( rgba(111, 106, 106, 0.61), transparent ), linear-gradient( 90deg, rgba(33, 33, 33, 0.28), transparent ), linear-gradient( -90deg, rgba(220, 167, 188, 0.29), transparent );
}
.b7{
	background-color:#5f5f5f;
}
.br1:after{
	background:#4CAF50;
}
.br2:after{
	background:#2196F3;
}
.br3:after{
	background: #9C27B0;
}
.br4:after{
	background:#F5961C;
}
.br5:after{
	background:#E91E63;
}
.br6:after{
	background:#777;
}

.br1{
	border-color:#8BC34A;
}.br2{
	border-color:#2196F3;
}.br3{
	border-color:#9C27B0;
}.br4{
	border-color:#FF9800;
}.br5{
	border-color:#F44336;
}.br6{
	border-color:#0c0c0c;
}.br7{
	border-color:#5f5f5f;
}

.c1,.c1 span{
	color:#078818;
}.c2,.c2 span{
	color:#2196F3;
}.c3,.c3 span{
	color:#9C27B0;
}.c4,.c4 span{
	color:#FF9800;
}.c5,.c5 span{
	color:#F44336;
}.c6,.c6 span{
	color:#0c0c0c;
}
.cb{
	color:#3c3a3d;
}
.cr{
	color:#db503b;
}
/*table*/
#table,#lobby{
	display:none;
	max-width:800px;
	position: relative;
	height:100%;
}
#table{
	padding-top: 3em;
}
.full-menu{
	position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
	z-index:9999;
	text-align: center;
	padding:1em;
	padding-top: 3em;
}
#lobby .full-menu{
	top:0;
	bottom: 2.8em;
}
.full-menu.for-table,.full-menu.for-user{
	left:auto;
	background-position-x: 80%;
	width:60%;
}

.my-info .card,.tbl-info .card {
	text-align: right;
}

.env{
    position: absolute;
    z-index: 1;
    width: 57%;
	margin: 2em 10px 0 0;
}

.env:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.env .pos{
	position: absolute;
	margin: -50px 0 0 -50px;
	left: 50%;
	top: 50%;
	cursor:pointer;
}
.player4>.p1,.player2>.p1{
	top: 48px;
}
.player4>.p2{
	left: 45px;
}

.player4 >.p3,.player2>.p2{
	top: auto;
    bottom: 0px;
}
.player4 >.p4{
	left: auto;
    right: -5px;
}

.pos .sit{
	background-repeat:no-repeat;
	height: 7em;
    width: 7em;
	background:url('sit.png') center;
	background-size: cover;
}
.sit .sit,.pos .user{
	display:none;
}
.sit .user,.sit .xuser{
	background:url('user.png') center;
	background-repeat:no-repeat;
    width: 6em;
    height: 6em;
	background-size: cover;
	display:block;
	border-radius:.7em;
	z-index: 5;
}
.sit .xuser{
	z-index: -1;
	position: absolute;
}
.pos svg{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 6.5em;
	width: 6.5em;
	z-index: 10;
}
.player4>.p1 .sit,.player2>.p1 .sit{
  margin-top: 5px;
}
.player4>.p2 .sit{
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.player4>.p3 .sit,.player2>.p2 .sit{
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  border-radius: 10px;
}
.player4>.p4 .sit{
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.pos .name{ 
	position: absolute;
    color: #fff;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 1em;  
    margin-top: 0px;
    background: rgba(51, 51, 51, 0.76);
    padding: 0px 5px;
    border-radius: 5px;	
	direction:ltr;
	font-family:tahoma;
	padding-left: 1em;
}
.pos .name b{ 
    margin-right: 4px;
    font-size: 1.2em;
    position: absolute;
    left: 0;
    top: -3px;
}
.pos .gift{
	position:relative;
}
.pos .gift>*{
	position: absolute;
}
.pos .gift img{
	border-radius:0;
	border: 0;
}
.crown{
		background-image:url('crown.png');
}
.crown.cn1{
	background-position:215px -6px;
}.crown.cn2{
	background-position: 142px -10px;
}.crown.cn3{
	background-position: 75px -10px;
	width:72px!important;
}
.crown.cn4{
	background-position:215px -56px;
	width:65px!important;
}.crown.cn5{
	background-position: 145px -56px;
	width:65px!important;
}.crown.cn6{
	background-position: 75px -56px;
	width:70px!important;
}
.crown.cn7{
	background-position:215px -100px;
	height: 48px!important;
	top: -130px!important;
	width:66px!important;
}.crown.cn8{
	background-position: 145px -100px;
	width: 66px !important;
	height:48px!important;
}.crown.cn9{
	background-position: 70px -100px;
	height:48px!important;
}
.crown.cn10{
	background-position: 216px -150px;
    height: 45px!important;
    top: -130px!important;
    width: 65px!important
}.crown.cn11{
	background-position: 145px -150px;
}.crown.cn12{
	background-position: 75px -150px;
    width: 65px!important;
	height:45px!important;
}
.crown.cn13{
    background-position: 215px -200px;
    height: 45px!important;
    top: -130px!important;
    width: 65px!important;
}.crown.cn14{
	background-position: 145px -200px;
    height: 45px!important;
    width: 65px!important;
}.crown.cn15{
	background-position: 75px -200px;
    height: 45px!important;
    width: 65px!important;
}
.crown.cn16{
    background-position: 215px -250px;
    width: 65px!important;
}.crown.cn17{
	background-position: 145px -245px;
    height: 47px!important;
    width: 65px!important;
}.crown.cn18{
	 background-position: 72px -245px;
    width: 65px!important;
}
.crown.cn19{
    background-position: 215px -290px;
    height: 50px!important;
    top: -130px!important;
    width: 65px!important;
}.crown.cn20{
	background-position: 145px -290px;
    height: 50px!important;
    top: -130px!important;
    width: 65px!important;
}.crown.cn21{
    background-position: 75px -290px;
    height: 50px!important;
    top: -130px!important;
}
.pos .gift{
	position:relative;
}
.pos .gift>*{
	position: absolute;
}
.pos .gift img{
	border-radius:0;
	border: 0;
}
.disconnected{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	background:rgba(7, 7, 7, 0.41);
	left: 0;
	text-align:center;
	overflow: hidden;
}
.countdown{
	margin-top:30%;
	color:#E91E63;
	font-weight:bold;
}
.mygift{
	top: -2em;
    right: -2em;
	line-height: 2.5em;
}
.player4 .p4 .mygift{
	left: -2em;
	right:auto;
}
@-webkit-keyframes beat {
    0% {-webkit-transform: scale(1) ;}
    50% {-webkit-transform: scale(1.1);}
    100% {-webkit-transform: scale(1);}
}
@-moz-keyframes beat {  
    0% {-moz-transform: scale(1);}
    50% {-moz-transform: scale(1.1);}
    100% {-moz-transform: scale(1);}
}
@keyframes beat {  
    0% {transform: scale(1);}
    50% {transform: scale(1.1);}
    100% {transform: scale(1);}
}
.gift .gift30 ,.gift .gift31, .gift .gift32 {
    -webkit-animation: beat 0.7s ease 0s infinite normal;
    -moz-animation: beat 0.7s ease 0s infinite normal;
    animation: beat 0.7s ease 0s infinite normal;
}

.gift .gift1,.gift .gift2, .gift .gift3 {
	max-width:2.5em;
}
.pos .gift .crown{
	top: -123px;
	height:40px;
	width:61px;
	left: 50%;
	transform: translateX(-50%);
}
.card-throw{
	width: 45%;
    height: 40%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
.card-throw .cpos{
	position:absolute;
	height:85px;
	width:62px;
}

.player4>.card-throw>.c1,.player2>.card-throw>.c1{
	top:0;
	left:0;
    right:0;
	left:0;
    margin-left:auto;
    margin-right:auto;
}
.player4>.card-throw>.c2{
	top:0;
	left:0;
	bottom:0;
	margin-bottom:auto;
    margin-top:auto;
}
.player4>.card-throw>.c3,.player2>.card-throw>.c2{
	bottom:0;
	left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}
.player4>.card-throw>.c4{
	top:0;
	right:0;
	bottom:0;
	margin-bottom:auto;
    margin-top:auto;
}
.env .hokm{
    height: 6.2em;
    position: absolute;
    top: 0;
    right: 0;
    color: #484a4a;
    text-align: center;
    background: rgba(251, 251, 251, 0.52);
    border-radius: .5em;
	text-shadow: 1px 0 1px #333;
}
.env .hokm:empty{
	display:none;
}
.env .hokm .hokm-name{
	color: #FFC107;
}
.env .hokm .hokm-symbol{
	font-size: 6em;
    margin-top: -.3em;
	font-family:arial;
}
.is-mobile .env .hokm .hokm-symbol{
    margin-top: -.45em;
}
.env .info{
	position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    direction: ltr;
    text-align: left;
    text-shadow: 1px 0 1px #333;
    font-size: 1.5em;
    padding: 0px 10px;
    font-family: tahoma;
    color: #484a4a;
    text-align: center;
    background: rgba(251, 251, 251, 0.52);
    border-radius: .5em;
}
.env .info div{
	display: inline-block;
}
.env .info .clear{
	display: inherit;
}
.env .info .info-id{
	position:absolute;
}.info-a .info-id{
	margin-top: 3px;
}.info-b .info-id{
	margin-top: 5px;
}
.env .info .info-hand{
    margin-left: 1.5em;
    margin-right: .4em;
    font-size: 1.5em;
	color: #FFC107;
}.env .info .info-round{
	font-size: 1.5em;
	color:#dc346d;
}

.cards{
	position: absolute;
    height: 100px;
    width: 58%;
    bottom: 0;
	direction: ltr;
	z-index: 1;
}
.cards .cd{
	margin-right: -2em;
}
.card-dir{
	direction: ltr;
}
.card-dir .cd{
	margin-left:2px;
	margin-right:2px;
}.card-choose .cd{
	margin-left:-30px;
}
.card-symbol>a{
	display:inline-block;
	color: #62a5da;
    margin: 1em;
	cursor:pointer;
}
.card-symbol .hokm-symbol{
	display:inline-block;
	font-size: 4em;
    margin-top: -.2em;
	font-family:arial;
}
.choose-cards .cd.select{
	    box-shadow: 0px 0px 10px #2196F3;
    border: 1px solid #03A9F4;
}
/* modal */ 
.cd-popup {
  position: fixed;
  top: 0;
  background-color:rgba(3, 169, 244, 0.35);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
  z-index: 999;
}
.cd-popup.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.cd-popup-container {
  position: relative;
  width: 80%;
  margin: 6em auto;
  background: #FFF;
  border-radius: .25em .25em .4em .4em;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-40px);
  -moz-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  -o-transform: translateY(-40px);
  transform: translateY(-40px);
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.is-mobile .cd-popup-container {
  margin-top:12em;
  
}
.cd-popup-container.red{
	background: #ff355a;
}
.cd-popup-container.green{
	background: #8bc34a;
}
.user-img .cd-popup-container {
    margin: 2em auto;
	padding:.1em;
}
.cd-popup-container p {
  padding: 2em 1em;
}
.cd-popup-container .cd-buttons{
	list-style: none;
    padding: 0;
}
.cd-popup-container .cd-buttons:after {
  content: "";
  display: table;
  clear: both;
}
.cd-popup-container .cd-buttons li {
  float: right;
  width: 50%;
}
.cd-popup-container .cd-buttons.one li {
  width: 100%;
}
.cd-popup-container .cd-buttons a {
  display: block;
  height: 3em;
  line-height: 3em;
  text-transform: uppercase;
  color: #FFF;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.cd-popup-container .cd-buttons li:last-child a {
  background: #ff355a;
  border-radius: 0 0 .25em 0;
}
.no-touch .cd-popup-container .cd-buttons li:last-child a:hover {
  background-color: #c5ccd8;
}
.cd-popup-container .cd-buttons li:first-child a {
  background: #8bc34a;
  border-radius: 0 0 0 .25em;
}
.no-touch .cd-popup-container .cd-buttons li:first-child a:hover {
  background-color: #fc8982;
}
.cd-popup-container .cd-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
}
.cd-popup-container .cd-popup-close::before, .cd-popup-container .cd-popup-close::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 14px;
  height: 3px;
  background-color: #8f9cb5;
}
.cd-popup-container .cd-popup-close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 8px;
}
.cd-popup-container .cd-popup-close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 8px;
}
.is-visible .cd-popup-container {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
@media only screen and (min-width: 1170px) {
  .cd-popup-container {
    margin: 8em auto;
  }
}
.connecting{
	/* background-color: rgba(255, 255, 255, 0); */
}
.connecting .cd-popup-container{
	width: 540px;
}
/* chatbox */

.chatbox{
	width:40%;
	position: absolute;
    top: 0;
    left: 0;
	bottom:40px;
	z-index: 999;
}
.direction .chatbox{
	margin-right:2px;
	margin-left: auto;
	border-radius:10px 0 0 0;
}
.chat-window button:focus {
	-webkit-tap-highlight-color: rgba(255,255,255,0);
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

.chat-window {
	overflow: hidden;
	color: #474c57;
	border-right: 1px solid rgba(19, 20, 21, 0.21);
}


.chat-window a {
	color: #000;
}

.chat-window a:hover,
.chat-window a:focus {
	color: #ff355a;
}

.chat-messages {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	width: 100%;
	position: relative;
	border-radius: 2px 2px 0 0;
	background: rgba(0, 0, 0, 0.20);
	padding-bottom: 40px;
}
lobby.chat-messages {
	height: 100%;
}
.is-mobile .chat-messages{
	padding-top: 90px;
	padding-bottom: 0;
}
.no-chat .chat-messages-list{
	opacity:0;
}
.chat-messages-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
	width: 100%;
	padding: 5px 3px 60px;
}

.chat-message {
	position: relative;
	font-size: 0;
	margin-bottom:10px;
}

.chat-message-effect {
	position: absolute;
	z-index:99999;
}

.chat-input-bar {
	position: relative;
	background: #fff;
}

.chat-input-wrapper {
	position: relative;
	z-index: 2;
	/*background: #32A8E6;*/
	border-radius: 0 0 2px 2px;
	color: #fff;
	direction:ltr;
}

.chat-input-wrapper,
.chat-sticker {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-transition: all 0.5s;
}

.chat-input-tool {
	background: transparent;
	border: none;
	color: inherit;
	cursor:pointer;
}


.chat-input {
	outline: none;
	resize: none;
	-webkit-flex: 1;
	flex: 1;
	font-size: .9em;
	padding: 10px ;
	cursor: text;
	color: #03A9F4;
	margin-right:3.2em;
	margin-left:0;
	overflow: hidden;
	min-height:40px;
}

[contentEditable]:empty:not(:focus):before{
  content: attr(placeholder);
  display: block;
}

.chat-sticker {
    background: transparent;
    border: none;
    overflow: hidden;
    color: #03A9F4;
    -webkit-transition: color ;
    transition: color ;
    top: 0px;
    font-size: 1.1em;
    position: absolute;
    right: -5px;
}


.chat-input:empty {
	text-align:center;
}

.chat-effect-container {
	position: absolute;
	top: -100px;
	width: 100%;
}

.chat-effect-bar,.navigator {
	position: absolute;
	top: 100px;
	width: 100%;
	height: 40px;
	-webkit-transform: rotateY(0);
	transform: rotateY(0);
}

@keyframes blink {
    0% {
      opacity: .2;
    }
    20% {
      opacity: 1;
    }
    100% {
      opacity: .2;
    }
}

.chat-info-typing span {
    animation-name: blink;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
	font-size:2em;
}

.chat-info-typing span:nth-child(2) {
    animation-delay: .2s;
}

.chat-info-typing span:nth-child(3) {
    animation-delay: .4s;
}

.chat-info-container {
	position: absolute;
	top: -20px;
	font-size: 12px;
	color: #2B8EC2;
}

.chat-info-typing {
    position: absolute;
    right: 100px;
    white-space: nowrap;
    top: -.8em;
    background: rgba(249, 249, 249, 0.57);
    border-radius: 25px;
    line-height: 2em;
    padding: 0 5px;
}

.sticker{
	width:35px;
	cursor:pointer;
}
.is-mobile .sticker{
	width:2em;
	cursor:pointer;
}
.emo {
	color: rgba(0, 0, 0, 0);
    display: inline-block;
    width: 20px;
    height: 20px;
    text-indent: -10000px;
    cursor: text;
	background:url('emoji.png');
}
.emo-smile { background-position: 0 0; }
.emo-sad-smile { background-position: 0 -29px; }
.emo-big-smile { background-position: 0 -58px; }
.emo-cool { background-position: 0 -87px; }
.emo-surprised { background-position: 0 -116px; }
.emo-wink { background-position: 0 -145px; }
.emo-crying { background-position: 0 -174px; }
.emo-sweating { background-position: 0 -203px; }
.emo-speechless { background-position: 0 -232px; }
.emo-kiss { background-position: 0 -261px; }
.emo-tongue-out { background-position: 0 -290px; }
.emo-blush { background-position: 0 -319px; }
.emo-wondering { background-position: 0 -348px; }
.emo-sleepy { background-position: 0 -377px; }
.emo-dull { background-position: 0 -406px; }
.emo-in-love { background-position: 0 -435px; }
.emo-evil-grin { background-position: 0 -464px; }
.emo-talking { background-position: 0 -493px; }
.emo-yawn { background-position: 0 -522px; }
.emo-puke { background-position: 0 -551px; }
.emo-doh { background-position: 0 -580px; }
.emo-angry { background-position: 0 -609px; }
.emo-speechless-1 { background-position: 0 -638px; }
.emo-it-wasnt-me { background-position: 0 -667px; }
.emo-kiss-1 { background-position: 0 -696px; }
.emo-party { background-position: 0 -725px; }
.emo-tongue-out-1 { background-position: 0 -754px; }
.emo-wondering-1 { background-position: 0 -783px; }
.emo-worried { background-position: 0 -812px; }
.emo-mmm { background-position: 0 -841px; }
.emo-sleepy-1 { background-position: 0 -870px; }
.emo-dull-1 { background-position: 0 -899px; }
.emo-nerd { background-position: 0 -928px; }
.emo-evil-grin-1 { background-position: 0 -957px; }
.emo-lips-sealed { background-position: 0 -986px; }
.emo-hi { background-position: 0 -1015px; }
.emo-call { background-position: 0 -1044px; }
.emo-devil { background-position: 0 -1073px; }
.emo-angel { background-position: 0 -1102px; }
.emo-angry-1 { background-position: 0 -1131px; }
.emo-envy { background-position: 0 -1160px; }
.emo-worried-1 { background-position: 0 -1189px; }
.emo-nerd-1 { background-position: 0 -1218px; }
.emo-wait { background-position: 0 -1247px; }
.emo-bear { background-position: 0 -1276px; }
.emo-lips-sealed-1 { background-position: 0 -1305px; }
.emo-make-up { background-position: 0 -1334px; }
.emo-giggle { background-position: 0 -1363px; }
.emo-clapping { background-position: 0 -1392px; }
.emo-thinking { background-position: 0 -1421px; }
.emo-bow { background-position: 0 -1450px; }
.emo-rofl { background-position: 0 -1479px; }
.emo-whew { background-position: 0 -1508px; }
.emo-happy { background-position: 0 -1537px; }
.emo-smirk { background-position: 0 -1566px; }
.emo-nod { background-position: 0 -1595px; }
.emo-shake { background-position: 0 -1624px; }
.emo-punch { background-position: 0 -1653px; }
.emo-emo { background-position: 0 -1682px; }
.emo-yes { background-position: 0 -1711px; }
.emo-no { background-position: 0 -1740px; }
.emo-handshake { background-position: 0 -1769px; }
.emo-skype { background-position: 0 -1798px; }
.emo-heart { background-position: 0 -1827px; }
.emo-broken-heart { background-position: 0 -1856px; }
.emo-mail { background-position: 0 -1885px; }
.emo-flower { background-position: 0 -1914px; }
.emo-rain { background-position: 0 -1943px; }
.emo-sun { background-position: 0 -1972px; }
.emo-time { background-position: -29px 0; }
.emo-music { background-position: -29px -29px; }
.emo-movie { background-position: -29px -58px; }
.emo-phone { background-position: -29px -87px; }
.emo-coffee { background-position: -29px -116px; }
.emo-pizza { background-position: -29px -145px; }
.emo-cash { background-position: -29px -174px; }
.emo-muscle { background-position: -29px -203px; }
.emo-cake { background-position: -29px -232px; }
.emo-beer { background-position: -29px -261px; }
.emo-drink { background-position: -29px -290px; }
.emo-dance { background-position: -29px -319px; }
.emo-ninja { background-position: -29px -348px; }
.emo-star { background-position: -29px -377px; }
.emo-mooning { background-position: -29px -406px; }
.emo-middlefinger { background-position: -29px -435px; }
.emo-bandit { background-position: -29px -464px; }
.emo-drunk { background-position: -29px -493px; }
.emo-smoke { background-position: -29px -522px; }
.emo-toivo { background-position: -29px -551px; }
.emo-rock { background-position: -29px -580px; }
.emo-headbang { background-position: -29px -609px; }
.emo-bug { background-position: -29px -638px; }
.emo-fubar { background-position: -29px -666px; }
.emo-poolparty { background-position: -29px -695px; }
.emo-swear { background-position: -29px -724px; }
.emo-tmi { background-position: -29px -753px; }
.emo-heidy { background-position: -29px -782px; }
.emo-myspace { background-position: -29px -811px; }
.emo-malthe { background-position: -29px -840px; }
.emo-tauri { background-position: -29px -869px; }
.emo-priidu { background-position: -29px -898px; }

.emo-dir{
	position: absolute;
	width: 100%;
    bottom: .2em;
    background: rgba(41, 41, 41, 0.64);
	display:none;
	z-index: 9999999;
}
.stickers .head{
	display:inline-block;
	background : rgba(255,255,255,.95);
    border-radius: 0 5px 0 0;
    width: 100%;
	direction:ltr;
}
.stickers  .return {
	width:98%;
}
.stickers .head >div{
	display: inline-block;
	line-height: 1.9em;
	cursor: pointer;
	border-left: 1px solid rgba(247, 243, 243, 0.16);
    margin-left: .5em;
    padding-left: .5em;
    margin-bottom: .3em;
    margin-top: .3em;
}
.stickers .head >div:first-child{
	border-left: 0;
}
.stickers .body{
	border-top: 1px solid #D5D2D2;
	height:540px;
	overflow-y: auto;
	background : rgba(255,255,255,.8);
}
.is-mobile .stickers .body{
	height:87%;
}
.stickers .body img{
	margin: 10px;
	cursor: pointer;
	max-width:90px;
}
.is-mobile .stickers .body img {
    margin: .7em;
    cursor: pointer;
    max-width: 6.5em;
}
.stickers .body >div{
	display:none;
}
.stickers .body .active{
	display:block;
}
.stickers .head >div img{
	width: 50px;
}
.is-mobile .stickers .head >div img{
    width: 2.5em;
}

.emo-dir .emo{
	margin: 7px 7px;
	cursor: pointer;
}
::-webkit-input-placeholder { 
    color:    #333;
}
:-moz-placeholder { 
   color:    #333;
   opacity:  1;
}
::-moz-placeholder {
   color:    #333;
   opacity:  1;
}
:-ms-input-placeholder {
   color:    #333;
}

.clear {
clear: both;
}

.from-me {
	float: right;
	text-align: right;
	display: inline-block;
}

.chat-message-bubble{
	position: relative;
	color: #03A9F4;
	background: #fff;
	border-radius: 25px;
	margin-right: 6px;
}

.chat-message-bubble:before {
    content: '';
    display: block;
    width: 10px;
    height: 20px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    border-left: 15px solid #fff;
    border-bottom-left-radius: 100%;
	z-index: -1;

}
.spaceInLeft {
  animation-name: spaceInLeft;
  animation-duration: .3s;
  animation-fill-mode: both;
}
@keyframes spaceInLeft {
  0% {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: scale(.2) translate(-200%, 0%);
  }

  100% {
    opacity: 1;
    transform-origin: 0% 50%;
    transform: scale(1) translate(0%, 0%);
  }
}
.spaceInRight {
  animation-name: spaceInRight;
  animation-duration: .3s;
  animation-fill-mode: both;
}
@keyframes spaceInRight {
  0% {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: scale(.2) translate(200%, 0%);
  }

  100% {
    opacity: 1;
    transform-origin: 100% 50%;
    transform: scale(1) translate(0%, 0%);
  }
}
.spaceOutUp {
  animation-name: spaceOutUp;
  animation-duration: .3s;
  animation-fill-mode: both;
}
@keyframes spaceOutUp {
  0% {
    opacity: 1;
    transform-origin: 50% 0%;
    transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: scale(.2) translate(0%, -200%);
  }
}

.from-them {
	float: left;
	display: inline-block;
}
.from-them.first {
	margin-top:40px;
}
.from-them .chat-message-bubble{
	position: relative;
	background: #03A9F4;
	border-radius: 25px;
	color: #fff;
	margin-left: 30px;
}
.from-them .chat-message-bubble:before {
    content: '';
    display: block;
    width: 10px;
    height: 20px;
    position: absolute;
    right: auto;
    left: 1px;
    bottom: 0px;
	border-left:none;
    border-right: 15px solid #03A9F4;
    border-bottom-right-radius: 100%;
    border-bottom-left-radius: 0;
    z-index: -1;
}
.from-them .sender-img{
	border-radius: 50%;
    height: 35px;
    width: 35px;
    position: absolute;
    left: -7px;
    margin-top: 3px;
	bottom: 0;
	background:url('user.png') center;
	background-repeat:no-repeat;
	background-size: cover;
	
}
.chat-message-bubble {
	font-size: 14px;
	max-width: 350px;
	min-width: 0;
	z-index: 9;
	padding: 10px 20px;
	font-family:tahoma;
}

.chat-message-bubble.no-bg{
	background: transparent !important;
	min-height:40px;
}
.chat-message-bubble.no-bg img{
	    max-width: 250px;
}
.chat-message-bubble.no-bg:before{
	border:none;
}
.chat-message-bubble.red-bg{
	background: #ff355a;
	color:#343434;
}
.chat-message-bubble.red-bg:before{
	border-right: 20px solid #ff355a;
}
.chat-message-bubble.green-bg{
	background: #43c377;
	color:#343434;
}
.chat-message-bubble.green-bg:before{
	border-right: 20px solid #43c377;
}
.chat-message-bubble.yellow-bg{
	background: #FFC107;
	color:#343434;
}
.chat-message-bubble.yellow-bg:before{
	border-right: 20px solid #FFC107;
}
/*card */
.cd
{
	height:83px;
	width:60px;
	display:inline-block;
	border-radius:3px;
	box-sizing: initial;
	background:url('cards.png');
	border:1px solid rgba(74, 80, 84, 0.28);
	position:relative;
	color:#fff !important;
}

.cd.vs{
	visibility:hidden;
}
.swashOut {
  animation-duration: .3s;
  animation-fill-mode: both;
  animation-name: swashOut;
}
@keyframes swashOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
  }

  80% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(0.9, 0.9);
  }

  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0);
  }
}
.hokm-piker .hokm:after,.cd:after{
    position: absolute;
    content: attr(key);
    font-weight: bold;
    text-shadow: 0px 0px 1px #fff;
    padding: 0 5px;
    font-size: .8em;
    left: -4px;
    border-radius: 5px;
    line-height: 1em;
    font-family: arial;
    color: rgba(101, 101, 101, 0);
    bottom: 0px;
}
.hokm-piker .hokm:after{
	font-size: 16px;
	color: #fff;
}
.cd:before{
	position: absolute;
    content: attr(pri);
    top: -20px;
    background: rgba(51, 51, 51, 0.61);
    padding: 0 6px;
    font-size: 13px;
    left: 1px;
    border-radius: 5px;
    color: #fbfdfb;
    line-height: 20px;
}
.cd.mv:before{
	position:absolute;
	content: " ";
    width: 0;
    height: 0;
    left: 0px;
    bottom: 0px;
    top: auto;
    width: 0;
	height: 0;
	padding: 0;
	background: transparent;
	border-radius:0;
	border-bottom: 10px solid #4CAF50;
	border-right: 10px solid transparent;
}

.back{
	background-position:-920px -202px;
}
.c1{
	background-position:-9px -7px;
}.c2{
	background-position:-78px -7px;
}.c3{
	background-position:-149px -7px;
}.c4{
	background-position:-217px -7px;
}.c5{
	background-position:-286px -7px;
}.c6{
	background-position:-356px -7px;
}.c7{
	background-position:-427px -7px;
}.c8{
	background-position:-496px -7px;
}.c9{
	background-position:-563px -7px;
}.c10{
	background-position:-634px -7px;
}.c11{
	background-position:-704px -7px;
}.c12{
	background-position:-772px -7px;
}.c13{
	background-position:-844px -7px;
}

.c14{
	background-position:-9px -104px;
}.c15{
	background-position:-78px -104px;
}.c16{
	background-position:-149px -104px;
}.c17{
	background-position:-218px -104px;
}.c18{
	background-position:-287px -104px;
}.c19{
	background-position:-357px -104px;
}.c20{
	background-position:-426px -104px;
}.c21{
	background-position:-495px -104px;
}.c22{
	background-position:-565px -104px;
}.c23{
	background-position:-635px -104px;
}.c24{
	background-position:-705px -104px;
}.c25{
	background-position:-773px -104px;
}.c26{
	background-position:-844px -104px;
}

.c27{
	background-position:-9px -202px;
}.c28{
	background-position:-79px -202px;
}.c29{
	background-position:-150px -202px;
}.c30{
	background-position:-218px -202px;
}.c31{
	background-position:-287px -202px;
}.c32{
	background-position:-357px -202px;
}.c33{
	background-position:-426px -202px;
}.c34{
	background-position:-495px -202px;
}.c35{
	background-position:-564px -202px;
}.c36{
	background-position:-635px -202px;
}.c37{
	background-position:-705px -202px;
}.c38{
	background-position:-773px -202px;
}.c39{
	background-position:-844px -202px;
}

.c40{
	background-position:-9px -302px;
}.c41{
	background-position:-79px -302px;
}.c42{
	background-position:-150px -302px;
}.c43{
	background-position:-218px -302px;
}.c44{
	background-position:-287px -302px;
}.c45{
	background-position:-357px -302px;
}.c46{
	background-position:-426px -302px;
}.c47{
	background-position:-495px -302px;
}.c48{
	background-position:-564px -302px;
}.c49{
	background-position:-635px -302px;
}.c50{
	background-position:-705px -302px;
}.c51{
	background-position:-773px -302px;
}.c52{
	background-position:-844px -302px;
}

.tinDownIn {
  animation-duration: .5s;
  animation-fill-mode: both;
  animation-name: tinDownIn;
}
@keyframes tinDownIn {
  0% {
    opacity: 0;
    transform:translateY(100%);
    -webkit-transform:translateY(100%);
  }


  100% {
    opacity: 1;
    transform:translateY(0);
    -webkit-transform:translateY(0);
  }
}
.tinLeftIn {
  animation-duration: .5s;
  animation-fill-mode: both;
  animation-name: tinLeftIn;
}
@keyframes tinLeftIn {
  0% {
    opacity: 0;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }
}
.tinRightIn {
  animation-duration: .5s;
  animation-fill-mode: both;
  animation-name: tinRightIn;
}
@keyframes tinRightIn {
  0% {
    opacity: 0;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }
}
.tinUpIn {
  animation-duration: .5s;
  animation-fill-mode: both;
  animation-name: tinUpIn;
}
@keyframes tinUpIn {
  0% {
    opacity: 0;
    transform:translateY(-100%);
    -webkit-transform:translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}
/* RADIO */
.regular-radio {
	display: none;
}

.regular-radio + label {
	-webkit-appearance: none;
	border-width: 1px;
	border-style: solid;
	padding: 1.1em;
	border-radius: 50%;
	display: inline-block;
	position: relative;
}
.regular-radio:checked + label:after {
	content: ' ';
	width: 80%;
	height: 80%;
	border-radius: 50px;
	position: absolute;
	top: 0;
    left: 0;
    bottom: 0;
    right: 0;
	margin: auto;
}
.regular-checkbox {
	display: none;
}

.regular-checkbox + label {
	border-width: 1px;
	border-style:solid;
	padding:1.1em;
	border-radius: 3px;
	display: inline-block;
	position: relative;
	overflow:hidden;
}

.regular-checkbox:checked + label {
	color: #99a1a7;
}

.regular-checkbox:checked + label:after {
	content: '\2714';
	font-size: 14px;
	font-size: 1.3em;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    width: 100%;
    height: 100%;
	text-align: center;
}



	body.is-mobile {
		font-size: 30px;
	}
	.is-mobile #hokm{
		width:100%;
		height:100%;
		max-width:100%;
		max-height:100%;
	}
	.is-mobile .content {
	  width: 90%;
	}
	.is-mobile .card{
		width:98%;
	}
	.is-mobile .pos .name b{ 
		font-size: 2.2em;
		top: -15px;
	}
	.is-mobile .card_image {
		width:25%;
	}
	.is-mobile .card_button{
		padding: 15px 0;
	}
	.is-mobile .card_button.cb2{
		margin-right:4em;
	}
	.is-mobile .env {
		width: 100%;
		margin: 0;
		bottom: 2em;
		max-width: 100%;
	}
	.is-mobile .cd-popup-container {
		width:95%;
	}
	.is-mobile #table,.is-mobile #lobby{
		max-width:100%;
		overflow: hidden;
	}
	.is-mobile .cd{
		transform: scale(2);
		-webkit-transform: scale(2);
	}
	.is-mobile .player4 .pos.p1 ,.is-mobile .player4 .pos.p3,.is-mobile .player2 .pos.p1 ,.is-mobile .player2 .pos.p2{
		left:45%;
	}
	.is-mobile .pos .gift .crown{
		transform: translateX(-50%) scale(1.5);
		-webkit-transform: translateX(-50%) scale(1.5);
		margin-top:-3em;
	}
	.is-mobile .chat-message-bubble {
		font-size: 35px;
		max-width: 100%;
	}
	.is-mobile .chatbox{
		right: 0;
		height: 0em;
		width: 100%;
		max-width: 100%;
		top: 3em;
	}
	.is-mobile .from-them .chat-message-bubble {
		margin-left: 2em;
	}
	.is-mobile .from-them .sender-img{
		height: 70px;
		width: 70px;
	}
	.is-mobile .chat-input {
		font-size:1em;
		line-height:1.7em;
		margin-left: 3em;
		margin-right: 3em;
	}
	.is-mobile .chat-sticker {

	}
	.is-mobile .gift-def{
		transform:scale(2);
		-webkit-transform:scale(2);
	}
	.is-mobile .table header{
		padding-left:5px;
		width:100%;
	}
	.is-mobile .hokm-piker .hokm:after,.is-mobile .cd:after{
		content:"";
	}
	.is-mobile .cards{
		width:100%;
		bottom:1.1em;
	}
	.is-mobile .cards .cd {
		position:absolute;
	}
	.is-mobile .card-dir .cd,.is-mobile  .card-choose .cd {
		margin-right: 3em;
	}

	.is-mobile .full-menu.for-table,.is-mobile .full-menu.for-user{
		left:0;
		width:100%;
	}
	.is-mobile  .xcard {
		margin: 15px;
		border-radius: 5px;
		padding:1em;
		width:98%;
		font-size:1.3em;
		text-align: center;
	}
	.is-mobile .cd-popup{
		width:100%;
		height:100%;
		max-height:100%;
		max-width:100%;
	}
	.is-mobile .emo-dir ,.is-mobile .emo-dir .body{
		height: 90%;
	}
	.is-mobile .emo {
		transform: scale(2.5);
		-webkit-transform: scale(2.5);
		margin:1em;
	}
	.is-mobile .emo-dir .body .emo {
		margin: 1em;
	}
	.is-mobile .emo-dir .body img{
		max-width: 5em;
	}
	.is-mobile .fullScreen{
		height:96% !important;
		z-index:9999;
	}
	.is-mobile .full{
		transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
	}

	.is-mobile .gift .gift1,.is-mobile .gift .gift2,.is-mobile  .gift .gift3 {
		max-width:1.5em;
	}
	.is-mobile .env .hokm .hokm-name{
		visibility:hidden;
	}
	

.croppie-container .cr-image {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    max-height: none;
    max-width: none;
}
.file-btn{
	border:1px solid #666;
	position: relative;
	padding:1em;
}
.is-mobile .file-btn{
	font-size:1.3em;
	padding:5px;
}
.file-btn input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.croppie-container .cr-boundary {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    z-index: 1;
    width: 20em;
    height: 20em;
}

.croppie-container .cr-viewport {
    position: absolute;
    border: 2px solid #fff;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.croppie-container .cr-original-image {
    display: none;
}

.croppie-container .cr-vp-circle {
    border-radius: 50%;
}

.croppie-container .cr-overlay {
    z-index: 1;
    position: absolute;
    cursor: move;
}

.croppie-container .cr-slider-wrap {
    width: 75%;
    margin: 15px auto;
    text-align: center;
}

.croppie-result {
    position: relative;
    overflow: hidden;
}

.croppie-result img {
    position: absolute;
}

.croppie-container .cr-image,
.croppie-container .cr-overlay,
.croppie-container .cr-viewport {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}



.cr-slider {
    -webkit-appearance: none;
	/*border: 1px solid white; *//*fix for FF unable to apply focus style bug */
    width: 300px;
    max-width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: transparent;
}
.is-mobile .cr-slider {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
}

.cr-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 3px;
}

.cr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top: -6px;
}

.cr-slider:focus {
    outline: none;
}

.cr-slider::-moz-range-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 3px;
}

.cr-slider::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top: -6px;
}

.cr-slider:-moz-focusring {
    outline: 1px solid white;
    outline-offset: -1px;
}

.cr-slider::-ms-track {
    width: 100%;
    height: 5px;
    background: transparent;
	border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */
	border-width: 6px 0;
	color: transparent;/*remove default tick marks*/
}
.cr-slider::-ms-fill-lower {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
}
.cr-slider::-ms-fill-upper {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
}
.cr-slider::-ms-thumb {
	border: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #ddd;
	margin-top:1px;
}
.cr-slider:focus::-ms-fill-lower {
	background: rgba(0, 0, 0, 0.5);
}
.cr-slider:focus::-ms-fill-upper {
	background: rgba(0, 0, 0, 0.5);
}

.cr-rotate-controls {
	position: absolute;
	bottom: 5px;
	left: 5px;
	z-index: 1;
}
.cr-rotate-controls button {
	border: 0;
	background: none;
}
.cr-rotate-controls i:before {
	display: inline-block;
	font-style: normal;
	font-weight: 900;
	font-size: 22px;
}
.cr-rotate-l i:before {
	content: '↺';
}
.cr-rotate-r i:before {
	content: '↻';
}
.full-menu .return{
	margin-top: 2em;
}

.newmessage{
	position:fixed;
	top:0;
	left:.5em;
	right:.5em;
	margin:.3em;
	color:#fff;
	z-index:999999;
	display: inline-block;
}
.newmessage>div{
	display: inline-block;
}
.is-mobile .chat-input-bar{
	position: fixed;
    top: 95px;
    width: 100%;
}
.is-mobile .chat-info-typing {
	font-size: 2em;
	top: 4em;
	color: #2196f3;
	background: rgba(249, 249, 249, 0.85);
	right: 20px;
}
.is-mobile .emo-dir{
	position:fixed;
	top: 5.5em;
	bottom: auto;
	height: auto;
}
.is-mobile .chat-messages {
    background: none;
}
.chat-messages-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
    padding: 5px 3px 5px;
}
.chat-message{
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}
.xsender.chat-message{
	padding-top:20px;
}
.is-mobile .xsender.chat-message{
	padding-top:30px;
}
.chat-message .user{
	position: absolute;
    margin-top: -25px;
    left: 30px;
    color: #fff;
    z-index: 9999999999;
    font-size: 10px;
    background: #7d7d7d;
    padding: 2px 10px;
    border-radius: 10px;
	display:none;
}
.is-mobile .chat-message .user{
	font-size:30px;
}
.xsender .user{
	display:block;
}
.choose-crown,.choose-user {
	z-index:99999;
}
.error  {
	z-index:999999;
}
.stickers{
	z-index: 99999999;;
}
.choose-crown .crown {
    display: inline-block;
    height: 40px;
    width: 61px;
    cursor: pointer;
    margin: 10px;
}
.is-mobile .choose-crown .crown {
	transform: scale(2);
    margin: 2em;
}