/* #FCE7F3 #FBCCE7 #F9A8D5 #9E164E #500724 */
html,body { margin:0; padding:0; height: 100%; font-family:verdana; font-size: 13pt; background-color: #FCE7F3; color: #500724; border-color: #500724; }
html, body { height: 100%; overflow: hidden; }
#main { padding:10px; }
input, select, textarea, button { font-size: 13pt; color: #500724; background-color: #FCE7F3; border-color: #500724; }
a, a:visited { color: green; text-decoration: none; } a:hover { cursor: pointer; }

#loading {
	position: fixed; z-index:24; top: 0px; left: 0px; width:100%; height:100%; background-color: #FCE7F3;
	font-size: 30px; text-align: center;
}
#loading div { margin: 30px; }
#loading .title { font-size: 40px; font-weight: bold; }

#localPicture { width: 200px; border-radius: 10px; border: 1px solid white; }
#localPictureExtra { width: 100%; height: 0px; position: fixed; left: 0; z-index: 24; margin: 0 !important; padding: 0; align-content: center; }
#localPictureExtra2 { display: none; width: 0px; height: 75%; border: 5px dotted red; border-radius: 100px; margin: auto !important; padding: 0; }
#overview { position: fixed; z-index:23; top: 0px; left: 0px; width:100%; height:100%; background-color: #FCE7F3; }

#textbox {
	display: inline-block;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	border: 1px solid;
	padding: 2px;
	resize: none;
	white-space: pre-line;
	width:320px; height:100px;
	font-family:verdana;
}
input:focus, select:focus, textarea:focus, button:focus {
    outline: none !important;
    border:1px solid #9E164E;
    box-shadow: 0 0 2px #500724;
}
#text { float:right; width: 400px; background-color: #FBCCE7; border-radius: 10px; }
#messages { display: inline-block; height: calc(100vh - 210px); width:100%; overflow-y: scroll; overflow-x: hidden; margin: 10px 0; padding: 0; color: #500724; }
#sendmsg { float:right; display:block; margin:0 0 0 2px; padding:10; border: 1px solid; border-radius: 5px; background-color: #FBCCE7; font-size: 20px; height: 78px; line-height: 78px; text-align: center; cursor: pointer; }
#send .sendmsgDeactive { background-color: #CCCCCC; cursor: auto; }
#send .disabled { background-color: #CCCCCC; }

#texthead { height:30px; background-color:#F9A8D5; padding: 10px; text-align: right; border-top-left-radius: 10px; border-top-right-radius: 10px; color: #FCE7F3; }
#lang {
	position: relative; top: 2px;
	width: 30px; height: 26px; border-radius: 30px; border:0; background:none; font-size: 9pt;
	margin:0; padding:0; text-align: center;
	-webkit-appearance: none; -moz-appearance: none;
}
#lang::-ms-expand { display: none; }
#lang:focus {  border:0; background:none; box-shadow: none; }
#send { height:100px; padding: 10px; background-color:#F9A8D5; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }

#controls { position: fixed; z-index:23; }
.cnocall { top: 18px; right: 188px; /*left: calc(100vw - 448px);*/ }
.ciscall { top: 19px; right: 20px; /*left: calc(100vw - 280px);*/ }
#controls a, #controls span {
	margin: 0; padding: 0; width: 30px; height: 30px; border-radius: 30px;
	text-align: center; display: inline-block; background-color: #CCCCCC; border: 1px solid #9E164E;
}
#controls span { background-color: #FBCCE7; }
#controls a img { width: 60%; height: 60%; position: relative; top: 50%; transform: translateY(-50%); }
#controls .active { background-color: #FCE7F3; }

#activateSexAge {
	display: block; position: fixed; z-index:23; top: 100px; left: calc(100vw - 342px);
	background-color: #FBCCE7; border: 1px solid #9E164E; padding: 10px 0; font-size: 11pt;
	border-radius: 5px; width: 150px; height: 57px; text-align: center; font-weight: bold; color: black;
}
#activateSexAge span { display:block; }
#rndstartlink {
	display: block; position: fixed; z-index:23; top: 130px; left: 17px;
	background-color: #FBCCE7; border: 1px solid #9E164E; padding: 13px 0; font-size: 12pt;
	border-radius: 5px; width: 353px; height: 20px; text-align: center; font-weight: bold; color: black;
}

