


@charset "UTF-8";
.msg-header img{
 height: 18px;
}
    .mychat_start{
    border-radius: 3px !important;
    bottom: 168px !important;
    height: 50px !important;
    padding-top: 3px !important;
    line-height: 14px !important;
    }
     #chat_box{
        overflow: hidden;
        position: fixed;
    left: -100vw;
    top: 0px;
    z-index: 5000;
    }
    .mychat{
    	display: none;
    }
ol, ul {
    list-style: none;
}
a, b, blockquote, body, caption, dd, div, dl, dt, em, form, h1, h2, h3, h4, h5, h6, i, iframe, img, input, label, li, object, ol, p, span, strong, table, tbody, td, tfoot, th, thead, tr, u, ul {
    padding: 0;
    margin: 0;
}
a{
	display: inline-block;
	text-decoration: none;
}
body {
    font: 12px/1.5 '\5FAE\8F6F\96C5\9ED1','\5b8b\4f53',Arial,Helvetica,sans-serif;
}
.CIcon.ico-room {
	width: 20px;
	height: 24px;
	background-position: -90px 0
}

.CIcon.ico-face {
	width: 28px;
	height: 30px;
	background-position: -40px -80px
}

.Txt.type-warning {
	color: #f60
}

.lay-relative {
	width: 100%;
	height: 100%;
	position: relative
}

.lay-reditem {
	width: 100%;
	height: 100%;
	position: relative;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 300
}

.BGView {
	background: url(../../../resources/images/chat/bg.jpg) no-repeat right bottom;
	background-attachment: fixed;
	background-color: #fffef9
}

.Mask {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #000;
	opacity: .1
}

.Btn {
	display: inline-block;
	border-radius: 3px;
	padding: 2px 5px
}

