Просмотр архива МaterialChat

.p-b-10 {  padding-bottom: 10px !important;  }

/*Right
sidebar*/
.navbar-top-links > li.right-side-toggle a:focus {
   
background: #4F5467;
}
.right-sidebar {
    position: fixed;
    right:
-240px;
    width: 240px;
    display: none;
    z-index: 9999;
   
background: #ffffff;
    top: 0px;
    height: 100%;
    box-shadow: 5px
1px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.3s
ease;
}
.right-sidebar .rpanel-title {
    display: block;
    padding:
21px;
    color: #fff;
    text-transform: uppercase;
    font-size:
13px;
    background: #ff6849;
}
.right-sidebar .rpanel-title span {
  
 float: right;
    cursor: pointer;
    font-size:
11px;
}
.right-sidebar .rpanel-title span:hover {
    color:
#2b2b2b;
}
.right-sidebar .r-panel-body {
    padding:
20px;
}
.right-sidebar .r-panel-body ul {
    margin: 0px;
    padding:
0px;
}
.right-sidebar .r-panel-body ul li {
    list-style: none;
   
padding: 5px 0;
}
.shw-rside {
    right: 0px;
    width: 240px;
   
display: block;
}

/*Style switcher*/
ul#themecolors {
    display:
block;
}
ul#themecolors li {
    display:
inline-block;
}
ul#themecolors li:first-child {
    display:
block;
}
#themecolors li a {
    width: 50px;
    height: 50px;
   
display: inline-block;
    margin: 5px;
    color: transparent;
   
position: relative;
}
#themecolors li a.working:before {
    content:
"\f00c";
    font-family: "FontAwesome";
   
font-size: 18px;
    line-height: 50px;
    width: 50px;
    height:
50px;
    position: absolute;
    top: 0;
    left: 0;
    color:
#fff;
    text-align: center;
}
.default-theme {
    background:
#fb9678;
}
.green-theme {
    background: #00c292;
}
.yellow-theme {

   background: #a0aec4;
}
.blue-theme {
    background:
#03a9f3;
}
.purple-theme {
    background: #9675ce;
}
.megna-theme {

   background: #01c0c8;
}
.default-dark-theme {
    background:
#4f5467;
    /* Old browsers */
    background:
-moz-linear-gradient(left, #4f5467 0%, #4f5467 23%, #fb9678 23%, #fb9678
99%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left,
#4f5467 0%, #4f5467 23%, #fb9678 23%, #fb9678 99%);
    /*
Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,
#4f5467 0%, #4f5467 23%, #fb9678 23%, #fb9678 99%);
    /* W3C, IE10+,
FF16+, Chrome26+, Opera12+, Safari7+ */
    filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f5467',
endColorstr='#fb9678', GradientType=1);
    /* IE6-9
*/
}
.green-dark-theme {
    background: #4f5467;
    /* Old browsers
*/
    background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%,
#00c292 23%, #00c292 99%);
    /* FF3.6-15 */
    background:
-webkit-linear-gradient(left, #4f5467 0%, #4f5467 23%, #00c292 23%, #00c292
99%);
    /* Chrome10-25,Safari5.1-6 */
    background:
linear-gradient(to right, #4f5467 0%, #4f5467 23%, #00c292 23%, #00c292
99%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f5467',
endColorstr='#00c292', GradientType=1);
    /* IE6-9
*/
}
.yellow-dark-theme {
    background: #4f5467;
    /* Old browsers
*/
    background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%,
#a0aec4 23%, #a0aec4 99%);
    /* FF3.6-15 */
    background:
-webkit-linear-gradient(left, #4f5467 0%, #4f5467 23%, #a0aec4 23%, #a0aec4
99%);
    /* Chrome10-25,Safari5.1-6 */
    background:
linear-gradient(to right, #4f5467 0%, #4f5467 23%, #a0aec4 23%, #a0aec4
99%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f5467',
endColorstr='#a0aec4', GradientType=1);
    /* IE6-9
*/
}
.blue-dark-theme {
    background: #4f5467;
    /* Old browsers
*/
    background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%,
#03a9f3 23%, #03a9f3 99%);
    /* FF3.6-15 */
    background:
-webkit-linear-gradient(left, #4f5467 0%, #4f5467 23%, #03a9f3 23%, #03a9f3
99%);
    /* Chrome10-25,Safari5.1-6 */
    background:
linear-gradient(to right, #4f5467 0%, #4f5467 23%, #03a9f3 23%, #03a9f3
99%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f5467',
endColorstr='@info', GradientType=1);
    /* IE6-9
*/
}
.purple-dark-theme {
    background: #4f5467;
    /* Old browsers
*/
    background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%,
#9675ce 23%, #9675ce 99%);
    /* FF3.6-15 */
    background:
-webkit-linear-gradient(left, #4f5467 0%, #4f5467 23%, #9675ce 23%, #9675ce
99%);
    /* Chrome10-25,Safari5.1-6 */
    background:
linear-gradient(to right, #4f5467 0%, #4f5467 23%, #9675ce 23%, #9675ce
99%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f5467',
endColorstr='@purple', GradientType=1);
    /* IE6-9
*/
}
.megna-dark-theme {
    background: #4f5467;
    /* Old browsers
*/
    background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%,
#01c0c8 23%, #01c0c8 99%);
    /* FF3.6-15 */
    background:
-webkit-linear-gradient(left, #4f5467 0%, #4f5467 23%, #01c0c8 23%, #01c0c8
99%);
    /* Chrome10-25,Safari5.1-6 */
    background:
linear-gradient(to right, #4f5467 0%, #4f5467 23%, #01c0c8 23%, #01c0c8
99%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f5467',
endColorstr='@megna', GradientType=1);
    /* IE6-9 */
}

/*Style
Switcher*/
/*custom tab2*/
.customtab2 {
    border-bottom: 1px solid
#f7fafc;
    border-top: 1px solid #f7fafc;
    padding: 10px 0;
   
background:#f9f9f9;
}
.customtab2 li.active a,
.customtab2 li.active
a:hover,
.customtab2 li.active a:focus {
    background: #ff6849;
   
border: 1px solid #ff6849;
    color: #ffffff;
}
.customtab2 li
a,
.customtab2 li a:hover,
.customtab2 li a:focus {
    border:
0px;
}
.customtab2 > li > a {
    border-radius: 0px;
    color:
#2b2b2b;
}
/*custom tab2*/
/* Chat widget */

