:root {
	--c-dark-gray: #585858;
	--c-light-gray: #f5f5f5;
	--c-border-gray: #d3d3d3;
	--c-border-blue: #96d0ed;
	--c-blue-highlight: #e1f5ff;
	--c-white: #fafafa;
}

/* login页面： User ID (or email) 等 */
body {
	background-color: #303338; /* fff --> */
	/* @0124@ D- font-family: 'Helvetica'; */
	font-family: Mulish, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; /* @0124@ A+*/
	margin: 0;
	color: white; /* @0124@ C+ 585858 -->*/
	font-size: 16px;
	/* font-weight: 530; @0071@ A+ */
	overflow-x: hidden;
}

pre {
	white-space: pre-wrap;
	border: 1px solid white;
	background-color: #303338;
}

/* #################### Manual Embed Style Sheets ############################# */
.friend-link, .follower-link {
	font-size: 17px;
}

#user-friend-link, #user-follower-link {
	color: rgb(78, 86, 102); /* @0124@ C+ #585858 -->*/
	font-size: 17px;
}

.chatBotEmbedButtons {
	max-width: 64px;
	margin-left: 25px
}

#squareChatButton {
	max-width: 142px;
	margin-bottom: 11px;
	margin-left: 25px;
}

#roundChatButton {
	max-width: 104px;
	margin-bottom: 8px;
	margin-left: 25px;
}

.chatBotEmbedding {
	max-width: 304px;
	margin-left: 25px;
}

.shrinkhide500 {
	display: none;
}
@media screen and (min-width: 500px) {
	.shrinkhide500 {
		display: inline;
	}
}

.shrinkhide1000 {
	display: none;
}
@media screen and (min-width: 1000px) {
	.shrinkhide1000 {
		display: inline;
	}
}

.shrinkhide1200 {
	display: none;
}
@media screen and (min-width: 1100px) {
	.shrinkhide1200 {
		display: inline;
	}
}

@media only screen and (max-width: 350px) {
	#search-filter-div {
		width: 150px;
	}
	#search-filter-span {
		display: none;
	}
}

@media only screen and (min-width: 350px) {
	#search-filter-div {
		width: 224px;
	}
	#search-filter-span {
		display: inline-block;
    	width: 62px;
	}
}

/* ############################### BOT CHAT GRAPHS ############################# */
#chatType {
	width: 130px;
}

.selectiveCharts {
	list-style-type: none;
	border: 2px solid #CDCDCD;
}

.selectiveCharts li {
	display: inline;
}

.selectiveCharts li div {
	display: inline-block;
	padding: 7px;
}

.selectiveCharts li div span {
	margin-left: 7px;
}
/* ############################################################################# */

img {
	border: 0;
}

#chatLogCheckBoxDiv {
	padding: 5px;
	border: 2px solid #CDCDCD;
}

.clearfix:after {
	background-color: #fff;
	clear:both;
	content:"";
	display:block;
	height:1%;   	/*was 1%*/
	line-height:0;
	visibility:hidden;
}

#contents:after {
	background-color: #fff;
	clear:both;
	content:"";
	display:block;
	height:1%;
	line-height:0;
	visibility:hidden;
}

.old-btn {
	background: url(../images/bg-button-bl.png) no-repeat;
	background-position: 0 -70px;
	color: #fff;
	/*display moved*/
	font: 24px/60px 'OpenSans';
	height: 60px;
	width: 230px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.old-btn:hover {
	background-position: 0 0;
}

/* @0112@ 在document页面，点击上传文档按钮后，弹出的面板的Import按钮样式 */
button.okbutton {
	border: 1px solid #00EAFF;
	border-radius: 6px;
	width: 110px;
	height: 38px;
	background-color: transparent; /* @0112@ C+:#4CAF50 --> #6E70FE */
	/*color:#fff;*/
}

button.okbutton:hover {
	/*opacity: 70%; */
	/*background: #6E70EF; /* @0112@ C+:#4CB220 --> #3498DB */
	/* @0112@ D- border-color: #0C0F00 !important; */
	background-color: rgba(86, 86, 86, 0.86); 
	/*color:#fff;
	border:none;*/
}

button.okbutton:active {
	/*opacity: 90%;
	color: #fff;
	background: #00EAFF;
	border:none;*/
}

/*------------------------------ HEADER ------------------------------*/
#header {
	background-color: #eee;
	border-bottom: 1px solid #e6e6e6;
	padding: 2px 0;
	
}

/** Navigation **/
#navigation {
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
}

#navigation ul {
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
}

#navigation li {
	color: #818181;
	float: left;
	text-align: center;
}

#navigation a {
	color: #818181;
	font-size: 15px;
	
	text-decoration: none;
}

#navigation a:hover li {
	color: #00BBFF;
}

#navigation a.active li {
	color: #3399FF;
}

#navigation2 {
	color: #818181;
	font-size: 15px;
	line-height: 32px;
	text-decoration: none;
}

#navigation2:hover {
	color: #00BBFF;
}

#navigation3 {
	color: #3399FF;
	font-size: 15px;
	line-height: 32px;
	text-decoration: none;
}

#mainbody {
	background-color: #303338;	/* @0274@ C+ #fff --> */
}

#titlebox {
	margin: 0 auto;					
}

#titlebox > div {
	padding: 0 10px;
	margin: 0 auto;
}

/*------------------------------ SLIDES ------------------------------*/
#slideshow2 { 
	position: relative;
	min-height: 100px;
}

#slideshow2 > div { 
	position: absolute;
}

#slide2 {
	display: inline-block;
}

#slideshow { 
	position: relative;
}

#slideshow > div { 
	position: absolute;
}

#slide {	
	border: 1px solid #d5d5d5;
	box-shadow: 6px 6px 3px #888888;
	margin: 6px 6px 6px;
	display: inline-block;
}

#slidebar {
	margin: 0 auto;
}

#barslide {
	border: 1px solid #d5d5d5;
	box-shadow: 6px 6px 3px #888888;
	margin: 6px auto;
	display: table;
	background-color:#fff;
}

#slide, #barslide img {
	display: block;
	float:right;
	border: 1px solid #d5d5d5;
	margin: 6px;
}

#slide h3, #barslide h3 {
	color:#FF9900;
	text-align:center;
	text-transform: none;
	font-weight: normal;
}

#slide p, #barslide p {
	font-size: 18px;
}

#slide p.slide-ps, #barslide p.slide-ps {
	font-size: 16px;
	font-weight: normal;
}

#slide li, #barslide li {
	font-size: 16px;
	font-weight: bold;
}

#slide li a, #barslide li a {
	color: #00a1e6;
	font-weight: bold;
}

#slide a, #barslide a {
	font-weight: normal;
	text-decoration: none;
}

#nav-left {
	display:none;
	border:0;
	position:absolute;
	top:150px;
	margin:6px;
	z-index:2;
}

#nav-right {
	display:none;
	border:0;
	position:absolute;
	right:0;
	top:150px;
	margin:6px;
	z-index:2;
}

#titlebox h1, #titlebox h2 {
	color: #2c2c2c;
	margin: 0;
}

#titlebox h2 {
	text-transform: none;
}

#titlebox p {
	font-size: 16px;
	line-height: 24px;
	margin: 0;
}

#titlebox p span {
	display: block;
	font-size: 12px;
	text-align: left;
}

#titlebox p span b {
	font-weight: normal;
	display: block;
	width: 256px;
}

/* @0082@ dchat中聊天内容scroll控件 */
.scroller, .botplatformframescroller {
	display: inline-block !important;
	height:100%;
	width: 50%;
	overflow-y: auto;
    overflow-x: hidden;
	text-align:left;
	margin-top: -45px; 
	right: 10%; 
	position: absolute;
	max-height: 70vh !important;
	word-wrap: break-word;
	white-space: normal;
	top: 20%; /* @0082@ A+ 22 --> */
}

/* @0274@ A+ */
.botplatformframescroller-m {
	display: inline-block !important;
	overflow-y: scroll;
	scrollbar-width: none; /* Firefox：隐藏滚动条 */
	-ms-overflow-style: none; /* IE 和 Edge：隐藏滚动条 */
	overflow-x: hidden;
	text-align:left;
	word-wrap: break-word;
	white-space: normal;
	position: absolute;
	width: auto;
	left: 2%;
	right: 2%;
	min-height: 40%;
	height: 68%;
	max-height:70%;
	bottom: calc(5vh + 45px);
}

.botplatformframescroller-m::-webkit-scrollbar {
	display: none; /* 不显示滚动条 */
}

/* @0138@ A-Start: */

/* @0230@ A-Start: */
.chathistoryscroller {
	height:100%;
	width: 50%; /* 设置宽度为屏幕的 50% */
	overflow-y: auto; /* 垂直滚动条自动出现 */
    overflow-x: hidden; /* 隐藏水平滚动条 */
	text-align:left;
	right: 6%; /* 设置距离右边界是屏幕宽度的 12% --> */
	position: absolute; /* 采用绝对定位 */
	word-wrap: break-word; /* 当内容到达元素的边界时，强制文本换行 */
	white-space: normal; /* 确保文本会自然地换行 */
}
/* A-End. */

/* @0274@ A+ */
.chathistoryscroller-m {
	/*height:100%;*/
	width: 100%; /* 设置宽度为屏幕的 50% */
	overflow-y: auto; /* 垂直滚动条自动出现 */
    overflow-x: hidden; /* 隐藏水平滚动条 */
	text-align:left;
	position: relative;
	word-wrap: break-word; /* 当内容到达元素的边界时，强制文本换行 */
	white-space: normal; /* 确保文本会自然地换行 */
}

/* A-End. */

/* 定制滚动条的整体样式 */
.chathistoryscroller::-webkit-scrollbar, 
.botplatformframescroller::-webkit-scrollbar {
	width: 10px; /* 滚动条的宽度 */
}

/* 滚动条滑块的样式 */
.chathistoryscroller::-webkit-scrollbar-thumb,
.botplatformframescroller::-webkit-scrollbar-thumb {
	background-color: #555; /* 滚动条滑块的颜色 */
	border-radius: 5px; /* 滚动条滑块的圆角 */
}

