.vlivechat-wrapper{position: fixed; z-index: 16000000;}
.vlivechat-bottom-right{bottom: 0; right: 0;}
.vlivechat-window{float: right; position: relative;  width: 290px; height: 30px; overflow: visible; padding: 0; margin: 0 10px; font-family: Verdana, Geneva, sans-serif;}
.vlivechat-container{position: absolute; width: 290px; height: 400px; bottom: 0; right: 0; background: #FFF; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px 2px; border-top-left-radius: 5px; border-top-right-radius: 5px;}

.vlivechat-header{display: block; border-bottom: 1px solid #efefef;position: absolute; top: 0; left: 0;width: 100%;}
.vlivechat-header > .vlivechat-bar{position: relative; text-align: center; background: #555555; color: #bababa; height: 30px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-size: 12px; font-family: Verdana, Geneva, sans-serif; font-weight: bold; line-height: 28px;}
.vlivechat-header .vlivechat-ctrls{position: absolute; right: 10px; top: 0; color: #FFF; font-size: 17px;}
.vlivechat-header .vlivechat-ctrls i{display: inline-block; width: 15px; height: 30px; cursor: pointer; line-height: 28px;}
.vlivechat-staff{position: relative;}
.vlivechat-staff > .vlivechat-staff-avatar{text-align: center;width: 50px; height: 50px; position: absolute; border: 1px solid #ddd; border-radius: 3px; left: 10px; top: -10px; background: #fff; box-shadow: 0px 1px 2px rgba(0,0,0,0.2);}
.vlivechat-staff > .vlivechat-staff-avatar img{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-width: 90%; max-height: 90%;}
.vlivechat-staff > .vlivechat-staff-avatar .vlivechat-ico-user{font-size: 45px; line-height:  50px; color: #888;}
.vlivechat-staff > .vlivechat-staff-info{padding-left: 75px; height: 42px; display: block; font-size: 12px; font-family: Verdana, Geneva, sans-serif; line-height: 1.2; padding: 8px 0 0 75px;}
.vlivechat-staff-info .vlivechat-staff-title{font-weight: bold; color: #555555;}
.vlivechat-staff-info .vlivechat-staff-message{color: #AAA;}
.vlivechat-content{display: block; width: 100%; height: 100%; padding: 80px 0 96px; box-sizing: border-box; font-family: Verdana, Geneva, sans-serif; font-size: 12px;}
.vlivechat-startchat-form .vlivechat-content{padding-top: 50px;}
.vlivechat-content .vlivechat-message-container{overflow-y: auto; max-height: 100%;}
.vlivechat-message-container .vlivechat-message{word-wrap: break-word; margin: 10px 50px 10px 10px; border-radius: 4px; background: #FBFBFB; border: 1px solid #c8c8c8; padding: 5px 10px; color: #333;}
.vlivechat-message-container .vlivechat-message-system{text-align: center; margin: 5px 0; color: #AAA; font-family: Verdana, Geneva, sans-serif; font-size: 11px;}
.vlivechat-message-container .vlivechat-message.vlivechat-message-type1{background: #e9e9e9; margin-right: 15px; margin-left: 50px;}
.vlivechat-message .vlivechat-message-name{font-weight: bold;}
.vlivechat-footer{display: block; border-top: 1px solid #efefef; position: absolute; bottom: 0; left: 0; width: 100%; padding: 12px 10px 6px 10px; box-sizing: border-box; font-family: Verdana, Geneva, sans-serif; font-size: 12px;}
.vlivechat-footer .vlivechat-textarea{width: 100%; height: 50px; padding: 6px; border-radius: 5px; color: #666; resize: none; overflow: hidden; overflow-wrap: break-word; border: 1px solid #ddd;}
.vlivechat-footer .vlivechat-options{margin-top: 5px; color: #999;}
.vlivechat-footer .vlivechat-options i{font-size: 17px; cursor: pointer; display: inline-block; width: 20px;}

.vlivechat-end-dialog{display: block; position: absolute; top: 145px; left: 0; width: 100%; box-sizing: border-box; padding: 15px; background: #FFF;}
.vlivechat-end-dialog .vlivechat-btn,
.vlivechat-transcript .vlivechat-btn{width: calc(50% - 10px); background: #555555; box-shadow: none; box-sizing: border-box; border-radius: 3px; border: 1px solid #ccc; color: #FFF; cursor: pointer; display: inline-block; font-family: Verdana, Geneva, sans-serif; font-weight: 600; padding: 5px 15px; font-size: 11px; line-height: 14px; text-align: center; vertical-align: middle;}
.vlivechat-end-dialog .vlivechat-btn:hover,
.vlivechat-transcript .vlivechat-btn:hover{text-decoration: none; background: #6a6a6a; border: 1px solid #ccc; color: #FFF;}
.vlivechat-btn-yes, .vlivechat-btn-no{float: left;}
.vlivechat-btn-yes{margin-right: 10px;}
.vlivechat-btn-no{margin-left: 10px;}

.vlivechat-button{position: relative; float: right; width: 190px; height: 30px; margin: 0 10px; background: #555555; z-index: 16000000;border-top-left-radius: 5px; border-top-right-radius: 5px; font-size: 12px; font-family: Verdana, Geneva, sans-serif; font-weight: bold; line-height: 30px;text-align: center; color: #FFF; cursor: pointer;}
.vlivechat-button i{font-size: 15px; display: block; position: absolute; top: 0; left: 0; width: 30px;background: #494949; height: 100%; line-height: 30px;border-top-left-radius: 5px;}

.vlivechat-start-form{padding: 0 20px;}
.vlivechat-field{margin: 10px 0;}
.vlivechat-start-form p{text-align: center; margin-bottom: 15px;}
.vlivechat-input{border: 1px solid #ddd; margin-bottom: 5px;}
.vlivechat-input.error{border-color: #ed8380;}
.vlivechat-field label.error{color: #e02b27;}
.vlivechat-startbtn-container{text-align: center; margin-top: 50px; position: absolute; width: 100%; bottom: 20px; left: 0; border-radius: 0; padding: 0 20px;box-sizing: border-box;}
.vlivechat-startbtn-container > button{
	width: 100%;
	height: 35px;
	white-space: nowrap;
	color: #ffffff;
	background: #555555;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 3px;
	padding-right: 3px;
	border-width: 1px;
	border-style: solid;
	border-color: #3e3e3e;
	border-radius: 3px;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.1), inset 0px 1px 0px rgba(255,255,255,0.25);
	font-weight: bold;
	word-wrap: normal;
	overflow: visible;
	cursor: pointer;
}

.vlivechat-startbtn-container > button:HOVER {
	background: #6a6a6a;
}

.vlivechat-offline-msg-container{
	background: #ededed;
	border-radius: 5px;
	padding: 10px;
	color: #666;
}
.vlivechat-offline-user{
	margin-bottom: 10px;
}
.vlivechat-offline-user:after{
	display: table;
	content: "";
	clear: both;
}
.vlivechat-offline-avatar{
	float: left;
	border-radius: 5px;
	background: #FFF;
	margin-right: 5px;
}
.vlivechat-offline-avatar i{
	font-size: 32px;
	color: #888;
}
.vlivechat-offline-user-info{
	float: left;
}
.vlivechat-offline-user-info label{
	display: block;
}
.vlivechat-offline-name{
	font-weight: bold;
}
.vlivechat-transcript {
	position: absolute;
	bottom: 30px;
	padding: 10px;
	background: #FFF;
	width: calc(100% - 20px);
	box-sizing: border-box;
	margin: 0 10px;
	border: 1px solid #d3d3d3;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px 2px;
}
.vlivechat-options input.vlivechat-uploader-field{display: none;}

.vlivechat-uploader-spinner {
    background-image: url('../images/loader.gif');
    background-position: 50%;
    background-repeat: no-repeat;
    display: none;
    height: 20px;
    margin: 0;
    vertical-align: top;
    width: 50px;
}
.vlivechat-uploader-spinner._loading{display: inline-block;}
.vlivechat-message-content .vlivechat-img-container{border-radius: 5px; border: 1px solid #d3d3d3; padding: 5px; background: #FFF; width: 80px; height: 80px; position: relative;}
.vlivechat-message-content .vlivechat-img-container:hover{box-shadow: 0px 0px 4px #ddd; cursor: pointer;}
.vlivechat-message-content .vlivechat-img-container img{width: calc(100% - 10px); position: absolute; top: 0; bottom: 0; margin: auto; max-height: 100%;}
.vlivechat-image-box{z-index: 16000001; }
.vlivechat-image-box .modal-content{text-align: center;}