.RBtn {
	display: inline-block;
	border-radius: 3px;
	padding: 2px 5px;
	background: #f5c91f;
	background: -moz-linear-gradient(top, #f5c91f 0, #f5a61b 100%);
	background: -webkit-linear-gradient(top, #f5c91f 0, #f5a61b 100%);
	background: linear-gradient(to bottom, #f5c91f 0, #f5a61b 100%);
	font-size: 12px;
	color: #553216;
	border-radius: 5px;
	padding: 3px 10px;
	text-decoration: none!important
}

.chat {
	box-sizing: border-box;
	background: #501f4a;
	background-attachment: fixed;
	height: 100%;
	border-left: 3px solid #f00;
	border-bottom: 3px solid #f00;
}

.chat .iconfont {
	font-size: 22px;
	line-height: 1;
	vertical-align: -3px
}

.skin_red .chat {
	border-left: 3px solid #b23b4f;
	border-bottom: 1px solid #b23b4f
}

.chat .chat-header {
	height: 38px;
	background: #f00;
}

.skin_red .chat .chat-header {
	background: #bb445a
}

.chat .chat-header .ttl {
	display: inline-block;
	color: #fff;
	font-size: 15px;
	line-height: 38px;
	padding: 0 14px
}

.chat .chat-header .ttl a {
	color: inherit
}

.chat .chat-header .nav {
	background: #1a51a5;
	margin-left: -3px
}

.chat .controls {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 98
}

.chat .notify {
	position: absolute;
	right: 0;
	top: 65px;
	padding: 5px 15px;
	background: #f44336;
	background: -webkit-linear-gradient(left, #f44336, #f97619);
	background: -moz-linear-gradient(left, #f44336, #f97619);
	background: -ms-linear-gradient(left, #f44336, #f97619);
	background: -o-linear-gradient(left, #f44336, #f97619);
	background: linear-gradient(to right, #f44336, #f97619);
	opacity: .75;
	text-align: right;
	z-index: 98
}

.chat .list {
	position: absolute;
	width: 100%;
	top: 38px;
	left: 0
}

.chat .list.type-noticing {
	padding-top: 38px
}

.chat .list .lay-scroll {
	box-sizing: border-box;
	padding-bottom: 15px;
	padding-top: 15px;
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch
}

.chat .list .lay-scroll .Item {
	margin-top: 15px;
	padding: 5px 10px
}

.chat .list .lay-scroll .Item.type-red {
	margin: 0;
	padding: 0
}

.chat .list .lay-scroll::-webkit-scrollbar {
	width: 5px
}

.chat .list .lay-scroll::-webkit-scrollbar-thumb:vertical {
	margin: 5px;
	background-color: #999;
	border-radius: 5px;
	-webkit-border-radius: 5px
}

.chat .list .lay-scroll::-webkit-scrollbar-button:end:increment,
.chat .list .lay-scroll::-webkit-scrollbar-button:start:decrement {
	height: 5px;
	display: block
}

.chat .list .ListCtrl {
	display: inline-block;
	background: #fff;
	border: 1px solid #e2e2e2;
	padding: 1px 9px;
	padding-left: 7px;
	border-radius: 15px;
	color: #a5a5a5;

}
   
#chattext{
	position: absolute;
	width: 30px;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
        padding: 5px;
    left: -30px;
    color: white;
    top: 50%;
    margin-top: -25px;
    background-color: red;
    border-radius: 5px;
    cursor: pointer;
        border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    display: inline-block;
}
.chat .list .ListCtrl:hover {
	color: #757575
}

.chat .list .ListCtrl.active {
	color: #ff9d6d
}

.chat .list .ListCtrl .iconfont {
	font-size: 14px
}

.chat .list .controls {
	position: absolute;
	top: 3px;
	left: 0;
	width: 100%;
	text-align: center
}

.chat .list .controls .ListCtrl {
	margin: 0 5px
}

.chat .list .chat-announce {
	position: absolute;
	top: 3px;
	left: 5px;
	right: 5px;
	background: rgba(237, 244, 254, .91);
	border: 1px solid #c2cfe2;
	border-radius: 5px;
	padding-right: 10px;
	height: 29px;
	overflow: hidden
}

.chat .list .chat-announce .ttl {
	display: block;
	float: left;
	width: 63px;
	text-align: center;
	background: #e1edfd;
	color: red;
	    padding: 5px 5px;
}

.chat .list .chat-announce .ttl .iconfont {
	font-size: 16px;
	vertical-align: -1px
}

.chat .list .chat-announce .scroll {
	display: block;
	margin-left: 72px;
	padding-top: 5px
}

.chat .list .chat-announce .scroll li {
	display: inline;
	margin-right: 10px
}

.chat .Item .avatar {
	width: 42px;
	height: 42px;
	margin-top: 6px
}

.chat .Item .avatar img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 7px
}

.chat .Item .msg-header {
	overflow: hidden
}

.chat .Item .msg-header span {
	display: inline-block;
	margin: 0 2px
}

.chat .Item .msg-header img {
	vertical-align: middle
}

.chat .Item .lay-content {
	width: 77%
}

.chat .Item .lay-content .Bubble {
	margin-top: 3px
}

.chat .Item .lay-block {
	overflow: hidden
}

.chat .Item.type-left .avatar {
	float: left
}

.chat .Item.type-left .lay-content {
	margin-left: 57px
}

.chat .Item.type-right .avatar {
	float: right
}

.chat .Item.type-right .txt-name,
.chat .Item.type-right h4 {
	text-align: right;
	float: right;
	    font-size: 14px;
}

.chat .Item.type-right .lay-content {
	float: right;
	margin-right: 15px
}

.chat .Item.type-right .Bubble {
	float: right
}

.chat .Item.type-right .msg-header span {
	float: right
}

.chat .Item .lay-mid {
	position: absolute;
	width: 100%;
	left: 0;
	top: -10px;
	text-align: center
}

.chat .Item .txt-name,
.chat .Item h4 {
	font-size: 12px;
	color: #fff;
	margin-left: 3px;
	display: inline-block;
	font-weight: 400
}

.skin_red .chat .Item .txt-name,
.skin_red .chat .Item h4 {
	color: #762d08
}

.chat .Item .iconfont {
	font-size: 16px;
	vertical-align: -1px
}

.chat .Item .lay-red {
	position: absolute;
	width: 100%;
	top: 25%;
	left: 0
}

.chat .Item .lay-red .RedPack {
	margin: 0 auto;
	width: 255px;
	transform: scale(1.5)
}

.chat .Item .lay-red .RedPack .lay-pack {
	padding-right: 25px
}

.chat .Item .lay-red .RedPack .pack {
	transform: scale(.5) translateY(-30px)
}

.chat .Item .lay-red .lay-redinfo {
	margin: 0 20px
}

.chat .compose {
	background: #fffef9;
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0
}

.chat .compose .control-bar {
	height: 32px;
    background: #ffffff;
    border: 1px solid #d4d3d3;
    border-left: 0;
    border-right: 0;
    position: relative;
    z-index: 98;
}

.chat .compose .control-bar .lay-switches {
	float: right;
	margin-right: 5px
}

.chat .compose .control-bar .switch {
	display: inline-block;
	line-height: 32px;
	margin: 0 4px
}

.chat .compose .btn-control {
	height: 100%;
	display: inline-block;
	line-height: 26px;
	padding: 0 12px;
	color: #717171;
	margin-right: 1px;
	cursor: pointer
}

.chat .compose .btn-control .iconfont {
	vertical-align: middle
}

.chat .compose .btn-control:hover {
	background: #ffd9c7
}

.chat .compose .typing {
	position: relative;
	padding: 5px
}

.chat .compose .typing .txtinput {
	display: block;
	width: auto;
	margin-right: 58px
}

.chat .compose .typing .sendbtn {
	position: absolute;
	right: 5px;
	bottom: 5px
}

.chat .compose .typing .sendbtn .enter-select {
	margin-bottom: 3px;
	float: right
}

.chat .compose .typing .sendbtn .enter-select select {
	display: block
}
#textarea_content{
	height: 35px !important;
}
.chat .compose .typing .sendbtn .u-btn1 {
	width: 51px;
	height: 35px;
	font-size: 14px;
	line-height: 35px;
	text-align: center;
}

.chat .chat-user-info {
	width: 350px
}
 .u-btn1 {
    background: #67C23A;
    color: #fff;
}
    
.chat .chat-send-image {
	width: 500px;
	overflow: hidden
}

.chat .chat-send-image .tc {
	text-align: center
}

.chat .chat-send-image img {
	max-width: 300px;
	max-height: 300px
}

.chat .profile {
	width: 100%;
	height: 100%;
	position: relative;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
	font-size: 14px;
	color: #4f77ab
}

.skin_red .chat .profile {
	color: #762d08
}

.chat .profile .Mask {
	opacity: .1
}

.chat .profile .inner {
	max-width: 310px;
	border-radius: 5px;
	background: rgba(255, 255, 255, .93);
	margin: 50px auto 0;
	position: relative;
	min-height: 200px;
	border: 1px solid #c8d4e4;
	text-align: center;
	padding: 20px 0;
	width: 90%
}

.skin_red .chat .profile .inner {
	border: 1px solid #c7afb3
}

.chat .profile .avatar {
	display: inline-block;
	border-radius: 50%;
	width: 90px;
	height: 90px;
	border: 1px solid #c8d4e4;
	overflow: hidden;
	cursor: pointer
}

.chat .profile .avatar:hover img {
	opacity: .3
}

.chat .profile .avatar:hover label {
	display: block
}

.chat .profile .avatar img {
	display: block;
	width: 100%;
	height: 100%
}

.chat .profile .avatar label {
	display: none;
	position: absolute;
	top: 22px;
	left: 0;
	width: 100%;
	text-align: center;
	color: #fff;
	font-size: 50px;
	color: #909090;
	cursor: pointer
}

.skin_red .chat .profile .avatar {
	border: 1px solid #c7afb3
}

.chat .profile .txt-nick {
	font-size: 20px
}

.chat .profile p {
	margin-top: 5px
}

.choose-room {
	background: url(../image/bg.jpg) no-repeat right bottom;
	background-attachment: fixed;
	background-color: #fffef9;
	width: 100%;
	height: 100%;
	position: relative
}

.choose-room .lay-content {
	width: 400px;
	margin: 0 auto;
	padding-top: 100px
}

.choose-room li {
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	white-space: nowrap;
	padding: 6px 10px;
	border: 2px solid #abd5f9;
	background: #d4e8ff;
	color: #083369;
	font-size: 18px;
	text-align: center;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 20px;
	cursor: pointer
}

.choose-room li:hover {
	border: 2px solid #60aae8;
	background: #c2deff
}

.choose-room li a {
	color: inherit
}

.Bubble {
	position: relative;
	color: #fff;
	background: #199ed8;
	border-left-color: #199ed8;
	border-right-color: #199ed8;
	border-radius: 5px;
	padding: 6px 9px;
	font-size: 13px;
	line-height: 1.2;
	display: inline-block;
	text-shadow: 0 0 1px #35406d
}

.Bubble a {
	color: inherit;
	text-decoration: underline
}

.Bubble:after {
	content: '';
	position: absolute;
	top: 14px;
	width: 0;
	height: 0;
	border: 9px solid transparent;
	border-top: 0;
	margin-top: -7px
}

.type-left .Bubble:after {
	left: 0;
	border-left: 0;
	margin-left: -9px;
	border-right-color: inherit
}

.type-right .Bubble:after {
	right: 0;
	border-right: 0;
	margin-right: -9px;
	border-left-color: inherit
}

.Bubble.type-system {
	background: #ab47bc;
	background: -webkit-linear-gradient(left, #ab47bc, #5169DE);
	background: -moz-linear-gradient(left, #ab47bc, #5169DE);
	background: -ms-linear-gradient(left, #ab47bc, #5169DE);
	background: -o-linear-gradient(left, #ab47bc, #5169DE);
	background: linear-gradient(to right, #ab47bc, #5169DE);
	border-left-color: #5169de;
	border-right-color: #ab47bc
}

.Bubble.type-touzhu {
	background: #009688;
	background: -webkit-linear-gradient(left, #009688, #396);
	background: -moz-linear-gradient(left, #009688, #396);
	background: -ms-linear-gradient(left, #009688, #396);
	background: -o-linear-gradient(left, #009688, #396);
	background: linear-gradient(to right, #009688, #396);
	border-left-color: #396;
	border-right-color: #009688
}

.Bubble .msg-control {
	display: none;
	position: absolute;
	right: 3px;
	bottom: 3px;
	text-shadow: none
}

.Bubble .msg-control a {
	color: #ff5252;
	text-decoration: none;
	font-weight: 700;
	background: rgba(255, 255, 255, .73);
	display: inline-block;
	padding: 0 3px;
	white-space: nowrap
}

.Bubble:hover .msg-control {
	display: block
}

.Bubble img {
	width: 100%;
	min-height: 50px
}

.Toast {
	position: absolute;
	width: 100%;
	top: 40%;
	left: 0;
	text-align: center
}

.Toast .inner {
	display: inline-block;
	background: rgba(77, 77, 77, .6);
	padding: 15px 28px;
	color: #fff;
	border-radius: 10px;
	font-size: 16px
}

.Welcome {
	font-size: 12px;
	color: #fff;
	text-shadow: 0 0 2px #000
}

.SysMsg {
	text-align: center
}

.SysMsg .inner {
	display: inline-block;
	background: #efefef;
	border-radius: 8px;
	border: 1px solid #dddddc;
	padding: 5px 10px
}

.chat .list .SysMsg+.SysMsg {
	margin-top: 0
}

.MsgTime {
	display: inline-block;
	background: rgba(70, 70, 70, .12);
	color: #fff;
	padding: 0 6px;
	border-radius: 10px;
	font-weight: 400;
	font-size: 10px
}

.VipMark {
	background: #c32af0;
	color: #fff7cc;
	padding: 0 4px;
	border-radius: 3px
}

.VipMark.type-admin i {
	display: inline-block;
	background: url(../../../resources/images/chat/icon_member05.gif) no-repeat;
	width: 18px;
	height: 14px;
	vertical-align: -3px;
	margin-right: 2px
}

.emoji-container {
	padding-top: 5px;
	padding-left: 5px;
	width: 180px
}

.emoji-container .Emoji {
	margin-bottom: 5px;
	margin-right: 5px;
	position: relative
}

.emoji-container .Emoji:hover:after {
	content: '';
	position: absolute;
	left: -5px;
	top: -5px;
	width: 100%;
	height: 100%;
	padding: 2px;
	border: 2px solid #f60
}

.Emoji {
	display: inline-block;
	width: 25px;
	height: 25px;
	cursor: pointer;
	background: url(../../../resources/images/chat/emoji@2x.png) no-repeat;
	background-size: 25px auto
}

.Emoji.emoji-smile {
	background-position: 0 0
}

.Emoji.emoji-laughing {
	background-position: 0 -25px
}

.Emoji.emoji-blush {
	background-position: 0 -50px
}

.Emoji.emoji-heart_eyes {
	background-position: 0 -75px
}

.Emoji.emoji-smirk {
	background-position: 0 -100px
}

.Emoji.emoji-flushed {
	background-position: 0 -125px
}

.Emoji.emoji-grin {
	background-position: 0 -150px
}

.Emoji.emoji-kissing_smiling_eyes {
	background-position: 0 -175px
}

.Emoji.emoji-wink {
	background-position: 0 -200px
}

.Emoji.emoji-kissing_closed_eyes {
	background-position: 0 -225px
}

.Emoji.emoji-stuck_out_tongue_winking_eye {
	background-position: 0 -250px
}

.Emoji.emoji-sleeping {
	background-position: 0 -275px
}

.Emoji.emoji-worried {
	background-position: 0 -300px
}

.Emoji.emoji-sweat_smile {
	background-position: 0 -325px
}

.Emoji.emoji-cold_sweat {
	background-position: 0 -350px
}

.Emoji.emoji-joy {
	background-position: 0 -375px
}

.Emoji.emoji-sob {
	background-position: 0 -400px
}

.Emoji.emoji-angry {
	background-position: 0 -425px
}

.Emoji.emoji-mask {
	background-position: 0 -450px
}

.Emoji.emoji-scream {
	background-position: 0 -475px
}

.Emoji.emoji-sunglasses {
	background-position: 0 -500px
}

.Emoji.emoji-thumbsup {
	background-position: 0 -525px
}

.Emoji.emoji-clap {
	background-position: 0 -550px
}

.Emoji.emoji-ok_hand {
	background-position: 0 -575px
}

.RedPack {
	position: relative;
	box-sizing: border-box
}

.RedPack .RedSprite {
	background: url(../image/red.png) no-repeat;
	background-size: 265px auto
}

.RedPack .sparkbg {
	width: 280px;
	height: 176px;
	overflow: hidden;
	text-align: center
}

.RedPack .sparkbg .bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../../../resources/images/chat/red.png) no-repeat;
	background-size: 265px auto
}

.RedPack .sparkbg .inner {
	position: relative
}

.RedPack .packedbg {
	background: url(../../../resources/images/chat/red.png) no-repeat;
	background-size: 265px auto;
	width: 140px;
	height: 114px;
	background-position: 0 -180px;
	margin: 60px auto 0;
	padding-right: 23px;
	box-sizing: border-box;
	padding-top: 68px
}

.RedPack .openedbg {
	background: url(../../../resources/images/chat/red.png) no-repeat;
	background-size: 265px auto;
	width: 135px;
	height: 155px;
	background-position: -145px -180px;
	margin: 16px auto 0;
	padding-right: 23px;
	box-sizing: border-box;
	padding-top: 68px
}

.RedPack.desc p {
	margin: 1px 0 5px
}

.RedPack .pack {
	height: 250px;
	background: #cc453b;
	width: 230px;
	border-radius: 10px;
	margin: 0 auto
}

.RedPack .pack .cover {
	height: 140px;
	border: 1px solid #bd503a;
	background-color: #de5c42;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 50% 15%;
	border-bottom-left-radius: 50% 15%;
	box-shadow: 0 4px 0 -1px rgba(0, 0, 0, .2);
	color: #fff
}

.RedPack .pack .cover .sender {
	margin: 15px 0 4px;
	font-size: 20px;
	color: #ffe547
}

.RedPack .pack .cover .desc {
	font-size: 18px
}

.RedPack .pack .sticker {
	width: 100px;
	height: 100px;
	border: 1px solid #ffa73a;
	background-color: #ffa73a;
	border-radius: 50%;
	color: #fff;
	font-size: 26px;
	display: inline-block;
	position: relative;
	top: -50px;
	box-shadow: 0 4px 0 0 rgba(0, 0, 0, .2);
	cursor: pointer
}

.RedPack .pack .sticker span {
	display: inline-block;
	padding-top: 32px
}

.RedPack .txt-t1 {
	font-size: 18px;
	color: #fff
}

.RedPack .txt-t2 {
	font-size: 24px;
	color: #f1d23a;
	margin-top: -8px
}

.RedPack .txt-t3 {
	font-size: 10px;
	color: #ebab1e;
	transform: scale(.8)
}

.RedPack .txt-t5 {
	font-size: 14px
}

.RedPack .txt-pz {
	display: inline-block;
	background: #d23836;
	padding: 1px 4px;
	margin: 0 2px
}

.transparent {
	opacity: 0
}

.RedPackInfo {
	margin: 0 auto;
	background: #d12b1e;
	border-radius: 10px;
	padding: 20px 10px;
	max-width: 400px
}

.RedPackInfo .req-txt {
	font-size: 20px;
	color: #f1d23a;
	text-align: center
}

.RedPackInfo .req {
	border-radius: inherit;
	background: #fff2ce;
	padding: 10px;
	margin-top: 10px;
	font-size: 14px;
	color: #000
}

.RedPackInfo .action {
	text-align: center;
	margin-top: 10px
}

.RedPackInfo .action .RBtn {
	font-size: 16px;
	padding-left: 25px;
	padding-right: 25px
}

.RedPackRecipt {
	color: #353535;
	font-size: 13px
}

.RedPackRecipt .t-red {
	color: #f50000
}

.chat .Item .RedPackRecipt .iconfont {
	font-size: 26px;
	vertical-align: -4px;
	color: #f50000;
	padding-right: 5px
}

.rotate {
	-webkit-animation: anim .6s infinite alternate;
	-ms-animation: anim .6s infinite alternate;
	animation: anim .6s infinite alternate
}

@-webkit-keyframes anim {
	from {
		-webkit-transform: rotateY(180deg)
	}
	to {
		-webkit-transform: rotateY(360deg)
	}
}

@-ms-keyframes anim {
	from {
		-ms-transform: rotateY(180deg)
	}
	to {
		-ms-transform: rotateY(360deg)
	}
}

@keyframes anim {
	from {
		transform: rotateY(180deg)
	}
	to {
		transform: rotateY(360deg)
	}
}

.userpack {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 199
}

.userpack .userpack-wrapper {
	width: 265px;
	height: auto;
	padding-top: 73px;
	position: relative;
	margin: 0 auto;
	top: 120px;
	animation-duration: .3s
}

.userpack .userpack-main {
	height: 230px;
	background: #fe0017;
	position: relative;
	border-radius: 44px;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, .2)
}

.userpack .userpack-open {
	width: 100%;
	position: absolute;
	z-index: 3;
	top: 27px
}

.userpack .userpack-open .decorate {
	height: 28px;
	background: url(../../../resources/images/chat/open.png) bottom no-repeat;
	margin: 0 1px
}

.userpack .userpack-list {
	position: absolute;
	z-index: 2;
	bottom: 182px;
	width: 100%
}

.userpack .userpack-list .inputs {
	background: #fcf7d6;
	margin: 0 20px;
	height: 115px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, .4)
}

.userpack .userpack-list .border {
	background: url(../../../resources/images/chat/border.png) center repeat-x;
	height: 12px;
	position: absolute;
	width: calc(100% - 40px);
	top: -11px;
	left: 20px
}

.userpack .userpack-label-title {
	color: #dbb079
}

.userpack .userpack-txt-box {
	background: #fef6db;
	width: 118px;
	padding: 5px 6px;
	margin: 5px 0;
	border: 1px solid #dab781;
	color: #b75800
}

.userpack .userpack-list-content {
	padding: 10px
}

.userpack .userpack-content {
	position: relative;
	top: 74px
}

.userpack .userpack-content-warn {
	font-size: 14px;
	color: #fff;
	display: block;
	text-align: center;
	height: 18px
}

.userpack .userpack-cancel {
	text-align: center;
	margin-top: 15px
}

.userpack .userpack-content button {
	background: #ffe84d;
	width: 85%;
	margin: 0 auto;
	display: block;
	margin-top: 10px;
	border: none;
	box-shadow: 3px 2px 10px rgba(0, 0, 0, .2);
	border-radius: 6px;
	padding: 10px
}

.userpack .userpack-content button a {
	text-decoration: none;
	color: #d40013;
	font-size: 20px
}

.userpack .userpack-content button a:hover {
	color: #fe0017
}

.el-switch {
	display: inline-block;
	position: relative;
	font-size: 14px;
	line-height: 22px;
	height: 22px;
	vertical-align: middle
}

.el-switch__label,
.el-switch__label * {
	position: absolute;
	font-size: 14px;
	display: inline-block
}

.el-switch .label-fade-enter,
.el-switch .label-fade-leave-active {
	opacity: 0
}

.el-switch.is-disabled .el-switch__core {
	border-color: #e4e8f1!important;
	background: #e4e8f1!important
}

.el-switch.is-disabled .el-switch__core span {
	background-color: #fbfdff!important
}

.el-switch.is-disabled .el-switch__core~.el-switch__label * {
	color: #fbfdff!important
}

.el-switch.is-checked .el-switch__core {
	border-color: #20a0ff;
	background-color: #20a0ff
}

.el-switch.is-disabled .el-switch__core,
.el-switch.is-disabled .el-switch__label {
	cursor: not-allowed
}

.el-switch__core,
.el-switch__label {
	width: 46px;
	height: 22px;
	cursor: pointer
}

.el-switch__label {
	transition: .2s;
	left: 0;
	top: 0
}

.el-switch__label * {
	line-height: 1;
	top: 4px;
	color: #fff
}

.el-switch__label--left i {
	left: 6px
}

.el-switch__label--right i {
	right: 6px
}

.el-switch__input {
	display: none
}

.el-switch__core {
	margin: 0;
	display: inline-block;
	position: relative;
	border: 1px solid #bfcbd9;
	outline: 0;
	border-radius: 12px;
	box-sizing: border-box;
	background: #bfcbd9;
	transition: border-color .3s, background-color .3s
}

.el-switch__core .el-switch__button {
	top: 0;
	left: 0;
	position: absolute;
	border-radius: 100%;
	transition: transform .3s;
	width: 16px;
	height: 16px;
	background-color: #fff
}

.el-switch--wide .el-switch__label.el-switch__label--left span {
	left: 10px
}

.el-switch--wide .el-switch__label.el-switch__label--right span {
	right: 10px
}

.animated {
	animation-duration: 1s;
	animation-fill-mode: both
}

.animated.infinite {
	animation-iteration-count: infinite
}

.animated.hinge {
	animation-duration: 2s
}

.animated.bounceIn,
.animated.bounceOut,
.animated.flipOutX,
.animated.flipOutY {
	animation-duration: .75s
}

@keyframes bounceInDown {
	60%,
	75%,
	90%,
	from,
	to {
		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
	}
	0% {
		opacity: 0;
		transform: translate3d(0, -3000px, 0)
	}
	60% {
		opacity: 1;
		transform: translate3d(0, 25px, 0)
	}
	75% {
		transform: translate3d(0, -10px, 0)
	}
	90% {
		transform: translate3d(0, 5px, 0)
	}
	to {
		transform: none
	}
}

.bounceInDown {
	animation-name: bounceInDown
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translate3d(0, -100%, 0)
	}
	to {
		opacity: 1;
		transform: none
	}
}

.fadeInDown {
	animation-name: fadeInDown
}

@keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale3d(.3, .3, .3)
	}
	50% {
		opacity: 1
	}
}

.zoomIn {
	animation-name: zoomIn
}
.el-popover{
	transform-origin: center bottom 0px; z-index: 2001; position: absolute; top:-170px; left: 5px;
	display: none;
}
.inner{
	position: absolute;
	top: ;
}
.skin_blue .u-btn1 {
    background: #5b8ac7;
    background: -moz-linear-gradient(top,#5b8ac7 0,#2765b5 100%);
    background: -webkit-linear-gradient(top,#5b8ac7 0,#2765b5 100%);
    background: linear-gradient(to bottom,#5b8ac7 0,#2765b5 100%);
    border: 1px solid #1e57a0;
    color: #fff;
}

.u-btn1 {
    display: inline-block;
    width: 56px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    vertical-align: bottom;
    border-radius: 3px;
    font-size: 12px;
    margin-left: 3px;
}
.profile{
	display: none;
}

@media only screen and (max-width:480px ) {
	.chatbar .chatwin.type-normal,.chatbar{
		width: 100%;
		height: 100vh;
	}
}