/* 滚动条滑块在hover时的样式 */
.chathistoryscroller::-webkit-scrollbar-thumb:hover,
.botplatformframescroller::-webkit-scrollbar-thumb:hover {
	background: #888; /* 滚动条滑块hover时的颜色 */
}

/* 滚动条轨道的样式 */
.chathistoryscroller::-webkit-scrollbar-track,
.botplatformframescroller::-webkit-scrollbar-track {
	background-color: #303338; /* 滚动条轨道的颜色 */
	border-radius: 5px; /* 滚动条轨道的圆角 */
}

/* A-End. */

/* @0390@ A-Start: */
#cropperModal {
    scrollbar-width: 10px; /* 适用于Firefox */
}

#cropperModal::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

#cropperModal::-webkit-scrollbar-thumb {
	background-color: #555;
	border-radius: 5px;
}

#cropperModal::-webkit-scrollbar-thumb:hover {
	background: #888;
}

#cropperModal::-webkit-scrollbar-track {
	background-color: #303338;
	border-radius: 5px;
}

/**
.ui-dialog-buttonset button {
    background-color: transparent;
    color: white;
    width: 90px;
    height: 32px;
    padding: 7px 0px;
    border: 1px solid white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-left: 100px;
    margin-top: 10px;
}

.ui-dialog-buttonset button:hover {
    opacity: 0.5;
    background-color: #303338;
}**/

/* A-End. */

/* @0139@ A-Start: correct和flag弹出面板的样式定义 */
/**
#dialog-correct { //起作用，只是中间部分
  border: 3px solid green; 
  background-color: rgba(68, 68, 68, 0.86); 
  border-radius: 10px;
}

#dialog-correct .ui-dialog-title {
  font-size: 20px; 
  font-weight: bold;
  color: red; 
}

.ui-dialog { //不起作用
    border: 2px solid #ff0000; 
    border-radius: 10px; 
    background-color: rgba(255, 0, 0, 0.99); 
}

.ui-dialog .ui-dialog-titlebar { //起作用
    background-color: rgba(0, 255, 0, 0.99); 
    color: green; 
    font-family: Arial, sans-serif; 
    font-size: 20px; 
}
**/
#dialog-correct { /*起作用，只是中间部分 */
  color: white;
  /*background-color: rgba(86, 86, 86, 0.86);*/
}

/* @0140@ A+ */
#dialog-flag { /*起作用，只是中间部分 */
  color: white;
  /*background-color: rgba(86, 86, 86, 0.86);*/
}

/* @0160@ A+ */
.ui-dialog .ui-dialog-title {
	color: white;
	/*margin-left: 20px !important;*/
	margin-top: 20px /*!important*/;
}

/* correction弹出面板的顶部标题栏 */
.ui-dialog .ui-dialog-titlebar {
    background-color: #303338; /*rgba(86, 86, 86, 0.86); */
    font-size: 20px; 
    color: white !important;
    border: none;
    text-align: center;
}

/* @0219@ A-Start: */
#custom-file-upload {
    background-color: transparent;
    color: white;
    width: 170px;
    height: 36px;
    padding: 7px 0px;
    border: 1px solid #00EAFF;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-left: 100px;
    margin-top: 10px;
}

/**
#selected-file-names {
    font-size: 14px;
    color: #fff;
}
**/
/* A-End. */

.ui-dialog .ui-dialog-titlebar-close {
	top: 33%;
}

.ui-dialog .ui-dialog-content {
	color: white;
	text-align: center; /* @0160@ A+ */
	margin-top: -8px;
}

/* correction弹出面板的底部按钮栏 */
.ui-dialog .ui-dialog-buttonpane {
	margin-top: 20px !important;
	border: none; /* 去掉底部按钮上面的那条线 */
    background-color: #303338; /*rgba(86, 86, 86, 0.86); */
    font-size: 16px; 
}
/* A-End. */

/* @0282@ A-Start: */
/* 只针对具有 custom-dialog 类的对话框应用这些样式 */
.shareDialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    text-align: center; /* 居中按钮 */
    float: none !important;
    margin-top: 10px;
}

/* 分享面板右上角的关闭按钮位置 */
.shareDialog .ui-dialog-titlebar-close {
	margin-top: -18px;
}

.shareDialog .shareDialogBtn {
    margin: 0 10px !important; /* 设置左右间距 */
}

.shareDialog .ui-button {
    margin: 0;
    padding: 0;
}

.shareDialog .ui-button:hover {
    background-color: transparent;
}

.copyButton {
	font-size: 14px !important;
	border: 1px solid #00EAFF;
	border-radius: 5px;
	width: 60px;
	height: 38px;
	background-color: transparent;
}

.shareButton:hover {
	opacity: 0.5;
}

/*dchat页面的分享*/
.chatShareDialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    text-align: center; /* 居中按钮 */
    float: none !important;
    margin-top: 10px;
}

/* 分享面板右上角的关闭按钮位置 */
.chatShareDialog .ui-dialog-titlebar-close {
	margin-top: -18px !important;
}

.chatShareDialog .shareDialogBtn {
    margin: 0 10px !important; /* 设置左右间距 */
}

.chatShareDialog .ui-button {
    margin: 0;
    padding: 0;
}

.chatShareDialog .ui-button:hover {
    background-color: transparent;
}


/*bot实例页面的分享*/
.instShareDialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    text-align: center; /* 居中按钮 */
    float: none !important;
    margin-top: 10px;
}

/* 分享面板右上角的关闭按钮位置 */
.instShareDialog .ui-dialog-titlebar-close {
	margin-top: -18px !important;
}

.instShareDialog .shareDialogBtn {
    margin: 0 10px !important; /* 设置左右间距 */
}

.instShareDialog .ui-button {
    margin: 0;
    padding: 0;
}

.instShareDialog .ui-button:hover {
    background-color: transparent;
}
/* A-End. */


/* @0082@ A-Start: */
#botplatformframetable-scroll {
	margin-left: 120px;
}
/* A-End. */

.scroller button, .botplatformframescroller button {
	margin:1px;
}

.chat-input, .message input[type='text'].chat-input {
	max-width:none;
	margin:0 0 0 0;
	padding:0;
	width:100%;
}

.botplatformframechat-input, .message input[type='text'].botplatformframechat-input {
	max-width:45%;
	width:45%; 
	padding-left: 10px;
	padding-right: 70px; /* 防止文本和 sendicon 重叠 */
	right: 12%;
	vertical-align: middle;
	position: absolute;
	border-radius: 6px;
	border: 1px solid #00EAFF; 
	color: white; /* white --> */
	caret-color: white;
}

/*@0138@ A-Start: */
.botplatformframechat-input:focus {
	outline: 1px solid #00EAFF;
}


/* @0315@ A-Start: */
.botplatformframechat-textarea, .message .botplatformframechat-textarea {
	max-width:100%;
	width:100%; 
	padding-left: 10px;
	padding-right: 84px; /* 防止文本和 sendicon 重叠 */
	/*right: 10%;*/
	vertical-align: middle;
	/*position: absolute;*/
	border-radius: 6px;
	border: 1px solid #00EAFF; 
	color: white; /* white --> */
	caret-color: white;
	height: 36px; /* 假设一行的高度是36px */
	overflow-y: auto;
	resize: none;
}

.botplatformframechat-textarea:focus,
.message .botplatformframechat-textarea:focus {
	outline: 1px solid #00EAFF;
}
/* A-End. */


/* @0277@ A-Start: */
.botplatformframechat-input-m {
	padding-left: 10px;
	padding-right: 70px; /* 防止文本和 sendicon 重叠 */
	vertical-align: middle;
	position: absolute;
	border-radius: 6px;
	border: 1px solid #00EAFF; 
	color: white;
	caret-color: white;
	margin-bottom: 4px; 
	max-width:calc(88% - 47px) !important; 
	width:calc(88% - 47px) !important; 
	right:6%;
}

.botplatformframechat-input-m:focus {
	border: 2px solid #00EAFF;
}
/* A-End. */

.message input[type='text'].botplatformframechat-input:focus {
	outline: 1px solid #00EAFF;
}
/* A-End. */

/* @0315@ A-Start: */
.botplatformframechat-textarea-m, .message .botplatformframechat-textarea-m {
	padding-left: 10px;
	padding-right: 80px; /* 防止文本和 sendicon 重叠 */
	vertical-align: middle;
	/*position: absolute;*/
	border-radius: 6px;
	border: 1px solid #00EAFF; 
	color: white;
	caret-color: white;
	margin-bottom: 4px; 
	/*max-width:calc(88% - 34px) !important; 
	width:calc(88% - 34px) !important;
	right:5%;*/
	height: 36px;
	overflow-y: auto;
	resize: none;
}

.botplatformframechat-textarea-m:focus,
.message .botplatformframechat-input:focus {
	outline: 1px solid #00EAFF;
}
/* A-End. */

/* @0498@ A-Start: */
.thumbnail-container {
    height: 80px;
    display: flex;
    align-items: center;
    width: 47%;
    margin-left: 43%;
    /*margin-bottom: 10px;*/
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 5px;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #555 #303338;
}

.thumbnail-container::-webkit-scrollbar {
    height: 10px;
}

.thumbnail-container::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 5px;
}

.thumbnail-container::-webkit-scrollbar-thumb:hover {
    background: #888;
}

.thumbnail-container::-webkit-scrollbar-track {
    background-color: #303338;
    border-radius: 5px;
}

.thumbnail {
    position: relative;
    margin-right: 10px;
    border: none;
    padding: 0;
    margin: 0 10px 0 0;
    flex-shrink: 0; /* 防止缩略图被压缩 */
}

.thumbnail-image {
	width: 56px !important;
	height: 56px !important;
	border-radius: 5px;
	object-fit: cover;
}

.thumbnail-container-m {
    height: 80px;
    display: flex;
    align-items: center;
    width: calc(88% - 34px);
    margin-left: calc(7% + 34px);/* 100-88-5*/
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 5px;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #555 #303338;
}

.thumbnail-container-m::-webkit-scrollbar {
    height: 10px;
}

.thumbnail-container-m::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 5px;
}

.thumbnail-container-m::-webkit-scrollbar-thumb:hover {
    background: #888;
}