.chat-list {
   
list-style: none;
    max-height: 350px;
    padding: 0px
20px;
}
.chat-list li {
    margin-bottom: 24px;
    overflow:
auto;
}
.chat-list .chat-image {
    display: inline-block;
    float:
left;
    text-align: center;
    width: 50px;
}
.chat-list .chat-image
img {
    border-radius: 100%;
    width: 100%;
}
.chat-list .chat-text
{
    background: #f7fafc;
    border-radius: 0px;
    display:
inline-block;
    padding: 15px;
    position: relative;
}
.chat-list
.chat-text h4 {
    color: #1a2942;
    display: block;
    font-size:
12px;
    font-style: normal;
    font-weight: bold;
    margin: 0;
   
line-height: 15px;
    position: relative;
}
.chat-list .chat-text p {

   margin: 0px;
    padding-top: 3px;
}
.chat-list .chat-text b {
   
font-size: 10px;
    opacity: 0.8;
}
.chat-list .chat-body {
   
display: inline-block;
    float: left;
    font-size: 12px;
   
margin-left: 12px;
    width: 65%;
}
.chat-list .odd .chat-image {
   
float: right !important;
}
.chat-list .odd .chat-body {
    float: right
!important;
    margin-right: 12px;
    text-align: right;
    color:
#ffffff;
}
.chat-list .odd .chat-text {
    background:
#ff6849;
}
.chat-list .odd .chat-text h4 {
    color:
#ffffff;
}
.chat-send {
    padding-left: 0px;
    padding-right:
30px;
}
.chat-send button {
    width: 100%;
}
.chat {
    margin:
0;
    padding: 0;
    list-style: none;
}
.chat li {
   
margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px
dotted rgba(120, 130, 140, 0.13);
}
.chat li.left .chat-body {
   
margin-left: 60px;
}
.chat li.right .chat-body {
    margin-right:
60px;
}
.chat li .chat-body p {
    margin: 0;
}
.panel .slidedown
.glyphicon,
.chat .glyphicon {
    margin-right: 5px;
}
.chat-panel
.panel-body {
    height: 350px;
    overflow-y:
scroll;
}

.chat-main-box {
    position: relative;
    background:
#ffffff;
    overflow: hidden;
}
.chatboxblink{ background:
#353c48;}

.chat-main-box .chat-left-aside {
    position: absolute;
  
 width: 250px;
    z-index: 9;
    top: 0px;
    border-right: 1px solid
rgba(120, 130, 140, 0.13);
}
.chat-main-box .chat-left-aside .open-panel
{
    display: none;
    cursor: pointer;
    position: absolute;
   
left: 100%;
    top: 50%;
    z-index: 100;
    background-color:
#fff;
    -webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);
   
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);
    border-radius: 0 100px 100px
0;
    line-height: 1;
    padding: 15px 8px 15px 4px;
}
.chat-main-box
.chat-left-aside .open-panel{    background-color: #353c48 !important;
color: #fff;}
.chat-main-box .chat-left-aside .chat-left-inner
.form-control {
    height: 60px;
}
.chat-main-box .chat-left-aside
.chat-left-inner .style-none {
    padding: 0px;
    height:
540px;
}
.chat-main-box .chat-left-aside .chat-left-inner .style-none li
{
    list-style: none;
    overflow: hidden;
}
.chat-main-box
.chat-left-aside .chat-left-inner .style-none li a {
    padding: 13px
25px;
}
.wchat .chat-left-aside .chat-left-inner .style-none li
a:hover,
.wchat .chat-left-aside .chat-left-inner .style-none li a.active
{
    background: #f7fafc;
}
.chat-main-box .chat-right-aside {
   
margin-left: 250px;
}
.chat-main-box .chat-right-aside .chat-list {
   
max-height: none;
    height: 100%;
    padding-top:
40px;
}
.chat-main-box .chat-right-aside .chat-list .chat-text {
   
border-radius: 6px;
}
.chat-main-box .chat-right-aside .send-chat-box {

   position: relative;
}

.chat-main-box .chat-right-aside
.send-chat-box .form-control {
    border: none;
    border-top: 1px
solid rgba(120, 130, 140, 0.13);
    resize: none;
    height: 80px;
   
padding-right: 95px;
}
.chat-main-box .chat-right-aside .send-chat-box
.form-control:focus {
    border-color: rgba(120, 130, 140,
0.13);
}
.chat-main-box .chat-right-aside .send-chat-box .custom-send {

   position: absolute;
    right: 10px;
    top: 10px;
}
.chat-main-box
.chat-right-aside .send-chat-box .custom-send .cst-icon {
    color:
#686868;
    margin-right: 10px;
}
/*Chat online*/
.chatonline img {
 
  margin-right: 10px;

    width: 40px;
}
.chatonline li a {
   
padding: 15px 0;
    float: left;
    width: 100%;
}

.chatboxhead
small {
    display: block;
    font-size: 10px;
}
.mega-dropdown-menu
{
    height: 340px;
    overflow: auto;
}
.left-aside {
    position:
relative;
    width: 100%;
    border: 0px;
}
.right-aside {
   
margin-left: 0px;
}
.chat-main-box .chat-left-aside {
    left:
-250px;
    transition: 0.5s ease-in;
    background:
#ffffff;
}
.chat-main-box .chat-left-aside.open-pnl {
    left:
0px;
}
.chat-main-box .chat-left-aside .open-panel {
    display:
block;
}
.chat-main-box .chat-right-aside {
    margin:
0px;
}
.chat-right-aside.right{ width: 100%;padding-right:
0px;}

/*******************light-dark COLOR CSS*************/

.wchat
{
    background-color: #fff;
}
.wchat-header {
    background-color:
#fff !important;
}
.wchat-chat {
    background-color: #fff;
}
.wchat
.chat-left-aside {
    background: #fff;
}
.incoming-msgs {
   
background-color: #353c48 !important;
    color: #fff;
}
.wchat
.chat-left-aside .open-panel {
    background-color: #353c48 !important;

   color: #fff;
}
.block-wchat {
    background-color:
#f9f9f9;
}
.block-wchat .input-container {
    background-color:
#fff;
}
.drawer {
    background-color:
#fff;
}
/*******************light-dark  COLOR CSS*************/
#wchat
{
    font-family: 'Roboto', sans-serif !important;
    text-rendering:
optimizeLegibility;
    font-feature-settings: "kern";
   
-webkit-font-feature-settings: "kern";
   
-moz-font-feature-settings: "kern=1";
    -webkit-user-select:
none;
    -moz-user-select: none;
    -ms-user-select: none;
   
user-select: none;
	height: 100%;
    width: 100%;
    overflow:
hidden;
    padding: 0;
    margin: 0;
}
#wchat {
    background:
url(../images/night.png);
	position: absolute;top: 0;left: 0;
}
.wchat
{
	position: relative;overflow: hidden;-webkit-transform-origin:
center;transform-origin: center;-webkit-animation: app-enter .3s
cubic-bezier(.1, .82, .25, 1);animation: app-enter .3s cubic-bezier(.1,
.82, .25, 1);background-position: top left;background-repeat:
repeat-x;display: -webkit-box;display: -ms-flexbox;display:
flex;
}
.wchat-wrapper {
	width: 100%;height: 100%;overflow:
hidden;
}



