#guasapr{

	position: fixed;
	top: 50%;
	right: -50px;
	padding: 5px 10px 20px 10px;
	border-radius: 15px;
	border-right: 1px solid #666;
	box-shadow: -3px -3px 3px #aaa;
	font-weight: normal;
	-webkit-transform: rotate(270deg);
	color: #ffff88;
	background-color: #333;
	z-index: 9000;
	display: none;
}

#guasapl{

	position: fixed;
	top: 50%;
	left: -50px;
	padding: 5px 10px 20px 10px;
	border-left: 1px solid #666;
	border-radius: 15px;
	box-shadow: 3px -3px 3px #aaa;
	font-weight: normal;
	-webkit-transform: rotate(90deg);
	color: #ffff88;
	background-color: #333;
	z-index: 9000;
	display: none;
}

.totalUnread{

	margin: 0 0 -6px 8px;
	padding-top: 4px;
	display: inline-block;
	background-color: #007510;
	border-radius: 10px;
	width: 20px;
	height: 20px;
	font-size: 9px;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
}

#guasap{

	position: fixed;
	top: 10px;
	right: 0;
	width: 750px;
	height: calc(100% - 37px);
	display: none;
	background-color: #fff;
	border: 1px #ccc solid;
	border-radius: 5px; 
	z-index: 9001;

	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}


#guas-side{

	position:absolute;
	margin: 0;
	width: 300px;
}

#guas-main{

	position: absolute;
	top: 0px;
	left: 300px;
	background-image: url("/guas/guasapbg.png");
	margin: 0;
	width: 450px;
}

#guas-search{

	padding: 10px 0 0 10px;
	height: 40px;
	width: 100%;
	border-bottom: 1px solid #CCC;
}

#guas-search input{

	font-size: 10pt;
	border: 0;
	width: 250px;
	margin-left: 10px;
}

.guas-header{

	width: 100%;
	border-right: 1px solid rgba(0, 0, 0, 0.08);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	background-color: #eeeeee;
    padding: 10px 16px;
	height: 40px;
	font-weight: bold;
}

#guas-toolbar{background-color: #444; color: #ddd; font-size: 8pt; overflow: hidden;}

#gc-order{

	cursor:pointer;
	float:right;
	margin: 5px;
}

#guas-messages::-webkit-scrollbar{width: 5px;}
#guas-messages::-webkit-scrollbar-track{background-color: #FFFFFF;}
#guas-messages::-webkit-scrollbar-thumb{background-color: #AAAAAA;}

#guas-messages{

	height: 100%;
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: rgba(225,215,205,0.9);
}

#guas-contacts::-webkit-scrollbar{width: 5px;}
#guas-contacts::-webkit-scrollbar-track{background-color: #FFFFFF;}
#guas-contacts::-webkit-scrollbar-thumb{background-color: #AAAAAA;}

#guas-contacts{

	height: 100%;
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #EEE;
}

#tpl-contact, #tpl-message, #tpl-user-contact{display: none;}

.tcontact{

	margin: 0;
	padding-top: 6px;
	width: 100%;
	border-bottom: 1px solid #CCC;
	cursor: pointer;
	white-space: nowrap;
}

.tcontact.tc-closed{

	height: 50px;
}

.tcontact.tc-active{

	min-height: 55px;
	background-color: #eecc99;
}

.tc-name{

	margin: 0 10px 4px 10px;
	font-size: 9pt;
	font-weight: bold;	
}

.tc-name>div{

	overflow: hidden;
	max-width: 183px;
}

.tc-phone{

	float: right;
	margin-right: 8px;
	text-align:right;
	font-size:8pt;
	color: #666699;
}

.tc-date{

	margin: 4px 10px 0 0;
	float: right;
	text-align: right;
	width: 50px;
	font-size: 8pt;
	color: #666699;
}

.tc-mess{

	margin: 0 10px 5px 10px;
	max-height: 16px;
	max-width: 230px;
	overflow: hidden;
	font-size: 9pt;
	color: #666;
}

.tc-mess::before{

	content:...;
}

.tc-unread{

	margin-right: 10px;
	padding-top: 3px;
	float: right;
	text-align: center;
	width: 20px;
	height:20px;
	font-size: 8pt;
	font-weight: bold;
	color: #EEE;
	border-radius: 10px;
	background-color: #03D800;
}

.tc-user{

	font-size: 8pt;
	font-weight: bold;
	color: #666;
	display: block;
	padding-bottom: 6px;
}

.tc-active-glyph{

	margin: 8px 5px 0 5px;
}

