.dj-chat-left{
	float:left;
	width:33.33%;
}

.dj-chat-right{
	float:left;
	width:66.66%;
}

.djchat-instance {
    border: 1px solid #d8e0e6;
    background: #ffffff;
    margin: 0 0 30px;
}

.djchat-instance.chat-collapsed .djchat-header{
	border-bottom: none;
}

.djchat-messages .djchat-instance.chat-collapsed,
.djchat-messages .djchat-instance .djchat-close-btn {
	/*display: none;*/
}

.djchat-messages .djchat-instance .djchat-collapse-btn {
	display: none;
}

.djchat-header {
    background: #fff;
    padding: 20px 30px;
    border-bottom: 1px solid #d7dfe6;
    cursor: pointer;
}

.djchat-header:before,
.djchat-header:after{
    display: table;
    content: "";
    line-height: 0;
}

.djchat-header:after{
	clear: both;
}

.djchat-header h3 {
    color: #444;
    font-weight: normal;
    font-size: 18px;
    padding: 0;
    margin: 0;
    line-height: 2em;
}

.djchat-activity {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.djchat-activity.user-online{
	background: #6ade6a;
}

.djchat-activity.user-offline{
	background: #e53e4c;
}

.djchat-header .djchat-close-btn,
.djchat-header .djchat-collapse-btn{
    float: right;
    width: 20px;
    height: 40px;
    padding: 0;
    border: none;
    margin: 0 0 0 28px;
    background: #fff;
    box-shadow: none;
    border-radius: 0;
}

.djchat-header button.djchat-close-btn{
    background: #fff url(../images/djchat-x.svg) no-repeat center center;
    white-space: nowrap;
    overflow: hidden;
    text-indent: 200%;
    background-size: 100%;
}

.djchat-header button.chat-open{
    background: #fff url(../images/djchat-minimize.svg) no-repeat center 25px;
    white-space: nowrap;
    overflow: hidden;
    text-indent: 200%;
    background-size: 100%;
}

.djchat-header .djchat-loadprev-btn {
	width: 100%;
	float: none;
	margin: 5px 0 0 0;
	text-align: center;
	box-sizing: border-box;
}

.djchat-conversation {
	padding: 30px;
}

.djchat-conversation .djchat-entry {
    clear: both;
    max-width: 66%;
    padding: 15px 25px;
    border-radius: 3px;
    margin: 0 0 32px 0;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.5;
}

.djchat-conversation .djchat-received {
    float: left;
    background: #26b0cd;
    color: #ffffff;
}

.djchat-conversation .djchat-sent {
    float: right;
    background: #f1f5f8;
    color: #444444;
}

.djchat-conversation .djchat-time {
    clear: both;
    text-align: center;
    margin: 0 0 40px;
    font-size: 14px;
    line-height: 1.5;
    color: #a7a7a7;
    padding: 0;
    position: relative;
}

.djchat-conversation .djchat-time:after{
    content: '';
    height: 1px;
    width: 100%;
    background: #cdcdcd;
    position: absolute;
    top: 10px;
    left: 0;
}

.djchat-conversation .djchat-time span{
    background: #fff;
    padding: 0 15px;
    position: relative;
    z-index: 1;
}

.djchat-conversation .djchat-entry .djchat-msg-info {
	display: none;
}

.djchat-message-bar {
    position: relative;
    padding: 15px;
}

.djchat-message-bar textarea,
.djchat-message-bar textarea:focus {
    margin: 0;
    padding: 20px;
    border: none;
    outline: none;
    resize: none;
    box-shadow: none;
    height: 60px;
    width: calc(100% - 150px);
    background: #d5dfe6;
    box-sizing: border-box;
    color: #6d818f;
    line-height: 20px;
    font-size: 16px;
    border-radius: 3px;
    vertical-align: top;
}

.djchat-message-bar button {
    box-sizing: border-box;
    line-height: 100%;
    border: none;
    background: #26b0cd;
    padding: 0 5px;
    float: right;
    margin: 0;
    color: #fff;
    font-size: 16px;
    height: 60px;
    border-radius: 3px;
    width: 120px;
    vertical-align: top;
}

.djchat-message-bar .djchat-collapse-btn:hover,
.djchat-message-bar .djchat-close-btn:hover,
.djchat-message-bar .djchat-collapse-btn:focus,
.djchat-message-bar .djchat-close-btn:focus {
	background: #3cc0dc;
}

#djchat-bar .djchat-instance {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 408px;
    border-top: 4px solid #26b0cd;
    z-index: 65000;
}

#djchat-bar .djchat-header{
    padding: 8px 18px;
}

#djchat-bar .djchat-header h3{
    font-size: 10px;
    line-height: 36px;
}

