@import '../global/_variables'; // global variables.
@import '../global/components/_mixins'; // global mixings.

/***
Invoice page 2
***/
.invoice-content-2{
	background-color: #fff;
	padding: 80px 70px;

	// BEGIN : BORDER CONTAINERS
	&.bordered{
		border:1px solid;
		border-color: $general-panel-border-color;
	}
	// END : BORDERED CONTAINERS  


	.invoice-head{
		margin-bottom: 50px;

		.invoice-logo{
			text-align: center;

			>img{
				float: left;
				margin-right: 45px;
			}

			>h1{
				float: left;
				font-size: 17px;
				font-weight: 700;
				color: #39424a;
				margin-top: 48px;
			}

		}

		.company-address{
			text-align: right;
			font-size: 14px;
			color: #7e8691;
		}
	}

	.invoice-title{
		font-size: 12px; 
		font-weight: 600;
		letter-spacing: 1px;
		color: #9ea8b7;
	}

	.invoice-desc{
		font-size: 14px;
		color: #4e5a64;
		font-weight: 600;

		&.inv-address{
			font-size: 13px;
			color:#7e8691;
			font-weight: 400;
		}

		&.grand-total{
			font-size: 16px;
			font-weight: 700;
		}
	}

	.invoice-cust-add{
		margin-bottom: 50px;
	}

	.invoice-body{

		.text-center{
			text-align: center;
		}

		tr:last-child{
			border-bottom:1px solid #e7ecf1;
		}

		th, td{
			vertical-align: middle;
			padding-left:40px;
			padding-right:40px;

			&:first-child{
				padding-left: 0;
			}

			&:last-child{
				padding-right: 0;
			}
		}

		h3{
			font-size: 14px;
			font-weight: 600;
			color: #4e5a64;
			margin-bottom: 0;
		}

		p{
			font-size: 13px;
			color: #7e8691;
		}
		
	}

	.print-btn{
		float:right;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 1px;
	}
}

// END

// MOBILE

@media (max-width:1024px){
	.invoice-content-2{

		.invoice-head{

			.invoice-logo{

				>img{
					width: 130px;
    				margin-top: 26px;

				}

			}
		}
	}
}

@media (max-width:991px){
	.invoice-content-2{
		padding:40px 30px;
	}
}

@media (max-width:480px){
	.invoice-content-2{

		.invoice-head{

			.invoice-logo{
				>h1{
					margin-top: 10px;
				}
			}
		
			.company-address{
				font-size: 12px;
			}
		}
	}
}