.btn-noread{background-color: #bbbbbb;}
.btn-noread span{display:none;}

.noread{background-color: #03D800;}
.noread span{display:none;}

.tmessage{

	max-width: 65%;
	margin: 10px 20px;
	border-radius: 7.5px;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
}

.tm-btncopy{margin: 5px; float:right; cursor: pointer;}

.tm-message{

	padding-top: 10px;
	margin: 10px;
	font-size: 14px;
}

.message-in{background-color: #eeeeee;}
.message-out{background-color:#dcf8c6; float: right;}
.message-clear{clear: right;}


.tm-contact{

	margin: 0 0 10px 10px;
	display: inline-block;
	font-weight: bold;
	font-size: 8pt;
	color: #116000;
}

.tm-date{

	margin: 0 10px 10px 5px;
	display: inline-block;
	font-weight: normal;
	font-size: 8pt;
	color: #666699;
}

.tm-status{

	float: right;
	text-align: right;
	margin: 0 10px 0 0;
}

.input-message{

	position:absolute;
	bottom: 0;
	height: 80px;
	width:450px;
	background-color: #ffffff;
	padding: 10px;
	border: 1px solid #cccccc;
	border-bottom: 0;
}

#tmensaje{

	width: 360px;
	height: 60px;
	border: 0;
	resize: none;
}

.btn-message{

	position: absolute;
	bottom: 25px;
	right: 20px;
}

.servers{

	display: inline-block;
	margin: 5px;
}

.guas-disabled{

	display: inline-block;
	border-radius: 3px;
	width: 6px;
	height: 6px;
	background-color: #ff0000;
	margin-right:3px;
}

.guas-connected{

	display: inline-block;
	border-radius: 3px;
	width: 6px;
	height: 6px;
	background-color: #00ff99;
	margin-right:3px;
}

/* Phrases */


#fraguasr{

	position: fixed;
	top: calc(50% - 82px);
	right: -28px;
	padding: 5px 10px 20px 15px;
	border-radius: 15px;
	box-shadow: -3px -3px 3px #aaa;
	font-weight: normal;
	-webkit-transform: rotate(270deg);
	color: #ffff88;
	background-color: #334;
	z-index: 8999;
	display: none;
}

#fraguasl{

	position: fixed;
	top: calc(50% - 82px);
	left: -28px;
	padding: 5px 15px 20px 10px;
	border-radius: 15px;
	box-shadow: 3px -3px 3px #aaa;
	font-weight: normal;
	-webkit-transform: rotate(90deg);
	color: #ffff88;
	background-color: #334;
	z-index: 8999;
	display: none;
}

#fraguas{

	position: fixed;
	top: 10px;
	right: 0;
	width: 450px;
	height: calc(100% - 37px);
	display: none;
	background-color: #fff;
	border: 1px #ccc solid;
	border-radius: 5px; 
	z-index: 9001;
	overflow: hidden;

	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

#phrases-form{

}

.phrases-f-input{

	font-size: 9pt;
	width: 100%;
	padding: 10px;
	border-bottom: #ccc 1px solid;
}

.phrases-f-input>input{

	font-weight: bold;
	width: 100%;
	border: 0;
}

.phrases-f-input>textarea{

	width: 100%;
	border: 0;
	resize: none;
}

#tbphrases{

	font-size: 9pt;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #eee;
}

#tbphrases::-webkit-scrollbar{width: 5px;}
#tbphrases::-webkit-scrollbar-track{background-color: #FFFFFF;}
#tbphrases::-webkit-scrollbar-thumb{background-color: #AAAAAA;}

.phrases-title{

	font-weight: bold; 
}

.phrases-text{

	color: #666;	
}

.phrases-phrase{

	padding: 10px;
	display: inline-block;
	width: 100%;
	border-bottom: #ccc 1px solid;
	cursor:pointer;
	word-wrap: none;
	overflow: hidden;
}

.phrases-phrase:hover{

	background-color: #eecc99;
}

.phrases-appvar{

	margin: 5px 0 5px 0;
	cursor: pointer;
}

.phrases-appvar:hover{

	background-color: #eecc99;	
}

#phrases-appvars::-webkit-scrollbar{width: 5px;}
#phrases-appvars::-webkit-scrollbar-track{background-color: #FFFFFF;}
#phrases-appvars::-webkit-scrollbar-thumb{background-color: #AAAAAA;}

#phrases-commands{

	font-size: 8pt;
	color: #ddd;
	background-color: #444;
}

#phrases-appvars{

	margin: 5px 0 0 0;
	display: none;
	position: absolute;
	padding: 10px;
	width: 250px;
	max-height: 400px;
	font-size: 9pt;
	cursor: pointer;
	list-style-type: none;
	color: #333;
	background-color: #ddd;
	border: #aaa 1px solid;
	border-radius: 3px;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
	overflow-x: hidden;
	overflow-y: scroll;
}

.trash{

	float: right;
}