/* CSS Document */
body {
    font:12px arial;
    color: #222;
    text-align:center;
    padding:35px; }
  
form, p, span {
    margin:0;
    padding:0; }
  
input { 
	font:12px Arial;
	padding-left: 5px;
}


.button{
	font:16px "Comic Sans MS";
	padding:0 14px; 
	border-radius: 4px;
}
  
a {
    color:#0000FF;
    /*kevin text-decoration:none;*/ 
}
  
    a:hover { text-decoration:underline; }
  
#wrapper {
    margin:0 auto;
    padding-bottom:25px;
    background:#EBF4FB;
    width:900px;
    border:1px solid #ACD8F0; }
    
#loginform {
    margin:0 auto;
    padding-bottom:25px;
    background:#EBF4FB;
    width:420px;  /*Kevin*/
    border:1px solid #ACD8F0; }
  
#loginform { 
	padding-top:18px;
}
  
    #loginform p { margin: 5px; }
  
#chatbox {
    text-align:left;
    margin:0 auto;
    margin-bottom:25px;
    padding:10px;
    background:#fff;
    height:215px;
    width:836px;
    border:1px solid #ACD8F0;
    overflow:auto;
    font-size: 14px;
}
  
#usermsg {
    width:567px;
    border:1px solid #ACD8F0; 
    font-size: 18px;
    padding: 2px 12px;
    margin-left: -169px;
}
  
#submit { width: 83px; }
  
.error { color: #ff0000; }
  
#menu { padding:12.5px 25px 12.5px 25px; }
  
.welcome { 
	float:left;
    font-size: 14px;       
 }
  
.logout { float:right; }
  
.msgln { 
	margin: 5px;
	border-bottom:  1px dotted grey;
	padding-bottom: 5px;
}

label {
	font-size: 14px;
}

#name {
	width: 155px;
	margin-right: 42px;
}

.logout {
	font-size: 14px;
}

.msgln .avatar {
	width: 40px;
	height: 40px;
	float: left;
	margin: 7px 10px 0 0;
}

.loginTable {
	text-align: left;
	margin-left: 40px;
}

.loginTable #password {
	width: 155px;
}

.RegisterTable #password {
	width: 155px;
	margin-left: -42px;
}

.RegisterTable #avatar {
	margin-right: -16px;
}

.RegisterTable #confirm_password {
	margin-left: -42px;
	width: 155px;
}

.RegisterTable {
	padding-left: 47px;
}

#popup{
	display: none;
	position: absolute;
	z-index: 50;
	border: 1px grey solid;
	background-color: #8080ff;
	background-color: rgba(0,0,255,0.3);
	/*box-shadow: 4px 4px 2px, 4px 4px 8px red;*/
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 4px;
	padding: 4px;
}

.RegisterTable #nickname {
	margin-left: -42px;
	width: 155px;
}

.linkButton {
	font-size: 16px;
    margin-left: 0px;
    padding: 4px;
    magin-top: 9px;
    display: inline-block;
    background-color: lightgray;
    width: 80px;
    color: black;
    box-shadow: 2px 2px 2px grey;
    /* border-style: ridge; */
    /* border-width: thick; */
    cursor: pointer;
}

a.linkButton:link {
	text-decoration: none;
}

a.linkButton:hover {
    background-color: gray;
    color: black;
}

.clearfix {
    overflow: auto;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.msgln .date{
	float: right;
	color: gray;
}

i.emojiButton{
	font-size: 20px;
}