html, body, div { margin: 0; padding: 0; }
html { background-color: #151515; }
body {
	background-color: #0b1014;
	background-image: url('../img/bgmess.jpg');
	background-repeat: repeat;
	color: #f7f8fa;
	font-family: Helvetica;
	font-size: 20px;
	text-align: center;
	margin: 0;
	padding: 0;
}
input {
	font-size: 20px;
}
button {
	font-size: 20px;
	padding: 15px;
	border: none;
	border-radius: 10px;
	cursor:pointer;
}
a {
	color: antiquewhite;
	font-style: italic;
}
video { background-color: #1f272a; border: none; border-radius: 15px; }

.main {
	/*min-width: 425px;*/
	margin: 0px auto;
	/*width: 425px;*/
	box-sizing:border-box;
	position:relative;
	min-height:650px;
	height:650px;
	overflow:hidden;
	/*border-left: 8px solid #b6cdbb;
	border-right: 8px solid #b6cdbb;
	border-radius: 5px;*/
	height: auto;
	/*padding: 5px 10px 10px 10px;*/
}

#popupWrapMain,
#popupWrapA{
	display: none;
	opacity: 0.8;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(1, 1, 1, 0.725);
	overflow: auto;
}
#popupWrapMain{ z-index: 999901; }
#popupWrapA{ z-index: 999988; }

#popupWindMain,
#popupWindA{
	display: none;
	position: absolute;
}
#popupWindMain{ z-index: 999902; }
#popupWindA{ z-index: 999989; }

.btnG {
	background: #2ab318;
	color: #fff;
}
.btnR {
	background: #d70022;
	color: #fff;
}
.btnD {
	background: #939294;
	color: #fff;
	cursor: auto;
}
.css_myPeerId,
.css_connectPeerId { color:#f7f8fa; width: 330px; background: none; border: none; font-size: 14px; text-align: center; }
.css_myPeerId { cursor:pointer; }
.blockSlogan { font-size:16px; padding: 0 10px; max-width: 400px; margin: auto; }
.blockSlogan .author { text-align:right; font-style:italic; font-size: 14px; margin-top: 5px; }
.blockBtn { text-align: center; margin-top: 30px; }
.blockPhoto {
	margin-top: 30px;
	display: inline-block;
	background-color: black;
	border-radius: 100px;
	overflow: hidden;
	height: 260px;
}
.blockPhoto img { height: 260px; }
#mainBody { width:100%; }
#mainBody .inner { max-width: 400px; margin: 50px auto -280px auto; font-size: 18px; font-style: italic; line-height: 24px; }
#mainBody .inner span { font-size: 22px; }
.blockState { position: absolute; text-align: center; width: 100%; font-size: 16px; padding-top: 5px; opacity: 0.8; font-style: italic; }
.admState { top: 95px; }
.errState { position: absolute; text-align: center; width: 100%; font-size: 16px; padding-top: 5px; opacity: 0.8; color: red; }
.admEState { top: 115px; }
.blockInfo { margin-top: 40px; }
#imgOffline { opacity:0.8; }
.blockAdvert { border-top: 1px solid gray; border-bottom: 1px solid gray; line-height: 1.5em; padding: 10px; }
.blockAdvert div { margin-bottom: 20px; }
.blockAdvert a { font-size: 18px; }
.blockCopy { font-size: 14px; padding: 10px; color: gray; font-style: italic; }
.blockCopy a { color: gray; text-decoration: none; }
.blockCopy a:hover { text-decoration: underline; }
.blockMess { 
	position: fixed;
	bottom: 0;
	padding: 5px 0;
	width: 100%;
	text-align: center;
	z-index: 25;
}
.blockMess div { display: inline-block; vertical-align: bottom; }
.blockMess textarea {
	background: #1f272a;
	border: none;
	border-radius: 15px;
	color: #e8eeee;
	font-size: 20px;
	resize: vertical;
	padding: 5px 10px;
	height: 48px;
}
#btnMessSend {
	background: #fafafa;
	color: #0b1014;
	font-weight: bold;
	font-size: 30px;
	border-radius: 30px;
	width: 60px;
	height: 60px;
	padding: 10px;
}
.blockBtnMess { 
	position: fixed;
	bottom: 0;
	width: 100%;
	text-align: center;
	z-index: 26;
}
.blockBtnMessBody {
	max-width: 400px;
	margin: auto;
}

#messlist { position: fixed; width: 100%; bottom: 95px; overflow-y: scroll; max-height: 480px; z-index: 19; }
#messlistbody { max-width: 400px; margin: auto; }
#messlistbody .messitemR,
#messlistbody .messitemL { padding: 5px 10px; max-width: 70%; margin-top: 10px; font-size: 18px; }
#messlistbody .messitemR { background-color:#134d37; float: right; border-radius: 10px 10px 0 10px; }
#messlistbody .messitemL { background-color:#1f272a; float: left; border-radius: 10px 10px 10px 0; }