@media screen and (max-height: 500px){
    .wchat {
   
    /*min-height: 500px;*/
    }
    .wchat-wrapper {
       
overflow-y: auto;
    }
}
@media screen and (max-width: 500px){
   
.max-profile-picture {
        width: 40px !important;
        height:
40px !important;
        margin-right: 0px !important;
    }
   
.max-profile-picture img {
        min-height: 40px !important;
    }
  
 .chat-list .chat-text {
        padding: 10px !important;
    }
   
.chat-list {
        padding: 0 !important;
    }
    .wchat
.chat-left-aside {
        transition: 0.5s ease-in;position:
absolute;transition: 0.5s ease-in;
        width: 265px !important;
     
  left: -265px;
    }

}
@media screen and (max-width: 648px){
   
.wchat {
        min-width: 100%;
    }
    .three .wchat-three {
     
  position: absolute;left: 0% !important;width: 100% !important;
    }
  
 .three .wchat-two {
        position: absolute;/*left: 40%;*/width: 100%
!important;
    }
}
@media screen and (max-width: 900px) {
    .two
.wchat-one {
        width: 40%;
    }
    .two .wchat-two {
       
width: 60% !important;
    }

    .three .wchat-one {
        width:
40% !important;
    }
    .three .wchat-two {
        width: 60%
!important;
    }
    .three .wchat-three {
        position:
absolute;left: 40%;width: 60%;
    }
}
@media screen and (min-width:
901px) and (max-width: 1024px) {
    .two .wchat-one {
        width: 35%
!important;
    }
    .two .wchat-two {
        width: 65% !important;

   }

    .three .wchat-one {
        width: 35% !important;
    }
   
.three .wchat-two {
        width: 65% !important;
    }
    .three
.wchat-three {
        position: absolute;left: 35%;width: 65%
!important;
    }
}
@media screen and (min-width: 1025px) and
(max-width: 1300px) {
    .two .wchat-one {
        width: 35%
!important;
    }
    .two .wchat-two {
        width: 65% !important;

   }

    .three .wchat-one {
        width: 30% !important;
    }
   
.three .wchat-two {
        width: 40% !important;
    }
    .three
.wchat-three {
        width: 30% !important;
    }
}
@media screen and
(max-width: 1199px) {
    .wchat {
        width: 100%;height:
100%;border-radius: 0;top: 0
    }
}
@media screen and (min-width:
1200px){
    .wchat-wrapper-web .wchat {
        width: 1118px;height:
calc(100% - 38px);margin: 0 auto;top: 19px;border-radius: 3px;
   
}
}
@media screen and (min-width: 1301px) {
    .two .wchat-one {
     
  width: 30% !important;
    }
    .two .wchat-two {
        width: 70%
!important;
    }

    .three .wchat-one {
        width: 25%
!important;
    }
    .three .wchat-two {
        width: 45%
!important;
    }
    .three .wchat-three {
        width: 30%
!important;
    }
}
@media screen and (min-width: 1320px){
   
.wchat-wrapper-web .wchat {
        width: 1276px;
   
}
}


.wchat-chat-tile-container {
	position: relative;order:
2;-webkit-flex: 1 1 auto !important;-ms-flex: 1 1 auto !important;flex: 1 1
auto !important;-webkit-flex-wrap: nowrap !important;-ms-flex-wrap: nowrap
!important;flex-wrap: nowrap !important;
}
/*Chat-box*/
.wchat
.chat-left-aside.open-pnl {
	left: 0px !important;
}
.wchat
.contact-list{
	padding: 0 20px;
}
.wchat .contact-drawer{
   
position: absolute;
    width: 100%;
    display: -webkit-box;
   
height: calc(100% - 100px);
    top: 100px;
}

.wchat .chat-left-aside
.open-panel {
    display: none;
    cursor: pointer;
    position:
absolute;
    left: 100%;
    top: 50%;
    z-index: 100;
   
background-color: #fff;
    -webkit-box-shadow: 1px 0 3px rgba(0, 0, 0,
0.2);
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);
    border-radius: 0
100px 100px 0;
    line-height: 1;
    padding: 15px 8px 15px
4px;
}
@media screen and (min-width: 501px) and (max-width: 767px){
   
.wchat .chat-left-aside {
        transition: 0.5s ease-in;
       
position: absolute;
        transition: 0.5s ease-in;
        left:
-265px;
    }
}
@media (max-width: 767px){

    .wchat
.chat-right-aside {
        margin-left: 0px !important;left: 0px
!important;
    }
    .wchat .chat-left-aside .open-panel {
       
display: block;
    }
    .two .wchat-one {
        width: auto;
   
}
    .two .wchat-two {
        width: 100% !important;
    }
   
.three .wchat-three {
        width: 100% !important;
    }


   
.chat-main-box .chat-left-aside.open-pnl {
        left: 0px;
    }
   
.chat-main-box .chat-left-aside {
        left: -265px;
       
transition: 0.5s ease-in;
        background: #ffffff;
    }
   
.chat-main-box .chat-left-aside .open-panel {
        display: block;
   
}
}

@media (min-width: 767px){
	.wchat .chat-left-aside {
       
position: relative;
        z-index: 9;top: 0px;border-right: 1px solid
rgba(120, 130, 140, 0.13);
    }
    .wchat .chat-right-aside {
       
margin-left: 0px;
    }
    .wchat .right {
        position:
relative;float: left;width: 75%;height: 100%;padding-right: 0px;
   
}

}
@media (min-width: 768px){
	.wchat .chat-left-aside {
       
position: relative !important;
        width: 40% !important;
       
z-index: 9;
        top: 0px;
        border-right: 1px solid rgba(120,
130, 140, 0.13);
    }
    .wchat .chat-right-aside {
       
margin-left: 0px !important;
    }
    .wchat .right {
        position:
relative;float: left;/*width: 66% !important;*/height: 100%;padding-right:
0px;
    }
}
@media (min-width: 1200px){
	.wchat .chat-left-aside {
  
     position: relative !important;
        width: 30% !important;
      
 z-index: 9;top: 0px;border-right: 1px solid rgba(120, 130, 140, 0.13);
  
 }
    .wchat .chat-right-aside {
        margin-left: 0px;
    }
   
.wchat .right {
        position: relative;float: left;width: 74%;height:
100%;padding-right: 0px;
    }
}
.wchat .chat-left-aside {
   
position: absolute;
    width: 265px;
    z-index: 9;
    top: 0px;
   
border-right: 1px solid rgba(120, 130, 140, 0.13);
}
.wchat
.chat-left-aside .chat-left-inner .form-control {
	/*height:
60px;*/
}
.wchat .chat-left-aside .chat-left-inner .style-none
{
	padding: 0px;height: 540px;
}
.wchat .chat-left-aside
.chat-left-inner .style-none li {
	list-style: none;overflow:
hidden;
}
.wchat .chat-left-aside .chat-left-inner .style-none li a
{
	padding: 13px 25px;
}
.wchat .chat-right-aside {
	margin-left:
250px;
}
.wchat .chat-right-aside .chat-list {
	max-height: none;height:
100%;padding-top: 40px;
}
.wchat .chat-right-aside .chat-list .chat-text
{
	border-radius: 6px;
}
#startup,#initial_startup {
	width:
