\!/ KyuuKazami \!/

//
// Avant
// (c) The Red Team
//
// The Theme Rightbar
// --------------------------------------------------

#page-rightbar {	
	background: #fafbfc;
	display: none;
	width: 300px; 
	top: 40px;
	right: 0;
	bottom: 0;
	height: 100%;
	z-index: @zindex-navbar-fixed - 1;
	overflow: hidden;
	position: fixed;
	border-left: 1px solid @border-darker;
	.box-shadow(~"-1px 0px 1px rgba(0, 0, 0, 0.04)");
	> div {padding: 0 10px;}
}

body.show-rightbar {
	#page-rightbar 	{display: block;}

	#widgetarea {
		display: block;
		overflow: visible;
	}

	.widget-heading {
		padding: 0 10px;
		margin: 10px -10px 0px -10px;
		background-color: @gray-lighter;
		a {text-decoration: none; color: inherit;
			h4 {
				font-size:@font-size-base;
				color: #1a1a1a;
				line-height: 1em;
				display: block;
				padding: 10px 0px 10px;
				margin: 0;
				text-transform: uppercase;
				letter-spacing: 0.04em;
				&:after {
					.opacity(0.5);
					content:"\f107";
					font-family: FontAwesome;
					font-style: normal;
					font-weight: normal;
					float: right;
				}
			}
			&.collapsed h4:after {content:"\f104";.opacity(0.5)}
		}
	}

	.widget-body {
		margin-top: 0px;
		.clearfix();
		.more {
			padding-top: 0px;
			font-size: @font-size-small;
			float: right;
		}

		
		.widget-block {
			.clearfix();
			 padding: 10px;
			 margin-bottom: 10px;
			 border-radius: @border-radius-small;
			 small {
			 	display: block;
			 	color: #fff;
			 	color: rgba(255,255,255,0.75)
			 }
			 h5 {
			 	margin: 0;
			 	color: #fff;
			 	font-size: 1.3em;
			 	>small {vertical-align: super;display: inline;font-size: 0.6em;}
			 }
		}
	}

	/* Style of the Chat area */
	#chatarea {
		display: none;
		margin-top: 10px;

		.chatuser {
			font-size:@font-size-large; 
			margin:0 0px;
		}

		.chathistory {
			// overflow:hidden;
			bottom: 122px;
			top: 40px;
			position: absolute;
			height: auto;
			display:block;
			z-index: 999999999;

			// Add stylized scrollbar
			overflow-y: auto;
			overflow-x: hidden;
		}
		.chatinput {
			height:100px; width: 279px;
			bottom: 10px; position: absolute;
			textarea {
				border: 1px solid @border-darker;
				text-decoration: none;
				background-color: #fff;
				width: 100%;
				height: 62px;
				padding: 10px;
				resize:none;
			}
		}


		.chatmsg {
			text-align: right;
			position: relative;
			background: @gray-lighter;
			color: #1a1a1a;
			width: 279px;
			padding: 10px;
			margin: 10px 0 20px;
			border-radius: @border-radius-base;


			&:after {
				content: "";
				height: 0;
				width: 0;
				position: absolute;
				pointer-events: none;
				top: 100%;
				right: 5%;
				border-top: 10px solid @gray-lighter;
				border-left: 15px solid transparent;
			}
			p { 
				margin: 0;
				font-size:14px;
			}
			span {
				padding-top: 5px;
				display: block;
				text-align: left;
				font-size: 12px;
				.opacity(0.3);
			}

			&.sent {
				text-align: left;
				background: @brand-midnightblue;
				color: #fff;
				position: relative;

				span {
					text-align: right;
				}

				&:after {
					left: 5%;
					right: auto;
					border-left:none;
					border-top: 10px solid @brand-midnightblue;
					border-right: 15px solid transparent;

				
				}	
			}
		}
	}
}

.chat-users {
	.list-unstyled();
	margin-top: 10px;padding: 0;

	a {display: block; color: #4d4d4d;}
	a:hover {text-decoration: none; background-color: #f2f3f5; border-radius: @border-radius-small;}
	li {margin: 5px 0px 0 0px;}
	li:first-child {margin-top:0;}

	img {width: 30px;height: 30px; border-radius: @border-radius-small;}
	span {padding-left: 10px}

	li a:after {
		content:"•";
		float: right;
		font-size: 1.5em;
		padding-right: 3px;
	}

	li[data-stats="online"] a:after 	{color: @brand-success;}
	li[data-stats="busy"] a:after 		{color: @brand-danger;}
	li[data-stats="away"] a:after 		{color: @brand-warning;}
	li[data-stats="offline"] a:after 	{color: @gray-lighter;}
}

//Chrome's custom scrollbars, if you want to use it instead of nicescroll

// #chatarea .chathistory, #widgetarea {
// 	&::-webkit-scrollbar-track {
// 		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
// 		border-radius: 10px;
// 		background-color: #F5F5F5;
// 	}
// 	&::-webkit-scrollbar {
// 		width: 6px;
// 		background-color: #F5F5F5;
// 	}
// 	&::-webkit-scrollbar-thumb {
// 		border-radius: 10px;
// 		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
// 		background-color: #777;
// 	}
// }