/* =========================================================
   VANDRIVE CRM — CONTRACT
========================================================= */

.contract-page,
.contract-page *,
.pdf-contract,
.pdf-contract * {
	box-sizing: border-box !important;
}

@page {
	size: A4 portrait;
	margin: 0;
}


/* =========================================================
   CONTRACT PAGE
========================================================= */

.contract-page,
.pdf-contract {
	width: 210mm !important;
	min-width: 210mm !important;
	max-width: 210mm !important;

	height: 297mm !important;
	min-height: 297mm !important;
	max-height: 297mm !important;

	padding: 4mm !important;

	overflow: hidden !important;

	background: #fff !important;
	color: #000 !important;

	font-family: "Open Sans", Arial, sans-serif !important;
	font-size: 8px !important;
	line-height: 1.25 !important;
}

.contract-page {
	margin: 0 auto !important;
}

.contract-page input,
.contract-page textarea {
	text-transform: uppercase !important;
}


/* =========================================================
   PDF CLONE
========================================================= */

.pdf-contract {
	position: fixed !important;
	top: 0 !important;
	left: -10000px !important;

	margin: 0 !important;

	z-index: -9999 !important;
}


/* =========================================================
   HEADER
========================================================= */

.contract-header-row {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: flex-start !important;

	width: 100% !important;

	margin: 0 0 10px 0 !important;
	padding: 0 !important;
}

.contract-header-left {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;

	width: 75% !important;
	min-width: 0 !important;
}

.contract-logo {
	flex: 0 0 auto !important;
}

.contract-logo img {
	display: block !important;

	max-height: 45px !important;

	margin: 0 10px 0 0 !important;
}

.contract-company-info {
	flex: 1 1 auto !important;
	min-width: 0 !important;

	line-height: 1.35 !important;
}

.contract-company {
	font-weight: 700 !important;
}

.contract-header-right {
	width: 25% !important;
	flex: 0 0 25% !important;

	text-align: center !important;
}

.contract-title {
	font-size: 14px !important;
	line-height: 1.2 !important;

	white-space: nowrap !important;
}

.contract-number {
	margin: 2px 0 0 0 !important;

	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
}


/* =========================================================
   SECTION
========================================================= */

.contract-section {
	display: block !important;

	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	break-inside: avoid !important;
	page-break-inside: avoid !important;
}

.contract-section-title {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;

	width: 100% !important;

	gap: 6px !important;

	margin: 12px 0 !important;
	padding: 0 !important;

	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;

	text-transform: uppercase !important;
}


/* =========================================================
   ROW
========================================================= */

.contract-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;

	width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* =========================================================
   COLUMNS
========================================================= */

.contract-col {
	display: block !important;

	width: auto !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 2px !important;
}

.contract-col:first-child {
	padding-left: 0 !important;
}

.contract-col:last-child {
	padding-right: 0 !important;
}

.contract-col-1 {
	flex: 1 1 0% !important;
}

.contract-col-2 {
	flex: 2 1 0% !important;
}

.contract-col-3 {
	flex: 3 1 0% !important;
}

.contract-col-4 {
	flex: 4 1 0% !important;
}


/* =========================================================
   VALUE ROW
========================================================= */

.contract-value-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;

	width: 100% !important;

	height: 22px !important;
	min-height: 22px !important;
	max-height: 22px !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden !important;

	border: 0 !important;
	border-bottom: 1px dotted #000 !important;
}

.contract-value-row > .contract-col {
	height: 21px !important;
	min-height: 21px !important;
	max-height: 21px !important;

	padding-top: 0 !important;
	padding-bottom: 0 !important;

	overflow: hidden !important;
}


/* =========================================================
   INPUT
========================================================= */

.contract-page .contract-col > input {
	display: block !important;

	width: 100% !important;

	height: 21px !important;
	min-height: 21px !important;
	max-height: 21px !important;

	margin: 0 !important;
	padding: 2px 2px 0 2px !important;

	overflow: hidden !important;

	border: 0 !important;
	border-radius: 0 !important;

	outline: 0 !important;

	background: transparent !important;

	box-shadow: none !important;

	font-family:
		"IBM Plex Sans",
		"Open Sans",
		Arial,
		sans-serif !important;

	font-size: 11px !important;
	font-weight: 400 !important;
	line-height: 16px !important;
	letter-spacing: 0.2px !important;

	color: #0f172a !important;

	appearance: none !important;
	-webkit-appearance: none !important;
}

.contract-page input[readonly] {
	cursor: default !important;

	color: #0f172a !important;
	opacity: 1 !important;

	-webkit-text-fill-color: #0f172a !important;
}

.contract-date,
.contract-phone-input,
.contract-afm-input,
.contract-money input {
	font-variant-numeric: tabular-nums !important;
}

.contract-date {
	letter-spacing: 0.3px !important;
}


/* =========================================================
   LABEL ROW
========================================================= */

.contract-label-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;

	width: 100% !important;

	height: 17px !important;
	min-height: 17px !important;
	max-height: 17px !important;

	margin: 6px 0 !important;
	padding: 5px 0 0 0 !important;

	overflow: visible !important;

	font-size: 8px !important;
	font-weight: 400 !important;
	line-height: 10px !important;
}

