/*=============================
	 Fonts
===============================*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/*=============================
	01. Variable CSS start
===============================*/
:root {
	--body-font-family: "Roboto", sans-serif;
	--primary: #E64434;
	--black: #171717;
	--background: #F0F4F5;
	--white: #ffffff;
	--body-font-size: 12px;
	--body-font-weight: 400;
	--body-line-height: 1.8em;
	--transision: all 0.3s ease-out 0s;
	--border: #BABABA;
	--paragraph: #5a5a5a;
}


/*=============================
	02. Common CSS start
===============================*/
* {
	margin: 0;
	padding: 0;
	outline: none;
	box-sizing: border-box;
}

body {
	font-family: var(--body-font-family);
	font-weight: var(--body-font-weight);
	font-size: var(--body-font-size);
	line-height: var(--body-line-height);
	color: var(--black);
	overflow-x: hidden;
}

a,
span,
small {
	display: inline-block;
}

a,
button {
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
	text-decoration: none;
}

a:focus,
.btn:focus,
button:focus {
	text-decoration: none;
	outline: none;
	box-shadow: none;
}


ul,
ol {
	margin: 0;
	padding: 0;
}

p {
	font-size: var(--body-font-size);
	font-weight: var(--body-font-weight);
	line-height: var(--body-line-height);
	color: var(--paragraph);
	margin: 0;
	padding: 0;
}

.uppercase {
	text-transform: uppercase;
}

.capitalize {
	text-transform: capitalize;
}

*::-moz-selection {
	background: var(--primary);
	color: var(--white);
	text-shadow: none;
}

::-moz-selection {
	background: var(--primary);
	color: var(--white);
	text-shadow: none;
}

::selection {
	background: var(--primary);
	color: var(--white);
	text-shadow: none;
}

/* img {
	height: 100%;
	object-fit: cover;
	object-position: center;
} */

/* line limit */

.line_limit_1 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1 !important;
	-webkit-box-orient: vertical;
}

.line_limit_2 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical;
}

.line_limit_3 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical;
}

.line_limit_4 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 4 !important;
	-webkit-box-orient: vertical;
}

.line_limit_6 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 6 !important;
	-webkit-box-orient: vertical;
}

.line_limit_7 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 7 !important;
	-webkit-box-orient: vertical;
}

.line_limit_8 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 8 !important;
	-webkit-box-orient: vertical;
}

.line_limit_9 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 9 !important;
	-webkit-box-orient: vertical;
}

.line_limit_10 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 10 !important;
	-webkit-box-orient: vertical;
}


/* invoice area start  */
.invoice_area {
	padding: 60px;
}

.invoice_area .top_logo {
	display: flex;
	align-items: center;
	gap: 40px;
}

.invoice_area .top_logo .logo {
	flex: 0 0 auto;
}

.invoice_area .text {
	text-align: center;
	flex-grow: 1;
}

.invoice_area .text .logo_title {
	font-size: 20px;
	font-weight: 600;
	margin-left: -150px;
}

.invoice_area .invoice_info {
	display: flex;
	align-items: center;
	gap: 40px;
	justify-content: space-between;
	/* margin-top: 30px; */
}

.invoice_area .t_title {
	font-size: 12px;
	font-weight: 400;
	margin-bottom: 4px;
}

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

.invoice_area .right_info .t_title span {
	font-weight: 400;
}

.invoice_area .invoice_table {
	margin-top: 10px;
}

.invoice_area .invoice_table table {
	font-family: arial, sans-serif;
	border-collapse: collapse;
	width: 100%;
}

.invoice_area .invoice_table table thead {
	background-color: var(--background);
}

.invoice_area .invoice_table td,
th {
	border: 1px solid var(--border);
	text-align: left;
	padding: 8px;
}

.invoice_area .invoice_table tr:nth-child(even) {
	background-color: var(--background);
}

.invoice_area .invoice_sub_total {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.invoice_area .invoice_sub_total .left_info {
	width: 50%;
}

.invoice_area .invoice_sub_total .left_info ul {
	list-style: none;
}

.invoice_area .invoice_sub_total .left_info ul li {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.invoice_area .invoice_sub_total .left_info ul li i {
	width: 34px;
}

.invoice_area .invoice_sub_total .right_info {
	width: 41%;
}


.invoice_area .invoice_sub_total .right_info table {
	font-family: arial, sans-serif;
	border-collapse: collapse;
	width: 100%;
}

.invoice_area .invoice_sub_total .right_info table thead {
	background-color: var(--background);
}

.invoice_area .invoice_sub_total .right_info table tfoot {
	background-color: var(--black);
	color: var(--white);
}

.invoice_area .invoice_sub_total .right_info td,
th {
	border: 1px solid var(--border);
	text-align: left;
	padding: 8px;
}

.invoice_area .invoice_sub_total .right_info tr:nth-child(even) {
	background-color: var(--background);
}

.invoice_area .hotline_number h3 {
	background-color: var(--background);
	border-radius: 0;
	padding: 20px 20px;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	margin-top: 10px;
}

.invoice_area .invoice_footer {
	/* margin-top: 200px; */
	position: fixed;
	bottom: 0;
	width: 85%;
}

.invoice_area .invoice_footer .devider {
	margin-bottom: 30px;
	display: flex;
	align-items: center;
}

.invoice_area .invoice_footer .devider .line{
	flex-grow: 1;
	border-bottom: 2px dashed var(--border);
}

.invoice_area .invoice_footer .devider img {
	transform: rotate(-90deg);
	flex: 0 0 auto;
}

.invoice_area .invoice_footer .top_logo {
	margin-top: 10px;
}

.invoice_area .invoice_footer .text .logo_title {
	font-size: 20px;
}

.invoice_area .invoice_footer .invoice_info {
	margin-top: 10px;
}

.invoice_area .invoice_footer .invoice_info .due_amount {
	font-size: 16px;
	font-weight: 500;
	color: var(--black);
	/*background-color: var(--black);*/
	padding: 10px 70px;
}


/* invoice area end  */