[type="file"] {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 0;
}
.upload-main {
	width: 960px;
	height: 240px; max-width: 100%;
	margin: auto;
	outline: 1px solid #d0d0d5;
	background-color: #fbfbfb;
	box-shadow: 0 1px 2px rgba(0,0,0,.1);
	overflow: hidden;
}

.upload-choose {
	padding-top: 100px;
	float: left;
	width: 30%;
	text-align: center;
}
.upload-drag-area {
	margin: 7px 10px 0 0;
	padding: 100px 0;
	border: 1px dashed #d0d0d5;
	color: #999;
	text-indent: 130px;
	font-size: 16px;
	vertical-align: middle;
	background: #fff url(/study/201109/drag.png) no-repeat 50px center;
	transition: border-color .15s;
	overflow: hidden;
}
.upload-drag-area.over {
	border-color: #00a5e0;
}
.upload-operate {
	position: absolute;
	right: 140px; top: 20px;
	left: 20px;
	text-align: center;
}
.upload-operate .ui-button {
	margin: 0 3px;
}

.preview-x {
	width: 960px;
	max-width: 100%;
	margin: 2em auto;
}
.params-set {
	margin-bottom: 1em;
}
.params-set-btn {
	overflow: hidden;
}
.params-panel {
	position: absolute;
	width: 960px;
	max-width: calc(100% - 6px);
	top: 3px;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
	outline: 1px solid rgba(0,0,0,.05);
	font-size: 14px;
	animation: fadeIn .2s;
	z-index: 9;
}
.params-panel-ul {
	padding: 20px 20px 10px;
	margin: 0;
	list-style: none;
	max-height: 290px;
	overflow: auto;
}
.params-panel-li {
	width: 33.333%;
	margin-bottom: 5px;
	float: left;
}
.params-txt {
	display: inline-block;
	line-height: 28px;
	vertical-align: top;
	margin-left: 10px;
}
.icon-a {
	display: inline-block;
	width: 20px; height: 20px;
	color: #666;
}
.icon-a:hover {
	color: #2486ff;
}
a > svg {
	fill: currentColor;
	vertical-align: -4px;
	-ms-pointer-events: none;
	pointer-events: none;
}
.code-textarea {
	height: 100px;
	width: 100%;
	box-sizing: border-box;
}
@media screen and (min-width: 481px) {
	.result-table th:not(:last-child),
	.result-table td:not(:last-child) {
		padding-right: 0;
	}
	.result-table td:first-child svg {
		width: 40px; height: 40px;
	}
}

.sprites-set {
	display: flow-root;
	margin-top: 2em;
	margin-bottom: 10px;
}
@supports not (display: flow-root) {
	.sprites-set {
		overflow: hidden;
	}
}
.sprites-error {
	margin-top: 2em;
	background-color: #f4615c;
	color: #fff;
	text-align: center;
	padding: 10px;
}
.sprites-error::before {
	content: '';
	display: inline-block;
	height: 20px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
	padding-left: 23px;
    margin-left: -5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='%23FFF' d='M116.153 99.999l36.484-36.486a7.369 7.369 0 0 0 0-10.423l-5.212-5.213a7.375 7.375 0 0 0-10.425 0l-36.484 36.485-36.485-36.485a7.374 7.374 0 0 0-10.424 0l-5.211 5.213a7.365 7.365 0 0 0 0 10.423L84.88 99.999l-36.483 36.485a7.369 7.369 0 0 0 0 10.426l5.211 5.213a7.38 7.38 0 0 0 10.424 0l36.485-36.486L137 152.122a7.38 7.38 0 0 0 10.425 0l5.212-5.213a7.372 7.372 0 0 0 0-10.426l-36.484-36.484z'/%3E%3C/svg%3E");
    vertical-align: middle;
}
.sprites-error:empty {
	display: none;
}

.ui-textarea > .sprites-textarea {
	min-height: 200px;
	resize: vertical;
}

.text-popup {
    animation: textPopup 1s;
    color: #01cf97;
    user-select: none;
    white-space: nowrap;
    position: absolute;
    z-index: 99;
}

.ui-lightip {
	left: 50%;
	transform: translateX(-50%);
}

.icon-size-input {
	width: 4ch;
	text-align: center;
}
.icon-size-form {
	text-align: center;
	margin-top: -10px;
	text-indent: -100px;
}

@keyframes textPopup {
    0%, 100% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        transform: translateY(-50px);    
    }
}

