html,body{
			margin:0;
			padding:0;
			height:100%;
			background:white;
		}
		:root {
    --mobilewidth: 452px;/*452px;*/
}
#langbox{
	background: white;
	position:relative;
	display:block;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
}
#langbox h1{
line-height:1.8;
	font-size:32px;
}
#langbox h2{
	font-size:22px;
	line-height:1.8;
}
.terms{
	line-height:1.6;
}
#texterst{
	display:block;
	padding:40px;
	
}
#texterst h1{
	font-size:42px;
	line-height:1.8;
	text-align:center;
}
#texterst p{
	font-size:22px;
	line-height:1.5;
}
.pfooter{
padding:20px;
margin-top:15px;
	backround:red;
	
}
.agecontainer{
	display:flex;
	 justify-content: space-around;
		align-items: center;
}
.agebtn{
	height:40px;
	width:50px;
	background:violet;
	color:white;
	font-weight:bold;
}
div.icon-change-cam-div{
	display:flex;
	position:absolute;
	right:10px;
	top:15%;
	width:42px;
	height:42px;
	border:1px solid black;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.5);
	cursor:pointer;
	z-index:1;
}
#fotocont{
position:relative;
	width:50;
	height:50px;
	font-size:10px;
}
#fotocont p{
	font-size:24px;
}
#chatik{
poition:absolute;
top:0;
left:0;
	width:100px;
	height:100px;
}
.flgame{
	width:50%;
	font-size:18px;
}
img.icon-change-cam{
	
}
#kartinasvg{
	bckground:#4e8b84;
	padding:3px;
	border-radius:2px;
	
}
#mygameoutput{
	width:80%;
	clor:red;
	height:auto;
}
.krestikdiva{
	display:block;
	position:relative;
	text-align:right;
	font-size:2rem;
}
.camsb{
	font-size:0.8rem;
}
.overlay.line{
	background:rgba(0,0,0,0.2);
}
#whosonlineoutput{
display:block;
z-index:9999;
	width:100%;
	background:rgba(0,0,0,0);
	baground: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.25) 100%);
	height:100%;
}

