@charset "UTF-8";

    .fa-wechat:before,
    .fa-weixin:before {
    	content: "\f1d7";
    }
    .fa-send:before,
    .fa-paper-plane:before {
    	content: "\f1d8";
    }
    .fa-send-o:before,
    .fa-paper-plane-o:before {
    	content: "\f1d9";
    }
    
    .scroller {
    	height: 100%;
    	overflow: hidden;
    	overflow-x: hidden;
    	overflow-y: hidden;
    	position: relative;
    }
    .scroller,
    .scroller * {
    	-webkit-user-select: none!important;
    	-moz-user-select: none!important;
    	-ms-user-select: none!important;
    	user-select: none!important;
    }
    .scroller,
    .scroller-content,
    .scroller-bar,
    .scroller-track,
    .scroller-handle {
    	box-sizing: border-box;
    }
    .scroller-content {
    	position: relative;
    	z-index: 1;
    	height: 100%;
    	overflow: auto;
    	overflow-x: hidden;
    	overflow-y: scroll;
    	-webkit-overflow-scrolling: touch;
    }
    .scroller-content::-webkit-scrollbar,
    .scroller-content::-webkit-scrollbar-button,
    .scroller-content::-webkit-scrollbar-track,
    .scroller-content::-webkit-scrollbar-track-piece,
    .scroller-content::-webkit-scrollbar-thumb,
    .scroller-content::-webkit-scrollbar-corner,
    .scroller-content::-webkit-resizer {
    	background: transparent;
    	opacity: 0;
    }
    .scroller-bar {
    	width: 6px;
    	height: 100%;
    	position: absolute;
    	right: 0;
    	top: 0;
    	z-index: 2;
    	display: none;
    	opacity: 0;
    	transition: opacity 0.3s ease;
    }
    .scroller-active .scroller-bar {
    	opacity: 1;
    }
    .scroller-track {
    	width: 100%;
    	height: 100%;
    	position: relative;
    	overflow: hidden;
    }
    .scroller-handle {
    	width: 5px;
    	height: 20px;
    	position: absolute;
    	top: 0;
    	right: 0;
    	z-index: 2;
    	background: #cccccc;
    	cursor: pointer;
    	transition: height 0.3s ease;
    }
    .scroller-horizontal .scroller-content {
    	overflow: auto;
    	overflow-x: auto;
    	overflow-y: hidden;
    	padding: 0 0 16px 0;
    }
    .scroller-horizontal .scroller-bar {
    	width: 100%;
    	height: 5px;
    	top: auto;
    	bottom: 0;
    	border-width: 1px 0 0 0;
    }
    .scroller-horizontal .scroller-handle {
    	width: 20px;
    	height: 5px;
    	top: auto;
    	right: auto;
    	bottom: 3px;
    }
    .scroller-setup .scroller-content,
    .scroller-active .scroller-content {
    	padding: 0;
    }
    .scroller-setup .scroller-bar,
    .scroller-active .scroller-bar {
    	display: block;
    }
    .panel-scroller {
    	padding: 0;
    	height: 600px;
    	max-height: 600px;
    	overflow: hidden;
    }
    .panel-scroller .scroller-content {
    	padding: 12px;
    }
    .panel-scroller .scroller-bar {
    	width: 14px;
    	background: #f7f7f7;
    	border-left: 1px solid #e7e7e7;
    }
    .panel-scroller .scroller-handle {
    	right: 4px;
    	width: 5px;
    	height: 20px;
    	border-radius: 4px;
    }
    .scroller-xs {
    	height: 125px;
    	max-height: 125px;
    }
    .scroller-sm {
    	height: 200px;
    	max-height: 200px;
    }
    .scroller-md {
    	height: 300px;
    	max-height: 300px;
    }
    .scroller-lg {
    	height: 400px;
    	max-height: 400px;
    }
    .scroller-thick .scroller-bar {
    	width: 12px;
    }
    .scroller-thick .scroller-handle {
    	width: 12px;
    	right: 0;
    	border-radius: 0;
    }
    .panel-scroller.scroller-overlay .scroller-bar {
    	background: transparent;
    	border: 0;
    }
    .panel-scroller.scroller-overlay .scroller-handle {
    	opacity: 0;
    	transition: opacity 0.3s ease;
    }
    .panel-scroller.scroller-overlay:hover .scroller-handle {
    	opacity: 1;
    }
    .panel-scroller.scroller-overlay .scroller-content {
    	padding: 0;
    	margin-right: -17px;
    }
    .scroller.scroller-pn .scroller-content {
    	padding: 0!important;
    }
    .scroller-primary .scroller-handle {
    	background: #3498db;
    }
    .scroller-success .scroller-handle {
    	background: #70ca63;
    }
    .scroller-info .scroller-handle {
    	background: #3bafda;
    }
    .scroller-warning .scroller-handle {
    	background: #f6bb42;
    }
    .scroller-danger .scroller-handle {
    	background: #df5640;
    }
    .scroller-alert .scroller-handle {
    	background: #967adc;
    }
    .scroller-system .scroller-handle {
    	background: #37bc9b;
    }
    .scroller-dark .scroller-handle {
    	background: #3b3f4f;
    }
    .scroller-light .scroller-handle,
    .scroller-white .scroller-handle {
    	background: #fafafa;
    }
    .scroller-light .scroller-bar,
    .scroller-white .scroller-bar {
    	border-left: 0;
    	background: transparent;
    }
    
    
    
    

    .bg-light-chat .text-muted {
      color: #999;
    }
    .bg-light-chat .text-darken {
      color: #222;
    }
    .bg-light-chat.light {
      background-color: #FEFEFE;
    }
    .bg-light-chat.lighter {
      background-color: #FFF;
    }
    .bg-light-chat.dark {
      background-color: #F2F2F2;
    }
    .bg-light-chat.darker {
      background-color: #E7E7E7;
    }

    .input-group {
		position:relative;
		display:table;
		border-collapse:separate;
	}
	.input-group[class*="col-"] {
		float:none;
		padding-left:0;
		padding-right:0;
	}
	.input-group .form-control {
		position:relative;
		z-index:2;
		float:left;
		width:100%;
		margin-bottom:0;
	}
	.input-group-lg>.form-control,
	.input-group-lg>.input-group-addon,
	.input-group-lg>.input-group-btn>.btn {
		height:45px;
		padding:10px 16px;
		font-size:17px;
		line-height:1.33;
		border-radius:3px;
	}
	
    .panel-body-chat {
		position:relative;
		padding:0px;
		border:1px solid #e2e2e2;
	}
	.panel-body-chat+.panel-footer-chat {
		border-top:0;
	}
	.panel-heading-chat {
		position:relative;
		height:52px;
		line-height:49px;
		letter-spacing:0.2px;
		color:#000;
		font-size:15px;
		font-weight:400;
		padding:0 8px;
		background:#a6d1e0;
		border:1px solid #e2e2e2;
		border-top-right-radius:3px;
		border-top-left-radius:3px;
	}
	.panel-heading-chat+.panel-body-chat {
		border-top:0;
	}

    .panel-footer-chat {
		padding:10px 15px;
		background-color:#fafafa;
		border:1px solid #e2e2e2;
		border-bottom-right-radius:2px;
		border-bottom-left-radius:2px;
	}


	.chat-widget {}.chat-widget .media-left {
		padding-right:20px;
	}
	.chat-widget .media-right {
		padding-left:20px;
	}
	.chat-widget .media-left img,
	.chat-widget .media-right img {
		max-width:55px;
		border-radius:3px;
		border:2px solid #FFF;
	}
	.chat-widget .media-body {
		position:relative;
		padding:7px;
		border-radius:15px;
		border:1px solid #e4e4e4;
		background-color:#fefefe;
		font-weight:400;
		color: #000000;
	}
	.chat-widget .media-body:before,
	.chat-widget .media-body:after {
		content:"";
		position:absolute;
		right:-9px;
		top:12px;
		width:0;
		height:0;
		border-color:transparent;
		border-style:solid;
		border-width:8px 0px 8px 9px;
		border-left-color:#777;
	}
	.chat-widget .media-body:after {
		border-left-color:#FFF;
	}
	.chat-widget .media-body-penerima {
		position:relative;
		padding:7px;
		border-radius:15px;
		border:1px solid #bbeec1;
		background-color:#bbeec1;
		font-weight:400;
		color: #000000;
	}
	.chat-widget .media-body-penerima:before,
	.chat-widget .media-body-penerima:after {
		content:"";
		position:absolute;
		right:-9px;
		top:12px;
		width:0;
		height:0;
		border-color:transparent;
		border-style:solid;
		border-width:8px 0px 8px 9px;
		border-left-color:#777;
	}
	.chat-widget .media-body-penerima:after {
		border-left-color:#bbeec1;
	}
	.chat-widget .media-left+.media-body:before,
	.chat-widget .media-left+.media-body:after {
		content:"";
		position:absolute;
		left:-9px;
		top:12px;
		width:0;
		height:0;
		border-color:transparent;
		border-style:solid;
		border-width:8px 9px 8px 0px;
		border-right-color:#777;
	}
	.chat-widget .media-left+.media-body:after {
		border-right-color:#FFF;
	}
	.chat-widget .media-status {
		position:relative;
	}
	.chat-widget .media-status+.media-heading {
		padding-left:20px;
	}
	.chat-widget .media-status:after {
		position:absolute;
		top:0px;
		left:3px;
		font-family:"FontAwesome";
		content:"\f111";
		font-size:10px;
		color:#AAA;
	}
	.chat-widget .media-status.online:after {
		color:#70ca63;
	}
	.chat-widget .media-status.offline:after {
		color:#e9573f;
	}
	.chat-widget .panel-footer .input-group .form-control {
		z-index:0;
	}
	
	
	
	
	
	/* Chat Widget */
