.old-btn {
	display: inline-block;
}

/*------------------------------ HEADER ------------------------------*/
#header {
	background-color: #303338; /* @0 A+ */
	border-bottom: 1px solid #5b5b5b; /* @0 A+ */
}

#header > div, #footer > div, #topper > div, #admin-topper > div {
	width: 100%;
	/*margin: 4px 4px;*/
	/*padding: 0 20px;*/
}

/** Navigation **/
#navigation {
	line-height: 90px;
}

#navigation li {
	width: 120px;
}

#navigation a {
	line-height: 90px;
}

#navigation2 {
	padding-left:16px;
	padding-right:16px;
}

#navigation3 {
	padding-left:16px;
	padding-right:16px;
}

#mainbody {
	background-color: #303338; /* #fff --> */
	margin-top: -20px; /* @0 A+ */
}

#titlebox {
	min-height: 550px;
	width: 880px;
	padding: 44px 10px;
}

#titlebox > div {
	width: 880px;
}

/*------------------------------ SLIDES ------------------------------*/

#titleboxright {
	width: 465px;
	min-height: 350px;
	float: right;
	margin-left: 20px;
}

#slide {
	width: 465px;
	min-height: 400px;
	background-color:#fff;
}

#slidebar {
	width: 880px;
	padding: 80px 40px;
}

#barslide {
	width: 800px;
	height: 400px;
}

#slide h3, #barslide h3 {
	font-size: 38px;
	line-height: 40px;
	margin-bottom: 16px;
}

#slide p, #barslide p {
	font-weight: bold;
	padding: 10px 0 0 34px;
}

#slide li, #barslide li {
	margin: 12px 4px 4px 32px;
}

#nav-left {
	left:14px;
}

#titlebox h1, #titlebox h2 {
	font-size: 60px;
	line-height: 60px;
}

#titlebox h2 {
	font-size: 30px;
	line-height: 36px;
}

#titlebox p span {
	width: 360px;
	padding: 16px 24px;
}

#business {
	font-size:30px;
}

.editor {
	width:100%;height:500px;max-width:none;
}

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

.feature {
	width:260px;
}

.upgrade {
	width:320px; /*280 --> */
	border-radius: 0px;
	border: 1px solid white;
	padding-top: 10px;
	padding-bottom: 15px;
}

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

.search-div {
	width:224px;
}

.online-user {
	padding:2px;
}

.online-user-label {
	max-width:200px;
}


/*------------------------------ HOVER ------------------------------*/
span.dropt div {
	/*display:none; makes the transition not work... */
	max-width:600px;
	white-space: normal;
	transition:visibility 0s linear 0.3s, opacity 0.3s linear;
}

span.dropt:hover div {
	transition-delay:0.5s;
}

span.dropt-banner div {
	/*display:none; makes the transition not work... */
	max-width:600px;
	white-space: normal;
	transition:visibility 0s linear 0.3s, opacity 0.3s linear;
}

span.dropt-banner:hover div {
	transition-delay:0.5s;
}

#title {
	width:400px;
}

#program {
	width:600px;height:450px;margin:0 0 0 2px;
}

/*------------------------------ CONTENTS ------------------------------*/
/* @0149@ A-Start: */

/* 设置标签样式 */
/* tabs最外面的边框样式 */
.ui-widget-header {
	background: #303338 !important;
	/*去掉整个tabs栏外边的边框 border: 1px solid white !important;*/
}

/* 设置整个 tab 导航条的圆角和边框 */
.ui-tabs .ui-tabs-nav {
	border-radius: 10px 10px 0 0;
	border: none; /*1px solid white;*/
	background: #303338; /* 与 .ui-widget-header 相同的背景色 */
}

/* 单个 tab 项的样式 */
.ui-widget-header .ui-state-default {
    background-color: #484848 !important; /* 背景颜色 */
    color: white; /* 字体颜色 */
    border: none; /* 移除单个 tab 项的边框 */
    width: 120px;
    margin-left: 10px;
    margin-right: 5px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border-radius: 10px 10px 0 0;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	/* padding: 0.5em 2.4em; */
}

.ui-tabs .ui-tabs-nav li {
	border: none;
}

/* 当鼠标悬停在按钮上时的样式 */
.ui-widget-header .ui-state-default:hover {
    background-color: #388E3C; /* 悬停时的背景颜色 */
    /*border-color: #2E7D32; /* 悬停时的边框颜色 */
}

/* 当按钮处于激活状态时的样式 */
.ui-widget-header .ui-state-default.ui-tabs-active.ui-state-active {
    background-color: #686868 !important;
    color: white;
    width: 120px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border: none;
    border-radius: 10px 10px 0 0;
}

