Untitled
unknown
plain_text
a year ago
45 kB
4
Indexable
/*------------------------------------------------------------------ Project:Digital Invoica Author: The_Krishna Last change: 6 December, 2023 Primary use: Invoice Generate ------------------------------------------------------------------ */ /*-----------------------[Table of contents]------------------------ 1.Default CSS 2.Agency Invoice CSS 3.Hotel Invoice CSS 4.Bus Booking Invoice CSS 5.Money Exchange Invoice CSS 6.Car Invoice CSS 7.Movie Booking Invoice CSS 8.Stadium Booking Invoice CSS 9.Internet Booking Invoice CSS 10.Flight Booking Invoice CSS 11.Train Booking Invoice CSS 12.Ecommrece Invoice CSS 13.Fitness Invoice CSS 14.Hospital Invoice CSS 15.Photostudio Invoice CSS 16.Cleaning Invoice CSS 17.Travel Invoice CSS 18.Student Invoice CSS 19.Coffee Invoice CSS ------------------------------------------------------------------ */ /*------------------------ [Color codes] ------------------------ Background: #F8F9FD, #FFFFFF Content: #505050S, #12151C a (visited): #000000 a (standard): #000000 a (hover): #000000 a (active): #000000 ------------------------------------------------------------------ */ /************************* 1.Default CSS **************************/ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: #F8F9FD; width: auto; height: 100%; color: #ffffff; font-family: 'Inter', sans-serif; margin: 0; } body { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; } *, ::after, ::before { box-sizing: border-box; } a:focus, a { outline: none; text-decoration: none; cursor: pointer; } .bg-black { background: #12151C; } .bg-red { background: #EF4444; } .bg-green { background: #00D061; } .bg-yellow { background: #F59E0B; } .font-sm{ color: #505050; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: 22px; } .font-sm-small{ font-family: Inter; font-size: 11px; font-style: normal; font-weight: 300; line-height: 22px; } .font-sm-700{ font-family: Inter; font-size: 14px; font-style: normal; font-weight: 700; line-height: 22px; } .font-sm-500{ color: #505050; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 500; line-height: 22px; } .font-md{ font-family: Inter; font-size: 16px; font-style: normal; font-weight: 700; line-height: 24px; } .font-md-500{ color:#12151C; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .font-md-grey{ font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .font-18{ color: #FFF; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 400; line-height: 24px; } .font-18-700{ font-family: Inter; font-size: 18px; font-style: normal; font-weight: 700; line-height: 24px; } .font-18-500{ font-family: Inter; font-size: 18px; font-style: normal; font-weight: 500; line-height: 24px; } .font-lg{ font-family: Inter; font-size: 20px; font-style: normal; font-weight: 700; line-height: 24px; } .color-blue{ color: #1D4ED8 } .bg-blue{ background: #1D4ED8; } .bg-dark-green{ background: #FFB400; } .table-bg{ background: #F5F5F5; } .color-green{ color: #FFB400; } .color-white{ color: #FFF; } .color-light-black{ color: #12151C; } .color-grey{ color: #505050; } .color-purple{ color: #7E22CE; } .color-yellow{ color: #F59E0B; } .color-dark-yellow{ color: #FFA801; } .color-pink{ color: #E11D48; } .color-dark-blue{ color: #3742FA; } .pt-10{ padding-top: 10px; } .pt-40{ padding-top: 40px; } .mtb-14{ margin: 14px 0px !important; } .invo-to-wrap{ text-align: left; } .invo-pay-to-wrap{ text-align: right; } .pl-10{ padding-left: 10px !important; } .pr-10{ padding-right: 10px !important; } .pr-20{ padding-right: 20px; } .padding{ padding: 10px; } .pt-20{ padding-top: 20px; } .pt-0{ padding-top: 0; } .text-right{ text-align: right !important; } .text-center{ text-align: center !important; } .text-left{ text-align: left !important; } .invo-total-table .tax-row td{ padding: 20px 0; } .hotel-sub { padding-left: 70px!important; } .width-50{ width: 50%; } .d-none{ display: none; } /************************* 2.Header CSS **************************/ .text-invoice { background-image: url('../images/hotel/txt-img.png'); background-repeat: no-repeat; width: 100%; height: auto; top: auto; bottom: 0; left: 0; right: 0; background-size: auto; background-position: bottom center; } .container { max-width: 850px; margin: 0 auto; padding: 0 50px; } .invoice-content-wrap { background:white; position: relative; height: 100%; width: 100%; } .invoice-container { max-width: 880px; margin: 0 auto; padding: 30px 15px; } .wid-20{ width: 20%; } .wid-40{ text-align: start; width: 102px; } .wid-50{ width: 50%; } .logo img { display: block; height: 100%; } /************************* 2.Agency Invoice CSS **************************/ .invoice-logo-content { display: flex; flex-wrap: nowrap; justify-content: space-between; } .invoi-date-wrap.invoi-date-wrap-agency{ padding-bottom: 0; } .agency-logo { width: 230px; height: 150px; clip-path: polygon(0 1%, 100% 0%, 100% 67%, 0% 100%); background: #1D4ED8; position: absolute; top: 0; padding: 30px; } .invoice-owner-conte-wrap { display: flex; justify-content: space-between; -webkit-box-pack: justify; } .invoice-table { border-collapse: collapse; width: 100%; max-width: 750px; margin: 0 auto; white-space: nowrap; } .agency-service-table .invoice-table thead th { color: white; padding: 10px 0; } .serv-wid { width: 32%; } .desc-wid { width: 36%; } .qty-wid { width: 10%; } .pric-wid { width: 12%; } .tota-wid { width: 10%; } .invo-tb-body { border-bottom: 2px solid #12151C; border-top: 2px solid #12151C; } .invoice-table td{ padding: 20px 0; } .invo-tb-body .invo-tb-row { border-bottom: 1px solid #505050; } .invo-addition-wrap { display: flex; justify-content: space-between; } .invo-add-info-content { width: 50%; } .invo-bill-total { width: 50%; position: relative; } .invo-bill-total table { width: 100%; border-collapse: collapse; white-space: nowrap; float: right; } .invoice-header-contact { justify-content: space-between; display: flex; align-items: center; } .invo-cont-wrap { display: flex; flex-wrap: nowrap; align-items: center; } .agency-contact-sec{ padding: 15px 50px; margin-top: 40px; } .invo-social-name { padding-left: 10px; } .agency-bottom-content { background: #F8F9FD; border-radius: 0px 0px 20px 20px; padding: 30px 0 0; } .agency1 .agency-bottom-content, .hotel .agency-bottom-content{ padding-bottom: 0px !important; } .invo-buttons-wrap { display: flex; justify-content: center; align-items: center; border-radius: 26px; background: #FFF; box-shadow: 0px 25px 20px -20px rgba(18, 21, 28, 0.25); width: fit-content; padding: 2px; margin-left: auto; margin-right: auto; margin-bottom: 15px; } .invo-btns { display: inline-flex; align-items: center; margin: 0 1px; } .invo-social-icon{ display: flex; align-items: center; justify-content: center; } .invo-buttons-wrap .invo-btns .print-btn { background: #EF4444; padding: 12px 24px; border-radius: 24px 0px 0px 24px; display: flex; align-items: center; color: white; } .invo-buttons-wrap .invo-btns .download-btn { background: #00D061; padding: 12px 24px; border-radius: 0px 24px 24px 0px; display: flex; align-items: center; color: white; } .invo-buttons-wrap .invo-btns .back-btn { background: #3B82F6; padding: 12px 24px; border-radius: 0px 24px 24px 0px; display: flex; align-items: center; color: white; border-radius: 24px 0px 0px 24px; } .invo-note-wrap, .note-title { display: flex; align-items: left; } .invo-note-wrap, .note-title { display: flex; align-items: center; justify-content: center; } .note-title span, .note-desc { padding-left: 10px; } @media print { .d-print-none { display: none!important; } } .invo-btns span { padding-left: 10px; } .invoice-agency-details { text-align: right; padding-top: 20px; } .invoice-logo-content.bg-black { padding:30px 50px ; } .invoice-txt { color: #FFF; text-align: right; font-family: Inter; font-size: 40px; font-style: normal; font-weight: 400; line-height: 40px; } .invo-head-wrap { display: flex; justify-content: end; padding-bottom: 10px; } .pt-32{ padding-top: 32px; } .agency-table thead tr th:first-child{ text-align: left; } .agency-table thead tr th:nth-child(2){ text-align: left } .agency-table thead tr th:nth-child(3), .agency-table tbody tr td:nth-child(3){ text-align: center; } .agency-table thead tr th:nth-child(4), .agency-table tbody tr td:nth-child(4){ text-align: center; } /************************* 3.Hotel Invoice CSS **************************/ .invoice-logo-hotel { background-image: url(../images/hotel/blue-bg.svg); background-repeat: no-repeat; width: 40%; height: auto; background-size: cover; padding: 30px 50px; } .pink-bg{ background-image: url(../images/hotel/pink-bg.png); background-repeat: no-repeat; width: 100%; height: auto; background-size: auto; background-position: right; padding: 30px 0; background-size: contain; } .invoice-logo-hotel-left{ background-image: url(../images/hotel/black-bg.svg); background-repeat: no-repeat; width: 60%; height: auto; background-size: cover; padding: 21px 50px; } .invo-head-content.invoice-logo-hotel-left { position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } img.txt-img { position: absolute; display: flex; justify-content: center; align-items: center; } .invo-head-content.invoice-logo-hotel-left .invo-head-wrap,.invo-head-content.invoice-logo-hotel-left .invo-head-wrap.invoi-date-wrap { width: 100%; } .booking-content-wrap { display: flex; justify-content: space-between; column-gap: 4px; } .detail-col { width: 100%; background: #F5F5F5; padding: 9px 10px; } .second-row{ margin-top: 4px; } .item-wid { width: 18%; } .desc-wid { width: 36%; } .qty-wid { width: 10%; } .tax-row.bottom-border, .disc-row.bottom-border { border-bottom: 2px solid #12151C; } .payment-table-wrap { padding: 10px 20px; background: #F5F5F5; margin-top: 35px; position: relative; z-index: 10; } table.invo-payment-table.invo-payment-table { width: 100%; } .invo-payment-table { border-collapse: collapse; } .payemnt-wid, .date-wid, .trans-wid, .amount-wid { width: 33.33%; text-align: left; padding: 10px 0; } .invo-paye-row { border-top: 2px solid #12151C; } .payment-desc.payment-desc { padding: 20px 0 0; } .wid-40-hotel{ width: 135px; } .hotel-table thead tr th{ padding-bottom: 10px; } .hotel-table thead tr th:first-child{ text-align: left; } .hotel-table thead tr th:nth-child(2){ text-align: left; } /************************* Restaurant CSS **************************/ .sno-wid { width: 5%; } .re-desc-wid { width: 22%; } .re-price-wid { width: 12%; } .re-qty-wid { width: 15%; } .re-price-wid-qty{ width: 20%; } .rest-payment-bill { display: flex; } .payment-wrap { border: 2px solid #12151C; padding: 0px 20px 0px 20px; display: inline-block; } .signature-wrap { text-align: center; align-items: center; position: relative; left: 19%; padding-top: 50px; } .bus-invo-no-date-wrap { padding: 20px 0px; display: flex; justify-content: space-between; } .res-contact{ padding-top: 30px; } .res-bottom{ padding-bottom: 30px; } .restaurant-header{ padding: 0 50px; } .restaurant-table thead th{ padding: 10px 0; } .restaurant-table tbody td:nth-child(odd){ background: #F5F5F5; text-align: center; } .restaurant-table tbody td:nth-child(2){ padding-left: 30px; } .restaurant-table thead th:nth-child(2){ padding-left: 30px; text-align: left; } .restaurant-table thead tr th:first-child{ text-align: left; } .disc-row td { padding-bottom: 20px; } .res-pay-table-res{ border-collapse: collapse; width: 100%; } .res-pay-table-res .pay-type{ padding: 20px; } .p-0{ padding: 0px !important; } .restaurant .rest-payment-bill{ align-items: center; } .restaurant .payment-wrap{ border: 2px solid #F5F5F5; } .restaurant .invoice-logo-content{ align-items: center; } .res-no{ width: 10%; } .res-pric{ width: 12%; } .res-qty{ width: 20%; } .res-total{ width: 16%; } .restaurant .res-pay-table .pay-type{ padding: 20px; } .invoice-logo-res{ display: flex; align-items: center; justify-content: end; } /************************* 4.Bus Booking Invoice CSS **************************/ .booking-info:before { content: ''; position: absolute; border-left: 2px solid #E11D48; height: 39px; top: 12px; left: -13px; } .booking-info .circle:before { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50px; background-color: #E11D48; left: -16px; top: 7px; } .invoice-timing-wrap { display: flex; justify-content: flex-start; } .invo-time-col { width: 50%; display: inline-block; padding: 0 12px 0 18px; position: relative; } .booking-info p, .booking-info { position: relative; } .bus-detail-wrap { display: grid; grid-column: 2; grid-template-columns: auto auto auto auto; gap: 20px 30px; grid-row: 2; grid-template-columns: repeat(2, 1fr); padding: 30px; border: 2px solid #12151C; } .bus-detail-col.border-bottom { border-bottom: 1px solid #888888; padding-bottom: 20px; } .bus-detail-col { display: inline-flex; } .bus-type{ width: 50%; } .bus-header img{ display: block; } .wid-100{ width: 100%; } .bus-txt{ color: #12151C; font-family: Inter; font-size: 40px; font-style: normal; font-weight: 400; line-height: 40px; text-align: right; } .bus-header-logo { display: flex; align-items: flex-start; justify-content: space-between; } .bus-detail-sec{ margin-top: 40px; background: #F5F5F5; border: none; } .bus-detail-table thead th{ padding-bottom: 10px; } .bus-header .wid-20{ width: 40%; } .bus-detail-table thead tr th:first-child{ text-align: left; } .invo-bill-total.bus-invo-total{ width: 33.33%; } /************************* 5.Money Exchange Invoice CSS **************************/ .money-txt { color: #12151C; text-align: right; font-family: Inter; font-size: 40px; font-style: normal; font-weight: 400; line-height: 40px; } .transfer-detail-wrap { display: flex; justify-content: space-between; } .left-money-transfer { display: flex; } .right-money-transfer { border: 2px solid #12151C; padding: 20px 20px 10px; } .left-money-top-row { padding-right: 100px; } .right-money-block { display: flex; align-items: center; } .money-col-one { padding: 0 25px 0 0; display: flex; flex-wrap: wrap; flex-direction: column; } .money-col-two { padding: 0 25px 0; } .money-header{ padding-top: 50px; } .car-txt { color: #12151C; text-align: right; font-family: Inter; font-size: 40px; font-style: normal; font-weight: 400; line-height: 40px; } .black-boder { background: #12151C; height: 5px; width: 70%; } .green-boder { background: #FFB400; height: 5px; width: 30%; } .money-boder-sec { display: flex; } .money-detail-wrap{ margin-top: 40px; } .transfer-title { border-bottom: 2px solid #12151C; padding-bottom: 10px; } .money-tran-title-wrap { padding: 0 0 20px 0; } .tra-title{ padding: 10px 0 5px 0; } .mon-exchange-rate { padding-bottom: 20px; } .money-col-three { padding: 0 0 0 25px; display: flex; flex-wrap: wrap; flex-direction: column; } .money-content { text-transform: uppercase; padding-bottom: 10px; } .tra-money { padding: 5px 0 10px; } .mon-paid-left-data { padding-right: 120px; } /************************* 6.Car Invoice CSS **************************/ .disply-none { display: none; } .detail-col-car { background: rgb(255 168 1 / 8%); width: 230px; padding: 20px; } .detail-col-car1 { width: 247px; padding: 9px 10px; background: #F5F5F5; } .car-header-img{ background-image: url(../images/car/car-header-img.png); background-repeat: no-repeat; padding: 30px 50px 0 50px; } .car-bottom-sec { background-image: url(../images/car/car-footer-img.png); background-repeat: no-repeat; padding: 40px 50px 0; background-position: bottom; } .car-invoice .invo-head-wrap{ justify-content: space-between; padding-bottom: 0; } .car-detail-table thead tr th{ padding-bottom: 10px; } .invo-addition-wrap.invo-addition-wrap-car { justify-content: space-between; } .car-conta-mail-wrap { display: flex; justify-content: space-between; } .car-contact, .car-mail { display: flex; } .bus-conatct-img{ padding-right: 10px; } .bus-mail-img{ padding-right: 10px; } .car-bottom{ padding-bottom: 40px; } .car-invoice .res-pay-table-car .pay-data:last-child{ border-bottom: none; } .car-invoice .res-pay-table-car .pay-type{ padding: 20px; } .car-invoice .payment-wrap.payment-wrap-car-details{ padding: 0; } /************************* 7.Movie Booking Invoice CSS **************************/ .invoice-logo-movie { border-radius: 0px 0px 188px 0px; background: rgb(55 66 250 / 15%); padding: 30px 50px; } .movie-txt { color: #12151C; font-family: Inter; font-size: 40px; font-style: normal; font-weight: 400; line-height: 40px; } .movie-details-wrap { position: relative; display: flex; width: 100%; padding: 50px 0 0; column-gap: 30px; align-items: center; } .movie-detail-col { display: flex; align-items: center; padding: 10px 10px; } .movie-detail-col .movie-name { width: 120px; } .w-40{ width: 40%; } .invo-addition-wrap.movi-add-wrap { justify-content: flex-end; } .invoice-table.movie-table thead th { color: #12151C; padding: 10px 0; } .movie-bg{ background: #3742FA; } .invo-paye-row-movie{ border-top: 2px solid white; } .movie-must-read-wrap { padding-bottom: 40px; } .movie-title{ padding-right: 50px; } .pt-30{ padding-top: 30px; } .movie-col-left img { border-radius: 10px; } .invoice-header .invo-head-content .invo-head-content-movie:before { content: ""; border-radius: 0px 0px 0px 108px; background: #3742FA; padding: 30px 50px; position: absolute; width: 135%; right: 0; height: 100%; } .invo-head-content-movie { position: relative; } .pos-relative{ position: relative; } .invo-head-content-movie p{ padding: 30px 50px; } /************************* 8.Stadium Booking Invoice CSS **************************/ .stadium-title-txt { color: #6F8FAF; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 300; line-height: 30px; letter-spacing: 8px; } .stadium-title { background: #FF5733; padding: 50px 0 20px 20px; } .stadium-title-header { padding: 50px 0 20px 20px; } .stadium-table { display: flex; } .stadium-first-sec { width: 30%; } .stadium-second-sec{ width:70%; } .stadium-first{ display: flex; column-gap: 30px; } .stadium-second-sec-full { display: grid; grid-template-columns: repeat(2,1fr); column-gap: 30px; } .stadium-second { padding-right: 20px; padding-bottom: 40px; margin-top: 40px; position: relative; z-index: 2; } .stadium-second:before { content: ""; background: #F5F5F5; width: calc(100% + 50px); height: 100%; position: absolute; left: -50px; z-index: -1; top: 0; } .book-txt { color: #FFB400; font-family: Inter; font-size: 20px; font-style: normal; font-weight: 700; line-height: 24px; } .stadium-header{ padding-left: 50px; } .booking-info.booking-inf1 .circle:before{ background-color: #6A00FF; } .booking-info.booking-inf1:before{ border-left: 2px solid #6A00FF; } .stadium-table div:first-child { width: 100px; } .book-table thead tr th:first-child, .book-table thead tr th:nth-child(2){ text-align: left; } .book-table, .price-table{ width: 100%; border-collapse: collapse; } .book-table thead tr th:last-child, .book-table tbody tr td:last-child{ text-align: center; } .book-table tbody tr td:nth-child(3){ text-align: center; } .book-table thead tr th{ padding: 10px 0; border-bottom: 2px solid #12151C; } .book-table tbody td, .price-table tbody td { padding: 20px 0px; } .price-table thead tr th { padding: 10px 0; } .book-table tbody, .book-table tr:last-child { border: none; } .wid-26{ width: 26%; } .price-table thead tr th:first-child{ text-align: left; } .price-table thead tr th:last-child, .price-table tbody tr td:last-child{ text-align: right; } .price-table tbody tr td:nth-child(2), .price-table tbody tr td:nth-child(3){ text-align: center; } .stadium-table-total-wrap{ display: flex; justify-content: end; } .stadium-table-total-wrap { display: flex; justify-content: end; } .stadium-table-total{ width: 50%; border-collapse: collapse; } .stadium-invoice .invoice-logo-content{ align-items: center; } /************************* 9.Internet Booking Invoice CSS **************************/ .internet-txt { color: #FFB400; font-family: Inter; font-size: 40px; font-style: normal; font-weight: 700; line-height: 40px; letter-spacing: 6px; } .internet .invoice-content-wrap{ height: auto; } .internet-txt{ color: #FFB400; font-family: Inter; font-size: 40px; font-style: normal; font-weight: 700; line-height: 40px; letter-spacing: 6px; } .internet-invoice{ display: flex; column-gap: 40px; } .internet-invoice .invo-head-wrap{ justify-content: start; } .internet-content{ background-image: url(../images/internet/black-img.svg); background-repeat: no-repeat; padding: 30px 50px 0; } .detail-col-car1.internet-bg { background: rgb(96 169 23 / 8%); } .internet-invoice { padding-bottom: 105px; } .internet-header{ background-image: url(../images/internet/green-img.svg); background-repeat: no-repeat; } .pt-15{ padding-top: 15px; } .internet-table thead tr th { padding-bottom: 10px; } .internet-table thead tr th:first-child, .internet-table tbody tr td:first-child{ text-align: left; padding-left: 15px; } .internet-table thead tr th:nth-child(2){ text-align: left; } .internet-table thead tr th:last-child, .internet-table tbody tr td:last-child{ text-align: right; padding-right: 15px; } .internet-table thead tr th:nth-child(3){ text-align: left; } .internet-images{ display: flex; justify-content: space-between; align-items: center; padding-left: 50px; } .black-footer-img-sec{ position: relative; } .black-footer-img-sec:before { content: ""; width: 100px; height: 100px; background: #F5F5F5; bottom: 10px; right: 0; position: absolute; border-radius: 50px; } .black-footer-img-sec img { z-index: 1; position: relative; display: block; } .internet-add-details { width: 65%; position: relative; } .internet-bill-total { width: 35%; position: relative; } .invo-add-info-content.invo-add-info-content-internet { width: 65%; } .invo-bill-total.invo-bill-total-internet{ width: 35%; } /************************* 10.Flight Booking Invoice CSS **************************/ .flight-bg-top{ display: flex; } .color-blue-flight{ color: #6A00FF; } .booking-info.booking-info-flight .circle:before { background-color: #6A00FF; } .booking-info.booking-info-flight:before{ border-left: 2px solid #6A00FF; } .flight-booking-wrap .payemnt-wid, .date-wid, .trans-wid, .amount-wid{ width: 25%; } .flight-detail-table .invoice-table thead th { padding: 10px 0; } .flight-contact-mail-wrap{ display: flex; justify-content: center; align-items: center; column-gap: 80px; margin-bottom: 20px; padding-top: 30px; } .Flight-contact, .flight-mail { display: flex; align-items: center; } .flight-thanks-bg { background-image: url(../images/flight/footer-svg-black.svg); background-repeat: no-repeat; width: 82%; height: auto; padding: 9px 0; text-align: center; } .flight-img2{ position: absolute; right: 0; top: 0; } .flight-img1{ width: 100%; } .term-con-list { margin: 0; padding: 0; padding-left: 20px; } .signature-wrap-flight { text-align: end; padding-top: 40px; position: relative; } .flight-img { padding-top: 15px; } .flight .invoice-logo{ width: 40%; margin-top: 30px; } .flight-img1 img { display: block; } .flight-txt { color: #12151C; text-align: right; font-family: Inter; font-size: 40px; font-style: normal; font-weight: 400; line-height: 40px; } .flight-details{ width: 50%; text-align: left; } .flight-re-price-wid{ width: 16.66%; } .flight .invo-bill-total{ width: 40%; } .flight .invo-addition-wrap{ justify-content: space-between; } /************************* 11.Train Booking Invoice CSS **************************/ .train-header-sec { background: #0050EF; } .train-table thead tr th{ padding-bottom: 10px; } .train-txt { color: #FFF; text-align: center; font-family: Inter; font-size: 40px; font-style: normal; font-weight: 400; line-height: 40px; letter-spacing: 6px; padding-bottom: 30px; padding: 30px; } .train-invoice .invo-head-wrap{ justify-content: start; padding: 0 20px 20px 20px; } .color-train{ color: #0050EF; } .invoice-logo-content-flight{ padding: 0 50px; } .flight-img2:before { content: ""; background-image: url(../images/flight/black-triangel.svg); width: 100%; height: 100%; position: absolute; background-repeat: no-repeat; background-position: right; bottom: -80px; } .footer-img-sec { position: relative; display: flex; text-align: right; justify-content: flex-end; } .footer-img1 img { position: absolute; bottom:0px; left: 0; } .signature-wrap-flight:before{ content: ""; background-image: url(../images/flight/footer-traingle.svg); width: 100%; height: 118px; position: absolute; background-repeat: no-repeat; background-position: left; left: -50px; bottom: 0; } .bg-train{ background: #0050EF; } .train-thanks-bg{ padding: 20px 0; text-align: center; margin-top: 40px; } .mon-send-left-data { padding-right: 150px; } .mon-sent-content-wrap { display: flex; align-items: center; padding: 15px 0 0; } .mon-send-col-one, .mon-send-col-two { padding: 5px 0; } .w-60{ width: 60%; } .train-header{ padding-left: 50px; } .train-table thead tr th:first-child, .train-table thead tr th:nth-child(2){ text-align: left; } .train-table tbody tr td:nth-child(3){ text-align: center; } .train-table thead tr th:first-child, .train-table thead tr th:nth-child(2){ text-align: left; } .train-table thead tr th:last-child, .train-table tbody tr td:last-child{ text-align: right; } .movie-detail-col.train-detail-col{ padding: 6px 5px; } .train-invoice .invoice-logo-content{ align-items: center; } /************************* 12.Ecommrece Invoice CSS **************************/ .ecommerce .bus-invo-num, .ecommerce .bus-invo-date{ display: flex; } .ecommerce-txt { color: #FFF; font-family: Inter; font-size: 40px; font-style: normal; font-weight: 400; line-height: 40px; letter-spacing: 6px; } .ecommerce-header { display: flex; align-items: center; justify-content: space-between; background: #12151C; padding: 30px 50px; } .bg-pink{ background: #E11D48; } .pay-type { padding: 20px 20px 20px 0px; } .pay-data { border-bottom: 1px solid #888888; } .res-pay-table { border-collapse: collapse; width: 100%; } .ecommerce .bus-invo-no-date-wrap{ display: block; padding-top: 20px; padding-bottom: 0; width: 50%; } .ecommerce-first-sec{ display: flex; justify-content: space-between; position: relative; } .ecommerce-img-black { clip-path: polygon(0 0, 100% 1%, 100% 100%, 12% 100%); width: calc(50% + 50px); height: 40px; background: #12151c; right: -50px; top: -1px; position: absolute; } .ecommerce-table thead tr th{ padding-bottom: 10px; } .ecommerce .ecommerce-table thead tr th:nth-child(2){ text-align: left; } .ecomm-price-wid{ width: 16.66%; } .ecommerce .ecommerce-table thead tr th:first-child{ text-align: left; } .ecommerce .ecommerce-table thead tr th:last-child, .ecommerce .ecommerce-table tbody tr td:last-child{ text-align: right; padding-right: 10px; } .ecommerce .ecommerce-table tbody tr td:nth-child(3), .ecommerce .ecommerce-table tbody tr td:nth-child(4){ text-align: center; } .ecommerce .payment-wrap-car .pay-data:last-child{ border-bottom: none; } /************************* 13.Fitness Invoice CSS **************************/ .color-orange{ color: #FA6800; } .color-coffe{ color: #825A2C; } .fit-no{ width: 12%; text-align: left; } .fit-des{ width: 40%; text-align: left; } .fit-price, .fit-hour, .fit-total{ width: 16.66%; } .fit-total{ text-align: right; } .fitness-table tbody tr td:nth-child(3), .fitness-table tbody tr td:nth-child(4){ text-align: center; } .fitness-table tbody tr td:last-child{ text-align: right; } .fitness .invo-bill-total, .ecommerce .invo-bill-total { width: 35%; } .fitness .invo-add-info-content { width: 50%; } .fitness .invo-total-table td:last-child { text-align: right; } .payment-wrap-fitness{ border: 2px solid #FA6800; background: rgba(250, 104, 0, 0.08); } .fitness-sec { display: flex; justify-content: space-between; padding-bottom: 40px; } .fitness .pay-data:last-child{ border-bottom: none; } .fitness-header-wrap{ border-radius: 0px 100px 0px 0px; background: #12151C; padding: 30px 0 30px 50px; } .fitness-txt { color: rgb(255 255 255 / 20%); font-family: Inter; font-size: 40px; font-style: normal; font-weight: 400; line-height: 40px; letter-spacing: 4px; } .fitness-header { width: 80%; } .fitness-invoice-content { background: #FA6800; display: flex; column-gap: 30px; padding: 10px 50px; } .fitness-contact-content { display: flex; border-radius: 20px 0px 0px 20px; background: #505050; padding: 8px 20px; position: absolute; right: 0; width: 65%; column-gap: 30px; } .fitness-contact-wrap { display: flex; margin-top: 30px; align-items: center; } .fitness .fitness-table thead tr th{ padding-bottom: 10px; } /************************* 14.Hospital Invoice CSS **************************/ .hospital-header{ padding: 30px 50px; } .hospital-contact-wrap{ display: flex; column-gap: 30px; position: relative; } .hospital-txt { color: #12151C; font-family: Inter; font-size: 40px; font-style: normal; font-weight: 400; line-height: 40px; letter-spacing: 6px; } .hospital-green-box { background: #2ED573; display: flex; align-items: end; padding: 0 16px 20px 16px; justify-content: center; height: 183px; width: 100%; } .hospital-contact { width: 70%; } .hospital-contact-details{ display: flex; column-gap: 30px; } .hospital-second{ width: 30%; position: absolute; right: 0; top: -100px; } .color-green-hospital{ color: #2ED573; } .width-70{ width: 70%; } .width-30{ width: 30%; } .invo-head-wrap-hospital{ justify-content: space-between; } .bg-green-hospital{ background: #2ED573; } .mt-40{ margin-top: 40px; } .hospital-table thead th { padding-top: 10px; padding-bottom: 10px; } .hospital-wid1{ width: 10%; text-align: center; } .hospital-wid2{ width: 50%; padding-left: 38px; } .hospital-wid3{ width: 20%; text-align: center !important; } .hospital-wid4{ width: 20%; text-align: right !important; padding-right: 10px; } .hospital-table tbody tr td:nth-child(odd) { background: #F5F5F5; text-align: center; } .hospital-table th { background: #2ED573; } .hospital-table tbody tr td:nth-child(2) { padding-left: 38px; } .hospital-rule{ padding-bottom: 40px; } .hospital-table thead tr th:nth-child(2){ text-align: left; } /************************* 15.Photostudio Invoice CSS **************************/ .photo-txt { color: #2E006F; text-align: right; font-family: Inter; font-size: 38px; font-style: normal; font-weight: 700; line-height: 38px; letter-spacing: 5.7px; } .photostudio-table tbody tr td:nth-child(3), .photostudio-table tbody tr td:nth-child(4) { text-align: center; } .photostudio-table tbody tr td:nth-child(5){ text-align: right; padding-right: 20px; } .photostudio-table tbody tr td:nth-child(1){ text-align: left; padding-left: 20px; } .color-green-photo{ color: #00D061; } .bus-detail-wrap.photostudio-detail-wrap{ border: 2px solid #2E006F; background: #FFF; margin-top: 40px; } .invo-cont-wrap.invo-contact-photo { padding-top: 15px; } .invo-to-wrap-photo{ width: 70%; } .invo-pay-to-wrap-photo{ width: 30%; } .invo-head-wrap.invo-head-wrap-photo{ justify-content: space-between; } .pr-20{ padding-right: 20px; } .pl-20 { padding-left: 20px !important; } .invo-addition-wrap-photo{ justify-content: space-between; } .photostudio .invo-add-info-content{ width: 50%; } .photostudio .invo-bill-total{ width: 40%; } .photostudio .invo-total-table td:last-child { text-align: right; } .photostudio .invo-bill-total table{ width: 100%; } .photostudio-table thead tr th:nth-child(2) { padding-left: 35px; } .photostudio-table tbody tr td:nth-child(2) { padding-left: 35px; } .phtotstudio-img { position: relative; } .photo-logo{ position: absolute; right: 50px; bottom: 5px; } .photo-footer-sec-img img{ display: block; } .agency-bottom-content-photo, .agency-bottom-clean, .agency-bottom-content-fitness, .agency-bottom-content-travel{ padding-bottom: 0; } /************************* 16.Cleaning Invoice CSS **************************/ .cleaning-txt { color: #00BAFF; font-family: Inter; font-size: 40px; font-style: normal; font-weight: 700; line-height: 40px; margin-top: 40px; } .color-cleaning{ color:#00BAFF; } .blue-img1{ width: 176px; height: 176px; transform: rotate(-45deg); background: #00BAFF; position: absolute; top: -92px; right: 86px; } .blue-img2{ width: 40px; height: 40px; background: #00BAFF; } .cleaning-blue-img{ position: relative; } .blue-img1 { display: flex; align-items: center; justify-content: center; } .blue-img1 img { transform: rotate(45deg); } .blue-img2 { position: absolute; left: -45px; top: 0; } .flight-pt { padding: 0 0 10px; width: 25%; } .cleaning-table-wrap { padding: 20px; } .blue-bottom-img1{ background: #00BAFF; width: 68.433px; height: 68.433px; transform: rotate(135deg); } .blue-bottom-img2{ width: 15.553px; height: 15.553px; background: #00BAFF; position: absolute; top: 0px; left: -25px; } .cleaning-blue-img-bottom { position: relative; margin-top: 68px; } .blue-img2-bottom { position: absolute; left: 50px; bottom: 67px; } .blue-img1-bottom img{ display: block; } .cleaning-img-bottom-sec-wrap { display: flex; padding-right: 50px; column-gap: 30px; } .cleaning-header { padding-left: 50px; } .invo-head-wrap-clean{ justify-content: space-between; padding-bottom: 0; } .cleaning-table thead tr th{ padding-bottom: 10px; } .cleaning-contact{ text-align: right; } /************************* 17.Travel Invoice CSS **************************/ .travel-txt-bg { color: rgb(18 21 28 / 20%); text-align: center; font-family: Inter; font-size: 40px; font-style: normal; font-weight: 400; line-height: 40px; letter-spacing: 40px; background: url(../images/travel/txt-bg.svg); background-repeat: no-repeat; width: 100%; background-size: cover; padding: 30px 0; top: 10px; position: relative; z-index: 2; } .travel-txt { position: relative; width: 62%; height: 100%; } .travel-txt:before { content: ""; background-image: url(../images/travel/light-grey.svg); width: 100%; height: 100%; position: absolute; background-repeat: no-repeat; background-size: cover; top: 20px; z-index: 1; } .travel-logo-sec-wrap { display: flex; align-items: center; justify-content: space-between; } .travel-logo { padding-left: 50px; width: 30%; } .travel-color{ color: #84CC16; } .bus-invo-no-date-wrap.bus-invo-no-date-wrap-travel{ padding-bottom: 0; } .travel-detail-wrap{ margin-top: 40px; border: 2px solid #84CC16; background: rgba(132, 204, 22, 0.08); } .border-bottom.travel { border-bottom: 1px solid #84CC16; } .travel-table thead tr th:first-child, .travel-table tbody tr td:first-child{ text-align: left; padding-left: 15px; } .travel-table tbody tr td:nth-child(2), .travel-table tbody tr td:nth-child(3){ text-align: center; } .travel-table thead tr th:last-child, .travel-table tbody tr td:last-child{ text-align: right; padding-right: 15px; } .travel-bottom-sec-wrap { display: flex; justify-content: space-between; } .footer-img2 img { display: block; } .invo-addition-wrap-travel{ justify-content: space-between; } .travel-invoice .invo-bill-total{ width: 35%; } .travel-table thead tr th{ padding-bottom: 10px; } .travel-invoice .term-con-list { padding: 0; margin: 0; padding-left: 20px; } .travel-contact-sec{ padding: 15px 50px; } .bus-invo-num-travel{ display: flex; column-gap: 40px; } /************************* 18.Student Invoice CSS **************************/ .student-txt { color: #FFF; font-family: Inter; font-size: 40px; font-style: normal; font-weight: 400; line-height: 40px; letter-spacing: 6px; } .student-header-details { display: flex; justify-content: space-between; } .student-header-bg{ background-image: url(../images/student/blue-img.svg); background-repeat: no-repeat; padding: 30px 50px; text-align: center; position: absolute; right: 0px; width: calc(100% - 20px); height: 100%; z-index: 2; } .student-invoice-content:before { content: ""; background-image: url(../images/student/black-img.svg); background-repeat: no-repeat; position: absolute; height: 100%; width: 100%; z-index: 1; right: 0px; } .student-invoice-content:after { content: ""; background-image: url(../images/student/grey-img.svg); background-repeat: no-repeat; position: absolute; height: 100%; z-index: 0; width: 100%; right: 10px; top: 20px; } .student-invoice-content{ position: relative; } .student-color{ color:#00BAFF; } .student-header { padding: 30px 0 0 50px; } .student-invoice thead tr th:first-child, .student-invoice thead tr th:nth-child(2), .student-invoice thead tr th:nth-child(3){ text-align: left; } .student-invoice thead tr th:last-child, .student-invoice tbody tr td:last-child{ text-align: right; } .student-invoice thead tr th{ padding-bottom: 10px; } .pb-40{ padding-bottom: 40px; } .student .invo-head-wrap{ justify-content: space-around; } /************************* 19.Coffee Invoice CSS **************************/ .coffee-shop-back-img-one img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .coffee-txt { color: #12151C; font-family: Inter; font-size: 40px; font-style: normal; font-weight: 400; line-height: 40px; letter-spacing: 6px; text-align: right; } .brown-bg { width: 49.98px; height: 39.983px; background: #825A2C; } .invo-head-content-coffee { display: flex; column-gap: 30px; align-items: center; padding: 10px; background: #825a2c; width: 100%; } .invo-head-content-coffee .invo-head-wrap{ padding-bottom: 0; } .invoice-logo-content-coffee{ display: flex; flex-wrap: wrap; column-gap: 30px; align-items: center; } .coffee-table thead tr th:first-child{ text-align: left; } .coffee-table thead tr th:last-child, .coffee-table tbody tr td:last-child{ text-align: right; } .coffee-table tbody tr td:nth-child(2), .coffee-table tbody tr td:nth-child(3){ text-align: center; } .coffee-table thead tr th{ padding-bottom: 10px; } .coffee-triangle-image { content: ""; clip-path: polygon(52% 99%, 0 1%, 100% 0); background: #12151C; width: 260px; height: 130px; position: absolute; right: 0; top:-1.2px; } .coffee-triangle-image:before{ content: ""; background-image: url(../images/coffee-shop/triangle-top.svg); background-repeat: no-repeat; position: absolute; left:-4px; top: 0; height: 100%; width: 100%; z-index: 2; } .header-top-coffee{ padding: 11px 0; } .invoice-logo-coffee { width: 20%; } .invo-head-content-coffee { width: 50%; z-index: 1; } .coffee-bottom-sec-footer { display: flex; margin-top: 50px; } .coffee-conta-mail-wrap{ display: flex; align-items: center; background: #825a2c; padding: 8px 50px; justify-content: space-around; } .coffee-bottom-sec{ width: 30%; position: relative; } .coffee-bottom-sec { width: 16.67%; } .coffee-thank-txt { width: 83.86%; margin-left: auto; } .coffee-bottom-contact { width: 83.86%; } .coffee-invoice .rest-payment-bill .pay-data:last-child{ border-bottom: none; } .coffee-txt-bottom{ margin-top: 20px; text-align: center; margin-bottom: 24px; } .coffee-contact, .coffee-mail{ display: flex; align-items: center; } .coffee-triangle-image-footer{ rotate: 180deg; bottom: 0; top: unset; right: unset; left: 0; } .coffee-contact svg { margin-right: 10px; } .coffee-mail svg{ margin-right: 10px; } .invoice-logo-coffee img{ width: 100%; } /************************* Domain CSS **************************/ .domain-header{ position: relative; } .domain-invoice .invoice-logo-content-domain:before{ content: ""; position: absolute; background-image: url(../images/domain/black-img.svg); background-repeat: no-repeat; width: 80%; height: 100%; z-index: 2; top: 0; } .domain-invoice .invoice-logo-content-domain:after{ content: ""; position: absolute; background-image: url(../images/domain/grey-img.svg); background-repeat: no-repeat; width: 80%; height: 100%; z-index: 1; } .domain-invoice .invoice-logo.invoice-logo-domain:before{ content: ""; position: absolute; background-image: url(../images/domain/orange-img.svg); background-repeat: no-repeat; width: 100%; height: 100%; top: 0; z-index: 3; } .domain-footer-image { position: relative; width: 100%; padding-bottom: 40px; } .domain-footer-image:after{ content: ""; position: absolute; background-image: url(../images/domain/footer-black.svg); background-repeat: no-repeat; width: calc(100% + 50px); height: 100%; z-index: 2; bottom: 0px; background-position: right bottom ; } .domain-footer-image:before{ content: ""; position: absolute; background-image: url(../images/domain/footer-grey.svg); background-repeat: no-repeat; width: calc(100% + 50px); height: 100%; top: 0; z-index: 1; background-position: right; } .domain-footer-image>div:after{ content: ""; position: absolute; background-image: url(../images/domain/footer-orange.svg); background-repeat: no-repeat; width: calc(100% + 50px); height: 100%; z-index: 3; bottom: 0px; background-position: right bottom ; } .domain-invoice .invoice-logo.invoice-logo-domain { padding-top: 30px; padding-bottom: 118px; } .invoice-logo-domain img{ position: relative; z-index: 4; padding-left: 50px; } .domain-img { padding-top: 30px; padding-right: 50px; } .domain-invoice .invo-head-wrap{ justify-content: space-between; } .domain-txt{ color: #FF3F34; text-align: right; font-family: Inter; font-size: 40px; font-style: normal; font-weight: 400; line-height: 40px; letter-spacing: 6px; } .domain-color{ color: #FF3F34; } .domain-invoice .booking-info:before{ border-left: 2px solid #FF3F34; } .domain-invoice .booking-info .circle:before{ background-color: #FF3F34; } .domain-detail-wrap { border: 2px solid #FF3F34; background: rgba(255, 63, 52, 0.06); } .domain-table thead tr th:first-child{ text-align: left; } .domain-table thead tr th:nth-child(2){ text-align: left; } .domain-table thead tr th:last-child, .domain-table tbody tr td:last-child{ text-align: right; } .domain-table thead tr th{ padding-bottom: 10px; } .domain-detail-wrap{ margin-top: 40px; }
Editor is loading...
Leave a Comment