.chats_container{
    position: fixed;right: 40px;bottom: 0;z-index:100000; width: 300px;font-family: Arial, sans-serif;
    height: 40px;overflow: hidden;
    -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
}

.chats_container input, .chats_container textarea {
    padding: 2px !important;
}


/* panel */
.chats_title{
    float:left;width: 280px;height: 40px;line-height: 40px;position: relative;padding: 0 10px;font-size: 15px;font-weight: bold;
    box-sizing: content-box;
    background: #2785C1;color:#FFF;
	cursor: pointer;
}
.chats_title .chats_text{
    float:left;
}
.chats_title .chats_btn{
    float:right;width: 33px;height: 26px;margin: 7px 0 0 0;text-align: center;line-height: 26px;font-weight: bold;font-size: 20px;
    cursor: pointer;
    -moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;
    background: #46A0DA url('arrow_top.png') center no-repeat;
}

.active .chats_title .chats_btn{
    background-image: url('arrow_bottom.png');
}

/* body */
.chats_body {
    float: left;width: 280px;height: 220px;padding: 10px;overflow: auto;
    box-sizing: content-box;
    background: #FFF;
}

.chats_presented {
    float: left;height: 220px;padding: 10px;overflow: auto;
    /*box-sizing: content-box;*/
    /*background: #f0f0ef;*/
    /*padding-top: 70px;*/
    height: 220px;
    width: 280px;

}

.chats_message{
    float:left;width: 100%;min-height: 36px;font-size: 12px;padding: 5px 0;
    border-bottom: 2px solid #F2F2F2;
}
.chats_message .chats_avatar{
    float:left;width:30px;margin: 0 10px 0 0;
}
.chats_message .chats_avatar img{
    float: left;width: 100%;max-width: 100%;max-height: 100%;
}
.chats_message .chats_name{
    float:left;font-weight: bold;height: 16px;line-height: 16px;font-size: 13px;
}
.chats_message.message_type_0  .chats_name{
    color: #000;min-width: 100px;
}
.chats_message.message_type_1  .chats_name{
    color:#627AAD;min-width: 100px;
}
.chats_message .chats_time{
    float:right;height: 16px;line-height: 16px;font-size: 10px;
    color: #909090;
}
.chats_message .chats_text{
    float:left;width: 100%;word-wrap: break-word;
}

.chats_body_line{
    float:left;width: 100%;padding: 0 0 10px 0;font-size: 14px;line-height: 18px;font-weight: bold;
}
.chats_body_line.center{
    text-align: center;
}
.chats_body_line.thanks{
    display: none;
}
.chats_body_line_label{
    float:left;width: 100%;font-size: 14px;font-weight: normal;
    color: #000;
}
.chats_body_line_input{
    float:left;width: 100%;
}
.chats_body_line_input input{
    float:left;width: 99%;padding: 2px;height: 20px;font-size: 14px;line-height: 20px;
}
.chats_body_line_input textarea{
    float:left;width: 99%;padding: 2px;height: 40px;font-size: 14px;
}
.chats_btn_send_email{
    float: none;display:inline-block;height: 24px;line-height: 24px;font-size: 12px;margin: 0 auto;padding: 0 15px;cursor: pointer;
    box-sizing: content-box;
    color:#646464;border: 1px solid #DADAD9;background: #F4F4F3;
}
.offline_status .chats_body{
    height: auto;
}
.finish .chats_body_line.hi{
    display: none;
}
.finish .chats_body_line.thanks{
    display: block;
}

/* send */
.chats_write{
    float: left;width: 100%;
    background: #FFF;
}

.chats_top_write{
    float:left;width: 100%;height: 20px;
    background: #F0F0EF;border-top: 1px solid #D3D3D2;border-bottom: 1px solid #D3D3D2;
}
.chats_btn_finish{
    float: right;height: 24px;line-height: 24px;font-size: 12px;margin: 7px 10px 0 0;padding: 0 15px;cursor: pointer;
    box-sizing: content-box;display: none;
    color:#646464;border: 1px solid #DADAD9;background: #F4F4F3;
}

.chats_preloader{
    float:right;height: 18px;width: 18px;margin: 0px 1px 0 0;background: url(preloader.gif) center no-repeat;visibility: hidden;
}
.loading .chats_preloader{
    visibility: visible;
}
.active .chats_btn_finish{
    display: block;
}
/*.chats_btn_finish:hover{
    color:#333;border: 1px solid #C4C4C3;background: #FCFCFB;
}*/

.chats_middle_write{
    float:left;width: 100%;height: 60px;position: relative;
}
.chats_middle_write textarea{
    float:left;margin: 0;padding: 5px;width: 290px;height: 50px;border: none !important;background: #FFF;font-size: 12px;
    resize: none;
    box-sizing: content-box;
}
.chats_btn_enter{
    position: absolute;z-index: 10;right: 10px;bottom: 10px;cursor: pointer;width: 15px;height: 13px;
    background: url(enter2.png) center no-repeat;
}
.chats_middle_write textarea::-webkit-input-placeholder       {color:inherit;opacity: 0.7; transition: opacity 0.3s ease;}
.chats_middle_write textarea::-moz-placeholder                {color:inherit;opacity: 0.7; transition: opacity 0.3s ease;}
.chats_middle_write textarea:-moz-placeholder                 {color:inherit;opacity: 0.7; transition: opacity 0.3s ease;}
.chats_middle_write textarea:-moz-placeholder                 {color:inherit;opacity: 0.7; transition: opacity 0.3s ease;}
.chats_middle_write textarea:focus::-webkit-input-placeholder {color:inherit;opacity: 0; transition: opacity 0.3s ease;}
.chats_middle_write textarea:focus::-moz-placeholder          {color:inherit;opacity: 0; transition: opacity 0.3s ease;}
.chats_middle_write textarea:focus:-moz-placeholder           {color:inherit;opacity: 0; transition: opacity 0.3s ease;}
.chats_middle_write textarea:focus:-ms-input-placeholder      {color:inherit;opacity: 0; transition: opacity 0.3s ease;}


.chats_input_error {
    border-color: red;
    background-color: #ffc8cf !important;
}

.chats_bottom_write {
    float:left;width: 100%;height: 20px;text-align: center;font-size: 12px;line-height: 20px;
    background: #F0F0EF;border-top: 1px solid #D3D3D2;border-bottom: 1px solid #D3D3D2;
}
@media only screen and (max-width: 960px) {
/*
tablet computer
*/
}
@media only screen and (max-width: 1124px) {
}

@media only screen and (max-width: 758px) {
/*
vertical tablet computer
 */
}
@media only screen and (max-width: 524px) {
/*phone*/
}


@media only screen and (max-width: 320px) {
    .chats_container {
        right: 0px !important;
        /*max-width: 300px;*/
        width: 100% !important;
    }

    .chats_title {
        width: 100% !important;
        padding: 0px !important;
        border-left: 10px solid transparent;
    }

    .chats_title .chats_btn {
        margin-right: 14px !important;
    }

    .active .chats_btn_big_finish {
        display: none !important;
    }

    .active .chats_btn_sml_finish {
        display: inline !important;
        font-size: 140%;
        font-weight: 100;
    }
}