/* icon */
#toplevel_page_design-addlisting-tool .dashicons-before{
    line-height: 34px;
}
#toplevel_page_design-addlisting-tool .dashicons-before:before {
    content: "";
    background-image: url(img/design-addlisting_icon.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    vertical-align: middle;
}

#wiloke-add-listing-fields {
	margin: 30px 20px 30px 10px;
	padding: 15px 30px 30px 30px;
	background-color: #f8f8f8;
	border: 1px solid #eee;
}

@media(max-width: 767px) {
	#wiloke-add-listing-fields {
		margin: 20px 0;
		padding: 15px;
		max-width: 100%;
	}
}

#wiloke-add-listing-fields .ui.tab.segment {
	padding: 20px 30px 20px 30px;
	background-color: #f9f9f9;
	border-color: #ddd;
}
#wiloke-add-listing-fields .ui.tabular.menu .active.item {
	background-color: #f9f9f9;
	border-color: #ddd;
}
.wiloke-add-listing-fields__title {
	padding-bottom: 15px;
	margin: 0 0 30px 0;
	font-size: 20px;
	color: #777;
	border-bottom: 1px solid #e4e4e4;
}

/*drag*/
.drag__btn-wrap:before,
.drag__btn-wrap:after,
.dragArea:before,
.dragArea:after,
.drag:before,
.drag:after {
	content: "";
	display: table;
}
.drag__btn-wrap:after,
.dragArea:after,
.drag:after {
	clear: both;
}
.drag__col {
	width: 50%;
}
@media(max-width: 767px) {
	.drag__col {
		width: 100%;
	}
}
.drag__title {
	font-size: 20px;
	font-weight: normal;
	margin-bottom: 15px;
}
.left {
	float: left;
}
.right {
	float: right;
}
.dragArea {
	min-height: 30px;
	padding: 12px 0;
}
.dragArea.emptied:before,
.dragArea.empty:before {
	content: "";
	display: block;
	min-height: 36px;
	padding: 10px 15px;
	margin-bottom: 15px;
	border: 2px dashed #ddd;
}
.dragArea__block {
	margin-bottom: 10px;
	width: 100%;
	border: 2px dashed transparent;
}

.drag__avai .dragArea__block {
	float: left;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 12px;
	display: inline-block;
	max-width: 320px;
	width: 100%;
}
.drag__avai .dragArea__block .dragArea__form-title--text { 
	max-width: calc(100% - 20px);
}
.dragArea__form-title {
	position: relative;
	padding: 14px 20px 14px 35px;
	border-bottom: 1px solid #eee;
	background-color: #fefefe;
	font-size: 14px;
	font-weight: bold;
}
.drag__avai .dragArea__form-title {
	padding: 12px 20px 12px 35px;
}
.dragArea__block.sortable-chosen.sortable-ghost {
	border-color: #bbdefb;
}
.dragArea__block.sortable-chosen.sortable-ghost .dragArea__form-title {
	background-color: #fff;
}
.dragArea__form-title small {
	font-size: inherit;
	font-weight: normal;
}
.dragArea__form-title--icon {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 50px;
	display: block;
	color: #ccc;
	cursor: move;
}

.dragArea__form-title--icon i {
	float: left;
	margin-top: 17px;
	margin-left: 15px;
}

.required {
	color: red;
}

.dragArea__form-title--text {
	max-width: 100%;
	display: inline-block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: -3px;
}
.dragArea__form-title--remove {
	float: right;
	cursor: pointer;
}
.dragArea__form-title--remove:hover i {
	color: red;
}

.dragArea__item-icon i {
	color: #ccc;
}
.dragArea__form.ui.segment {
	padding: 0px;
	font-size: 14px;
	border-radius: 0;
	border: none;
	box-shadow: 0px 0px 20px rgba(0,0,0,.1);
	transition: all .3s ease;
}
.dragArea__block:hover .dragArea__form.ui.segment { 
	box-shadow: 0px 0px 30px rgba(0,0,0,.14);
}
.dragArea__form-content {
	padding: 10px 20px;
}
.dragArea__form-content.hidden {
    display: none;
}
.dragArea__form.ui.form .field {
	margin-bottom: 15px;
}