.contract-label-row > .contract-col {
	display: block !important;

	height: auto !important;
	min-height: 12px !important;
	max-height: none !important;

	margin: 0 !important;

	padding-top: 0 !important;
	padding-bottom: 0 !important;

	overflow: visible !important;

	color: #000 !important;

	font-size: 8px !important;
	font-weight: 400 !important;
	line-height: 10px !important;

	white-space: normal !important;
}


/* =========================================================
   PDF INPUT VALUE
========================================================= */

.pdf-input-value {
	display: flex !important;
	align-items: flex-start !important;

	width: 100% !important;

	height: 20px !important;
	min-height: 20px !important;
	max-height: 20px !important;

	margin: 0 !important;
	padding: 3px 2px 0 2px !important;

	overflow: hidden !important;

	font-family:
		"IBM Plex Sans",
		"Open Sans",
		Arial,
		sans-serif !important;

	font-size: 10px !important;
	font-weight: 400 !important;
	line-height: 14px !important;
	letter-spacing: 0.2px !important;

	color: #0f172a !important;

	white-space: nowrap !important;
}


/* =========================================================
   TEXTAREA
========================================================= */

.contract-page textarea,
.pdf-textarea-value {
	display: block !important;

	width: 100% !important;

	height: 50px !important;
	min-height: 50px !important;
	max-height: 50px !important;

	margin: 0 !important;
	padding: 5px !important;

	overflow: hidden !important;

	border: 0 !important;
	border-radius: 0 !important;

	outline: 0 !important;

	resize: none !important;

	box-shadow: none !important;

	font-family:
		"IBM Plex Sans",
		"Open Sans",
		Arial,
		sans-serif !important;

	font-size: 11px !important;
	font-weight: 400 !important;
	line-height: 23px !important;
	letter-spacing: 0.5px !important;

	color: #0f172a !important;

	background:
		repeating-linear-gradient(
			transparent,
			transparent 22px,
			#000 23px
		) !important;
}

.pdf-textarea-value {
	white-space: pre-wrap !important;
	word-break: break-word !important;
}


/* =========================================================
   TERMS
========================================================= */

.contract-terms-wrap {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;

	width: 100% !important;

	gap: 20px !important;

	margin: 0 !important;
	padding: 10px 0 0 0 !important;
}

.contract-terms-right {
	width: 50% !important;
	flex: 0 0 50% !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 9px !important;
	line-height: 1.3 !important;
	text-align: justify !important;

}

.contract-terms-left {
	width: 50% !important;
	flex: 1 1 50% !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 9px !important;

}

.contract-terms-left img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: 430px !important;
	margin: 0 auto !important;
	object-fit: contain !important;

}


/* =========================================================
   FOOTER
========================================================= */

.contract-footer {
	display: flex !important;
	flex-direction: row !important;
	justify-content: center !important;
	align-items: flex-end !important;
	width: 100% !important;
	gap: 80px !important;
	margin: 60px 0 0 0 !important;
	padding: 0 !important;

}

.contract-signature {
	display: block !important;

	width: 200px !important;
	min-width: 200px !important;

	margin: 0 !important;
	padding: 5px 0 0 0 !important;

	border: 0 !important;
	border-top: 1px solid #000 !important;

	text-align: center !important;
}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 1024px) {
	.page {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.contract-page {
		margin: 0 auto !important;
	}
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 768px) {
	.page {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.contract-page {
		margin: 0 !important;
	}

	.contract-header-row,
	.contract-header-left,
	.contract-row,
	.contract-terms-wrap,
	.contract-footer {
		flex-direction: row !important;
	}
}


/* =========================================================
   PRINT
========================================================= */

@media print {
	@page {
		size: A4 portrait;
		margin: 0;
	}

	html,
	body {
		width: 210mm !important;
		height: 297mm !important;

		margin: 0 !important;
		padding: 0 !important;

		overflow: hidden !important;

		background: #fff !important;
	}

	body * {
		visibility: hidden !important;
	}

	.contract-page,
	.contract-page * {
		visibility: visible !important;
	}

	.contract-page {
		position: absolute !important;

		top: 0 !important;
		left: 0 !important;

		width: 210mm !important;
		min-width: 210mm !important;
		max-width: 210mm !important;

		height: 297mm !important;
		min-height: 297mm !important;
		max-height: 297mm !important;

		margin: 0 !important;
		padding: 4mm !important;

		overflow: hidden !important;
	}

	/* 16 × 16 ICONS WHEN PRINTING */

	.contract-page .contract-title-icon {
		width: 16px !important;
		height: 16px !important;

		min-width: 16px !important;
		max-width: 16px !important;

		min-height: 16px !important;
		max-height: 16px !important;

		flex: 0 0 16px !important;

		object-fit: contain !important;
	}

	.contract-section,
	.contract-header-row,
	.contract-terms-wrap,
	.contract-footer {
		break-inside: avoid !important;
		page-break-inside: avoid !important;
	}

	.no-print,
	#print-btn,
	.print-bar,
	.print-btn,
	.pdf-contract {
		display: none !important;
	}
}