html{background-color:#d3d3d3;font-family: 'Roboto', sans-serif;width:100%;height:100%;overflow:hidden}

body{
background-color:white;
border-radius:3px;
overflow:hidden;
box-shadow: 0 1px #FFFFFF inset, 0 1px 3px rgba(25, 25, 25, 0.5);
bottom:50px;top:50px;left:50px;right:50px;position:absolute;
max-width:850px;margin:auto;
}

.loadingContainer{font-size:30px}
#connectingIcon{display:none;margin-top:8px}

#chatAreaContainer{position:absolute;overflow:hidden;top:0px;left:0px;right:0px;bottom:0px;z-index:1}
#chatAreaLimit{top: 0px;left: 0px;bottom: 60px;right: 0px;position: absolute;}
#chatArea{position:absolute;bottom:0px;width:100%;max-height:100%;overflow-x: hidden;
overflow-y: auto;}





.MContainer{width:100%;padding-bottom:5px;padding-left:10px;padding-right:10px}
.MContainer.Me{text-align:right;;padding-left:50px;padding-right:10px}
.MContainer.Peer{text-align:left;;padding-left:10px;padding-right:50px}
.MContainer.System {text-align: center;;padding-left:50px;padding-right:50px}


.Msg{display:inline-block;background-color:rgba(153, 153, 153, 0.3);padding: 8px 10px;border-radius:4px}

.MContainer.System .Msg {background-color: transparent;font-size:80%}
.MContainer.Peer .Msg{background-color:rgba(52,152,219 ,0.3);}



* {box-sizing: border-box;}

.time{display:inline-block;float:right;margin-left:10px;color:#6d6d6d;font-size:65%;position:relative;top:-10px}

#inputArea{background-color:#bdc3c7;width:100%;bottom:0px;height:60px;position:absolute}
#inputArea #input{background-color:white;margin:10px;border-radius:20px;border:none;left:40px;right:50px;position:absolute;height:40px;overflow:hidden}
#inputArea #input input{padding:5px 25px 5px 25px;position:absolute;width:100%;height:100%;border:none}
#inputArea #sendButton {margin:10px;width:40px;height:40px;border-radius:20px;box-shadow: 0 1px #FFFFFF inset, 0 1px 3px rgba(25, 25, 25, 0.5);border:none;float:right}
#inputArea #sendButton:hover{border:1px solid rgba(255,255,255,0.3);box-shadow: 0 0px #FFFFFF inset, 0 1px 3px rgba(25, 25, 25, 0.5)}
#inputArea #sendButton img{margin-left:13px;margin-top:10px;width:20px;height:20px}

#emojiButton {display: inline-block;position: absolute; margin:15px 10px;width:30px;height:30px;}
#emojiButton img{width:100%;height:100%;}
#logArea{background-color:white;width:100%;top:0px;bottom:60px;position:absolute;overflow:auto; overflow-x: hidden;}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    body {
        width: 100%;
		margin:0px;
		left:0px;right:0px;top:0px;bottom:0px}
    }