.ui.form .field:last-child, .ui.form .fields:last-child .field {
	margin-bottom: 15px !important;
}

/*settings*/
.dragArea__form.ui.form .field > label.settings__heading {
	padding-top: 0;
	margin-bottom: 0px;
}
.settings__desc {
	color: #999;
	margin-bottom: 7px;
}

/*dragArea__item*/
.dragArea__item {
	border: 2px dashed transparent;
	display: inline-block;
	max-width: 320px;
	width: 100%;
	margin-right: 10px;
	padding: 15px 12px 15px 28px;
	margin-bottom: 10px;
	position: relative;
	font-size: 14px;
	line-height: 14px;
	font-weight: bold;
	background-color: #fff;
	box-shadow: 0px 0px 7px rgba(0,0,0,.09);
	cursor: move !important;
	transition: all .3s ease;
}
.dragArea__item:hover {
	box-shadow: 0px 0px 15px rgba(0,0,0,.12);
	transform: translateY(1px);
}
.dragArea__item.sortable-chosen.sortable-ghost {
	border-color: #bbdefb;
}
.drag__used .dragArea__item {
	width: 100%;
	max-width: 100%;
}
.drag__used .dragArea__item .dragArea__item-text {
	max-width: 100%;
}
.dragArea__item small {
	font-size: inherit;
	font-weight: normal;
}
.dragArea__item-icon {
	transition: all ease .2s;
	position: absolute;
	left: 10px;
}
.dragArea__item-text {
	max-width: 280px;
	display: inline-block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: -2px;
}

/*input, textarea, label*/
.dragArea__form.ui.form .field > label.settings__label-checkbox {
	font-size: 13px;
	font-weight: 400;
	margin-bottom: 10px;
}
.dragArea__form.ui.form .field > label.settings__label-checkbox input[type="checkbox"] {
	margin-top: 1px !important;
}
.dragArea__form.ui.form textarea:not([rows]) {
    height: 5em;
    min-height: 5em;
    max-height: 14em;
}

/*settings__list*/
.settings__list li {
	position: relative;
	border-radius: 2px;
	font-size: 13px;
	color: #777;
	display: inline-block;
	padding: 3px 10px 3px 23px;
	margin-right: 7px;
	margin-bottom: 7px;
	box-shadow: 0px 0px 1px rgba(0,0,0,.24);
}
.settings__list li:before {
	content: "\f330";
	font: normal normal normal 12px/1 LineAwesome;
	text-decoration: inherit;
	text-rendering: optimizeLegibility;
	text-transform: none;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	font-size: 14px;
	color: #ff7936;
	position: absolute;
	top: 6px;
	left: 6px;
}

/*btn*/
#wiloke-add-listing-fields .ui.button {
	padding: .78571429em 1.2em;
}
.drag__btn-wrap {
	background-color: #fff;
	border: 1px solid #eee;
	padding: 8px 18px;
}
.drag__btn-group {
	width: 47%;
	padding-top: 10px;
	margin-bottom: 10px;
}
.drag__btn-group.right {
	width: auto;
}

@media(max-width: 767px) {
	.drag__btn-group.right,
	.drag__btn-group {
		width: 100%;
	}
}

#wiloke-add-listing-fields .ui.form select {
	max-width: 180px;
	display: inline-block;
	vertical-align: -1px;
	padding: .56em 1em;
	margin-bottom: 0;
}

@media(max-width: 767px) {
	#wiloke-add-listing-fields .ui.form select {
		max-width: 100%;
		margin-bottom: 10px;
		height: 42px;
	}
	#wiloke-add-listing-fields .ui.button {
		width: 100%;
	}
}

