html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-print-color-adjust: exact;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 15px;
min-width: 350px;
margin: 0;
}
h1, h2, h3, h4, h5, h6, ul, li, p {
margin: 0;
padding: 0;
color: #444444;
}
h1 {
font-size: 36px;
line-height: 44px;
}
h2 {
font-size: 30px;
line-height: 36px;
}
h3 {
font-size: 24px;
line-height: 29px;
}
h4 {
font-size: 21px;
line-height: 26px;
}
h5 {
font-size: 18px;
line-height: 22px;
}
h6 {
font-size: 16px;
line-height: 20px;
}
p {
font-size: 16px;
line-height: 22px;
}
label {
font-weight: 600;
font-size: 16px;
}
span {
font-size: 16px;
}
table {
border-collapse: collapse;
border-spacing: 0;
background-color: transparent;
}
td, th {
padding: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&:before, &:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
.col-sm-6 {
float: left;
width: 50%;
}
.rtl .col-sm-6 {
float: right;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
.col-md-3,
.col-md-9 {
float: left;
}
.rtl .col-md-3,
.rtl .col-md-9 {
float: right;
}
.col-md-12 {
float: left;
width: 100%;
}
.rtl .col-md-12 {
float: right;
}
.col-md-9 {
width: 75%;
}
.col-md-3 {
width: 25%;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.col-md-3,
.col-sm-6,
.col-md-9,
.col-md-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
th {
text-align: left;
}
.rtl th {
text-align: right;
}
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
> {
thead > tr > th,
tbody > tr > th,
tfoot > tr > th,
thead > tr > td,
tbody > tr > td,
tfoot > tr > td {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #dddddd;
}
thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #dddddd;
}
caption + thead > tr:first-child > th,
colgroup + thead > tr:first-child > th,
thead:first-child > tr:first-child > th,
caption + thead > tr:first-child > td,
colgroup + thead > tr:first-child > td,
thead:first-child > tr:first-child > td {
border-top: 0;
}
tbody + tbody {
border-top: 2px solid #dddddd;
}
}
.table {
background-color: #ffffff;
}
}
table {
col[class*="col-"] {
position: static;
float: none;
display: table-column;
}
td[class*="col-"],
th[class*="col-"] {
position: static;
float: none;
display: table-cell;
}
}
.table-responsive {
overflow-x: auto;
min-height: 0.01%;
}
@media screen and (max-width: 767px) {
.table-responsive {
width: 100%;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
> .table {
margin-bottom: 0;
> {
thead > tr > th,
tbody > tr > th,
tfoot > tr > th,
thead > tr > td,
tbody > tr > td,
tfoot > tr > td {
white-space: nowrap;
}
}
}
}
}
.clearfix {
&:before,
&:after {
content: "";
display: table;
}
}
.container {
&:before,
&:after {
content: "";
display: table;
}
}
.container-fluid {
&:before,
&:after {
content: "";
display: table;
}
}
.row {
&:before,
&:after {
content: "";
display: table;
}
}
.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
clear: both;
}
.pull-right {
float: right !important;
}
.rtl .pull-right {
float: left !important;
}
.pull-left {
float: left !important;
}
.rtl .pull-left {
float: right !important;
}
.rtl {
direction: rtl;
}
.invoice-wrapper {
position: relative;
padding-bottom: 40px;
.invoice-header {
margin-top: 40px;
}
}
.invoice-header {
.store-name {
height: 128px;
width: 100%;
display: flex;
align-items: center;
}
.title {
font-size: 60px;
font-weight: 600;
display: block;
color: #444444;
margin-top: 6px;
}
.invoice-info {
margin-left: 4px;
label {
color: #444444;
}
span {
font-weight: 400;
font-size: 15px;
float: right;
color: #444444;
}
}
}
.rtl {
.invoice-header {
.invoice-info {
margin-left: 0;
margin-right: 4px;
span {
float: left;
}
}
}
}
.invoice-body .invoice-details {
margin-top: 25px;
}
.invoice-details h5,
.invoice-address h5 {
font-weight: 600;
color: #444444;
margin-bottom: 8px;
}
.invoice-details {
.table-responsive {
overflow: hidden;
margin: 0 -8px;
}
.table {
margin-bottom: 0;
td {
font-size: 15px;
color: #444444;
border: none;
padding: 4px 8px;
&:first-child {
font-weight: 600;
color: #555555;
}
}
}
}
.invoice-body .invoice-address {
margin-top: 25px;
}
.invoice-address > span {
font-size: 15px;
display: block;
color: #444444;
padding: 4px 0;
}
.cart-list {
border: none;
margin-top: 40px;
.table {
margin: 0;
border-bottom: 1px solid #e9e9e9;
}
thead tr th {
font-weight: 600;
font-size: 16px;
color: #444444;
padding-left: 0;
padding-right: 0;
border-bottom: 1px solid #e9e9e9;
}
.table-responsive {
padding: 0 15px;
td {
border-top: 1px solid #f1f1f1;
color: #444444;
padding: 16px 0 18px;
vertical-align: middle;
&:nth-child(4) span {
font-weight: 600;
}
}
}
.option {
margin-top: 5px;
white-space: nowrap;
span {
font-size: 14px;
display: block;
span {
display: inline-block;
margin-left: 2px;
color: #9a9a9a;
}
}
}
}
.rtl {
.cart-list {
.option {
span {
span {
margin-left: 0;
margin-right: 2px;
}
}
}
}
}
.invoice-body .total {
width: 300px;
margin: 20px 15px 0 0;
.table {
margin-bottom: 0;
tr:last-child {
border-top: 1px solid #e9e9e9;
}
td {
font-size: 16px;
border: none;
color: #444444;
padding: 6px 0;
&:last-child {
text-align: right;
}
}
tr:last-child td {
font-weight: 600;
}
.coupon-code {
font-weight: 600;
}
}
}
.rtl .invoice-body .total {
margin: 20px 0 0 15px;
.table {
td:last-child {
text-align: left;
}
}
}
@media screen and (max-width: 991px) {
.invoice-header {
.store-name {
height: auto;
h1 {
margin: auto;
}
}
.invoice-header-right {
float: none !important;
margin: auto;
display: table;
}
.invoice-info {
margin-bottom: 20px;
}
}
.invoice-body .cart-list {
margin-top: 40px;
}
}
@media screen and (max-width: 767px) {
.cart-list {
.table-responsive td {
border: none;
}
.table {
border-top: 1px solid #e9e9e9;
}
thead {
display: none;
}
tr {
border-bottom: 1px solid #f1f1f1;
&:last-child {
border-bottom: none;
}
}
tbody td {
&:nth-child(1) {
display: block;
padding: 15px 0 5px 0;
> span {
font-size: 17px;
white-space: pre-wrap;
}
}
&:nth-child(2),
&:nth-child(3) {
display: block;
padding: 0 0 5px 0;
}
&:nth-child(4) {
display: block;
padding: 0 0 15px 0;
}
label {
font-size: 15px;
+ span {
font-size: 15px;
margin-left: 5px;
}
}
}
}
.rtl .cart-list {
tbody td {
label {
+ span {
margin-left: 0;
margin-right: 5px;
}
}
}
}
}
@media screen and (min-width: 768px) {
.visible-xs {
display: none;
}
}
@media screen and (max-width: 530px) {
.invoice-wrapper {
padding-bottom: 20px;
}
}
@media print {
.invoice-wrapper .invoice-header {
margin-top: 30px;
}
.invoice-header {
.col-md-3 {
float: left;
}
.col-md-9 {
float: right;
}
.invoice-header-right {
margin-right: 0 !important;
}
}
.rtl {
.invoice-header {
.invoice-header-right {
margin-left: 0 !important;
}
}
}
.rtl {
.invoice-header {
.col-md-3 {
float: right;
}
.col-md-9 {
float: left;
}
}
}
.invoice-wrapper .invoice-header-right {
margin-right: 15px;
}
.rtl {
.invoice-wrapper .invoice-header-right {
margin-right: 0;
margin-left: 15px;
}
}
.invoice-details-wrapper .col-md-6 {
width: 50%;
float: left;
}
.rtl {
.invoice-details-wrapper .col-md-6 {
float: right;
}
}
.invoice-details .table td:last-child,
.invoice-address > span {
color: #444444;
}
.invoice-body .cart-list {
margin: 30px 0 0;
}
.cart-list .table-responsive tbody td label {
display: none;
}
}
@page {
size: A4;
margin: 0;
}