/* 去掉每个tab按钮的边框 */
.ui-state-default a, .ui-state-default a:focus, 
.ui-state-active a, .ui-state-active a:focus {
	outline: none;
}


.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	background: transparent !important;
}

/* A-End. */

#contents {
	background-color: #303338; /* #fff --> */
	min-height: 626px;
	max-width: 100%; /* 1200px --> */
	padding: 15px 30px; /*10 40 */
	margin-top: -20px; /* @0204@ A+ */
}

img {
	max-width:100%;
	/*image-rendering: -webkit-optimize-contrast;*/
}

#contents-full {
	min-height: 626px;
	max-width: 1200px; 
	overflow-x: hidden;	
	padding: 15px 30px;
	margin-top: -20px;
}  

#contents2 {
	min-height: 626px;
	/*width: 100%;*/
	/*margin: 4px 4px;*/
	padding: 16px 40px;
}

h1 {
	margin-bottom: 5px;
	/*margin-top: 12px;*/
	margin-top: 35px; /* @0082@ A+ */
	/* margin-left: 120px; @0082@ A+ */

	/* @0091@ A-Start: */
	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: 13px; /*改变h1中文字与 下边框 间距*/
	vertical-align:middle;
	/* A-End. */
}

#contents .browse {
	width: 100%;
	/*margin: 4px 4px;*/ /* @0 D- */
}

/** main **/
.main {
	width: 100%;
}

#about {
	/*background-color: #fff;*/     
	width: 100%;
}

#about2 {
	width: 100%;
	margin: 4px 4px;
}

.section {
	width: 90%;
	/*margin-left: 60px;*/ /* @0 D- 60 --> */
}

.message input[type='text'] {
	font-size: 16px;
	font-weight: 500;
	color: white; /* @0082@ A+ white 一般的输入框，white看不清楚 */
	height: 36px;
	width: 100%;
	max-width: 900px;
	/*max-width: 300px; /* @0072@ 800 --> 300*/
	margin-top: 2px; /* @0 A+ */
	margin-bottom: 30px; /* @0 A+ */
	padding-left: 8px;
}

/* @0139@ A-Start: */
/**
.message input[type='textarea'] {
	font-size: 16px;
	font-weight: 500;
	color: white;
	background-color: #303338;
	height: 40px;
	width: 100%;
	max-width: 360px; 
	margin-top: 5px; 
	margin-bottom: 10px;
}
**/
.message textarea[type='textarea'] { 
    font-size: 16px; 
    font-weight: 500; 
    color: white; 
    background-color: #303338; 
    height: 70px; 
    width: 100%; 
    max-width: 360px;  
    margin-top: 5px;  
    margin-bottom: 10px; 
    border: 1px solid white; /* 如果需要，可以添加其他样式 */
    padding: 5px; /* 如果需要，可以增加内边距 */
    resize: none; /* 如果你不想允许用户调整大小 */
}
/**
.message textarea[type='textarea']:focus { 
	outline: 1px solid white;
}
**/
/* A-End. */

.message input[type='email'] {
	width: 100%;
	max-width: 300px; /* @0072@ 800 --> 300*/
	background-color: transparent;
}

.message input[type='number'] {
	font-size: 14px;
	height: 36px;
	width: 100%;
	max-width: 900px;
	background-color: transparent;
}

.message select {
	font-size: 16px;
	color: #dddddd;
}

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

.message input[type='password'] {
	font-size: 14px;
	height: 36px;
	width: 100%;
	max-width: 300px; /* @0072@ 800 --> 300*/
	padding-left: 8px;
	background-color: transparent;
	border-radius: 8px;
}

.message input[type='date'] {
	font-size: 14px;
	height: 36px;
	width: 100%;
	max-width: 900px;
}

.message textarea {
	font-size: 16px;
	width: 100%;
	max-width: 900px;
	/*max-width: 600px; /* 800 --> */
	margin-top: 2px; /* @0 A+ */
	margin-bottom: 30px; /* @0 A+ */
	max-height: 80px;
	background-color: #303338;
	padding-left: 8px;
	padding-top: 6px;
	resize: vertical; /* 只允许在垂直方向上调整大小 */
	overflow-y: auto; /* @0181@ A+ 确保只在需要时显示垂直滚动条 */
	cursor: text; /* 需要该属性??? */
}

/* @0181@ A-Start: */

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

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

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

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


/* @0098@ A+ */
.message textarea:placeholder {
	font-size: 14px;
	color: #EAECEE;
}

.message input[type='submit'] {
	padding-right:10px;
	padding-left:10px;
	/* @0087@ A-Start: */
	border-radius: 6px;
	background-color: #303338;
	border: 1px solid #00EAFF;
	/* A-End. */
}

