@charset "utf-8";
/* CSS Document */

body,button,input{
	text-rendering:optimizeLegibility;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
	font-family:"Varela Round",Helvetica,Arial,sans-serif;
	font-size:12px;
	letter-spacing:.3px;
}
h1,h2,h3,h4,h5,h6{
	margin:0;
	padding:0;
	font-weight:400;
	font-size:16px;
}
a{
	color:inherit;
    cursor: pointer;
}

#page_chat {
	display:flex;
}

#messages {
	margin-bottom: 7em;
}
.bubble{
	width:100%;
	padding:8px;
	box-sizing:border-box;
}
.bubble__body{
	display:flex;
}
.bubble__body__photo{
	width:40px;
	margin-right:8px;
}
.bubble__body__photo img{
	width:100%;
	display:block;
	border-radius:50%;
}
.bubble__body__message{
	flex:1 1;
	padding-right:8px;
	padding: 10px; 
	background-color:#696969;
	border-radius: 10px;
	max-width: 500px;
  	margin: auto;
}
.bubble__body__message__nickname{
font-weight:700;
}
.bubble__body__message__image{
border-radius:12px;
margin-top:8px;
width:100%;
max-width:360px;
}
.input{
position:fixed;
bottom:0;
left:0;
background-color:#fdfdfd;
width:100%;
padding:10px 8px 8px;
box-sizing:border-box;
color:#000;
}
.input,.input form{
	display:flex;
	background-color:#424949;
}
input[type=password],input[type=text]{
	border:1px solid #333;
	border-radius:0!important;
	outline:none!important;
	-webkit-appearance:none;
	height:30px;
	line-height:30px;
	background-color:hsla(0,0%,100%,.7);
	width:100%;
	box-sizing:border-box;
}
.input__options{
	margin-top:7px
}
.input__options__left{
	font-size:12px!important;
	color:#fff;
}
.input__submit{
	border:none;
	border-radius:0;
	font-family:FontAwesome;
	background:#000;
	color:#fff;
	font-size:16px;
	padding:0 8px!important;
	-webkit-appearance:none;
	display:block;
	margin:0;
	text-align:center;
}
.auth__logout{
	display:none;
}
.auth__change,.wordy--logged-in .auth__logout{
	display:inline;
}
.wordy--logged-in .auth__change{
	display:none;
}
.input__avatar{
	width:50px;height:50px;margin-right:8px;border-radius:8px;
}
.input--logged-in .input__avatar{
	cursor:pointer;
}
.input__right{flex:1 1}
.input__left{position:relative}
.input__left__loading{display:none;position:absolute;left:0;top:0;background:rgba(0,0,0,.7);border-radius:8px;overflow:hidden}
.input__left__loading,.input__left__loading img{width:50px;height:50px}
.input--uploading .input__left__loading{display:block}
#file-input{display:none}
.page_logon{display:none; position:fixed;width:100%;height:100%;background-color:rgba(0,0,0,.8);left:0;top:0}
.auth{padding:10px;background-color:#fdfdfd;color:#000;width:280px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.auth__title{font-size:16px}
.auth__subtitle,.auth__title{font-weight:700;letter-spacing:1.6px}
.auth__subtitle{margin-top:12px}
.auth p{margin:5px 0 10px}
.auth input:nth-child(4),.auth input:nth-child(5){border-top:none}
.auth__row{display:flex}
.auth__row button{height:25px;line-height:24px;margin:0}
.auth input{height:25px;line-height:26px}
button{-webkit-appearance:none;background:#000;color:#fff;border:none;border-radius:none;height:22px;line-height:21px;font-size:10px;letter-spacing:2px;margin-top:4px;margin-right:4px;text-transform:uppercase}
.auth__buttons{display:flex}
.auth__buttons div{font-size:10px;padding-top:3px;flex:1 1;text-align:right}
.auth .error{color:red}
.error-screen__wrapper{position:fixed;width:100%;height:100%;background-color:rgba(0,0,0,.8);left:0;top:0}
.error-screen{padding:10px;background-color:red;color:#000;width:280px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.error-screen__title{font-weight:700;letter-spacing:1.6px;font-size:16px}
body{margin:0;padding:0;background-color:#000;color:#fff;-ms-overflow-style:none;scrollbar-width:none}
body::-webkit-scrollbar{display:none}
.wordy__messages{padding-bottom:90px}