.thumbnail-container-m::-webkit-scrollbar-track {
    background-color: #303338;
    border-radius: 5px;
}


/* 文档缩略图 */
.thumbnail.document-thumbnail {
    display: flex;
    align-items: center;
    width: auto;
    height: 56px;
    padding: 5px;
    border-radius: 5px;
    background-color: #3d444f;
    margin-right: 10px;
    position: relative;
    flex-shrink: 0;
}

.document-icon {
    width: 36px !important;
    height: 36px !important;
    margin-right: 10px !important;
    border-radius: 0 !important;
}

.document-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.document-name {
    font-size: 12px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px; /* 调整 */
    padding-right: 5px;
}

.document-type {
    font-size: 10px;
    color: #fff;
}

.close-button {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: rgba(0,0,0,0.5);
    color: white;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    border-radius: 50%;
    cursor: pointer;
}


/* 输入区域 */
.input-area {
    display: flex;
    align-items: center; /* 使子元素在同一水平线上 */
    width: 100%;
}

.chat-input-container {
    flex: 0 0 47%; /* 固定宽度为47% */
    position: relative;
    margin-left: 43%;/* 100-47-10 */
}

.chat-input-container-m {
    max-width: calc(88% - 34px) !important;
    width: calc(88% - 34px) !important;
    margin-left: calc(7% + 34px);
}

.icons {
    flex: 1; /* 占据剩余空间 */
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.icons a {
    margin-left: 10px;
}

/* A-End. */

.input-wrapper {
	width: 100%;
	/*display: flex;
	align-items: center;*/
	position: absolute;
	bottom: 20px; /* 如果使用百分比会不起作用，因为其父元素没设置高度 */
}
/* A-End.*/

.embed-ad-editor {
	position:fixed;top:24px;bottom:208px;left:4px;right:4px;
}

.feature {
	display:inline-block;
	vertical-align: top;
}

.upgrade {
	display:inline-block;
	vertical-align: top;
	padding:0px;
	margin:5px;
	border-radius: 6px; /* @0137@ A+ */
}

.client {
	display:inline-block;
	vertical-align: top;
	padding:4px;
	margin:8px;
}

.browse-div {
	vertical-align:top;
	/* @0165@ D- overflow:hidden; */
	/* display:inline-block;  @0334@ D- */
	margin: 0 10px 32px 10px;
	/* @0062@ A+ */
	width: 238px;
	word-break: break-all;
	white-space: normal;
}

/* @0334@ A-Start: */
/** @0423@ C+
.browse-div-carousel {
	flex: 0 0 auto;
	margin: 0 10px 32px 10px;
	vertical-align:top;
	display:inline-block;
	width: 238px;
	word-break: break-all;
	white-space: normal;
}
**/
.browse-div-carousel {
    /*display: inline-block;*/
	flex-shrink: 0;
	margin-left: auto;
	margin-right: auto;
	vertical-align: middle;
	width: 238px;
	height: 324px;
	margin: 0 5px;
}

.carousel-container {
    position: relative;
    width: 100%;
    text-align: center; /* @0423@ A+ */
    overflow: hidden;
    margin: 0 auto;
}

.carousel-btn {
	display: inline-block;
    position: absolute;
    overflow: hidden;
    width: 36px;
    height: 36px;
    max-width: 36px;
    max-height: 36px;
    top: 50%;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 40px;
    line-height: 40px;
    color: #00EAFF !important;
    z-index: 888;
}

.left-btn {
    left: -10px; /* 18px --> */
}

.right-btn {
    right: -8px;
}

.carousel-items {
    display: flex;
    overflow: hidden;
    flex-wrap: nowrap;
    cursor: grab;
    transition: transform 0.3s ease;
}

.carousel-items-m { /* @0482@ A+ */
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
}

.browse-div-carousel-m { /* @0482@ A+ */
	flex-shrink: 0;
	width: calc(70vw - 10px);
	margin: 0 5px;
	transition: transform 0.3s ease;
	height: 324px;
	box-sizing: border-box;
}

.browse-div-carousel-m img { /* @0482@ A+ */
	max-width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* @0482@ A+
*, *::before, *::after {
	box-sizing: border-box;
}
*/

.instances-container {
    display: flex !important;
    flex-wrap: wrap;
}

.categories-container {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start;
}
/* A-End. */

/* @0335@ A-Start: */
.goog-te-gadget-simple {
	border-radius: 5px;
	border: 1px solid #00EAFF; 
	background-color: transparent;
}
/* A-End. */

.browse-list-div {
	vertical-align:top;
	overflow:hidden;
	display:inline-block;
	margin:4px;
}

.search-div {
	display:inline-block;
	margin:2px;
}

.search-span {
	display:inline-block;
	width:62px;
}

.search-spa {
	display:inline-block;
	width:120px;
}

.full {
	height:100%;
	width:100%;
	margin-left: 0;
	padding-left: 0;
}

.full-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #303338;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 60% 75%;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.chat-div, .botplatformframechat-div {
	height:100%;
	width:100%;
}

.online-div {
	display:inline-block;
	overflow:auto;
	white-space:nowrap;
	max-width:100%;
}

.online {
	display:inline-block;
}

.online-user {
	border-style:solid;
	border-color:grey;
	border-width:1px;
	margin:2px;
	display:inline-block;
	text-align: center;
	width: 72px;
}

.online-user-label {
	color: #818181;
	font-size: 12px;
	margin:2px;
	overflow:hidden;
}

/*------------------------------ HOVER ------------------------------*/
span.hover-menu ul {
	position:absolute;
	z-index:52;
	visibility:hidden;
	opacity:0;
	transform: translateY(-100%);
	transition: 0.35s;
	box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
	/* @0088@ A-Start: */
	background: white; /* @0 C+ 9c8993 --> */
	border: 1px solid rgb(117, 89, 255);
	border-radius: 6px;
	/* A-End. */
}

span.hover-menu:hover ul {
	visibility:visible;
	opacity:1;
}

span.dropt div {
	/*display:none; makes the transition not work... */
	position:absolute;
	margin: -1px 0 0 0;
	padding: 3px 3px 3px 3px;
	background: #303338; /* fff --> */
	/*border-style:solid;
	border-color:black;
	border-width:1px;*/
	border: 1px solid #00EAFF;
	z-index:52;
	visibility:hidden;
	opacity:0;
}

span.dropt:hover div {
	display:inline;
	visibility:visible;
	opacity:1;
}

span.dropt .gear-menu {
	position: relative;
	display: inline-block;
	margin: -1px 0 0 0;
	padding: 3px 3px 3px 3px;
	background: #fff;
	border-style: none;
	border-color: transparent;
	border-width: 0px;
	z-index:52;
	visibility:hidden;
	opacity:0;
}

span.dropt:hover .gear-menu {
	display: inline;
	visibility: visible;
	opacity: 1;
}

span.dropt-banner div {
	/*display:none; makes the transition not work... */
	position:absolute;
	margin: -1px 8px 0 0;
	padding: 8px 8px; /*was 3px*/
	background: rgba(68, 68, 68, 0.9);
	border-style:solid;
	border-color: #00EAFF; /* @0096@ C+ black --> */
	border-radius: 6px; /* @0096@ A+ */
	border-width:1px;
	z-index:52;
	visibility:hidden;
	opacity:0;
	line-height: 150%;
}

span.dropt-banner:hover div {
	display:inline;
	visibility:visible;
	opacity:1;
}

/* @0080@ 当前隐式按钮menu的样式 */
a.menu, a.botplatformmenu {
	color: #6E70FE; /* @0080@ 818181 --> 6E70FE 字体颜色 */
	font-size: 14px;
	text-decoration: none;
	padding: 2px;
	border-radius: 4px; /* @0080@ A+ */
}

a.user {
	color: #818181;
	font-size: 12px;
	text-decoration: none;
}

a.button {
	text-decoration: none;
	font-size: 16px;
}

img.button {
	vertical-align: middle;
	height: 40px;
}

a.loginbutton {
	color: #fff;
	background-color: #303338; /* @0071@ #385499 --> #ffffff*/
	padding: 8px;
	display: block;
	width: 230px;
	text-decoration: none;
	border-radius: 6px; /* @0071@ A+ */
	height: 42px; /* @0071@ A+ */
	align-items: center; /* 垂直方向居中对齐 */
	border: 1px solid white;
}
a.loginbutton:hover {
	/*opacity: 0.7;*/ /* @0071@ 0.8 --> 0.7*/
	background-color: #3498DB; /* @0071@ A+ */
}

a.menu:hover, a.botplatformmenu, a.fbbutton:hover {
	/* @0080@ D- color: #fff; */
	/*background: #6E70FE; */ /* @0080@ grey --> 6E70FE*/
}

/* @0118@ A-Start: */
.line-container {
	display: flex;
	align-items: center;
}

.line-text {
	background-color: #303338; /* @0 white --> */
	padding: 0 10px;
}

.line {
	flex-grow: 1;
	height: 1px;
	background-color: #5b5b5b !important; /*rgba(35, 40, 51, 0.1);*/
	width: 100%;
	max-width: 132px;
}
/* A-End. */

a.menu:hover span .admin-user {
	/* color: #fff;*/ /* @0 fff --> 去掉变白色 */
}

a.menuitem {
	text-decoration:none;
	display:block;
	color: rgb(78, 86, 102); /* @0124@ C+ #585858 -->*/
	font-size: 12px;
	font-family: Mulish, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; /* @0124@ A+*/
}
span.menuitem:hover {
	color: #fff;
	background: grey;
}

tr.menuitem:hover {
	background: grey;
}

tr.menuitem:hover a {
	color: #fff;
}

tr.menuitem:hover span {
	color: #fff;
}

#topper tr.menuitem:hover a {
	color: #fff;
}

a.blue {
	color: #3DB4CF;
	text-decoration: none;
	font-weight:bold;
}

a.blue:hover {
	color: orange;
}

.required {
	/*color: #686868;*/ /* @0066@ ：create bot中的输入框 标题*/
	font-size: 16px; /* @0066@ ：create bot中的输入框 标题*/
	/*font-weight:bold; /* @0 A+ */
	margin-top: 5px; /* @0 A+ */
	margin-bottom: 5px;
}

