*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
 font-family: 'Vazir';
 src: url('fonts/Vazir.eot?#') format('eot'),  /* IE6–8 */
 url('fonts/Vazir.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
 url('fonts/Vazir.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
@font-face {
 font-family: 'Vazir-digit';
 src: url('fonts/Vazir-Code-Extra-Height-FD.ttf');
}

* {
	padding:0;
	margin:0;
	font-family: 'Vazir';
    display:standalone;
    
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently*/
}

html, body{
	width:100%;
	height:100%;
	font-family:Vazir, Arial, Tahoma, "Helvetica Neue",Helvetica,sans-serif;
    font-size:18px;
	direction:rtl;
	background-color:white;
	overflow:hidden;
}


button::-moz-focus-inner,
input::-moz-focus-inner,
a::-moz-focus-inner,
input[type="image"]::-moz-focus-inner,
input{
    border: none !important;
    
}

button{
    outline:none !important;
}

.custom-scroll::-webkit-scrollbar {
  width: 5px;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: #141418; 
}
/*customer select tag*/
select{
    padding: 5px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    background: rgba(0,0,0,0.5);
    color: #fff;
    margin:10px auto;
}
option{
    border-radius: 5px;
    border: none;
    cursor: pointer;
    background: rgba(0,0,0,0.5);
    color: #fff;
}

.load-row div{
    position:absolute;
    width:20px;
    height:35px;
    opacity:0;
    font-family:Helvetica, Arial, sans-serif;
    animation:move 4s linear infinite;
    animation-delay:calc(1s * var(--l));
    transform:rotate(180deg);
    color:#35C4F0;
}
@keyframes move {
  0% {
    right:0;
    opacity:0;
  }
	35% {
		right: 41%; 
		-moz-transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-o-transform:rotate(0deg);
		transform:rotate(0deg);
		opacity:1;
	}
	65% {
		right:59%; 
		-moz-transform:rotate(0deg); 
		-webkit-transform:rotate(0deg); 
		-o-transform:rotate(0deg);
		transform:rotate(0deg); 
		opacity:1;
	}
	100% {
		right:100%; 
		-moz-transform:rotate(-180deg); 
		-webkit-transform:rotate(-180deg); 
		-o-transform:rotate(-180deg); 
		transform:rotate(-180deg);
		opacity:0;
	}
}

.header {
	position:relative;
	top:0px;
	width:100%;
	height:40px;
	color:#ffffff;
	background-color:#4c5c68;
	box-shadow:0 4px 6px 0px rgba(0,0,0,0.2);
	z-index:100;
}
.content {
	position:relative;
	width:100%;
	height: calc(100% - 90px);
	overflow-y: hidden;
	overflow-x: hidden;
	scrollbar-width: none;
	font-family:Vazir;
/*	border-top:1px solid blue;*/
}

.icon-menu img{
    width:25px;
    transition:0.2s;
    cursor:pointer;
}
.icon-menu:hover img{
    transform:scale(1.2);
}
.logo-header{
    width:30px;
    vertical-align:middle;
    transition:0.5s;
}
.logo-header:hover{
    transform:rotate(360deg);
}

.menu {
   right:10px;
   height:40px;
}

.hr{
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    border-radius: 90%;
    margin: 10px auto;
}

.footer {
 position:relative;
 bottom:0px;
 height: 50px;
 width:100%;
 background-color:#4c5c68;
 box-shadow:0 0px 6px 0px rgba(0,0,0,0.2);
}
.footer span {
  position:relative;
  color:#fff;
  width:10%;
  text-align:center;
  margin:0px;
  padding:0px;
  cursor:pointer;
  outline:none;
}
.footer span label{
    position:relative;
    top:0px;
    font-size:14px;
    margin:0;
    color:#ffff;
}

.footer span label font{
    display:block;
    position:relative;
    top:-11px;
}
.footer span label .icon-btn-menu{
    position:relative;
    margin:3px auto;
    width:25px;
    transition:0.3s;
    cursor:pointer;
}

.btn-check-menu{
    width:0;
    height:0;
    opacity:0;
    appearance:none;
    -webkit-apearance:none;
    -moz-apearance:none;
    -ms-apearance:none;
    -o-apearance:none;   
}
.footer span .btn-check-menu:checked + label img{
    transform:scale(1.4);
    top:5px;
}
.footer span .btn-check-menu:checked + label font{
    top:20px;
    opacity:0;
}
.home-card img:hover{
    transform:scale(0.9);
}

.page {
	margin:0px 0px 0px 0px;
	border:0px solid blue;
	height:100%;
/*	text-align:center;*/
}

.modal {
	position:absolute;
	background-color:red;
	border:1px solid blue;
	text-align:center;
}

.board-main-container {
    /*width: 100%;*/
	/*height:100%;*/
	border:0px solid;
	margin: auto;
}
.board-container {
	/*width: calculate by oipchess;*/
	height:calc(70% - 16px);
	margin:auto;
	text-align:center;
}
.board-panel {
	width: 100%;
    border: none;
    height: 70px;
    margin-top: 5px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    background-color: #4c5c68;
    border-radius: 5px 5px 0 0;
    padding: 3px;
}

.panel-section {
	position:relative;
	width:30%;
	height:100%;
	border:none;
	display:block;
	margin:auto;
	float:left;
	text-align:center;
}

.img-nav {
	width:32px;
}
.navigator {
    background:#ececec;
	border:none;
	border-radius:0 0 3px 3px;
	direction:ltr;
}
.navigator * {
	margin:1px;
}

canvas {
	margin:auto;
}

.submiter{
  background-color:#dcdcdc;
  position:absolute;
  left:0px;
  top:0px;
  padding:2px;
  margin:2px;
  width:100px;
  opacity:1.0;
  z-index:100;
}

.progress {
  margin:5px;
  padding:0px;
  width:95%;
  height:20px;
  text-align:left;
}

.progress div {
  margin:0px;
  padding:0px;
  height:18px;
  display:inline-block;
  background-color:red;
  width:20%;
}

.game-list {
	background-color:#46494c;
	direction: ltr;
	border: none;
	overflow-y: hidden;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: thin;
	height:100%;
}

.avator {
	display:inline-block;
}
.avator-img {
	height:50px;
	width:50px;
	border-radius:5px;
	box-shadow: 0 0px 6px 0px rgba(0,0,0,0.2);
	background-color: #556080;
}

.online-status{
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    bottom: 50px;
    background: rgb(0, 150, 0) none repeat scroll 0% 0%;
    border-radius: 100%;
    border: 1px solid rgb(255, 255, 255);
    animation: online 5s linear infinite;
    -webkit-animation: online 2s linear infinite;
    -moz-animation: online 2s linear infinite;
    -ms-animation: online 2s linear infinite;
    -o-animation: online 2s linear infinite;
}

@keyframes online {
  0%   {
    opacity: 1;
  }
  50%{
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.score {
	color:blue;
	text-align:center;
}

.white-name {
	color:#fdbf2d;
	font-size:12px;
}

.black-name {
	color:#fdbf2d;
	font-size:12px;
}

.indicator {
	position:relative;
	font-size:14px;
	display:block;
	width:40%;
	height:20px;
}

.timer-white{
    text-align:left;
}

.timer-black{
    text-align:right;
}

.check {
    position:relative;
    width: 90px;
    height: 100%;
	background-color: #c62f2f;
    color: white;
    bottom: 3px;
    border-radius: 5px 5px 0 0;
}

.promote-form {
	display:none;
	position:absolute;
	z-index:10;
	text-align:center;
	width:320px;
	background-color:#4c5c68;
	padding:10px;
	box-sizing:border-box;
	border-radius:5px;
}

.promotion {
	display:inline-block;
	width:40px;
	height:40px;
	overflow:hidden;
	border:1px solid red;
	position: relative;
	margin:5px;
}

.promote-image {
	display:inline-block;
	position:relative;
	width:40px;
	height:40px;
	cursor:pointer;
	border:none;
	border-radius:5px;
}

.context-menu {
	position:absolute;
	z-index:100;
	min-width:200px;
	background-color:#4c5c68;
	padding:20px;
	border-radius:5px;
	text-align:center;
	box-shadow:0 0 12px 8px rgba(0,0,0,0.3),0 0 0 9999px rgba(0,0,0,0.8);
	transition:0.3s;
	left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
	color: #fff;
}

.context-menu hr{
    width:100%;
    border:none;
    border-bottom:1px solid #fff;
    border-radius:100%;
    margin:5px auto;
}
.context-menu button{
    margin:10px auto 10px auto;
}

button {
	display: block;
	min-width:40px;
	margin:5px;
}

a {
	display:block;
	text-align:center;
	margin:4px auto;
	height:32px;
	padding:2px;
	text-decoration:none;
	outline: none;
}

.hcenter {
	margin:auto;
	text-align:center;
}

input[type=text], input[type=password] {
	height:40px;
	font-size:18px;
}

.foot-menu-container {
    margin:auto; 
    max-width:600px;
}
.foot-menu {
    margin:5px;
    font-size:14px;
}

.ip-button,
input[type="button"]{
    width:100%;
    height:35px;
    margin:5px auto;
    padding:5px;
    font-size:18px;
    border-radius:50px;
    border:none;
    outline:none;
    color:#dcdcdd;
    background-color:#1985a1;
    cursor: pointer;
    transition:0.3s;
    text-decoration: none;
}

.ip-button:hover,
.btn-challenge-chatroom:hover,
.promote-image:hover{
    box-shadow:0 4px 6px 0px rgba(0,0,0,0.2);
    transform:scale(1.05);
}

.list-rules-tour ol{
    margin:20px;
}

.analyze-mode {
    background-color: #FF00FF;
}

.tactic-mode {
    background-color: #f57900;
}

.cond-mode {
    background-color: #f57900;
}
.inline {
    display:inline-block;
}

.card1-profile .top-section a:hover{
    transform:rotate(360deg);
}

.sign-checkbox {
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
  padding: 10px;
}

.moves {
    display:inline-block;
    cursor:pointer;
}
.move-label {
    margin-left:4px;
}

div [name=init-block] {
    display:none;
}

div [name=help] {
    display:none;
}

.template{
    background: #4c5c68;
    border: none !important;
    margin: 10px auto !important;
    color: #dcdcdd !important;
    cursor:pointer;
}

.row {
    width:100%;
}

.flat {
    border:none; 
}

.btn {
  margin:4px;   
}

.tactic-past-template:hover{
    transform:scale(1.1);
}

.tour-template:hover{
    transform:scale(1.05);
}
.btn-add-friends:hover{
    transform:scale(1.1);
    background:linear-gradient(to right bottom, #d82474, #fa4f2e);
}
.table-profile tr,td{
    text-align:center;
}
.table-profile tr{
    border-top:2px solid rgba(255,255,255,0.5);
    border-bottom:2px solid rgba(255,255,255,0.5);
    background:rgba(0,0,0,0.5);
}

.btn-item-navigator{
    width:30px;
    height:30px;
    font-size:12px;
    padding:5px;
    border:none;
    display:inline-block;
    background:#4c5c68;
    color:#fff;
    border-radius:5px;
    cursor:pointer;
    box-shadow: -1px -1px 2.8px rgba(255,255,255,0.1),
    1px 1px 6px rgba(0,0,0,0.2);
    transition:0.3s;
    text-align:center;
    outline:none;
    box-sizing:border-box;
}
.btn-item-navigator:focus{
    box-shadow: -1px -1px 3px rgba(255,255,255,0.1),
    1px 1px 4px rgba(0,0,0,0.2),
    inset -2px -2px 10px rgba(255,255,255,0.06),
    inset 1px 1px 8px rgba(0,0,0,0.5);
    color:greenyellow;
}

.btn-chat-games:hover{
    transform:scale(1.2);
}

.chat-sticker{
    position:relative;
    width:35px;
    display:inline-block;
    cursor:pointer;
    margin:5px;
    transition:0.3s;
}
.chat-sticker:hover{
    transform:scale(0.9);
}

.chat-item{
    background-color: #ffffff;
    margin: 10px 0px;
    width: 70%;
    float: right;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    text-align:right;
    border-radius: 5px;
    padding: 5px;
    font-size: 15px;
    direction:rtl;
    display:block;
}

.tour-progress{
    border-radius: 5px;
    max-width: 320px;
    width: 100%;
    padding: 10px;
    margin: 10px auto;
    display: block;
    background: #4c5c68;
    color: #dcdcdd;
}
progress{
    border-radius:50px !important;
}
progress::-moz-progress-bar{
    border-radius:50px !important;
}

.photo-vs-board:hover{
    transform: rotateY(180deg);
}

@keyframes marquee {
  0% { left: -400%; }
  100% { left: 100%; }
}

.icon-png:hover,
.icon-gif:hover,
.icon-pgn:hover {
    transform:scale(1.1);
}

.box-suggestion a{
    width:190px;
    padding: 5px;
}
.box-suggestion a:hover{
   background: rgba(255,255,255,0.2);
}

/* tablet screen*/
@media screen and (max-width:1030px){
    .card-tactic .ip-button{
        display:block !important;
        width:70% !important;
        margin:10px auto !important;
    }
    .pay-container{
        width: 88%  !important;
    }
    .pay-title{
        font-size:14px  !important ; 
    }
    .pay-explain,.pay-price{
        width:80% !important ;
    }
    .pay-explain p,.pay-price p{
        font-size: 17px !important; 
    }
    .pay-explain ul li{
        font-size: 14.7px !important; 
    }
    .pay-payBtn{
        width:80% !important;
    }
    .pay-wait-container{
        width: 80%  !important;
    }
    .pay-wait-text{
        font-size:15px !important;   
    }
}
@media screen and (max-width:900px){
   .pr-header-img,
   .pr-header,
   .pr-title{
        width:100% !important;
    } 
}
/* mobile screen*/

@media screen and (max-width:680px){
    .txt-card-tactic{
        display:inline-block;
    }
    .btn-tour{
        display:block !important;
        width:70% !important;
        margin:10px auto !important;
    }
    .tour-template{
        width:80% !important;
        font-size:13px;
    }

    .table-profile td{
        font-size:9px;
    }
    
    .btn-dialog{
        width:90% !important;
        display:block !important;
    }
    .pastgame-template, .joingame-template{
        width:200px !important;
    }
    .bodyCards-product{
        max-width: 95% !important;
    }
    .backImage{
        top:25px !important; 
        left:15px !important;
    }
    .cartTBL{
        font-size:10px !important;
    }
    .marquee-header{
        display:none !important;
    }
    .ip-button,
    .card-guide{
        font-size:15px !important;
    }
    .btn-add-friends,
    .btn-challenge-profile{
        width:100px !important;
        height:30px !important;
        margin:5px !important;
        font-size:9px !important;
    }
    
    .btn-challenge-chatroom{
        font-size:10px !important;
        width:100px !important;
        height:25px !important;
        margin:5px !important;
        right:50% !important;
    }
    .btn-challenge-chatroom img{
        width:15px !important;
    }
    
    .pr-header-img{
        height:100px !important;
        margin-bottom:10px  !important;
    }
    .pr-header-img img{
        width: 110px !important;
    }
    
    .card-contact-us .img-top-card{
        top:60px !important;
    }
    .header-card-contact-us div{
        height:300px !important;
        top:-200px !important;
    }
    .card-contact-us div p{
        font-size:10px;
    }
    .card-contact-us div p img{
        width:25px !important;
    }
    
    .img-top-card{
        width:50px !important;
        height:50px !important;
        top: -40px !important;
    }
    .img-top-card img{
        margin-top:5px !important;
    }
    .pay-container{
        width: 95% !important ;
    }
    .pay-title{
        font-size:13px  !important ; 
    }
    .pay-explain{
        width:80% !important ;
    }
    .pay-explain p,.pay-price p{
        font-size: 17px !important; 
    }
    .pay-explain ul li{
        font-size: 13.75px !important; 
    }
    .pay-payBtn{
        width:80% !important;
    }
    .btnsForcart{
        width: 85% !important;
    }
    .pay-wait-container{
        width: 95%  !important;
    }
    .pay-wait-text{
        font-size:15px !important;   
    }
    .card-about-us .img-row,
    .card-about-us .txt-row,
    .footer span{
        width:100% !important;
    }
    .card-about-us .img-row img{
        max-width:50% !important;
    }
    .card-about-us .txt-row div{
        border:none !important;
    }
}
@media only screen and (max-width:400px){
    .goodsNumbers{
        padding-top:1px !important;
        padding-bottom:1px !important;
        padding-right: 5px !important;
        padding-left: 5px !important;
    }
}