body {
  padding-top: 0;
  font-size: 12px;
  color: #333;
  background: #ecf0f5;
  font-family: 'Open Sans',sans-serif;
  margin-top:20px;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/work-sans-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
	   url('/fonts/work-sans-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	   url('/fonts/work-sans-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
	   url('/fonts/work-sans-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
	   url('/fonts/work-sans-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
	   url('/fonts/work-sans-v9-latin-regular.svg#WorkSans') format('svg'); /* Legacy iOS */
}	

.bg-white {
  background-color: #fff;
}

.friend-list {
  list-style: none;
margin-left: -40px;
}

.friend-list li {
  border-bottom: 1px solid #eee;
}

.friend-list li a img {
  float: left;
  width: 45px;
  height: 45px;
  margin-right: 0px;
}

 .friend-list li a {
  position: relative;
  display: block;
  padding: 10px 10px 5px 10px;
  transition: all .2s ease;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
}

.friend-list li.active a {
  background-color: #f1f5fc;
}

.friend-list li a .friend-name, 
.friend-list li a .friend-name:hover {
  color: #777;
}

.friend-list li a .last-message {
  width: 65%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.friend-list li a .time {
  position: absolute;
  top: 10px;
  right: 8px;
}

small, .small {
  font-size: 85%;
}

.friend-list li a .chat-alert {
  position: absolute;
  right: 8px;
  top: 27px;
  font-size: 10px;
  padding: 3px 5px;
}

.chat-message {
  padding: 15px 20px 115px;
}

.chat {
    list-style: none;
    margin: 0;
}

.chat-message{
    background: #f9f9f9;  
}

.chat li img {
  width: 45px;
  height: 45px;
  border-radius: 50em;
  -moz-border-radius: 50em;
  -webkit-border-radius: 50em;
}

img {
  max-width: 100%;
}

.chat-body {
  padding-bottom: 20px;
}

.chat li.left .chat-body {
  margin-left: 70px;
  background-color: #fff;
}

.chat li .chat-body {
  position: relative;
  font-size: 12px;
  padding: 10px;
  border: 1px solid #f1f5fc;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,.05);
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.chat li .chat-body .header {
  padding-bottom: 5px;
  border-bottom: 1px solid #f1f5fc;
}

.chat li .chat-body p {
  margin: 0;
}

.chat li.left .chat-body:before {
  position: absolute;
  top: 10px;
  left: -8px;
  display: inline-block;
  background: #fff;
  width: 16px;
  height: 16px;
  border-top: 1px solid #f1f5fc;
  border-left: 1px solid #f1f5fc;
  content: '';
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
}

.chat li.right .chat-body:before {
  position: absolute;
  top: 10px;
  right: -8px;
  display: inline-block;
  background: #fff;
  width: 16px;
  height: 16px;
  border-top: 1px solid #f1f5fc;
  border-right: 1px solid #f1f5fc;
  content: '';
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

.chat li {
  margin: 15px 0;
}

.chat li.right .chat-body {
  margin-right: 70px;
  background-color: #fff;
}

.chat-box {
  position: fixed;
  bottom: 0;
  left: 444px;
  right: 0;
  padding: 15px;
  border-top: 1px solid #eee;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
}

.primary-font {
  color: #3c8dbc;
}

a:hover, a:active, a:focus {
  text-decoration: none;
  outline: 0;
}


.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
 
}
.crop-content-page { display:block;}
 #add-title-head{ 
    border-bottom: 1px solid #d2d6de;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
 }
 
.crop-chat-info { position:relative; min-height:500px; }
#chatInfoScroll {
	border-bottom: 1px solid #3c8dbc;
	width:100%;
	top:28px;
	height:500px;
	overflow:auto;
}

#onlineInfoScroll {
	width:100%;
	top:20px;
	height:245px;
	overflow:auto;
}
.crop-msg-try{ width:100%;  margin: 0 auto;}
.crop-msg-try input#ChatMessage{ width:100%; min-height:50px; border-color: #fff;}
.crop-msg-try input#ChatMessage:focus{ border-color: #fff;}

.ln_solid {
  background-color: #ffffff;
  border-top: 1px solid #e5e5e5;
  color: #ffffff;
  height: 1px;
  margin: 40px 0px 25px 0px;
}
.ln_solid2 {
 border-top: 1px solid #e5e5e5;
 color: #ffffff;
 height: 1px;
 margin: 2px 0px 15px 0px;
}
.form-group span.request { color:#ff0000;}

.clear { clear:both;}
.p5t { padding-top:5px;}
.p10t { padding-top:10px;}
.p15t { padding-top:15px;}
.p20t { padding-top:20px;}
.p25t { padding-top:25px;}
.p30t { padding-top:30px;}
.p40t { padding-top:40px;}

.p5b { padding-bottom:5px;}
.p10b { padding-bottom:10px;}
.p15b { padding-bottom:15px;}
.p20b { padding-bottom:20px;}
.p25b { padding-bottom:25px;}
.p5l { padding-left:5px;}
.p10l { padding-left:10px;}
.p15l { padding-left:15px;}

.m20t { margin-top:20px;}
.m25t { margin-top:25px;}
.m30t { margin-top:30px;}
.m15b { margin-bottom:15px;}
.m20b { margin-bottom:20px;}
.m30b { margin-bottom:30px;}
.m35b { margin-bottom:35px;}
.m40b { margin-bottom:40px;}

#messRes { color:#cc0000; margin-top:5px;}
.login-box em{ color:#cc0000; font-size:12px; }

table#data-table {
  border-left: 1px solid #c1c1c1;
  border-bottom: 1px solid #c1c1c1;
}
table#data-table th {
	background: #f8f8f8 url() 0 0 no-repeat;
    color: #693333;
    padding: 14px 10px; 
	border-top: 2px solid #d2d6de;
}

table#data-table td {
    padding: 7px 10px;
    border-right: 1px solid #c1c1c1;
    border-top: 1px solid #c1c1c1; color: #000; font-size:12px;
	vertical-align:middle;
}

table#data-table tr:nth-child(odd) {
  background: #fff url() 0 0 no-repeat; 
}
table#data-table tr:nth-child(even) {
  background: #e8e8e8 url() 0 0 no-repeat; 
}
table#data-table tr:hover{
  background: #fcf1d0 url() 0 0 no-repeat;
}