/* @0068@ A-Start: */
.required-content {
	color: #bbbbbb; /* @0066@ ：create bot中的输入框内容*/
	font-size: 14px; /* @0066@ ：*/
	margin-top: 0px; /* @0 A+ */
	margin-bottom: 1px;
}

/* A-End. */

input.required {
	/*border-color:black; @0072@ D- */
	border-radius: 6px; /* @0072@ A+ */
	border-color: #AED6F1; /* @0072@ A+ */
	font-weight:normal; /* @0 A+ */
}

.details {
	/*color:#585858;font-size:12px;*/ /* @0059@ 鼠标悬浮弹出面板中的主要部分(除最上面的名字之外的部分)字体属性*/
	color:#ffffff;
	font-size:12px;
	line-height: 1.2;
	white-space: normal; /* 默认值，允许自然换行，但不拆分单词 */
	z-index: 999;
}

/* @0130@ A-Start: */
.custom-tooltip {
	display: none;
	position: absolute; /* 此属性暂时不能修改，会影响其他button位置 */
	background-color: rgba(68, 68, 68, 0.90);
	color: #fff;
	padding: 4px 8px;
	border-radius: 4px;
	z-index: 9999;
	font-size: 14px;
	max-width: 200px;
	width: 150px;
	border: 1px solid #00EAFF;
	white-space: normal; /* 默认值，允许自然换行，但不拆分单词 */
	border: 1px solid #00EAFF;
	/*white-space: nowrap; /* 确定不换行 */
}
/* A-End. */

/* @0062@ A-Start: bot实例thumb下面增加的bot简短描述*/
/* 这里添加width等元素，不起作用，width等元素在上面browse-div中添加*/
/* color和font-size有效*/
.desc {
	color: white;
	font-size: 12px;
	width: 190px;
	height: 36px;
	margin-left: 25px;
	position: relative;
	pointer-events: none;
	word-break: keep-all; /* 防止单词在中间断开 */
	/*white-space: pre-wrap; /* 保留换行符，同时允许自动换行 */
}
/*A-End.*/

/* @0327@ A+ */
#nameCharCount.overLimit,
#taglineCharCount.overLimit,
#charCharCount.overLimit,
#descCharCount.overLimit,
#greetCharCount.overLimit,
#appeCharCount.overLimit,
#speakCharCount.overLimit,
#dialogCharCount.overLimit {
    color: red;
}



#log {
	font-size:12px;white-space:pre-wrap;
}

a.mailto:visited, a.mailto:link, a.mailto:hover, a.mailto:active {
	color:#0cacff;
	text-decoration:underline;
}


/*------------------------------ CONTENTS ------------------------------*/
#contents {
	background-color: #303338; /* fff --> */
	margin: 0 auto;
}

#contents-full {
	background-color: #303338; /* @0141@ fff --> */
}

h1 {
	/* @0141@ C+ color: rgb(78, 86, 102); /* h1标签中标题的颜色 @0124@ C+ 3e3e3e --> */
	color: white;
	font-size: 26px; /* @124@ C+ 30-->*/
	font-weight: normal;
	line-height: 30px; /* 每行的高度 */
	font-family: Mulish, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; /* @0124@ A+ */
}

h2 {
	/* @0141@ C+ color: rgb(78, 86, 102); /* @0124@ C+ 2c2c2c --> */
	color: white;
	font-size: 22px; /* @124@ C+ 24-->*/
	font-weight: normal;
	line-height: 24px;
	margin-bottom: 12px;
	font-family: Mulish, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; /* @0124@ A+ */
}

h3 {
	margin-top: 40px; /* @0 A+ */
	margin-bottom: 10px; /* @0 4 --> */
	font-size: 22px;
	font-weight: normal;
	/* @0141@ C+ color: rgb(78, 86, 102); */
	color: white;
	font-family: Mulish, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; /* @0124@ A+ */
}

p {
	/* @0141@ C+ color: rgb(78, 86, 102); /* @0124@ C+ 585858 -->*/
	color: white;
	font-size: 16px;
	line-height: 36px;
	margin: 10px 0px 10px; /* 0 0 20*/
	/* @0124@ D- font-family: Mulish, Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", "Tw Cen MT"; */
}

p span {
	color: white; /* #888888 --> */
	font-size: 16px;
	line-height: 18px;
}

li {
	/* @0141@ C+ color: rgb(78, 86, 102); /* @0124@ C+ #585858 -->*/
	color: white;
	font-size: 16px;
	line-height: 22px;
}

p a {
	/* @0141@ C+ color: rgb(78, 86, 102); /* @0124@ C+ #585858 -->*/
	color: white;
}

a {
	/* @0141@ C+ color: rgb(78, 86, 102); /* @0124@ C+ #585858 -->*/
	color: white;
}

.browse > div {
	display: inline-block;
}

.browse select {
	border: 1px solid #d5d5d5;
	margin: 6px 6px 6px;
}

.message input[type='radio'] {
	margin: 6px 6px 6px;
	padding: 0 4px;
}

.more {
	background-color: #727272;
	color: #fff;
	display: inline-block;
	font-size: 14px;
	line-height: 30px;
	width: 100px;
	text-align: center;
	text-decoration: none;
}

.more:hover, .message input[type='submit']:hover {
	background-color: rgba(86, 86, 86, 0.86);
	color: #000;
}

/** main **/
.main {
	float: left;
	background: url(../images/divider.png) repeat-y right top;
	min-height: 100px;
	padding-right: 24px;
}

.main h1, .sidebar h1 {
	margin: 0 0 12px;
	position: relative;
	top: -18px;
}

.main h2 span {
	display: block;
	font-size: 12px;
}

#about2 {
	margin: 4px 4px;
}

#embedbody {
	margin: 0 4px 0 4px;
}

.about h1, .section h1 {
	/* @0077@ D- border-bottom: 1px solid #e0e0e0; */
	/* @0077@ A+*/
	border-bottom: 1px solid; /* 设置底部边框的宽度 */
	border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
	border-image-slice: 1; /* 定义边框图片如何被切分 */
	border-image-width: 0 0 1px 0; /* 设置上、右、下、左的边框宽度，这里我们只关心底部边框 */
	
	padding-bottom: 12px;
}

.section {
	background-color: #303338; /* #fff --> */
	float: left;
	margin-bottom: 4px;
}

.section h1 {
	margin-bottom: 18px;
}

.message input[type='text'] {
	/* @0066@ 决定输入border样式： border: 1px solid #d5d5d5;  */

	/* @0066@ A-Start: */
	border-radius: 6px;
	border: 1px solid #D5D8DC; /* 不能删除 */
	margin: 0 0 6px;
	background-color: #303338; /* @0071@ A+ */
}

/* @0066@ A-Start: */
.message input[type='text']:focus {
	border: 1px solid #00EAFF;
	outline: none;
}
/* A-End. */

/* @0097@ A-Start: */
.custom-input:focus {
	outline: 1px solid #6E70FE;
}
/* A-End. */

.message input[type='email'] {
	font-size: 14px;
	height: 36px;
	border: 1px solid #d5d5d5;
	margin: 0 0 6px;
}

.message input[type='number'] {
	border: 1px solid #d5d5d5;
	margin: 0 0 6px;
}

/* @0099@ A-Start: */
.message input[type='image'] {
	width: 64px;
}

/* @0148@ A+ */
.ui-widget.ui-widget-content {
	color: #dddddd;
	background-color: #303338;
	border-radius: 10px; /* @0160@ A+ */
	border: none; /*!important; /* @0160@ A+ */
	border: 1px solid #00EAFF;
}

.message select {
	height: 36px;
	color: white; /* @0124@ C+ #585858 -->*/
	border: 1px solid #D5D8DC;
	margin: 6px 0px 6px;
	width: 100%;
	min-width: 140px;
	max-width: 900px;
	border-radius: 4px; /* @0093@ A+ */
	margin-top: 2px;
	margin-bottom: 30px;
	background-color: #303338;
	padding-left: 8px;
}

.message select:focus {
	outline: none;
	border: 1px solid #00EAFF;
}

.message input[type='checkbox'] {
	margin: 6px 6px 6px;
}

.message input[type='password'] {
	border: 1px solid #d5d5d5;
	margin: 0 0 6px;
}

.message input[type='date'] {
	border: 1px solid #d5d5d5;
	margin: 0 0 6px;
}

.message textarea {
	color: #dddddd; /* @0124@ C+ #585858 -->*/
	border: 1px solid #D5D8DC;
	border-radius: 6px; /* @0069@ A+ 在创建bot时，brief/detailed bot介绍的输入 边框*/
	height: 100px;
	overflow: auto;
	margin: 0 0 6px;
	/*padding: 0 4px;*/
}

/* @0093@ A+ */
.message textarea:focus {
	border: 1px solid #00EAFF;
	outline: none;
}


/* @0112@ A-Start: 在document页面，点击上传文档按钮后，弹出的面板的Cancel按钮样式 */
.ui-dialog .ui-button {
	/*border: 1px solid white;*/
	color: white;
	border-radius: 5px;
	/*background-color: rgba(86, 86, 86, 0); /* 6E70FE --> */
	/* color: white; 设置文字颜色为白色 */
	margin-top: -28px /*!important*/;
	background-color: transparent;
}

.ui-dialog .ui-button:hover {
	/*background-color: rgba(86, 86, 86, 0.86); /* 3498DB--> 设置背景颜色为蓝色 */
	/*color: white;*/
	border: 1px solid white;
	opacity: 0.5;
}

/*点击后不显示边框*/
#import-file:focus {
	outline: 0px;
}


.message input[type='submit'] {
	background-color: grey;
	color: #fff;
	cursor: pointer;
	font: 13px/30px Mulish, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; /* @0124@ A+*/
	height: 40px;
	min-width: 120px;
	border: 0;
	margin: 8px 8px 4px 0;
	font-weight:bold;
	-webkit-appearance: none;
	border-radius: 0;
}

.message input[type='file'] {
	color: #d5d5d5;
	cursor: pointer;
	height: 40px;
	border: 0;
	/* @0112@ C+ margin: 8px 8px 4px 0; */
	margin: 14px 8px 4px 20px;
	
	font-weight:bold;
}

