@charset "utf-8";

/* CSS Document */
body,
html {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font: 12px/2 微软雅黑, Verdana, Arial, Helvetica, sans-serif;
	position: relative;
}

p {
	margin: 0;
	padding: 0;
}

ul,
li {
	list-style: none;
}

img {
	border: 0;
}

button,
input,
optgroup,
option,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	outline: 0;
}

blockquote,
body,
button,
dd,
div,
dl,
dt,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.c-b,
.clear {
	clear: both;
}

a {
	text-decoration: none;
	color: #404040;
}

.hide {
	display: none !important;
}

.pointer-none {
	pointer-events: none;
}

.text-center {
	text-align: center;
	justify-content: center;
}

*::-webkit-scrollbar {
	/*滚动条整体样式*/
	width: 4px;
	/*高宽分别对应横竖滚动条的尺寸*/
	height: 4px;
}

*::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
	background: rgba(0, 0, 0, 0.1);
}

*::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.1);
}

.flex-center {
	display: flex;
	justify-content: center;
}

.flex-start {
	display: flex;
	justify-content: start;
}

.flex-between {
	display: flex;
	justify-content: space-between;
}

.flex-around {
	display: flex;
	justify-content: space-around;
}

.flex-wrap {
	display: flex;
	flex-wrap: wrap;
}

.flex-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

/*公用属性*/
.lg-form-flex {
	display: flex;
}

.lg-inline {
	display: inline-block;
	margin-right: 10px;
	position: relative;
}

.lg-inline-100 {
	display: inline-block;
	width: 100%;
}

.break {
	line-height: 38px;
	width: 10px;
	flex-shrink: 0;
}


/*主框架*/
.lg-diy-wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #F9FAFC;
}

/*主体*/
.lg-diy-body {
	display: flex;
	flex: 1;
	width: 100%;
	overflow: auto;
	background: #F9FAFC;
}

.lg-diy-left {
	width: 275px;
	overflow: auto;
	background: #FFFFFF;
	border-right: 1px solid #eee;
}

.lg-diy-center {
	flex: 1;
	justify-content: center;
	overflow: auto;
}

.lg-diy-right {
	width: 300px;
	overflow: auto;
	background: #FFFFFF;
	border-left: 1px solid #eee;
	transition: all ease .2s;
	animation-duration: .2s;
}


/*头部工具栏*/
.lg-diy-head {
	position: relative;
	background: #fff;
	height: 50px;
	line-height: 50px;
	border-bottom: 1px solid #eee;
	display: flex;
	justify-content: space-between;
}

	.lg-diy-head .back,
	.lg-diy-head .lg-diy-nav,
	.lg-diy-head .lg-diy-tools {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: 100%;
	}

	.lg-diy-head .back {
		font-size: 20px;
		font-weight: 600;
	}

		.lg-diy-head .back:before {
			margin: 0 10px;
			font-weight: 100;
		}

.lg-diy-top-nav {
}

	.lg-diy-top-nav li {
		font-size: 20px;
	}

		.lg-diy-top-nav li.act {
			font-weight: bold;
		}

.lg-diy-head .lg-diy-tools {
}

	.lg-diy-head .lg-diy-tools span {
		margin: 0 5px;
	}



/*侧边栏*/
.lg-diy-sidebar {
	width: 55px;
	overflow: auto;
	border-right: 1px solid #eee;
}

.lg-diy-sidebar-nav {
	padding: 15px 3px;
}

	.lg-diy-sidebar-nav li {
		padding: 6px;
		text-align: center;
		margin-bottom: 15px;
		cursor: pointer;
		border-radius: 5px;
	}

		.lg-diy-sidebar-nav li i {
			display: block;
			font-size: 20px;
		}

		.lg-diy-sidebar-nav li span {
			display: block;
			font-size: 14px;
		}

		.lg-diy-sidebar-nav li:hover {
			background: #eee;
		}

		.lg-diy-sidebar-nav li.act {
			color: #1E9FFF;
		}

/*按钮组*/
.lg-btn {
	display: inline-block;
	height: 38px;
	line-height: 38px;
	border: 1px solid transparent;
	padding: 0 18px;
	background-color: #23b365;
	color: #fff;
	white-space: nowrap;
	text-align: center;
	font-size: 14px;
	border-radius: 2px;
	cursor: pointer
}

	.lg-btn:hover {
		opacity: .8;
		color: #fff
	}

	.lg-btn:active {
		opacity: 1;
	}

	.lg-btn + .lg-btn {
		margin-left: 10px
	}

.lg-btn-container {
	font-size: 0
}

	.lg-btn-container .lg-btn {
		margin-right: 10px;
		margin-bottom: 10px
	}

		.lg-btn-container .lg-btn + .lg-btn {
			margin-left: 0
		}

.lg-table .lg-btn-container .lg-btn {
	margin-bottom: 9px
}