.videoboxdiv{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:block;
	z-index:10000;
	background:lightgreen;
}
#videoBox{
	width:100%;
	max-height:100%;
	position:absolute;
	top:0;
	left:0;
}
.btn-video-box{
	position:absolute;
	bottom:10px;
	right:10px;
	height:35px;
	width:35px;
	padding:5px;
	border-radius:50%;
	display: flex;
	 justify-content: center;
		align-items: center;
		background:rgba(255,255,255,0.2);
}
.btn-call{
	position:absolute;
	right:10px;
	top:10px;
	height:35px;
	width:35px;
	padding:5px;
	color: green;
	border-radius:50%;
	display: flex;
	 justify-content: center;
		align-items: center;
		background:rgba(25,255,20,0.2);
}
.btn-call[disabled]{
	background:silver;
}
.btn-scan{
	position:absolute;
	right:10px;
	top:60px;
	height:35px;
	width:35px;
	padding:5px;
	color: green;
	border-radius:50%;
	display: flex;
	 justify-content: center;
		align-items: center;
		background:rgba(25,255,20,0.2);
		z-index:100;
}
.btn-ban{
	position: absolute;
	bottom:0;
	left:0;
	height:35px;
	width:35px;
	padding:5px;
	color: green;
	border-radius:50%;
	display: flex;
	 justify-content: center;
		align-items: center;
		background:rgba(25,255,20,0.2);
		z-index:100;
}
.btn-ban2{
	position: absolute;
	bottom:0;
	left:50px;
	height:35px;
	width:35px;
	padding:5px;
	color: red;
	border-radius:50%;
	display: flex;
	 justify-content: center;
		align-items: center;
		background:rgba(25,255,20,0.2);
		z-index:100;
}
.btn-sound{
	position:absolute;
	right:10px;
	top:120px;
	height:35px;
	width:35px;
	padding:5px;
	color: green;
	border-radius:50%;
	display: flex;
	 justify-content: center;
		align-items: center;
		background:rgba(25,255,20,0.2);
		z-index:100;
}
.caption{
	color:blue;
}
#whosonlinecontent{
bakground:white;
background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.25) 100%);
                backdrop-filter: blur(10px);
                -webkit-bakdrop-filter: blur(10px);
	width:100%;
	height:85%;
	overflow-y:scroll;
	display:flex;
	position:relative;
	/*align-self:center;
	justify-content: center;*/
	flex-wrap: wrap;
    flex-direction: row;
     justify-content: start;
		align-items: flex-start;
		margin-top:10px;
		border:1px solid rgba(255,255,255,0.18);
		box-shadow: 0 8px 32px 0 rgba(31,38,135,0.15);
}
.dynamicImgHalter{
	wdth:calc(150px / 2);
	hight:calc(150px / 2);
	width:100px;
	height:100px;
	brder: 1px solid red;
	object-fit:cover;
}
.dynamicImgHalter img{
width:100%;
height:100%;
object-fit:cover;
}
.dynamicbox{
	position:relative;
}
.kdiv{
width:35px;
height:35px;
	position:absolute;
	top:20px;
	right:-10px;
	cursor:pointer;
}
div.caption{
	/*overflow-x: scroll;
	width:100%;*/
}
#zaroutput{
	background:#fff1f1;
	max-height:90vh;
	color:#1a1717d9;
}
#fotodiv{
	height:auto;
	display: flex;
	align-self:center;
	justify-content: center;
	margin-top:10px;
}
.krestikdiv{
	display:inline-block;
	position:absolute;
	right:10px;
	top:10px;
}
.krestik-two{
	
}
.loader.hide{
	display:none;
}
#buttondiv{
margin-top:10px;
	display: flex;
	justify-content:flex-end;
}
#fotodiv img{
	height:200px;
	align-self:center;
}
section#zarcont{
	line-height:1.6;
	font-size:1.4rem;
	font-weight:bold;
	margin-top:10px;
	padding-right:100px;
	padding-left:100px;
	padding-top:20px;
}
section#zarcont strong{
	background:#e71212;
	color:#fbaa16;
	font-size:1.5rem;
	line-height:1.8;
	padding:6px;
}
#zarcont button{
	color:orange;
	background:rgba(255,255,255,0.1);
	font-size:1.4rem;
	padding:20px;
	font-weight:bold;
	border-radius:5px;
	margin-top:15px;
	border:4px solid orange;
}
#fotocont{
	ackground:green;
}
#fotocont header{
	height:40px;
	ackground:yellow;
	color:#65e165;
	text-align:center;
	font-size:28px;
	line-height:1.5;
	font-weight:bold;
}
.flgame{
	height: calc(40rem - 40px - 60px);
	width:100%;
	bckground:red;
	 background-image: url("/img/chatikon.png");
				 background-repeat: no-repeat;
				  background-size: cover;  
				  background-position: center center; 
				  display:flex;
}
.flgame p{
	margin:auto;
	font-weight:bold;
	font-size:4.5rem;
	padding:5rem;
	line-height:1.5;
	color:/*#f7eeee*/black;
	background:rgba(250,254,256,0.8);
}
.flgame::after{
	position:absolute;
	font-size:0.5rem;
	color:lightgreen;
	left:0;
	top:0;
	content:"Реклама";
}
.flgame p span{
	color:blue;
}
#payoutoutput{
	background:white;
	color:#312929;
}
#secleader #spinnerP{
	margin-top:1rem;
	margin-bottom:1rem;
	font-size:1.2rem;
	line-height:1.6;
}
#secleader p{
	margin-top:1rem;
	margin-bottom:1rem;
	font-size:1.2rem;
	line-height:1.6;
}
@media screen and (max-width: 452px) and (orientation: portrait){
#mygameoutput,#zaroutput{
	width:98%;
	height:99vh;
	}
	section#zarcont{
		padding:3px;
	}
	section#zarcont h1{
	line-height:1.2;
	font-size:1.2rem;
	}
	section#zarcont p{
	line-height:1.2;
	font-size:1rem;
	}
	section#zarcont strong{
		font-size:1rem;
	}
	#payoutoutput,#premiumoutput2{
			width:98%;
		}
	.flgame p{
		font-size:2.5rem;
		line-height:1.2;
	}
}
		#local video::-webkit-media-controls, video.Vid::-webkit-media-controls,#kartina video::-webkit-media-controls{
		display:none !important;
		}
	p.intro{
		line-height:1.8;
		padding:10px;
		font-size: 22px;
		font-weight:bold;
	}
	form#purchaseForm input[type=submit]{
		height:60px;
		background:rgb(20,23,20);
		color:lightgreen;
		border:1px solid lightgreen;
		font-size:22px;
		pading:10px;
	}
	.settingspanel div.du{
		margin-top:10px;
		margin-bottom:10px;
		border:1px solid blue;
	
		color:green;
		border:1px solid green;
		line-height:1.5;
		padding:5px;
		display:flex;
		justify-content:space-around;
	}
	#coinContainer{
		backgound:red;
		width:50px;
	}
	.some.doh{
		color: brown;
		margin-bottom:10px;
	}
	.some.doh span{
		color:red;
	}
	.some a{
		color:green;
		border:1px solid green;
		line-height:1.5;
		padding:5px;
	}
	label[for=payoutaccountid]{
		color: white;
		font-weight:bold;
	}
	#payoutsub{
		color:black;
		border:1px solid lightgreen;
		eight:50px;
		pdding:30px;
		font-weight:bold;
		font-size:22px;
		line-height:1.8;
	}
	 div.pfo{
		margin-top:20px;
		margin-bottom:20px;
	}
	#mpa{
		text-decoration: underline;
	}
	@media screen and (max-width: var(--mobilewidth)) and (orientation: portrait){
		
	}
	
	#premiumoutput,#premiumoutput2{
		background:black;
		color:whie;
		height:auto;
		
	}
	#premBtn,#premBtn2{
		color:black;
		background:lightgreen;
		font-size:1.3rem;
		font-weight:bold;
	}
	
	@media screen and (max-width: var(--mobilewidth)) and (orientation: portrait){
		#premiumoutput,#premiumoutput2{
width:100%;
oveflow:auto;
			bckground:#327332;
		}
		#premForm p{
			font-size:1rem;
		}
	}
	
	#mediabox{
		width:100%;
		height:99.9%;
		bakground:yellow;
		display:block;
		position:relative;
		overflow:hidden;
	}

	@media screen and (max-width: 1001px) and (orientation: landscape){
	#loginoutput{
		width:50%;
	}
	}
	#navpanel{
		width:100%;
		height:50px;
		background-color:#000000;
        background-image: linear-gradient(315deg, #000000 0%, #7f8c8d 74%);
		display:grid;
		grid-template-columns:1fr 50px;
		align-self:center;
		position:relative;
	}
	.nav{
	jstify-self: center;
	align-self:center;
	padding-left:10px;
	}
	#pushDiv{
		bckground: red;
		margin-right:20px;
		display:flex;
		justify-self: center;
		transform:translateX(-175%);
	align-self:center;
	}
	#pushBtn{
		padding-left:10px;
		padding-right:10px;
		padding-top:10px;
		padding-bottom:10px;
		background:rgba(0,0,0,0);
		color:orange;
		font-weight:bold;
	}
	@media screen and (max-width: var(--mobilewidth)) and (orientation: portrait){
		#pushDiv{
			transform:none;
		}
	}
	#remotecontainer{
		position:relative;
	}
	#claimContainer{
		display:flex;
		position:absolute;
		background:white;
		top:10px;
		right:15px;
		width:25px;
		height:25px;
		border-radius:50%;
		 justify-content: space-around;
		align-items: center;
		cursor:pointer;
		z-index:1;
		opacity:0.5;
		transition: all 1s ease-out;
	}
	#claimContainer:hover{
		opacity:1;
	}
	
	#claimBox{
		color:red;
		font-size:24px;
		font-weight:bold;
	}
	#claimMenu{
		display:none;
		position:absolute;
		top:35px;
		right:0;
		z-index:1;
	}
	#claimMenu.show{
		display:block;
	}
	#claimMenu div{
		background: #73a6c7;
		padding:10px;
		font-size:1.2rem;
		font-weight:bold;
		transition: all 0.5s ease-out;
	}
	#claimMenu div:hover{
		background:silver;
		cursor:pointer;
	}
	#settings{
		bckground:blue;
		width:100%;
		height:100%;
		color:brown;
	}
	#container{
		width:100%;
		height:calc(100% - 50px);
		background-color: #130f40;