100%;height: 100%;position: fixed;background-color:
#f2f2f2;-moz-user-select: none;-webkit-user-select: none;display:
flex;align-items: center;justify-content: center;display:
-webkit-box;display: -webkit-flex;-webkit-align-items:
center;-webkit-justify-content: center;flex-direction:
column;-webkit-flex-direction: column;
}
.spinner-container
{
	-webkit-animation: rotate 2s linear infinite;animation: rotate 2s
linear infinite;z-index: 2;
}
.spinner-container .path
{
	stroke-dasharray: 1, 150;stroke-dashoffset: 0;stroke: rgba(27, 154, 89,
0.7);stroke-linecap: round;-webkit-animation: dash 1.5s ease-in-out
infinite;animation: dash 1.5s ease-in-out infinite;
}
#startup
.spinner-container .path,#initial_startup .spinner-container .path
{
	stroke: #acb9bf;
}
@keyframes rotate {
	100% {
	transform:
rotate(360deg);
}

}
@-webkit-keyframes rotate {
	100%
{
	-webkit-transform: rotate(360deg);
}

}
@keyframes dash {
	0%
{
	stroke-dasharray: 1, 150;stroke-dashoffset: 0;
}
50%
{
	stroke-dasharray: 90, 150;stroke-dashoffset: -35;
}
100%
{
	stroke-dasharray: 90, 150;stroke-dashoffset:
-124;
}

}
@-webkit-keyframes dash {
	0% {
	stroke-dasharray: 1,
150;stroke-dashoffset: 0;
}
50% {
	stroke-dasharray: 90,
150;stroke-dashoffset: -35;
}
100% {
	stroke-dasharray: 90,
150;stroke-dashoffset: -124;
}

}
.progress-container {
	width:
360px;position: fixed;padding-top: 120px;top: 50%;left: 50%;margin-left:
-180px;
}
@keyframes appear {
	0% {
	opacity: 0.5;transform:
scaleY(0);
}
100% {
	opacity: 1;transform:
scaleY(1);
}

}
@-webkit-keyframes appear {
	0% {
	opacity:
0.5;transform: scaleY(0);
}
100% {
	opacity: 1;transform:
scaleY(1);
}

}
progress {
	-webkit-appearance: none;appearance:
none;width: 100%;height: 3px;border: none;margin: 0;opacity: 0;animation:
appear .3s ease-out forwards;animation-delay: .2s;-webkit-animation: appear
.3s ease-out forwards;-webkit-animation-delay: .2s;color:
#02d1a4;background-color:
#e0e4e5;
}
progress[value]::-webkit-progress-bar {
	background-color:
#e0e4e5;
}
progress[value]::-webkit-progress-value {
	background-color:
#02d1a4;
}
progress[value]::-moz-progress-bar {
	background-color:
#02d1a4;
}
.btn-plain:hover, .wchat-wrapper-web .wchat, .scroll-down,
.btn-more, #window {
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px
5px 0 rgba(0, 0, 0, .2);
}
.drawer {
	overflow: hidden;display:
-webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient:
vertical;-webkit-box-direction: normal;-ms-flex-direction:
column;flex-direction: column;pointer-events: auto;
}
.drawer
{
	position: absolute;top: 0;left: 0;width: 100%;height:
100%;
}
.drawer-manager, .pane {
	display: -webkit-box;display:
-ms-flexbox;display: flex;overflow: hidden;
}
.drawer-manager
{
	z-index: 9;pointer-events: none;
}
#refreshPage{pointer-events:
visible !important;}
article, aside, details, figcaption, figure, footer,
header, hgroup, menu, nav, section {
	display: block;
}
.header-close
{
	margin-left: 4px;margin-right: 20px;
}
button {
	border: 0;padding:
0;margin: 0;background: 0 0;outline: none;cursor: pointer;font-family:
inherit;
}

.drawer-info .chat-avatar, .drawer-info .chat-body,
.drawer-info .header-body {
	padding-left: 0;
}
.chat-body, .header-body
{
	-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;min-width:
0;-webkit-box-orient: vertical;-webkit-box-direction:
normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack:
center;-ms-flex-pack: center;justify-content: center;
}
.chat-avatar,
.chat-body, .header-body {
	display: -webkit-box;display:
-ms-flexbox;display: flex;
}
.drawer-info .chat-main, .drawer-info
.header-main {
	-webkit-box-align: center;-ms-flex-align:
center;align-items: center;
}
.chat-main, .header-main {
	line-height:
normal;-webkit-box-align: start;-ms-flex-align: start;align-items:
flex-start;text-align: left;margin-top: -1px;
}
.flow-drawer-container
{
	overflow: hidden;
}
.icon-user-default:after,
.icon-group-default:after, .icon-broadcast-default:after,
.icon-psa-default:after, .drawer-manager, .avatar-body,
.flow-drawer-container, .starred-title-divider:before {
	position:
absolute;top: 0;left: 0;width: 100%;height: 100%;
}
.header-title
{
	margin-top: 0;
}
.drawer-body {
    -webkit-box-flex: 1;-ms-flex:
1;flex: 1;overflow-y: auto;overflow-x: hidden;display: -webkit-box;display:
-ms-flexbox;display: flex;-webkit-box-orient:
vertical;-webkit-box-direction: normal;-ms-flex-direction:
column;flex-direction: column;opacity: 1;
}
.drawer-info .drawer-body
{
	padding-bottom: 32px;
}
div[data-list-scroll-container]
{
	-webkit-transform: translateZ(0);transform:
translateZ(0);
}

.wchat-header, .row-body, .chat-main, .header-main,
.chat-secondary, .header-secondary {
	display: -webkit-box;display:
-ms-flexbox;display: flex;
}
.wchat-header, .row-body
{
	-webkit-box-align: center;-ms-flex-align: center;align-items:
center;
}
.row-main {
	-webkit-box-flex: 1;-ms-flex: 1 1 auto;flex: 1 1
auto;
}
.row-side {
    -webkit-box-flex: 0;-ms-flex: none;flex:
none;margin-left: 10px;
}
.wchatellips, .starred-title-main {
	position:
relative;overflow: hidden;text-overflow: ellipsis;white-space:
nowrap;
}
.wchatellips {
	-webkit-box-flex: 1;-ms-flex-positive:
1;flex-grow: 1;
}

.drawer-section-title .icon-chevron-right-alt
{
	height: 21px;
}
.media-gallery, .media-gallery .more {
	display:
-webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack:
center;-ms-flex-pack: center;justify-content: center;
}
.media-gallery
{
	-ms-flex-flow: row wrap;flex-flow: row wrap;padding-top:
6px;overflow-y: hidden;margin-right: -8px;
}
.media-canvas-component
{
	width: 29%;position: relative;margin-bottom: 8px;margin-right:
8px;
}
.media-canvas {
	position: absolute;top: 0;left: 0;bottom:
0;right: 0;box-sizing: border-box;outline: 4px solid #fff;background-size:
cover;background-position: center;
}
.media-canvas~.shade {
	position:
absolute;bottom: 0;left: 0;width: 100%;height: 20px;background:
-webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), transparent);background:
linear-gradient(to top, rgba(0, 0, 0, .5), transparent);pointer-events:
none;
}
@media only screen and (-webkit-max-device-pixel-ratio: 1), not
all, only screen and (max-resolution: 1dppx){
	.icon-s.icon-msg-gif-light
{
	background-image:
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiP…ksNC45aC0yLjZ2MS4zaDIuM3YxaC0yLjN2MkgxM1YzLjloMy45VjQuOXoiLz4KPC9zdmc+Cg==);background-size:
21px 20px;background-position: 0 0;
}

}
.media-canvas~.icon-s
{
	position: absolute;bottom: -1px;left: 4px;pointer-events:
none;
}
.media-canvas-empty {
	width: 29%;height: 0;position:
relative;margin-right: 8px;
}

.well {
	padding: 14px 30px
10px;
}
.well, .well-simple {
	background-color: #FFF;box-shadow: 0 1px
3px rgba(0, 0, 0, .08);
}
.well, pre {
	background:
#ffffff;border-radius: 0px;
}
.well {
	min-height: 20px;padding:
19px;margin-bottom: 20px;background-color: #f5f5f5;border: 1px solid
#e3e3e3;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px
rgba(0,0,0,.05);box-shadow: inset 0 1px 1px
rgba(0,0,0,.05);
}
.animate-enter2 {
    -webkit-animation:
well-animation2 1s cubic-bezier(.1, .82, .25, 1);animation: well-animation2
1s cubic-bezier(.1, .82, .25, 1);
}


.drawer-section-body {
   
line-height: 23px;
}
.drawer-section-body {
    -webkit-box-flex:
1;-ms-flex: 1 1 auto;flex: 1 1 auto;word-wrap:
break-word;
}

