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

// The invoice builder CSS
// WH Fractured from admin global (where it shouldn't be) 11/10/16

//this is for the new invoicing design
.post-type-zerobs_invoice,
#zerobs-invoice-edit-box {

	.clear {
		clear: both;
	}

	.zbs-inv-no {
		width: 80%;
		float: left;
		font-size: 14px;
	}

	.zbs-inv-ref {
		font-size: 22px;
		color: #15b717;
	}

	#zbs_invoice {
		min-height: 500px;
	}

	.twitter-typeahead {
		width: 100%;
	}

	.zbs-add-new-js-assign-to {
		padding: 10px;
		background: #f1f1f1;
		// wh removed, as now links color: #4699d5;
		font-weight: 900;

		a {
			color: #4699d5;
		}
	}

	#billing-to {
		width: 90% !important;
		float: left;

		.inv-to-form {
			float: left;
			font-weight: 900;
			margin-top: 5px;
			margin-right: 10px;
			margin-bottom: 4px;

		}

		.inv-to-input {
			float: left;
			width: 100%;
			margin-bottom: 20px;
			margin-left: 5%;
		}

		.edit-c {
			float: left;
			font-size: 12px;
			margin-bottom: 16px;
			display: none;
		}

		// fix for typeahead splaying out
		.wh-large select,
		.wh-large input,
		input.typeahead {
			max-width: 100%;
		}

		th {
			vertical-align: middle;
			font-size: 18px;
			font-weight: 100;
		}
	}

	#zbs-add-new-row {
		padding: 8px;
		background: #f5f5f5;
		color: #000;
		cursor: pointer;
		text-align: center;
		border: 1px solid #ddd;
	}

	.tax-select {
		height: 35px;
	}

	.row-amount {
		line-height: 35px;
	}


	.invoice-grand-total-wrapper,
	#zbs-invoice-partial-payments {
		margin-top: 5px !important;

		.due-row {
			background: #f5f5f5;
			border-bottom: 1px solid #ddd;
		}

		.partial-row,
		.due-row,
		.partial-row-tab {
			padding: 15px;
			border-top: 1px solid #ddd;
			border-left: 1px solid #ddd;
			border-right: 1px solid #ddd;
			//padding-bottom:30px; */
			overflow-x: auto;

			.zlabel {
				font-weight: 900;
			}

			.third {
				float: left;
				width: 32%;
				margin-right: 1%;
			}

			.invoice-discount-total {
				margin-top: -9px;
			}

			#invoice_discount_total {
				float: left;
				width: 32% !important;
			}

			#invoice_postage_total {
				width: 32%;
				float: right;
			}

			.half {
				width: 50%;
				float: left;
			}

			.one-four {
				width: 25%;
				float: left;
			}

			.two-four {
				width: 50%;
				float: left;
			}

			.ri {
				text-align: right;
			}

			.half::after {
				clear: both;
			}
		}


		.partial-row-tab {
			font-weight: 900;
			padding-bottom: 13px !important;
			background: #f5f5f5;
		}


		.inv-totals {

			.inv-amount {
				background: #f5f5f5;
			}

			.grand-total {
				background: #f5f5f5;
				border-bottom: 1px solid #ddd;
			}

			.topmm5 {
				margin-top: -5px;
			}

			.topmm10 {
				margin-top: -10px;
			}

			.zbs-heavy {
				font-weight: 900;
			}

			.pbot30 {
				padding-bottom: 30px;
			}

			.total-row {
				padding: 15px;
				border-top: 1px solid #ddd;
				border-left: 1px solid #ddd;
				border-right: 1px solid #ddd;
				padding-bottom: 30px;

				.zlabel {
					font-weight: 900;
				}

				.third {
					float: left;
					width: 32%;
					margin-right: 1%;
				}

				.invoice-discount-total {
					margin-top: -9px;
				}

				#invoice_discount_total {
					float: left;
					width: 32% !important;
				}

				#invoice_postage_total {
					width: 32%;
					float: right;
				}

				.half {
					width: 50%;
					float: left;
				}

				.one-four {
					width: 25%;
					float: left;
				}

				.two-four {
					width: 50%;
					float: left;
				}

				.ri {
					text-align: right;
				}

				.half::after {
					clear: both;
				}
			}
		}

		#tax-total-block {

			.total-row {
				padding-bottom: 30px;

				.zlabel {
					font-weight: 900;
				}

				.ri {
					text-align: right;
				}
			}
		}
	}


	.zbs-invoice-row {
		padding: 5px;
		border: 2px solid #ddd;
		margin-top: 10px;

		.remove-row {
			font-size: 15px;
			margin-top: 10px;
			color: #000;
		}

		.third {
			width: 200px !important;
		}
	}

	.sug-wrap {
		font-size: 15px;

		.ico {
			width: 20px;
			float: left;
			margin-top: 5px;
		}

		.inner {
			float: left;
			margin-left: 10px;

			.name {
				font-weight: 900;
			}

			.email {
				font-size: 13px;
				font-weight: 300;
				margin-top: -9px;
			}
		}

		.inner::after {
			clear: both;
		}
	}

	.sug-wrap:hover {
		background: #f1f1f1;
		color: #4699d5;
	}

	.mark-as-paid {
		margin-left: 10px;
		background-color: #008000;
		color: #fff;
		padding: 7px;
		font-size: 25px;
		text-transform: uppercase;
		font-weight: 900;
		cursor: pointer;
	}

	.hide {
		display: none;
	}

	#zbs_invoice_preview {
		text-decoration: none;
	}

	#zbs_top_wrapper {
		position: relative;

		.zbs-invoice-topper {
			width: 50%;
			float: right;
			min-width: 335px;

			input,
			select {
				// WH: changed for symmetry with rest of page width:80%;
				width: 100%;
				float: left;
			}

			th {
				text-align: right;
			}
		}
	}

	#zbs_invoice_send_test2:focus {
		outline: 0 !important;
	}

	#assign-to {
		width: 50%;
		float: right;

		.zbs-controls {
			float: left;
		}

		select {
			width: 90%;
		}

		th {
			vertical-align: middle;
			font-size: 18px;
			font-weight: 100;
		}
	}

	#zbs_invoice_alerts {
		position: absolute;
		margin-top: -64px;
		width: 100%;
		margin-left: -13px;

		#zbs_success {
			display: none;
			background: #008000;
			padding: 10px;
			color: #fff;
			font-weight: 100;
			font-size: 14px;

			.fa {
				color: #00a700;
				font-size: 20px;
				margin-right: 10px;
			}
		}
	}

	#zbs_invoice_test_alerts {
		position: relative;
		width: 99%;
		margin-bottom: 20px;
		margin-top: 15px;

		#zbs_success,
		#zbs_test_success {
			display: none;
			background: #008000;
			padding: 10px;
			color: #fff;
			font-weight: 100;
			font-size: 14px;

			.fa {
				color: #00a700;
				font-size: 20px;
				margin-right: 10px;
			}
		}
	}


	// here we split into two, so headers can match
	.business-info-toggle,
	.billing-to-title {
		font-size: 20px;
		font-weight: 100;

		.fa {
			color: #428bca;
			margin-right: 10px;
			font-size: 20px;
			font-weight: 100;
		}
	}

	#zbs-business-info-wrapper {

		/* WH removed, seems to look better without ? */
		//width: 30%;
		//margin-top: -35px;
		margin-bottom: 1em;

		.business-info-toggle {
			cursor: pointer;
		}

		.business-info {
			display: none;

			.zbs-table {
				margin-top: 9px;
				font-size: 14px;
				font-weight: 100;
				margin-left: 33px;

				.top-pad {

					td {
						padding-top: 20px;
					}
				}

				td {
					border: 0;
					padding: 0;
				}
			}

			.edit-or-add {
				font-weight: 100;
				margin-left: 33px;
			}
		}

	}

	#zbs-invoice-customiser {
		padding: 15px 10px 15px 10px;
		background: #f5f5f5;
		margin-left: -12px;
		margin-right: -12px;
		margin-top: -6px;
		border-bottom: 1px solid #eee;

		.header {
			float: left;
			font-size: 18px;
			line-height: 34px;
			margin-right: 10px;
			font-weight: 100;
		}
	}

	.top-row {

		.row-amount {
			padding-top: 12px;
		}
	}

	#partials {
		margin-top: 20px;
	}

	#invoice_totals,
	#partials {
		width: 100%;
		border-top: 2px solid #ccc;
		border-right: 2px solid #ccc;

		.zbs_grand_total {

			.bord-l {
				border-left: 2px solid #ccc;
			}

			.bord {
				background: #f5f5f5;
				color: #000;
				font-weight: 800;
				border-bottom: 2px solid #ccc;
			}
		}

		.tax_total {
			display: none;
		}

		._1 {
			display: block;
		}

		tr {
			height: 35px;
		}

		.hide {
			display: none;
		}

		.bord {

			input {
				text-align: right;
				float: right;
				box-shadow: none;
			}
		}

		.bord-l {
			text-align: right;
			border-left: 2px solid #ccc !important;
		}

		td.bord {
			padding: 5px;
			border: 1px solid #ccc;
		}

		.row-amount {
			background: #f5f5f5;
			color: #000;
			font-weight: 400;
			height: 20px;
			text-align: right;
			border-right: 2px solid #ccc !important;
		}
	}

	#zbs-invoice-items {

		.first {
			width: 60%;
		}

		.second,
		.third,
		.forth,
		.fifth {
			width: 10%;
		}

		.zbs-item-block {
			position: relative;

			tr {
				width: 90%;
			}

			textarea {
				width: 100%;
			}

			row-amount {
				padding-top: 12px;
			}

			.tapad {
				padding: 0 0 0 10px;
			}

			input[type="number"] {
				height: 36px;
				line-height: 1;
				box-shadow: none;
				text-align: center;
			}
		}

		.row-amount {
			background: #f5f5f5;
			color: #000;
			font-weight: 800;
			text-align: right;
			height: 35px;
		}

		.zbs-row-actions {
			cursor: pointer;
			border: 1px solid #ccc;
			color: #999;
			font-size: 13px;
			font-weight: 100;
			text-align: center;
		}

		.padding {
			height: 15px;
		}

		#tblock1 {

			.remove-row {
				display: none;
			}
		}

		.zbs-item-name {
			width: 100%;
			height: 28px;
			border: 0;
			box-shadow: none;
		}

		.top-row,
		.bottom-row {
			border-left: 2px solid #ccc;
			border-right: 2px solid #ccc;
		}

		.bottom-row,
		.row-amount {
			border-bottom: 2px solid #ccc;
			border-right: 2px solid #ccc;
		}

		.selected {

			.top-row,
			.bottom-row {
				border-left: 4px solid #428bca;
			}
		}

		.top-row {

			td {
				border-bottom: 1px dashed #ddd !important;
			}
		}

		.table > tbody > tr > td,
		.table > tbody > tr > th,
		.table > tfoot > tr > td,
		.table > tfoot > tr > th,
		.table > thead > tr > td,
		.table > thead > tr > th {
			border-top: 0 solid #fff !important;
		}

		.add-row {
			border-left: 0 solid #fff;
		}
	}

	#zbs_invoice_actions {
		padding: 15px 10px 15px 10px;
		margin-left: -12px;
		margin-right: -12px;
		margin-top: -6px;
		border-bottom: 1px solid #eee;
		text-align: right;
		height: 65px;

		.zbs-invoice-status {
			margin-top: -2px;
			float: left;
			padding: 10px;

			.draft {
				background-color: #ddd;
				text-transform: uppercase;
				color: #fff;
				padding: 7px;
				font-weight: 900;
				font-size: 25px;
			}

			.unpaid {
				background-color: #ffd800;
				text-transform: uppercase;
				color: #fff;
				padding: 7px;
				font-weight: 900;
				font-size: 25px;
			}

			.paid {
				background-color: #008000;
				text-transform: uppercase;
				color: #fff;
				padding: 7px;
				font-weight: 900;
				font-size: 25px;
			}

			.overdue {
				background-color: #f00;
				text-transform: uppercase;
				color: #fff;
				padding: 7px;
				font-weight: 900;
				font-size: 25px;
			}
		}

		button {
			margin-right: 2px;
		}

		.btn-primary {
			color: #fff;
			background-color: #428bca;
			border: 1px solid #428bca;
			border-width: 0;
			font-size: 15px;
			padding: 7px;
			font-weight: 300;
			border-radius: 4px;
		}

		.btn-secondary {
			background: #ddd;
			border: 1px solid #ddd;
			border-width: 0;
			font-size: 15px;
			padding: 7px;
			font-weight: 300;
			border-radius: 4px;
		}
	}

	#zbs_invoice_logos {
		float: left;
		width: 30%;

		.hide {
			display: none !important;
		}

		.show {
			display: block !important;
		}
	}

	#publish {
		display: none;
	}

	#submitdiv {

		span {
			display: none;
		}

		.handlediv {
			display: none;
			border-bottom: 0 solid #fff;
		}
	}

	#postbox-container-1 {
		margin-top: 20px;
	}

	.zbs-memo-box {
		width: 50%;
		display: none;
	}

	.zbs-plus {
		font-size: 21px;
		font-weight: 100;
		color: #428bca;
	}

	.zbs-memo-ta {
		width: 40%;
	}

	.zbs-memo-hide {
		font-size: 12px;
		font-weight: 100;
		color: #428bca;
		cursor: pointer;
	}

	.zbs-memo-hide:hover {
		text-decoration: underline;
	}

	.zbs-add-memo-trigger {
		cursor: pointer;
	}

	.zbs-italic {
		font-style: italic;
		font-weight: 100;
	}

	.zbs-file-types {
		text-transform: uppercase;
		font-weight: 900;
	}

	.wh-logo-set {
		width: 100%;
		position: relative;
		display: none;
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: 12px;

		.zbs-remove,
		.zbs-update {
			cursor: pointer;
		}

		img {
			max-width: 80%;
		}

		.zbs-logo-options {
			display: none;
			position: absolute;
			top: 0.5em;
			left: 0.5em;
			font-size: 14px;

			span {
				background: #fff;
				border-radius: 2px;
				margin: 3px;
				padding: 2px 4px;
			}
		}
	}

	.wh-logo-set:hover {

		.zbs-logo-options {
			display: block;
		}
	}

	.wh-logo {
		margin-top: 20px;
		padding: 30px;
		width: 100%;
		background: var(--jp-gray-0);
		margin-bottom: 20px;
		border-radius: 4px;
		border: 1px dashed var(--jp-gray-20);
		cursor: pointer;

		.fa {
			color: #000;
			margin-right: 5px;
			margin-bottom: 10px;
			font-size: 40px;
			font-weight: 100;
		}

		.wh-logo-text {
			font-weight: 300;
			color: #000;
			font-size: 18px;
			margin-left: 20px;
			position: absolute;
			top: 63px;
			display: contents;
			white-space: nowrap;
		}
	}
}


