Current File : /home/escuelai/public_html/sitio_anterior/wp-content/plugins/jet-engine/assets/scss/forms.scss

div[data-control-name="_form_fields"] {
	> .cx-control__content {
		flex: 0 0 100%;
	}
	.cx-ui-container.form-field-control:not(.cx-ui-repeater-container) {
		display: flex;
		padding: 15px 0;
		border-top: 1px solid rgba( 0,0,0, .1 );
		> label {
			max-width: 15%;
			flex: 0 0 15%;
			margin: 5px 0;
		}
		> .cx-ui-select-wrapper {
			display: flex;
			max-width: 100%;
			flex: 0 0 100%;
			> label {
				max-width: 15%;
				flex: 0 0 15%;
				margin: 5px 0;
			}
		}
	}
	._name-wrap .cx-ui-container.form-field-control {
		border-top: none;
		padding-top: 0;
	}

	._field_options-wrap {
		padding: 20px 0;
		border-top: 1px solid rgba( 0,0,0, .1 );
		.cheryr-ui-repeater-content-box {
			display: flex;
			justify-content: space-between;
			> div {
				width: 49%;
			}
		}
	}
	.form-field-child {
		display: none;
		&._type-active {
			display: block;
		}
		&._hidden_value-active {
			display: block;
		}
		&._field_options_from-active {
			display: block;
		}
	}
	.form-field-controls-list {
		> label {
			display: none;
		}
	}
}

div[data-control-name="_submit_label"],
div[data-control-name="_build_layout"] {
	> .cx-control__content {
		flex: 0 0 100%;
	}
}

#_build_layout {
	width: 100%;
	margin: 5px 0 0 0;
}

.jet-post-field-control {
	display: flex;
	padding: 3px 0 0 0;
	select {
		margin: 0 4px 0 0;
		.rtl & {
			margin: 0 0 0 4px;
		}
	}
	input {
		margin: 0;
	}
}


