@import url('/style/reset.css');
@import url('/js/cmoneybar/style/cmoneybar.css');
@import url('/style/cmoneystrap.css');
@import url('/thirdparty/font-awesome/4.3.0/css/font-awesome.min.css');

/*CMoney Bar-------------------------------------------------------*/
.cmBar{ z-index: auto;}
.barOut .member{ z-index: 7;}
.bar-hot a{ color: #74c374;}
.barNow.bar-hot a{ color: #fff;}

body{ background: #E6E6E6; height: 100%;}
.wrap{ z-index: 6; background: #F8F9FA;}
.cmBar:after{ content: ''; position: absolute; left: 0; top:26px; width: 100%; height: 50px; background: #5cb85c;}
.chat-hdr{ background: #5cb85c;}
.chat-tit, .group-tit{ line-height: 50px; font-size: 25px; color: #fff;}
.chat-tit{ display: inline-block; vertical-align: top;}
.group-hdr{ background: #74c374; text-align: center;}
.mask{ overflow-y: auto; overflow-x: hidden;/* border-left: solid 1px #f2f2f2; margin-left: -1px;*/}
.overlay{ display: none; content:''; z-index: 1; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.5);}
.navi{ background: #fff;}

.col-md-4, .col-md-8{ padding: 0;}
.group-out{}
.group-hdr .fa-chevron-left, .group-setting .fa-cog, .group-setting .fa-info{ color: #fff; cursor: pointer;}
.group-hdr .fa-chevron-left{ position: absolute; top: 14px; left:20px; font-size: 25px;}
.group-hdr .fa-bars{ display: none; position: absolute; left: 10px; top: 13px; font-size: 25px; color: #fff;}
.chat-hdr .back, .group-hdr .back{ display: none; position: absolute; top: 12px; right: 10px; color: #fff; border-radius: 3px; line-height: 2; padding: 0 10px; font-size: 13px; background: #88df88;}
.chat-hdr img{ width: 45px; top: 5px; margin-right: 5px;}
.group-tit, .group-setting{ display: inline-block;}
.group-setting, .group-setting .fa-info{ margin-left: 10px;}
.group-setting .fa-cog, .group-setting .fa-info{ font-size: 20px;}
.group-setting .fa-cog:hover, .group-hdr .fa-chevron-left:hover, .group-setting .fa-info:hover{ color: #eee;}
.group-list{}
.group-list li{ overflow: hidden; padding: 10px 15px; cursor: pointer;}
.group-list img{ border-radius: 50%; width: 50px; height: 50px; float: left; margin-right: 15px;}
.group-list h3, .group-list .chat-excerpt{ margin-right: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.group-list h3{ line-height: 1.9; font-size: 16px; color: #333;}
.group-list .chat-excerpt{ font-size: 13px; color: #999;}
.group-list li:hover{ background: #f9f9f9;}
.group-tips{ background: #f2f2f2; font-size: 13px; color: #6F787D; padding: 7px 15px;}
.group-current, li.group-current:hover{ background: #d3efd5;}
/*.group-current h3, .group-current .chat-excerpt{ color: #fff;}*/
.chat-star, .chat-num{ position: absolute; right: 15px; top: 50%;}
.chat-star{ margin-top: -7px;}
.chat-msg{}
.chat-num{ margin-top: -9px; background: #fa0; color: #fff; border-radius: 3px; font-size: 11px; padding: 3px 5px;}
.chat-star .fa{ margin-left: 5px; color: #fa0;}
.dropdown-setting{ display: none; z-index: 1; position: absolute; top: 25px; width: 100px; background: #fff; border-radius: 3px; box-shadow: 0 0 5px rgba(0,0,0,.2); text-align: left;}
.dropdown-setting li{ padding: 10px 15px;}
.dropdown-setting a{ color: #000;}
.dropdown-setting a:hover{ color: #5cb85c;}

/*.chat-tab-list{ padding: 15px 15px 0; border-bottom: 1px solid #e9e9ea;}
.chat-tab-list a{ display: inline-block; color: #333; padding: 0 10px 15px; border-bottom: 1px solid #e9e9ea; margin-bottom: -1px; font-size: 16px; font-weight: 600;}
.chat-tab-list a:hover{}
.chat-tab-list a:hover, .chat-tab-list .tab-current{ color: #5cb85c;}
.chat-tab-list .tab-current{ border-bottom: solid 1px #5cb85c;}
.chat-tab-list .tab-current:before, .chat-tab-list .tab-current:after{ content: ''; position: absolute; left: 50%; margin-left: -5px; border: solid 4px transparent;}
.chat-tab-list .tab-current:before{ bottom: 0; border-bottom: solid 6px #5cb85c;}
.chat-tab-list .tab-current:after{ bottom: -2px; border-bottom: solid 6px #fff;}
.chat-tab-panel-content-out{ overflow: auto;}
.chat-tab-panel-content{ display: none;}
.chat-tab-panel-content:first-child{ display: block;}*/

.tab-mask{ width: 88%; padding: 15px 15px 0; overflow: auto}
.chat-tab-list{}
.chat-tab-list a{ float: left; font-size: 16px; font-weight: 600; color: #999; border: solid 1px #ddd; background: #f9f9f9; padding: 0 1em; line-height: 2; margin-right: 5px;}
.chat-tab-list a:hover{}
.chat-tab-list a:hover, .chat-tab-list .tab-current{ z-index: 1; margin-top: -1px; border-top: solid 2px #5cb85c; color: #5cb85c; background: #fff; border-bottom-color: #fff; box-shadow: 0 -2px 3px 0 rgba(0,0,0,.15);}
.chat-tab-panel-content-out{ overflow: auto; top: -1px; border-top: solid 1px #ddd;}
.chat-tab-panel-content{ display: none;}
.chat-tab-panel-content:first-child{ display: block;}

.chat-tab-panel{ /*border-right:solid 1px #f2f2f2;*/}
.chat-wrap{ padding: 10px 20px; background: #F8F9FA;}
.msg-content.chat-admin{ background: #FFFCF0; box-shadow: 0 2px 2px #e0ddd3;}
.msg-content.chat-private, .chat-self .msg-content.chat-private{ background: #e6e6e6; box-shadow: 0 2px 2px #ccc;}
.chat-private-tips{ font-size: 13px; color: #666;}
.chat-msg > img{ width: 50px; height: 50px; border-radius: 50%; float: left;}
.msg-thumbs a{ display: inline-block; background: #ccc; width: 25px; line-height: 25px; text-align: center; border-radius: 50%; margin-right: 5px;}
.msg-thumbs a:hover{ background: #ddd;}
.msg-thumbs.thumbs-up a{ background: #5890FF;}
.msg-thumbs.thumbs-up a:hover{ background: #6b9cfd;}
.msg-thumbs .fa{ color: #fff;}
.msg-other{ color: #b3577a; font-weight: 600; margin-bottom: 10px;}
.msg-content-out{ margin-left: 60px;}
.msg-content{ font-size: 14px; background: #fff; border-radius: 3px; padding: 10px; box-shadow: 0 2px 2px #ddd; display: inline-block; max-width: 80%;}
.gc .msg-body{ word-break: break-word;}
.ff .msg-body, .sa .msg-body, .ie .msg-body{ word-break: break-all; -ms-hyphens: auto;}
.msg-body a{ color: #f60; text-decoration: underline;}
.msg-body a:hover{ text-decoration: none;}
.chat-name-text{ color: #5890FF;}
.msg-body .btn-success{ color: #fff; text-decoration: none;}
.msg-body .fa-thumbs-up{ font-size: 90px; color: #fc0;}

.thumbs-up a{
	animation: thumbs 1s ease-in-out;
	-webkit-animation: thumbs 1s ease-in-out;
}

@keyframes thumbs{
    0%   { transform: scale(1);}
    50%  { transform: scale(2);}
    100% { transform: scale(1);}
}

@-webkit-keyframes thumbs{
    0%   { -webkit-transform: scale(1);}
    50%  { -webkit-transform: scale(2);}
    100% { -webkit-transform: scale(1);}
}
.msg-time{ position: absolute; right: -60px; bottom: -10px; color: #999;}
.msg-block{ margin-bottom: 15px;}
.msg-ftr{ margin-top: 10px;}
.msg-body img{ max-width: 100%; margin-top: 5px;}
.chat-self .msg-content-out{ margin-left: 0;}
.chat-self .msg-content{ float: right; clear: both; background: #EFFDDE; box-shadow: 0 2px 2px #b5da88;}
.chat-self .msg-time, .chat-self .chat-private .msg-time{ left: -60px; right: auto;}

.msg-comment{}
.msg-comment > div{ padding: 20px; background: #F8F9FA;}
.msg-comment:before{ z-index: 0; content: ''; position: absolute; left: 50%; margin-left: -35%; width: 70%; height: 15px; box-shadow: 0 0 10px rgba(0,0,0,.5); border-radius: 50%; background: #fff;}
.msg-comment > div > img{ border-radius: 50%; width: 50px; height: 50px; float: left;}
.msg-fn-out{ margin-left: 60px;}
.msg-comment .text-area{ padding-top: 5px; border: solid 2px transparent; border-bottom-color: #5cb85c; width: 100%; font-size: 16px; vertical-align: top; line-height: 1.5; background: #F8F9FA;}
.msg-comment .fa{ font-size: 20px; color: #999; cursor: pointer; margin-right: 5px;}
.msg-comment .fa:hover{ color: #aaa;}
.msg-comment .fa-thumbs-up{}
.msg-comment .fa-smile-o{}
.msg-comment .fa-picture-o{}
.msg-comment-fn .btn-warning{ display: none;}
.unread-msg{ background: #fff; border: solid 1px #eee; margin-bottom: 15px; font-size: 13px; padding: 7px 0; color: #999; border-radius: 3px;}

.chat-smile-out{ display: inline-block;}
.chat-smile-out:hover .chat-smile{ display: block;}
.chat-smile:before, .chat-smile:after{ z-index: 1; content: ''; position: absolute; left: 50%; margin-left: -10px; border: solid 10px transparent;}
.chat-smile:before{ border-top-color: #ddd; bottom: -20px;}
.chat-smile:after{ border-top-color: #fff; bottom: -18px;}
.chat-smile{ display: none; position: absolute; background: #fff; bottom: 35px; left: 50%; margin-left: -163px; width: 317px; padding: 5px; border-radius: 3px; box-shadow: 0 0 5px rgba(0,0,0,.2);}
.chat-smile img{ float: left; padding: 5px; cursor: pointer;}
.chat-smile img:hover{ background: #eee;}
.chat-smile-tab{ border-bottom: solid 2px #eee; padding-bottom: 5px; margin-bottom: 5px;}
.chat-smile-tab img{ width: 30px; height: 30px;}
.chat-smile-content img{ width: 58px; height: 58px;}
.chat-smile-content{ display: none; height: 174px; overflow: auto;}
.chat-smile-content:first-child{ display: block;}

.chat-sign{ position: absolute; left: 0; top:0; right: 0; bottom: 0; margin: auto; height: 85px;}
.chat-sign h4{ font-size: 30px; font-weight: 100; margin-bottom: 15px;}
.btn-out a{}
.btn-out span{ display: inline-block; width: 150px; margin: 0 5px; vertical-align: top;}
.btn-out .btn-warning{ margin-bottom: 10px;}
.btn-out .btn-link{ color: #5cb85c; text-decoration: underline;}
.btn-out .btn-link:hover{ text-decoration: none;}
.chat-tab-panel .fa-plus{ z-index: 1; position: absolute; right: 10px; top: 10px; color: #ccc; font-size: 30px; cursor: pointer;}
.chat-tab-panel .fa-plus:hover{ color: #ddd;}

.photo-fn-area .msg-content{ box-shadow: none; background: none;}
.photo-fn-area .msg-thumbs{ display: none;}
.photo-fn-area .msg-body img{ width: 150px;}
.photo-fn-area .msg-time{ bottom: 10px;}
.photo-fn-area .fa-thumbs-up{ font-size: 90px; color: #fb0;}


/*?Šå¤©å®¤è?è¨?-----------------------------------------------------------------*/
.chat-title-wrapper, .chat-content-wrapper, .chat-btn-out{ margin: 0 30%;}
.chat-title-wrapper{ text-align: center;}
.chat-wrapper{ padding: 15px;}
.chat-title-wrapper > span{ color: #666; line-height: 2; font-size: 18px;}
.chat-title{ font-size: 30px; line-height: 1.5;}
.chat-title-wrapper > img{ width: 150px; height: 150px; border-radius: 50%; margin-bottom: 10px;}
.chat-title-wrapper > p{ line-height: 2; font-size: 16px; color: #999;}
.chat-title-wrapper > p span{ color: #000; font-weight: 600;}
.chat-content-wrapper > p{ line-height: 1.5; text-align: justify; margin-bottom: 10px;}
.chat-list{ list-style: square; font-size: 13px; color: #666; padding-left: 20px;}
.chat-list li{ line-height: 1.5; margin-bottom: 5px; text-align: justify;}
.chat-submit, .chat-cancel{ margin-bottom: 15px; display: block; width: 100%; border: 0; color: #fff; font-size: 20px; line-height: 2.5; border-radius: 3px;}
.chat-submit{ background: #F7931E;}
.chat-cancel{ background: #ccc;}

.chat-submit:hover{ background: #F9A653;}
.chat-cancel:hover{ background: #ddd;}

.loading{ position: absolute; top:0; right:0; bottom: 0; left: 0; width: 100px; height: 85px; margin: auto; z-index: 6; background: rgba(255,255,255,.8); text-align: center; padding: 15px 0; border-radius: 10px; border: solid 1px #ccc; font-size: 14px; line-height: 1.5;}

.chat-alert-warning{ z-index: 6; position: absolute; top: 0; right: 0; bottom: 0; left:0; margin: auto; width: 250px; height: 100px; text-align: center; box-shadow: 0 0 10px rgba(0,0,0,.5);}
.chat-alert-warning p{ margin-bottom: 10px;}
.chat-alert-warning .btn-out a{ width: auto;}

.live-screen{ width: 100%; height: 430px;}
.live-title, .live-num{ padding: 1rem 0;}
.live-title{ width: 90%; font-size: 1.8rem; line-height: 1.3; color: #5cb85c;}
.live-num{ width: 10%; text-align: center; color: #666; font-style: italic; font-size: 1rem; padding-top: 1.5rem;}
.live-num .fa{ margin-right: 5px;}
.chat-info{ border-left: solid 2px #5cb85c; padding-left: 1rem; margin: 1rem 0; font-size: .9rem; color: #666;}
.live-content{ margin-bottom: 1rem;}

.live-single .mask, .live-chat .mask .chat-wrap{ background: #F8F9FA;}
.live-single .wrap, .live-single .chat-wrap{ background: #fff;}
.live-chat .chat-tit{ text-align: center; display: block;}
.chat-link{ color: #1c84c6; text-decoration: underline;}
.chat-link:hover{ text-decoration: none;}
.no-live{ text-align: center; padding: 3rem 0; font-size: 1.5rem; color: #666;}

@media screen and (max-width: 1024px){
	.msg-comment .text-area{ width: 550px;}
	.chat-smile{ left: auto; margin-left: -85px;}
	.chat-smile:before, .chat-smile:after{ left: 93px; right: auto;}
	.tab-mask{ padding: 10px 10px 0; overflow-y: hidden; overflow-x: auto;}
	.chat-tab-panel .fa-plus{ top: 13px; font-size: 25px;}
	.group-list li{ padding: 10px;}
	.group-tips{ padding: 7px 10px;}
	.chat-star, .chat-num{ right: 10px;}
	.group-list img{ margin-right: 10px;}
	.chat-tit{ padding-left: 10px;}
	.chat-wrap, .msg-comment > div{ padding: 10px;}
	.group-hdr .fa-chevron-left{ left: 10px;}
	.msg-comment:before{ width: 90%; margin-left: -45%;}
	.msg-comment-fn .btn-warning{ display: inline-block;}
	.chat-smile{ width: 300px;}
	.chat-hdr img{ left: 10px;}
	.cmBar{ display: none;}
	.live-single .msg-comment > div > img{ display: none;}
	.live-single .msg-fn-out{ margin: auto;}
	.live-single .msg-comment .text-area{ width: auto;}
}

@media screen and (max-width: 768px){
	.tab-mask{ width: 84%;}
	.msg-comment .text-area{ width: 379px;}
	.group-hdr .fa-chevron-left{ left: 10px;}
	.chat-sign h4{ font-size: 22px;}
	.chat-title-wrapper, .chat-content-wrapper, .chat-btn-out { margin: 0 20%;}
	.chat-hdr .back{ display: block;}
	.live-single .msg-comment .text-area{ width: 180px;}
}

@media screen and (max-width: 480px){
	.mobi .overlay{ display: block;}
	.navi{ z-index: 1; position: absolute; left: -75%; width: 75%; background: #fff;}
	.group-out{ width: 100%;}
	.group-hdr .fa-bars{ display: block;}
	.group-hdr .fa-chevron-left{ display: none;}
	.msg-comment .text-area{ width: 322px;}
	.group-hdr .back{ display: block;}
	.msg-comment > div > img{ display: none;}
	.msg-comment .fa{}
	.msg-fn-out{ margin: 0;}
	.msg-comment .text-area{ width: 407px;}
	.chat-title-wrapper, .chat-content-wrapper, .chat-btn-out{ margin: 0 10%;}
	.chat-smile{ margin-left: -28px;}
	.chat-smile:before, .chat-smile:after{ left: 36px;}
	.tab-mask{ width: 90%;}
	.live-chat{ width: 100%;}
	.live-chat .chat-hdr{ display: none;}
	.live-single .msg-comment .text-area{ width: 405px;}
}

@media screen and (max-width: 414px){
	.live-single .msg-comment .text-area, .msg-comment .text-area{ width: 340px;}
	.chat-sign h4{ font-size: 20px;}
	.tab-mask{ width: 87%;}
}

@media screen and (max-width: 375px){
	.live-single .msg-comment .text-area, .msg-comment .text-area { width: 300px;}
	.chat-title-wrapper, .chat-content-wrapper, .chat-btn-out{ margin: 0 5%;}
	.tab-mask{ width: 85%;}
}

@media screen and (max-width: 360px){
	.live-single .msg-comment .text-area, .msg-comment .text-area { width: 285px;}
	.tab-mask{ width: 85%;}
}

@media screen and (max-width: 320px){
	.live-single .msg-comment .text-area, .msg-comment .text-area { width: 245px;}
	.chat-sign h4{ font-size: 18px;}
	.btn-out span{ width: 130px;}
	.chat-tab-list a{ padding: 0 .5em;}
	.tab-mask{ width: 84%;}
}