.navbar .nav > li.dropdown .chat-widget .media-left {
  padding-right: 10px;
}
.navbar .nav > li.dropdown .chat-widget .media-right {
  padding-left: 10px;
}
.navbar .nav > li.dropdown .chat-widget .media-left img,
.navbar .nav > li.dropdown .chat-widget .media-right img {
  max-width: 35px;
  border-radius: 2px;
  border: 0;
}
.navbar .nav > li.dropdown .chat-widget .media-body {
  padding: 5px;
  background-color: #fafafa;
}
.navbar .nav > li.dropdown .chat-widget .media-status:after {
  font-size: 9px;
}
/* Alerts Widget */
.navbar .nav > li.dropdown .alerts-widget .media {
  position: relative;
}
.navbar .nav > li.dropdown .alerts-widget .media-left {
  vertical-align: middle;
  padding-right: 11px;
  border-right: 1px dashed #DDD;
}
.navbar .nav > li.dropdown .alerts-widget a.media-left {
  color: #AAA;
  font-size: 18px;
}
.navbar .nav > li.dropdown .alerts-widget .media-body {
  font-size: 12px;
  font-weight: 400;
  padding-left: 13px;
}
.navbar .nav > li.dropdown .alerts-widget .media-heading {
  margin-bottom: 3px;
}
.navbar .nav > li.dropdown .alerts-widget .media-right {
  position: absolute;
  right: 0;
  top: -3px;
  text-align: right;
}
.navbar .nav > li.dropdown .alerts-widget .media-right .btn.btn-xs {
  font-size: 11px;
  padding: 0px 5px;
}
.navbar .nav > li.dropdown .alerts-widget .media-right .media-response {
  font-size: 10px;
  font-weight: 400;
  margin-bottom: 2px;
}
.navbar .nav > li.dropdown .alerts-widget .media-right .media-response.single {
  font-size: 11px;
  padding-top: 10px;
}

    .media {
		color:#999999;
		font-weight:600;
		margin-top:15px;
	}
	.media:first-child {
		margin-top:0;
	}
	.media-right,
	.media>.pull-right {
		padding-left:10px;
	}
	.media-left,
	.media>.pull-left {
		padding-right:10px;
	}
	.media-left,
	.media-right,
	.media-body,
	.media-body-penerima {
		display:table-cell;
		vertical-align:top;
	}
	.media-middle {
		vertical-align:middle;
	}
	.media-bottom {
		vertical-align:bottom;
	}
	.media-heading {
		color:#555555;
		margin-top:0;
		margin-bottom:5px;
	}
	.media-list {
		padding-left:0;
		list-style:none;
	}