#form_builder,
#notifications_builder,
.notifications-builder {
	* {
		box-sizing: border-box;
	}
	.jet-form-canvas {
		&__field {
			background: #fafafa;
			padding: 8px 15px 8px;
			font-size: 14px;
			overflow: hidden;
			border: 1px solid #ddd;
			&-start {
				display: flex;
				align-items: center;
			}
			&-end {
				display: flex;
				align-items: center;
			}
			&-label {
				margin: 0 0 2px;
			}
			&-name {
				font-weight: bold;
				margin: 0 5px 0 0;
				.rtl & {
					margin: 0 0 0 5px;
				}
			}
			&-type {
				font-style: italic;
			}
			&-content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				min-height: 100%;
			}
			&-remove {
				color: #a00;
				cursor: pointer;
				font-size: 18px;
				line-height: 20px;
				margin: 0 10px 0 0;
				.rtl & {
					margin: 0 0 0 10px;
				}
				&:hover {
					color: #dc3232;
				}
				&:before {
					content: "\f153";
					font-family: dashicons;
				}
			}
			&-tooltip {
				background: #23282d;
				box-shadow: 0 1px 4px rgba(35,40,45,.24);
				border-radius: 3px;
				padding: 5px 10px;
				font-size: 12px;
				line-height: 15px;
				color: #fff;
				right: 100%;
				position: absolute;
				margin: 0 20px 0 0;
				opacity: 0;
				text-align: center;
				pointer-events: none;
				white-space: nowrap;
				transition: all 150ms linear;
				.rtl & {
					left: 100%;
					right: auto;
					margin: 0 0 0 20px;
				}
				&:after {
					left: 100%;
					content: '';
					position: absolute;
					top: 50%;
					margin: -4px 0 0 0;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 4px 0 4px 4px;
					border-color: transparent transparent transparent #23282d;
					.rtl & {
						left: auto;
						right: 100%;
						border-width: 4px 4px 4px 0;
						border-color: transparent #23282d transparent transparent;
					}
				}
			}

			&-has-conditions {
				position: absolute;
				background: #fff;
				border: 1px solid #46B450;
				width: 16px;
				height: 16px;
				box-sizing: border-box;
				border-radius: 10px;
				right: -7px;
				top: -7px;
				color: #46B450;
				text-align: center;
				font-size: 9px;
				&:before {
					content: "\2714";
				}
			}

			&-conditional-logic,
			&-copy {
				cursor: pointer;
				margin: 0 15px 0 0;
				color: #0071a1;
				border: 1px solid #0071a1;
				background: #f3f5f6;
				text-decoration: none;
				border-radius: 3px;
				height: 30px;
				width: 30px;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				.rtl & {
					margin: 0 0 0 15px;
				}
				svg {
					width: 22px;
					height: 22px;
				}
				&:hover {
					background: #f1f1f1;
					border-color: #016087;
					color: #016087;
					.jet-form-canvas__field-tooltip {
						margin: 0 10px 0 0;
						opacity: 1;
						.rtl & {
							margin: 0 0 0 10px;
						}
					}
				}
			}
			&-copy {
				margin: 0 10px 0 0;
				.rtl & {
					margin: 0 0 0 10px;
				}

				svg {
					fill: currentColor;
					width: 15px;
					height: 15px;
				}
			}
			&-edit {
				cursor: pointer;
				margin: 0 10px 0 10px;
				background: #0085ba;
				border: 1px solid;
				border-color: #0073aa #006799 #006799;
				color: #fff;
				text-decoration: none;
				text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
				border-radius: 3px;
				height: 30px;
				width: 30px;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				&:hover {
					background: #008ec2;
					border-color: #006799;
					.jet-form-canvas__field-tooltip {
						margin: 0 10px 0 0;
						opacity: 1;
						.rtl & {
							margin: 0 0 0 10px;
						}
					}
				}
			}
		}
		&__actions {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			padding: 5px 0 0 0;
			flex-wrap: wrap;
		}
		&__captcha {
			padding: 6px 0 0 0;
			&--enabled {
				padding: unset;
				display: flex;
				flex-direction: column;
				min-height: 4rem;
				justify-content: space-around;
			}
			&-fields {
				flex: 0 0 100%;
				display: flex;
				flex-wrap: wrap;
				label {
					width: 350px;
					margin: 0 10px 0 0;
					.rtl & {
						margin: 0 0 0 10px;
					}

					input {
						width: 100%;
					}
				}
			}
			&-info {
				flex: 0 0 100%;
				padding: 10px 0 0 0;
			}
		}
		&__preset {
			margin: 10px 0 0 0;
			padding: 10px;
			background: #fafafa;
			border: 1px solid #ddd;
			&-heading {
				display: flex;
				align-content: center;
				margin: 0;
				input {
					margin: 1px 10px 0 0;
					.rtl & {
						margin: 1px 0 0 10px;
					}
				}
			}
			&-controls {
				padding: 10px 0 0 0;
			}
			&-row {
				padding: 10px 0;
				display: flex;
				border-bottom: 1px solid #ddd;
				align-items: flex-start;
				&:last-child {
					border-bottom: none;
				}
				> span {
					flex: 0 0 140px;
					max-width: 140px;
					display: block;
					padding: 6px 0 0 0;
				}
			}
		}
		&__buttons {
			display: flex;
		}
		&__result {
			height: 0;
			overflow: hidden;
			visibility: hidden;
		}
		&__add {
			cursor: pointer;
			background: #0085ba;
			border: 1px solid;
			margin: 0 0 0 10px;
			border-color: #0073aa #006799 #006799;
			box-shadow: 0 1px 0 #006799;
			color: #fff;
			text-decoration: none;
			text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
			border-radius: 3px;
			width: 180px;
			display: flex;
			justify-content: center;
			font-size: 13px;
			line-height: 30px;
			padding: 0 15px;
			align-items: center;
			&:hover {
				background: #008ec2;
				border-color: #006799;
			}
			&.add-default {
				color: #555;
				border-color: #ccc;
				background: #f7f7f7;
				box-shadow: 0 1px 0 #ccc;
				text-shadow: none;
				&:hover {
					background: #fafafa;
					border-color: #999;
					color: #23282d;
				}
			}
			.rtl & {
				margin: 0 10px 0 0;
			}
		}
		.vue-grid-placeholder {
			background: #f00 !important;
			opacity: .2 !important;
		}

		.vue-grid-item {
			> .vue-resizable-handle {
				height: auto;
				top: 0;
				bottom: 0;
				background: rgba( 0,0,0,.05 );
				cursor: col-resize;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0;
				border-left: 1px solid #ddd;
				&:before {
					content: "\f229";
					font-family: dashicons;
					opacity: .4;
				}
				.rtl & {
					left: 0;
					right: auto;
					border-left: none;
					border-right: 1px solid #ddd;
				}
			}
		}
	}

	.jet-form-list {
		&__item {
			background: #fafafa;
			padding: 15px;
			font-size: 14px;
			overflow: hidden;
			border: 1px solid #ddd;
			margin: 5px 0 0 0;
			.jet-form-editor {
				margin: 15px -16px -16px;
				background: #fff;
			}
			.jet-form-canvas__field-edit {
				margin: 0;
			}
		}
	}
}