#video { background-color: #F9A8D5; height: calc(100vh - 20px); width: calc(100vw - 440px); border-radius: 10px; }
#video iframe { width:100%; height:100%; }
.bigVideo { width:100%; height:100%; background-color: transparent !important; border-radius: 10px; }
.smallVideo { position: fixed; z-index:21; top:35px; left:calc(100vw - 660px); width:140px; padding: 0 30px; border: 1px solid white; background-color: #FBCCE7 !important; border-radius: 5px; }
.widescreen { width:200px; padding: 32px 0 0 0; }
#persondata { position: fixed; z-index:22; text-align: left; top:35px; left:30px; border: 1px solid white; background-color: #FBCCE795 !important; border-radius: 5px; padding: 5px 7px; font-size: 15pt; }
#volume { position: fixed; z-index:22; bottom: 30px; left:30px; }
#volume img { float:left; width: 20px; height: 20px; margin: 0 10px 0 5px; }
#volume a { margin: 0; padding: 0; width: 30px; height: 30px; border-radius: 30px; text-align: center; display: inline-block; background-color: #F9A8D5; border: 1px solid #9E164E; }
#volume .active { background-color: #FCE7F3; }
#volumen { font-size: 12pt; }
#volumes { width: 90px; }
#calltime { text-align: center; position: fixed; z-index:22; top:35px; left:calc(100vw - 660px); width:190px; border: 1px solid white; background-color: #FBCCE795 !important; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 5px; font-weight: bold; }
#calltimepercentage { display: block; visibility: hidden; position: fixed; z-index:22; text-align: right; top:160px; left:calc(100vw - 660px); width:190px; font-weight: bold; font-size: 12pt; color: white; }

#elog { position: fixed; z-index:23; font-size: 10pt; }
/*#sPingS { text-shadow: 1px 1px #FBCCE7, -1px -1px #FBCCE7; }*/
#signal { display: inline-block; }
#signals { height: 7px; list-style: none; overflow: hidden; margin:0; padding:0; }
#signals li { display: inline-block; width: 2px; float: left; height: 100%; margin-right: 1px; }
#signals li.signal4 { padding-top: 0px; }
#signals li.signal3 { padding-top: 2px; }
#signals li.signal2 { padding-top: 4px; }
#signals li.signal1 { padding-top: 6px; }
#signals li div { height: 100%; background: blue; }

.lnocall { top: 185px; left: calc(100vw - 172px); }
.liscall { top: 22px; left: calc(100vw - 395px); }

/*.message { display:block; width:100%; }*/
.sent, .received, #messages .log { padding:7px; margin:3px 10px; max-width: 350px; border-radius: 10px; }
.sent { clear: both; float: right; background-color: #FCE7F395; color: #500724; border: 1px solid #500724; }
.received { clear: both; float: left; background-color: #FCE7F395; color: #9E164E; border: 1px solid #9E164E; }
.sent small { font-size: 12px; color: #9E164E; }
.received small { font-size: 12px; color: #500724; }
#messages .stt { color: blue; }
#messages .log { clear: both; float: left; font-size: 12px; background-color: #FCE7F395; color: #9E164E; border: 1px solid #9E164E; opacity:0.5; }
.msglink { margin: 0; padding: 3px; background-color: #FFFFFF95; border-radius: 2px; border: 1px solid #000000; cursor: pointer; }
.msglink2 { color: green !important; }
.msglink, .msglink img, .msglink video { max-width: 200px; }

#wasistatus { font-size: 50px; text-align: center; margin-top:20vw; }
#wasistatus a { background-color: initial; background-image: linear-gradient(-180deg, #FCE7F3, #FBCCE7); padding:25px; border-radius: 10px; color: #500724; border: 2px solid #F9A8D5; box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px; }
#wasistatus a:hover { background-image: linear-gradient(-180deg, #FBCCE7, #FCE7F3); box-shadow: rgba(253, 76, 0, 0.5) 0 3px 8px; }

#wait, #isRecording { position: fixed; z-index: 21; top: 70px; left: 30px; height: 100px; display: none; text-align: left; font-size: 50px; }
#remoteVideo { background-repeat: no-repeat; background-size: contain; background-position: center center; }
/*#remoteVideoPic { position: fixed; z-index: 1; top: 130px; left: 56px; border-radius: 5px; height: calc(100vh - 220px); max-height: 300px; box-shadow: 0 0 0 2px #F9A8D5; }*/
#remoteVideoPic { visibility: hidden; }
#adforrandsearchwait { position: fixed; z-index: 25; top: 150px; left: 32px; border-radius: 5px; width: 250px; height: 250px; padding:0; }
.blink_me { animation: blinker 1s linear infinite; } @keyframes blinker { 50% { opacity: 0.25; } }
.blink_soft { animation: blinker2 1s linear infinite; } @keyframes blinker2 { 50% { opacity: 0.7; } }
#error { position: fixed; z-index: 21; top: 0px; left: 55px; width: 300px; display: none; text-align: left; padding-top: 120px; font-size: 20px; color: red; }
#error2 { display: none; color: red; }

#header { height: 170px; margin: 15px; }
#header .title { font-size: 40px; font-weight: bold; margin-bottom: 5px; }
#usersOnlineStates { padding: 0 0 0 20px; font-weight: bold; }
#userlist { text-align: center; padding: 10px; font-size: 18px; height: calc(100vh - 240px); overflow-x: auto; }
#userlist a, #userlist a:visited { display: block; float:left; width: 160px; height: 160px; padding:0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; color: #500724; margin: 10px; box-shadow: none; }
#userlist a:hover { box-shadow: 0 0 0 2px #9E164E; }
#userlist img { width: 100%; object-fit: contain; max-width: 100%; max-height: 100%; position: relative; margin-top: -160px; }
#userlist div { z-index:2; position:relative; width: 160px; height: 30px; background-color: #ffffff95; text-align: center; vertical-align: center; padding: 10px 0 0 0; margin: 120px 0 0 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
#userlist .sexX { background-color: #ededed; border: 2px solid #d3d3d3; }
#userlist .sexM { background-color: #99ccff; border: 2px solid #9999ff; }
#userlist .sexF { background-color: #FBCCE7; border: 2px solid #F9A8D5; }
#noUsersOnline { display: block; padding-top: 10px; font-size: 17pt; font-weight: bold; }
.usrisme { z-index:1; position:fixed; float: none; top:5px; right: 5px; margin:0; }
#homeVideo { max-width: 100%; max-height: 100%; position: relative; margin-top: -160px; }

#inccalls { position: fixed; z-index:23; bottom: 20px; left: 20px; width:350px; }
.inccall {
	width:100%; height: 100px;
	background-image: linear-gradient(-180deg, #FBCCE7, #FCE7F3); box-shadow: rgba(253, 76, 0, 0.5) 0 1px 2px;
	border-radius: 5px; border: 2px solid #F9A8D5; padding: 0; margin: 5px 0;
}
.inccall div { width:100%; height: 100%; margin:0; padding: 0; }
#inccalls img { height: 100%; max-width: 100%; max-height: 100%; border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
#inccalls span { display:block; position: fixed; z-index: 24; background-color: #FBCCE795; padding: 0 2px; margin: 2px 0 0 2px; font-size: 90%; }

.endcall {
	position: fixed; z-index: 22; text-align: center; top:calc(100vh - 115px); left:calc(100vw - 535px);
	width: 75px; height: 75px; border-radius: 75px; line-height: 75px;
	margin:0; padding: 0; background-color: #ff3333; border: 5px solid #ff9999;
	box-shadow: 0 0 0 2px #9E164E;
}
.startcall, .inccancel {
	float: right; line-height: 60px;
	width: 60px; height: 60px; border-radius: 60px; text-align: center;
	margin:15px 20px 0 0; padding: 0; font-size: 28pt; background-color: #ff3333; border: 5px solid #ff9999;
	box-shadow: 0 0 0 2px #9E164E;
}
.endcall img, .startcall img, .inccancel img { width: 75%; height: 75%; position: relative; top: 50%; transform: translateY(-50%); }
.startcall { background-color: #33ff33; border: 5px solid #99ff99; }
.inccancel {  }
.endcall:hover, .startcall:hover, .inccancel:hover { box-shadow: 0 0 0 3px #500724; }
#incallnextrnd { top:calc(100vh - 215px); background-color: #FBCCE7; }

.blackscreen { position: fixed; z-index:24; top: 0px; left: 0px; width:100%; height:100%; background-color: #FCE7F3; }
#sleep { position: fixed; z-index:24; top: 0px; left: 0px; width:100%; height:100%; background-color: black; opacity: 0.50; cursor: url('img/cursor.png'), auto; }

#ctrlToggle, #ctrlSettingsText {
	position: absolute; z-index:24; top: 50%; left: 50%;
	width:250px; margin: -50px 0 0 -125px; text-align: center;
	background-color: white;  border: 2px solid black; border-radius: 5px; padding: 15px 0;
}
#ctrlSettings { position: fixed; z-index:25; top: 0px; left: 0px; width:100%; height:100%; background-color: #ffffff90; }
#ctrlSettingsText { z-index:26; top: 40%; }
#ctrlSettingsText .title { font-weight: bold; margin-bottom: 10px; }
#ctrlSettingsText .text a { display:block; margin: 5px 20px; padding: 5px; background-color: #FCE7F3;  border: 2px solid #FBCCE7; font-size: 11pt; }
#ctrlSettingsText .text .active { font-weight: bold; }

#notextbox { position: fixed; top: -100px; left:-100px; z-index: -1; width:0;height:0; }
.hidden { display: none; visibility: hidden; }

@media (max-width: 1200px) and (min-width: 801px) {
	#wait { font-size: 30px; }
}
@media (max-width: 1000px) and (min-width: 801px) {
	#persondata { font-size: 12pt; }
	#localVideo { width: 180px; left: calc(100vw - 640px); }
	#calltime { width: 170px; left: calc(100vw - 640px); }
	#wait { font-size: 25px; }
}
@media (max-width: 920px) and (min-width: 801px) {
	#persondata { font-size: 11pt; }
	#localVideo { width: 160px; left: calc(100vw - 620px); }
	#calltime { width: 150px; left: calc(100vw - 620px); }
	#wait { font-size: 22px; }
}
@media (max-width: 870px) and (min-width: 801px) {
	#persondata { font-size: 10pt; padding: 3px 5px; }
	#localVideo { width: 140px; left: calc(100vw - 600px); }
	#calltime { width: 130px; left: calc(100vw - 600px); }
	#wait { font-size: 20px; }
}
@media (max-width: 840px) and (min-width: 801px) {
	#persondata { font-size: 9pt; }
	#localVideo { width: 120px; left: calc(100vw - 580px); }
	#calltime { width: 110px; left: calc(100vw - 580px); }
	#wait { font-size: 18px; }
}
@media (max-width: 800px) { /* (max-aspect-ratio: 5/4) and */
	
	html, body { overflow-x: hidden; overflow-y: hidden; background-color: #FBCCE7; }
	html, body, input, select, textarea, button { font-size: 10pt; }
	
	#loading { font-size: 20px; }
	#loading div { margin: 20px; }
	#loading .title { font-size: 30px; }
	
	#main { padding:0; margin:0; height:100vh; width:100vw; background-color: #FBCCE7; }
	
	#wasistatus { font-size: 20px; }
	
	.cnocall { top: 67px; left: 10px; right: auto; }
	.ciscall { top: 14px; left: 12px; right: auto; }
	#controls a, #controls span { width: 25px; height: 25px; border-radius: 25px; }
	#controls span { background-color: #F9A8D5; }
	#activateSexAge { left:0; top:calc(100vh - 85px); width:100%; border:0; border-radius:0; font-size: 9pt; }
	#activateSexAge span { display: inline-block; margin: 0 2px; }
	#rndstartlink { left: 10px; top: 110px; font-size: 12pt; width: calc(100vw - 30px); height: 20px; padding: 5px; }
	
	#texthead { display: none; }
	#messages { position: fixed; z-index: 5; top: 120px; left:10px; width:calc(100vw - 20px); height:calc(100vh - 220px); margin:0; padding:0; }
	#lang { width: 25px; height: 22px; font-size: 7pt; }
	#text, #messages, #texthead, #send { background-color:transparent; }
	/*#messages { background-color:#fff; }*/
	
	#send { position: fixed; z-index: 21; top: calc(100vh - 100px); left:10px; height:100px; padding: 10px 0; border-radius: 0; }
	#sendmsg { height: 22px; line-height: 22px; width:22px; font-size: 13px; margin:0; margin-left:5px; padding:0; background-color: #F9A8D5; }
	#textbox { height: 22px; width: calc(100vw - 50px); font-size: 9pt; }
	#send .sendmsgDeactive { background-color: #CCCCCC; cursor: auto; }
	#send .disabled { background-color: #CCCCCC; }

	#video { position: fixed; z-index: 1; top: 0px; width:100%; height:100%; border-radius:0; background-color: transparent; }
	.smallVideo { top:10px; left:calc(100vw - 85px); width:75px; padding: 0; /*min-height:75px; max-height: 100px;*/ background-color: #FCE7F3 !important; }
	.widescreen {padding: 23px 0 0 0;  }
	#localPicture { width: 100px; }
	#localPictureExtra2 { border: 3px dotted red; }
	/*#notextbox { top:10px; left:calc(100vw - 50px); }*/
	#persondata { text-align: left; top: 48px; left:13px; border-radius: 5; padding: 3px 3px 2px 3px; font-size: 9pt; font-weight: bold; }
	#volume { top: 75px; left:10px; bottom: auto; }
	#volumen { float:left; font-size: 9pt; width: 40px; text-align: center; } #volumes { width: 80px; height: 10px; }
	#volume img { width: 15px; height: 15px; margin: 0 0 0 5px; }
	#calltime { top:10; left:calc(100vw - 85px); width:71px; background-color: #FCE7F380 !important; padding:2px; }
	#calltimepercentage { display: block; visibility: hidden; position: fixed; z-index:22; width:75px; top:96px; left:calc(100vw - 87px); text-align:right; font-size: 8pt; color: white; }
	
	#elog { font-size: 5pt; }
	/*#sPingS { text-shadow: none; }*/
	#signals { height: 4px; }
	#signals li { width: 1px; }
	#signals li.signal3 { padding-top: 1px; }
	#signals li.signal2 { padding-top: 2px; }
	#signals li.signal1 { padding-top: 3px; }

	.lnocall { top: 85px; left: calc(100vw - 78px); }
	.liscall { top: calc(100vh - 65px); left: 11px; }
	#bitrate { display:inline; margin-left: 3px; font-size: 4pt; }
	
	.sent, .received, #messages .log { padding:3px 5px; margin:1px 0; border-radius: 5px; }
	.received small, #messages .log { font-size: 10px; }
	
	.nomobile { display: none; visibility: hidden; }
	
	#wait, #isRecording { top: 90px; left: 12px; width: 100px; height: 45px; padding:0; margin:0; font-size: 30px; }
	/* #remoteVideoPic { top: 130px; left: 15px; height:calc(100vh - 230px); max-height: 150px; } */
	#adforrandsearchwait { top: 130px; left: 0; width:100%; margin:0; padding:0; text-align: center; }
	#error { top: 200px; left: 0; width: 100%; padding:0; margin:0; font-size: 15px; text-align: center; }
	
	#header { height: 85px; margin: 10px; }
	#header .title { font-size: 20px; margin-bottom: 0; }
	#header .slogan { font-size: 7pt; }
	#usersOnlineStates { text-align: center; padding: 45px 0 0 0; }
	#userlist { margin: 0; padding: 10px 8px 10px 8px; font-size: 7pt; height: calc(100vh - 210px); }
	#userlist a, #userlist a:visited { width: 70px; height: 70px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; margin: 3px; }
	#userlist div { width: 70px; height: 13px; margin: 53px 0 0 0; padding: 4px 0 0 0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
	/*#userlist img { width: 100%; }*/
	#userlist img, #homeVideo { margin-top: -70px; }
	
	#inccalls { width:175px; }
	.inccall { height: 50px; }
	
	.endcall {
		top: 15px; left:calc(100vw - 117px); width: 20px; height: 20px; border-radius: 20px;
		border: 2px solid #ff9999; box-shadow: 0 0 0 1px #9E164E; line-height: 35px; vertical-align: middle;
	}
	.startcall, .inccancel {
		width: 35px; height: 35px; border-radius: 35px; vertical-align: middle;
		margin:5px 10px 0 0; font-size: 16pt; line-height: 35px;
		border: 2px solid #ff9999; box-shadow: 0 0 0 1px #9E164E;
	}
	.startcall { border: 2px solid #99ff99; }
	.inccancel {  }
	.endcall:hover, .startcall:hover, .inccancel:hover { box-shadow: 0 0 0 2px #500724; }
	#incallnextrnd { top:80px; }
  
}