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

#jpcrm-woosync-hub-page {

	margin-top: 4em;

	#jpcrm-woo-logo {

		text-align: center;
		margin: 1.5em auto;
		display: table;

		img {

			vertical-align: middle;

		}

		#jpcrm-woosync-jpcrm-logo {
			max-width: 250px;
		}

		#jpcrm-woosync-woo-logo {
			max-width: 230px;
		}

		i {

			vertical-align: middle;
			display: table-cell;
			padding: 0 1em;
			font-size: 1.5em;
			color: #069e08;

		}

	}

	#jpcrm-woosync-messages {

		max-width: 800px;
		margin: auto;
		margin-bottom: 1em;

	}

	#jpcrm-woosync-page-body {

		max-width: 800px;
		margin: auto;

		.jpcrm-woosync-settings-button {

			font-size: 1.3em;
			margin-right: 0.5em;

		}

		.jpcrm-woosync-stats-header {

			font-size: 1.3em;
			margin: 0.5em 1em;
			display: flex;
			align-items: center;

			span {

				color: #8594a2;
				margin-right: 5px;
				margin-left: 5px;

			}

			i {

				margin-left: 0.5em;

			}

			.jpcrm-woosync-stats-url {

				line-height: 0.8;

			}

		}

		h2.ui.header {

			margin: 1em;

		}

		.jpcrm-woosync-recap {
			margin: 0;
			opacity: 0.5;
		}

		#jpcrm-woo-stats {
			position: relative;
			margin: 5px;
		}


		#jpcrm-woo-stats-nothing-yet {

			display: table;

			div {

				display: table-cell;
				vertical-align: middle;

				div {

					display: block;

				}

				p {

					color: #fff;

				}


			}

		}

		#jpcrm-woosync-stats-container {

			.jpcrm-woosync-stat {

				display: table;
				min-height: 230px;
				width: 100%;
				border: solid 2px #2185d0 !important;
				color: #2185d0 !important;
				background-color: #fff !important;

				div.jpcrm-woosync-stat-container {

					display: table-cell;
					vertical-align: middle;
					text-align: center;

					// numbers
					font-size: 3em;
					font-weight: 700;

					// ico
					i {
						display: inline-block;
						margin: 0 0 0.4em 0;
					}

					// labels
					div.jpcrm-woosync-stat-label {

						font-size: 0.5em;
						margin-top: 1em;
						line-height: 1.2;
					}

				}
			}

		}

		// debug mode output:
		#jpcrm-woosync-debug-output {

			background: #f1e9e9;
			color: #000;
			line-height: 2;
			overflow-x: scroll;
			padding: 0.5em 1em;

		}

	}

	// low key grey links for admin admins really
	#jpcrm-woosync-quiet-restart-link {

		margin-top: 1.2em;
		text-align: center;
		opacity: 0.6;

		a {
			text-decoration: underline;
		}
	}

	.status.green {
		color: #069e08 !important;
	}

	.status.orange {
		color: #f2711c !important;
	}

	.status.red {
		color: #db2828 !important;
	}

	.jpcrm-clickable:hover {
		cursor: pointer;
	}
}