#djchat-bar .djchat-header button.djchat-collapse-btn,
#djchat-bar .djchat-header button.djchat-close-btn{
    width: 11px;
    margin: 0 0 0 15px;
}

#djchat-bar .djchat-header button.chat-open{
	background-position: center 23px;
}

#djchat-bar .djchat-conversation .djchat-entry{
    font-size: 11px;
    padding: 10px 17px;
    line-height: 1.4;
    margin-bottom: 21px;
}

#djchat-bar .djchat-conversation .djchat-time{
    font-size: 8px;
    margin-bottom: 20px;
}

#djchat-bar .djchat-conversation .djchat-time:after{
	top: 5px;
}

#djchat-bar .djchat-conversation{
	padding: 20px;
}

#djchat-bar .djchat-message-bar textarea, 
#djchat-bar .djchat-message-bar textarea:focus{
    height: 34px;
    padding: 7px 12px;
    font-size: 9px;
    width: calc(100% - 80px);
}

#djchat-bar .djchat-message-bar button{
    width: 65px;
    height: 34px;
    font-size: 9px;
    margin: 0;
}

#djchat-bar .djchat-instance .djchat-conversation {
	max-height: 340px;
}

.djchat-instance .djchat-conversation {
	overflow-x: hidden;
	/*overflow-y: auto;*/
}

.djchat-close-btn,
.djchat-collapse-btn {
	padding-left: 12px;
	padding-right: 12px;
	font-family: sans-serif;
}

.djchat-header.djchat-blink {
	background: #ccc;
}

.djchat-header.djchat-blink button{
	background-color: #ccc;
}

.djchat-off-msg {
    padding: 5px 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    background: #e43d4d;
    color: #fff;
    margin: 15px 0;
    border-radius: 3px;
}

.djchat-history{
    color: #444;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 -1px 30px 0;
}

.djchat-history-header{
    color: #509ee2;
    padding: 26px 20px 27px;
    border-top: 1px solid #d8e0e6;
    border-left: 1px solid #d8e0e6;
    border-right: 1px solid #d8e0e6;
}

.djchat-history-header h3{
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1.5;
    font-weight: bold;
}

.djchat-history-items{
	border: 1px solid #d8e0e6;
}

.djchat-history-item {
    cursor: pointer;
    background: #fafcfd;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid #d8e0e6;
    padding: 20px;
    margin: 0;
}

.djchat-history-item:last-child{
	border-bottom: none;
}

.djchat-history-item.active{
	background: #fff;
}

.djchat-history-item.djchat-state-0 {
	-webkit-animation: djchatBlinkBG 1s infinite;
	-moz-animation: djchatBlinkBG 1s infinite;
	animation: djchatBlinkBG 1s infinite;
}

.djchat-history-item .djchat-user-avt {
    border-radius: 5px;
    background: #dadada;
    text-align: center;
    vertical-align: middle;
    line-height: 54px;
    box-sizing: border-box;
    font-size: 16px;
    margin: 0;
}

.djchat-user-info .djchat-user-name{
    display: block;
    padding: 0 0 6px;
}

.djchat-user-info .djchat-user-msg{
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #aaa;
}

.djchat-user-msg-time{
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
    text-transform: uppercase;
}

#djchat-login-form .btn{
    background: #26b0cd;
    border-radius: 3px;
    color: #fff;
    border: none;
    padding: 10px;
}

#djchat-login-form .btn:hover,
#djchat-login-form .btn:focus{
    background: #3cc0dc;
}

/*** RWD ***/
@media (max-width: 767px) {
	.djchat-history-item .djchat-user-avt{
		margin-bottom: 15px;
	}
	.dj-chat-left,
	.dj-chat-right{
		width: 100%;
	}
}
@media (max-width: 480px) {
	.djchat-message-bar textarea,
	.djchat-message-bar textarea:focus,
	#djchat-bar .djchat-message-bar textarea,
	#djchat-bar .djchat-message-bar textarea:focus{
		width: 100%;
		margin:0 0 15px;
	}
	.djchat-message-bar button,
	#djchat-bar .djchat-message-bar button{
	    width: 100%;
	    margin: 0;
	    float: none;
	}
	#djchat-bar .djchat-instance{
		width: 100%;
	}
}

@-webkit-keyframes djchatBlinkBG {
	0%   { background-color: #f5f5f5; }
	100% { background-color: #ddd; }
}
@-moz-keyframes djchatBlinkBG {
	0%   { background-color: #f5f5f5; }
	100% { background-color: #ddd; }
}
@keyframes djchatBlinkBG {
	0%   { background-color: #f5f5f5; }
	100% { background-color: #ddd; }
}