.mainTop { padding-top: 20px; }
.mainTop h2 { margin-top: 0px; margin-bottom: 10px; font-weight: normal; }
.messTop {
	z-index:11;
	border-bottom: 1px solid #23282c;
	padding-bottom: 8px;
	background-color: #0b1014;
	padding-top: 10px;
	position: fixed;
	top: 0px;
	width: 100%;
}
.messTop h2,
.messTop .blockPhoto { display: inline-block; vertical-align: middle; }
.messTop h2 { font-size: 24px; margin: 0 10px 0 0; max-width: 120px; width: min-content; color:#f7f8fa; font-weight: normal; }
.messTop .blockPhoto { margin: 0 10px; height: 60px; overflow: hidden; border-radius: 30px; }
.messTop .blockPhoto img { height: 80px; border-radius: 0px; }
.messTop .blockBtn,
.messTop .blockInfo { display: inline-block; margin-top: 2px; vertical-align: top; }
.messTop .blockInfo { margin-left: 10px; }
.messBody,
.messBodyAdm { min-height: 500px; z-index: 5; position: fixed; width: 100%; top: 80px; }
.messBodyAdm { top: 100px; }

#remvidblock { z-index: 17; position: relative; }
#remvidblock video { width: 100%; max-width: 500px; }
#myvidblock { z-index: 18; position: fixed; bottom: 75px; right: 5px; }
.myVideoDiv { position: absolute; bottom: 0; right: 0; border: 3px solid #23282c; border-radius: 52px; width: 100px; height: 100px; overflow: hidden; z-index: 20; }
.myVideoDiv video { width: 100px; height: 100px; }
.myBtnAVDiv { position: absolute; bottom: 0; right: 0; z-index: 21; }
.myBtnFlip { position: absolute; bottom: 0; right: 90px; z-index: 22; }
.myBtnAVDiv div,
.myBtnFlip { width: 30px; height: 30px; border-radius: 16px; padding: 2px; cursor: pointer; opacity: 0.5; }
.myBtnAVDiv div:hover,
.myBtnFlip:hover { opacity: 0.75; }
.myBtnAVDiv div img,
.myBtnFlip img { width: 30px; height: 30px; }
.myBtnAVDiv .myBtnAudio { margin-bottom: 55px; }
.myBtnAVDiv .disBtn { background-color: red; }
.myBtnAVDiv .disIcn { position: absolute; }

.myBtnSec {
	position: absolute;
	left: 5px;
	bottom: 138px;
	border-radius: 15px;
	width: 30px;
	height: 30px;
	overflow: hidden;
	opacity: 0.5;
	cursor:pointer;
	z-index: 23;
}
.myBtnSec:hover {
	opacity: 0.75;
}
.myBtnSec img {
	width: 30px;
	height: 30px;
}

.myBtnClose {
	position: absolute;
	bottom: 68px;
	border-radius: 0px;
	width: 30px;
	height: 20px;
	overflow: hidden;
	opacity: 0.5;
	cursor:pointer;
	z-index: 23;
}
.myBtnClose:hover {
	opacity: 0.75;
}
.myBtnClose img {
	width: 30px;
	height: 20px;
}

.btnMessShow {
	position: absolute;
	/*left: 5px;*/
	bottom: 5px;
	border-radius: 0px;
	width: 30px;
	height: 30px;
	overflow: hidden;
	opacity: 0.5;
	cursor:pointer;
	z-index: 23;
}
.btnMessShow:hover {
	opacity: 0.75;
}
.btnMessShow img {
	width: 30px;
	height: 30px;
}

.popupfrm {
	display:none;
	position: fixed;
	background-color: #1f272a;
	width:370px;
	top:10px;
	left:10px;
	text-align: center;
	border-radius:15px;
	padding:10px 15px 15px 15px;
	-webkit-transition: opacity 300ms, visibility 300ms;
	transition: opacity 300ms, visibility 300ms;
}
.popupfrm input {
	background-color: #1f272a;
	border: none;
	border-radius: 15px;
	color: #e8eeee;
	font-size: 24px;
	padding: 5px 15px;
	text-align: center;
}
.popupfrm p,
.popupfrm h1 {
	text-align: left;
	padding: 5px 5px 10px 5px;
	margin: 0px;
	font-size: 16px;
	font-weight: normal;
}
.popupfrm b {
	font-weight: bold;
	font-size: 16px;
}
.popupfrm h1 {}
.popupfrm .btncncl,
.popupfrm .btnok {
	padding: 13px 15px;
	font-size: 18px;
	cursor: pointer;
	text-align: center;
	width: 120px;
}
.popupfrm .btncncl {
	float: left;
	background-color: #bbb;
	color: #222;
}
.popupfrm .btnok {
	float: right;
	background-color: #085aaa;
	color: #fff;
}
.popupfrm .clear {
	clear:both;
	margin-top:15px;
}
.popupfrm .txtbox {
	width:315px;
	min-width:315px;
	height:100px;
	font-size:18px;
}
.popupfrm .checkdiv {
	text-align: center;
	padding: 0 10px 5px 10px;
	height:24px;
}
.popupfrm .checkdiv .editbtn {
	display: inline-block;
	vertical-align: middle;
}
.popupfrm .checkdiv label {
	display: inline-block;
	vertical-align: middle;
	margin-left: 5px;
}
.popupfrm .checkdiv .editbtn img {
	width:30px;
	height:30px;
}

.pincss { width:190px; left:100px; padding-bottom:30px; }
.pincss input { width: 160px; }