.content-tool {}
.content-tool .color-row {
	flex-wrap: wrap;
}
.content-tool .button-color {
	margin: 1em 2px;
}
.content-tool .button-color button {
	border-width: 0;
	border-radius: 3px;
	background: #EEE;
	padding: 8px 12px;
	cursor: pointer;
}
.content-tool .button-color button.active {
	background-color: rgba(253, 126, 20, 0.8); color: #FFF;
}
.content-tool .redame { margin-bottom: 0.5em; color:#FD7E14;}
.content-tool .color-row .color-bg {
	font-size: 1.0rem;
	flex: 1;
	margin: 0 1px 1px 0;
	overflow: hidden;
	border-radius: 0px;
	height: 6em;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
.content-tool .color-row .color-bg .color {
	color: #000;
	font-size: 1.0rem;
	flex: 1;
	border-radius: 0px;
	height: 6em;
	flex-direction: column;
	justify-content: flex-end;display: flex; cursor: pointer;
}
.content-tool .color-row .color-bg .color.white {
	color: #FFF;
}
.content-tool .color-row .color-bg .color p {
	white-space: nowrap; /* 禁止文本换行 */
	overflow: hidden; /* 溢出内容隐藏 */
	text-overflow: ellipsis; /* 超出部分以省略号显示 */ line-height: 1em;
}
.content-tool-right { line-height: 1.5em; font-size: 1.2rem;}
.content-tool-right h2,.content-tool-right h3 { line-height:2em;}
.content-tool-right p { margin-bottom: 0.5em;}
/*弹窗*/
.mask {
	position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 999; display:table;  height:100%;width:100%; background:rgb(0,0,0,0.5);
}
.mask-color .row{
	display: table-cell;
	vertical-align: middle;
}
/* centered columns styles */
.mask-color .row-center {
	text-align:center;
}
.mask-color .col-center {
	/*display:inline-block;*/
	width:500px; margin-left:auto; margin-right:auto;
	text-align:left;
	background-color:#FFF; padding:15px; border-radius:5px; position:relative;
}
.mask-color .col-center .title { font-size:1.6rem; margin-bottom:1.5rem; cursor: move;}
.mask-color .col-center  div.closeIcon {
	height:20px;
	width:20px;
	position:absolute;
	top:10px;
	right:10px;
	cursor:pointer;
	text-align:center;
	font-size:32px!important;
	line-height:20px!important;
	z-index:1; color:#666;transition: transform 0.3s; /* 添加过渡效果 */
}
.mask-color .col-center  div.closeIcon:hover { color:#333;transform: rotate(90deg);}
.mask-color .col-center .btns { text-align:right; margin-top:2rem;}
.mask-color .col-center .btn-exe { padding: 0 1.5em; color: #FFF; cursor: pointer; height: 2.4em; line-height: 2.4em; background-color: #EA1540;; border-radius: 3px; font-size: 1.2rem; box-shadow: 2px 2px 3px #b1bdc9; display: inline-block; text-decoration: none;white-space: nowrap; }

.mask-color .col-center button { border-width:0; padding: 0 1.0em; color: #333; cursor: pointer; height: 32px; line-height: 32px; background-color: #DDD; border-radius: 3px; font-size: 1.2rem;  margin-left:0.5em; display: inline-block; text-decoration: none;white-space: nowrap; }

.mask-color .col-center button:hover {
	background-color: #EEE;
}
.mask-color .col-center  .btn-cancel { background-color:#DDD; color:#333;}
.mask-color .col-center  .btn-ml { margin-left:0.5em;}
.mask-color .color-block { height:120px; cursor: pointer; position: relative;}
.mask-color .color-block::after {
	width: 100%;
	padding: 5px;
	color: rgba(255, 255, 255, 1);
	text-align: center;
	content: "颜色透明时点击试试";
	white-space: pre-wrap; /* 或者使用 'pre' */  
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	visibility: hidden; font-size: 1.0rem;
}
.mask-color .color-block:hover::after {
 	visibility: visible;
 }
.mask-color .color-block.alpha { height:120px; cursor: pointer;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);}

.mask-color .color-block div { width:120px; height:120px; border-radius: 3px;box-shadow: 1px 1px 4px #b1bdc9;}
.mask-color .color-value { padding-left:1em;}
.mask-color .color-value div.color-line { margin-bottom:11px; position: relative;}
.mask-color .color-value div.color-line .color-select { position:absolute; top:-3px;left:12.9em;}
.mask-color .color-value input { height:32px; width:18em; font-size:1.2rem; padding:0 0.5em; border-width:0; background:#EEE;}
.mask-color .colors-copy { height:250px; overflow: auto; padding-right: 0em;}

.mask-color .color-row .color-bg {
	font-size: 1.0rem;
	flex: 1;
	margin:0 1px 1px 0;
	overflow: hidden;
	border-radius: 1px;
	height: 2em;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
.mask-color .color-row .color-bg .color {
	color: #000;
	font-size: 1.0rem;
	flex: 1;
	border-radius: 1px;
	height: 2em;
	flex-direction: column;
	justify-content: flex-end;display: flex; cursor: pointer;
}
.layui-colorpicker { border-width: 0 !important;}
.layui-colorpicker-main { width:300px !important;}
.layui-colorpicker-main-input input.layui-input{font-size: 1.2rem !important;}


/*.mask-color .color-row .color {
	color: #000;
	font-size: 1.0rem;
	flex: 1;
	margin:0 1px 1px 0;
	overflow: hidden;
	border-radius:1px;
	height: 2em;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;display: flex; cursor: pointer;
}*/
.mask-color .color-row .color p { display:none;}