.drawer-section {
    -webkit-box-flex: 0;-ms-flex: 0 0
auto;flex: 0 0 auto;
}
.drawer-section.well-simple-body {
   
background-color: #FFF;padding: 0;
}
.drawer-info .drawer-section {
   
margin-top: 10px;
}
.drawer-section, .drawer-section-expand {
   
margin-top: 26px;
}
.drawer-section.well-simple-body
.drawer-section-title {
	padding: 14px 30px 6px;margin-bottom:
6px;
}
.drawer-section-title {
	-webkit-box-flex: 0;-ms-flex: none;flex:
none;margin-bottom: 16px;font-size: 14px;line-height: normal;color:
#128C7E;
}
.drawer-button .contents .secondary, .drawer-section-title,
.intro-title, .row-control-label, .entry-title, .entry-subtitle
{
	font-weight: 300;
}
.drawer-section-photo {
    margin-top:
32px;margin-bottom: 6px;
}
.drawer-info .drawer-section-photo {
   
margin-top: 32px;margin-bottom: 20px;
}
.drawer-section:first-of-type,
.drawer-section-expand:first-of-type {
    margin-top:
32px;
}



.drawer-scale {
    -webkit-transform-origin: center
center;transform-origin: center center;-webkit-animation: drawer-scale
750ms cubic-bezier(.1, .82, .25, 1);animation: drawer-scale 750ms
cubic-bezier(.1, .82, .25, 1);
}
.drawer-section-photo .avatar {
   
margin-left: auto;
    margin-right: auto;
}
.avatar {
   
background-size: contain;background-repeat: no-repeat;background-position:
center center;position: relative;border-radius: 50%;overflow:
hidden;
}
.avatar-body {  z-index: 1;  }
.avatar-body img {  width:
100%;  }
.avatar-image.is-loaded {  opacity: 1;  }
.avatar-image {
   
border-radius: 50%;overflow: hidden;width: 100%;opacity:
0;-webkit-transition: opacity .18s ease-out;transition: opacity .18s
ease-out;display: block;
}


.clickable {
    cursor:
pointer;
}
.drawer-button .contents .secondary, .drawer-section-title,
.intro-title, .row-control-label, .entry-title, .entry-subtitle {
   
font-weight: 300;
}






.row-drawer-item {
	padding-left:
30px;
}
.row {
	margin-right: -7.5px;margin-left:
-7.5px;
}
.row-drawer-item .row-body {
	border-bottom: 1px solid
#f2f2f2;padding-right: 30px;
}
.row-drawer-item .row-main
{
	padding-top: 19px;padding-bottom: 19px;
}
.selectable-text
{
	-webkit-user-select: text;-moz-user-select: text;-ms-user-select:
text;user-select: text;
}
.title {
	font-weight: 400;font-size:
16px;line-height: 21px;color: #000;
}
/*Left Side Panel*//*Left Side
Panel*//*Right Side Panel*/