.lg-btn-radius {
	border-radius: 100px
}

.lg-btn .lg-icon {
	padding: 0 2px;
	vertical-align: middle\9;
	vertical-align: bottom
}

.lg-btn-primary {
	border-color: #d2d2d2;
	background: 0 0;
	color: #666
}

	.lg-btn-primary:hover {
		border-color: #23b365;
		color: #333
	}

.lg-btn-normal {
	background-color: #1E9FFF
}

.lg-btn-warm {
	background-color: #FFB800
}

.lg-btn-danger {
	background-color: #FF5722
}

.lg-btn-checked {
	background-color: #5FB878
}

.lg-btn-disabled,
.lg-btn-disabled:active,
.lg-btn-disabled:hover {
	border-color: #eee !important;
	background-color: #FBFBFB !important;
	color: #d2d2d2 !important;
	cursor: not-allowed !important;
	opacity: 1
}

.lg-btn-lg {
	height: 44px;
	line-height: 42px;
	padding: 0 25px;
	font-size: 16px
}

.lg-btn-sm {
	height: 30px;
	line-height: 28px;
	padding: 0 10px;
	font-size: 12px
}

.lg-btn-xs {
	height: 22px;
	line-height: 20px;
	padding: 0 5px;
	font-size: 12px
}

	.lg-btn-xs i {
		font-size: 12px !important
	}

.lg-btn-group {
	vertical-align: middle;
	font-size: 0
}

	.lg-btn-group .lg-btn {
		margin-left: 0 !important;
		margin-right: 0 !important;
		border-left: 1px solid rgba(255, 255, 255, .5);
		border-radius: 0
	}

	.lg-btn-group .lg-btn-primary {
		border-left: none
	}

		.lg-btn-group .lg-btn-primary:hover {
			border-color: #d2d2d2;
			color: #23b365
		}

	.lg-btn-group .lg-btn:first-child {
		border-left: none;
		border-radius: 2px 0 0 2px
	}

	.lg-btn-group .lg-btn-primary:first-child {
		border-left: 1px solid #d2d2d2
	}

	.lg-btn-group .lg-btn:last-child {
		border-radius: 0 2px 2px 0
	}

	.lg-btn-group .lg-btn + .lg-btn {
		margin-left: 0
	}

	.lg-btn-group + .lg-btn-group {
		margin-left: 10px
	}

.lg-btn-fluid {
	width: 100%
}

.code-btn {
	display: block;
}

/*左侧操作栏*/
.lg-field-group {
	padding: 15px 20px;
}

	.lg-field-group .title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}