background-image: linear-gradient(315deg, #130f40 0%, #000000 74%);
		display:grid;
		grid-template-columns:50% 50%;
		grid-template-rows: 50% 50%;
		}
	div#chatbox{
	position:relative;
		background: black;
		width:100%;
		height:85%;
		max-height:85%;
		border-top-right-radius:10px 10px;
		border-top-left-radius:10px 10px;
		overflow: auto;
	}
	*{box-sizing:border-box;}
	#MainSectionTextArea{
	width:100%;
	
		height: calc(100% - 85%);
		position:realative;
	
		display:block;
		boder:1px solid green;
}
#chatbox6{
	position:relative;
	display:block;
}
section#giftsContainer{
	background:rgba(0,0,6,0.9);
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	height:50%;
	display:block;
}
section#giftsContainer.hidden,section#giftsContainer2.hidden{
	display:none;
}
	#textarea{
		position:relative;
		border-radius:1px;
		padding:0;
		width:100%;
		height: 100%;
		brder:1px solid green;
		display:flex;
		flex-wrap: wrap;
    flex-direction: row;
     justify-content: space-between;
		align-items: center;
		
	}
	.send{
		position:relative;
		top:0;
		right:1px;
		background:rgba(0,0,0,0);
		height:65px;
		width:65px;
		brder:1px solid yellow;
		border-radius:100%;
		margin-right:10px;
		transform:translateY(-2px);	
		order-top-right-radius:10px 10px;
		brder-bottom-right-radius: 10px 10px;
		object-fit:cover;
		
	}
	#txtvalue[disabled],#txtvalue2[disabled]{
		background:lightgray;
	}
	#txtvalue{
		color:red;
		bakground:red;
		width:calc(100% - 190px);
		/*width:90%;*/
		border-radius:1px;
		height:90%;
		transform:translateY(-2px);	
		}
		#giftbox2{
			width:70px;
			height:70px;
			transform:translateY(-2px);	
			transform:translateX(-2px);	
			border:1ps solid yellow;
		}
		#giftbox2 span{
			font-size:52px;
			line-height:1.3;
		}
	textarea{
		 resize: none;
      border: none;
      
      outline: none;
		width:100%;
		color:white;
		line-height:2;
		font-weight:bold;
		background:rgb(44,5,12);
	/*	background-color:#000000;
        background-image: linear-gradient(315deg, #000000 0%, #7f8c8d 74%);
        background-color: #000000;*/
background-image: linear-gradient(147deg, #000000 0%, #434343 74%);
		border-bottom-right-radius:10px 10px;
		border-bottom-left-radius:10px 10px;
		padding-left:10px;
		padding-right:79px;
		padding-top:5px;
		height:96.5%;
	}
	.send img{
		margin:0 auto;
	object-fit:cover;
	background:rgba(0,0,0,0.1);
		width:65px;
		height:65px;
		cursor:pointer;
		border-radius:100%;
		adding-top:5px;
		boder-top-right-radius:10px 10px;
		order-bottom-right-radius: 10px 10px;
	
	}
	
	.yourmsg{
		line-height:2.5;
		border-radius:10px;
		background:rgb(4,15,12);
		margin-top:2px;
		margin-bottom:2px;
		color:white;
		padding-left:50px;
	}
	.yourmsg.he2{
		background:rgb(40,60,24);
	}
	.Vid{
	display:block;
		width:100%;
		
		border-bottom-right-radius:10px 10px;
	border-bottom-left-radius: 10px 10px;	
	}
	#local{
	display:block;
		width:100%;
		transform:scaleX(-1);
		border-bottom-right-radius:10px 10px;
	border-bottom-left-radius: 10px 10px;
		object-fit:contain;
		
	}
	.Vid{
		width:100%;
		height:100%;
		
background-color: #2d3436;
background-image: linear-gradient(315deg, #2d3436 0%, #d3d3d3 74%);
    border-bottom-right-radius:10px 10px;
	border-bottom-left-radius: 10px 10px;
	
	transform:scaleX(-1);
	}
	#local{
		bckground:black;
		width:100%;
		height:100%;
		
	}