/*---Don't have my style ---*/
/*
#login input[type='text'] {
	font-size: 14px;
	height: 36px;
	width: 100%;
	max-width: 300px;
	border: 1px solid #d5d5d5;
	margin: 0 0 6px;
}
*/

/*---Don't have my style ---*/
/*
#login input[type='password'] {
	font-size: 14px;
	height: 36px;
	width: 100%;
	max-width: 300px;
	border: 1px solid #d5d5d5;
	margin: 0 0 6px;
	border-radius: 6px; 
}
*/

.search input[type='text'] {
	width: 150px;
	max-width: 150px;
	border: 1px solid #d5d5d5;
	margin: 0 2px 0 0;
}

.search input[type='number'] {
	width: 150px;
	max-width: 150px;
	border: 1px solid #d5d5d5;
	margin: 0 2px 0 0;
}

.search input[type='date'] {
	width: 150px;
	max-width: 150px;
	border: 1px solid #d5d5d5;
	margin: 0 2px 0 0;
}

.search input[type='radio'] {
	margin-right: 4px;
	margin-left: 4px;
	vertical-align: text-bottom;
}

.search select {
	width: 150px;
	max-width: 150px;
	border: 1px solid #d5d5d5;
	margin: 0 2px 0 0;
}

select.users {
	height: 150px;
	margin: 0 0px 6px;
}

input[type='text'].users {
	margin: 4px 10px 0 0;
}

#tabs {
	width: 96%;
	border: 0px;
}

.ui-tabs-hide {
	display: none;	
}

.browse .dialog, .dialog {
	display: none;
}

.dialog-div {
	margin-top: 10px;
	margin-bottom: 10px;
}

.hidden, .message input[type='text'].hidden, .message input[type='submit'].hidden {
	opacity: 0;
	width: 0px;
	height: 0px;
	position: absolute;
	left: -100px;
	top: -100px;
}

.hidden-item {
	visibility: hidden;
	width: 0;
	height: 0;
	overflow: hidden;
}

.buttonbarleft {
	color: white;
	background-color: #009900;
	cursor: pointer;
	font: 14px/30px Mulish, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; /* @0124@ A+*/
	border: 0;
	outline:0;
	margin:0;
	font-weight:bold;
	position:fixed;
	bottom:0px;
	left:0px;
	width:50%;
	z-index:52;
	-webkit-appearance: none;
	border-radius: 0;
}

.buttonbarright {
	color: white;
	background-color: #0F8FF3;
	cursor: pointer;
	font: 14px/30px Mulish, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; /* @0124@ A+*/
	border:0;
	outline:0;
	margin:0;
	font-weight:bold;
	position:fixed;
	bottom:0px;
	right:0px;
	width:50%;
	z-index:52;
	-webkit-appearance: none;
	border-radius: 0;
}

input[type='text'].search {
	height: 16px;
	width: 150px;
	max-width: 150px;
	border: 1px solid #d5d5d5;
	margin: 0 2px 0 0;
}

input[type='number'].search {
	height: 16px;
	width: 150px;
	max-width: 150px;
	border: 1px solid #d5d5d5;
	margin: 0 2px 0 0;
}

input[type='date'].search {
	height: 16px;
	width: 150px;
	max-width: 150px;
	border: 1px solid #d5d5d5;
	margin: 0 2px 0 0;
}

select.search {
	width: 150px;
	max-width: 150px;
	border: 1px solid #d5d5d5;
	margin: 0 2px 0 0;
}

#disabled, .disabled, .message input[type='submit'].disabled {
	color: #818181;
	background-color: #d5d5d5;
	cursor: default;
	font: 13px/30px Mulish, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; /* @0124@ A+*/
	height: 40px;
	border: 0;
	margin: 8px 8px 4px 0;
	font-weight:bold;
	text-align:center;
}

#cancel, #cancel-insert-button, .cancel, .message input[type='submit'].cancel {
	color: #fff; /* @0070@ C+ #333 --> #fff*/
	background-color: #303338; /* @0070@ C+ #BBB --> #6E70FE*/
	cursor: pointer;
	font: 14px/30px Mulish, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; /* @0124@ A+*/
	height: 42px;
	border: 1px solid white;
	margin: 8px 8px 4px 0;
	/*font-weight:bold;*/
	text-align:center;
	border-radius: 6px;  /* 添加的圆角 */
}

#cancel:hover, #cancel-insert-button:hover, .cancel:hover, .message input[type='submit'].cancel:hover {
	background-color: rgba(86, 86, 86, 0.86);
	/*color: #000;*/
}

#ok, .ok, .message input[type='submit'].ok {
	color: #fff;
	background-color: transparent; /* @0070@ C+ #009900 --> #6E70FE*/
	cursor: pointer;
	font: 14px/30px Mulish, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; /* @0124@ A+*/
	height: 40px; /* @0071@ C+ 40 --> 42*/
	border: 1px solid white;
	margin: 8px 8px 4px 0;
	/*font-weight:bold;*/
	border-radius: 6px;  /* 添加的圆角 */
	background: transparent;
}

/* @0148@ A+ */
.button-middle {
	text-align: center;
	width: 100%;
	font-size: 16px;
}

.stdButton {
	text-align: center;
	width: 160px;
	height: 40px;
	font-size: 16px;
	background: transparent;
	border: 1px solid #FFFFFF;
	border-radius: 8px;
}

.stdButton:hover {
	border: 1px solid #00EAFF;
	opacity: 0.5;
}

.red-text {
    color: red !important;
}

#ok:hover, #insert-button:hover, .ok:hover, .message input[type='submit'].ok:hover {
	background-color: rgba(86, 86, 86, 0.86); /* @0070@ C+ #f99600 --> #2E86C1*/
	/* @0071@ D- color: #000; */
}

#send, .send, .message input[type='submit'].send {
	color: #fff;
	background-color: #009900;
	cursor: pointer;
	font: 13px/30px Mulish, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; /* @0124@ A+*/
	height: 37px;
	width: auto;
	min-width: 0;
	border: 0;
	margin: 0 0 0 0;
	font-weight:bold;
}

#send:hover, .send:hover, .message input[type='submit'].send:hover {
	background-color: rgba(86, 86, 86, 0.86);
	color: #000;
}

#tool, .tool, .message input[type='submit'].tool {
	background-color: grey;
	color: #fff;
	cursor: pointer;
	font: 13px/30px Mulish, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; /* @0124@ A+*/
	height: auto;
	width: auto;
	min-width: 0;
	border: 0;
	margin: 2px 4px 10px 0;
	font-weight:bold;
}

#tool:hover, .tool:hover, .message input[type='submit'].tool:hover {
	background-color: rgba(86, 86, 86, 0.86);
	color: #000;
}

#delete, .delete, .message input[type='submit'].delete {
	/*color: #fff !important;
	background-color: #6E70FE !important; /* @0 b00000 --> 6E70FE*/
}

#delete:hover, .delete:hover, .message input[type='submit'].delete:hover {
	/*background-color: #7e0505 !important;*/
}

p.help {
	margin:2px;
}

.contact {
	background-color: #f8f8f8;
	padding: 124px 60px;
	text-align: center;
}

.contact p span {
	color: #2c2c2c;
	display: block;
	font-size: 30px;
	line-height: 36px;
	padding: 18px 0;
}

#topper {
	background-color: #fff;
	border-bottom: 1px solid #d8d8d8;
}

#topper p {
	font-size: 12px;
	line-height: 30px;
	padding-left: 10px;
}

#topper a {
	font-size:14px;
	color: rgb(78, 86, 102); /* @0124@ C+ #585858 -->*/
	text-decoration: none;
}

#topper a:hover {
	color: #fff;
	background: grey;
}

#microtopper {
	margin-left: 2px;
	margin-right: 2px;
	
}

#microtopper span {
	color: grey;
	font-size: 10px;
	line-height: 12px;
	padding-right: 2px;
}

#microtopper a {
	font-size:10px;
	color: rgb(78, 86, 102); /* @0124@ C+ #585858 -->*/
}

#admin-topper-banner, #chatlog-topper-banner, #avatar-topper-banner {
	background-color: #303338;
	border-bottom: 1px solid #d8d8d8; 
	/*height: 40px;*/  
	vertical-align:middle; 
}

.admin-topper-banner, .chatlog-topper-banner {
	background-color: #fff;
	border-bottom: 1px solid #d8d8d8; 
	/*height: 40px;*/  
	vertical-align:middle; 
}

#avatar-topper-banner .menu {
	top: 35px;
}

img.admin-banner-pic:hover {
	color: #fff;
	opacity: 0.5;
}

img.admin-banner-pic {
	width:26px; /* @0 32 --> */
	height:26px;
	vertical-align: bottom;
	margin-right: 0px; /* @0 */
}

.toolbar img.admin-banner-pic {
	padding: 2px;
}

img.admin-pic {
	/**
	max-width:24px;
	vertical-align: middle;
	margin: 2px;
	**/
	width: 18px;
	height: 18px;
	margin: 2px;
	vertical-align: middle;
	opacity: inherit;
	padding: 0;
}

.ad-top-banner {
  overflow: hidden;
  background-color: #fff;
  position: fixed;
  width: 100%;
  top: 0;   /*25%*/
}

.ad-top-banner a {
  float: left;
  text-decoration: none;
  text-align: center; 
}

#admin-topper {
	background-color: #fff;
	/* @0082@ D- border-bottom: 1px solid #d8d8d8;  */
}

#admin-topper p {
	font-size: 12px;
	line-height: 30px;
	padding-left: 10px;
}

#admin-topper a {
	font-size:14px;
	color: rgb(78, 86, 102); /* @0124@ C+ #585858 -->*/
	text-decoration: none;
}

#admin-topper a:hover {
	color: #fff;
	background: grey;
}

/*------------------------------ CHAT ------------------------------*/
span.chat {
	font-family:arial;
	font-size:80%;
}

span.chat-1 {
	font-family:arial;
	color:#333;
}

span.chat-user {
	font-family:arial;
	font-size:80%;
	font-weight:bold;
}