.lg-field-group-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

	.lg-field-group-box .field {
		display: flex;
		align-items: center;
		width: 108px;
		padding: 3px 0;
		margin-top: 12px;
		border: 1px solid #e6eaf0;
		border-radius: 4px;
		color: #494f57;
		font-size: 14px;
		cursor: pointer;
		background: #F9FAFC;
	}

		.lg-field-group-box .field.selected {
			cursor: not-allowed;
		}

		.lg-field-group-box .field span.text {
			width: 80%;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.lg-field-group-box .field span.fa-check {
			visibility: hidden;
		}

		.lg-field-group-box .field.selected span.fa-check {
			visibility: visible;
			width: 10%;
			color: #4caf50;
		}

	.lg-field-group-box .field-block {
		width: 100%;
	}

	.lg-field-group-box .field i {
		padding: 0 10px;
		text-align: center;
	}

	.lg-field-group-box .field:hover {
		color: #000;
		border: 1px solid #ccc;
		background: #f9f9f9;
	}


/*右侧操作栏*/
.lg-diy-right {
}

.lg-menu {
	padding: 10px;
	border-bottom: 1px solid #eee;
	font-size: 16px;
	font-weight:bold;
}

.lg-field-nature {
	padding:15px;
}

/*表单框架部分*/
.lg-form {
	font: 14px/2 Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
}

.lg-form-background {
	width: 100%;
	padding: 30px;
	display: flex;
	justify-content: center;
	background: none;
	transition: all ease .2s;
	overflow: auto;
}

.lg-form-content {
	width: 100%;

}

.lg-form-banner {
	width: 100%;
	min-height: 50px;
	border-radius: 10px 10px 0 0;
	overflow: hidden;
}

	.lg-form-banner img {
		width: 100%;
	}

.lg-form-head {
	background: #fff;
	box-shadow: 0 3px 10px rgba(0 0 0/10%);
	padding: 15px;
	margin-bottom: 15px;
}

.lg-form-head-title {
	margin-bottom: 15px;
}

	.lg-form-head-title span {
		font-size: 18px;
		font-weight: bold;
	}

	.lg-form-head-title input {
		border: 0;
		outline: none;
		font-size: 18px;
		font-weight: bold;
	}

.lg-form-head-intro:hover {
	background: #f9f9f9;
}

.lg-form-head-intro span {
	font-size: 14px;
	color: #999;
}

.lg-form-head-intro textarea {
	border: 0;
	outline: none;
	font-size: 14px;
	color: #999;
	width: 100%;
}

	.lg-form-head-title input:focus,
	.lg-form-head-intro textarea:focus {
		border: 1px solid #d2d2d2;
	}


.lg-form-body {
	background: #fff;
	box-shadow: 0 3px 10px rgba(0 0 0/10%);
	padding: 20px;
}

.lg-form-foot {
	padding: 15px 0;
}

/*表单自动排版*/
.lg-form-wrap-auto {
	display: flex;
	flex-wrap: wrap;
}

/*移动表单*/
.choseClass {
	background: #f9f9f9;
}
	.choseClass.ghost {
		opacity:0.2;
	}

/*表单字段容器*/
.lg-form-box {
	width: 100%;
	padding: 10px;
	position: relative;
	box-sizing: border-box;
}
	.lg-form-box:hover{
		background:#f9f9f9;
	}

	.lg-form-box.act {
		background: #eff3fd;
	}
	/*表单删除*/
	.lg-form-panel {
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: end;
		display:none;
	}

.lg-form-panel-item {
	margin-left: 10px;
	position: relative;
	z-index: 2;
}

.lg-form-panel i {
	cursor: pointer;
	color: #999;
	font-size: 12px;
}

	.lg-form-panel i:before {
		font-size: 18px;
		margin-right: 3px;
	}

	.lg-form-panel i:hover {
		color: #23b365;
	}

.lg-form-box:hover .lg-form-panel {
	display: flex;
}

.lg-form-box-no-render{
	opacity:0.5;
}


/*表单拖动*/
.lg-form-drag {
	position: absolute;
	top: 0;
	left: 0;
	z-index:1;
	width: 100%;
	height: 42px;
	cursor: move;
}

	.lg-form-drag:hover {
		background: none;
	}

/*lg-no-render*/
.lg-no-render {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #f8fdff;
	text-align: center;
	line-height: 40px;
}
.lg-no-render i.fa{
	color:#999;
}


/*表单项*/
.lg-form-item {
	position: relative;
	margin-bottom: 15px;
}

/*表单标题*/
.lg-form-title {
	display: flex;
	align-items: center;
}

.lg-form-title-item {
	position: relative;
	margin-bottom:5px;
}

	.lg-form-title-item span {
		margin-right: 10px;	
	}

		.lg-form-title-item span.cn {
			font-size: 15px;
		}

		.lg-form-title-item span.en {
			color: #999;
		}

	.lg-form-title-item i {
		color: #FF5722;
		margin-right: 5px;
	}

	.lg-form-title-item .lg-tip-icon {
		color: #999;
		cursor: pointer;
		font-size: 16px;
		line-height: 2;
		display: none;
	}

		.lg-form-title-item .lg-tip-icon:hover,
		.lg-form-title-item .lg-tip-icon:active {
			color: #23b365;
		}

/*字段容器*/
.lg-form-control {
	width: 100%;
	position: relative;
}

	.lg-form-control:after {
		display: block;
		content: "";
		clear: both;
	}

/*表单提示*/
.lg-form-tip {
	color: #999;
	position: relative;
	line-height: 2;
}

.lg-form-tip-bubble {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
	width: auto;
	min-width: 200px;
	height: auto;
	line-height: 1.5;
	background: #eefaff;
	padding: 10px;
	box-shadow: 0 0 3px rgba(0 0 0/10%);
}

	.lg-form-tip-bubble:after {
		display: block;
		content: "";
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 10px solid #eefaff;
		position: absolute;
		bottom: -10px;
		left: 0;
	}

/*验证提示*/
.lg-form-ver {
	display: none;
	line-height: 2;
	color: #FF5722;
}

.lg-ver-error .lg-form-ver {
	display: block;
}

.lg-ver-error .lg-form-tip {
	display: none;
}

/*表单样式*/
.lg-input,
.lg-select,
.lg-textarea {
	border-color: #eee;
}

.lg-input,
.lg-select,
.lg-textarea {
	height: 38px;
	line-height: 1.3;
	line-height: 38px\9;
	border-width: 1px;
	border-style: solid;
	background-color: #fff;
	color: rgba(0, 0, 0, .85);
	border-radius: 2px
}

	.lg-input::-webkit-input-placeholder,
	.lg-select::-webkit-input-placeholder,
	.lg-textarea::-webkit-input-placeholder {
		line-height: 1.3;
	}

.lg-input,
.lg-textarea {
	display: block;
	width: 100%;
	padding-left: 10px;
}

	.lg-input:hover,
	.lg-textarea:hover {
		border-color: #eee !important
	}

	.lg-input:focus,
	.lg-textarea:focus {
		border-color: #d2d2d2 !important
	}

.lg-textarea {
	min-height: 100px;
	height: auto;
	line-height: 20px;
	padding: 6px 10px;
	resize: vertical;
}

.lg-form-danger + .lg-form-select .lg-input,
.lg-form-danger:focus,
.lg-ver-error .lg-input,
.lg-ver-error .lg-textarea {
	border-color: #FF5722 !important
}


/*添加表单项*/
.lg-item-tool {
	display: flex;
	align-items: center;
	position: absolute;
	top: 0;
	right: 0;
	height: 36px;
	line-height: 36px;
	padding: 0 6px;
}

	.lg-item-tool i {
		padding: 3px 6px;
		font-size: 18px;
		color: #999;
		border-radius: 2px;
		cursor: pointer;
	}

		.lg-item-tool i:hover {
			background: #f2f2f2;
		}

.addoption {
	width: 100%;
	border: 1px dashed #ccc;
}

	.addoption:before {
		margin: 0 10px 0 0;
	}

.lg-form-option{
	margin-bottom:10px;
}
/*添加表单项结束*/
.lg-form-radio {
	display: flex;
	align-items: center;
	line-height: 28px;
	margin: 6px 6px 0 0;
	padding: 0 10px;
	cursor: pointer;
}

	.lg-form-radio i {
		flex-shrink: 0;
		display: block;
		border: 1px solid #ccc;
		border-radius: 50%;
		box-sizing: border-box;
		width: 20px;
		height: 20px;
		margin-right: 5px;
		position: relative;
	}

		.lg-form-radio i:before {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: #23b365;
			content: "";
			position: absolute;
			top: 4px;
			left: 4px;
			display: none;
		}

	.lg-form-radio span {
		flex-shrink: 0;
	}

	.lg-form-radio.lg-checked i,
	.lg-form-radio:hover i {
		border: 1px solid #23b365;
	}

	.lg-form-radio:hover span {
		color: #23b365;
	}

	.lg-form-radio.lg-checked i:before {
		display: block;
	}

.lg-disabled {
	cursor: not-allowed !important;
}

	.lg-disabled i {
		border: 1px solid #d2d2d2 !important;
	}

	.lg-disabled span {
		color: #d2d2d2 !important;
	}

.lg-relation-input {
	width: 100%;
	margin: 10px 0 0 0;
}

.lg-form-check {
	display: flex;
	align-items: center;
	line-height: 28px;
	margin: 6px 6px 0 0;
	padding: 0 10px;
	cursor: pointer;
}

	.lg-form-check i {
		display: block;
		border: 1px solid #ccc;
		box-sizing: border-box;
		width:18px;
		height: 18px;
		border-radius: 2px;
		margin-right: 5px;
		text-align: center;
		position: relative;
	}

		.lg-form-check i:before {
			content: "";
			width: 10px;
			height: 5px;
			border-left: 1px solid #fff;
			border-bottom: 1px solid #fff;
			transform: rotate(-45deg);
			position: absolute;
			top: 3px;
			left: 3px;
		}

	.lg-form-check span {
		font-size: 14px;
	}

	.lg-form-check.lg-checked i {
		background: #23b365;
		border: 1px solid #23b365;
	}

		.lg-form-check.lg-checked i:before {
			display: block;
		}

	.lg-form-check:hover i {
		border: 1px solid #23b365;
	}

.lg-form-check-box {
	display: flex;
}


.lg-form-switch {
	display: inline-block;
	position: relative;
	line-height: 22px;
	min-width: 45px;
	padding: 0 5px;
	margin: 0 0 0 10px;
	border: 1px solid #d2d2d2;
	border-radius: 20px;
	cursor: pointer;
	background-color: #fff;
	-webkit-transition: .1s linear;
	transition: .1s linear
}

	.lg-form-switch i {
		position: absolute;
		left: 5px;
		top: 3px;
		width: 16px;
		height: 16px;
		border-radius: 20px;
		background-color: #d2d2d2;
		-webkit-transition: .1s linear;
		transition: .1s linear
	}

	.lg-form-switch span {
		position: relative;
		top: 0;
		width: 25px;
		margin-left: 21px;
		padding: 0 !important;
		text-align: center !important;
		color: #999 !important;
		font-style: normal !important;
		font-size: 12px
	}

.lg-form-onswitch {
	border-color: #23b365;
	background-color: #23b365;
}

	.lg-form-onswitch i {
		left: 100%;
		margin-left: -21px;
		background-color: #fff
	}

	.lg-form-onswitch span {
		margin-left: 0px;
		margin-right: 21px;
		color: #fff !important
	}

.lg-form-select {
	position: relative;
	width: 100%;
}

.lg-select-title {
	position: relative;
}

	.lg-select-title .lg-input {
		padding-right: 30px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.lg-select-title label {
		position: absolute;
		top: 5px;
		right: 5px;
		display: block;
		width: 26px;
		height: 26px;
		text-align: center;
		line-height: 26px;
		color: #999;
		cursor: pointer;
	}

.lg-select-list {
	min-width: 100%;
	background: #fff;
	box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
	border-radius: 2px;
	border: 1px solid #eee;
	margin: 1px 0;
	padding: 5px 0;
	max-height: 200px;
	overflow: auto;
}

	.lg-select-list .option {
		display: flex;
		align-items: center;
		min-height: 36px;
		line-height: 1.5;
		padding: 9px 10px;
		margin: 1px 0;
		border-radius: 2px;
		cursor: pointer;
		white-space: nowrap;
	}

		.lg-select-list .option:hover {
			background: #f9f9f9;
		}

		.lg-select-list .option.selected {
			background: #23b365;
			color: #fff;
		}

.lg-multipleselect-list .option.selected {
	background: none;
	color: #23b365;
}

	.lg-multipleselect-list .option.selected .lg-form-check i {
		background: #23b365;
		border: 1px solid #23b365;
	}

.lg-like-input {
	display: flex;
	align-items: center;
}

	.lg-like-input span {
		margin-right: 10px;
		background: #f2f2f2;
		padding: 3px 6px;
		border-radius: 2px;
	}

.lg-select-list-position {
	min-width: 100%;
	position: absolute;
	top: 40px;
	left: 0;
	z-index: 4;
	animation: lg-select-upbit 0.3s forwards;
}


@keyframes lg-select-upbit {
	from {
		margin-top: 10px;
		opacity: 0;
	}

	to {
		margin-top: 0;
		opacity: 1;
	}
}

.lg-select-list .option .lg-form-check {
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	width: 100%;
	margin: 0;
}

.lg-dress-select {
	background: #fff;
	box-shadow: 0 3px 6px rgba(0 0 0/18%);
	pointer-events: auto;
	display: inline-flex;
	flex-direction: column;
	border: 1px solid #eee;
	border-radius: 2px;
}

.lg-dress-btn {
	display: flex;
	justify-content: space-between;
}

	.lg-dress-btn span {
		color: #737373;
		padding: 5px 10px;
		margin: 3px 5px;
		border-radius: 2px;
		cursor: pointer;
	}

.lg-dress-list {
	display: flex;
	flex-direction: row;
	border-top: 1px solid #eee;
}

.lg-dress-depth {
	flex: 1;
}

.lg-dress-list ul {
	height: 160px;
	overflow: auto;
	overflow-x: hidden;
}

	.lg-dress-list ul li {
		min-width: 111px;
	}

.lg-dress-depth:nth-child(2),
.lg-dress-depth:nth-child(3) {
	border-left: 1px solid #eee;
}

.lg-dress-select ul li {
	font-size: 14px;
	padding: 5px 24px 5px 8px;
	overflow: hidden;
	line-height: 22px;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: pointer;
	transition: all .3s;
	position: relative;
}

	.lg-dress-select ul li:hover {
		background: #f2f2f2;
	}

	.lg-dress-select ul li.selected {
		background: #fff9f0;
	}

	.lg-dress-select ul li span {
	}

		.lg-dress-select ul li span.fa {
			position: absolute;
			right: 8px;
			color: rgba(0, 0, 0, .45);
			font-size: 10px;
			line-height: 22px;
		}

.lg-dress-selectul li.act span.txt {
	font-weight: bold;
}

.lg-dress-select .lg-dress-depth:nth-child(3) ul li span.fa {
	display: none;
}


.lg-input[type=range] {
	margin: 10px 0;
	padding-left: 0;
	height: 6px;
	/*横条的高度*/
	outline: none;
	-webkit-appearance: none;
	/*清除系统默认样式*/
	width: 100%;
	background: -webkit-linear-gradient(#23b365, #23b365) no-repeat, #ddd;
	background-size: 0% 100%;
	/*设置左右宽度比例*/
}

	/*拖动块的样式*/
	.lg-input[type=range]::-webkit-slider-thumb {
		-webkit-appearance: none;
		/*清除系统默认样式*/
		height: 16px;
		/*拖动块高度*/
		width: 16px;
		/*拖动块宽度*/
		background: #fff;
		/*拖动块背景*/
		border-radius: 50%;
		/*外观设置为圆形*/
		border: solid 1px #ddd;
		/*设置边框*/
	}

.lg-range-value {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	height: 16px;
	width: calc(100% - 25px);
	margin: 0 auto;
}

	.lg-range-value p {
		display: none;
		width: 50px;
		text-align: center;
	}

	.lg-range-value .lg-range-value-text {
		display: block;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -25px;
	}

.lg-upload {
}

.lg-file-btn {
	border: 1px dashed #eee;
	display: flex;
	height: 38px;
	align-items: center;
	border-radius: 2px;
	margin-bottom: 10px;
	background: #fff;
	cursor: pointer;
}

	.lg-file-btn .btn-file {
		width: 80px;
		text-align: center;
		line-height: 38px;
		font-size: 14px;
		cursor: pointer;
		color: #999;
	}

		.lg-file-btn .btn-file:before {
			margin-right: 10px;
		}

	.lg-file-btn:hover .btn-file {
		color: #23b365;
	}

.lg-file-item {
	margin-bottom: 10px;
}

.lg-file-item-control {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px dashed #eee;
	height: 38px;
	padding: 0 10px;
	background: #fff;
	position: relative;
}

.lg-file-item-text {
	display:flex;
	width:90%;
	align-items:center;
	color: #737373;
}

	.lg-file-item-text .file-icon {
		margin-right: 10px;
	}

	.lg-file-item-text .file-name {
		margin-right: 10px;
		cursor: pointer;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

		.lg-file-item-text .file-name:hover {
			color: #23b365;
		}

.lg-file-item-tool {
	flex-shrink:0;
	width:10%;
	display:flex;
	justify-content:end;
}

	.lg-file-item-tool .file-del {
		cursor: pointer;
		text-align: center;
	}

		.lg-file-item-tool .file-del:hover {
			color: #23b365;
		}

.lg-file-item progress[value] {
	width: 100%;
	height: 2px;
	padding: 0;
	margin: 0;
	border-radius: 0;
	background: gray;
	position: absolute;
	bottom: 0;
	left: 0;
}

.lg-file-item progress::-webkit-progress-bar {
	background-color: #eee;
}

.lg-file-item progress::-webkit-progress-value {
	background: #23b365;
}
.file-state.fa-check {
	color: #23b365;
}

.lg-file-item.lg-file-fail progress::-webkit-progress-value {
	background: #FF5722;
}

.lg-file-item.lg-file-fail .lg-form-tip{
	color:#FF5722;
}
.file-state.fa-close {
	color: #FF5722;
}

/*照片上传*/
.lg-image-upload {
	display: flex;
	flex-wrap: wrap;
}

.lg-image-item {
	width: 145px;
	height: 180px;
	padding: 5px;
	border: 1px solid #eee;
	margin: 7px;
	overflow: hidden;
	position: relative;
}
.lg-form-image-alone .lg-image-item{
	margin:7px 0
}


.lg-image-item .img {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

	.lg-image-item img {
		height: 100%;
		width: auto;
	}

	.lg-image-item .tools {
		position: absolute;
		top: 5px;
		left: 5px;
		width: calc(100% - 10px);
		height: calc(100% - 10px);
		background: rgba(0 0 0/50%);
		display: none;
		align-items: center;
		justify-content: center;
	}

		.lg-image-item .tools .del {
			position: absolute;
			top: 5px;
			right: 5px;
			font-size: 20px;
			color: #fff;
			cursor: pointer;
			opacity: 0.8;
		}

			.lg-image-item .tools .del:hover,
			.lg-image-item .tools .del:active {
				opacity: 1;
			}

		.lg-image-item .tools .rep {
			border: 1px solid #fff;
			color: #fff;
			padding: 3px 6px;
			border-radius: 5px;
			cursor: pointer;
		}

			.lg-image-item .tools .rep:hover,
			.lg-image-item .tools .rep:active {
				background: rgba(255 255 255/10%);
			}

	.lg-image-item:hover .tools {
		display: flex;
	}

.lg-file-image-btn {
	border: 1px dashed #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

	.lg-file-image-btn:hover {
		background: #f9f9f9;
	}

	.lg-file-image-btn span.fa {
		color: #ccc;
		text-align: center;
		font-size: 14px;
		line-height: 1.5;
	}

		.lg-file-image-btn span.fa:before {
			display: block;
			margin-bottom: 10px;
			font-size: 20px;
		}

.lg-form-image-alone .lg-image-item {
	padding: 0;
}

	.lg-form-image-alone .lg-image-item .img {
		position: absolute;
		top: 0;
		left: 0;
	}

.lg-form-photo {
	width: 145px;
	height: 180px;
}

.lg-form-backgound {
	width: 192px;
	height: 380px;
}

.lg-form-intro {
}

.lg-form-intro-tips {
	border-left: 5px solid #23b365;
	background: #f5fdf5;
	padding: 10px;
}

	.lg-form-intro-tips p {
		line-height: 1.5;
	}

.lg-form-switch-check {
	padding: 0;
	margin: 0;
}

.lg-section {
	border-bottom: 1px solid #eee;
	margin-left:-10px;
	margin-right:-10px;
}

.lg-section-title {
	padding: 10px;
}

	.lg-section-title span {
		display: inline-block;
		margin-right: 10px;
	}

		.lg-section-title span.cn {
			font-size: 20px;
			font-weight: bold;
		}

		.lg-section-title span.en {
			color: #999;
			font-size: 16px;
		}


.lg-form-color {
	display: inline-block;
	width: auto;
}

input[type="color"] {
	border: 0;
	padding: 0;
	margin: 0;
	outline: none;
	background: none;
	width: 30px;
	height: 32px;
}

/*标签组*/
.lg-tag-group {
	display: flex;
	flex-wrap: wrap;
}

	.lg-tag-group .lg-tag-item {
		border: 1px dashed #ccc;
		margin-top: 6px;
		margin-right: 6px;
		padding: 0 6px;
		font-size: 14px;
		display: flex;
		align-items: center;
	}

		.lg-tag-group .lg-tag-item span {
		}

			.lg-tag-group .lg-tag-item span.fa {
				margin-left: 5px;
				cursor: pointer;
			}

				.lg-tag-group .lg-tag-item span.fa:hover {
					color: #23b365;
				}

	.lg-tag-group .lg-addTag {
		cursor: pointer;
		border: 0;
		border-radius: 3px;
		background: #23b365;
		color: #fff;
	}

		.lg-tag-group .lg-addTag span.fa {
			margin-right: 5px;
		}

	.lg-tag-group .lg-tag-item.lg-addTag:hover {
		opacity: 0.8;
	}

	.lg-tag-group .lg-tag-item.lg-addTag span.fa:hover {
		color: #fff;
	}


/*field*/
.lg-popup-title {
	line-height: 40px;
	font-size: 15px;
	font-weight: 600;
}

.lg-field {
	border: 1px solid #eee;
	border-bottom: 0;
	margin-bottom: 15px;
}

	.lg-field legend {
		margin-left: 5px;
		background: #fff;
		padding: 0 5px;
		font-size: 16px;
	}

	.lg-field .lg-form-item {
		border-bottom: 1px solid #eee;
		border-radius: 0;
		margin-bottom: 0;
		padding: 6px 10px;
	}

	.lg-field .lg-form-title {
		font-weight: normal;
		font-size: 14px;
	}

.lg-field-inline {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

	.lg-field-inline .lg-form-control {
		width: auto;
	}

/*表单表格*/
.lg-form-table-title {
	font-size: 16px;
	margin-bottom: 15px;
	padding-left: 10px;
	border-left: 4px solid#23b365;
}

.lg-form-table {
	width: 100%;
	overflow-x: auto;
}

	.lg-form-table table {
		min-width: 100%;
		border: 1px solid #eee;
	}

	.lg-form-table th {
		background: #f2f2f2;
	}

	.lg-form-table td {
		padding: 3px 6px;
		border: 1px solid #eee;
		font-size: 12px;
		white-space: nowrap;
	}


/*表单标识图标*/
.lg-form-mark .lg-input {
	padding-left: 45px;
}

.lg-form-mark-icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 36px;
	height: 36px;
	color: #999;
	text-align: center;
	line-height: 36px;
	border-right: 1px solid #eee;
}

/*ul渲染*/
.lg-form-extra-ul {
	display: flex;
	width: 100%;
}

.lg-form-extra-ul-wrap {
	flex-wrap: wrap;
}

.lg-form-extra-ul li {
	margin-bottom: 15px;
	flex: 1;
	font-size: 14px;
	line-height: 34px;
	text-align: center;
	border: 1px solid #ccc;
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
	margin-left: -1px;
}

.lg-form-extra-ul-wrap li {
	flex: unset;
	width: 33.33%;
}

.lg-form-extra-ul li.checked {
	background: #23b365;
	border: 1px solid #23b365;
	color: #fff;
}

/*表单布局---左右*/
.lg-layout {
}

.lg-layout-row {
}

	.lg-layout-row .lg-form-box {
	}

	.lg-layout-row .lg-form-item {
	}
.lg-layout-row-auto .lg-form-item{
	margin-bottom:0;
}
.lg-layout-row .lg-form-item .lg-form-block {
	display: flex;
}

		.lg-layout-row .lg-form-item .lg-form-title {
			width: 120px;
			height: 38px;
			flex-shrink: 0;
			justify-content: end;
			align-items: center;
		}
.lg-layout-row-auto .lg-form-item .lg-form-title{
	width:auto;
	max-width:120px;
}

.lg-layout-row .lg-form-item .lg-form-title .lg-form-title-item {
	display: flex;
}

			.lg-layout-row .lg-form-item .lg-form-title span {
				display: block;
			}

				.lg-layout-row .lg-form-item .lg-form-title span.cn {
					max-width: 70px;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.lg-layout-row .lg-form-item .lg-form-title span.en {
					display: none;
				}

			.lg-layout-row .lg-form-item .lg-form-title i {
				display: block;
			}


	.lg-layout-row .lg-form-ver,
	.lg-layout-row .lg-form-tip {
		margin-left: 120px;
	}

	.lg-layout-row .lg-form-switch {
		margin-top: 6px;
		margin-right: 10px;
	}

	.lg-layout-row .lg-upload {
		width: 100%;
	}

	.lg-layout-row .lg-form-color {
		border: 1px solid #eee;
		height: 38px;
		padding: 0 10px;
		display: flex;
		align-items: center;
	}


/*框形表单*/
.lg-layout-row-pane {
}

	.lg-layout-row-pane .lg-form-item .lg-form-title {
		border: 1px solid #eee;
		border-right: 0;
		background: #F9F9F9;
	}

	.lg-layout-row-pane .lg-form-item .lg-form-pane-border {
		border: 1px solid #eee;
	}

	/*框形表单特殊单项*/
	.lg-layout-row-pane .lg-form-item.pane .lg-form-ver,
	.lg-layout-row-pane .lg-form-item.pane .lg-form-tip {
		margin-left: 0px;
	}

	.lg-layout-row-pane .lg-form-item.pane .lg-form-block {
		display: flex;
		flex-direction: column;
	}

	.lg-layout-row-pane .lg-form-item.pane .lg-form-title {
		width: 100%;
		border: 1px solid #eee;
		border-bottom: 0;
		justify-content: start;
		padding-left: 16px;
	}

		.lg-layout-row-pane .lg-form-item.pane .lg-form-title span.cn {
			max-width: unset;
		}

	.lg-layout-row-pane .lg-form-item .lg-form-check-box {
		border: 1px solid #eee;
		min-height: 38px;
	}

	.lg-layout-row-pane .lg-form-radio, .lg-layout-row-pane .lg-form-check {
		margin: 0 6px 0 0;
	}

	.lg-layout-row-pane .lg-form-item.pane .lg-form-check-box {
		border: 1px solid #eee;
		padding: 10px;
	}

	.lg-layout-row-pane .lg-form-item.pane .lg-relation-input {
		margin-left: 0;
	}

	.lg-layout-row-pane .lg-form-item.pane .lg-upload,
	.lg-layout-row-pane .lg-form-item.pane .lg-tag-group {
		border: 1px solid #eee;
		padding: 10px;
	}

	.lg-layout-row-pane .lg-form-item.pane .lg-form-range {
		padding: 20px;
	}


/*单项表单布局*/
.lg-form-layout {
}

.lg-form-layout-row {
	display: flex;
	align-items: center;
}

	.lg-form-layout-row .lg-form-title {
		flex-shrink: 0;
	}

	.lg-form-layout-row .lg-form-control {
		width: auto;
		max-width: 120px;
	}

@media screen and (max-width:768px) {
	.lg-diy-head {
		display: none;
	}

	.lg-diy-sidebar {
		display: none;
	}

	.lg-diy-left {
		display: none;
	}

	.lg-diy-right {
		display: none;
	}

	.lg-form-background {
		padding: 10px;
	}

	.lg-form-flex {
		flex-wrap: wrap;
	}

		.lg-form-flex .lg-inline {
			margin-bottom: 10px;
			margin-right: 0;
			width: 100%;
			text-align: center;
		}

	.break {
		line-height: 1;
	}
}


@media screen and (max-width:480px) {
	.lg-dress-select {
		width: 100%;
		min-height: 180px;
		position: fixed;
		bottom: 0;
		left: 0;
		box-shadow: 0 0 50px rgba(0 0 0/10%);
	}

	.lg-dress-btn {
		font-size: 16px;
	}

	.lg-dress-list {
		background: #f9f9f9;
	}

		.lg-dress-list ul {
			min-width: none;
		}

			.lg-dress-list ul li {
				min-width: 0;
			}

	.lg-dress-depth {
		width: 25%
	}

		.lg-dress-depth.act {
			width: 50%;
		}

	.lg-image-upload {
	}

		.lg-image-upload .lg-image-item {
			width: 87px;
			height: 108px;
			padding: 5px;
		}

			.lg-image-upload .lg-image-item .tools {
				display: flex;
			}

	.lg-image-item .tools .rep {
		padding: 3px;
		line-height: 1;
		font-size: 12px;
	}

	.lg-file-image-btn span.fa {
		font-size: 12px;
	}
}

.lg-form[skin='lg-form-theme-inline'] .lg-form-block {
	display:flex;
}
	.lg-form[skin='lg-form-theme-inline'] .lg-form-block .lg-form-title {
		text-wrap: nowrap;
	}
.lg-form[skin='lg-form-theme-inline'] .lg-input, .lg-form[skin='lg-form-theme-inline'] .lg-select, .lg-form[skin='lg-form-theme-inline'] .lg-textarea{
	min-width:none
}