/* li  customer list */
.crop-chat-customer-list-item{
 width:100%; float:left; clear:both; background-color:#f1f5fc; border-bottom: 1px solid #d2d6de;
}
.customer-list-item-action{
 width:100%; float:left; clear:both; padding:0px 10px 2px 0px;  
} 
.customer-list-item-action i{ float:right; font-size:14px; padding-left:5px; cursor:pointer;}
.customer-list-item-action .staff-support{ float:right; color:#3c8dbc; font-size:12px; }
#show-customer-online { color:#00A65A;}
.txt-default-chat-information { text-align:center; color:#ff0000; font-size:16px;}

/* ####  style-switcher  ##### */
.style-switcher {
  background-color: #222;
  position: fixed;
  right: -212px;
  top: 34px;
  width: 212px;
  z-index: 999;
  transition: all 1s;
}
.style-switcher.open {
  right: 0;
}
body.rtl .style-switcher {
  left: -212px;
  right: auto;
}
body.rtl .style-switcher.open {
  right: auto;
  left: 0;
}
.style-switcher hr {
  border-color: #121212;
  border-width: 0 0 1px;
  box-shadow: 0 1px #2A2A2A;
  margin: 10px 0;
}
.style-switcher h5 {
  background-color: #333;
  color: #fff;
  margin: 0;
  padding: 8px;
  line-height: 23px;
  text-shadow: 0 1px 0 #000;
  border-top: 1px solid #666;
}
.style-switcher h5 a {
  background: #333;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  color: #E1E1E8;
  left: -39px;
  padding: 8px 12px 8px 13px;
  position: absolute;
  text-decoration: none;
  top: 0;
  border: 1px solid #666;
  outline: 0 none;
}
.style-switcher h5 a i { font-size:14px;}
body.rtl .style-switcher h5 a {
  left: auto;
  right: -39px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.style-switcher .style-switcher-wrap {
  padding: 5px 10px;
  border: 1px solid #666;
  border-right-width: 0;
}
.style-switcher h6 {
  color: #fff;
  text-shadow: 0 1px 0 #000;
}

ul.menu-system li{
  list-style: outside none none;
  margin: 0;
  padding:5px 0px;
}

ul.menu-system li a{
 cursor:pointer; 
 color:#fff;
}
ul.menu-system li a:hover{
 color:#f39c12; 
 padding-left:5px;
}

/* permission page */
.crop-permission-item { width:100%; float:left; display:inline-block; clear:both; border-bottom: 1px solid #eee; }
.txt-permission-item { width:100%; float:left; font-weight:600; padding-bottom:7px; font-size:14px; }
.crop-permission-sub { width:100%; float:left; display:inline-block; clear:both; margin-bottom:10px; }
.crop-permission-sub label.txt-label{ width:20%; font-size:13px; }
.checkbox-permission { display:inline-block; width:auto; padding-right:50px; }
.checkbox-permission span{ padding-left:4px;}

.btn-box-tool2 {
	background: transparent none repeat scroll 0 0;
    color: #97a0b3;
    font-size: 12px;
    padding: 5px;
}
#about-me-content { display:none;}
#chatted-last{ display:none;}
#msgCustTitle { padding-left:20px; display:none; }

/* Reponsive  */
@media (min-width: 520px) {
 #about-me-content { display:block;}
 #chatted-last{ display: inline-block;}
}


@media (min-width: 768px) {
  .container {
    width: 768px;
  }
}
@media (min-width: 980px) {
  .container {
    width: 950px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 90%;
  }
}