/* @0087@ A-Start: */
.message input[type='submit']:hover {
	background-color: rgba(86, 86, 86, 0.86);
}
/* A-End. */

.message input[type='file'] {
	font: 13px/30px Mulish, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; /* @0124@ A+*/
}

/* @0260@ A-Start: */
/* Chrome, Safari, Edge */
#promptTemplate::-webkit-input-placeholder {
    color: #989898;
}

/* Firefox 19+ */
#promptTemplate::-moz-placeholder {
    color: #989898;
    opacity: 1; /* Firefox 低版本对占位符有半透明效果 */
}

/* Internet Explorer 10-11 */
#promptTemplate:-ms-input-placeholder {
    color: #989898;
}

/* 标准：Firefox 51+, Chrome 57+, Safari 10.1+ */
#promptTemplate::placeholder {
    color: #989898;
}
/* A-End. */

/*此样式会导致输入框背景色为绿色，
如果登录出错，则在显示的输入框又为正常的白色，
原因待查*/
/* 目前暂时不使用此样式 */
#login input[type='text'] {
	font-size: 15px; /* @0071@ A+ 13 --> 14*/
	font-family: Mulish, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; /* @0124@ A+*/
	height: 36px; /* @0071@ A+ 33 --> 36*/
	width: 100%;
	max-width: 300px;
	border: 1px solid #D5D8DC;
	margin: 0 0 6px;
	border-radius: 6px; /* @0071@ A+ */
	margin-top: 5px;
	margin-bottom: 30px; /* @0 A+ */
	background-color: #303338; /* 输入框背景颜色 */
    color: white; /* 输入框文本颜色 */
    padding-left: 8px;
    cursor:pointer;    
    caret-color: white; /* @0236@ A+ */
}


#login input[type='password'] {
	font-size: 15px; /* @0071@ A+ 13 --> 14*/
	font-family: Mulish, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; /* @0124@ A+*/
	height: 36px; /* @0071@ A+ 33 --> 36*/
	width: 100%;
	max-width: 300px;
	border: 1px solid #D5D8DC; /* d5d5d5 --> */
	margin: 0 0 6px;
	border-radius: 6px; /* @0071@ A+ */
	margin-top: 5px;
	margin-bottom: 30px; /* @0 A+ */
	background-color: #303338; /* 输入框背景颜色 */
    color: white; /* 输入框文本颜色 */
    padding-left: 8px;
    cursor:pointer;
    caret-color: white; /* @0236@ A+ */
}

/* @0071@ A+ */
#login input[type='text']:focus {
	border: 1px solid #00EAFF;
	outline: none;
}

#login input[type='password']:focus {
	border: 1px solid #00EAFF;
	outline: none;
}

/* 避免当浏览器自动填充数据时，背景改变为其他颜色 */
#login input[type='text']:-webkit-autofill,
#login input[type='text']:-webkit-autofill:hover,
#login input[type='password']:-webkit-autofill,
#login input[type='password']:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0px 1000px #303338 inset !important;
}

/* 修改输入用户名和密码时自动填充的文字的颜色 */
/* 这段内容起到关键作用 */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
	-webkit-text-fill-color: white !important; /* 设置自动填充的文本颜色为白色 */
	-webkit-box-shadow: 0 0 0px 1000px #303338 inset; /* 设置输入框背景颜色 */
	transition: background-color 5000s ease-in-out 0s; /* 平滑过渡效果 */
}

/**
input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: #303338 !important;
    color: white !important; 
}
**/

/**
#login input[type='text']:-webkit-autofill,
#login input[type='text']:-webkit-autofill:hover,
#login input[type='text']:-webkit-autofill:focus,
#login input[type='text']:-moz-placeholder,
#login input[type='text']:-moz-placeholder:hover,
#login input[type='text']:-moz-placeholder:focus {
	background-color: #ffffff !important;
}
**/
/* A-End. */

/* @0074@ A-Start: */
.password-wrapper {
    position: relative;
    display: inline-block;  /* 使容器的宽度与内容匹配 */
}

#passwordInput {
	padding-right: 50px;  /* 为内部的图片腾出空间，此值可能需要根据图片大小进行调整 */
	background-color: transparent;
}

#passwordInput1 {
	padding-right: 50px;  /* 为内部的图片腾出空间，此值可能需要根据图片大小进行调整 */
	background-color: transparent;
}

#passwordInput2 {
	padding-right: 50px;  /* 为内部的图片腾出空间，此值可能需要根据图片大小进行调整 */
	background-color: transparent;
}

#togglePassword {
    position: absolute;
    top: 50%; /* 从顶部开始到元素中心的距离 */
    right: 10px;
    margin-top: -12px;
    transform: translateY(-50%); /* 向上移动元素自身高度的一半以达到垂直居中 */
    cursor: pointer;
    width: 20px;
    height: 20px;
}

