/*!
 * Jetpack CRM Extension:
 * ~ Extension Name
 * http://jetpackcrm.com
 * V1.0
 *
 * Copyright 2020 Automattic
 *
 * Date: 29/05/16
 */

// global
.zbs-upgrade-label {
	background: #008000;
	color: #fff;
	padding: 4px 8px;
	border-radius: 3px;
}

// upgrade
.zbscrm-lite-notice {

	width: 40%;
	min-width: 400px;
	max-width: 700px;
	background: #fff;
	border: 1px solid #ccc;
	padding: 10px 30px;
	border-radius: 3px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 60px;
	text-align: center;

	h2 {
		font-size: 20px;
	}

	p {
		font-size: 18px;
	}
}

// below here is clone of csv importer pro


// Wrapper for all app pages
.zbscrm-csvimport-wrap {

	h2 {
		text-align: center;
		font-size: 20px;
	}

	// Stage 0: upload
	.zbscrm-upload-csv {

		box-sizing: border-box;
		display: block;
		margin: 0;
		padding: 0;
		width: 100%;
		overflow: hidden;
		position: relative;
		top: 10px;

		// explanation
		.zbscrm-csv-import-help {

			color: #555d66;
			font-size: 18px;
			font-style: normal;
			margin: 0;
			padding: 40px 0 0;
			text-align: center;

		}

		// form
		.zbscrm-csv-import-form {
			background: #fafafa;
			border: 1px solid #e5e5e5;
			padding: 30px;
			margin: 30px auto;
			max-width: 380px;

			.csv-import__start-btn {
				text-align: center;
				margin-top: 20px;
			}
		}
	}

	// Stage 1: map
	.zbscrm-csv-map {

		// label
		.zbscrm-csv-map-help {

			color: #555d66;
			font-size: 18px;
			font-style: normal;
			margin: 0;
			padding: 40px 0 0;
			text-align: center;

		}

		// form
		.zbscrm-csv-map-form {

			.zbscrm-csv-map-ignorefirst {
				max-width: 500px;
				padding: 7px 10px;
				margin: 10px;
				border: 1px solid #e0dee6;
				border-radius: 5px;
				background: #fff;
				margin-left: auto;
				margin-right: auto;
				text-align: left;

				label {
					margin-left: 20px;
				}
			}

			// field to map
			.zbscrm-csv-map-field {

				max-width: 500px;
				padding: 7px 10px;
				margin: 10px;
				border: 1px solid #e0dee6;
				border-radius: 5px;
				background: #fff;
				margin-left: auto;
				margin-right: auto;

				// span label
				span {

					padding: 0 9px 0 0;
					color: #c1c0c0;
					font-size: 16px;
					line-height: 34px;
					height: 34px;

				}

				span.to {

					padding: 0 21px 0 0;

				}

				// users submitted val
				.zbscrm-csv-map-user-field {

					color: #555d66;
					font-size: 16px;
					font-style: normal;
					margin-bottom: 10px;
					display: inline-block;

				}

				.zbscrm-csv-map-zbs-field {

					line-height: 34px;
					height: 34px;

					// select map
					select {
						color: #555d66;
						font-size: 16px;
						font-style: normal;
						margin-bottom: 10px;
						line-height: 34px;
						height: 34px;
						display: inline-block;
					}

				}


			}

		}

	}


	// Stage 2: Confirm
	.zbscrm-confirmimport-csv {

		// label
		.zbscrm-csv-help {

			color: #555d66;
			font-size: 18px;
			font-style: normal;
			margin: 0;
			padding: 40px 0 0;
			text-align: center;

		}


		// form
		.zbscrm-csv-import-form {

			width: 440px;
			padding: 7px 10px;
			margin: 10px;
			border: 1px solid #e0dee6;
			border-radius: 5px;
			background: #fff;
			margin-left: auto;
			margin-right: auto;

			// field list
			.zbscrm-impcsv-map {

				// from
				.zbscrm-impcsv-from {

					width: 30%;
					height: 20px;
					line-height: 20px;
					margin-top: 20px;
					margin-bottom: 20px;
					display: inline-block;

					font-weight: 800;
					text-align: right;
					color: #555d66;

				}

				// to
				.zbscrm-impcsv-to {

					width: 30%;
					height: 20px;
					line-height: 20px;
					margin-top: 20px;
					margin-bottom: 20px;
					display: inline-block;

					font-weight: 400;
					text-align: left;
					color: #555d66;


				}

				// arrow between
				.zbscrm-impcsv-arrow {

					width: 30%;
					height: 20px;
					line-height: 20px;
					margin-top: 20px;
					margin-bottom: 20px;
					display: inline-block;

					font-weight: 800;
					text-align: center;
					color: #ccc;


				}


			}

		}


	}


	// Stage 3 Run
	.zbscrm-final-stage {

		// debug log
		.zbscrm-import-log {

			width: 600px;
			padding: 7px 10px;
			margin: 10px;
			border: 1px solid #e0dee6;
			border-radius: 5px;
			background: #fff;


			// line
			.zbscrm-import-log-line {

				// accent ico's
				i.fa,
				span {
					color: #008000;
				}

			}

		}

	}


}
