body { font-family: 'Montserrat', sans-serif; font-size: 16px; }
.main { position: fixed; height: calc(100% - 20px); width: calc(100% - 20px); margin: 10px; }

.input_wrapper { position: absolute; bottom: 0px; left: 20px; right: 20px; width: calc(100% - 40px); height: 70px; ;}
.input_shape { position:  absolute; top:0px; left: 0px; right: 0px; width: 100%; height: 50px; background: #efefef; border-radius: 6px;  box-shadow: inset 1px 1px 0px #ccc; }
.input_shape .left { position: absolute; height: 50px; width: 65px; left: 0px;  line-height: 0px; z-index: 15; cursor: pointer; }
.input_shape .left .button { position: absolute; width: 100%; height: 100%;  border-radius: 6px 0px 0px 6px; }
.input_shape .middle { position: absolute; height: 50px; width: 50px; left: 65px; width: calc(100% - 190px);  }
.input_shape .middle input { position: absolute; width: calc(100% - 10px); height:  calc(100% - 4px); top: 2px; left: 5px; outline: none !important; border: 0px; background: none; font-size: 16px; z-index: 2; color: #555;  }
.input_shape .left i.face { position: absolute; top: 10px; left: 10px; font-size: 30px; }
.input_shape .left i.carot { position: absolute; top: 11px; left: 46px; font-size: 20px; color: #fff; }
.input_shape .right { position: absolute; right: 0px; }
.input_shape .right .button { width: 100px; height: 50px; text-transform: uppercase; border-radius: 0px 6px 6px 0px; font-size: 24px; line-height: 37px; }
.input_shape .right .button.more {  float: left; width: 25px; height: 50px; font-size: 20px; line-height: 30px; border-radius:0px}

.right_menu { position: absolute; z-index: 10; background: #a5cc52; bottom: 0px; right: 125px; border-radius: 5px 5px 0px 5px; }
.right_menu .menu_inner { padding: 6px; margin: 0px; list-style: none; }
.right_menu .menu_inner .button_grey { white-space: nowrap; margin-botton: 5px; display: block; margin-bottom: 2px; }
.right_menu .menu_inner .button_grey:last-child { margin-bottom: 0px; }

.input_shape .loading { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 50; background: #555; opacity: .8; white-space: nowrap; color: #fff; border-radius: 6px;  }
.input_shape .loading img { float: left; height: 50px;margin-left: 75px; }
.input_shape .loading span {  float: left; display: block; margin-left: 5px; margin-top: 13px; opacity: .4; max-width: calc(100% - 130px); overflow: hidden; }

.messages { position: absolute; height: calc(100% - 100px); width: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.message_wrapper { margin-bottom: 5px; position: relative; width: 100%; }
.message_wrapper .message_avatar { float: left; width: 40px; font-size: 30px; }
.message_wrapper .message_body { float: right; width: calc(100% - 45px); color: #777; }
.message_wrapper .message_name { font-weight: 900;}
.message_wrapper .message_name.stranger { color: #FF6F61; }
.message_wrapper .message_name.self { color: #34568B; }
.message_wrapper .message_avatar.stranger { color: #FF6F61; }
.message_wrapper .message_avatar.self { color: #34568B; }

.message_d { border-bottom: #ccc 1px solid; height: 1px; margin: 13px 3px 5px 53px; opacity: .25;}

.face_menu {padding: 12px 2px; z-index: 10; border-radius: 5px 5px 5px 0px; background: #378de5; position: absolute; bottom: 0px; left: 65px; width: 65px; text-align:center; }
.face_menu .face_menu_inner { max-height: 240px;overflow: auto; -webkit-overflow-scrolling: touch; }
.face_menu .face_menu_item { font-size: 40px; color: #fff; padding: 4px 0px; cursor:pointer; }

.status { position: absolute; bottom: 73px; left: 68px; font-size: 14px; opacity: .5; }

.overlay { background-color:rgba(0, 0, 0, 0.72); position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 250; }
.overlay .overlay_anchor { position:  absolute; left: 50%; top: 50%; }
.overlay .container { position: absolute; top: -250px; left: -270px; width: 540px; min-height: 200px; background: #fff; border-radius: 15px; box-shadow: 0px 0px 10px 0px #bbb; padding: 30px; }
#captcha_holder { text-align: center; }
#captcha_holder > div { margin: auto; }

.cap_wrap { width: 100%; height: 120px; position: relative; background: #f9f9f9; box-shadow: 0px 0px 9px -5px #aaa; border-radius: 5px; margin-bottom: 10px;  }
.cap_wrap .cp_item img { width: 30px; opacity: .25; }
.cap_wrap .cp_item.selected img { opacity: .95; }

.button_cap { background: #ddd; color: #444; text-align:  center; padding: 15px; font-size: 20px;  border-radius: 5px; display: block; width: 100%; cursor: pointer; }
.button_cap:hover { background: #ccc; position: relative; top: -1px; box-shadow: 0px 2px 2px #aaa;  }
.button_cap:active { background: #ddd; position: relative; top: 0px; box-shadow: none;   }

.system { padding: 12px 16px; color: #fff;  border-radius: 5px; margin-bottom: 10px; opacity: .7; }
.system.started { background-color: #4CAF50; }
.system.ended { background-color: #ff9800; }

.system_load { text-align: center; padding-top: 200px; }
.system_load .text { padding-top: 10px; opacity: .7; }
.system_load .image img { width: 219px; height: 219px; opacity: .6; }

.button_green {
	box-shadow:inset 0px 1px 0px 0px #d9fbbe;
	background:linear-gradient(to bottom, #b8e356 5%, #a5cc52 100%);
	background-color:#b8e356;
	border-radius:6px;
	border:1px solid #83c41a;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 6px;
        text-align: center;
	text-decoration:none;
	text-shadow:0px 1px 0px #86ae47;
}
.button_green:hover { background:linear-gradient(to bottom, #a5cc52 5%, #b8e356 100%); background-color:#a5cc52; }
.button_green:active { position:relative; top:1px; }

.button_blue {
	box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	background-color:#79bbff;
	border-radius:6px;
	border:1px solid #84bbf3;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
}
.button_blue:hover {
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	background-color:#378de5;
}
.button_blue:active {
	position:relative;
	top:1px;
}

.button_grey {
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	background-color:#f9f9f9;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.button_grey:hover {
	background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
	background-color:#e9e9e9;
}
.button_grey:active {
	position:relative;
	top:1px;
}

.noselect 
{
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.hide { display: none; }
        
.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: .4s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


@media only screen and (max-width: 500px) 
{
.main { position: fixed; height: calc(100% - 6px); width: calc(100% - 6px); margin: 3px; } 
.input_shape { border-radius: 3px; }
.input_shape .left .button { border-radius: 3px 0px 0px 3px; }
.input_shape .right .button { border-radius: 0px 3px 3px 0px; font-size: 24px; line-height: 37px; }
.input_wrapper { position: absolute; bottom: 0px; left: 0px; right: 0px; width: calc(100% - 0px); height: 50px;}
.status { position: absolute; bottom: 52px; left: 45px; } 
.messages { height: calc(100% - 80px); }

.overlay .overlay_anchor { position:  absolute; left: 0px; top: 20px; width: 100%; height: calc(100% - 40px); }
.overlay .container { max-height: 100%; overflow-y: auto; position: absolute; top: 0px; left: 10px; width: calc(100% - 20px); min-height: 200px; background: #fff; border-radius: 15px; box-shadow: 0px 0px 10px 0px #bbb; padding: 30px; }
.overlay .container h2 { font-size: 26px; }

.input_shape .loading { border-radius: 3px;  }

}