.pane {
	height: 100%;-webkit-transform:
translateZ(0);transform: translateZ(0);-webkit-box-orient:
vertical;-webkit-box-direction: normal;-ms-flex-direction:
column;flex-direction: column;position: relative;
}
.drawer-manager,
.pane {
	display: -webkit-box;display: -ms-flexbox;display: flex;overflow:
hidden;
}
.wchat-chat-tile {
	position: absolute;top: 0;left: 0;height:
100%;width: 100%;opacity: .06;background-repeat: repeat
repeat;
}
.wchat-chat-header {
	-webkit-box-ordinal-group:
2;-ms-flex-order: 1;order: 1;position: relative;padding-left:
16px;padding-right: 15px;display: -webkit-box;display: -ms-flexbox;display:
flex;box-sizing: border-box;border-left: 1px solid rgba(0, 0, 0,
.08);
}
.wchat-header, .wchat-subheader {
	-webkit-box-flex: 0;-ms-flex:
none;flex: none;box-sizing: border-box;padding: 10px;position: relative;   
border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.wchat-header {
	height:
59px;width: 100%;z-index: 1000;
}
.wchat-header, .row-body, .chat-main,
.header-main, .chat-secondary, .header-secondary {
	display:
-webkit-box;display: -ms-flexbox;display: flex;
}
.wchat-header,
.row-body {
	-webkit-box-align: center;-ms-flex-align: center;align-items:
center;
}
.wchat-chat-header .chat-avatar:not(.chat-psa) {
	cursor:
pointer;
}
.wchat-chat-header .chat-avatar {
	margin-right:
15px;
}
.chat-avatar, .chat-body, .header-body {
	display:
-webkit-box;display: -ms-flexbox;display: flex;
}
.chat-avatar
{
	-webkit-box-flex: 0;-ms-flex: none;flex: none;-webkit-box-align:
center;-ms-flex-align: center;align-items: center;margin-top:
-1px;
}

.wchat-chat-header .chat-body:not(.chat-psa),
.wchat-chat-header .header-body:not(.chat-psa) {
	cursor:
pointer;min-width: 0;
}
.chat-body, .header-body {
	-webkit-box-flex:
1;-ms-flex-positive: 1;flex-grow: 1;min-width: 0;-webkit-box-orient:
vertical;-webkit-box-direction: normal;-ms-flex-direction:
column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack:
center;justify-content: center;
}
.chat-avatar, .chat-body, .header-body
{
	display: -webkit-box;display: -ms-flexbox;display:
flex;
}
.chat-main, .header-main {
	line-height:
normal;-webkit-box-align: start;-ms-flex-align: start;align-items:
flex-start;text-align: left;margin-top: -1px;
}

.chat-title{
	margin:
0;
}
.chat-title, .header-title {
	overflow: hidden;text-overflow:
ellipsis;white-space: nowrap;font-weight: 400;font-size: 16px;line-height:
21px;-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;display:
-webkit-box;display: -ms-flexbox;display: flex;
}
.chat-title .emojitext,
.header-title .emojitext {
	text-align: left;
}

.wchat-chat-header
.chat-status, .wchat-chat-header .header-secondary, .header-secondary
{
	font-size: 13px;line-height: 18px;
}
.chat-status, .header-secondary
{
	font-weight: 400;white-space: nowrap;-webkit-box-flex: 1;-ms-flex:
1;flex: 1;text-align: left;
}
.chat-status {
	font-size:
14px;line-height: 20px;
}
.wchat-chat-controls, .more
{
	-webkit-box-flex: 0;-ms-flex: none;flex: none;
}
.wchat-chat-controls
{
	/*margin-left: 20px;*/
}
.wchat-chat-header:after,
.subheader-search:after {
	position: absolute;content: '';width:
100%;height: 1px;left: 0;bottom: -1px;background-color:
rgba(255,255,255,.14);border-bottom: 1px solid
rgba(0,0,0,.08);
}
.bubble-actions, .menu-horizontal,
.menu-horizontal>span, .menu-tabs, .menu-pills, .audio,
.media-panel-header, .list-action {
	display: -webkit-box;display:
-ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align:
center;align-items: center;
}
.wchat-chat-tile-container {
	position:
relative;order: 2;-webkit-flex: 1 1 auto !important;-ms-flex: 1 1 auto
!important;flex: 1 1 auto !important;-webkit-flex-wrap: nowrap
!important;-ms-flex-wrap: nowrap !important;flex-wrap: nowrap
!important;
}
.wchat-chat-tile-container {
	-webkit-box-flex:
1;-ms-flex: 1 1 0;flex: 1 1 0;position: relative;-webkit-box-ordinal-group:
3;-ms-flex-order: 2;order: 2;
}
.wchat-body {
	-webkit-box-flex:
1;-ms-flex-positive: 1;flex-grow: 1;z-index: 1;
}
.wchat-chat-body
{
	display: -webkit-box;display: -ms-flexbox;display:
flex;-webkit-box-orient: vertical;-webkit-box-direction:
normal;-ms-flex-direction: column;flex-direction: column;overflow-x:
hidden;overflow-y: scroll;z-index: 100;box-sizing: border-box;border-left:
1px solid rgba(0, 0, 0, .03);-webkit-transition: background .3s ease-out
.1s;transition: background .3s ease-out .1s;background-color:
transparent;
}
.wchat-chat-msgs {
	width: 100%;height: 100%;position:
absolute;
}
.wchat-chat-body, .wchat-chat-footer {
	-webkit-transform:
translateZ(0);transform: translateZ(0);
}
.wchat-chat-body
{
	-webkit-user-select: text;-moz-user-select: text;-ms-user-select:
text;user-select: text;
}
.wchat-chat-empty {
	-webkit-box-flex:
1;-ms-flex: 1 1 auto;flex: 1 1 auto;min-height: 12px;
}
.message-list
{
	-webkit-box-flex: 0;-ms-flex: 0 0 auto;flex: 0 0 auto;padding-bottom:
8px;-webkit-transition: padding .3s cubic-bezier(.69, 0, .79,
.14);transition: padding .3s cubic-bezier(.69, 0, .79, .14);padding-left:
0;
}
.wchat-filler {
	-webkit-box-flex: 0;-ms-flex: 0 0 auto;flex: 0 0
auto;-webkit-box-ordinal-group: 3;-ms-flex-order: 2;order:
2;
}
.wchat-chat-footer {
	padding: 0;box-sizing: border-box;min-height:
62px;
}
.wchat-chat-footer {
	-webkit-box-ordinal-group:
4;-ms-flex-order: 3;order: 3;position: relative;
}
.wchat-chat-body,
.wchat-chat-footer {
	-webkit-transform: translateZ(0);transform:
translateZ(0);
}
.wchat-footer {
	-webkit-box-flex: 0;-ms-flex:
none;flex: none;width: 100%;box-sizing: border-box;padding: 0px;z-index:
1;
}
article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section {
	display: block;
}
li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header, hgroup, menu,
nav, output, ruby, section, summary, time, mark, audio, video {
	margin:
0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align:
baseline;outline: none;
}
.block-wchat {
	display: -webkit-box;display:
-ms-flexbox;display: flex;-webkit-box-orient:
horizontal;-webkit-box-direction: normal;-ms-flex-direction:
row;flex-direction: row;-webkit-box-align: end;-ms-flex-align:
end;align-items: flex-end;padding: 10px 19px;max-width: 100%;box-sizing:
border-box;position: relative;z-index: 2;
}
.block-wchat .btn-emoji
{
	margin-right: 20px;margin-bottom: 7px;
}
.block-wchat
.send-container, .block-wchat .ptt-container, .block-wchat .btn-emoji
{
	-webkit-box-flex: 0;-ms-flex: 0 0 auto;flex: 0 0 auto;
}
.block-wchat
.input-container {
	border-radius: 5px;background-clip: padding-box;width:
inherit;-webkit-box-flex: 1;-ms-flex: 1 1 auto;flex: 1 1 auto;min-width:
0;border-color: #fff;border-width: 1px;border-style: solid;box-sizing:
border-box;padding-right: 16px;
}
.input, .block-wchat .input-container,
.input-line {
	font-weight: 400;
}
.input-container
{
	-webkit-transition: height .18s ease-in-out;transition: height .18s
ease-in-out;
}
.input-emoji {
	position: relative;
}
.block-wchat
.input-placeholder {
	top: 0;margin-left: 2px;
}
.block-wchat
.input-container .input, .block-wchat .input-container .input-container
{
	word-wrap: break-word;white-space: pre-wrap;padding: 0 2px 0
0;min-height: 20px;max-height: 100px;overflow-y: auto;overflow-x:
hidden;background-color: rgba(255, 255, 255, 0);border-left: .1px solid
transparent;position: relative;z-index: 1;
}
.input, .block-wchat
.input-container {
	-webkit-user-select: text;-moz-user-select:
text;-ms-user-select: text;user-select: text;line-height: 20px;font-size:
15px;min-height: 20px;border: none;padding: 10px 12px;width: 100%;outline:
none;
}
.input-placeholder {
	-webkit-user-select:
none;-moz-user-select: none;-ms-user-select: none;user-select:
none;position: absolute;top: 6px;left: 0;color: #999;pointer-events:
none;-webkit-transition: opacity .08s linear;transition: opacity .08s
linear;font-size: 15px;line-height: 20px;z-index: 0;
}
.empty-text,
.intro-text, .hint, .btn, .input-placeholder, .empty-title, .bubble-btn,
.dropdown .menu-item a, .menu-shortcut>.shortcut, .link-preview-title,
.drawer-title, .drawer-section-footer, .intro-body, .list-invite
.chat-status, .list-invite .header-secondary, .entry-text, #platforms
{
	-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing:
grayscale;
}
.block-wchat .send-container, .block-wchat .ptt-container,
.block-wchat .btn-emoji {
	-webkit-box-flex: 0;-ms-flex: 0 0 auto;flex: 0
0 auto;
}
.block-wchat{
    padding: 10px 15px
!important;
}
.block-wchat .btn-emoji {
    margin-right: 10px
!important;
}
.block-wchat .icon-send {
    margin-left: 10px
!important;
}
.block-wchat .icon-send {
    opacity: .9;margin-left:
20px;margin-bottom: 8px;
}
.icon-send {
	background-position: -3451px
-3512px;
}
.wchat-box-items-positioning-container {
	position:
absolute;top: 0;width: 100%;
}
.wchat-box-items-overlay-container
{
	position: absolute;bottom: 0;width: 100%;box-sizing:
border-box;
}
.mentions-positioning-container {
	position: absolute;top:
0;width: 100%;
}
*::-webkit-scrollbar {
	width: 6px!important;height:
6px!important
}
*::-webkit-scrollbar-thumb {
	background-color: rgba(0,
0, 0, .2)
}
*::-webkit-scrollbar-track {
	background: rgba(255, 255,
255, .08)
}
.wchat-wrapper-main::-webkit-scrollbar-track
{
	background-color: #dfdfdf
}
*::-webkit-input-placeholder {
	color:
#ccc;font-size: 15px
}
*::-moz-placeholder {
    color: #ccc;font-size:
15px
}
input[type="email"], input[type="password"],
input[type="text"]
{
    -webkit-box-sizing: border-box;
   
-moz-box-sizing: border-box;
    box-sizing: border-box;
    height:
40px;
    padding: 0 20px;
}
.scroll-down {
	position: absolute;right:
11px;bottom: 17px;z-index: 200;width: 42px;height: 42px;display:
-webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align:
center;-ms-flex-align: center;align-items: center;-webkit-box-pack:
center;-ms-flex-pack: center;justify-content: center;border-radius:
50%;cursor: pointer;
}

.wchat-chat-body,.wchat-chat-footer
{
	-webkit-transform: translateZ(0);transform:
translateZ(0)
}


.smiley-panel {
    height: 225px;-webkit-transform:
translateZ(0);transform: translateZ(0);-webkit-transform-origin:
bottom;transform-origin: bottom;overflow: hidden
}
.smiley-panel-body
{
	height: 190px;position: absolute;opacity: 1;overflow-y:
scroll;overflow-x: hidden;padding: 8px 0 10px;width: 100%;box-sizing:
border-box
}
.smiley-panel-body>* {
	direction: ltr;margin: 0
12px
}
.smiley-panel .e1 {
    margin: 6px;
    cursor: pointer;
   
border-radius: 3px;
}
.e1 {
    width: 32px;
    height: 32px;
   
background-size: 1502px 1467px;
}
.emojione {
    width: 20px;
   
height: 20px;
    /*background-size: 860px 840px;*/
}
.emojione, .e1 {

   display: inline-block;
    vertical-align: top;
    zoom: 1;
   
border: 0;
}
.nav>li>a {
    position: relative;
    display:
block;
    padding: 10px 0px;
}

.menu-tabs-emoji {
    position:
relative;height: 50px;background-color: #fff;-webkit-box-flex: 0;-ms-flex:
none;flex: none
}
.menu-tabs-emoji .menu-item {
    height:
50px
}
.menu-tabs-emoji .icon {
    vertical-align:
middle
}
.menu-tabs-marker {
    position: absolute;bottom: 0;left:
0;-webkit-transition: -webkit-transform .3s cubic-bezier(.1, .82, .25,
1);transition: transform .3s cubic-bezier(.1, .82, .25, 1);height:
4px;background-color: #009688
}
.menu-tabs>.menu-item,
.menu-pills>.menu-item {
    -webkit-box-flex: 1;  -ms-flex: 1;  flex:
1;  text-align: center;
}
.menu-item {
    cursor:
pointer;
}

.emoji-panel .e1 {
    margin: 6px;
    cursor: pointer;

   border-radius: 3px;
}
.e1 {
    width: 32px;
    height: 32px;
   
background-size: 1502px 1467px;
}
.emoji, .e1 {
    display:
inline-block;
    vertical-align: top;
    zoom: 1;
    border:
0;
}

.avatar-spinner-container {
    display: -webkit-box;
   
display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;

   -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack:
center;
    -ms-flex-pack: center;
    justify-content: center;
   
height: 100%;
    width: 100%;
    background-color:
rgba(140,140,140,.85);
    position: absolute;
    left: 0;
    top:
0;
    z-index: 1000;
    border-radius: 50%;
}


.drawer-header {
 
  background-color: #00bfa5;
    color: #fff;
    height: 108px;
   
-webkit-box-orient: vertical;
    -webkit-box-direction: normal;
   
-ms-flex-direction: column;
    flex-direction: column;
   
-webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content:
flex-end;
}
.drawer-header, .drawer-header-small, .drawer-header-offset,
.drawer-header-popup {
    display: -webkit-box;
    display:
-ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex:
none;
    flex: none;
    box-sizing: border-box;
}
.drawer-header,
.drawer-header-small {
    padding-right: 20px;
    padding-left:
25px;
}
.drawer-header .drawer-title {
    -webkit-box-flex: 0;
   
-ms-flex: none;
    flex: none;
}
.drawer-title {
    display:
-webkit-box;
    display: -ms-flexbox;
    display: flex;
   
-webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}


.menu-icons
{
    position: absolute;top: 49px;right: -17px;padding: 0 10px
30px;width: 51px;box-sizing: content-box;z-index: 1000;overflow:
visible;
}
.menu-shortcut {
    position: relative;
}
.menu-item {
  
 cursor: pointer;
}
.menu-icons-item {
    height: 51px;margin-top:
17px;cursor: pointer;-webkit-transform-origin: top center;transform-origin:
top center;border-radius: 50%;overflow: hidden;opacity:
0;
}
.menu-icons-item .icon-xl {
    width: 51px;height:
51px;-webkit-transition: -webkit-transform .05s ease-out;transition:
transform .05s ease-out;
}
.menu-icons .menu-icons-item:after {
   
position: absolute;top: 0;left: 0;width: 51px;height: 51px;border-radius:
50%;content: "";-webkit-transition: box-shadow .07s
ease-out;transition: box-shadow .07s ease-out;box-shadow: 0 1px 2px
rgba(0,0,0,.17), 0 6px 8px
rgba(0,0,0,.29);
}
.menu-horizontal>.menu-item,
.menu-horizontal>span>.menu-item,.menu-horizontal>.mega-dropdown,
.menu-horizontal>span>.mega-dropdown {
    -webkit-box-flex: 0;
   
-ms-flex: none;
    flex: none;
    margin-right: 10px;
    position:
relative;
    padding: 8px;
    border-radius: 50%;
   
-webkit-transition: background-color .18s ease;
    transition:
background-color .18s ease;
}
.menu-horizontal>.menu-item,
.menu-horizontal>span>.menu-item {
    height:
auto;
}
.menu-horizontal>.menu-item.open,
.menu-horizontal>span>.menu-item.open,.menu-horizontal>.mega-dropdown.open,
.menu-horizontal>span>.mega-dropdown.open {
    background-color:
rgba(0,0,0,.1);
}

@media screen and (max-width: 500px){
   
.menu-horizontal>.menu-item,
.menu-horizontal>span>.menu-item,.menu-horizontal>.mega-dropdown,
.menu-horizontal>span>.mega-dropdown {
        margin-right: 0px
!important;
        padding: 5px !important;
    }
   
.mega-dropdown-menu {
        right: -44px !important;
   
}
}

.white-box {
    width: 50px;
    margin-bottom: 15px;
   
border-radius: 50%;
    height: 50px;
    padding: 15px 0 0 0
!important;
    box-shadow: 0 1px 2px rgba(0,0,0,.17), 0 6px 8px
rgba(0,0,0,.29);
}

a.download-link:before{
    content:
url('../../plugins/images/extension/blank.png');
    margin-right: 6px;
 
  vertical-align:
middle;
}
a.download-link[href$='.doc']:before,
a.download-link[href$='.rtf']:before,
a.download-link[href$='.txt']:before
 {
    content:
url('../../plugins/images/extension/doc.png');
}
a.download-link[href$='.docx']:before
{
    content:
url('../../plugins/images/extension/docx.png');
}
a.download-link[href$='.zip']:before{

   content:
url('../../plugins/images/extension/zip.png');
}
a.download-link[href$='.rar']:before{

   content:
url('../../plugins/images/extension/rar.png');
}
a.download-link[href$='.mp3']:before{

   content:
url('../../plugins/images/extension/mp3.png');
}
a.download-link[href$='.mp4']:before,
a.download-link[href$='.MP4']:before{

   content:
url('../../plugins/images/extension/mp4.png');
}
a.download-link[href$='.pdf']:before{

   content:
url('../../plugins/images/extension/pdf.png');
}
a.download-link[href$='.ppt']:before{

   content:
url('../../plugins/images/extension/ppt.png');
}
a.download-link[href$='.psd']:before{

   content:
url('../../plugins/images/extension/psd.png');
}
a.download-link[href$='.xls']:before
{
    content:
url('../../plugins/images/extension/xls.png');
}
a.download-link[href$='.xlsx']:before
 {
    content:
url('../../plugins/images/extension/xlsx.png');
}
a.download-link[href$='.xml']:before{

   content:
url('../../plugins/images/extension/xml.png');
}


.msg-status{
   
margin-left: 5px;}




/*
*
**********   Screen css Start  
*************
*
*/
.light-theme{background-color: #edecec
!important;}
.dark-theme{background-color: #4F5467
!important;}

ul#themecolors, ul#mainthemecolors {
    display:
block
}
ul#themecolors li, ul#mainthemecolors li {
    display:
inline-block
}
ul#themecolors li:first-child, ul#mainthemecolors
li:first-child {
    display: block
}
#themecolors li a,
#mainthemecolors li a {
    width: 50px;
    height: 50px;
    display:
inline-block;
    margin: 5px;
    color: transparent;
    position:
relative
}
#themecolors li a.working:before, #mainthemecolors li
a.working:before {
    content: "\f00c";
    font-family:
"FontAwesome";
    font-size: 18px;
    line-height: 50px;
   
width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
   
left: 0;
    color: #fff;
    text-align: center
}
.profile-picture {

   float: left;
    border-radius: 50%;
    overflow: hidden;
   
-webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
   
box-sizing: content-box;
    box-shadow: 0px 1px 3px rgba(0, 0, 0,
0.1);
}
.min-profile-picture {
    width: 40px;
    height: 40px;
   
margin-right: 10px;
}

.min-profile-picture img {
    min-height:
40px;
}

.max-profile-picture {
    width: 50px;
    height: 50px;
  
 margin-right: 10px;
}
.max-profile-picture img {
    min-height:
50px;
}
.m-r-5 { margin-right: 5px !important;}
.p-4 { padding: 4px
!important;}
.p-5 { padding: 5px !important;}
.p-lr-20{padding: 0 20px
!important;}
ol, ul {
    list-style: none;
    margin: 0px;
   
padding: 0px;
}
.font-19{font-size: 19px
!important;}
.font-20{font-size: 20px !important;}
.font-24{font-size:
24px !important;}
.icon, .icon-close-panel {
    width: 26px;
   
height: 24px;
}
/*@media (max-width: 767px){
.chat-main-header
.dropdown{padding: 0 !important;}
}*/
.unread-count {
   
background-color: #09d261;
    color: #fff !important;
    font-weight:
500;
    font-size: 12px!important;
    padding: 0 5px;
   
border-radius: 12px;
    text-align: center;
    display:
-webkit-inline-box;
    display: -ms-inline-flexbox;
    display:
inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;

   align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack:
center;
    justify-content: center;
    height: 19px;
    min-width:
19px;
    box-sizing: border-box;
    line-height:
normal;
}
.chatonline li a span.Online { color: #00c292;
!important;}
.chatonline li a span.Offline { color: #aaaaaa;
!important;}

