@charset "utf-8";
/* CSS Document */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
body, ol, ul, li, div, p, span, form, h1, h2, h3, h4, h5, h6, table, thead, th, tbody, tr, td, img, input, textarea, dd, dt, dl{word-wrap:break-word;outline:none;padding:0;margin:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
textarea{overflow:auto;-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
h1, h2, h3, h4, h5, h6, p, ul, ol, dd, dt, dl{-webkit-margin-before:0px;-webkit-margin-after:0px;-webkit-margin-start:0px;-webkit-margin-end:0px;}
a img, img{border:none;outline:none;}
input[type=submit], input[type=reset], input[type=button], button{ -webkit-appearance:none; -moz-appearance:none;-ms-appearance:none; appearance:none; }
a{cursor:pointer;text-decoration:none;outline:0;}
.no-script-msg{font:12px Arial, verdana, Helvetica, sans-serif;background:#FFFFCC url(../images/icon-noScript.gif) no-repeat 5px 10px;width:auto;padding:10px 10px 10px 25px;margin:8px;border:1px solid #CD3D18;font-weight:bold;height:auto;font-size:11px;color:#000000;line-height:150%;clear:both;}
input{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-family: 'arial', sans-serif; -webkit-appearance:none; }
body{font-family: Arial, sans-serif; min-width:300px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -ms-font-smoothing:antialiased; background-color: #fff;}
::selection {text-shadow: none;background: rgba(65,131,196,0.4);}
.clear{clear:both; height:0px; overflow:hidden; width:auto; display:block; float:none !important;}
ul, menu, dir {margin:0px;padding:0px;display: block;list-style-type: disc;-webkit-margin-before: 0;-webkit-margin-after: 0;-webkit-margin-start: 0;-webkit-margin-end: 0;-webkit-padding-start: 0;}
*, *:after , *:before { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

	body{
			background: #66b6a0;  
			background: -webkit-linear-gradient(to top, #b0b666, #7147bb);
			background: linear-gradient(to top, #b0b666, #7147bb);
	}
		.wrapper {
		    position: relative;
		    width: 100vw;
		    height: 100vh;
		    background-attachment: scroll;
		    overflow: hidden;
		}
		.wrapper .remote-video {
			width: 100vw;
			height:  calc(100vh /2) ;
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			object-fit: cover;
		}
		.remote-video-div{
		    position: absolute;
		    z-index: 2;
		    top: 0px;
		}
		.wrapper .overlay {
		    height: 100vh;
		    width: 100vw;
		    position: absolute;
		    top: 0px;
		    left: 0px;
		    z-index: 2;

		}
		.local-video{
			
		    height:  calc(100vh /2) ;
		    width: 100vw;
		    object-fit: cover;
		    z-index: 2;
		    bottom: 0;
		}
		.local-video-div{
		    position: absolute;
		    z-index: 2;
		    bottom: 0px;
		}
		.opouser{
			position: relative;
			z-index: 10;
			color: #dadada;
			text-align: end;
		}
		#username , #gender  { display: none;  }
		.capsule {
		    background-color: #00000057;
		    border: none;
		    padding: 7px 10px;
		    text-align: center;
		    text-decoration: none;
		    display: inline-block;
		    margin: 5px 5px;
		}
		.fa-heart{
			background: -webkit-linear-gradient(to right, #ffc500, #F44336);  /* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to right, #ffc500, #F44336); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		  	-webkit-background-clip: text;
		  	-webkit-text-fill-color: transparent;
		}
		.fa-user{
			background: -webkit-linear-gradient(to right, #26D0CE, #CDDC39);  /* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to right, #26D0CE, #CDDC39); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
			-webkit-background-clip: text;
		  	-webkit-text-fill-color: transparent;
		}
		.fa-flag{
			background: -webkit-linear-gradient(to right, #DD2476, #FF512F);  /* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to right, #DD2476, #FF512F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
			-webkit-background-clip: text;
		  	-webkit-text-fill-color: transparent;
		}
		.fa-chevron-circle-right{
			background: -webkit-linear-gradient(to right, #93F9B9, #93F9B9);  /* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to right, #93F9B9, #93F9B9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
			-webkit-background-clip: text;
		  	-webkit-text-fill-color: transparent;
		}
		.fa-refresh{
			padding: 10px 20px;
			margin: 4px 2px;
			background: -webkit-linear-gradient(to right, #F9D423, #CDDC39);  /* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to right, #F9D423, #CDDC39); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
			-webkit-background-clip: text;
		  	-webkit-text-fill-color: transparent;
		  	z-index: 10;
		  	position: absolute;
		  	left: 50%;
		    transform: translateX(-50%);
		    bottom: -4px;
		}

		.video-control-icons {
			width: 100%;
			position: fixed;
			bottom: 10px;
			right: 10px;
			z-index: 100;
		}
		
		.video-control-icons button {
			/* color: #ffffff;
			font-size: 24px;
			background-color: transparent;
			border: none;
			margin-right: 10px; */
		}