#togglePassword1 {
	position: absolute;
	top: 45%;
	right: 10px;
	transform: translateY(-50%);  /* 纵向居中 */
	margin-top: 2px;
}

#togglePassword2 {
	position: absolute;
	top: 45%;
	right: 10px;
	transform: translateY(-50%);  /* 纵向居中 */
	margin-top: 2px;
}

/* A-End. */

/* @0071@ A-Start: */
#userName {
	font-size: 14px; 
	height: 36px; 
	width: 100%;
	max-width: 280px;
	border: 1px solid #d5d5d5;
	margin: 0 0 6px;
	background-color: #00ff00 !important;
}
/* A-End. */

.search input[type='text'] {
	font-size: 14px;
	height: 20px;
}

.search select {
	height: 20px;
}

select.users {
	width: 600px;
}

input[type='text'].users {
	width: 600px;
}

input[type='text'].search {
	font-size: 14px;
	height: 20px;
	width: 150px;
	max-width: 150px;
}

select.search {
	height: 20px;
}

.contact {
	width: 100%;
}

#microtopper {
	padding-left:16px;
}

#admin-topper {
	width: 100%;
	margin-left: 0px;
	/*padding-left: 0px;*/ /* @0082@ C+ 8 --> 0 */
	/*padding-right: 0px;*/
	height: 50px; /* @0082@ A+ */
	background: rgba(81,86,95,0.86); /* @0082@ A+ */
}

/* @0082@ A-Start: */
.dchat-header {
	display: flex;
    align-items: center;
    justify-content: center;
	width: 100%;
	margin-left: 0px;
	height: 50px;
	background: rgba(67,79,87,0.96); /* 0.86 --> */
	z-index: 888;
}
/* A-End. */

/*------------------------------ CHAT ------------------------------*/

td.chat-user, td.botplatformframechat-user {
	max-width:120px;
}

.response, .botplatformframeresponse {
	max-height:60px;
	margin:3px;
}

/*------------------------------ Avatars ------------------------------*/
.avatar, .botplatformframeavatar {
	width:350px;
	max-width: none; /** 100% give 0 width for some reason */
	/*margin-left: 120px;*/ /* @0082@ A+ */
}

.avatar-big {
	max-width:800px;
	height:400px;
}

.avatar2, .botplatformframeavatar2 {
	width:400px;
}

.avatar-video-div, .botplatformframeavatar-video-div {
	min-height:200px;
	min-width:200px;
	background-size:200px auto;
}

.avatar-video-div-big {
	min-height:400px;
	min-width:400px;
	background-size:auto 400px;
}

/* sdk.js中定义的video元素 */
.avatar-video, .botplatformframeavatar-video {
	width:400px; /* @0127@ C+ 200 --> */
	max-height:600px; /* @0127@ A+ */
}

.avatar-video-big {
	max-width:800px;
	height:400px;
}

.avatar-canvas-div-big {
	min-height:400px;
	min-width:400px;
}

.avatar-canvas-big {
	max-width:800px;
	height:400px;
}

/*------------------------------ ACE ------------------------------*/
.ace_absolute {  
	height: 220px; 
	width: 600px; 
}

.ace_relative {
	height: 230px;
	max-width:605px;  
}


/*------------------------------ FORUM ------------------------------*/

.forum-article {
	width:800px;
}

/*------------------------------ MESSAGE ------------------------------*/

.message-message {
	width:800px;
}


/*------------------------------ ISSUE ------------------------------*/

.issue-article {
	width:800px;
}

.ui-dialog {
    min-width:400px;
}

/*------------------------------ TABLE / TextArea ------------------------------*/
textarea.api{
	width: 500px;
	height: 120px;
}


/*------------------------------ FOOTER ------------------------------*/
#footer {
	margin: 0 auto;
	max-width: 1200px;
}

#footer p {
	line-height: 30px;
}

#connect {
	float: right;
}

/** Browse **/
img.category-thumb {
	max-height:73px;max-width:75px;cursor:pointer;
}

div.category-thumb {
	max-width:75px;
}

td.category-thumb {
	height:75px;width:75px;
}

/* @0330@ A+ */
a.category-link {
	text-decoration: none;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	line-height: 30px;
	padding: 0 15px;
	border: 1px solid #FFF;
	border-radius: 5px;
	color: white; 
	background-color: transparent;
}
a.category-link:hover {
	opacity: 0.5;
}

img.menubar {
	width:16px;
	height:16px;
}

.big-icon {
	width:400px;
}
.small-icon {
	width:240px;
	margin-left: 10px;
	border-radius: 20px;
}