::cue(b){
		transform:scaleX(10);
		olor:red;
		direction: rtl;
		writing-mode: vertical-rl;
	}
	video::cue {
		transform:scaleX(-1);
		direction: rtl;
		writing-mode: horizontal-lr;
	}
	#localcontainer{
	
	 background-image: url("/img/webcam2.svg");
	 background-repeat: no-repeat;
	 background-position: center;
	 background-size:contain;
	 position:relative;
	 z-ndex:1111;
	 bckground:red;
	 margin-top:0px;
 }
	.ita{
dsplay:block;
	position:relative;
	color:orange;
	justify-self: center;
	align-self:center;
margin-right:10px;
object-fit:cover;
width:90%;
}
.ita svg{
	
}
#settingspanel{
	display: none;
	position:absolute;
	right:0px;
	top:51px;
	width:50vw;
	bckground:brown;
	z-index:9999;
	color:blue;
	
	
	height: 0;
	border-bottom-right-radius:10px 10px;
	border-bottom-left-radius: 10px 10px;
	ont-size:1.5rem;
	
}
#settingspanel.open{
	display:block;
	z-index:10000;
}
.settingspanel{
	width:50vw;
	background:rgba(220,207,255,0.96);
	line-height:1.2;
	font-size:1.5rem;
	padding:10px;
	color:black;
	border-bottom:1px solid #dfb0b0;
	z-index:1000;
}
.settingspanel:hover{
background:rgb(255,255,255);
}
.setimg{
	width:70%;
	padding-top:8px;
}
.nav b{
	color:white;
}
#controlsContainer{
	width:100%;
	display: flex;
				flex-wrap: wrap;
    flex-direction: row;
   position:relative;
    height:15%;
    bckground:brown;
    justify-content: flex-end;
		align-items: center;
		
}
#controlsContainer button{
	margin-right:1vw;
}
.start {
  font-size: 2vw;
  border-radius: 10px;
  height: 90%;
  width: auto;
  text-align: center;
  color:white;
 /* background:blue;*/
  background: linear-gradient(to right, rgb(182, 244, 146), rgb(51, 139, 147));
  padding-left:4vw;
  padding-right:4vw;
}
.stop {
  font-size: 2vw;
  border-radius: 10px;
  background: linear-gradient(#c50000,#a10000 25%,#640000);
  height: 90%;
  width: auto;
  text-align: center;
  color:white;
  font-weight:bold;
  padding-left:4vw;
  padding-right:4vw;
}
.stop:hover {
  /*background: linear-gradient(#c50000,#a10000 10%,#640000);*/
}
.next {
  font-size: 2vw;
  border-radius: 10px;
 color:white;
  height: 90%;
  width: auto;
  text-align: center;
  padding-left:4vw;
  padding-right:4vw;
  background:silver;
}
.next:not([disabled]){
	background:blue;
	color:white;
}
.start:disabled{
	background:silver;
}
section#mobileChat{
	
	display:none;
	
}

	#remote.fill, #local.fill{
		
		obect-fit:fill;
	}
	#remote.paravilno, #local.pravilno{
		width:100%;
		height:100%;
	}
#somespinner{
	color:white;
	position:absolute;
	left:0.2em;
	top:8rem;
	display:none;
	width:100%;
	height:30px;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	
}
 span.duka{
 coor:yellow;
 padding-left:20px;
 margin-left:20px;
	trnsform:translate(-1000px, 190px);
}
#somespinner.show{
	display:flex;
}
#somehello{
	position:absolute;
	left:1em;
	top:5rem;
	color:white;
	display:none;
}
#somehello.see{
	display:block;
}
#sectionChat{
		display:block;
		position:relative;
	}
	
	
	
	#znakChat2{
				background:rgba(0,0,0,0.0);
				height:40px;
				display:block;
				position:absolute;
				left:calc(50% - 35px - 40px);
				top:-30px;
			}
			#znakChat{
				position:absolute;
				display:block;
				top:-24px;
			}
	.typing.hidden{
	display:none;
}
#znakPrint2{
	position:relative;
}
.typing {
  width: 70px;
  height: 30px;
  position: relative;
  padding: 10px;
  margin-left: 5px;
  display:flex;
   flex-wrap: wrap;
    flex-direction: row;
     justify-content: space-between;
		align-items: center;
  background: rgba(0,0,0,0.1);
  border-radius: 20px;
}