.jet-form-dynamic-settings {
	position: fixed;
	z-index: 999;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	align-items: center;
	justify-content: center;
	display: flex;
	&__overlay {
		background: rgba( 0,0,0,.7 );
		position: absolute;
		z-index: 1;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
	}
	&__content {
		padding: 30px;
		background: #fff;
		position: relative;
		z-index: 2;
		max-width: 600px;
		flex: 0 0 600px;
		.jet-form-canvas__preset-row {
			> select,
			> input {
				width: calc( 100% - 140px );
			}
		}
		.jet-post-field-control {
			width: 100%;
			&__inner {
				width: 100%;
				display: flex;
				justify-content: space-between;
				input,
				select {
					width: calc( 50% - 10px );
				}
			}
		}
	}
	&__actions {
		padding: 10px 0 0 0;
	}
}

#notifications_builder {
	overflow: hidden;
}

.notifications-builder {
	&.jet-form-list__item {
		position: relative;
		background: #fafafa;
		padding: 15px;
		font-size: 14px;
		overflow: hidden;
		border: 1px solid #ddd;
		margin: 5px 0 0 0;
		.jet-form-list__item-handle {
			position: absolute;
			width: 24px;
			height: 60px;
			left: 0;
			top: 0;
			background: #fefefe;
			border-right: 1px solid #ddd;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: ns-resize;
		}
		.jet-form-editor {
			margin: 15px -16px -16px;
			background: #fff;
		}
		.jet-form-canvas__field-edit {
			margin: 0;
		}
	}
	.jet-form-canvas {
		&__field {
			&-content {
				padding: 0 0 0 20px;
			}
			&-notice {
				color: #a00;
			}
		}
	}
}