.chat-head .Online { color: #00c292;
!important;}
.chat-head .Offline { color: #aaaaaa;
!important;}
.chat-head{
    cursor: pointer;
}
@media (max-width:
767px){
    .chat-head .personName {
        white-space: nowrap;
      
 width: auto;
        overflow: hidden;
        text-overflow:
ellipsis;
        font-size: 14px;
    }
}

.email {
    white-space:
nowrap;
    width: 149px;
    overflow: hidden;
    text-overflow:
ellipsis;
}
#loadmsg{
    display: none;  width: 62px;
}
.chatonline
li a {color: #686868; }
.chatonline li.chatboxblink a{color:
#FFFFFF;}
.chatonline li.chatboxblink a:hover{  color: #686868
!important;}



.chat-text img{ border-radius: 2px !important;
max-width: 330px;}
.chat-text a{color:#323232;}
.chat-text
a:hover{color:#ddd;}
.chat-head img{
    width:
40px;
}
/*.userimage{padding-left: 10px;}*/
.userfiles{cursor:
pointer;width: 100%;}

.chat-text p{word-break: break-word;overflow:
hidden;  max-height: 330px;}

.sendIcon {
    -ms-transform:
rotate(110deg);
    -webkit-transform: rotate(180deg);
    transform:
rotate(180deg);
}
.chat-head h3 {
    float: left;
    margin-left:
12px;
    display: inline-block;
}
.chat-head .personStatus {
   
float: left; margin-left: 10px;display: inline-block;line-height:
50px;
}

.write-link {
    display: none;
    cursor: pointer;
   
display: inline-block;
    float: left;
    width: 50px;
    height:
50px;
    content: '';
    overflow: hidden;
    margin-top: -65px;
   
position: absolute;
    margin-left: 0px;
}
.write-link >
input[type="file"] {
    cursor: pointer;
    opacity: 0;
   
padding: 14px;
}
#resultchat {
    /*overflow-y: scroll;
   
max-height: 425px;
    min-height: 425px;
    overflow-x: hidden;
   
margin-bottom: 0px;*/
}
#userScroll{
    overflow-y: scroll;
   
max-height: 540px;
    min-height: 540px;
    overflow-x: hidden;
   
margin-bottom: 0px;
}
.left {
    float: left;
    height:
100%;
}
.right {
    position: relative;
    float: left;
    width:
100%;
    height: 100%;
    padding-right: 250px;
}
.right .chat {
   
position: relative;
    display: none;
}
.right .chat.active-chat {
   
display: block;
}
.embtn {
    width: 25px;
}
.emoji-panel-body {
   
height: 100px;
    /* position: relative; */
    opacity: 1;
    /*
width: 60.5%; */
    overflow-y: auto;
    box-sizing: border-box;
   
background-color: transparent;
    padding: 7px;
    /* bottom: 71px;
*/
}
.emoji-panel-body .embtn {
    width: 32px;
    margin: 6px;
   
cursor: pointer;
}


/*light box for popup image in chat*/
#lightbox
{
    position:fixed; /* keeps the lightbox window in the current viewport
*/
    top:0;
    left:0;
    width:100%;
    height:100%;
   
background-color: rgba(0, 0, 0, 0.82);
    text-align:center;    z-index:
10000;
}
#lightbox p {
    text-align:right;
    color:#fff;
   
margin-right:20px;
    font-size:12px;
}
#lightbox #content{
   
vertical-align: middle;
    padding-left: 20%;
    padding-right:
20%;
}
#lightbox #content img {
    box-shadow:0 0 25px #111;
   
-webkit-box-shadow:0 0 25px #111;
    -moz-box-shadow:0 0 25px #111;
   
max-width:100%;
    max-height: 550px;
    border: 10px solid #95d9cc;
 
  border-radius: 10px;
}
/*light box for popup image in
chat*/


.byMsg {
    border: 2px solid #7d7d7d;
    border-radius:
4px;
    margin-bottom: 24px;
    padding: 10px 10px 10px 25px;
   
position: relative;
    font-size: 13px;
}
.byMsgError {
    border:
2px solid #d50000 !important;
    color: #d50000;
}

/*
*
********** 
 Screen css End   *************
*
*/



.wchat-two
.flow-drawer-container {
    height: calc(100% - 59px);
    top:
59px;transition: 0.5s ease-in;position: absolute;transition: 0.5s
ease-in;
}
.flow-drawer-container {
    overflow:
hidden;
}
.pane-intro {
    background-color: #f7f9fa;
   
-webkit-align-items: center;
    align-items: center;
   
-webkit-justify-content: center;
    justify-content: center;
   
box-sizing: border-box;
    border-left: 1px solid rgba(0,0,0,0.08);
   
position: relative;
}
@media screen and (max-width: 800px){
   
.intro-body {
        width: 80%;
    }
}
.intro-body {
   
text-align: center;
    margin-top: -20px;
    width: auto;
}