.typing::after{
	ackground:rgba(0,0,0,0.9);
	tansform: translate(70px, -20px);
	position:absolute;
	color:orange;
	font-weight:bold;
	font-size:16px;
	content:"Печатает";
	right:-79px;
}
 
.typing__dot {
  
  width: 8px;
  height: 8px;
  margin: 0 4px;
 
  background:/* #8d8c91*/ orange;
  border-radius: 50%;
  opacity: 0;
  animation: loadingFade 1s infinite;
 
}

.typing__dot:nth-child(1) {
  animation-delay: 0s;
}

.typing__dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing__dot:nth-child(3) {
  animation-delay: 0.4s;
}

	
@keyframes loadingFade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}
	
	
	
	
	
	
	
	#mobileloader{
	display:none;
	}
	
	/*loader*/
	
	
	.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  left:0;
  display: inline-block;
  position: relative;
  border: 3px solid;
  border-color: #FFF #FFF transparent transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader::after,
.loader::before {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid;
  border-color: transparent transparent #FF3D00 #FF3D00;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-sizing: border-box;
  animation: rotationBack 0.5s linear infinite;
  transform-origin: center center;
}
.loader::before {
  width: 32px;
  height: 32px;
  border-color: #FFF #FFF transparent transparent;
  animation: rotation 1.5s linear infinite;
}
    
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
} 
/*
.loader { font-size: 10px; width: 1em; height: 1em; border-radius: 50%; position: relative; text-indent: -9999em; animation: mulShdSpin 1.1s infinite ease; transform: translateZ(0); } @Keyframes mulShdSpin { 0%, 100% { box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.5), -1.8em -1.8em 0 0em rgba(255,255,255, 0.7); } 12.5% { box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.5); } 25% { box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.5), 1.8em -1.8em 0 0em rgba(255,255,255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2); } 37.5% { box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.5), 2.5em 0em 0 0em rgba(255,255,255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2); } 50% { box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.5), 1.75em 1.75em 0 0em rgba(255,255,255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2); } 62.5% { box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.5), 0em 2.5em 0 0em rgba(255,255,255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2); } 75% { box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.5), -1.8em 1.8em 0 0em rgba(255,255,255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255,255,255, 0.2); } 87.5% { box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.5), -2.6em 0em 0 0em rgba(255,255,255, 0.7), -1.8em -1.8em 0 0em #ffffff; } }
*/    /* end loader*/
	
	#duka2{
		display:none;
	}
	
	#foot,#chatruleslink{
	display:none;
		
	}
	
	#foot2, #chatruleslink2{
	display:inline-block;
		position:absolute;
		bckground:green;
		color:rgb(16,66,88);
		left:8px;
		bottom:4px;
		
}

#giftsContainer header,#giftsContainer2 header{
	ext-align:center;
	display:flex;
	flex-wrap: wrap;
    flex-direction: row;
     justify-content: space-between;
		align-items: center;
	line-height:1.5;
	font-size:1rem;
 font-weight:bold;	
 color:white;
 
}
#giftsContainer header span,#giftsContainer2 header span{
	margin-left:17px;
}
#giftsContainer header a,#giftsContainer2 header a{
	margin-right:17px;
}

.purchaseSpan{

	color:green;
}
#giftsDiv,#giftsDiv2{
margin-top:5px;
margin-left:5px;
margin-right:5px;
padding:5px;
	display:flex;
	flex-wrap: wrap;
    flex-direction: row;
     justify-content: space-between;
		align-items: center;
		
}

.flexgiftsitem{
	display:flex;
	 flex-direction: column;
     justify-content: space-between;
	align-items: center;
		position:relative;
}

.flexgiftsitem div{

	color:white;
	line-height:1.5;
	font-weight:bold;
	padding:3px;
	
}
.heart {

  display: inline-block;
  wdth: 50px;
  ackground:yellow;
  font-size: 1.6rem;
  
  /*
  aspect-ratio: 1;
  border-image: radial-gradient(red 69%, #0000 70%) 84.5%/50%;
  clip-path: polygon(-41% 0, 50% 91%, 141% 0);
  */ 
  transform:translateY(0.5rem);
  cursor:pointer;
}

div.heartcount{
	color:white;
	font-size:12px;
	font-weight:bold;
	height:20px;
	bckground:yellow;
	width:100%;
	position:absolute;
	left:0%;
	top:74%;
	text-align:center;
	transform:translateY(0.5rem);
}
@media screen and (max-width: 1001px) and (orientation: landscape){
		#txtvalue{
			height:90%;
			transform:translateY(-0.4rem);
		}
		
		.heart {
  transform:translateY(0rem);
 
}

div.heartcount{
	
	transform:translateY(0rem);
}
	[data-send=one]{
		transform:translateY(-0.5rem);
		
		
		
	}	
		
	}