.jet-form-editor {
	margin: 10px 0 0;
	border: 1px solid #ddd;
	padding: 20px;
	&__header {
		background: #f5f5f5;
		padding: 15px 20px;
		margin: -20px -20px 10px -20px;
		border-bottom: 1px solid #ddd;
		font-weight: bold;
		font-size: 16px;
	}
	&__cl-rule {
		padding: 15px 0;
		&--title {
			color: #23282d;
			font-weight: bold;
			padding: 0 0 5px;
		}
		&--remove {
			display: inline-block;
			vertical-align: baseline;
			font-weight: normal;
			color: #a00;
			margin: 0 0 0 15px;
			cursor: pointer;
			.rtl & {
				margin: 0 15px 0 0;
			}
			&-confirm {
				display: inline-flex;
				font-weight: normal;
				margin: 0 0 0 10px;
				.rtl & {
					margin: 0 10px 0 0;
				}
				span {
					margin: 0 0 0 7px;
					padding: 2px 5px;
					line-height: 12px;
					font-size: 12px;
					cursor: pointer;
					border: 1px solid #ddd;
					border-radius: 2px;
					.rtl & {
						margin: 0 7px 0 0;
					}
					&:hover {
						color: #a00;
						border-color: #a00;
					}
				}
			}
		}
	}
	&__args {
		&-list {
			margin: 0 0 5px;
		}
	}
	&__input { // TODO: check in RTL
		&-icon {
			position: relative;
			input[type="text"] {
				padding-right: 35px;
			}
		}
		&-open-popup {
			position: absolute;
			right: 1px;
			top: 1px;
			width: 30px;
			height: 30px;
			line-height: 30px;
			color: #007cba;
			cursor: pointer;
			&:hover {
				color: #444;
			}
		}
		&-popup {
			position: fixed;
			z-index: 999;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			display: none;
			align-items: center;
			justify-content: center;
			&.is-active {
				display: flex;
			}
			&-content {
				background: #fff;
				width: 500px;
				padding: 30px;
				z-index: 2;
			}
			&-overlay {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 1;
				background: rgba( 0, 0, 0, .7 );
			}
		}
	}
	&__callbacks {
		&-list {
			display: flex;
		}
		&-item {
			margin: 0 4px 0 0;
			border: 1px solid #0071a1;
			color: #0071a1;
			border-radius: 3px;
			padding: 2px 7px 4px;
			line-height: 13px;
			font-size: 13px;
			cursor: pointer;
			&:hover {
				border-color: #016087;
				color: #016087;
			}
		}
	}
	&__group {
		padding: 10px 0 10px;
		margin: 0 0 0 20px;
		display: flex;
		flex-wrap: wrap;
		border-bottom: 1px solid #eee;
		&:last-child {
			border-bottom: none;
		}
	}
	&__col {
		flex: 0 0 auto;
		margin: 0 5px;
		&-label {
			padding: 0 0 5px;
			i {
				color: #999;
			}
		}
	}
	&__dynamic {
		&-control {
			position: relative;
		}
		&-trigger {
			position: absolute;
			top: 0;
			right: 0;
			width: 32px;
			min-height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #7e8993;
			background: #fff;
			border-radius: 0 4px 4px 0;
			cursor: pointer;

			textarea + & {
				border-radius: 0 4px 0 4px;
			}

			.rtl & {
				left: 0;
				right: auto;
				border-radius: 4px 0 0 4px;
			}

			.rtl textarea + & {
				border-radius: 4px 0 4px 0;
			}

			&:hover {
				svg {
					path {
						fill: #007cba !important;
					}
				}
			}
			svg {
				width: 12px;
				height: auto;
			}
		}
	}
	&__row {
		padding: 10px 0;
		display: flex;
		min-height: 50px;
		box-sizing: border-box;
		border-top: 1px solid #ddd;
		&:first-child {
			border-top: none;
		}
		&.direction-column {
			flex-direction: column;
		}
		&-title {
			font-weight: bold;
		}
		&-label {
			max-width: 250px;
			width: 250px;
			padding: 5px 0;
			flex-shrink: 0;
			&.fullwidth-label {
				width: 100%;
				max-width: 100%;
			}
		}
		input[type="checkbox"] {
			margin: 5px 0 0 0;
		}
		input[type="text"],
		textarea,
		select {
			width: 400px;
			max-width: 100%;
			.messages-list & {
				width: 600px;
			}
		}
		textarea {
			height: 250px;
		}
		.cx-vui-component-raw {
			width: 400px;
		}
		&-control {
			&-desc {
				display: inline-block;
				margin: 0 0 0 10px;
				font-style: italic;
				vertical-align: bottom;
				.rtl & {
					margin: 0 10px 0 0;
				}
			}
		}
		&-notice {
			padding: 5px 5px 5px 0;
			font-size: 13px;
			opacity: 0.7;
			.rtl & {
				padding: 5px 0 5px 5px;
			}

			a {
				font-style: italic;
				font-weight: 500;
			}
		}
		&-error {
			padding: 0 5px 5px 0;
			.rtl & {
				padding: 0 0 5px 5px;
			}
		}
		&-map {
			display: flex;
			align-items: center;
			margin-top: 3px;
			span {
				width: 150px;
			}
			input[type="text"] {
				width: 250px;
			}
		}
	}
	&__actions {
		background: #f5f5f5;
		padding: 15px 20px;
		margin: 10px -20px -20px -20px;
		border-top: 1px solid #ddd;
		display: flex;
		justify-content: space-between;
		position: sticky;
		bottom: 0;
		.notifications-builder & {
			position: static;
		}
	}

	&__input-group {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -5px;

		> *,
		> .button {
			margin: 0 5px;
		}

		&--v-align-start {
			align-items: flex-start;
		}

		&--v-align-end {
			align-items: flex-end;
		}
	}
}