@media screen and (max-width: 480px) {
	.upload-drag-area {
		display: none;
	}
	.upload-choose {
		float: none;
		width: auto;
		padding-top: 60px;
	}
	.upload-main {
		height: 165px;
	}
	.ui-table,
	.ui-table thead,
	.ui-table tbody,
	.ui-table tbody td,
	.ui-table th,
	.ui-table tr {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.ui-table th {
		padding-top: 5px; padding-bottom: 5px;
		line-height: 20px;
	}
	.ui-table tr td:first-child {
		text-align: center;
	}
	.result-table td:first-child svg {
		width: 100px; height: 100px;
	}
	.ui-textarea > .sprites-textarea {
		min-height: 300px;
	}
	.params-panel {
		left: 3px;
	}
	.params-panel-ul {
		padding: 10px 8px;
		max-height: 215px;
	}
	.params-panel-li {
		width: 50%;
	}
	.params-txt {
		margin-left: 5px;
	}
	.icon-size-label,
	.m-hidden {
		display: none;
	}
	.icon-size-form {
		text-indent: 0;
	}
}

.scrollbar textarea::-webkit-scrollbar{width:8px;height:8px}
.scrollbar textarea::-webkit-scrollbar-thumb{background-color:#bbb;border-radius:8px}
.scrollbar textarea::-webkit-scrollbar-thumb:hover{background-color:#aaa}
.scrollbar textarea::-webkit-scrollbar-track-piece{background-color:#ddd}

.dn{display:none}.di{display:inline}.db{display:block}.dtc{display:table-cell}.dib{display:inline-block}.lh14{line-height:14px}.lh16{line-height:16px}.lh18{line-height:18px}.lh20{line-height:20px}.lh22{line-height:22px}.lh24{line-height:24px}.lh28{line-height:28px}.m0{margin:0}.ml1{margin-left:1px}.ml2{margin-left:2px}.ml5{margin-left:5px}.ml10{margin-left:10px}.ml15{margin-left:15px}.ml20{margin-left:20px}.ml30{margin-left:30px}.mr1{margin-right:1px}.mr2{margin-right:2px}.mr5{margin-right:5px}.mr10{margin-right:10px}.mr15{margin-right:15px}.mr20{margin-right:20px}.mr30{margin-right:30px}.mt1{margin-top:1px}.mt2{margin-top:2px}.mt5{margin-top:5px}.mt10{margin-top:10px}.mt15{margin-top:15px}.mt20{margin-top:20px}.mt30{margin-top:30px}.mb1{margin-bottom:1px}.mb2{margin-bottom:2px}.mb5{margin-bottom:5px}.mb10{margin-bottom:10px}.mb15{margin-bottom:15px}.mb20{margin-bottom:20px}.mb30{margin-bottom:30px}.p0{padding:0}.p1{padding:1px}.pl1{padding-left:1px}.pt1{padding-top:1px}.pr1{padding-right:1px}.pb1{padding-bottom:1px}.p2{padding:2px}.pl2{padding-left:2px}.pt2{padding-top:2px}.pr2{padding-right:2px}.pb2{padding-bottom:2px}.pl5{padding-left:5px}.p5{padding:5px}.pt5{padding-top:5px}.pr5{padding-right:5px}.pb5{padding-bottom:5px}.p10{padding:10px}.pl10{padding-left:10px}.pt10{padding-top:10px}.pr10{padding-right:10px}.pb10{padding-bottom:10px}.p15{padding:15px}.pl15{padding-left:15px}.pt15{padding-top:15px}.pr15{padding-right:15px}.pb15{padding-bottom:15px}.p20{padding:20px}.pl20{padding-left:20px}.pt20{padding-top:20px}.pr20{padding-right:20px}.pb20{padding-bottom:20px}.p30{padding:30px}.pl30{padding-left:30px}.pt30{padding-top:30px}.pr30{padding-right:30px}.pb30{padding-bottom:30px}.bgwh{background-color:#fff}.wh{color:#fff}.f0{font-size:0}.f12{font-size:12px}.f13{font-size:13px}.f14{font-size:14px}.f16{font-size:16px}.f18{font-size:18px}.f20{font-size:20px}.f24{font-size:24px}.f28{font-size:28px}.fa{font-family:Arial}.fs{font-family:Simsun}.fw{font-family:'Microsoft Yahei'}.n{font-weight:400;font-style:normal}.b{font-weight:700}.i{font-style:italic}.tc{text-align:center}.tr{text-align:right}.tl{text-align:left}.tj{text-align:justify}.tdl{text-decoration:underline}.tdn,.tdn a:hover,.tdn:hover,a.tdl:hover{text-decoration:none}.lt-1{letter-spacing:-1px}.lt0{letter-spacing:0}.lt1{letter-spacing:1px}.nowrap{white-space:nowrap}.bk{word-wrap:break-word}.vm{vertical-align:middle}.vb{vertical-align:bottom}.vt{vertical-align:top}.vn{vertical-align:-5px}.l{float:left}.r{float:right}.cl{clear:both}.rel{position:relative}.abs{position:absolute}.zx1{z-index:1}.zx2{z-index:2}.poi{cursor:pointer}.def{cursor:default}.ovh{overflow:hidden}.ova{overflow:auto}.vh{visibility:hidden}.vv{visibility:visible}.clearfix:after,.fix:after{display:table;content:'';clear:both}.cell{display:table-cell;width:2000px}.ell{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.clip{position:absolute;clip:rect(0 0 0 0);*left:-99em}.auto{margin-left:auto;margin-right:auto}.middle{display:inline-block;width:0;height:100%;vertical-align:middle}.trans{-webkit-transition:all 250ms;transition:all 250ms}.unselect{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.disabled{opacity:.4;filter:alpha(opacity=40);cursor:default;-ms-pointer-events:none;pointer-events:none}
.dark{color:#4c5161}.blue,a.dark:hover{color:#2486ff}a:hover{color:#0057c3}.gray{color:#a2a9b6}.white{color:#fff}.green{color:#01cf97}.orange{color:#f28c48}.red{color:#f4615c}