/*@media screen and (max-width: 452px) and (orientation: portrait){*/
@media screen and (max-width: 452px) and (orientation: portrait){
#foot,#chatruleslink{
	display:flex;
		position:absolute;
		ackground:green;
		color:rgb(16,66,88);
		left:8px;
		bottom:4px;
		
}
#foot2,#chatruleslink2{
	display:none;
}
	#somespinner,#somehello{
	
		display:none;
	}
	#container{
		display:block;
		height:calc(100% - 50px - 7.8%);
		bckground:pink;
		eight:84%;
	}
	#sectionChat{
		display:none;
	}
	#localcontainer{
		position:absolute;
		top:50px;
		left:0;
		width:30%;
		height:100px;
		order:1px solid red;
		border:none;
		margin-top:10px;4
		border-radius:5px;
	}
	#local{
		border-radius:5px;
	}
	#settingspanel,.settingspanel{
		width:100%;
		
	}
	
	#remotecontainer{
		height:100%;
		position:relative;
		ackground:red;
		border-radius:1px;
		display:flex;
	}
	/*
	#claimContainer{
		display:inline-block;
		position:absolute;
		background:yellow;
		top:10px;
		right:15px;
	}
	
	#claimBox{
		color:red;
		fnt-size:20px;
	}
	*/ 
	#duka2{
		position:absolute;
		width:100%;
		color:white;
		top:55%;
		left:3%;
		display:none;
		
	}
	/*
	#duka2.show{
		display:block;
	}
	*/ 
	#mobileloader{
		position:absolute;
		top:45%;
		left:45%;
		display:none;
	}
	#mobileloader.active{
		display:block;
		z-index:800;
	}
	.Vid{
		height:100%;
	
		width:100%;
		border-radius:1px;
	}
	#local,.Vid{
		object-fit:cover;
	}
	
	#controlsContainer{
	height:8.5%;
	background:black;
	position:relative;
	display:flex;
	}
	#controlsContainer button{
		font-size: 4vw;
		padding-left:8vw;
		padding-right:8vw;
		margin-left: 1vw;
		z-index:10;
	}
	.setimg{
		width:50%;
		margin-top:4px;
		
	}
	section#mobileChat{
		display:block;
		position:absolute;
		bottom:0px;
		left:0;
		width:100%;
		height:60%;
		ackground:orange;
		brder:1px solid green;
		z-inex:1;
		
	}
	#mobileChat.hide{
		height:0%;
	
	}
	#hidechat{
		position:absolute;
		ackground:red;
		width:30px;
		height:30px;
		left:10px;/*calc(50% - 15px);*/
		mrgin-bottom:20px;
		top:-30px;
		object-fit:cover;
		z-inex:9999;
	}
	.chaticon{
	width:100%;
	height:100%;
}

	#giftbox{
		width:65px;
		height:65px;
		brder:1px solid yellow;
		border-radius:100%;
		background:rgba(0,0,0,0.2);
	}
	#giftbox span{
		width:65px;
		height:65px;
		object-fit:cover;
		font-size:52px;
	}
#sectionTextArea{
	width:100%;
		height: 25%;
		position:absolute;
		bottom:0;
		left:0;
		display:block;
		brder:1px solid green;
}
	#textarea2{
			width:100%;
		height: 100%;/*calc(100% - 85%);*/

		color:red;
		order:1px solid green;
		display:flex;
		flex-wrap: wrap;
    flex-direction: row;
     justify-content: space-between;
		align-items: center;
		position:relative;
		ottom:0%;
		eft:0;
	
	}
	#textarea2.hide{
		display:none;
	}
	#txtvalue2{
		width: calc(100% - 70px - 70px - 36px);
		height:85%;
		bttom:0;
		border-radius:1px;
		boder:1px solid silver;
		background:rgba(0,0,0,0.4);
		padding-left:15px;
		margin-left:10px;
		color:green;
		font-weight:bold;
	}
	
	#chat4{
		display:block;
		overflow:auto;
		bakground:green;
		height:95%;
		in-height:60%;
		order:1px solid brown;
		position:relative;
	}
	#chatbox2{
		bckground:red; 
		width:100%;
		height:80%;
		overflow:scroll;
		white-space: pre-line;
	word-wrap: break-word;
	overflow-wrap:break-word;
	position:relative;
	}
	.yourmsg2{
		background:rgba(255,253,255, 0.6);
		color:black;
		line-height:1.5;
		padding:4px;
		
		padding-left:30px;
		margin:2px auto;
		width:90%;
		border-radius:10px;
	}
	.yourmsg2.he{
		
		background:rgba(25,255,25, 0.6);
		color:black;
		
	}
	.msg-publish{
		background:rgba(25,25,25, 0.4);
		color:white;
		font-weight:bold;
		line-height:1.5;
		padding:4px;
		
		padding-left:30px;
		margin:2px auto;
		width:90%;
		border-radius:10px;
		
	}
	.yourmsg{
		background:rgba(255,25,25, 0.6);
		color:black;
		padding:4px;
		
		padding-left:30px;
		margin:2px auto;
		width:90%;
		border-radius:10px;
	}
	
	
	section#giftsContainer2{
	background:rgba(0,0,6,0.9);
	position:absolute;
	top:30%;
	left:0;
	width:100%;
	height:50%;
	display:block;
}
div.heartcount{
	color:white;
	font-size:12px;
	font-weight:bold;
	height:20px;
	width:100%;
	bckground:yellow;
	position:absolute;
	left:0%;
	top:72%;
	text-align:center;
}
}