#zbsInvoiceActionBlocker {

	position: absolute;
	top: 11px;
	right: 85px;
	width: 200px;
	height: 40px;
	background: rgba(255, 255, 255, 0.74);
	text-align: center;
	line-height: 31px;

}

//Invoicing custom fields styling
.wh-metatab {
	margin-bottom: 10px !important;

	.wh-large {

		label {
			font-size: 18px;
			font-weight: 100;
		}
	}
}


// PDF extension install
#zbswhPDFNotice {


	position: absolute;
	top: -23px;
	right: 160px;
	text-align: right;
	width: 200px;
	background: #fff;
	padding: 10px;
	border: 1px solid #428bca;
	z-index: 10000;
	border-radius: 5px;

	.zbsCloseThisAndLog {

		position: absolute;
		top: 0;
		left: 5px;
		font-size: 16px;

	}

	.zbsCloseThisAndLog:hover {

		cursor: pointer;
		color: #008000;

	}

}


//ZBS invoice actions
.zbs-invoice-actions-bottom {
	margin-top: 20px;
	padding: 2px;
	margin-left: -12px;
	margin-right: -12px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: -12px;
	padding-bottom: 12px;
	padding-top: 10px;
}

.zbs-actions-side {
	margin-top: 15px;
}

.zbs-what {
	font-size: 15px;
	line-height: 26px;
}


#zbs-send-test {
	width: 60%;
	margin-left: 20%;
	margin-top: 100px;
	border: 1px solid #ddd;
	padding: 20px;
	border-radius: 6px;
}

#zbs-modal-invoice-test {
	margin-top: 10px;
	margin-bottom: 13px;
}


.postbox table.form-table {
	margin-bottom: 22px !important;
}


// send inv via email modal box:
.zbs-invoice-email-modal-field {

	display: block;
	margin-top: 0.7em;

	#zbs_invoice_email_modal_toemail {

		// adapted from .form-control
		display: inline-block;
		margin-left: 0.7em;
		width: 250px;
		height: 34px;
		padding: 6px 12px;
		font-size: 14px;
		line-height: 1.42857;
		color: #555;
		background-color: #fff;
		background-image: none;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
	}

	input[type="checkbox"] {
		margin-right: 0.7em;
		vertical-align: middle;
		line-height: 1;
	}

	label {
		margin-bottom: 0;
	}
}

@media screen and (max-width: 782px) {

	div.zbs-invoice-topper th {
		text-align: left !important;
	}
}
