/*!
 * Jetpack CRM
 * https://jetpackcrm.com
 */

// Front end forms - ACTUAL FORM styles
// <3.0
.post-type-zerobs_form,
.zbscrmFrontEndForm,
.zbs-edit-wrap-form {

	#form-embed,
	#form-preview {
		min-height: 50px;
		margin-bottom: 20px;
		border: 1px solid #e5e5e5;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
		background: #fff;
		padding: 10px;

		h1 {
			margin-top: 5px;
		}

	}

	tr.wh-large textarea {
		font-size: 14px;
	}

	.zbs_shortcode_message {
		margin-top: -10px;
		margin-bottom: 20px;
		margin-left: 20px;
		margin-right: 20px;
		background: #f0f8ff;
		padding: 12px;
		border: 1px solid #00a0d3;
		border-radius: 4px;

		p {
			text-align: center;
			margin: 0;
		}

		.shorty {
			font-weight: 900;
			margin-top: 5px;
		}
	}

	.caption {
		text-align: center;
		margin-top: 7px;
		color: #999;
		font-weight: 100;
	}

	.welcomeh1 {
		font-size: 26px;
		text-align: center;
		padding: 5px;
		font-weight: 900;
	}

	.welcomeh3 {
		font-size: 15px;
		text-align: center;
		color: #999;
		text-transform: uppercase;
		font-weight: 100;
		padding: 0;
		margin: 0;
		margin-bottom: 24px;
	}

	#zbs-field-chooser {
		width: 50%;
	}

	#zbs-form-pre {
		display: block;
		unicode-bidi: embed;
		white-space: pre-wrap;
		overflow-wrap: break-word;
	}

	pre {
		display: block;
		font: 400 12px/22px Monaco, monospace !important;
		color: #cfdbec;
		background-color: #2f2f2f;
		background-image: repeating-linear-gradient(top, #444 0, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
		padding: 0 1em;
		overflow: auto;
	}

	.zbs_msg {
		text-align: center;
		margin-top: -20px;
		margin-bottom: 20px;
	}

	.hide {
		display: none;
	}


	.third {
		width: 30%;
		margin-left: 1.5%;
		margin-right: 1.5%;
		float: left;
		cursor: pointer;

		.selected {
			border: 4px solid #ddd !important;
		}

		.simple,
		.naked,
		.cgrab {
			border: 1px solid #ddd;
		}

		.cgrab {
			position: relative;

			.blobby {

				p {
					color: #ddd;
					background: #ddd;
					line-height: 15px;
				}

				.br {
					color: #fff;
					background: #fff;
				}
			}

			.content {
				background: #eee;
				padding-bottom: 30px;
				border: 1px solid #ccc;
				padding-top: 17px;
				margin: 0 auto;
				position: relative;
				text-align: center;
				margin-bottom: 8px;

				h1 {
					color: #000;
					font-size: 20px;
					padding: 5px;
				}

				h3 {
					text-transform: uppercase;
					color: #999;
					font-weight: 100;
					font-size: 12px;
					margin-top: -5px;
				}

				.form-wrapper {
					margin: 0 auto;
					position: relative;
					margin-left: 6%;

					.input {
						width: 90%;
						float: left;
						margin-right: 2%;
						border: 1px solid #ddd;
						padding: 5px;
						text-align: left;
						color: #ccc;
						font-weight: 100;
						background: #fff;
					}

					.textarea {
						width: 90%;
						float: left;
						margin-right: 2%;
						border: 1px solid #ddd;
						padding: 5px;
						text-align: left;
						color: #ccc;
						font-weight: 100;
						background: #fff;
						height: 200px;
						margin-bottom: 10px;
					}

					.send {
						width: 20%;
						background: #0d6db8;
						color: #fff;
						height: 30px;
						float: left;
						text-align: center;
						line-height: 30px;
					}
				}

				.trailer {
					margin-top: 5px;
					font-size: 11px;
					color: #999;
					padding: 10px;
				}

			}
			padding: 10px;
			min-height: 100px;

		}

		.simple {
			position: relative;

			.blobby {

				p {
					color: #ddd;
					background: #ddd;
					line-height: 15px;
				}

				.br {
					color: #fff;
					background: #fff;
				}
			}

			.content {
				background: #eee;
				padding-bottom: 30px;
				border: 1px solid #ccc;
				padding-top: 17px;
				margin: 0 auto;
				position: relative;
				text-align: center;
				margin-bottom: 8px;

				h1 {
					color: #000;
					font-size: 20px;
					padding: 5px;
				}

				h3 {
					text-transform: uppercase;
					color: #999;
					font-weight: 100;
					font-size: 12px;
					margin-top: -5px;
				}

				.form-wrapper {
					margin: 0 auto;
					position: relative;
					margin-left: 6%;

					.input {
						width: 70%;
						float: left;
						margin-right: 2%;
						border: 1px solid #ddd;
						padding: 5px;
						text-align: left;
						color: #ccc;
						font-weight: 100;
						background: #fff;
					}

					.send {
						width: 20%;
						background: #0d6db8;
						color: #fff;
						height: 30px;
						float: left;
						text-align: center;
						line-height: 30px;
					}
				}

				.trailer {
					margin-top: 5px;
					font-size: 11px;
					color: #999;
					padding: 10px;
				}

			}
			padding: 10px;
			min-height: 100px;

		}


		.naked {
			position: relative;

			.blobby {

				p {
					color: #ddd;
					background: #ddd;
					line-height: 15px;
				}

				.br {
					color: #fff;
					background: #fff;
				}
			}

			.content {
				padding-bottom: 45px;
				margin: 0 auto;
				position: relative;

				.form-wrapper {
					margin: 0 auto;
					position: relative;
					margin-left: 3%;

					.input {
						width: 33%;
						float: left;
						margin-right: 2%;
						border: 1px solid #ddd;
						padding: 5px;
						color: #ccc;
						font-weight: 100;
					}

					.send {
						width: 20%;
						background: #0d6db8;
						color: #fff;
						height: 30px;
						float: left;
						text-align: center;
						line-height: 30px;
					}
				}
			}
			padding: 10px;
			min-height: 100px;

		}
	}

	iframe {
		border: 0 solid;
	}


	.embed {

		.zbs_poweredby {
			font-size: 11px;
		}

		.selected {
			border: 4px solid #ddd !important;
		}

		.simple,
		.naked,
		.cgrab {
			border: 1px solid #ddd;
		}

		.zbsForm_success {
			display: none;
		}

		.simple {
			position: relative;

			.blobby {

				p {
					color: #ddd;
					background: #ddd;
					line-height: 16px;
				}

				.br {
					color: #fff;
					background: #fff;
				}
			}

			.content {
				background: #eee;
				padding-bottom: 30px;
				border: 1px solid #ccc;
				padding-top: 17px;
				margin: 0 auto;
				position: relative;
				text-align: center;
				margin-bottom: 8px;

				h1 {
					color: #000;
					font-size: 20px;
					padding: 5px;
				}

				h3 {
					text-transform: uppercase;
					color: #999;
					font-weight: 100;
					font-size: 12px;
					margin-top: -5px;
				}

				br {
					display: none;
				}

				.form-wrapper {
					margin: 0 auto;
					position: relative;
					margin-left: 6%;

					.input {
						width: 70%;
						float: left;
						margin-right: 2%;
						border: 1px solid #ddd;
						padding: 5px;
						text-align: left;
						font-weight: 100;
						background: #fff;
					}

					.send,
					input[type="submit"] {
						width: 20%;
						background: #0d6db8;
						color: #fff;
						height: 33px;
						float: left;
						text-align: center;
						line-height: 12px;
						border: 0;
					}
				}

				.trailer {
					margin-top: 5px;
					font-size: 11px;
					color: #999;
					padding: 10px;
				}

			}
			padding: 10px;
			min-height: 100px;

		}


		.cgrab {
			position: relative;

			.blobby {

				p {
					color: #ddd;
					background: #ddd;
					line-height: 16px;
				}

				.br {
					color: #fff;
					background: #fff;
				}
			}

			.content {
				background: #eee;
				padding-bottom: 30px;
				border: 1px solid #ccc;
				padding-top: 17px;
				margin: 0 auto;
				position: relative;
				text-align: center;
				margin-bottom: 8px;

				h1 {
					color: #000;
					font-size: 20px;
					padding: 5px;
				}

				h3 {
					text-transform: uppercase;
					color: #999;
					font-weight: 100;
					font-size: 12px;
					margin-top: -5px;
				}

				.form-wrapper {
					margin: 0 auto;
					position: relative;
					margin-left: 6%;

					.input {
						width: 90%;
						float: left;
						margin-right: 2%;
						border: 1px solid #ddd;
						padding: 5px;
						text-align: left;
						font-weight: 100;
						background: #fff;
					}

					.textarea {
						width: 90%;
						float: left;
						margin-right: 2%;
						border: 1px solid #ddd;
						padding: 5px;
						text-align: left;
						font-weight: 100;
						background: #fff;
						height: 200px;
						margin-bottom: 10px;
					}

					.send,
					input[type="submit"] {
						width: 20%;
						background: #0d6db8;
						color: #fff;
						height: 33px;
						float: left;
						text-align: center;
						line-height: 12px;
						border: 0;
					}
				}

				.trailer {
					margin-top: 5px;
					font-size: 11px;
					color: #999;
					padding: 10px;
				}

			}
			padding: 10px;
			min-height: 100px;

		}

		.naked {

			.zbs_poweredby {
				font-size: 11px;
				text-align: right;
				margin-top: 8px;
			}

			.zbsForm_success {
				text-align: center;
				margin-top: 10px;
				font-size: 14px;
			}
			position: relative;

			.blobby {

				p {
					color: #ddd;
					background: #ddd;
					line-height: 16px;
				}

				.br {
					color: #fff;
					background: #fff;
				}
			}

			.content {
				padding-bottom: 45px;
				margin: 0 auto;
				position: relative;

				.form-wrapper {
					margin: 0 auto;
					position: relative;
					margin-left: 3%;

					.input {
						width: 33%;
						float: left;
						margin-right: 2%;
						border: 1px solid #ddd;
						padding: 5px;
						font-weight: 100;
					}

					.send,
					input[type="submit"] {
						width: 20%;
						background: #0d6db8;
						color: #fff;
						height: 33px;
						float: left;
						text-align: center;
						line-height: 12px;
						border: 0;
					}
				}
			}
			padding: 10px;
			min-height: 100px;

		}
	}

	.clear {
		clear: both;
	}

}