img.chat-user, img.botplatformframechat-user {
	max-height:40px;
	max-width:40px;
}

td.chat-user, td.botplatformframechat-user {
	overflow:hidden;
}

td.chat-1 {
	width:100%;
	background-color: #d5d5d5;
}
/* td.botplatformframechat-1, td.botplatformframechatchat-1, td.botplatformframechat-2, td.botplatformframechatchat-2 */
td.chat-2 {
	width:100%;
}

span.chat-2, span.botplatformframechat-2 {
	font-family:arial;
}

span.chat-keyword {
	font-family:arial;
	font-size:80%;
	color:green;
	display:none;
}

span.chat-required {
	font-family:arial;
	font-size:80%;
	color:brown;
	display:none;
}

span.chat-topic {
	font-family:arial;
	font-size:80%;
	color:orange;
	display:none;
}

span.chat-label {
	font-family:arial;
	font-size:80%;
	color:maroon;
}

span.chat-response {
	font-family:arial;
	font-size:80%;
	color:blue;
}

span.chat-repeat {
	font-family:arial;
	font-size:80%;
	color:#000022;
}

span.chat-next {
	font-family:arial;
	font-size:80%;
	color:#008000;
	display:none;
}

span.chat-require-next {
	font-family:arial;
	font-size:80%;
	color:#008000;
	display:none;
}

span.chat-previous {
	font-family:arial;
	font-size:80%;
	color:blue;
	display:none;
}

span.chat-require-previous {
	font-family:arial;
	font-size:80%;
	color:darkblue;
	display:none;
}

span.chat-emote {
	font-family:arial;
	font-size:80%;
	color:fuchsia;
	display:none;
}

span.chat-sentiment {
	font-family:arial;
	font-size:80%;
	color:#ff9900;
	display:none;
}

span.chat-synonym {
	font-family:arial;
	font-size:80%;
	color:#39ac73;
	display:none;
}

span.chat-confidence {
	font-family:arial;
	font-size:80%;
	color:#ff6600;
	display:none;
}

span.chat-action {
	font-family:arial;
	font-size:80%;
	color:olive;
	display:none;
}

span.chat-pose {
	font-family:arial;
	font-size:80%;
	color:gray;
	display:none;
}

span.chat-template {
	font-family:arial;
	font-size:80%;
	color:gray;
	display:none;
}

span.chat-inverse {
	font-family:arial;
	font-size:80%;
	color:#47092E;
}

span.chat-flagged {
	font-family:arial;
	font-size:80%;
	color:red;
}

span.menu, span.botplatformmenu {
	color: white; /* #818181 --> */
	font-weight: 500; /* @0137@ A+ */
	font-size: 12px;
}

div.menu {
	text-align:left;
	top:42px;
	left:2px
}

.media-name-label {
    width: 170px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    color: #818181;
}

.description {
	color: #2B4E72;
	font-size: 16px;
	line-height: 24px;
	margin: 0 0 20px;
}

.response, .botplatformresponse, .botplatformframeresponse {
	font-family:arial;
	color:grey;
	font-size:120%;
	overflow:auto;
	margin:2px
}

.response button {
	margin:1px;
}

/* @0227@ A-Start: */
#chatwait {
	position: relative; /* or absolute */
	display: none;
	margin-left: 5px;
	width: 20px;
	height: 20px;
}
#chatwait-text {
	vertical-align: super;
	position: relative; /* or absolute */
	padding-left: 10px;
	/*left: 11%;*/
	display: none;
	font-style: italic;
}

/* 为tdSecond设置flex布局 */
.td-second {
	display: flex;
	align-items: center; /* 确保元素垂直居中对齐 */
}

.loader {
	border: 2px solid #00EAFF;
	border-radius: 50%;
	border-top: 3px solid lightblue;
	width: 20px;
	height: 20px;
	margin-left: 8px;
	-webkit-animation: spin 0.5s linear infinite;
	animation: spin 0.5s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* A-End. */

/*------------------------------ Users ------------------------------*/
.bronze-user {
	font-weight:bold;
	color:#665D1E;
}
.gold-user {
	font-weight:bold;
	color:#D4AF37;
}
.platinum-user {
	font-weight:bold;
	color:#959492;
}
.diamond-user {
	font-weight:bold;
	color:#6EE0FA;
}
.partner-user {
	font-weight:bold;
	color:#0099CC;
}
.admin-user {
	font-weight:500; /* @0 bold --> */
	color: white; /*rgb(78, 86, 102); /* @0 admin user, 显示特殊颜色 0099CC --> */
}
/*------------------------------ Avatars ------------------------------*/
.avatar, .botplatformframeavatar {
	max-height:400px;
}

.avatar2, .botplatformframeavatar2 {
	max-height:800px;
}

.avatar-video-div, .botplatformframeavatar-video-div { 
	display:none;
	background-repeat: no-repeat;
}

.avatar-video-div-big {
	display:none;
	background-repeat: no-repeat;
}

.avatar-video, .botplatformframeavatar-video {
	background:transparent;
	max-height:600px; /* @0127@ C+ 400 --> */
}

/* @0467@ A+ */
.avatar-video-m, .botplatformframeavatar-video-m {
	background:transparent;
	position: relative;
	top: -5px;
	width: 100%;
}

.avatar-video-big {
	background:transparent;
}

/* @0442@ A+*/
.botplatformframeavatar-image-div {
	max-width: 600px;
	max-height: 600px;
	width: calc(43% - 42px);
	margin: 0 auto;
	display: flex !important;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 20%;
	left: 0;
}

.avatar-canvas-div, .botplatformframeavatar-canvas-div {
	max-width: 600px;
	max-height: 600px;
	width: calc(43% - 42px); /* 精确计算 */
	margin: 0 auto;
	display: flex !important;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: 0;
	left: 0;
}

.avatar-canvas-div-big {
	display:none;
}

/* sdk.js 中定义的canvas元素 */
.avatar-canvas, .botplatformframeavatar-canvas { /* 主要属性在父元素avatar-canvas-div中定义 */
	background:transparent;
	max-height: 600px;
}

/* @0406@ A-Start: */
.avatar-canvas-div-m, .botplatformframeavatar-canvas-div-m {
	min-height:200px;
	min-width:200px;
	display: flex !important;
	justify-content: center;
}

.avatar-canvas-m, .botplatformframeavatar-canvas-m {
	position: fixed;
	top: -5px;
	width: 100%;
}
/* A-End. */

.avatar-canvas-big {
	background:transparent;
}

/*------------------------------ MESSAGES ------------------------------*/
.message-subject {
	color:#2B4E72;
}

.message-subject-new {
	font-weight:bold;
	color:#2B4E72;
}

.message-box {
	/*border-style:solid;
	border-color:grey;
	border-width:1px;*/
}

#browse-user-messages-table {
	border-collapse: collapse !important;
}

.message-message {
	height:40px;
	align:left;
	vertical-align:top;
	padding: 4px;
}

/*------------------------------ ACE ------------------------------*/
.ace_absolute {  
	position: absolute; 
}

.ace_relative {
	position: relative;
}

/*------------------------------ FORUM ------------------------------*/
.forum-topic {
	color:#2B4E72;
}
.forum-featured {
	color: #F58723;
}
.forum-topic-new {
	font-weight:bold;
	color:#2B4E72;
}
.forum-featured-new {
	font-weight:bold;
	color: #F58723;
}
.forum-flagged {
	font-weight:bold;
	color:red;
}
.forum-article, #mainbody .forum-article {
	height:40px;
	align:left;
	vertical-align:top;
	padding: 4px;
}
.forum-summary {
	margin: 4px;
}
#forum-summary {
	margin: 4px;
	position: relative;
	border-width: 0px;
	display: block;
}
.forum-box {
	border-style:solid;
	border-color:grey;
	border-width:1px;
}
.forum-box2 {
	border-style:solid;
	border-color:black;
	border-width:2px;
}

/*------------------------------ ISSUE ------------------------------*/
.issue-title {
	color:#2B4E72;
}
.issue-priority {
	color: #F58723;
}
.issue-title-new {
	font-weight:bold;
	color:#2B4E72;
}
.issue-priority-new {
	font-weight:bold;
	color: #F58723;
}
.issue-flagged {
	font-weight:bold;
	color:red;
}
.issue-article {
	height:40px;
	align:left;
	vertical-align:top;
	padding: 4px;
}
.issue-summary {
	margin: 4px;
}
#issue-summary {
	margin: 4px;
	position: relative;
	border-width: 0px;
	display: block;
}
.issue-box {
	border-style:solid;
	border-color:grey;
	border-width:1px;
}
.issue-box2 {
	border-style:solid;
	border-color:black;
	border-width:2px;
}

/*------------------------------ TABLE / TextArea ------------------------------*/



/*------------------------------ FOOTER ------------------------------*/
#footer {
	background-color: #eee;
	border-top: 1px solid #d8d8d8;
	padding: 30px 0;
	height: 200px;
}

#footer p {
	font-size: 12px;
	padding-left: 10px;
}

#footer h3 {
	color: #2c2c2c;
	font-size: 16px;
	font-weight: normal;
	line-height: 18px;
	margin: 0;
}

.footer-div {
	min-width: 150px;
	margin-left: 10px;
	display: inline-block;
	vertical-align: top;
}

.social {
	width: 30px;
	margin: 0 4px;
}

.device {
	width: 40px;
}

a.lang {
	text-decoration: none;
	visibility: hidden; /* @0335@ A+ */
}
a.lang:hover {
	color: #fff;
	background: grey;
}

#domain {
	color: rgb(78, 86, 102); /* @0124@ C+ #585858 -->*/
	border: 1px solid #d5d5d5;
	max-width: 150px;
}

span.category-thumb {
	font-size:18px;
}

img.browse-thumb {
	width: 214px;
    height: 214px;
    border: 2px solid #FF0075;
    display: block;
	position: absolute; 
	top: -10px; 
	left: -14px; 
	margin: auto;
	cursor:pointer;
}

/* @0253@ A-Start: */
img.browse-thumb-glow { /* 暂时没用，效果不明显 */
    box-shadow: inset 0px 0px 40px #fff;
}

