.chatroom {
    z-index:4096;
    text-align: left;
    width: 48%;
	min-width: 640px;
	max-width: 800px;
    height: 100%;
    min-height: 1080px;
    background: rgba(128,128,128,0.5);
    position: fixed;
    top: 10px;
    right: 10px;
    display:none;
}

.chtrooms {
	z-index:4095;
	text-align: left;
	width: 30%;
	min-width: 300px;
	max-width: 500px;
    height: 100%;
    min-height: 1080px;
	background: rgba(128,128,200,0.5);
    position: fixed;
    top: 10px;
    left: 10px;
    display:none;
}

.roomline {
	background:#F0F0F0;
	padding: 5px 15px 5px 20px;
	border: thin solid #101010;
	font-size: 1.5em;
}

.roomline img {
	margin-right:10px;
	height:16px;
}

.thisroom {
	background: #FFDCDCE6;
}

.chatform {
    background-color: #EDEBE7E6;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 5px 18px 2px 18px;
    position: relative;
    vertical-align: top;
    font-size: 0.9em;
}

input#chtsnd {
    background: url('../img/chsend.png') no-repeat top left;
    background-size: auto auto;
    height: 32px;
    width: 48px;
    background-size: 28px 28px;
    border-style: none;
    margin-left: 5px;
}

input#chtclx {
    background: url('../img/chclose.png') no-repeat top left;
    background-size: auto auto;
    height: 32px;
    width: 48px;
    background-size: 28px 28px;
    border-style: none;
    margin-left: 5px;
}
.mensagens {
    font-size: 1.5em;
    overflow-y: scroll;
    max-height: 1080px;
    overflow-x: hidden;
    width: 104%;
    padding-left: 10px;
    padding-right: 20px;
}

.bubble{
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 0 12px #000000;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
}

.bubble::before {
    background-color: #FFFFFF;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:             rotate( 29deg ) skew( -35deg );
        -moz-transform:    rotate( 29deg ) skew( -35deg );
        -ms-transform:     rotate( 29deg ) skew( -35deg );
        -o-transform:      rotate( 29deg ) skew( -35deg );
        -webkit-transform: rotate( 29deg ) skew( -35deg );
    width:  20px;
}

.bubble img {
    max-height:32px;
}

.imground {
	border-radius: 50%;
}

.chatusers img {
    max-height:24px;
	border-radius: 50%;
}

.me {
    left: 50px; 
    margin: 5px 45px 5px 20px;         
}

.me::before {
    box-shadow: -2px 2px 2px 0 rgba( 255, 0, 0, .8 );;
    left: -9px;           
}

.you {
    right: 50px;
    margin: 5px 20px 5px 45px;         
}

.you::before {
    box-shadow: 2px -2px 2px 0 rgba( 0, 255, 0, .8 );;
    right: -9px;    
}

.boxleft {
    float:left;
}

.boxright {
    float:right;
}

.boxclear {
    clear:both;
}

#chatnotificar {
	position: absolute;
	top: 80px;
	color: #FFFFFF;
	font-size: 0.8em;
}

.notificar-bubble {
	position: relative;
	background-color:#0084FF;
	border-radius:.4em;
}
.notificar-bubble:after {
	content:'';
	position:absolute;
	top:0px;
	left:40%;
	width:0px;
	height:0px;
	border:32px solid transparent;
	border-bottom-color:#0084FF;
	border-top:0px;
	border-right:0px;
	margin-left:-16px;
	margin-top:-32px;
}

.bigshadow {
    -webkit-box-shadow: 17px 18px 16px -7px rgba(0,0,0,0.75);
    -moz-box-shadow: 17px 18px 16px -7px rgba(0,0,0,0.75);
    box-shadow: 17px 18px 16px -7px rgba(0,0,0,0.75);
}