@media screen and (max-width: 321px) and (orientation: portrait){
html{
}

#container{
		height:calc(100% - 36px - 15%);
	}
	#settingspanel{
		eight:calc(100% - 36px - 15%);
		height:70vh;
	overflow:auto;
	
	}
	#nextbtn.next,#startbtn.start,#startbtn.stop{
		font-size:1.1rem;
		clor:red;
	}
#controlsContainer{
height:15%;
}
textarea{
	background:red;
	color:green;
}
#sectionTextArea{
	height:30%;
}
#txtvalue2{
		width: calc(100% - 50px - 50px - 36px);
		}
.send, .send img{
	width:50px;
	height:50px;
}
#giftbox{
	width:50px;
	height:50px;
}
#giftbox span{
	font-size:40px;
}

section#giftsContainer2{

	top:25%;
	
}



#giftsContainer header,#giftsContainer2 header{
	line-height:1;
	font-size:0.8rem;
}
#giftsDiv,#giftsDiv2{
margin-top:2px;
margin-left:2px;
margin-right:2px;
padding:2px;
	
		
}

.flexgiftsitem{
}
.flexgiftsitem {
	
	
	
}
.heart{
position:absolute;
  width:20px;
  height:20px;
  ackground:orange;
  font-size:1.7rem;
  
  left:calc(50% - 20px);
  top:12%;
  
  
}

div.bname, div.heartcount{
trnsform:translate(0,0px);
coor:red;
position:absolute;
top:30px;
	left:0;
}
}

#purchaseoutput,purchaseoutput2{
	width:50%;
}
#purchaseoutput form#purchaseForm{
	background:white;
	color:black;
	padding:10px;
}
#purchaseoutput form#purchaseForm input[type=submit]{
	height:auto;
	padding-top:15px;
	padding-bottom:15px;
	background:#431728;
}
input#t1,input#t2,input#t3{
	width:initial;
	height:initial;
	transform:translate(0,2px);
}

input#purchaseInput{
	font-size:1.9rem;
	font-weight:bold;
	margin-top:60px;
		margin-bottom:6px;
}

.heartbx label{
	color:white;
	bckground:green;
}
label.mechecked{
	color:lightgreen;
}
#heartswrapper{
	dsplay:grid;
	grid-template-columns: 30% 30% 30%;
width:100%;
}

.heartbx{
dsplay:inline-block;
	display:flex;
	flex-wrap: wrap;
    flex-direction: row;
     justify-content: space-between;
		align-items: center;
		justify-items:center;
		margin-top:6px;
		margin-bottom:6px;
}


@media screen and (max-width: 452px ) and (orientation: portrait){
#purchaseoutput,#purchaseoutput2{
	width:98%;
	/*height:90vh;*/
}
#purchaseoutput form input[type=submit]{
	width:98%;
	height:auto;
	padding-top:10px;
	padding-bottom:10px;
}
	#settingspanel{
	height:70vh;
	overflow:auto;
	}
}


@media screen and (max-width: 452px) and (orientation: portrait){}
output#ozenite{
	width:25%;
	background: white;
	color:black;
	padding:50px;
}
output#ozenite h1{
	text-align:center;
	line-height:1.5;
	margin-top:5px;
	margin-bottom:5px;
}
output#ozenite p{
	margin-top:5px;
	margin-bottom:5px;
	font-size:18px;
	padding:20px;
	text-align:center;
}
div#ozeniteBtn{
display:flex;
flex-wrap: wrap;
    flex-direction: row;
    
		align-items: center;
	
		justify-content: center;
	border-radius: 6px;
	background:#40c540;
	color:rgb(250,255,230);
	font-weight:bold;
	text-align:center;
	font-size:18px;
	height:60px;
vertical-align:20px;
letter-spacing:2px;
}
div#ozeniteBtn div{
adding-top:20px;
	ertical-align:20px;
	ine-height:1.5;
	self-align:center;
}
p.zwezda span{
	margin-left:5px;
	margin-right:5px;
}
span.ozenka{
	color:orange;
	border:1px solid orange;
	line-height:1.5;
	padding:5px;
	background:#162255;
}
#mydialog{
	background:white;
	transform: translate(70%, 100%);
	padding:5px;
}

form menu button[value=cancel]{
	color: white;
	height: 49px;
	background:#b72d2d;
	width: 70px;
	font-weight:bold;
	padding:10px;
	border:2px solid white;
}
menu{
	background:#a2e1c8;
	display:flex;
	align-items: center;
  justify-content: space-around;
  padding:20px;
}
form menu button[value=confirm]{
	background: #3c2b4f;
	height: 49px;
	color:white;
	font-weight: bold;
	padding: 10px;
	margin-left:100px;
	border:2px solid white;
	width:70px;
}
#mydialog #inbox{
	background: #a2e1c8;
	color:black;
	padding:20px;
}
::backdrop {
  background-image: linear-gradient(
    45deg,
    magenta,
    rebeccapurple,
    dodgerblue,
    green
  );
  opacity: 0.75;
}
@media screen and (max-width: 452px) and (orientation: portrait){
output#bannedoutput{
		width:98%;
	}
	
