@charset "utf-8";

/************************/
@-webkit-keyframes bg-yellow-to-white {
    0% {background-color:#ffcc00;}
    100% {background-color:#fff;}
}
@-moz-keyframes bg-yellow-to-white {
    0% {background-color:#ffcc00;}
    100% {background-color:#fff;}
}
@-o-keyframes bg-yellow-to-white {
    0% {background-color:#ffcc00;}
    100% {background-color:#fff;}
}
@keyframes bg-yellow-to-white {
    0% {background-color:#ffcc00;}
    100% {background-color:#fff;}
}
.animated-bg-yellow-to-white{
    -webkit-animation: bg-yellow-to-white 1.5s linear;
       -moz-animation: bg-yellow-to-white 1.5s linear;
        -ms-animation: bg-yellow-to-white 1.5s linear;
         -o-animation: bg-yellow-to-white 1.5s linear;
            animation: bg-yellow-to-white 1.5s linear;
}
/************************/

.app_right_column {
    display: block !important; /***!!!!!!!!!!!!!!*********************/
}

.bg-light {
    /*background-color: #fff !important;*/
}
.btn.btn-sm{
    padding-left: 6px !important;
    padding-right: 6px !important;
}
/************************/
.invalid_input .invalid-tooltip{display:block !important;}
.invalid-feedback{display:block !important;}
form .red_star{
    color:#f00;
}
form .red_star:before {
    content:"*";
}
form .form-group:last-child {
    margin-bottom:0;
}
.form-group {
    margin-bottom: 5px;
}
.custom-control .custom-control-label{
    height:16px;
    line-height:16px;
    margin:0.25rem 0;
    font-size: 90%;
}
.custom-control.custom-radio .custom-control-label:before {top:1px;}
.custom-control.custom-radio .custom-control-label:after {top:1px;}

.custom-control.custom-checkbox .custom-control-label:before {top:1px;}
.custom-control.custom-checkbox .custom-control-label:after {top:1px;}

.custom-control.custom-switch .custom-control-label:before {top:1px;}
.custom-control.custom-switch .custom-control-label:after {top: calc(.25rem - 1px);}

.bootstrap-select .dropdown-menu li a {
    font-size: 85%;
    position:relative;
    border:none !important;
}
.dropdown-item {
    padding: .25rem 0.75rem;
    border:none !important;
}
.bootstrap-select .dropdown-toggle .filter-option-inner-inner i {
    margin:0 5px 0 0;
}
.bootstrap-select.show-tick .dropdown-menu span {
    margin:0 5px 0 0;
}
.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
    right: 0;
    top: 10px;
    margin:0;
}

.form_prev_image{
    position:relative;
    margin:0 0 20px 0;
}
.form_prev_image img{
    display:block;
    max-width:100%;
    -webkit-border-radius: 10px;
     -khtml-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
}

.fix_control{
    padding:0;
    height:auto;
}
.bootstrap-select div.dropdown-menu.show{
    box-shadow: 0 0 16px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 16px rgba(0,0,0,0.3);
}
.bootstrap-select .btn.dropdown-toggle.btn-light{
    background: #fff !important;
    border: 1px solid #ced4da !important;
    background: none !important;
    -webkit-border-radius: .25rem !important;
     -khtml-border-radius: .25rem !important;
       -moz-border-radius: .25rem !important;
            border-radius: .25rem !important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
}
.is-invalid .bootstrap-select .btn.dropdown-toggle.btn-light,
.bootstrap-select .btn.dropdown-toggle.btn-light.is-invalid{
    border-color: #dc3545 !important;
}
.bootstrap-select .btn.dropdown-toggle.btn-light:focus,
.bootstrap-select .btn.dropdown-toggle.btn-light:active{
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    border-color:#fff !important;
}
/******************/
html {
    /*position: relative;
    min-height: 100%;
    overflow-x: hidden;

    margin-right: 0;
    margin-right: calc(-1 * (100vw - 100%));
    margin-right: -moz-calc(-1 * (100vw - 100%));
    margin-right: -webkit-calc(-1 * (100vw - 100%));*/
}
body {
    background-color:#f6f8fb;
    background-color: #ecf0f5;
    color: #3e3f55;
    font-size:14px;
}

.navbar_head{
    border-bottom: 1px solid #e9e9f5;
}
/*********************/
.main{
    margin:10px 0 0 0;
}
.main .site{
    position:relative;
}
.main .site .site_column{
    /*width:250px;*/
    width:300px;
    float:left;
}
.main .site .site_content{
   /* margin:0 0 0 270px;*/
    margin:0 0 0 330px;
    position:relative;
}
/************************/
.content-header {
    position: relative;
    padding: 5px 0 0 0;
    margin:0 0 20px 0;
    font-family: 'Oswald', sans-serif;
    /*background:#fff;*/
    overflow:hidden;
    -webkit-border-radius: 0 0 4px 0;
     -khtml-border-radius: 0 0 4px 0;
       -moz-border-radius: 0 0 4px 0;
            border-radius: 0 0 4px 0;
}
.content-header .page_menu_button{
    display:none;
}
.content-header h1 {
    margin: 0;
    padding:0;
    font-size: 24px;
    line-height:24px;
    color: #283140;
    font-family: 'Oswald', sans-serif;
    float:left;
    font-weight: 400;
    text-shadow: #fff 0 1px;
}
.content-header .sub_title {
    margin: 5px 0 0 15px;
    padding:0;
    line-height:20px;
    font-family: 'Oswald', sans-serif;
    float:left;
    font-weight: 300;

    font-size: 15px;
    color:#999;
}
.content-header .breadcrumb {
    float:right;
    background: #d2d6de;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    line-height:22px;
    padding:0 10px;
    margin:4px 0 0 0;
    font-size: 13px;
    color:#999;
    font-weight: 300;
    overflow:hidden;
    background: none;
    padding:0;
}
.content-header .breadcrumb a{
    color:#444;
    font-weight:400;
    border:none !important;
}
.content-header .breadcrumb-item+.breadcrumb-item {
    padding-left: .5rem;
}
.content-header .breadcrumb-item+.breadcrumb-item:before {
    padding-right: .3rem;
    color: #999;
    content: "->";
    content: '>';
    /*font-family: 'FontAwesome';*/
}
/************************/
.content{
    padding:0;
    /*padding:15px 0 15px 20px;*/
    /*clear:both;*/
}

.content .app_right_column{
    width:230px;
    float:right;
}
.content .app_left_column{
    margin-right:250px;
}

.content .blog_right_column,
.content .dialogues_right_column,
.content .dialog_right_column{
    width:280px;
    float:right;
}
.content .blog_left_column,
.content .dialogues_left_column,
.content .dialog_left_column{
    margin-right:300px;
}

.content .dialogues_left_column .box .box_body,
.content .dialogues_right_column .box .box_body,
.content .dialog_left_column .box .box_body,
.content .dialog_right_column .box .box_body{
    margin:3px 0 !important;
    padding:3px 0 !important;
}
/************************/
.logo{
    display:block;
    padding:0;
    margin:0;
    text-decoration:none;
    width:500px;
}
/************************/
.dropdown-menu{
    box-shadow: 0 0 26px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 26px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 26px rgba(0,0,0,0.3);
    /*border-color:#d3e0e9;*/
    border:none;
}
.dropdown-item{
    font-size:14px;
    /*padding:7px 10px;*/
}
.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    /*background-color: #283140;*/
}
/************************/
.list-group{
    background: #fff;
    border:none;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.09);
       -moz-box-shadow: 0 1px 3px rgba(0,0,0,.09);
        -ms-box-shadow: 0 1px 3px rgba(0,0,0,.09);
         -o-box-shadow: 0 1px 3px rgba(0,0,0,.09);
            box-shadow: 0 1px 3px rgba(0,0,0,.09);
}
.list-group a.list-group-item,
.list-group a.list-group-item:not([href]) {
    padding: 8px 12px 8px 15px;
    font-size:14px;
    color:#333;
    border:none;
    background: transparent;
    border-right:3px solid #fff;
    /*-webkit-border-radius: 0px;
     -khtml-border-radius: 0px;
       -moz-border-radius: 0px;
            border-radius: 0px;*/
}
.list-group a.list-group-item:hover,
.list-group a.list-group-item:not([href]):hover {
    background-color: #f7f7f7;
    border-color: #f7f7f7;
}
.list-group a.list-group-item.active,
.list-group a.list-group-item.active:not([href]) {
    font-weight:700;
    border-right:3px solid #007bff;
    background-color:#f6f8fb;
    background-color: #ecf0f5;
    background-color: #f2f2f2;
}


.list-group{padding:5px 0;}
.list-group-item:last-child,
.list-group-item:first-child {
    -webkit-border-radius: 0;
     -khtml-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
}

.list_slider_level{
    /*border-right:3px solid #007bff;*/
}
.list_slider_level a{
    display:block;
    color: #495867;
    background: none;
    text-decoration:none;
    padding: 0;
    margin: 0 0 0 20px;
    line-height: 100%;
    height: 28px;
    line-height: 28px;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 14px;
    border:none !important;
}
.list_slider_level a:hover{
    color:#000;
}
.list_slider_level a.active{
    color:#000;
    font-weight: 400;
}
/******************/
.footer{
    position: relative;
    bottom: 0;
    width: 100%;
    height: auto;
    line-height: 150%;
    margin:20px 0 0 0;
    padding:15px 0;
    /*background: #fff;*/
    border-top: 2px solid #007bff;
    overflow:hidden;
    text-align:center;
}
.footer .foot_counter,
.footer .foot_copy{
    float:right;
    margin:0 0 0 20px;
}
.footer .foot_info{
    float:left;
    overflow:hidden;
}
.footer .foot_info .foot_main,
.footer .foot_info .foot_menu{
    float:left;
    margin:0 20px 0 0;
}
.footer .foot_info .foot_menu{
    float:right;
    overflow:hidden;
}
.footer .foot_info .foot_menu a{
    margin:0 10px 0 0;
}
.footer .foot_info .foot_main a{
    border-bottom:1px solid #eee;
}
/******************/
.user_main{
    padding:15px;
    overflow:hidden;
}
.user_main .user_main_photo{
    float:left;
    width:200px;
    line-height:100%;
}
.user_main .user_main_photo .user_main_photo_box{
    position:relative;
    overflow:hidden;
    height: 250px;
    /*padding: 3px;
    background-color:#e9e9f5;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;*/
}
.user_main .user_main_photo .user_main_photo_box img{
    display:block;
    padding:0;
    margin:0 auto;
    border:none;
/*    max-width:100%;
    height:auto;*/
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
;
}
.user_main .user_main_photo .user_main_buttons{
    margin:15px 0 0 0;
    /*overflow:hidden;*/
}
.user_main .user_main_photo .user_main_smallbutton{
    float:right;
    width:30px;
    margin:0 0 0 5px;
}
.user_main .user_main_photo .user_main_bigbutton{
    margin:0 75px 0 0;
}
.user_main .user_main_wrap{
    margin:0 0 0 270px;
    position:relative;
}
.user_main .user_main_head{
    padding:0 0 7px 0;
    margin:0 0 15px 0;
    border-bottom:1px solid #f4f4f4;
}
.user_main .user_main_name{
    color: #283140;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 22px;
    padding:0;
    margin:0;
    height:24px;
    line-height:24px;
}
.user_main .user_main_sex_1:after,
.user_main .user_main_sex_2:after{
    font-family: 'FontAwesome';
    width:22px;
    height:22px;
    line-height:22px;
    font-size:22px;
    margin:0 0 0 15px;
}
.user_main .user_main_sex_1:after{content: '\f183'; content: '\f222'; color:#007bff;}
.user_main .user_main_sex_2:after{content: '\f182'; content: '\f221'; color:#FF1493;}

.user_main .user_main_online_status{
    display:inline-block;
    width: 12px;
    height: 12px;
    margin:0 0 3px 3px;
    -webkit-border-radius: 50%;
     -khtml-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}
.user_main .user_main_username{
    color:#999;
    margin:5px 0 0 0;
}
.user_main .user_main_status{
    /*color:#777;*/
    margin:10px 0 0 0;
}
.user_main .user_main_info{
    margin:10px 0 0 0;
    /*color:#777;*/
}
.user_main .user_main_info span{
    color:#333;
    font-weight:500;
}
.user_about_info{
    padding:0 120px;
    /*color:#333;*/
}
.user_about_info span{
    color:#333;
    font-weight:500;
}
/******************/
.profile_photo_box{
    padding:7px;
    margin:0;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
.profile_photo img{
    border:none;
    max-width:100%;
    display:block;
    margin:0 auto;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
/******************/
.app_info{
    position:relative;
    margin:-5px 0;
}
.app_info p{
    display:block;
    padding:0;
    margin:3px 0;
    height:18px;
    line-height:18px;
    font-size:12px;
    overflow:hidden;
}
.app_info p span{
    float:left;
}
.app_info p em{
    float:right;
    font-weight:700;
    font-style:normal;
}
/******************/
.video_dialog{
    background:#000;
    line-height:100%;
}
.video_dialog .video_dialog_poster{
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
.video_dialog .video_dialog_message_contaner{
    position:absolute;
    display:block;
    padding:0;
    margin:0 auto;
    width:100%;
    left:0; right:0; top:10%;
    background:#111;
    background: rgba(0, 0, 0, 0.45);
    box-shadow: inset 0px 0px 25px 25px rgba(0, 0, 0, 0.5);
}
.video_dialog .video_dialog_message{
    line-height:150%;
    font-size:16px;
    color:#fff;
    text-align:center;
}


.video_dialog .video_dialog_message_progress{
    position:absolute;
    display:none;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    left:0; right:0; top:0; bottom:0;
    cursor:default;
    background:#111;
    background: rgba(0, 0, 0, 0.8);
}
.video_dialog .video_dialog_message_progress:before{
    font-family: 'FontAwesome';
    content: "\f110";
    -webkit-animation: fa-spin 2s infinite linear;
     -khtml-animation: fa-spin 2s infinite linear;
       -moz-animation: fa-spin 2s infinite linear;
         -o-animation: fa-spin 2s infinite linear;
            animation: fa-spin 2s infinite linear;
    position:absolute;
    display:block;
    padding:0;
    margin:-40px 0 0 -40px;
    width:80px;
    height:80px;
    line-height:80px;
    font-size:80px;
    left:50%; top:50%;
    color:#fff;
    text-align:center;
}
/******************/
ul.list_videos,
ul.list_videos li{
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
    overflow:hidden;
    line-height:100%;
}
ul.list_videos{
    margin:-10px;
}
ul.list_videos li{
    width: 20%;
    float:left;
}
@media screen and (max-width: 1280px) {ul.list_videos li{width: 25%;}}
@media screen and (max-width: 992px) {ul.list_videos li{width: 33%; width: 33.333%;}}
@media screen and (max-width: 768px) {ul.list_videos li{width: 50%;}}
@media screen and (max-width: 576px) {ul.list_videos li{width: 100%;}}
ul.list_videos li .list_video_item,
ul.list_videos li a.list_video_item{
    margin:10px;
    position:relative;
    display: block;
    padding: 0;
    overflow: hidden;
    background:#000;
    text-decoration:none;
    cursor:default;
}
ul.list_videos li .list_video_item:before{
    display: block;
    content: "";
    padding-top: 56.25%;
}
ul.list_videos li .list_video_item .thumb_video_frame{
    position:absolute;
    display:block;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    left:0; right:0; top:0; bottom:0;
    /*z-index:1;*/
}
ul.list_videos li .list_video_item .thumb_video_message,
.dialog_attach_item .thumb_video_message{
    position:absolute;
    display:block;
    padding:4px 0;
    margin:0 auto;
    width:100%;
    left:0; right:0; top:50%;
    line-height:18px;
    font-size:12px;
    margin-top:-13px;
    background: rgba(255, 255, 255, 0.15);
    color:#eee;
    text-align:center;
    /*z-index:2;*/
}
ul.list_videos li .list_video_item .thumb_video_hd,
.dialog_attach_item .thumb_video_hd{
    position:absolute;
    display:block;
    padding:4px 5px;
    margin:0;
    left:0; top:5px;
    line-height:100%;
    font-size:11px;
    background: rgb(230, 70, 70);
    background: #dc3545;
    color:#fff;
    -webkit-border-radius: 0 3px 3px 0;
     -khtml-border-radius: 0 3px 3px 0;
       -moz-border-radius: 0 3px 3px 0;
            border-radius: 0 3px 3px 0;
}
ul.list_videos li .list_video_item .thumb_video_adult,
.dialog_attach_item .thumb_video_adult{
    position:absolute;
    display:block;
    padding:4px 5px;
    margin:0;
    right:0; top:5px;
    line-height:100%;
    font-size:11px;
    background: green;
    color:#fff;
    -webkit-border-radius: 3px 0 0 3px;
     -khtml-border-radius: 3px 0 0 3px;
       -moz-border-radius: 3px 0 0 3px;
            border-radius: 3px 0 0 3px;
}
ul.list_videos li .list_video_item .thumb_video_duration,
.dialog_attach_item .thumb_video_duration{
    position:absolute;
    display:block;
    padding:4px 5px;
    margin:0;
    right:5px; bottom:5px;
    line-height:100%;
    font-size:12px;
    background: url('../images/bg/ttb_bg.png');
    background: rgba(0,0,0,0.8);
    color:#eee;
    -webkit-border-radius: 3px;
     -khtml-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-transition: opacity 100ms linear;
       -moz-transition: opacity 100ms linear;
         -o-transition: opacity 100ms linear;
            transition: opacity 100ms linear;
}
ul.list_videos li .list_video_item:hover .thumb_video_duration,
.dialog_attach_item:hover .thumb_video_duration{
    opacity: 0; -moz-opacity:0; filter:alpha(opacity=0);
}
ul.list_videos li .list_video_item .thumb_video_title,
.dialog_attach_item .thumb_video_title{
    position:absolute;
    display:block;
    padding:0;
    margin:0 0 -40px 0;
    width:100%;
    left:0; right:0; bottom:0;
    line-height:18px;
    font-size:14px;
    background: url('../images/bg/ttb_bg.png');
    background: rgba(0,0,0,0.7);
    color:#fff;
    opacity: 0; -moz-opacity:0; filter:alpha(opacity=0)
    -webkit-transition: all 200ms linear;
       -moz-transition: all 200ms linear;
         -o-transition: all 200ms linear;
            transition: all 200ms linear;
}
ul.list_videos li .list_video_item:hover .thumb_video_title,
.dialog_attach_item:hover .thumb_video_title{
    margin:0;
    opacity: 1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
ul.list_videos li .list_video_item .thumb_video_title div,
.dialog_attach_item .thumb_video_title div{
    padding:5px 10px;
}

ul.list_videos li .list_video_item .thumb_video_play,
.dialog_attach_item .thumb_video_play{
    position:absolute;
    display:block;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    left:0; right:0; top:0; bottom:0;
    /*z-index:3;*/
    cursor:pointer;
    opacity: 0; -moz-opacity:0; filter:alpha(opacity=0);
    -webkit-transition: opacity 100ms linear;
       -moz-transition: opacity 100ms linear;
         -o-transition: opacity 100ms linear;
            transition: opacity 100ms linear;
}
ul.list_videos li .list_video_item:hover .thumb_video_play,
.dialog_attach_item:hover .thumb_video_play{
    opacity: 1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
    opacity: 0.8; -moz-opacity:0.8; filter:alpha(opacity=80)
}
ul.list_videos li .list_video_item .thumb_video_play:before,
.dialog_attach_item .thumb_video_play:before{
    content: "";
    position:absolute;
    display:block;
    padding:0;
    margin:-28px 0 0 -28px;
    width:56px;
    height:56px;

    left:50%; top:50%;
    background: rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.15);
    -webkit-border-radius: 50%;
     -khtml-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}
ul.list_videos li .list_video_item .thumb_video_play:after,
.dialog_attach_item .thumb_video_play:after{
    font-family: 'FontAwesome';
    content: "\f04b";
    content: "\f144";
    position:absolute;
    display:block;
    padding:0;
    margin:-20px 0 0 -20px;
    width:40px;
    height:40px;
    line-height:40px;
    font-size:40px;
    left:50%; top:50%;
    color:#fff;
    text-align:center;
}
/******************/
.dialog_attach_items{
    display:block;
}
.dialog_attach_items .dialog_attach_item{
    margin:5px 5px 0 0;
    float:left;
    position:relative;
}
.dialog_attach_items .dialog_attach_item img{
    height:135px;
}
/******************/
ul.attach_images,
ul.attach_images li{
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
    overflow:hidden;
    line-height:100%;
}
ul.attach_images{
    margin:-10px;
}
ul.attach_images li{
    width: 33%;
    width: 33.333%;
    float:left;
}
ul.attach_images li .attach_images_item{
    margin:10px;
    position:relative;
}
ul.attach_images li .attach_images_item:before{
    display: block;
    content: "";
    padding-top: 56.25%;
}
ul.attach_images li .attach_images_item img{
    position:absolute;
    display:block;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    left:0; right:0; top:0; bottom:0;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
ul.attach_images li .attach_images_item .attach_images_code{
    display:block;
    background: url('../images/bg/ttb_bg.png');
    background: rgba(0,0,0,0.7);
    position:absolute;
    bottom:0; left:0; right:0;
    width:100%;
    padding:0;
    margin:0;
    overflow:hidden;
    z-index:3;
    border:none;
    opacity: 0; -moz-opacity:0; filter:alpha(opacity=0);
    -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; transition: all 200ms linear;
}
ul.attach_images li .attach_images_item:hover .attach_images_code{
    opacity: 1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
    margin:0;
}
ul.attach_images li .attach_images_item .attach_images_code input{
    width:100%;
    height:30px;
    line-height:30px;
    margin:0;
    padding:0;
    font-size:12px;
    font-family: 'Oswald', sans-serif;
    color:#fff;
    background:none;
    border:none;
    text-align:center;
}
ul.attach_images li .attach_images_item .attach_images_code input:focus,
ul.attach_images li .attach_images_item .attach_images_code input:active{
    border:none;
}
ul.attach_images li .attach_images_item .attach_images_upload{
    position:absolute;
    left:0; top:0; bottom:0; right:0;
    width:100%;
    height:100%;
    cursor:pointer;
    z-index:2;
    background: rgba(0, 0, 0, 0.05);
}
ul.attach_images li .attach_images_item .attach_images_upload:before{
    content: "\f067";
    font-family: 'FontAwesome';

    position:absolute;
    left:50%; top:50%;
    width:30px;
    height:30px;
    line-height:30px;
    font-size:30px;
    text-align:center;
    margin:-15px 0 0 -15px;
    color:#fff;
}
ul.attach_images li .attach_images_item .attach_images_upload.attach_images_progress:before{
    content: "\f110";
    -webkit-animation: fa-spin 2s infinite linear;
     -khtml-animation: fa-spin 2s infinite linear;
       -moz-animation: fa-spin 2s infinite linear;
         -o-animation: fa-spin 2s infinite linear;
            animation: fa-spin 2s infinite linear;
}
/******************/
ul.list_photos,
ul.list_photos li{
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
    overflow:hidden;
    line-height:100%;
}
ul.list_photos{
    margin:-10px;
}
ul.list_photos li{
    width: 20%;
    width: 16.666%;
    float:left;
}
@media screen and (max-width: 1200px) {ul.list_photos li{width: 25%;}}
@media screen and (max-width: 992px) {ul.list_photos li{width: 33%; width: 33.333%;}}
@media screen and (max-width: 768px) {ul.list_photos li{width: 50%;}}
@media screen and (max-width: 576px) {ul.list_photos li{width: 100%;}}
ul.list_photos li .list_photo_item{
    margin:10px;
    position:relative;
}

ul.list_photos li .list_photo_item .private_photo{
    width:22px;
    height:22px;
    position:absolute;
    bottom:3px; left:3px;
    background: url('../images/bg/ttb_bg.png');
    background: rgba(0,0,0,0.7);
}
ul.list_photos li .list_photo_item .private_photo:before{
    content: "\f1e5";
    font-family: 'FontAwesome';

    position:absolute;
    left:50%; top:50%;
    width:14px;
    height:14px;
    line-height:14px;
    font-size:14px;
    text-align:center;
    margin:-7px 0 0 -7px;
    color:#fff;
}
/*********************/
ul.list_photos li .list_photo_item .list_photo_buttons,
ul.list_videos li .list_video_item .list_video_buttons,
ul.attach_images li .attach_images_item .attach_images_buttons{
    position:absolute;
    top:0; right:0;
    width:auto;
    height:26px;
    margin:0;
    overflow:hidden;
    opacity: 0; -moz-opacity:0; filter:alpha(opacity=0);
    -webkit-transition: opacity 100ms linear;
       -moz-transition: opacity 100ms linear;
         -o-transition: opacity 100ms linear;
            transition: opacity 100ms linear;
}
ul.list_photos li .list_photo_item:hover .list_photo_buttons,
ul.list_videos li .list_video_item:hover .list_video_buttons,
ul.attach_images li .attach_images_item:hover .attach_images_buttons{
    opacity: 1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
ul.list_photos li .list_photo_item .list_photo_buttons a,
ul.list_videos li .list_video_item .list_video_buttons a,
ul.attach_images li .attach_images_item .attach_images_buttons a{
    position:relative;
    display:block;
    padding:0;
    margin:0;
    text-decoration:none;
    text-align:center;
    float:left;
    width:20px;
    height:26px;
    color:#fff;
    background: url('../images/bg/ttb_bg.png');
    background: rgba(0,0,0,0.9);
    opacity: 0.7; -moz-opacity:0.7; filter:alpha(opacity=70);
    -webkit-transition: opacity 100ms linear;
       -moz-transition: opacity 100ms linear;
         -o-transition: opacity 100ms linear;
            transition: opacity 100ms linear;
}
ul.list_photos li .list_photo_item .list_photo_buttons a:hover,
ul.list_videos li .list_video_item .list_video_buttons a:hover,
ul.attach_images li .attach_images_item .attach_images_buttons a:hover{
    opacity: 1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
ul.list_photos li .list_photo_item .list_photo_buttons a:first-child,
ul.list_videos li .list_video_item .list_video_buttons a:first-child,
ul.attach_images li .attach_images_item .attach_images_buttons a:first-child{
    -webkit-border-radius: 0 0 0 4px;
     -khtml-border-radius: 0 0 0 4px;
       -moz-border-radius: 0 0 0 4px;
            border-radius: 0 0 0 4px;
}
ul.list_photos li .list_photo_item .list_photo_buttons a:last-child,
ul.list_videos li .list_video_item .list_video_buttons a:last-child,
ul.attach_images li .attach_images_item .attach_images_buttons a:last-child{
    -webkit-border-radius: 0 4px 0 0;
     -khtml-border-radius: 0 4px 0 0;
       -moz-border-radius: 0 4px 0 0;
            border-radius: 0 4px 0 0;
}
ul.list_photos li .list_photo_item .list_photo_buttons a:before,
ul.list_videos li .list_video_item .list_video_buttons a:before,
ul.attach_images li .attach_images_item .attach_images_buttons a:before{
    display:block;
    padding:0;
    margin:0;
    width:12px;
    height:12px;
    line-height:12px;
    font-size:12px;
    position:absolute;
    top:50%; left:50%;
    margin-top:-6px;
    margin-left:-6px;
    color:#fff;
    font-family: 'FontAwesome';
}
ul.list_photos li .list_photo_item .list_photo_buttons a.check:before{content: "\f00c";}
ul.list_photos li .list_photo_item .list_photo_buttons a.rotate:before{content: "\f01e";}
ul.list_photos li .list_photo_item .list_photo_buttons a.user:before{content: "\f007";}
ul.list_photos li .list_photo_item .list_photo_buttons a.edit:before{content: "\f040";}
ul.list_photos li .list_photo_item .list_photo_buttons a.delete:before{content: "\f00d";}

ul.list_videos li .list_video_item .list_video_buttons a.check:before{content: "\f00c";}
ul.list_videos li .list_video_item .list_video_buttons a.rotate:before{content: "\f01e";}
ul.list_videos li .list_video_item .list_video_buttons a.user:before{content: "\f007";}
ul.list_videos li .list_video_item .list_video_buttons a.edit:before{content: "\f040";}
ul.list_videos li .list_video_item .list_video_buttons a.delete:before{content: "\f00d";}

ul.attach_images li .attach_images_item .attach_images_buttons a.check:before{content: "\f00c";}
ul.attach_images li .attach_images_item .attach_images_buttons a.rotate:before{content: "\f01e";}
ul.attach_images li .attach_images_item .attach_images_buttons a.user:before{content: "\f007";}
ul.attach_images li .attach_images_item .attach_images_buttons a.edit:before{content: "\f040";}
ul.attach_images li .attach_images_item .attach_images_buttons a.delete:before{content: "\f00d";}

ul.list_photos li .list_photo_item .list_photo_buttons a.progress:before,
ul.list_videos li .list_video_item .list_video_buttons a.progress:before,
ul.attach_images li .attach_images_item .attach_images_buttons a.progress:before{
    content: "\f110";
    -webkit-animation: fa-spin 2s infinite linear;
     -khtml-animation: fa-spin 2s infinite linear;
       -moz-animation: fa-spin 2s infinite linear;
         -o-animation: fa-spin 2s infinite linear;
            animation: fa-spin 2s infinite linear;
}
/*********************/
.banner{
    position:relative;
    overflow:hidden;
}
.banner .banner_title{
    position:absolute;
    display:block;
    padding:0;
    margin:0 0 -40px 0;
    width:100%;
    left:0; right:0; bottom:0;
    line-height:18px;
    font-size:14px;
    background: url('../images/bg/ttb_bg.png');
    background: rgba(0,0,0,0.75);
    color:#fff;
    opacity: 0; -moz-opacity:0; filter:alpha(opacity=0)
    -webkit-transition: all 200ms linear;
       -moz-transition: all 200ms linear;
         -o-transition: all 200ms linear;
            transition: all 200ms linear;
}
.banner:hover .banner_title{
    margin:0;
    opacity: 1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
.banner .banner_title div{padding:10px 20px;}
/*********************/
ul.list_photos li .list_photo_item a{
    display:block;
    padding:0;
    margin:0;
    text-decoration:none;
}
ul.list_photos li .list_photo_item img{
    display:block;
    padding:0;
    margin:0;
    border:none;
    width:100%;
    height:auto;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
ul.list_photos li .list_photo_item .list_photo_upload{
    position:absolute;
    left:0; top:0; bottom:0; right:0;
    width:100%;
    height:100%;
    cursor:pointer;
    z-index:2;
    background: rgba(0, 0, 0, 0.05);
}
ul.list_photos li .list_photo_item .list_photo_upload:before{
    content: "\f067";
    font-family: 'FontAwesome';

    position:absolute;
    left:50%; top:50%;
    width:30px;
    height:30px;
    line-height:30px;
    font-size:30px;
    text-align:center;
    margin:-15px 0 0 -15px;
    color:#fff;
}
ul.list_photos li .list_photo_item .list_photo_upload.list_photo_progress:before{
    content: "\f110";
    -webkit-animation: fa-spin 2s infinite linear;
     -khtml-animation: fa-spin 2s infinite linear;
       -moz-animation: fa-spin 2s infinite linear;
         -o-animation: fa-spin 2s infinite linear;
            animation: fa-spin 2s infinite linear;
}
/******************/
ul.main_menu,
ul.main_menu li{
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
    overflow:hidden;
    line-height:100%;
}
ul.main_menu{
    padding:0 10px;
}
ul.main_menu li{
    padding: 3px 0;
}
ul.main_menu li.main_menu_title{
    padding: 3px 0 7px 29px;
    color:#333;
    font-weight:400;
    font-family: 'Oswald', sans-serif;
    font-size:16px;
}
ul.main_menu li.separator{
    padding: 0;
    margin: 5px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #f9f9f9;
}
ul.main_menu li a{
    font-size: 17px;
    line-height: 140%;
    color: #3e3f55;
    text-decoration: none;
    display: block;
    padding: 0;
    margin: 0;
    font-weight: 600;
   /* opacity: 1; -moz-opacity:0.8; filter:alpha(opacity=80);*/
}
ul.main_menu li a>svg{
    width: 17px;
    margin-right: 13px;

}
ul.main_menu li a>svg path{
    fill: #3e3f55;
}


ul.main_menu li a:hover{
    opacity: 1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
ul.main_menu li a .badge{
    float:right;
    margin:2px 0 0 5px;
}
/******************/
ul.list_users,
ul.list_users li{
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
    overflow:hidden;
}
ul.list_users{
    margin:0 -10px;
}
ul.list_users li{
    float:left;
    width:25%;
    line-height:100%;
    /*/background:#f00;*/
}
ul.list_users li .list_users_content{
    position:relative;
    padding:0;
    overflow:hidden;
    /*background:#f00;*/
}
ul.list_users li a{
    display:block;
    background:#fff;
    padding:5px;
    margin:10px;
    position:relative;
    text-decoration:none;
    border: 1px solid #e9e9f5;
    -webkit-border-radius: 6px;
     -khtml-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
    -webkit-transition: margin 100ms linear;
       -moz-transition: margin 100ms linear;
         -o-transition: margin 100ms linear;
            transition: margin 100ms linear;
}
ul.list_users li:hover a{
    margin:5px 10px 15px 10px;
    margin:0;
}
ul.list_users li .list_users_photo{
    position:relative;
    overflow:hidden;
}
ul.list_users li .list_users_photo_content{
    position:relative;
    height: 0;
    padding: 0;
    padding-bottom: 100%;
}
ul.list_users li .list_users_photo_content img {
    display: block;
    border:none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0; top: 0; right: 0;
    width: 100%;
    height: auto;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
ul.list_users li .list_users_name{
    margin:10px 0 5px 0;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 16px;
    height:20px;
    line-height:20px;
    color:#333;
}
/******************/
ul.users,
ul.users li{
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
    overflow:hidden;
}
ul.users{
    margin:-10px;
}
ul.users li{
    float:left;
    width:25%;
    line-height:100%;
}
ul.users li .users_content{
    margin:10px;
    background:#fff;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
ul.users li .users_cover{
    display:block;
    border:none;
    text-decoration:none;
    position:relative;
    height:0;
    margin:0;
    padding:0;
    padding-bottom: 40%;
    overflow:hidden;
    border-bottom: 1px solid #dee2e6;
    background: #283140 url('../images/no_cover_50_white.png') no-repeat 10px 10px;
    background-color: #4d505e;
    background-size:50px 50px;
    -webkit-border-radius: 4px 4px 0 0;
     -khtml-border-radius: 4px 4px 0 0;
       -moz-border-radius: 4px 4px 0 0;
            border-radius: 4px 4px 0 0;
}
ul.users li .users_cover img{
    display:block;
    margin:0;
    padding:0;
    position: absolute;
    left:0; top:0; right:0;
    width:100%;
    height:auto;
    /*z-index:1;*/
    -webkit-border-radius: 4px 4px 0 0;
     -khtml-border-radius: 4px 4px 0 0;
       -moz-border-radius: 4px 4px 0 0;
            border-radius: 4px 4px 0 0;
}
ul.users li .users_wrap{
    padding:0 10px 10px 10px;
    margin:-70px 0 0 0;

    position:relative;
}
ul.users li .users_photo{
    width:60%;
    margin:0 auto 0 auto;
    z-index:2;
    position:relative;
}
ul.users li .users_photo a{
    border:none;
    text-decoration:none;
}
ul.users li .users_photo img{
    border:none;
    width:100%;
    height:auto;
    display:block;
    margin:0 auto;
    border:3px solid #fff;
    -webkit-border-radius: 50%;
     -khtml-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
       -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
         -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
ul.users li .users_name{
    display:block;
    text-align:center;
    margin: 5px 0 0 0;
    padding: 0;
    font-size: 14px;
    line-height: 25px;
    color: #333;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    border:none;
    text-decoration:none;
}
ul.users li .users_status{
    display:inline-block;
    width: 10px;
    height: 10px;
    margin:0 0 1px 3px;
    -webkit-border-radius: 50%;
     -khtml-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}
/******************/
ul.top_peoples,
ul.top_peoples li{
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
    overflow:hidden;
    line-height:100%;
}
ul.top_peoples{
    margin:-10px;
}
ul.top_peoples li{
    float:left;
    width:50%;
    line-height:100%;
}
ul.top_peoples li .top_people{
    padding:5px;
}
ul.top_peoples li .top_people a{
    display:block;
    padding:0;
    margin:0;
    text-decoration:none;
}
ul.top_peoples li .top_people a img{
    display:block;
    padding:0;
    margin:0;
    width:100%;
    height:auto;
    border:none;

    -webkit-border-radius: 8px;
     -khtml-border-radius: 8px;
       -moz-border-radius: 8px;
            border-radius: 8px;
}
ul.top_peoples li .top_people a:hover img{
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
       -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
        -ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
         -o-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}
/************************/
a.avatar,
div.avatar,
div.avatar:hover{
    display:block;
    text-decoration:none;
    text-align: center;
    padding:0;
    margin:0;
    line-height:100%;
    border:3px solid #d3e0e9 !important;
    -webkit-border-radius: 50%;
     -khtml-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}
img.avatar{
    display:block;
    border:none;
    -webkit-border-radius: 50%;
     -khtml-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}
img.avatar.avatar_25{
    width:25px;
    height:25px;
}
img.avatar.avatar_30{
    width:30px;
    height:30px;
}
img.avatar.avatar_50{
    width:50px;
    height:50px;
}
img.avatar.avatar_100{
    width:100px;
    height:100px;
}
.online {
    width: 14px;
    height: 14px;
    position: absolute;
    -webkit-border-radius: 50%;
     -khtml-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    bottom:0;
    right: 3px;
    z-index: 2;
    border: 2px solid #fff;
}
.online_line {
    display:inline-block;
    width: 14px;
    height: 14px;
    -webkit-border-radius: 50%;
     -khtml-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    border: 2px solid #fff;
}
a.media{
    text-decoration:none;
}
.media-body{
    /*overflow:hidden;*/
}
.media-body .media-buttons{
    float:right;
    margin:3px 0 0 0;
}
.media-body .media-buttons a{
    display:block;
    width:16px;
    height:16px;
    line-height:16px;
    font-size:16px;
    float:left;
    margin:0 0 0 7px;
    border:none !important;
}

.media .media-likes{
    text-align:center;
    margin:5px -5px 0 -5px;
    line-height:14px;
    height:14px;
    overflow:hidden;
}
.media .media-likes .media-like-counter{
    padding:0 5px 0 5px;
    font-size:12px;
    cursor:default;
}
.media .media-likes .media-like-counter.positive{color:green;}
.media .media-likes .media-like-counter.negative{color:red;}

.media .media-likes .media-like-up,
.media .media-likes .media-like-down{
    border:none !important;
    display:inline-block;
    text-decoration:none;
    width:14px;
    height:14px;
    font-size:14px;
}
.media .media-likes .media-like-up:before,
.media .media-likes .media-like-down:before,
.media .media-likes .media-like-progress:before{
    font-family: 'FontAwesome';
    width:14px;
    height:14px;
    font-size:14px;
}
.media .media-likes .media-like-up:before{
    color:green;
    content: "\f196";
}
.media .media-likes .media-like-up.active:before{content: "\f0fe";}
.media .media-likes .media-like-down:before{
    color:red;
    content: "\f147";
}
.media .media-likes .media-like-down.active:before{content: "\f146";}
/************************/
.nim_dialogues_buttons{
    padding:10px;
    overflow:hidden;
    position:relative;
    line-height:100%;
}
.nim_dialogues_buttons a.nim_dialogues_button{
    display:block;
    text-decoration:none;
    position:relative;
    float:left;
    padding:0;
    margin:1px 10px 1px 0;
    width:30px;
    height:30px;
    line-height:28px;
    font-size:14px;
    text-align:center;
    color:#283140;
    border:1px solid #283140;
    -webkit-border-radius: 50%;
     -khtml-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}
.nim_dialogues_buttons a.nim_dialogues_button .count_new {
    background: rgb(230, 70, 70);
    background: #dc3545;
    position: absolute;
    top: -6px;
    left: 18px;
    font-size: 11px;
    color: #fff;
    z-index: 9;
    font-weight: 600;
    padding: 3px 6px;
    line-height:100%;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
.nim_dialogues_buttons a.nim_dialogues_button:hover{
    background:#f7f7f7;
}
.nim_dialogues_buttons a.nim_dialogues_button:active{
    margin:2px 10px 0 0;
}
.nim_dialogues_buttons a.nim_dialogues_button.active{
    background:#283140;
    color:#fff;
}

.nim_dialog{
    position:relative;
    overflow:hidden;
}
.nim_dialog .nim_dialog_body{
    overflow:hidden;
    position:relative;
}
.nim_dialog .count_new {
    background: rgb(230, 70, 70);
    background: #dc3545;
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 11px;
    color: #fff;
    z-index: 9;
    font-weight: 600;
    padding: 3px 6px;
    line-height:100%;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
.nim_dialog .nim_dialog_name{
    font-weight:700;
    height:16px;
    width:100%;
    line-height:16px;
    overflow:hidden;
    position:relative;
}
.nim_dialog .nim_dialog_message{
    font-weight:400;
    height:16px;
    width:100%;
    line-height:16px;
    overflow:hidden;
    margin:5px 0 0 0;
}
.nim_dialog .nim_dialog_date{
    font-family: 'Oswald', sans-serif;
    font-size:12px;
    font-weight:300;
    color:#999;
    height:14px;
    line-height:14px;
    margin:7px 0 0 0;
    text-transform:lowercase;
}
.nim_dialog div.avatar{
    border-color:#fff;
}

.nim_dialog .media{
    border-bottom: 1px solid #dee2e6;
}
.nim_dialog .media:last-child{
    border:none;
}
.nim_dialog .media:hover{
    background-color: #f7f7f7;
}
.nim_dialog a.media{
    /*border-left:5px solid #fff;*/
    position:relative;
}
.nim_dialog a.media.nim_dialog_current{
    /*background-color: #283140;*/
}
.nim_dialog a.media.nim_dialog_current:before{
    content:"";
    width:3px;
    height:100%;
    left:0; top:0; bottom:0;
    position:absolute;
    background-color: #007bff;
}
.nim_dialog .nim_dialog_current .nim_dialog_name,
.nim_dialog .nim_dialog_current .nim_dialog_message,
.nim_dialog .nim_dialog_current .nim_dialog_date{
    /*color:#fff;*/
}
.nim_dialog .nim_dialog_current .nim_dialog_body .count_new{
    /*background-color: #eee;
    color: #283140;*/
}

/*.nim_dialog .media{
    border-bottom: 1px solid #dee2e6;
}*/
/************************/
.mess.media{}
.mess.media .media-left img{
    display:block;
    width:35px;
    height:40px;
}
.mess.media .media-body{
    margin-top:-5px
}
.mess.media .mess_new {
    background: rgb(230, 70, 70);
    background: #dc3545;
    position: absolute;
    top: -5px;
    right: -15px;
    /*float:left;*/
    font-size: 9px;
    color: #fff;
    z-index: 9;
    font-weight: 600;
    padding: 2px 5px;
    line-height:100%;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
.mess.media .mess_reading{
    width:14px;
    height:14px;
    font-size:14px;
    color:#d3e0e9 ;
    line-height:14px;
    margin:0;
    cursor:default;
    position:absolute;
    bottom:0; right:0;
}
.mess.media .mess_reading.read{
    color:green;
}
.mess.media .mess_reading:before{
    content: "\f00c";
    font-family: 'FontAwesome';
}
.mess.media .mess_reading.read:before{
    content: "\f046";
    font-family: 'FontAwesome';
}
/************************/
form.dialog_form{
    background:#f7f7f7;
    padding:10px 10px 5px 10px;
    margin:0;
    /*overflow:hidden;*/
    border-bottom: 1px solid #d3e0e9;
}
form.dialog_form .dialog_form_from{
    width:36px;
    float:right;
    margin:0;
}
form.dialog_form .dialog_form_to{
    width:36px;
    float:left;
    margin:0;
}
form.dialog_form .dialog_form_content{
    width:auto;
    margin:0 50px;
    padding:3px 0 0 0;
}

form.dialog_form .dialog_form_content .dialog_form_attachments{
    display:block;
}
form.dialog_form .dialog_form_content .dialog_form_attachments .dialog_form_attach_item{
    margin:5px 5px 0 0;
    float:left;
    position:relative;
}
form.dialog_form .dialog_form_content .dialog_form_attachments .dialog_form_attach_item img{
    max-height:100px;
}
form.dialog_form .dialog_form_content .dialog_form_attachments .dialog_form_attach_item .dialog_form_unattach_button{
    display:block;
    width:16px;
    height:16px;
    position: absolute;
    top: 0; right: 0;
    color:#fff;
    text-align:center;
    background: url('../images/bg/ttb_bg.png');
    background: rgba(0,0,0,0.9);
    opacity: 0; -moz-opacity:0; filter:alpha(opacity=0);
    -webkit-transition: opacity 100ms linear;
       -moz-transition: opacity 100ms linear;
         -o-transition: opacity 100ms linear;
            transition: opacity 100ms linear;
    -webkit-border-radius: 2px;
     -khtml-border-radius: 2px;
       -moz-border-radius: 2px;
            border-radius: 2px;
}
form.dialog_form .dialog_form_content .dialog_form_attachments .dialog_form_attach_item:hover .dialog_form_unattach_button{
    opacity: 1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
form.dialog_form .dialog_form_content .dialog_form_attachments .dialog_form_attach_item .dialog_form_unattach_button:before{
    display:block;
    padding:0;
    margin:0;
    width:12px;
    height:12px;
    line-height:12px;
    font-size:12px;
    position:absolute;
    top:50%; left:50%;
    margin-top:-6px;
    margin-left:-6px;
    color:#fff;
    font-family: 'FontAwesome';
    content: "\f00d";
}

form.dialog_form .dialog_form_content .dialog_form_buttons{
    margin:5px -5px 0 -5px;
    /*overflow:hidden;*/
    display:none;
    padding:5px;
}
form.dialog_form .dialog_form_content .dialog_form_buttons button{
    /*float:left;*/
}
form.dialog_form .dialog_form_content .dialog_form_buttons .dialog_attach_content_button{
    display:block;
    text-decoration:none;
    float:right;
    width:16px;
    height:16px;
    line-height:16px;
    font-size:16px;
    cursor:pointer;
    margin:3px 0 0 15px;
    color:#777;
    position:relative;
}
form.dialog_form .dialog_form_content .dialog_form_buttons .dialog_attach_content_button div{
    /*background: rgb(230, 70, 70);
    background: #dc3545;*/
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 9px;
    color: #fff;
    z-index: 9;
    font-weight: 600;
    padding: 2px 5px;
    line-height:100%;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
form.dialog_form .dialog_form_content textarea{
    height:32px;
    overflow:hidden;
    resize: none;
}
form.dialog_form .dialog_form_content .dialog_form_counter{
    margin:0;
    background:#F7F8F8;
    border-top:1px solid #F2F3F4;
    -webkit-border-radius: 0 0 4px 4px;
     -khtml-border-radius: 0 0 4px 4px;
       -moz-border-radius: 0 0 4px 4px;
            border-radius: 0 0 4px 4px;
    position:absolute;
    left:1px; right:1px; bottom:1px;
    z-index:2;
    padding:0 10px;
    height:26px;
    line-height:26px;
    display:none;
}
form.dialog_form .dialog_form_content.active .dialog_form_buttons{
    display:block;
}
form.dialog_form .dialog_form_content.active .dialog_form_counter{
    display:block;
}
form.dialog_form .dialog_form_content.active textarea{
    height:auto;
    overflow:auto;
}
form.dialog_form .online{
    right:0;
    width: 11px;
    height: 11px;
}
/************************/
.emoji_contaner{
    display:block;
    visibility:hidden;
    padding:12px 0 0 0;
    margin:5px 0 0 0;
    position:absolute;
    top:16px; right:-25px;
    line-height:1;
    z-index:3;
    cursor:default;
    text-align:right;
    opacity: 0; -moz-opacity:0; filter:alpha(opacity=0);
    -webkit-transition: all 120ms linear;
       -moz-transition: all 120ms linear;
         -o-transition: all 120ms linear;
            transition: all 120ms linear;
}

.dialog_attach_content_button:hover .emoji_contaner,
.chat-form-button:hover .emoji_contaner{
    margin:0;
    visibility:visible;
    display:block;
    opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
.emoji_contaner ul,
.emoji_contaner ul li{
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
    position:relative;
    line-height:100%;
}
.emoji_contaner ul{
    padding:3px;
    text-align:center;
    width:293px;
    height:200px;
    background-color:#fff;
    overflow:hidden;
    overflow-y:scroll;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: 0 0 26px rgba(0,0,0,0.3);
       -moz-box-shadow: 0 0 26px rgba(0,0,0,0.3);
            box-shadow: 0 0 26px rgba(0,0,0,0.3);
}
.emoji_contaner ul li{
    float:left;
    width:30px;
    height:30px;
    cursor:pointer;
    -webkit-border-radius: 3px;
     -khtml-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}
.emoji_contaner ul li img{
    width:16px;
    height:16px;
    margin:7px 0 0 7px;
    display:block;
    -webkit-transition: all 120ms linear;
       -moz-transition: all 120ms linear;
         -o-transition: all 120ms linear;
            transition: all 120ms linear;
}
.emoji_contaner ul li:hover img{
    width:26px;
    height:26px;
    margin:2px 0 0 2px;
}
.emoji_contaner ul li:hover{
    background-color:#f7f7f7;
}
.emoji_contaner .emoji_content{
    position:relative;
    padding:0;
    display:block;
}
.emoji_contaner .emoji_content:after {
    content: "";
    display:inline-block;
    border: solid transparent;
    position:absolute;
    right: 25px; top:-18px;
    border-bottom-color: #fff;
    border-width: 9px;
    margin-left: 0;
}
/************************/
.modal_form form.dialog_form .dialog_form_content .dialog_form_buttons{
    display:block;
}
.modal_form form.dialog_form .dialog_form_content .dialog_form_counter{
    display:block;
}
.modal_form form.dialog_form .dialog_form_content textarea{
    height:auto;
    overflow:auto;
}
.modal_form form.dialog_form .dialog_form_from,
.modal_form form.dialog_form .dialog_form_to{
    display:none;
}
.modal_form form.dialog_form {
    background: #ecf0f5;
    padding: 0;
    border-bottom: none;
}
.modal_form form.dialog_form .dialog_form_content {
    width: auto;
    margin: 0;
    padding: 0;
}
.modal_form form.dialog_form .dialog_form_content .dialog_form_buttons{
    margin:0;
    padding:20px;
}
.modal_form form.dialog_form .dialog_form_content .dialog_form_attachments{
    padding:0 20px 20px 20px;
}
.modal_form .form-control {
    border:none;
    /*border-bottom:1px solid #007bff;*/
    -webkit-border-radius: 0 !important;
     -khtml-border-radius: 0 !important;
       -moz-border-radius: 0 !important;
            border-radius: 0 !important;
}
.modal_form textarea.form-control {
    font-size:18px;
    padding-left:20px;
    padding-right:20px;

    padding:20px;
}
.modal_form .form-control:focus {
    color: #495057;
    /*background-color: #fff;
    border-color: #80bdff;*/
    outline: none;
    box-shadow: none;
}

.modal_form .emoji_contaner{
    /*visibility:visible;
    opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);*/

    padding:0 0 12px 0;
    margin:0 0 5px 0;
    top:auto; bottom:16px; right:-25px;
}
.modal_form .emoji_contaner .emoji_content:after {
    content: "";
    display:inline-block;
    border: solid transparent;
    position:absolute;
    right: 25px; top:auto; bottom:-17px;
    border-top-color: #fff;
    border-width: 9px;
    margin-left: 0;
}
/************************/
.dialog{
    position:relative;
    min-height:230px;
}
.message{
    padding:0;
    margin:10px 20px;
    overflow:hidden;
    position:relative;
}
.message .message_avatar{
    width:31px;
    margin:0 10px 0 0;
}
/*.message.message_from .message_avatar{
    float:right;
    margin:0 0 0 0 10px;
}*/

.message .message_body{
    max-width:70%;
}
.message .message_body .message_reading{
    width:14px;
    height:14px;
    font-size:14px;
    color:#d3e0e9 ;
    line-height:14px;
    margin:0 0 0 5px;
    cursor:default;
}
.message .message_body .message_reading.read{
    color:green;
}
.message .message_body .message_reading:before{
    content: "\f00c";
    font-family: 'FontAwesome';
}
.message .message_body .message_reading.read:before{
    content: "\f046";
    font-family: 'FontAwesome';
}
.message .message_body .message_date{
    font-family: 'Oswald', sans-serif;
    font-size:11px;
    font-weight:300;
    color:#999;
    height:14px;
    line-height:14px;
    margin:3px 0 0 0;
    text-transform:lowercase;
    opacity: 0; -moz-opacity:0; filter:alpha(opacity=0);
    -webkit-transition: opacity 120ms linear;
       -moz-transition: opacity 120ms linear;
         -o-transition: opacity 120ms linear;
            transition: opacity 120ms linear;
}
.message:hover .message_body .message_date{
    opacity: 1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}

.message .message_text{
    font-size:13px;
    padding:5px 18px;
    position:relative;
    -webkit-border-radius: 15px;
     -khtml-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
}
.message .message_text .message_new {
    background: rgb(230, 70, 70);
    background: #dc3545;
    position: absolute;
    top: 3px;
    right: -15px;
    font-size: 9px;
    color: #fff;
    z-index: 9;
    font-weight: 600;
    padding: 2px 5px;
    line-height:100%;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
.message .message_text strong{
    font-weight:500;
}
.message.message_from .message_text{
    /*color:#fff;
    background:#007bff;*/
    background:#ecf0f5;
}
.message.message_from .message_text a{
    /*color:#fff;*/
}
.message.message_from .message_text:before{
    content:" ";
    position:absolute;
    top:9px; right:-7px;
    display:block;
    padding:0;
    margin:0;
    width: 0;
    height: 0;
    line-height: 100%;
    border: 10px solid transparent;
    /*border-color: #007bff transparent transparent #007bff;*/
    border-color: #ecf0f5 transparent transparent #ecf0f5;
}
.message.message_to .message_text{
    color:#000;
    background:#ecf0f5;
}
.message.message_to .message_text:before{
    content:" ";
    position:absolute;
    top:9px; left:-7px;
    display:block;
    padding:0;
    margin:0;
    width: 0;
    height: 0;
    line-height: 100%;
    border: 10px solid transparent;
    border-color: #ecf0f5 #ecf0f5 transparent transparent;
}
/************************/
ul.delivery_list,
ul.delivery_list li{
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
    position:relative;
    line-height:100%;
}
ul.delivery_list li{
    margin:0;
}

ul.delivery_list li .delivery_list_menu{
    position:absolute;
    right:10px; top:7px;
    z-index:1;
}
ul.delivery_list li .delivery_list_menu .delivery_list_menu_button{
    background:#fff;
    border: 1px solid #e9e9f5;
}

ul.delivery_list li .delivery_list_icon{
    float:left;
    width:220px;
    text-align:center;
    overflow:hidden;
    position:relative;
}
ul.delivery_list li .delivery_list_icon img.delivery_list_icon_bg{
    width:100%;
    height:auto;
    display:block;
    z-index:1;
}
ul.delivery_list li .delivery_list_icon img.delivery_list_icon_file{
    position:absolute;
    left:50%; top:50%;
    width:100px;
    height:100px;
    height:auto;
    line-height:100px;
    display:block;
    margin:-50px 0 0 -50px;
    padding:0;
    border:none;
    /*border:2px solid #007bff;*/
    /*-webkit-border-radius: 50%;
     -khtml-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;*/
}

.delivery_list_content{
    margin:0;
    padding:0;
    position:relative;
    /*overflow:hidden;*/
}

ul.delivery_list li .delivery_list_wrap{
    /*margin:0 0 0 240px;*/
    padding:45px 0 25px 0;
}
ul.delivery_list li .delivery_list_wrap .delivery_list_wrap_content{
    margin:0;
    padding:10px 20px;
    position:relative;
    background:#fff;
    -webkit-border-radius: 10px;
     -khtml-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
}
ul.delivery_list li .delivery_list_title{
    cursor:pointer;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
ul.delivery_list li .delivery_list_title p{
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 24px;
    color: #283140;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    position:relative;
    text-shadow: #fff 0 1px;
}
ul.delivery_list li .delivery_list_title:hover p{
    color:#007bff;
}
ul.delivery_list li .delivery_list_title:not(.collapsed) p {
    color:#007bff;
}
ul.delivery_list li .delivery_list_title p:after {
    content: '\f196';
    display:block;
    font-family: 'FontAwesome';
    position: absolute;
    font-size: 16px;
    width:16px;
    height:16px;
    margin:-8px 0 0 0;
    top: 50%;
    right: 0;
    font-weight: 300;
}
ul.delivery_list li .delivery_list_title:not(.collapsed) p:after {
    content: '\f147';
}

ul.delivery_list li .delivery_list_wrap span{
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    color: #999;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    text-shadow: #fff 0 1px;
    margin:10px 0 0 0;
}

/*ul.delivery_list li:nth-child(2n) .delivery_list_icon{
    float:right;
}
ul.delivery_list li:nth-child(2n) .delivery_list_wrap{
    margin:0 240px 0 0;
}*/

.delivery_product{
    padding:0;
    margin:15px 0 0 0;
    position:relative;
    /*overflow:hidden;*/
    line-height:1;

    /*background:#f00;
    height:50px;*/
}
.delivery_product .delivery_product_image{
    position:relative;
    overflow:hidden;
}
.delivery_product .delivery_product_image:before {
    display: block;
    content: "";
    padding-top: 56.25%;
}
.delivery_product .delivery_product_image a{
    text-decoration:none;
    display:block;
    padding:0;
    margin:0;
}
.delivery_product .delivery_product_image img{
    position: absolute;
    display: block;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    z-index:1;
}
.delivery_product .delivery_product_image_no_photo{
    position: absolute;
    display: block;
    padding: 0;
    margin: -12px 0 0 0;
    width: 100%;
    height: 20px;
    line-height: 24px;
    left: 0;
    right: 0;
    top: 50%;
    font-size:22px;
    color:#fff;
    text-align:center;
    z-index:2;
}
.delivery_product .delivery_product_cost{
    position: absolute;
    display: block;
    padding: 0 10px;
    margin: 0;
    height: 34px;
    line-height: 34px;
    top: 5px;
    left: 5px;
    font-size:22px;
    text-align:center;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    background: url('../images/bg/ttb_bg.png');
    background: rgba(0,0,0,0.6);
    color:#eee;
    cursor:pointer;
    z-index:3;
}
.delivery_product .delivery_product_manage_button{
    position: absolute;
    display: block;
    padding: 0;
    margin: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
    top: 5px;
    right: 5px;
    font-size:16px;
    text-align:center;
    background: url('../images/bg/ttb_bg.png');
    background: rgba(0,0,0,0.8);
    color:#eee;
    -webkit-border-radius: 3px;
     -khtml-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-transition: opacity 200ms linear;
       -moz-transition: opacity 200ms linear;
         -o-transition: opacity 200ms linear;
            transition: opacity 200ms linear;
    opacity: 0; -moz-opacity:0; filter:alpha(opacity=0);
    cursor:pointer;
    z-index:3;
}
.delivery_product:hover .delivery_product_manage_button{
    opacity: 0.7; -moz-opacity:0.7; filter:alpha(opacity=70);
}
.delivery_product .delivery_product_manage_button:hover{
    opacity: 1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}

.delivery_product .delivery_product_title{
    margin:5px 0 0 0;
    color:#666;
}
.delivery_product .delivery_product_title a{
    color:#666;
}

@media screen and (max-width: 992px) {
    ul.delivery_list li .delivery_list_icon {
        width:160px;
        display:none;
    }
    ul.delivery_list li .delivery_list_wrap {
        /* margin: 0 0 0 240px; */
        padding: 10px 0;
    }
    ul.delivery_list li .media-body {
        -ms-flex: none;
        flex: none;
        display:block;
        width:100%;
    }
}
@media screen and (max-width: 768px) {
    ul.delivery_list li .delivery_list_icon {
        width:100px;
    }
}
@media screen and (max-width: 576px) {
    ul.delivery_list li .delivery_list_icon {
        display:none;
    }
}
/************************/
.support_form_attachments{
    display:block;
}
.support_form_attachments .support_form_attach_item{
    margin:5px 5px 0 0;
    float:left;
    position:relative;
}
.support_form_attachments .support_form_attach_item img{
    max-height:100px;
}
.support_form_attachments .support_form_attach_item .support_form_unattach_button{
    display:block;
    width:16px;
    height:16px;
    position: absolute;
    top: 0; right: 0;
    color:#fff;
    text-align:center;
    background: url('../images/bg/ttb_bg.png');
    background: rgba(0,0,0,0.9);
    opacity: 0; -moz-opacity:0; filter:alpha(opacity=0);
    -webkit-transition: opacity 100ms linear;
       -moz-transition: opacity 100ms linear;
         -o-transition: opacity 100ms linear;
            transition: opacity 100ms linear;
    -webkit-border-radius: 2px;
     -khtml-border-radius: 2px;
       -moz-border-radius: 2px;
            border-radius: 2px;
}
.support_form_attachments .support_form_attach_item:hover .support_form_unattach_button{
    opacity: 1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
.support_form_attachments .support_form_attach_item .support_form_unattach_button:before{
    display:block;
    padding:0;
    margin:0;
    width:12px;
    height:12px;
    line-height:12px;
    font-size:12px;
    position:absolute;
    top:50%; left:50%;
    margin-top:-6px;
    margin-left:-6px;
    color:#fff;
    font-family: 'FontAwesome';
    content: "\f00d";
}

.support_attach_content_button{
    display:block;
    text-decoration:none;
    float:right;
    width:16px;
    height:16px;
    line-height:16px;
    font-size:16px;
    cursor:pointer;
    margin:3px 0 0 15px;
    color:#777;
    position:relative;
}
/*********************************/
.chat-column .media{
    cursor:pointer;
}
.chat-column .media:hover{
    background-color: #ecf0f5;
}
.chat-column .active .media{
    background-color: #007bff;
    color: #fff;
}
.chat-column .active .media .text-muted{
    color: #fff !important;
}

.chat-column .media .count_new,
.chat-column .media .dialog_new {
    background: rgb(230, 70, 70);
    background: #dc3545;
    position: absolute;
    top: 50%;
    right: 5px;
    font-size: 11px;
    color: #fff;
    z-index: 9;
    font-weight: 600;
    padding: 0;
    margin:-10px 0 0 0;
    width:20px;
    height:20px;
    line-height: 20px;
    text-align:center;
    -webkit-border-radius: 50%;
     -khtml-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}
.chat-column .media .dialog_new {
    top: 5px;
    margin: 0;
}
.chat-column .active .media .count_new,
.chat-column .active .media .dialog_new {
    background: #fff;
    color: #007bff;
}

.chat-progress{
    padding:30px 0;
    margin:0;
    position:relative;
    text-align:center;
}
.chat-progress:before{
    content: '\f110';
    font-family: 'FontAwesome';
    display:inline-block;
    line-height: 1;
    font-size:30px;
    width: 30px;
    height: 30px;
    margin:0;
    color: #007bff;
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
}

.chat-form .chat-form-buttons{
    margin:5px 0 0 -5px;
    /*overflow:hidden;*/
    padding:0;
    float:right;
}
.chat-form .chat-form-buttons .chat-form-button{
    display:block;
    text-decoration:none;
    float:right;
    width:16px;
    height:16px;
    line-height:16px;
    font-size:16px;
    cursor:pointer;
    margin:3px 0 0 15px;
    color:#777;
    position:relative;
}
.chat-form .chat-form-buttons .chat-form-button div{
    /*background: rgb(230, 70, 70);
    background: #dc3545;*/
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 9px;
    color: #fff;
    z-index: 9;
    font-weight: 600;
    padding: 2px 5px;
    line-height:100%;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

.chat-form .chat-form-attachments{
    display:block;
}
.chat-form .chat-form-attachments .chat-form-attach-item{
    margin:5px 5px 0 0;
    float:left;
    position:relative;
}
.chat-form .chat-form-attachments .chat-form-attach-item img{
    max-height:100px;
}
.chat-form .chat-form-attachments .chat-form-attach-item .chat-form-unattach-button{
    display:block;
    width:16px;
    height:16px;
    position: absolute;
    top: 0; right: 0;
    color:#fff;
    text-align:center;
    background: url('../images/bg/ttb_bg.png');
    background: rgba(0,0,0,0.8);
    opacity: 0; -moz-opacity:0; filter:alpha(opacity=0);
    -webkit-transition: opacity 100ms linear;
       -moz-transition: opacity 100ms linear;
         -o-transition: opacity 100ms linear;
            transition: opacity 100ms linear;
    -webkit-border-radius: 2px;
     -khtml-border-radius: 2px;
       -moz-border-radius: 2px;
            border-radius: 2px;
}
.chat-form .chat-form-attachments .chat-form-attach-item:hover .chat-form-unattach-button{
    opacity: 1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
.chat-form .chat-form-attachments .chat-form-attach-item .chat-form-unattach-button:before{
    display:block;
    padding:0;
    margin:0;
    width:12px;
    height:12px;
    line-height:12px;
    font-size:12px;
    position:absolute;
    top:50%; left:50%;
    margin-top:-6px;
    margin-left:-6px;
    color:#fff;
    font-family: 'FontAwesome';
    content: "\f00d";
}

.chat-online{
    width:8px;
    height:8px;
    border:1px solid #fff;
    display:inline-block;
    -webkit-border-radius: 50%;
     -khtml-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}

.chat-message-attach-items {
    display: block;
}
.chat-message-attach-items .chat-message-attach-item{
    margin:5px 5px 0 0;
    float:left;
    position:relative;
}
.chat-message-attach-items .chat-message-attach-item img{
    height:60px;
    width:auto;
}
.chat-message-attach-item .chat-message-attach-item-mask{
    position:absolute;
    left:0; right:0; top:0; bottom:0;
    width:100%;
    height:100%;
    display:block;
    padding:0;
    margin:0;
    line-height:100%;
}


/*.chat-message-attach-item .thumb_video_frame{
    position:absolute;
    display:block;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    left:0; right:0; top:0; bottom:0;
}*/
.chat-message-attach-item .thumb_video_message{
    position:absolute;
    display:block;
    padding:4px 0;
    margin:0 auto;
    width:100%;
    left:0; right:0; top:50%;
    line-height:18px;
    font-size:12px;
    margin-top:-13px;
    background: rgba(255, 255, 255, 0.15);
    color:#eee;
    text-align:center;
    /*z-index:2;*/
}
.chat-message-attach-item .thumb_video_hd{
    position:absolute;
    display:block;
    padding:4px 5px;
    margin:0;
    left:0; top:5px;
    line-height:100%;
    font-size:11px;
    background: rgb(230, 70, 70);
    background: #dc3545;
    color:#fff;
    -webkit-border-radius: 0 3px 3px 0;
     -khtml-border-radius: 0 3px 3px 0;
       -moz-border-radius: 0 3px 3px 0;
            border-radius: 0 3px 3px 0;
}
.chat-message-attach-item .thumb_video_adult{
    position:absolute;
    display:block;
    padding:4px 5px;
    margin:0;
    right:0; top:5px;
    line-height:100%;
    font-size:11px;
    background: green;
    color:#fff;
    -webkit-border-radius: 3px 0 0 3px;
     -khtml-border-radius: 3px 0 0 3px;
       -moz-border-radius: 3px 0 0 3px;
            border-radius: 3px 0 0 3px;
}
.chat-message-attach-item .thumb_video_duration,
.chat-message-attach-item .chat-message-attach-item-view{
    position:absolute;
    display:block;
    padding:4px 5px;
    margin:0;
    line-height:100%;
    font-size:12px;
    background: url('../images/bg/ttb_bg.png');
    background: rgba(0,0,0,0.8);
    color:#eee;
    -webkit-border-radius: 3px;
     -khtml-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-transition: opacity 100ms linear;
       -moz-transition: opacity 100ms linear;
         -o-transition: opacity 100ms linear;
            transition: opacity 100ms linear;
}
.chat-message-attach-item .thumb_video_duration{
    right:5px; bottom:5px;
}
.chat-message-attach-item:hover .thumb_video_duration{
    opacity: 0; -moz-opacity:0; filter:alpha(opacity=0);
}
.chat-message-attach-item .chat-message-attach-item-view{
    left:5px; bottom:5px;
}
.chat-message-attach-item .thumb_video_title{
    position:absolute;
    display:block;
    padding:0;
    margin:0 0 -40px 0;
    width:100%;
    left:0; right:0; bottom:0;
    line-height:18px;
    font-size:14px;
    background: url('../images/bg/ttb_bg.png');
    background: rgba(0,0,0,0.7);
    color:#fff;
    opacity: 0; -moz-opacity:0; filter:alpha(opacity=0);
    -webkit-transition: all 200ms linear;
       -moz-transition: all 200ms linear;
         -o-transition: all 200ms linear;
            transition: all 200ms linear;
}
.chat-message-attach-item:hover .thumb_video_title{
    margin:0;
    opacity: 1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
.chat-message-attach-item .thumb_video_title div{
    padding:5px 10px;
}
.chat-message-attach-item .thumb_video_play{
    position:absolute;
    display:block;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    left:0; right:0; top:0; bottom:0;
    /*z-index:3;*/
    cursor:pointer;
    opacity: 0; -moz-opacity:0; filter:alpha(opacity=0);
    -webkit-transition: opacity 100ms linear;
       -moz-transition: opacity 100ms linear;
         -o-transition: opacity 100ms linear;
            transition: opacity 100ms linear;
}
.chat-message-attach-item:hover .thumb_video_play{
    opacity: 1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
    opacity: 0.8; -moz-opacity:0.8; filter:alpha(opacity=80)
}
.chat-message-attach-item .thumb_video_play:before{
    content: "";
    position:absolute;
    display:block;
    padding:0;
    margin:-28px 0 0 -28px;
    width:56px;
    height:56px;

    left:50%; top:50%;
    background: rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.15);
    -webkit-border-radius: 50%;
     -khtml-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}
.chat-message-attach-item .thumb_video_play:after{
    font-family: 'FontAwesome';
    content: "\f04b";
    content: "\f144";
    position:absolute;
    display:block;
    padding:0;
    margin:-20px 0 0 -20px;
    width:40px;
    height:40px;
    line-height:40px;
    font-size:40px;
    left:50%; top:50%;
    color:#fff;
    text-align:center;
}