// variables
$color-body-text: #111;
$color-border: $color-body-text;
$page-margins: 1.25cm 1.25cm;
$font-body: 'Open Sans', sans-serif;
$font-head: 'Open Sans Condensed', sans-serif;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
//$font-size-num: 8.2;
$font-size-num: 7;
$font-size: $font-size-num + pt;

*, *:before, *:after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

@mixin bodyStyles {
	font-family: $font-body;
	font-size: $font-size;
	font-weight: 400;
	line-height: 1.2em;
	background: #fff !important;
	color: $color-body-text;
	position: relative;
}

@function pt-to-em( $pt, $basept ){
	@return ( $pt / $basept ) + 0em;
}

body {
	@include bodyStyles();
	background: transparent !important;

	&.draft,
	&.terminated,
	&.not-approved,
	&.duplicate,
	&.cancel{
		&:before,
		&:after {
			font-size: ( $font-size-num * 10 ) + pt;
			font-weight: bold;
			color: red;
			text-align: center;
			display: block;
			opacity: 0.6;
			position: absolute;
			top: 250pt;
			left: 0;
			transform: rotate(-45deg);
		}
	}
	&.duplicate {
		&:before,
		&:after {
			content: 'DUPLICATE';
		}
	}
	&.cancel {
		&:before,
		&:after {
			content: 'CANCEL';
		}
	}
	&.draft {
		&:before,
		&:after {
			content: 'DRAFT';
		}
	}

	&.terminated {
		&:before,
		&:after {
			content: 'TERMINATED';
		}
	}

	&.not-approved {
		&:before,
		&:after {
			content: 'NOT APPROVED';
		}
	}
}

@page {
	font-family: $font-body;
	font-size: ( $font-size-num * 0.95 ) + pt;
	font-style: italic;
	margin: $page-margins;

	@bottom-left {
		content: 'Utopia Industries Pvt. Limited';
	}

	@bottom-center {
		content: 'Page ' counter(page) ' of ' counter(pages);
	}

	@bottom-right {
		width: 126px;
		height: 122px;
		margin-top: -130px;
	}
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: pt-to-em( 16, $font-size-num );
}

h3 {
	font-size: pt-to-em( 13, $font-size-num );
}

h4 {
	font-size: pt-to-em( 12, $font-size-num );
}

h5 {
	font-size: pt-to-em( 11, $font-size-num );
}

h6 {
	font-size: pt-to-em( 10, $font-size-num );
}

h1, h2, h3, h4, h5, h6 {
	font-family: $font-head;
	font-weight: 700;
	page-break-after:avoid;
	page-break-inside:avoid;
	text-transform: uppercase;
	margin: 1.5em 0 1em;

	&.no-margin-top {
		margin-top: 0;
	}

	&.no-margin-bottom {
		margin-bottom: 0;
	}
}

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

.text-uppercase {
	text-transform: uppercase;
}

.text-center {
	text-align: center;
}

.font-monospace {
	font-family: $font-family-monospace;
}

b {
	font-weight: 700;
}

img {
	page-break-inside:avoid;
	page-break-after:avoid;
}

table, pre {
	//page-break-inside:avoid;
}
ul, ol, dl  {
	page-break-before:avoid;
}

table {
	width: 100%;
	border-collapse: collapse;
	border: none;
	//table-layout: fixed;

	td {
		border: none;
	}

	&.bordered {
		&, td {
			border: 1px solid $color-border;
		}
	}

	&.borderless {
		&, td {
			border: none;
			padding: 0;
		}
	}
}

.tr-footer {
	text-transform: uppercase;
}

td {
	padding: pt-to-em( 3, $font-size-num ) pt-to-em( 6, $font-size-num );
	vertical-align: top;

	&.spacer {
		padding: 1em 0;
	}

	.tr-header & {
		font-family: $font-head;
		font-size: 1em;
		font-weight: bold;
		text-transform: uppercase;
		color: #fff;
		background: $color-body-text;
	}

	&.pd-0 {
		padding: 0;
	}
}

ul, ol {
	padding: 0 pt-to-em( 10, $font-size-num );
	margin: 0;
}

ul {
	list-style-type: disc;
}

.spacer {
	width: 100%;
	height: 1px;
	margin: 2em 0 1em;
}

// grid
.row {
	overflow: hidden;
	width: 100%;
}

.col {
	float: left;

	&.col-half {
		width: 49.96%;

		&.col-padded {
			&:first-child {
				padding-right: ( $font-size-num / 2 ) + pt;
			}

			&:last-child {
				padding-left: ( $font-size-num / 2 ) + pt;
			}
		}
	}

	&.col-two-third {
		width: 66.6666%;
	}

	&.col-one-third {
		width: 33.3333%;

		&.col-padded {
			padding-left: ( $font-size-num / 2 ) + pt;
			padding-right: ( $font-size-num / 2 ) + pt;

			&:first-child {
				padding-left: 0;
			}

			&:last-child {
				padding-right: 0;
			}
		}
	}
}

.visitor-photo {
	text-align: center;
	width: 23%;
	height: 77pt;
	line-height: 77pt;
	margin-left: 5pt;
	border: 1px solid $color-border;

	img {
		display: inline-block;
		width: 90%;
		height: auto;
	}
}