/*wil-message*/
.wil-message {
	margin: 0 0 20px 0 !important;
	padding: 15px !important;
	font-size: 16px;
}

.wil-message i {
	font-size: 38px;
	vertical-align: middle;
}

.wil-message.success {
	color: #1ebc30;
	background-color: rgba(229, 249, 231, 0.5);
	border: 1px solid rgba(30, 188, 48, 0.2);
	box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.08);
}
.wil-message.error {
	color: #912d2b;
	background-color: rgba(255, 246, 246, 0.8);
	border: 1px solid rgba(224, 180, 180, 0.5);
	box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.08);
}

/*draggable*/
div[draggable="true"].sortable-chosen.sortable-ghost {
	cursor: move;
}
div[draggable="true"].sortable-chosen.sortable-ghost .dragArea__form-content {
	display: none;
}
div[draggable="true"].sortable-chosen.sortable-ghost .dragArea__form-title {
	border-bottom: 0;
}

/*ui*/
#wiloke-add-listing-fields  .ui.selection.dropdown {
	margin-bottom: 0;
}
#wiloke-add-listing-fields .ui.toggle.checkbox input {
	width: 2.2rem;
	height: 1.2rem;
}

#wiloke-add-listing-fields .ui.toggle.checkbox .box:before,
#wiloke-add-listing-fields .ui.toggle.checkbox label:before {
	width: 2.2rem;
	height: 1.2rem;
	background-color: rgba(0,0,0,0.15);
	box-shadow: 2px 0px 1px rgba(0,0,0,0.07);
}

#wiloke-add-listing-fields .ui.toggle.checkbox input:checked~.box:before,
#wiloke-add-listing-fields .ui.toggle.checkbox input:checked~label:before {
	background-color: #7e86f9 !important;
}

#wiloke-add-listing-fields .ui.toggle.checkbox .box:after,
#wiloke-add-listing-fields .ui.toggle.checkbox label:after {
	width: 1.2rem;
	height: 1.2rem;
}

#wiloke-add-listing-fields .ui.toggle.checkbox input:checked~.box:after,
#wiloke-add-listing-fields .ui.toggle.checkbox input:checked~label:after {
    left: 1.06rem;
}

#wiloke-add-listing-fields .ui.toggle.checkbox .box,
#wiloke-add-listing-fields .ui.toggle.checkbox label {
	padding-left: 3rem;
}

#wiloke-add-listing-fields .ui.form .field>label {
	font-weight: normal;
	color: rgba(0, 0, 0, 0.75) !important;
}
#wiloke-add-listing-fields .ui.toggle.checkbox input~label {
	color: rgba(0, 0, 0, 0.45) !important;
}
#wiloke-add-listing-fields .ui.toggle.checkbox input:checked~label {
	color: rgba(0, 0, 0, 0.87) !important;
}

#wiloke-add-listing-fields .dragArea__form.ui.form .field.toggle {
	margin-bottom: 10px !important;
}

#wiloke-add-listing-fields .dragArea__form.ui.form .field.toggle .settings__desc {
	padding-left: 45px;
}

#wiloke-add-listing-fields .ui.form input:not([type]),
#wiloke-add-listing-fields .ui.form input[type=text],
#wiloke-add-listing-fields .ui.form input[type=email],
#wiloke-add-listing-fields .ui.form input[type=search],
#wiloke-add-listing-fields .ui.form input[type=password],
#wiloke-add-listing-fields .ui.form input[type=date],
#wiloke-add-listing-fields .ui.form input[type=datetime-local],
#wiloke-add-listing-fields .ui.form input[type=tel],
#wiloke-add-listing-fields .ui.form input[type=time],
#wiloke-add-listing-fields .ui.form input[type=file],
#wiloke-add-listing-fields .ui.form input[type=url],
#wiloke-add-listing-fields .ui.form input[type=number],
#wiloke-add-listing-fields .ui.form .ui.form textarea {
	color: rgba(0, 0, 0, 0.75);
}