img.browse-thumb-colorful {
	width: 214px;
    height: 214px;
    display: block;
	position: absolute; 
	top: -10px; 
	left: -14px; 
	margin: auto;
	cursor:pointer;
    border: 4px solid transparent;
    background-image: linear-gradient(white, white), radial-gradient(circle at top left, #ff0075, #ff00ff, #0075ff, #00ff75, #75ff00, #ff7500, #ff0075);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

/* A-End. */

/* @0142@ 给img边框添加光束移动效果 */
/* 添加伪元素来创建动态光束效果 */
img.browse-thumb::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border: 2px solid transparent;
    box-shadow: 0 0 0 2px white;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s;
}

/* 当鼠标悬浮时显示光束 */
img.browse-thumb:hover::after {
    opacity: 1;
    animation: borderGlow 4s linear infinite;
}

/* 定义动画 */
@keyframes borderGlow {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(0, 100%); }
    50% { transform: translate(100%, 100%); }
    75% { transform: translate(100%, 0); }
}

/* A-End. */

div.browse-thumb {
	max-width:100px;
}

td.browse-thumb {
	height:100px;width:100px;
}

span.browse-thumb {
	font-size:18px;
	vertical-align: middle;
}

/* @0128@ A-Start: */
.hover-table {
    width: 214px; 
    height: 314px; 
    margin-left: 14px; 
    margin-top: 10px; 
    background:transparent; 
    border-style:solid; 
    border-width:2px;
}

/* A-End. */

/* @0142@ A-Start: */
.tipInfoPanel {
	text-align: left;
	border-radius: 8px;
	border-width: 0px;
	background-color: rgba(68, 68, 68, 0.90);
	display: none; /* 默认不显示 */
	line-height: 1.0;
	border: 1px solid #00EAFF;
}

.hover-table:hover .tipInfoPanel {
	display: block; /* 当鼠标悬浮在 hover-table 上时显示 */
}
/* A-End. */

/* @0144@ A-Start: */
div.name-thumb {
	display: flex;
	/*justify-content: space-between;*/
	align-items: center;
	vertical-align: middle;
	position: relative; /* 添加相对定位 */
	margin-top: -102px;/* @0 A+ -125 --> */
	margin-left: 16px;
	max-width: 190px;
	pointer-events: none; /**/
}

div.name-thumb span.name {
	display: inline-block;
	margin-left: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
	font-size: 16px;
	font-weight: 500;
	pointer-events: auto;
}
/* A-End. */


/* @0063@ A-Start: */
div.creator-thumb {
	display: flex;
	/*justify-content: space-between;*/
	align-items: center;
	vertical-align: middle;
	position: relative;
	margin-top: -2px;/* @0 A+ */
	margin-left: 16px;
	max-width: 190px;
	pointer-events: none;
}

div.creator-thumb span.name {
	display: inline-block;
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
    font-weight: 400;
    /*font-style: italic;*/
    pointer-events: auto;
}

div.creator-thumb img.pic {
	width: 16px;
    height: 16px;
    position: absolute; 
    left: 150px; /* 固定位置 */
    vertical-align: middle;
    pointer-events: auto;
    margin-top: -10px;
}

div.creator-thumb span.number {
	width: 40px;
    height: 16px;
	position: absolute;
    left: 171px; /* 150px + 16px(pic宽度) + 5px(间距) */
    vertical-align: middle;
	font-weight: 400; /**/
	pointer-events: auto;
	font-size: 12px;
	margin-top: -9px;
}


/* A-End. */

img.user-thumb {
	max-height:50px;max-width:50px;cursor:pointer;
}

img.chat-user-thumb {
	height:50px;
}

td.user-thumb {
	max-width:100px;
	overflow:hidden;
	padding-bottom: 5px;
}

/** Buttons **/
.icon, .message input[type='submit'].icon {
	background-repeat: no-repeat;
	background-size: 36px 36px;
	height: 50px;
	width: 50px;
	min-width: 50px;
	border: 0px;
	background-color: transparent;
	cursor: pointer;
	outline: 0;
	margin: 0 0 0 0;
}

.sendicon, .message input[type='submit'].sendicon {
	background-repeat: no-repeat;
	background-size:24px 24px;
	height: 30px; /*input元素的高度，不是background img的高度*/
	width: 30px; /* 32 --> 24*/
	min-width: 32px; /* 32 --> 24*/
	border: 0px;
	background-color: transparent;
	cursor: pointer;
	background-image: url(../images/send.png);
	vertical-align: middle;
	position: absolute; /* 影响下面的right属性 */
	right: calc(12% - 10px);
	margin-bottom: 5px;
	padding: 0;
}

.sendicon:hover, .message input[type='submit'].sendicon:hover {
	opacity: 0.5;
}

/* @0083@ A-Start: */
.speechmode {
	background-repeat: no-repeat;
	background-size:32px 32px;
	height: 24px; /* 32 --> 24*/
	width: 24px;
	min-width: 24px;
	border: 0px;
	background-color: transparent;
	cursor: pointer;
	outline: 0;
	margin: 0 0 0 0;
	vertical-align: middle;
	position: absolute;
	right: calc(10% + 38px);
	margin-bottom: 7px;
}

/* A-End. */

/* @0371@ A-Start: */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.blink {
    animation: blink 2s step-start 0s infinite;
}
/* A-End. */

.clickable {
	cursor: pointer;
}

#help-icon {
	height: 24px;
	width: 24px;
	min-width: 24px;
	cursor: pointer;
}

#help-mini {
	vertical-align: text-bottom;
	height: 16px;
	width: 16px;
	min-width: 16px;
	cursor: pointer;
	margin:2px;
}

#remove-icon, .remove-icon {
	background-image: url(../images/remove3.svg);
}

#wrong-icon {
	background-image: url(../images/wrong.svg);
}


#add-icon {
	background-image: url(../images/plus.svg);
}

#up-icon {
	background-image: url(../images/up.png);
}

#down-icon {
	background-image: url(../images/down.png);
}

#export-icon {
	background-image: url(../images/download.svg);
}

#import-icon, .import-icon {
	background-image: url(../images/upload.png);
}

#importlib-icon {
	background-image: url(../images/import.svg);
}

#edit-icon {
	background-image: url(../images/edit2.svg);
}

#flag-icon {
	background-image: url(../images/flag.svg);
}

#unflag-icon {
	background-image: url(../images/unflag.svg);
}

#save-icon {
	background-image: url(../images/save.svg);
}

#check-icon {
	background-image: url(../images/check.svg);
}

#select-icon {
	background-image: url(../images/select.svg);
}

#pin-icon {
	background-image: url(../images/pin.svg);
}

#unpin-icon {
	background-image: url(../images/unpin.svg);
}

#thumbsup-icon {
	background-image: url(../images/thumbs-up.png);
}
#thumbsdown-icon {
	background-image: url(../images/thumbs-down.png);
}
#star-icon {
	background-image: url(../images/star.png);
}

#inspect-icon {
	background-image: url(../images/inspect.svg);
}

#relationships-icon {
	background-image: url(../images/relationships.svg);
}

img.menubar {
	margin:2px;
	cursor: pointer;
	vertical-align:middle;
}

img.menu, img.botplatformmenu {
	width:24px;
	height:24px;
	margin:2px;
	cursor: pointer;
	vertical-align:middle;
}

img.title {
	width:26px;
	height:26px;
	vertical-align:middle;
}

/* @0142@ A-Start: */
.bottool {
	color: white;
	font-size:12px;
	width: 190px;
	height: 30px;
	margin-left: 20px;
	margin-top: 5px; /* 10 --> */
	margin-bottom: 14px;
	z-index: 10;
	position: relative;
}
/*A-End.*/

img.toolbar, img.botplatformtoolbar {
	width: 26px;
	height: 26px;
	margin: 2px;
	vertical-align: middle;
	opacity: inherit;
	padding: 0;
	z-index: 1;
	position: relative;
}

img.toolbar:hover, img.botplatformtoolbar:hover {
	border-color:#eee;
	opacity: 0.5;
}

/* @0082@ A-Start: */

/* 决定 聊天输入框前面按钮的位置 */
.toolmenu-wrapper {  
	width: 32px;  
	height: 32px;  
	cursor: pointer;  
	border-style: solid;  
	border-width: 1px;  
	border-color: transparent;  
	position: absolute; /* 设置toolmenu-wrapper相对于input-wrapper绝对定位 */  
	right: calc(57% + 10px); /* 定位到 framechat 的左侧 30px 位置 */  
	margin-bottom: 5px;
	flex: 0 0 auto; /* @0498@ A+ */
}

.toolmenu {  
	width: 32px;  
	height: 32px;  
	vertical-align: middle; 
}

/**
.toolmenu {
	width:32px;
	height:32px;
	cursor: pointer;
	vertical-align:middle;
	border-style:solid;
	border-width:1px;
	border-color:transparent;
	position: absolute; 
    right: calc(65% + 20px); 
    top: 45%;
    transform: translateY(-50%);
} 
**/

.toolmenu-td {
	/*padding-right: 100px;*/ /* 添加右边距 */
}

img.toolmenu:hover, img.botplatformtoolmenu:hover {
	border-color:#eee;
	opacity: 0.5;
}
/* A-End. */

/* @0333@ A-Start: */
#categories-container {
    position: relative; /* 确保子元素可以相对于它定位 */
    /* 根据需要调整 */
    width: 100%;
    height: 50px;
}

#show-categories {
    /* 根据需要调整 */
    width: 100%;
    height: 44px;
}

#selected-categories {
    position: absolute;
    top: 50%; /* 设置为容器高度的一半 */
    transform: translateY(-50%); /* 向上移动自身高度的一半 */
    left: 0;
    right: 0;
    /* 确保它不会超出容器宽度 */
    max-width: 100%;
    /* 根据需要其他样式 */
    pointer-events: none;
}

.selected-category {
    display: inline-block;
    margin: 2px;
    margin-left: 10px;
    padding: 2px 5px;
    background-color: transparent;
    border-radius: 5px;
    border: 1px solid #00EAFF;
}

.delete-category {
    cursor: pointer;
    color: red !important;
    pointer-events: auto;
}

/* A-End. */