#confirmageoutput{
	width:99%;
}
	output#ozenite{
	width:98%;
	}
	output#ozenite p{
		padding:10px;
	}
	div#playContainer{
	background:rgba(0,0,0,0);
	border-radius:1px;
	width:160px;
	height:60px;
	position:absolute;
	top:11.8%;
	right:100px;
	z-index:1;
	display:flex;
	boder:2px solid red;
}
#mydialog{
font-size:1.2rem;
width:100vw;
	transform:translate(0px,80%);
	margin:0 auto;
}
}
video#kartina{
	boder:1px solid yellow;
	width:100%;
	height:100%;
	psition:absolute;
	op:2%;
	eft:70%;
	display:block;
	z-idex:300;
	object-fit:cover;
	brder-radius:50%;
	border:1px solid transparent;
	overflow:hidden;
	
}
#kartisvg{
width:50%;
position:absolute;
	background:red;
	transform: translateX(-21px);
	tranform: translateY(-21px);
}
video#kartina poster{
	objet-fit:cover;
	wdth:60px;
	hight:60px;
	overflow:hidden;
}

div#playContainer{
	background:rgba(0,0,0,0);
	brder:1px solid green;
	border-radius:1px;
	width:100px;
	height:100px;
	position:absolute;
	top:12.8%;
	right:7%;
	z-index:1;
	display:flex;
}

 div#playContainer:hover::after{
position:absolute;
left:-100px;
top:60px;
letter-spacing:1px;
content:"Трансляция";
color: orange;
width:50px;	
}
div#playContainer.eng:hover::after{
	content:"Translation";
}
div#playContainer.zh:hover::after{
	content:"溪流";
}
div#playContainer.id:hover::after{
	content:"sungai kecil";
}
div#playContainer svg{
position:absolute;
top:25%;
left:25%;
	width:50%;
	height:50%;
	fill: rgba(167,67,12,0.2);
	z-index:1;
}
div#playContainer #kresti{
isplay:flex;
align-items: center;
  justify-content: center;
position:absolute;
top:25%;
left:30%;
width:40px;
height:40px;
border-radius:50%;
border:2px solid rgba(34,23,44,0.2);
	ackground:yellow;
	cursor:pointer;
	display:none;
	z-index:1;
}
div#playContainer #kresti.show{
	display:flex;
	z-index:999;
}
div#playContainer #kresti #kres{
	font-size:16px;
}
div#playContainer svg:hover{
fill:rgba(34,23,44,0.6);
cursor:pointer;
z-index:1;
}
section#recordSection{
	display:flex;
	position:absolute;
	top:30%;
	right:5.4%;
	font-size:35px;
}


output#bannedoutput p{
	line-height:1.2;
	margin-top:5px;
	margin-bottom:5px;
	text-align:center;
	padding:6px;
	font-size:1.3rem;
}
output#bannedoutput form div.bandiv{
display:flex;
	align-items: center;
  justify-content: center;
}
output#bannedoutput form input[type=submit]{
	width:initial;
	margin-top:8px;
	margin-bottom:8px;
	font-size:1rem;
	background:lightgreen;
color:rgb(20,20,23);
font-weight:bold;
}

@media screen and (max-width: var(--mobilewidth)) and (orientation: portrait){
	output#bannedoutput{
		width:98%;
	}
}

.btcp{
	margin-top:20px;
	font-size:1.4rem;
}
.btcpresent{
	color:yellow;
}
.btcbtn{
	margin-top:20px;
	width:20%;
	height:60px;
	border-radius:5px;
	display:flex;
	background:pink;/*rgba(0,0,0,0);*/
	align-items: center;
  justify-content: center;
  font-weight:bold;
  font-size:1,4rem;
}

.btcbtn.puls{
	 animation-name: puls;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

@keyframes puls {
    from {
        background: green;
    }
    to {
        background: lightgreen;
    }
}


.btcsvg{
	height:60px;
	width:60px;
	bakground:red;
	padding:10px;
	fill:rgb(23,12,7);
}
.btckup{
color:rgb(23,12,7);
line-height:1.2;
bckground:brown;
padding:10px;
height:60px;
font-size:1.4rem;
font-weight:bold;
transform:translateY(5px);
}
.btcspan, .btca,#copybtn{
	border:2px solid yellow;
	line-height:2;
	font-size:1.2rem;
	font-weight:bold;
	margin-top:40px;
	padding:10px;
}

@media screen and (max-width: var(--mobilewidth)) and (orientation: portrait){
	.btcbtn{
		width:100%;
	}
}


#confirmageoutput{
	font-size:1rem;
	line-height:1.5;
	width:45%;
}
#confirmageoutput form{
	margin-top:10px;
	margin-bottom:10px;
}
#confirmageoutput form b{
	color:blue;
}
[name="contin"],[name=bday]{
	margin-top:15px;
	margin-bottom:15px;
	padding:5px;
	font-size:1.2rem;
	line-height:1.5;
	color:black;
	height:initial;
	background:innitial;
}
#leavbtn{
	margin-top:25px;
}
@media screen and (max-width: var(--mobilewidth)) and (orientation: portrait){
#confirmageoutput{
		width:100%;
	}
}


#zaroutput p{

}