@import '../../variables.less';
@import '../../mixins.less';

@import 'tabs.less';
@import 'accordion.less';

/***************
field.less
*****************/
#ecf-creator {

	.ecf-fields {
		.ecf-tabs-layout-wrapper {		
			li {
				> header {
					> label {
						width: 250px;
						&.ecf-field-type {
							width: calc(~"41% - 250px");
						}
					}
				}
				> section .section-inner {
					.ecf-field-data {
						.ecf-form-field {
							> label {
								width: 250px;
							}
							> .ecf-input-wrapper,
							> .ecf-list-wrapper,
							> .ecf-toggle-switch-wrapper,
							> .wp-editor-wrapper {
								width: calc(~"100% - 250px");
							}
							&.ecf-fieldtype {
								> .ecf-fieldtype-placeholder {
									width: calc(~"100% - 250px");
								}
							}
							> .ecf-list-wrapper {
								.dropdown-wrapper {
									.dropdown-wrapper-inner {
										.select-box {
											min-width: 250px;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
	.ecf-fields {
		li {
			.transition(border-color, 0.15s, ease);
			border: 1px solid @grey_2;
			background-color: @white;
			margin: -1px 0 0;
			position: relative;
			&:first-child {
				margin-top: 0 !important;
			}
			&.ecf-last-field {
				padding-bottom: 0 !important;
			}
			&.ecf-layout-field {
				> header {
					label {
						&.ecf-field-type {
							color: @text_3;
							> span {
								font-weight: 600;
								&.ecf-count {
									font-weight: 600;
								}
							}
						}
					}
				}
			}
			&.ecf-child-field {
				> header {	
					cursor: default;
				}				
			}
			> header {		
				.transition(background-color, 0.2s, ease);
				background-color: @white;	
				padding: 0 20px 0 50px;
				line-height: 56px;
				position: relative;
				height: 60px;
				cursor: move;

				label {
					height: 60px;
			    line-height: 60px;
			    display: inline-block;
			    width: 320px;
			    cursor: inherit;
			    h3 {
			    	color: @text_3;
			    	padding-right: 15px;
			    	font-size: 17px;
			    	font-weight: 600;
			    	margin: 0;
			    	cursor: pointer;
			    	height: inherit;
			    	line-height: inherit;
			    	cursor: pointer;
			    	text-overflow: ellipsis;
	    	    overflow: hidden;
	    	    display: block;
	    	    white-space: nowrap;
			    }
			    &.field-key,
			    &.ecf-field-visibility,
			    &.ecf-field-type {
			    	color: @text_2;
			    	width: 24%;
			    	font-weight: 300;
			    	font-size: 15px;
			    	cursor: inherit;
			    }
			    &.field-key {
			    	> span {
				    	text-overflow: ellipsis;
		    	    overflow: hidden;
		    	    display: block;
			    	}
			    }
			    &.ecf-field-type {	 
			    	font-weight: 500;
			    	align-items: center;
			    	position: relative;

			    	&.ecf-heading {
			    		color: @text_3;
			    		font-weight: 600;
			    	}

			    	&.ecf-desktop {
			    		.inline-flex();
			    		width: calc(~"47% - 320px");
			    	}

			    	&.ecf-mobile {
			    		display: none;
			    	}

			    	> .ecf-invalid {
			    		.roundedcorners(10px);
			    		background: @warning_3;
			    		position: absolute;
			    		left: -14px;
			    		height: 7px;
			    		width: 7px;
			    	}
			    	> span {
			    		&[class*="ecf-icon-"] {
			    			.opacity(0.8);
	    			    .inline-flex();
	    			    color: @primary;
			    			font-size: 22px;
	    			    margin-right: 8px;
	    			    position: absolute;
	    			    left: -45px;
	    			    display: none;
	    			    &.ecf-icon-password {
	    			    	font-size: 9px;
	    			    }
			    		}
			    		&.ecf-custom-created {
			    			&.ecf-icon-checkboxes,
			    			&.ecf-icon-radios,
			    			&.ecf-icon-document {
			    				width: 24px;
			    			}
			    			&.ecf-icon-textarea {
			    				> svg {
			    					* {
			    						stroke: none !important;
			    					}
			    				}
			    			}
			    			> svg {
			    				width: 22px;
			    				stroke: @primary;
			    				fill: @primary;
			    				color: @primary;
			    				* {			    					
			    					stroke: @primary;
			    				}
			    			}
			    		}
			    	}
			    	.ecf-count {
			    		.opacity(0.5);
			    		padding-left: 10px;
			    		text-transform: lowercase;
			    	}
			    }
			    &.ecf-field-visibility {
			    	.inline-flex();
			    	width: auto;
			    	text-transform: lowercase;
			    	align-items: center;
			    	span {
			    		.roundedcorners(25px);
			    		background-color: fade(@black, 5);
			    		padding: 4px 11px 5px;
	    		    line-height: 1;
	    		    display: inline-block;
	    		    text-transform: uppercase;
	    		    font-size: 12px;
	    		    letter-spacing: 0.2px;
	    		    font-weight: 500;
			    	}
			    }
				}
				.ecf-delete-time {
					color: @text_1;
					position: absolute;
					top: 0;
					right: 150px;
					height: 58px;
					display: flex;
					align-items: center;
					&.ecf-mobile {
						display: none;
					}
				}
				.delete-field,
				.toggle-field,
				.duplicate-field,
				.restore-field,
				.hide-field,
				.ecf-fields-reorder,
				.ecf-field-settings {
					.flex();
					.opacity(0);
					.transition(all, 0.25s, ease);
					position: absolute;
					right: 0;
					height: inherit;
					line-height: inherit;
					width: 50px;
					top: 0;
					align-items: center;
					justify-content: center;
					font-weight: normal;
					svg {
						fill: @primary !important;
						width: 20px;
					}
					.ecf-icon-trash {
						.flex();
					}
					ion-icon {
						width: 1.3em;
						height: 1.3em;
					}
				}
				.delete-field {
					color: @danger;
				}
				.duplicate-field,
				.restore-field,
				.delete-field,
				.hide-field {
					.material-icon {
						font-size: 20px;
					}
					&:hover {
						background-color: fade(@black, 3%);
					}
				}
				.duplicate-field,
				.restore-field,
				.hide-field {
					right: 50px;
					> span {
						.flex();
					}
				}
				
				.duplicate-field{
					right: 100px;
				}

				.ecf-fields-reorder {
					.transition(none);
					.opacity(1);
					color: @text_2;
					left: 0;
					right: auto;
					cursor: move;

					> span {
						.flex();
					}
				}

				.toggle-field {
					.opacity(1);
					color: @text_1;
					right: auto;
					left: 0;
					.angle-down {
						.flex();
						font-size: 22px;
						&.material-icon {
							font-size: 28px;
						}
						ion-icon {
							font-size: 18px;
						}
					}
				}
				.ecf-field-options-mobile,
				.ecf-field-settings {
					display: none;
				}
			}
			> section {
				.box-shadow(0 1px 0 @grey_2 inset);
				// background-color: @grey_2;				
				.section-inner {
					.flex();
					flex-wrap: wrap;
					padding: 1px 0 0 50px;
					.ecf-field-data {
						background-color: @white;						
						padding: 20px 40px 20px 0;
						width: 70%;
						position: relative;
						&:after {
							background: @white;
							content: '';
							position: absolute;
							right: -1px;
							top: 0;
							height: 100%;
							width: 13px;
						}
						.ecf-form-field {
							.flex();
							min-width: 428px;
							border-bottom: 1px solid @grey_2;
							margin-bottom: 15px;
							align-items: center;
							padding-bottom: 15px;
							flex-wrap: wrap;
							justify-content: space-between;
							&.ecf-upload {
								&.ecf-has-files {
									padding-bottom: 10px;
								}								
							}
							&.ecf-last-field {
								margin-bottom: 0;
								padding-bottom: 0;
								border-width: 0;
							}
							&.ecf-warning {
								background-color: @warning_1;
								padding: 15px 40px 15px 50px;
								margin: 0 -40px 15px -50px;
								position: relative;
								z-index: 1;
								> .ecf-input-wrapper {
									input, textarea {
										background-color: @warning_2;
										border-color: @warning_2;
										&:focus {
											.box-shadow(0 0 0 2px fade(@black, 10));
										}
									}
								}
							}
							
							.ecf-field-validation-status {
								color: @danger;
								margin: 0;
								padding-left: 320px;
								width: 100%;
								font-size: 14px;								
							}

							.ecf-field-types {
								.ecf-input-images-wrapper {
									> img {
										filter: grayscale(1);
										margin-right: 5px;
									}
									> div {
										filter: grayscale(1);
										&.ecf-media-file {	
											width: 36px;
											margin: 0 5px 0 0;
											[class*="ecf-icon-"] {
												height: 28px;
												font-size: 20px;
											}
											.ecf-ext {
												font-size: 11px;
												padding-bottom: 1px;
											}
										}
									}
								}
							}

							.ecf-input-images-wrapper {
								margin-top: 5px;
								padding-bottom: 0;
								> div {
									filter: grayscale(0);
									.inline-flex();
									.roundedcorners(5px);
									background: @grey_2;
									position: relative;
									margin: 5px 10px 10px 0;
									&.delete {
										background: @danger !important;
										> * {
											.opacity(0) !important;
										}
									}
									&:hover {
										a {
											.opacity(1);
										}
									}
									a {
										.flex();
										.roundedcorners(5px);
										.transition(opacity, 0.15s, ease-out);
										.opacity(0);
										background: fade(@black, 70%);
										align-items: center;
										justify-content: center;
										position: absolute;
										left: 0;
										top: 0;
										width: 100%;
										height: 100%;
										z-index: 1;
										span {
											.roundedcorners(4px);
											color: @white;
											display: flex;
											align-items: center;
											justify-content: center;
											width: 22px;
											height: 25px;
											font-size: 20px;
										}
									}
									> .ecf-file-sr {
										.flex();
										.roundedcorners(20px);
										.box-shadow(0 0 17px fade(@black, 15));
										background: @white;
										position: absolute;
										top: -7px;
										text-align: center;
										z-index: 1;
										left: -5px;
										width: 17px;
										height: 17px;
										font-size: 12px;
								    justify-content: center;
								    align-items: center;
								    padding-bottom: 0px;
								    font-weight: 600;
									}
									&.ecf-media-file {											
										.roundedcorners(7px);
										background: @grey_2;
										flex-wrap: wrap;											
										width: 43px;
										padding: 4px 0 0;
										justify-content: center;						
										[class*="ecf-icon-"] {									
											font-size: 24px;
											height: 34px;
											display: flex;
											align-items: center;
										}											
										.ecf-ext {
											.roundedcorners(0 0 5px 5px);
											color: @white;			
											font-weight: 500;
											text-transform: uppercase;
											margin-top: 4px;
											padding: 0 0 3px;
											font-size: 12px;
											width: 100%;
											text-align: center;
										}											
									}
								}
								img {
									filter: grayscale(0);
									max-height: 60px;
									width: 60px;
							    height: 60px;
							    object-fit: cover;		
							    margin: 0;						    
								}
							}

							> label {
								color: @text_3;
								width: 320px;
								font-size: 16px;
								font-weight: 600;
								padding-right: 15px;
								.ecf-help-block {
									color: @text_2;
									margin: 5px 0 0;
									font-size: 14px;
									line-height: 1.3;
									.ecf-option-use {
										.inline-flex();
										.roundedcorners(5px);
										background: @grey_1;
										padding: 10px;
										margin-top: 10px;
									}
								}
							}

							> .ecf-input-wrapper {
								width: calc(~"100% - 320px");
								position: relative;
								.ecf-input-placeholder {
							    .flex();
									color: @text_2;
									filter: grayscale(1);
									font-weight: 500;
									width: 100%;
							    min-height: 50px;
							    line-height: 1.6;
							    padding: 11px 50px 11px 20px;
							    align-items: center;
							    flex-wrap: nowrap;
							    font-size: 15px;
							    white-space: nowrap;
							    &:hover {
							    	filter: grayscale(0);
							    }
							    .ecf-placeholder {
							    	color: @text_1;
							    }
							    .ecf-names-joiner {
							    	padding: 0 8px;
							    	color: fade(@text_1, 60%);
							    	line-height: 1;
							    	display: block;
							    	height: 11px;
							    }
						    	.ecf-file-name {
						    		.flex();
						        align-items: center;
						    	}
							    .ecf-file-sr {
							    	font-weight: 700;
							    	color: inherit;
							    	padding-right: 5px;
							    }
							    strong {
							    	padding: 0 5px;
							    	&.ecf-start {
							    		padding-left: 0;
							    	}
							    }
								}
								> .ecf-action {
									.roundedcorners(5px);
									.flex();
									position: absolute;
									right: 0;
									top: 0;
									height: 50px;
									width: 50px;
									align-items: center;
							    justify-content: center;
							    font-size: 20px;
							    color: @text_1;
							    background: @grey_1;
								}
								> .ecf-d-flex {
									margin: 0 -5px;
									align-items: flex-start;
									.ecf-single-config-wrapper {
										width: 33.33%;
										padding: 0 5px;
										> label {
											text-transform: uppercase;
											font-size: 14px;
											color: @text_1;
										}
									}
								}
							}

							.ecf-code-editor-wrapper {
								.ecf-code-editor {
									border: 1px solid @grey_3;
								}
							}

							.ecf-checkbox-wrapper {
								padding: 15px 0;
								> a {
									color: @text_2;
									font-size: 28px;
									display: inline-block;
									height: 28px;
								}
							}
							.ecf-upload-wrapper {
								.ecf-action {
									color: @primary;
								}
								&.ecf-media-image {
									.ecf-input-placeholder {
										.ecf-placeholder {
											color: @text_1;
										}
									}
								}
								&.ecf-media-file {
									.ecf-input-placeholder {
										.flex();
								    align-items: center;
								    color: @text_2;
								    padding-left: 148px;
										.ecf-placeholder {
											.inline-flex();
											.roundedcorners(5px);
									    background: @white;
									    color: @text_2;
											padding: 0 20px;
											height: 38px;
											align-items: center;
											font-size: 14px;
											font-weight: 500;
											position: absolute;
											left: 5px;
										}										
									}
								}
							}
							.ecf-color-wrapper {
								padding: 10px 0;									
							}
							> .ecf-input-wrapper > input, 
							> .ecf-input-wrapper .ecf-single-config-wrapper input, 
							> .ecf-input-wrapper > textarea, 
							.ecf-fieldtype-placeholder, 
							.ecf-input-placeholder {
								.box-shadow(none);
								.placeholder(@text_1);
								.transition(all, 0.25s, ease);
								.roundedcorners(5px);
								border: 1px solid @grey_1;
								background-color: @grey_1;
								color: @text_3;
								font-size: 14px;
								min-height: 50px;
								width: 100%;
								padding: 10px 20px;
								outline: none;
								margin: 0;
								&:focus {
									background-color: @white;
									border-color: @grey_2;
									.box-shadow(0 0 0 2px @grey_2);
								}
								&[readonly] {
									&:focus {
										background: @grey_1;
										.box-shadow(none);
									}
								}
							}
							.ecf-toggle-switch-wrapper,
							.wp-editor-wrapper {
								width: calc(~"100% - 320px");
							}
							.ecf-toggle-switch-wrapper {
								padding: 12px 0;
							}
							.wp-editor-wrapper {
								.wp-switch-editor {
									height: 28px;
								}
								textarea {
									width: 100%;
									background: @grey_1;
									padding: 15px;
									border: 0 solid @grey_2;
									margin-top: 1px;
									&:focus {
										.box-shadow(none);
										background: @white;
										outline: none;
									}
								}
							}
							.ecf-list-wrapper {
								width: calc(~"100% - 320px");
								> .ecf-d-flex {
									flex-wrap: wrap;
									margin: 0 -5px;
									align-items: flex-start;
									.dropdown-wrapper {
										padding: 5px;
									}
								}
								&.ecf-2-cols {
									.dropdown-wrapper {
										width: 50%;
									}
								}
								.dropdown-wrapper {
									width: 100%;
									.dropdown-wrapper-inner {
										max-width: 100%;
										.select-box {
											background: @grey_1;
											font-size: 15px;
											span.caret-down {
												right: 22px;
											}
										}
										.info-icon-wrapper {
											& + .ecf-loader {
												right: 82px;
											}	
										}
										.ecf-loader {
											top: 16px;
											right: 46px;
										}										
									}
								}
							}
							&.ecf-fieldtype {
						    justify-content: flex-start;
						    &.ecf-has-value {
						    	.ecf-fieldtype-placeholder {
						    		color: @primary;
						    	}
						    }
						    .ecf-fieldtype-placeholder {
						    	cursor: pointer;
						    	line-height: 50px;
						    	font-size: 16px;
						    	font-weight: 600;
						    	padding: 0 10px 0 10px;
						    	justify-content: space-between;
						    	width: calc(~"100% - 320px");
						    	> div {
						    		font-size: 16px;
						    		white-space: nowrap;
						    		font-weight: 600;
						    		> span {
						    			.flex();
				    			    .roundedcorners(5px);
				    			    color: @primary;
				    			    background: @white;
						    			font-size: 28px;
						    			margin: 2px;
				    			    height: 48px;
				    			    align-items: center;
				    			    width: auto;
				    			    justify-content: center;
				    			    position: relative;
				    			    left: -10px;
				    			    top: 0px;
		    			        padding: 0 15px;
    			            font-weight: 300;
		    			        &.ecf-icon-password {
		    			        	font-size: 14px;
		    			        }
		    			        &.ecf-icon-textarea {
		    			        	> svg {
		    			        		width: 32px;
		    			        	}
		    			        }
				    			    &.ecf-custom-created {
				    			    	padding: 0 17px;
				    			    	&.ecf-icon-number, 
				    			    	&.ecf-icon-text,
				    			    	&.ecf-icon-accordion,
				    			    	&.ecf-icon-menu-dropdown {
				    			    		> svg {
				    			    			width: 30px;
				    			    		}
				    			    	}
				    			    	&.ecf-icon-checkboxes,
				    			    	&.ecf-icon-radios
				    			    	 {
				    			    		> svg {
				    			    			width: 32px;
				    			    		}
				    			    	}
				    			    	&.ecf-icon-multi-select {
				    			    		> svg {
				    			    			width: 26px;
				    			    		}
				    			    	}
				    			    	&.ecf-icon-textarea {
				    			    		> svg {
				    			    			* {
				    			    				stroke: none !important;
				    			    			}
				    			    		}
				    			    	}
				    			    	> svg {
				    			    		fill: @primary;
				    			    		position: relative;
				    			    		right: 0;
				    			    		top: 0;
				    			    		width: 25px;
				    			    		* {
				    			    			stroke: @primary !important;
				    			    		}
				    			    	}
				    			    }
						    		}
						    	}
						    	.ecf-placeholder {
						    		color: @text_1;
						    		font-weight: 400;
						    	}
						    	.angle-down {
						    		.flex();
						    		margin-left: 7px;
						    		ion-icon {
						    			font-size: 23px;
						    			.rotate(-90deg);
						    		}
						    	}
						    	.ecf-input-type-wrapper {
						    		.box-shadow(none);
						    		padding: 0;
						    		background: transparent;
						    		.ecf-input-type {
						    			.flex();
						    	    justify-content: space-between;
						    			> label {
						    				font-size: 20px;
						    				width: auto;
						    				padding: 0 20px;
						    				margin-bottom: 0;
						    			}
						    			.ecf-input-wrapper {
						    				width: auto;
						    				input {
						    					padding: 0 15px;
						    				}
						    			}
						    		}						    			
						    	}
						    }
							}							
						}
					}
					.ecf-field-metadata {
						border-left: 1px solid @grey_2;
						background: @grey_1;
						padding: 0;
						width: 30%;
						position: relative;
						z-index: 1;
						.ecf-field-metadata-index {
							> p {
						    color: @text_1;							
								margin: 0;
								padding: 5px 20px;
								font-size: 14px;
						    font-weight: 500;
							}
						}						
						header {
							.transition(all, 0.15s, ease);
							background: @white;
					    border: 1px solid @grey_2;
					    position: relative;
					    border-width: 0 0 1px;
							padding: 20px 10px 20px 20px;
							&.active {
								background: @grey_2;
							}
							&.first {
								border-width: 1px 0;
							}
							&.ecf-disabled {
								.opacity(0.7);
							}
							.angle-down {
								.rotate(270deg);
								position: absolute;
								right: 15px;
								top: calc(~"50% - 10px");
								color: @text_1;
								font-size: 20px;
								&.material-icon {
									font-size: 26px;
									top: calc(~"50% - 13px");
								}
							}
							h3 {
								color: @text_3;
								font-weight: 400;
								margin: 0;
								font-size: 16px;
								strong {
									font-weight: 600;
									color: @text_3;
									.ecf-normal-weight {
										font-weight: 400;
									}
								}
								.primary {
									> span {
										font-weight: 300;
										padding: 0 3px;
										font-size: 74%;
										position: relative;
										top: -2px;
									}
								}
							}
							p {
								color: @text_1;
								margin: 0;
								padding: 1px 0 0;
								font-size: 14px;
							}
						}
						.ecf-field-metadata-detail {
							background: @grey_1;
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							visibility: hidden;

							.ecf-how-to-use-wrapper {
								padding: 15px;
								.ecf-code-wrapper {
									position: relative;
									.ecf-code-copy {
										.transition(color, 0.25s, ease-out);
										color: fade(@white, 50%);
										background: fade(@black, 50%);
										position: absolute !important;
										right: 5px;
										top: 5px;
										z-index: 1;
										padding: 5px 10px;
										border-radius: 5px;
										font-size: 12px;
										text-transform: uppercase;
										> .ecf-tooltip {
											text-transform: none;
										}
										&:hover {
											color: @white;
										}
									}
								}
								.ecf-code-editor {
									.roundedcorners(7px);
							    background: #272822;
							    padding: 20px 10px 13px;
								}
								.ace_scrollbar-h {
									height: 0 !important;
								}
								> p {
									font-size: 16px;
									margin: 0 0 10px;
								}
							}
							.ecf-conditions-wrapper {
								padding: 5px 0;
								&.row-groups-0 {
									.ecf-new-rule-button {
										.ecf-create-button {
											margin-right: 0;
										}
									}
								}
								> p {
									color: @text_2;
									padding: 0 20px;
									margin: 3px 0;
									font-weight: 600;
									font-size: 14px;
								}
								.ecf-new-rule-button, .ecf-row-group-divider {
									position: relative;
									.flex();
									justify-content: center;
									padding: 10px 0;
									&:before {
										background-color: @grey_3;
										content: '';
										height: 1px;
										width: 100%;
										top: 50%;
										position: absolute;
									}
									.ecf-create-button {
										.translate(-25px, 0);
										position: relative;
										background-color: @grey_1;
									}
								}
							}
							.ecf-conditions-row-group {

								.ecf-row-group-divider {
									span {
										background-color: @grey_1;
										padding: 0 10px;
										font-size: 16px;
										font-weight: 600;
										position: relative;
										top: -1px;
										margin-right: 50px;
									}
								}

								.ecf-conditions-row {
									flex-wrap: wrap;
									padding: 0 5px 0 15px;
									border-width: 0 0 1px 0;
									height: 0;
									visibility: hidden;
									&.is-invalid {
										background-color: @warning_1;
										padding: 10px 5px 10px 15px;
									}
									&.ecf-has-desc {
										padding-bottom: 20px;
									}
									> p.danger {
										color: @danger;
										margin: 0;
									}
									&:last-child {
										.ecf-create-button {
											&.add-condition {
												.opacity(0);
											}
										}
									}
									&:first-child {
										.ecf-create-button {
											&.add-condition {
												.opacity(1);
											}
										}
									}
									&:hover {
										.ecf-create-button {
											&.delete-condition, &.add-condition {
												.opacity(1);
											}
										}
									}
									&.ecf-2-columns {
										.ecf-field-meta-dropdown {
											width: calc(~"50% - 30px");
										}							
									}
									&.ecf-3-columns {
										.ecf-field-meta-dropdown {
											width: calc(~"33.33% - 20px");
										}									
									}
									.ecf-field-meta-dropdown {
										padding: 3px 2px;
										border-width: 0;
										width: 33.33%;
										&.ecf-lowercase {
											.dropdown-wrapper.small {
												.dropdown-wrapper-inner {
													.select-box, .dropdown-holder li a {
														text-transform: lowercase;															
													}										
												}
											}
										}
										.dropdown-wrapper.small {
											.dropdown-wrapper-inner {
												.select-box {
													background-color: @white;
													font-size: 14px;
													min-width: unset;
													padding-right: 40px;
													padding-left: 12px;
													> div {
														font-size: inherit;
													}
												}										
											}
										}
									}		
									.ecf-form-field {
										width: calc(~"33.33% - 21px");
										padding: 0 2px;
										input {
											.roundedcorners(7px);
											.box-shadow(0 0 0 1px fade(@black, 10) inset);
											background-color: @white;
											padding: 0 12px;
											width: 100%;
											border-width: 0;
											height: 40px;
										}
									}	
									span.add-condition {
										min-width: 40px;
										height: 21px;
										text-align: center;
								    font-size: 14px;
									}
									.ecf-create-button {
										.transition(all, 0.15s, ease);
										min-width: 40px;
										text-transform: lowercase;
										&.delete-condition {
											transition-delay: 0.2s;
											min-width: 20px;
											.opacity(0);
											ion-icon {
												font-size: 20px;
											}
										}
									}		
								}

							}							
							.ecf-field-meta-dropdown {
								padding: 20px;
								border-top: 1px solid @grey_3;
								&:first-child {
									border-width: 0;
								}
								.dropdown-wrapper.small {
									&.is-open {
										.dropdown-wrapper-inner {
											.select-box {
												> div {
													color: @text_1;
												}
											}
										}
									}
									.dropdown-wrapper-inner {
										.select-box {
											background-color: @grey_2;
											.box-shadow(0 0 0 1px fade(@black, 10) inset);											
											height: 40px;
											line-height: 40px;
											&:after {
												right: 16px;
											}
											> div {
												color: @text_2;
												font-size: 15px;
											}
										}
										.dropdown-holder {
											transform-origin: calc(~"100% - 19px") top;
											border-color: @grey_3;
											&:before {
												right: 10px;
											}
										}
									}
								}
							}
							.ecf-copy-to-locations {
								.ecf-create-button {
									margin-left: 20px;
								}
								.ecf-alert {
									.opacity(0);
									height: 0;
									overflow: hidden;
									margin: 0 20px;
								}
							}
						}
						.detail-panel {							
							header {
								border-color: @grey_3;
								z-index: 1;
								position: relative;
								
								> a {
									.flex();
									.rotate(180deg);
									position: absolute;
									left: 0;
									top: 0;
									align-items: center;
									justify-content: center;
									height: 59px;
									width: 60px;
								}
								h3 {
									color: @text_2;
									font-weight: 500;
									font-size: 17px;
									text-align: center;
									strong {
										color: @text_3;
										font-weight: 600;
									}									
								}
								& + p {
							    color: @text_1;		
							    background: @grey_2;
					        border-bottom: 1px solid @grey_3;					
									margin: 0;
									padding: 7px 20px;
									font-size: 14px;
							    font-weight: 500;
							    & + p {
							    	color: @text_3;
							    	font-size: 16px;
							    	padding: 0 20px;
					    	    line-height: 1.3;
							    }
								}
							}
						}
					}
				}
			}
			&:hover {
				> header {
					.delete-field,
					.duplicate-field,
					.restore-field,
					.hide-field {
						.opacity(1);
					}
				}				
			}
			> a {
				&.ecf-checkbox {
					.flex();
					.opacity(0);
					border: 1px solid @grey_2;
					background: @grey_1;
					border-width: 1px 0 1px 1px;
					align-items: center;
					justify-content: center;
					position: absolute;
					left: 0;
					top: -1px;
					height: 62px;
					width: 50px;
					visibility: hidden;
					> div {
						.roundedcorners(20px);
						.flex();
						border: 2px solid @grey_4;
						width: 20px;
						height: 20px;
						align-items: center;
						justify-content: center;
						.material-icon {
							.inline-flex();
							width: inherit;
						}
						> span {
							.flex();
						}
					}
				}
				&.selected {
					> div {
						border-color: @primary;
						background-color: @primary;
						svg, span {
							color: @white;
						}
					}
				}
			}
			&.ecf-field-selected {
				border-color: fade(@primary, 20%);
				> header {
					background-color: fade(@primary, 10%);
				}
				> section {
					position: relative;
					.section-inner {
						&:before {
							content: '';
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
							background: fade(@primary, 10%);
							position: absolute;
							z-index: 1;
						}
					}
				}
				> a {
					&.ecf-checkbox {
						border-color: transparent;
						background-color: fade(@primary, 15%);
					}
				}
				&.delete {
					&.permanent {
						> a {
							&.ecf-checkbox {
								background-color: fade(@danger, 15%);
								> div {
									border-color: @danger;
									background-color: @danger;
								}
							}
						}
					}
				}
			}
			&.ecf-field-disabled {
				&:hover, &.active {
					> header {
						.duplicate-field {
							cursor: default;
						}
						.duplicate-field,
						.toggle-field {
							.opacity(0.4);
						}
					}
				}
				> header {
					background-color: @grey_1;
					label, .toggle-field {
						.opacity(0.4);
					}
				}
			}
			&.ecf-selectable {
		    margin-left: 50px;
		    &.ecf-simple-field {
		    	> a {
		    		&.ecf-checkbox {
		    			.translate(-51px, 0);
		    		}
		    	}
		    }
		    > a {
		    	&.ecf-checkbox {
		    		.opacity(1);
		    		visibility: visible;
		    	}
		    }
			}
			&.active,
			&.delete,
			&.restore {
				border-color: @primary;
		    margin-bottom: 1px !important;
        z-index: 1;
				> header {
					background-color: @primary;
					label{
						color: @white;
						&.ecf-field-type {
							color: @white;
						}
						h3 {
							color: @white;
							font-weight: 500;
						}
						> span {
							&[class*="ecf-icon-"]{
								color: @white;
								&.ecf-icon-date-time,
								&.ecf-icon-calendar-plus {
									svg {
										.ecf-alter-fill {
											fill: @primary;
										}
									}
								}
								svg {
									stroke: @white;
									fill: @white;
									* {
										stroke: @white;
									}
								}
							}
							&.ecf-count {
								color: @white;
							}
						}
					}
					.ecf-delete-time {
						color: fade(@white, 60%);
					}
					mark {
						color: @white;
						text-decoration-color: @white;
					}
					.delete-field,
					.duplicate-field,
					.move-field,
					.toggle-field,
					.restore-field,
					.hide-field {						
						.opacity(1);
						color: @white;
						.material-icon {
							font-weight: 300;
						}
						svg {
							fill: @white !important;
						}
					}
				}
				> section {
					.box-shadow(0 1px 0 @primary inset);
					background-color: @white;
				}
			}
			&.delete {
				margin-bottom: 0 !important;
				border-color: @danger !important;
				&.permanent {
					border-color: fade(@danger, 40%) !important;
					> header {
						background-color: fade(@danger, 40%) !important;
					}
				}
				> header {
					background-color: @danger !important;
				}
				> section {
					.box-shadow(0 1px 0 fade(@danger, 40%) inset) !important;
				}
			}
			&.restore {
				border-color: @success;
				> header {
					background-color: @success;
				}
				> section {
					.box-shadow(0 1px 0 @success inset);
				}
			}
			&.ecf-simple-field {
				& + .ecf-fields-group {
					padding-top: 22px;
					> .ecf-checkbox {
						top: 37px;
					}
				}
			}			
		}
	}
	.ecf-page-trash {
		.ecf-fields {
			li {
				&.active {
					border-color: @text_2 !important;
					&.delete {
						border-color: @danger !important;
						&.permanent {
							border-color: fade(@danger, 40%) !important;
						}
						> section {
							.box-shadow(0 1px 0 fade(@danger, 40%) inset) !important;
						}
					}
					&.restore {
						border-color: @success !important;
						> header {
							background-color: @success;
						}
						> section {
							.box-shadow(0 1px 0 @success inset);
						}
					}
					> header {
						background-color: @text_2;
					}
					> section {
						.box-shadow(0 1px 0 @text_2 inset);
					}
				}
				&.active, &.delete {
					> header {
						.delete-field {
							color: @white;
						}
					}
				}
				> header {
					.delete-field {
						color: @danger;
						height: 60px;
						svg {
							fill: @danger !important;
						}
					}
					.ecf-confirmation-dialog-wrapper {
						position: absolute;
						right: 0;
						top: 0;						
					}
				}
				> section .section-inner .ecf-field-data .ecf-form-field.ecf-fieldtype.ecf-has-value .ecf-fieldtype-placeholder {
					color: @text_2;
					> .angle-down {
						color: @text_2;
					}
					> div {
						> span {
							color: @text_2;
							&.ecf-custom-created > svg {
								fill: @text_2;
								* {
							    stroke: @text_2 !important;	
								}
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 1400px) {
	#ecf-creator {
		.ecf-fields {
			li {
				> header {
					label {
						font-size: 15px;
						width: 240px;
						&.ecf-field-type.ecf-desktop {
							width: calc(~"41% - 240px");
						}
						&.ecf-field-type,
						&.field-key {
							font-size: 14px;
						}
						&.field-key {
							width: 20%;
						}
						&.ecf-field-visibility {
							span {
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								padding: 5px 11px 5px;
								font-size: 11px;
							}
						}
						h3 {
							font-size: 16px;
						}
					}
				}

				> section {
					.section-inner {
						.ecf-field-data {
							width: 60%;
							padding-right: 20px;
							.ecf-form-field {
								> label {
									width: 240px;
									font-size: 15px;
								}
								> .ecf-input-wrapper,
								.ecf-list-wrapper,
								.ecf-toggle-switch-wrapper,
								.wp-editor-wrapper {
									width: calc(~"100% - 240px");
								}
								&.ecf-fieldtype {
									.ecf-fieldtype-placeholder {
										width: calc(~"100% - 240px");
									}
								}
								.ecf-list-wrapper {
									&.ecf-2-cols {
										.dropdown-wrapper {
											width: 100%;
										}
									}
								}
								.ecf-field-validation-status {
									padding-left: 240px;
								}
							}
						}
						.ecf-field-metadata {
							width: 40%;
							header {
								h3 {
									font-size: 15px;
								}
								p {
									font-size: 13px;
								}
							}
						}
					}
				}
			}

			.ecf-tabs-layout-wrapper li {
				> header {
					> label {
						width: 175px;
						&.ecf-field-type.ecf-desktop {
							width: calc(~"41% - 150px");
						}
						&.field-key {
							width: 17.5%;
						}
						&.ecf-field-visibility {
							span {
								width: 122px;
							}
						}
					}
				}
				> section .section-inner {
					.ecf-field-data {
						.ecf-form-field {
							> label {
								width: 175px;
								.ecf-help-block {
									font-size: 12px;
								}
							}
							> .ecf-input-wrapper,
							.ecf-list-wrapper,
							.ecf-toggle-switch-wrapper,
							.wp-editor-wrapper {
								width: calc(~"100% - 175px");
							}
							&.ecf-fieldtype {
								> .ecf-fieldtype-placeholder {
									width: calc(~"100% - 175px");
								}
							}						
						}
					}
				}
			}
		}
	}
}

@media (max-width: 1300px) {
	#ecf-creator .ecf-fields li > section .section-inner .ecf-field-metadata {
		.ecf-field-metadata-detail {
			.ecf-conditions-row-group {
				.ecf-conditions-row {
					&.ecf-3-columns {
						.ecf-field-meta-dropdown,
						.ecf-form-field {
							width: 50%;
						}
					}
				}
			}
		}
	}
}

@media (max-width: 1100px) {
	#ecf-creator {
		.ecf-fields {

			li {
				> header {
					label {
						&.field-key {
							display: none;
						}
						&.ecf-field-type.ecf-desktop {
					    width: calc(~"61% - 240px");
						}
					}
				}

				> section {
					.section-inner {
						.ecf-field-data {
							.ecf-form-field {
								&.ecf-fieldtype {
									.ecf-fieldtype-placeholder {
										> div {
											font-size: 15px;
											> span, > span.ecf-custom-created {
												padding: 0 9px;
											}
										}
									}
								}
							}
						}
					}
				}

			}			

			.ecf-tabs-layout-wrapper li {
				> header {
					> label {
						&.ecf-field-type {
							width: calc(~"51.5% - 150px");
						}
						.ecf-field-validation-status {
							padding-left: 150px;
						}
					}
				}
				> section {
					.section-inner {
						.ecf-field-metadata {
							.ecf-field-metadata-index {
								> p {
									font-size: 13px;
								}
							}
							header {
								h3 {
									font-size: 14px;
								}
							}
							.detail-panel {
								header {
									h3 {
										font-size: 14px;
									}
								}
							}
						}
					}
				}
			}

		}		
	}
}

@media (max-width: 1024px) {
	#ecf-creator {
		.ecf-fields {
			li {

				> header {
					label {
						font-size: 15px;
						width: 150px;
						&.ecf-field-type.ecf-desktop {
							width: calc(~"41% - 150px");
						}
					}
				}

				> section {
					.section-inner {
						.ecf-field-data {
							.ecf-form-field {
								> label {
									width: 150px;
								}
								> .ecf-input-wrapper,
								.ecf-list-wrapper,
								.ecf-toggle-switch-wrapper,
								.wp-editor-wrapper {
									width: calc(~"100% - 150px");
								}
								&.ecf-fieldtype {
									.ecf-fieldtype-placeholder {
										width: calc(~"100% - 150px");
									}
								}
								.ecf-field-validation-status {
									padding-left: 150px;
								}
							}
						}
					}
				}
			}

			.ecf-tabs-layout-wrapper li {
				> header {
					> label {
						&.ecf-field-visibility {
							display: none;
						}
					}
				}
				> section .section-inner {
					.ecf-field-data {						
						.ecf-form-field {
							min-width: 100%;
							> label {
								width: 100%;
							}
							> .ecf-input-wrapper,
							.ecf-list-wrapper,
							.ecf-toggle-switch-wrapper,
							.wp-editor-wrapper {
								width: 100%;
								margin-top: 8px;
							}
							&.ecf-fieldtype {
								> .ecf-fieldtype-placeholder {
									width: 100%;
								}
							}						
						}
					}					
				}
			}
		}
	}

	body:not(.folded) {

		#ecf-creator {
			.ecf-tabs-layout-wrapper li {
				> section .section-inner {
					.ecf-field-data {
						width: 50%;
					}
					.ecf-field-metadata {
						width: 50%;
					}
				}
			}
		}

	}

}

@media (max-width: 1023px) {

	#ecf-creator {
		.ecf-fields {
			li {
				&.active {
					> header {
						.ecf-field-options-mobile {
							.more-options {
								color: @white;
							}
						}
						.ecf-field-settings {
							color: @white;
							.opacity(1);
						}
					}
				}
				&.delete {
					> header {
						.ecf-field-options-mobile {
							.more-options {
								color: @white;
							}
						}
					}
				}
				> header {
					> label {
						padding-right: 40px;
						width: 40%;
						&.ecf-field-type.ecf-desktop {
							width: auto;
							padding-right: 40px;
						}
						&.field-key {
							display: none;
						}
					}
					.duplicate-field, 
					.delete-field, 
					.restore-field,
					.hide-field {
						display: none;
					}
					.ecf-field-options-mobile {
						display: block;
						position: absolute;
						right: 0;
						min-width: 200px;
						height: 60px;
						top: 60px;
						.dropdown-wrapper .dropdown-wrapper-inner .dropdown-holder {
							right: -4px;
						}
						.more-options {
							.flex();
					    color: @text_2;
							font-size: 15px;
					    height: 60px;
					    width: 50px;
					    align-items: center;
					    position: absolute;
					    right: 0;
					    top: -60px;
					    justify-content: center;
							> span {
								.flex();								
							}
						}
						li {
							line-height: 1.5;
						}						
					}
					.ecf-confirmation-dialog-outer {
						position: absolute;
				    right: 0;
				    top: 0;
				    .more-options {
				    	display: none;
				    }
					}
					.ecf-field-settings {
						.flex();				    
				    right: 50px;
				    font-size: 17px;
				    &.ecf-active {
				    	background: fade(@black, 10%);
				    }
				    > span {
				    	.flex();
				    }
					}
				}
				> section {
					.section-inner {
						.ecf-hide-field-settings {
							position: absolute;
							left: 0;
							width: calc(~"30% + 50px");
							top: 62px;
							bottom: 0;
							z-index: 2;
						}
						.ecf-field-data {
							width: 100%;
						}
						.ecf-field-metadata {
							.box-shadow(-17px 0 27px fade(@black, 8));
							width: calc(~"70% - 50px") !important;
							position: absolute;
							left: 100%;
							top: 62px; 
							bottom: 0;
							visibility: hidden;
							.opacity(0);
							.ecf-field-metadata-detail {
								.ecf-conditions-row-group {
									.ecf-conditions-row, .ecf-conditions-row:last-child {
										.ecf-create-button {
											&.add-condition,
											&.delete-condition {
												.opacity(1);
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}

}

@media (max-width: 500px) {

	body:not(.folded) {

		#ecf-creator {
			.ecf-tabs-layout-wrapper li {
				> section .section-inner {
					.ecf-field-data {
						width: 100%;
					}
				}
			}
		}

	}

	#ecf-creator {
		.ecf-fields {
			li {
				> header {
					padding-left: 40px;
					> label {
						.inline-flex();
				    justify-content: space-between;
						width: calc(~"100% - 70px");
						line-height: 47px;
						z-index: 2;							
				    position: relative;
				    padding-right: 0;
				    align-items: center;
		        align-content: center;
		        flex-wrap: wrap;
				    &.ecf-field-type.ecf-desktop {
				    	display: none;
				    }
						.ecf-field-type.ecf-mobile {
							.inline-flex();
							.opacity(0.7);
							height: 11px;
							line-height: 1;
							font-size: 12px;	
							z-index: 1;	
							min-width: 50px;
					    white-space: nowrap;
							.ecf-invalid {
								right: -5px;
						    top: 4px;
						    left: auto;
							}		
							.ecf-count {
								padding-left: 5px;
							}		
						}
						&.ecf-field-visibility {
							display: none;
						}
						> h3 {
							width: 100%;
							padding-right: 0;
							font-size: 15px;
							height: auto;
							line-height: 1.3;
						}
					}
					.toggle-field {
						width: 40px;
						.angle-down ion-icon {
							font-size: 15px;
						}
					}
					.ecf-field-options-mobile {
						.more-options {
							width: 40px;
						}
						.dropdown-wrapper .dropdown-wrapper-inner .dropdown-holder {
							right: -8px;
						}
					}
					.ecf-fields-reorder {
						width: 40px;
					}
					.ecf-field-settings {
						width: 40px;
						right: 40px;
					}
					.ecf-delete-time {						
						bottom: 0;
				    right: auto;
				    height: 12px;
				    font-size: 12px;
				    position: relative;
				    &.ecf-mobile {
				    	.flex();
				    }
				    &.ecf-desktop {
				    	display: none;
				    }
					}
				}
				> section .section-inner {
					padding-left: 15px;
					.ecf-field-data {	
						padding-right: 10px;			
						&:after {
							content: none;
						}		
						.ecf-form-field {
							min-width: 100%;
							> label {
								width: 100%;
							}
							> .ecf-input-wrapper,
							.ecf-list-wrapper,
							.ecf-toggle-switch-wrapper,
							.wp-editor-wrapper {
								width: 100%;
								margin-top: 8px;
							}
							&.ecf-fieldtype {
								> .ecf-fieldtype-placeholder {
									width: 100%;
								}								
							}	
							&.ecf-warning {
								padding: 15px 10px 15px 15px;
								margin: 0 -10px 15px -15px;
							}
							.ecf-field-validation-status {
								padding: 0;
							}					
						}
					}	
					.ecf-hide-field-settings {
						width: 15px;
					}
					.ecf-field-metadata {
						width: calc(~"100% - 15px") !important;
						z-index: 3;
					}	
					.ecf-layout-wrapper {
						margin: 0 0 0 -15px;
						min-width: calc(~"100% + 15px");
					}			
				}
			}
			.ecf-tabs-layout-wrapper {
				overflow-x: auto;
				&.delete {
					overflow-x: clip;
				}
				.ecf-tabs-wrapper {
					width: calc(~"100% + 200px");
					.ecf-tabs{
						width: 206px;
					}
					.ecf-tab-content {
						width: calc(~"100% - 206px");
					}
				}
				li {
					> header {
						> label {
							&.ecf-field-type {
								width: calc(~"100% - 80px");
							}
						}
					}
				}
			}
		}
	}

}