img.toolbutton {
	width:26px;
	height:26px;
	padding:1px;
	cursor: pointer;
	vertical-align:middle;
	border-style:solid;
	border-width:1px;
	border-color:#fff;
	border: none;
}

img.toolbutton:hover {
	border-color:#eee;
	opacity: 0.5;
}

div.toolbar {
	position:relative;
	padding:2px;
}

div.toolbar a {
	text-decoration: none;
	margin-right: 2px; /* @0 A+ */
}

div.toolbar a:hover {
	opacity: 0.5;
}

/* ##############################  Chat Bubble ############################## */
.botplatformframebubble {
	margin: 4px;
	padding: 8px;
	border: 1px;
	border-style: solid;
	border-color: black;
	border-radius: 10px;
	background-color: white;
	color: rgb(78, 86, 102); /* @0124@ C+ #585858 -->*/
}

.botplatformframebubble:before {
	content: '';
	position: absolute;
	bottom: 0px;
	left: 40px;
	border-width: 20px 0 0 20px;
	border-style: solid;
	border-color: black transparent;
	display: block;
	width: 0;
}

.botplatformframebubble:after {
	content: '';
	position: absolute;
	bottom: 3px;
	left: 42px;
	border-width: 18px 0 0 16px;
	border-style: solid;
	border-color: white transparent;
	display: block;
	width: 0;
}

#select-all-users, #remove-selected-users, #select-all-admins, #select-all-friends, 
#select-all-operators, #remove-selected-admins, #remove-selected-friends, #remove-selected-operators, 
#add-new-admin, #add-new-friend, #add-new-user, #add-new-operator {
	width: 36px;
	height: 36px;
	min-height: 36px;
	margin-top: 4px;
}

#select-all-users:hover, #remove-selected-users:hover, #select-all-admins:hover,
#select-all-friends:hover, #remove-selected-admins:hover, #remove-selected-friends:hover,
#select-all-operators:hover, #remove-selected-operators:hover, #add-new-operator:hover
#add-new-admin:hover, #add-new-friend:hover, #add-new-user:hover {
	cursor: pointer;
	color: #fff;
	opacity: 0.5;
}

.admin-mode {
	display: none;
}

/* ##############################  Table List ############################## */
.table {
	width: 100%;
	margin-top: 40px;
}

.table__search-container,
.table__container,
.table__controls {
	width: inherit;
}

.table__search-container {
	height: 40px;
	line-height: 40px;
}

.table__search-input,
.table__list-container,
ul.table__search-results {
	width: 100%;
	max-width: 390px;
	min-width: 290px;
}

.table__search-input {
	height: 35px;
	background-image: url(../images/search.svg);
	background-size: 15px;
	background-position: 3.2% center;
	background-repeat: no-repeat;
	border-radius: 6px;
	border: none;
	border: 1px solid var(--c-border-gray);
	padding: 0px 15px 0px 40px;
	background-color: #fafafa;
	color: #333;
	outline: none;
	box-shadow: 0 0 2px 4px #fff;
	transition: box-shadow 0.2s, border-color 0.2s;
	vertical-align: middle;
}

.table__search-clear {
	vertical-align: middle;
	width: 35px;
	height: 35px;
	margin-left: -35px;
	border: none;
	padding: 0;
	background-color: transparent;
	outline: none;
	opacity: 0;
	transition: opacity 0.2s;
}

.table__search-input:focus + .table__search-clear,
.table__search-input:hover + .table__search-clear,
.table__search-clear:focus,
.table__search-clear:hover {
	opacity: 1;
}

.table__search-clear:focus::before,
.table__search-clear:hover::before,
.table__search-clear:hover::after,
.table__search-clear:focus::after {
	background-color: #da3d1b;
}

.table__search-clear::before,
.table__search-clear::after {
	content: "";
	display: block;
	margin: 0 auto;
	width: 2px;
	height: 18px;
	transition: background-color 0.2s;
	background-color: var(--c-border-gray);
	transform: rotate(45deg);
}

.table__search-clear::after {
	margin-top: -18px;
	transform: rotate(-45deg);
}

.table__search-input:focus {
	box-shadow: 0 0 2px 4px var(--c-blue-highlight);
	border-color: var(--c-border-blue);
}

.table__controls {
	height: 32px;
	margin: 10px 0 20px 0;
}

input[type='button'].table__select-btn.icon,
input[type='submit'].table__delete-btn.icon {
	width: 32px;
	height: 32px;
	min-width: 32px;
	background-position: center;
	background-size: contain;
	padding: 5px;
	margin-right: 5px;
	transition: transform 0.25s;
}

input[type='button'].table__select-btn.icon:hover,
input[type='button'].table__select-btn.icon:focus,
input[type='submit'].table__delete-btn.icon:hover,
input[type='submit'].table__delete-btn.icon:focus {
	transform: translateY(-3px);
}

input[type='button'].table__select-btn.icon:active,
input[type='submit'].table__delete-btn.icon:active {
	transform: translateY(-3px) scale(1.1);
}

.table__select-btn.icon { -webkit-tap-highlight-color: transparent; }
.table__select-btn.icon::-moz-focus-inner { border: 0; }

.table__list-container,
ul.table__search-results {
	height: 505px;
}

.table__list-container {
	overflow: hidden;
	border: 1px solid var(--c-border-gray);
}

.table__list,
.table__list-container fieldset {
	width: 100%;
	height: 100%;
}

.table__list-container legend {
	padding: 10px 14px;
	margin-bottom: 0;
	font-size: 18px;
	display: flex;
	justify-content: space-between;
}

.table__list-container legend span:last-child {
	font-size: 14px;
}

.table__list {
	overflow-y: auto;
}

.table__list-item {
	width: 100%;
	height: 40px;
	line-height: 40px;
	margin-bottom: 2px;
	background-color: var(--c-light-gray);
	white-space: nowrap;
	transition: background-color 0.3s;
	cursor: pointer;
	user-select: none;
	outline: none;
	overflow: hidden;
}

.table__list-item * {
	pointer-events: none;
}

.table__list-item:hover,
.table__list-item:focus {
	background-color: #fff;
}

.table__item-option:checked + .table__item-label {
	text-decoration: line-through;
	opacity: 0.6;
}

input[type=checkbox].table__item-option {
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	margin-left: 24px;
	vertical-align: middle;
	-webkit-appearance: none;
	   -moz-appearance: none;
			appearance: none;
}

.table__item-option::before {
	content: "";
	position: relative;
	display: block;
	width: 18px;
	height: 18px;
	border: 1px solid var(--c-border-gray);
	border-radius: 2px;
	margin-left: -9px;
	margin-top: -9px;
	transition: background-color 0.2s;
}

.table__item-option::after {
	content: "";
	position: relative;
	display: block;
	width: 6px;
	height: 11px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	margin-left: -3px;
	margin-top: -15px;
	background-color: #ffffff00;
	transform: rotate(0deg) scale(0);
	transition: transform 0.2s cubic-bezier(0, 1.1, 0.7, 1.55);
}

.table__item-option:checked::before {
	background-color: var(--c-border-gray);
}

.table__item-option:checked::after {
	transform: rotate(45deg) scale(1);
}

.table__item-label {
	margin: 0;
	margin-left: 10px;
	transition: opacity 0.25s;
	text-overflow: ellipsis;
	overflow: hidden;
	width: calc(100% - 50px);
	height: 100%;
	float: right;
	padding-right: 10px;
}

.table__item-label span {
	vertical-align: middle;
}

.table__item-label mark {
	background-color: #ffff85;
	padding: 0;
}

.table__item-label span:first-of-type {
	font-weight: normal;
	background-color: #000;
	padding: 1px 5px 2px 5px;
	color: #eee;
	text-transform: lowercase;
	font-variant: small-caps;
	font-size: 14px;
	margin-right: 10px;
}

/* Newsletter Form */
.newsletter-form {
	width: 100%;
	min-width: 200px;
	background-color: #f6f6f6;
	padding: 30px 10px;
}

.newsletter-header {
	margin-bottom: 10px;
}

.newsletter-header h4 {
	font-size: 18px;
	margin-top: 0;
	font-weight: bold;
	margin-bottom: 15px;
	color: #1b1b1b;
}

.newsletter-header p {
	font-size: 14px;
	color: rgb(78, 86, 102); /* @0124@ C+ #585858 -->*/
	margin: 0;
}

.newsletter-header hr {
	background-color: #ebebeb;
	margin: 10px 0;
}

.newsletter-form input[type=text],
.newsletter-form input[type=email] {
	border-radius: 6px;
	height: 40px !important;
	padding: 0 15px;
	margin-top: 5px;
}

.newsletter-form input[type=text]:focus,
.newsletter-form input[type=email]:focus {
	outline-width: thin;
	outline-color: #009900;
}

.newsletter-form input[type=checkbox] {
	position: absolute;
	opacity: 0;
	height: 0;
	width: 0;
}

.newsletter-form .checkmark {
	position: relative;
	top: 3px;
	left: 0px;
	height: 18px;
	width: 18px;
	margin-right: 5px;
	display: inline-block;
	background-color: #ccc;
	transition: all 0.3s;
}

.newsletter-form input[type=checkbox]:focus + .checkmark {
	outline: 1px solid #009900;
}

.newsletter-form input:checked + .checkmark {
	background-color: #009900;
	animation: pop 0.5s;
	animation-direction: alternate;
}

.newsletter-form .checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

.newsletter-form input:checked ~ .checkmark:after {
	display: block;
}

.newsletter-form .checkmark:after {
	left: 6px;
	top: 3px;
	width: 6px;
	height: 10px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

@keyframes pop {
	0% { transform: scale(1); }
	50% { transform: scale(0.9); }
	100% { transform: scale(1); }
}

.newsletter-form .message input[type=submit] {
	border-radius: 6px;
	text-transform: capitalize;
	width: 100%;
}

.newsletter-form label {
	font-weight: normal;
	font-size: 14px;
	cursor: pointer;
	margin: 10px 0;
}

@media only screen and (min-width: 768px) {
	.newsletter-form {
		width: 400px;
	}
}

@media (min-width: 481px) {
	.newsletter-form {
		padding: 30px;
	}
}