body a{
  text-decoration: none; /* Отменяем подчеркивание у ссылки */
}
body{
  -webkit-touch-callout: none; 
  -webkit-user-select: none;   
  -moz-user-select: none; 	  
}
#progBar {
    position: fixed;
    width: 100%;
    height: 80%;
    z-index: 300;
}
.progIcon {
	scale: 0.5;
    margin: 20% 30%;
    -webkit-animation:spin 0.4s linear infinite;
    -moz-animation:spin 0.4s linear infinite;
    animation:spin 0.4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); }}
@keyframes spin { 100% {  -webkit-transform: rotate(360deg);   transform:rotate(360deg);  } }
.hImFlt{
	float: left;
	margin: 6px 16px 16px 4px;
}
.appDv2 {
    border: 1px solid #b8b8b8;
    margin: 6px 3px;
    padding: 6px 3px;
    height: 47px;
    font-size: 15px;
    font-family: Verdana;
    position: relative;
    color: #333;
    background-color: #f1f1f1;
    border-radius: 5px;
}
.appDv2 img {
    padding: 4px;
    margin: -3px 0px 0px -2px;
    width: 47px;
    float: left;
}
.eNgCl div {
    color: #297aca !important;
}
.cont2 {
    /* width: 80%; */
    max-width: 1200px;
    margin: 10px auto;
    padding: 4px 4px;
}
.noCp{
  -webkit-touch-callout: none; 
  -webkit-user-select: none;   
  -moz-user-select: none; 		
}
.gDiscr{
	color: #444;
	font-size: 15px;
	font-family: Verdana, Arial;
  -webkit-touch-callout: none; 
  -webkit-user-select: none;   
  -moz-user-select: none; 	
}
.gDiscr div{
	padding: 4px;
}
.gDiscr h1, h2, h3, h4 {
    color: #336699;
    margin: 6px 6px 12px 6px;
    font-size: 18px;
    letter-spacing: -1.1px;
}
.gDiscr b {
    color: #336699;
}
.imgLine {
    height: 22px;
    margin: 0px 4px -4px 4px;
}
.imgBg{
    width: 95%;
    margin: 4px 4px 4px 0px;
    /*float: left;	*/
}
.hComm {
    border-radius: 5px;
    background-color: #f0f2f5;
    padding: 4px 4px 6px 4px;
    margin: 8px 0px 8px 0px;
    border: 1px solid #bcbcbc;
}
#mUComm{
	padding: 8px;
	border-radius: 4px;
	text-align: left;
	border: 1px solid #ddd;
	font-size: 16px;
	width: 60%;
	height: 110px;	
	margin: 0px 0px 8px 0px;
	color: #565656;	
}
.cont1{
	width: 80%;
	max-width: 1200px; /* max-width: 1200px;*/
	margin: 10px auto;
	padding: 80px 0px 0px 0px;
}
.rw1{
    display: table; 
    width: 100%;
}
.clm2inP{
    margin: 2px 4px;
	width: 44%;
    padding: 0px 8px 2px 8px;
	float: left;
	/* background-color: #889966; for testing */
}
.topLn{
    border-style: solid;
	border-color: #d3d3d3; 	/*   color: #2c50bf; #d3d3d3 */
    border-width: 2px 0px 0px 0px;		
}
.rw1::after{
    content: "";
    display: block;
    clear: both;
}
.imgFlx{
    margin: 4px 8px 4px 4px;
    max-height: 80%; 
    max-width: 80%;
	text-align:center;	
}
.imgFlx2{
    margin: 4px 8px 4px 4px;
    max-height: 80%; 
    width: 15%;
	float:left;	
}
.hlpBd{
	color: #444;
	font-size: 15px;
	font-family: Verdana, Arial;
}
/* ============== from Vir for help  */
@media only screen and (max-width: 768px){ /* 800px or ~ 50rem  background-color: green;*/
	.cont1{ width: 94%; padding: 40px 0px 0px 0px; }
	.clm2inP{ width: 44%; }    
}
@media only screen and (max-width: 680px){ /* 560px or ~ 35rem  background-color: blue; */
	.cont1{ width: 98%;	padding: 40px 0px 0px 0px;}
	.clm2inP{ width: 94%; }     
}
/* ==============  */
#iconSet {
    position: absolute;
    bottom: 3px;
    opacity: 0.7;
    left: 60px;
}
#iconSet div img {
    position: relative;
    width: 28px;
    margin: 0px 2px;
    padding: 2px 4px;
    border: 2px solid #fff;
    border-radius: 5px;
    float: left;
}
#champPan {
    position: absolute;
    top: 5px;
    box-shadow: 3px 1px 5px #383838;
    background-color: #d9dad9;
    border-radius: 7px;
    border: 2px solid #f0f0f0;
    font-family: Verdana, Arial;
    padding: 5px;
    right: 8px;
    height: 300px;
    letter-spacing: -1.3px;
    font-size: 16px;
    z-index: 150;
}
#champTabCntnr {
    position: relative;
    top: 62px;
    /* width: max-content; */
		margin:0%;
		width:100%;
		height:auto;	
    overflow: auto;
}
#champTabCntnr table{
    margin:0;
    width:100%;
}
#scrTab{
    font-size: 15px;
    color: #444;	
}
#scrTab td, th {
    padding: 2px 3px;
}
#scrTab tr:nth-child(even) { background-color: #a4fbe0;} /* effffa  a4fbe0 green */
#scrTab tr:nth-child(odd) { background-color: #d1ebff;}  /* eff8ff  d1ebff blue HEADER */ 
#scrTab tr:nth-child(2) { background-color: #fff389; }  /* gold */
#scrTab tr:nth-child(3) { background-color: #e9e9e9; } /* silver */
#scrTab tr:nth-child(4) { background-color: #ffb873; } /* bronse   orange */
.subTTl {
    position: absolute;
    margin: 39px 2px 0px 5px;
    font-size: 15px;
}
.oPa{
	opacity: 1.0;
}
.tTp {
  position: relative;
  display: inline-block;  
}
.tTp .tTpTx {
    visibility: hidden;
    background-color: #ffcc5a;
    color: #333;
    border-radius: 5px;
    padding: 3px 5px;
    max-width: 150px;
    position: absolute;
    letter-spacing: -1px;
    font-family: Verdana, Arial;
    z-index: 75;
    box-shadow: 3px 3px 4px #00000075;
}
.tTp:hover .tTpTx {
  visibility: visible;
}
.tR{ right: 40px; }
.tL{ left: 50px; }
.tT{ top: 40px; }
.tB{ bottom: 30px; }
#mainLVer {

}
#mainLVer div{
	float: left;
}
#helpFot{
	padding: 6px;
	font-family: Verdana, Arial;
	font-size: 15px;
	color: #444;
}
#gameArea {
    position: relative;
    float: left;
    padding: 6px 0px 6px 4px;
    opacity: 1.0;
	color: #444;
}
#gameArea div{
	float: left;
}
#titleTx{
	width: auto;	
}
.ttl {
    background-color: #777;
    color: #ededed;
    font-size: 20px;
    padding: 1px 6px 2px 6px;
    border-radius: 5px;
    letter-spacing: -1px;
    text-align: center;
    font-family: Verdana, Arial;
}
.sttPanTtl{
	font-size: 18px;
	padding: 6px 5px 0px 5px;
	font-family: Verdana, Arial;
	font-weight: bold;
}
.clBl{
	color: #00d5ff;
}
.clYl{
	color: #F1C40F;
}
#tLArea{
	/* border: 1px solid #8888ee; */
}
#bigMsgTxCntn {
    position: absolute;
    z-index: 90;
    box-shadow: 3px 1px 5px #383838;
    background-color: #ffcc5a;
    border-radius: 7px;
    /* border: 2px solid #f0f0f0; */
    padding: 6px 6px 0px 6px;
    top: 150px;
    margin: 0px 25%;
}
#bigMsgTxCntn div {
	margin: 2px 2px;
}
#bigMsgTx {
    font-size: 28px;
    text-align: center;
    color: #444;
    font-family: verdana, Arial;
    letter-spacing: -2px;
    padding: 1px 6px 4px 6px;
    margin: -6px 0px 0px 0px !important;
    float: left;
}
.qstTxCntn {
    position: relative;
    width: 100%;
    z-index: 70;
}
#qstTx {
    position: relative;
    font-size: 2.2vw;
    text-align: center;
    letter-spacing: -1.3px;	
    margin: 0px 40px;
    font-family: Verdana;
}
#bigImg{
	position: absolute;
    z-index: 50;	
}
.bgImg{
	position: absolute;
}
.bgImgDcr{
	box-shadow: 4px 4px 8px #00000075;
    border: 2px solid #ffffff99;	
	border-radius: 7px;		
}
#advRtVer {    
    float: right;
    margin: 0px -6px;
	padding: 0px 4px;
	font-family: verdana, Arial;
	font-size: 15px;
}
#advFot {
    background-color: #e3aae2;
    margin: 4px 0px;
    width: 99.5%;
    font-family: verdana, Arial;
    font-size: 15px;
}
#appPan{
	position: absolute;
    z-index: 80;
	box-shadow: 3px 1px 5px #383838;
	background-color: #d9dad9;
	border-radius: 7px;
	border: 2px solid #f0f0f0;
	font-family: verdana, Arial;
	padding: 5px;	
}
.appSlcBlk {
    margin: 1px 25px 0px 5px;
    padding: 3px 3px;
    position: relative;
}
.appDv {
    width: 200px;
    margin: 3px 3px;
    padding: 3px 3px;
    height: 47px;
    font-size: 15px;
    font-family: Verdana;
    position: relative;
    color: #333;
    background-color: #f6f6f6;
    border-radius: 5px;
}
.appDv img {
    padding: 4px;
    margin: -3px 0px 0px -2px;
    width: 45px;
    float: left;
}
.advCntn{
	position: absolute;
	top: 53px;
	overflow: auto;	
}
.hdAdv {
    position: absolute;
    padding: 4px 5px;
    left: 4px;
    right: 4px;
    border-radius: 10px;
    background-color: #c6c6c6;
    float: left;
}
.hdAdv img{
    float: left;
}
.hdAdv button{
    right: 3px;
    position: absolute;	
}
.advTtl{
	font-size: 18px;
    padding: 1px 5px 0px 5px;
    font-family: Verdana, Arial;
    font-weight: bold;
    color: white;
    float: right;	
}
#mark{
	position: absolute;
	z-index: 30;
	top: 45px; left: 55px;  /* was 45 55 */
	opacity: 0.0;
	cursor:not-allowed;		
}
#mark img{
	position: absolute;
}
.tlArInt{
	position: absolute;
	left: 50px;
	right: 50px;	
 	opacity: 1.0;
}
.tlArAni{
	position: absolute;
	left: 50px;
	right: 50px;
 animation-duration: 0.5s; 
 animation-name: panIntro; 
 animation-timing-function: cubic-bezier(0.69, 0.19, 0.63, 1.26);
}
 @keyframes panIntro {
	0% {
		transform: scale3d(0.8, 0.8, 0.8);
		opacity: 0.0;		
	}
	100% {
		transform: scale3d(1.0, 1.0, 1.0);
		opacity: 1.0;
	}
}
#lockTAr{
	position: absolute;
    left: 50px;
	cursor:not-allowed;	
}
.hTBar{
    position: absolute;
    left: 48px;
    right: 45px;
}
.hTBar div {
    float: left;
    margin: 4px 3px 0px 1px;
}
#vTBarR{
	float: right !important;
}
#vTBarL{
	float: left !important;
	height: auto;
}
.pAt0{
	position: absolute;
	top: 0px;	
}
.pAb0{
	position: absolute;
	bottom: 0px;	
}
#tBCntR{
	position: absolute;
	bottom: 0px;	
}
.vTBar{
	position: relative;
    top: 4px;
    width: 36px;
    margin: 0px 5px;
	height: 600px;
}
.hBt{
 margin-bottom: 60px !important;
 margin-right: 8px;
}
.btn_i {
    border-radius: 4px;
    width: 22px;
    height: 22px;
    margin: 4px 12px 8px 4px;
    background-color: #0075ff;
    float: left;
}
.btn {
    border-radius: 18px;
    border: 2px solid #777;
    cursor: pointer;
    margin: 0px 0px 8px 0px;
    background-color: #777;
}
.btn:hover{
	border: 2px solid #999;
	transition: 0.1s ease;
}
.btn img {
    width: 22px !important;
    height: 22px !important;
    opacity: 0.8;
    scale: 1.2 !important;
    margin: 2px -2px 0px -4px !important;
}
.mrg08{
	margin: 0px 8px;
}
.tBlk{
 position: absolute;
 /* border-radius: 15px; */
}
.tTxDv {
    position: absolute;
    top: 40%;
    left: 0px;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
	letter-spacing: -1.3px;	
    font-size: 20px;
    font-family: Verdana;
}
.tBasic{
 position: relative;
 border-radius: 25px;
 border: 5px solid rgba(255, 255, 255, 0);
 transform: rotate(0deg);
 opacity: 1.0;
 cursor: pointer;
}
/* ====== TILE ANI =========== Beg */
.clk{
 border-radius: 25px;
 border: 5px solid rgba(255, 255, 255, 0);
 transform: rotate(0deg);
 opacity: 1.0;
 animation: anglSmallRgt 0.5s;
 animation-timing-function: ease-in-out;
}
@keyframes anglSmallRgt {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(10deg); }
	100% { transform: rotate(0deg); }
}
.rem{
 border-radius: 25px;
 border: 5px solid rgba(255, 255, 255, 0);
 transform: rotate(0deg);
 opacity: 1.0;
 animation: rot360XYOpa 0.6s;
 animation-timing-function: ease-in-out;
}
@keyframes rot360XYOpa {
	0% { transform: rotate(0deg) scale3d(1, 1, 1); opacity: 1.0;}
	100% {transform: rotate(360deg) scale3d(0.2, 0.2, 0.2);opacity: 0.0;	}
}
.rem2{
 border-radius: 25px;
 border: 5px solid rgba(255, 255, 255, 0);
 transform: rotate(0deg);
 opacity: 1.0;
 animation: rot180YOpa 0.6s;
 animation-timing-function: ease-in-out;
}
@keyframes rot180YOpa {
	0% { transform: rotateY(0deg) scale3d(1, 1, 1); opacity: 1.0;}
	100% {transform: rotateY(180deg) scale3d(0.2, 0.2, 0.2);opacity: 0.0;	}
}
.dis{
	scale3d(0, 0, 0);
	opacity: 1.0;	
}
.tint{
 border-radius: 25px;
 border: 5px solid rgba(255, 255, 255, 0);
 transform: rotate(0deg);
 opacity: 1.0;
 animation: anglSmLftRedBrd 0.5s;
 animation-timing-function: ease-in-out;
}
@keyframes anglSmLftRedBrd {
	0% { transform: rotate(0deg); border: 5px solid rgba(255, 22, 22, 0); }
	50% { transform: rotate(-10deg); border: 5px solid rgba(255, 22, 22, 1); }
	100% { transform: rotate(0deg); border: 5px solid rgba(255, 22, 22, 0); }
}
.slct{
 border-radius: 25px;
 border: 5px solid rgba(255, 255, 255, 0);
 transform: rotate(0deg);
 opacity: 1.0;
 animation: anglSmRgtWtBrd 1.5s;
 animation-timing-function: ease-in-out;
}
@keyframes anglSmRgtWtBrd {
	0% { transform: rotate(0deg); border: 5px solid rgba(255, 255, 255, 0);}
	15% { transform: rotate(10deg); border: 5px solid rgba(255, 255, 255, 1);}
	85% { transform: rotate(1deg); border: 5px solid rgba(255, 255, 255, 1);}	
	100% { transform: rotate(0deg); border: 5px solid rgba(255, 255, 255, 0);}
}
.init{
 transform: rotate(0deg);
 opacity: 1.0;
 transition: all .5s ease;
}
/* ====== TILE ANI =========== END */
#parent{
 width: 500px;
 height: 100px;
 background: blue;
}
/* ======= SETT PAN =========== */
#setPan{
	position: absolute;
	width: 520px;
    z-index: 80;
	box-shadow: 3px 1px 5px #383838;
	background-color: #d9dad9;
	border-radius: 7px;
	border: 2px solid #f0f0f0;
	font-family: verdana, Arial;
	padding: 5px;
}
.sttDv{
	 /* border: 1px solid #cc0000; */
    width: 245px;
    margin: 4px 3px;
    padding: 4px 3px;
    background-color: #f6f6f6;
    border-radius: 5px;
    float: left !important;
}
.sttDvDbl{
	/* border: 1px solid #cc0000; */
    width: 245px;
    margin: 2px 3px;
    padding: 2px 3px;
    background-color: #f6f6f6;
    border-radius: 5px;
    /* float: left !important; */
}
.tInd{
	position: relative;
    width: 28px;
    height: 18px;
    padding: 1px;
    float: right;
    color: #f2f2f2;
    background-color: #767676;
    border-radius: 4px;
    top: -9px;
    right: 1px;
    font-size: 14px;
    text-align: center;
    font-family: Verdana;
}
.sldH2{
	height: 6px;
    padding: 2px 2px;
    background-color: #9f9f9f;
    width: 140px;
    margin: 3px 4px 2px 20px;
}
.diPan{
	box-shadow: 3px 1px 5px #383838;
 background-color: #d8d8d8;
 border-radius: 7px;
 border: 2px solid #f0f0f0;
 padding: 5px;	
}
.hdPan{
	position: absolute;
 background-color: #b0b0b0 !important;
 height: 37px;
	right: 90px !important;
	vertical-align: middle;
 left: 4px;
 border-radius: 5px;
 cursor: all-scroll;
 color: white;
}
.hdPan img{
	margin: 3px 4px 0px 4px;
	/*border: 1px solid #eee;*/
}
.hdPan:hover{
 background-color: #838383 !important;	
}
.chk{
	float: left;
	padding: 4px 3px;
}
.slctH{
	padding: 1px 4px;
	color: #f2f2f2;
 font-size: 15px;
 background-color: #9f9f9f;
 border-radius: 4px;	
}
.logo{
	position: relative;
	width: 90%;
	height: 35px;
	background-color: #888;
	margin: 2px 4px 4px 14px;
	float: left;		
}
.inPT{
	font-family: Verdana;
    font-size: 18px;
    height: 20px;
    color: #333;
    padding: 0px 5px 0px 5px;
    margin: 2px 1px 2px 1px;
    border: 2px solid #7f7f7f;
    border-radius: 5px;
}
.inPT::placeholder{
	font-family: Verdana;
	font-style: italic;
	font-size: 15px;
	color: #2196f3;
}
#frstRec{
	font-size: 12px;
	color: #2196f3;	
}
.fR{
	float: right !important;
}
.fR{
	float: left !important;
}
.copy{
	font-size: 13px;
	color: #fff;
	font-family: Verdana;
	text-align: center;
	padding: 4px;	
}

.slHor {	
width: 175px;
float: left;
margin: 12px 12px 4px 20px;
}
.w200 { width: 200px;}
.w40 { width: 40px !important;}
.w60 { width: 60px;}
.w150 { width: 150px;}
.w170 { width: 170px;}	
.w230 { width: 230px;}
#ttlScr {
    position: absolute;
    top: 60px;
    margin: auto;
    padding: 20px;
    color: red;
    border-radius: 15px;
    border: 7px solid red;
    font-family: Verdana;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    left: -99999px;
    z-index: 650;
    background-color: black;
}