.jet-form-repeater {
	max-width: 600px;
	&__item {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		padding: 0;
		background: #fafafa;
		border: 1px solid #ddd;
		border-top: none;
		&:first-child {
			border-top: 1px solid #ddd;
		}
		&:last-child {
			margin-bottom: 10px;
		}
		&-input {
			display: flex;
			align-items: center;
			width: 31%;
			&-label {
				padding: 5px 10px;
				white-space: nowrap;
			}
			input[type="text"] {
				width: 100px;
				box-sizing: border-box;
				margin: 0;
				padding: 5px;
				border-top: none;
				border-bottom: none;
				border-radius: 0;
				border-color: #ddd;
				line-height: 1.4;
			}
		}
		&-delete {
			width: 7%;
		}
		.dashicons.dashicons-dismiss {
			cursor: pointer;
			background: #a00;
			color: #fff;
			width: 100%;
			height: calc( 100% + 2px);
			margin: -1px -1px -1px 0;
			border: 1px solid darken( #a00, 5% );
			padding: 4px 0 0 0;
			text-align: center;
			&:hover {
				background: #dc3232;
			}
		}
	}
}

.jet-form-editor-required {
	color: #f00;
}

.jet-form-validate-button.button,
.jet-form-load-button.button {
	display: inline-flex;
	align-items: center;

	i {
		margin-right: 4px;

		.rtl & {
			margin-left: 4px;
			margin-right: 0;
		}
	}

	&.loading i {
		animation: jet-form-editor-spin 2s infinite linear;
	}
}

.jet-form-validate-button.button {
	i.dashicons {
		&:before {
			content: "\f463";
		}
	}

	&.is-valid i.dashicons {
		&:before {
			content: "\f147";
			color: #46b450;
		}
	}

	&.is-invalid i.dashicons {
		&:before {
			content: "\f335";
			color: #a00;
		}
	}
}

@keyframes jet-form-editor-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg);
	}
}

.jet-engine-gateways-row {
	padding: 5px 0;
	&__label {
		display: block;
		margin: 0 0 5px;
	}
	select,
	input[type="text"],
	textarea {
		width: 630px;
	}
}

.jet-engine-gateways-section {
	padding: 15px 0;
	&__title {
		font-size: 16px;
		line-height: 23px;
		font-weight: bold;
	}
}

.jet-engine-gateways-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	border-bottom: 1px solid #ddd;
	padding: 0 0 15px;
	margin: 0 0 10px;
	&__title {
		flex: 0 0 100%;
		margin: 0 0 10px;
		padding: 15px 0 0 0;
		font-size: 16px;
		line-height: 23px;
		font-weight: bold;
	}
	&__item {
		width: 32%;
		flex: 0 0 32%;
		&-title {
			font-weight: bold;
			font-style: italic;
			padding: 0 0 5px;
		}
	}
}

.jet-engine-gateways-macros-list {
	&__title {
		font-weight: bold;
		padding: 0 0 5px;
	}

	ul {
		padding: 0 0 10px;
		margin: 0;
		li {
			font-style: italic;
		}
	}
}