@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&family=Poppins:wght@400;700&display=swap');

*{
    margin: 50;
    padding: 50;
    font-family: 'Lato', sans-serif;
    box-sizing: border-box;
    color: rgb(0, 0, 37);
}


/* custom scrollbar 
================================================== */
::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track{
    background: #eee;
}
::-webkit-scrollbar-thumb{
    background: radial-gradient(circle, rgba(226,93,36,1) 0%, rgba(7,0,46,1) 57%, rgba(252,176,69,1) 100%);
}

.invoice{
    display: flex;
    border: 1px solid rgb(0, 0, 37);
    margin-bottom: 30px;
    margin-top: 10px;
    width: 1000px;
}

/* FIRST COLUMN DETAILS
============================================================ */
.first-column{
    width: 600px;
    position: relative;
    border-right: 2px solid orangered;
}

.first-column .head{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding-top: 10px;
    padding-bottom: 20px;
}
.first-column .head h2{
    font-size: 16px;
    color: orangered;
}
.first-column .head .logo{
    width: 100px;
}
.first-column .head .logo img{
    width: 100%;
}

/* inner-body-1 */
.inner-body-1{
    border-left: 35px solid rgb(0, 0, 37);
    padding-bottom: 35px;
}
.inner-body-1 .head-p{
    padding: 10px 20px;
    background: rgb(0, 0, 37);
    color: white;
    font-size: 12px;
}
.inner-body-1 .checkbox{
    padding: 10px;
    display: flex;
}

.inner-body-1 .checkbox .check{
    margin-right: 20px;
}

.inner-body-1 .checkbox .check span,
.inner-body-1 .checkbox .check input{
    font-size: 12px;
    margin-right: 5px;
}

.inner-body-1 .checkbox .check.last input{
    margin-bottom: 7px;
}
.inner-body-1 .payer-account{
    margin-top: -45px;
    display: flex;
    padding-left: 10px;
}

.inner-body-1 .payer-account p{
    font-size: 12px;
    font-weight: 700;
}

.inner-body-1 .payer-account p.p1{
    margin-right: 15px;
}
.inner-body-1 .payer-account p.p2{
    font-style: italic;
}

.inner-body-1 .shipment-insurance{
    display: flex;
    padding-left: 10px;
    margin-top: 7px;
}

.inner-body-1 .shipment-insurance p{
    font-size: 12px;
    font-weight: 700;
}

.inner-body-1 .shipment-insurance p.p1{
    margin-right: 15px;
}
.inner-body-1 .shipment-insurance p.p2{
    font-style: italic;
}
.inner-body-1 .last-row{
    padding-left: 10px;
    display: flex;
    position: relative;
    margin-top: 10px;
}
.inner-body-1 .last-row .yet{
    flex-basis: 50%;
    position: relative;
    display: flex;
    align-items: flex-end;
}
.inner-body-1 .last-row p{
    font-size: 12px;
    font-weight: 700;
}
.inner-body-1 .last-row p.yet-1{
    margin-right: 15px;
}
.inner-body-1 .last-row p.yet-1 span{
    font-style: italic;
}
.inner-body-1 .last-row p.yet-3{
    margin-bottom: 5px;
    position: relative;
    padding-left: 10px;
}
.inner-body-1 .last-row p.yet-3::after{
    content: "";
    display: block;
    height: 2px;
    width: 150px;
    background: rgb(0, 0, 37);
    margin: auto;
    margin-left: -17px;
}
.inner-body-1 .last-row p.yet-4{
    position: absolute;
    right: 55px;
    top: 45px;
    font-style: italic;
}


/* inner-body-2 */
.inner-body-2{
    border-left: 35px solid rgb(0, 0, 37);
}
.inner-body-2 .head-p{
    padding: 10px 20px;
    background: rgb(0, 0, 37);
    color: white;
    font-size: 12px;
}
.inner-body-2 .row{
    display: flex;
    border-bottom: 1px solid rgb(0, 0, 37);
}
.inner-body-2 .row .pT{
    flex-basis: 50%;
    padding: 10px;
}
.inner-body-2 .row p{
    font-size: 12px;
    font-weight: 700;
    flex-basis: 50%;
}
.inner-body-2 .row .span{
    font-style: italic;
    margin-top: 5px;
}
.inner-body-2 .row .p2{
    border-left: 1px solid rgb(0, 0, 37);
}
.inner-body-2 .row .pT-1{
    padding: 10px;
}

/* inner-body-3 */
.inner-body-3{
    border-left: 35px solid rgb(0, 0, 37);
}
.inner-body-3 .head-p{
    padding: 10px 20px;
    background: rgb(0, 0, 37);
    color: white;
    font-size: 12px;
}
.inner-body-3 .row{
    display: flex;
    border-bottom: 1px solid rgb(0, 0, 37);
}
.inner-body-3 .row:last-child{
    border-color: transparent;
    padding-bottom: 50px;
}
.inner-body-3 .row .pT{
    flex-basis: 50%;
    padding: 10px;
}
.inner-body-3 .row p{
    font-size: 12px;
    font-weight: 700;
    flex-basis: 50%;
}
.inner-body-3 .row .span{
    font-style: italic;
    margin-top: 5px;
}
.inner-body-3 .row .p2{
    border-left: 1px solid rgb(0, 0, 37);
}
.inner-body-3 .row .pT-1{
    padding: 10px;
}

/* slant-word */
.slant-word{
    position: absolute;
    top: 65%;
    left: -225px;
    transform: rotate(270deg);
    font-weight: 700;
}
.slant-word p{
    color: white;
    font-size: 12px;
}

/* SECOND COLUMN DETAILS
============================================================ */
.second-column{
    width: 400px;
    position: relative;
    border-right: 2px solid orangered;
}
.second-column .head {
    padding: 30px;
    text-align: center;
    position: relative;
}
.second-column .head h2{
    font-size: 14px;
}

.second-column .head p{
    width: 60%;
    margin: auto;
    font-size: 16px;
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
    margin-bottom: 10px;
}


/* second-inner-body-1 */
.second-inner-body-1 .head-p{
    padding: 10px 20px;
    background: rgb(0, 0, 37);
    color: white;
    font-size: 12px;
    position: relative;
}
.second-inner-body-1 .head-p span{
    font-size: 10px;
    color: white;
    font-weight: lighter;
    position: absolute;
    right: 5px;
    top: 35%;
    font-style: italic;
}
.second-inner-body-1 .row{
    display: flex;
    border-bottom: 2px solid orangered;
}
.second-inner-body-1 .row .pT{
    flex-basis: 50%;
}
.second-inner-body-1 .row .pT1{
    display: flex;
    position: relative;
}
.second-inner-body-1 .row .pT1::after{
    content: "";
    height: 1px;
    width: 100%;
    background: rgb(0, 0, 37);
    position: absolute;
    left: 0;
    top: 50px;
}
.second-inner-body-1 .row .pT1 h3{
    margin-top: 25px;
    font-size: 14px;
}
.second-inner-body-1 .row .pT1 h3.h3-2{
    margin-top: 40px;
}

.second-inner-body-1 .row .pT-inner{
    text-align: center;
    flex-basis: 50%;
    padding: 10px;
}
.second-inner-body-1 .row .pT-inner-2{
    flex-basis: 50%;
    padding: 10px;
    display: flex;
    justify-content: space-between;
}
.second-inner-body-1 .row .pt-22{
    border-left: 1px solid rgb(0, 0, 37);
    padding-bottom: 40px;
}
.second-inner-body-1 .row .p33 h3{
    margin-top: 15px;
    font-size: 14px;
}
.second-inner-body-1 .row p{
    font-size: 12px;
    flex-basis: 50%;
}
.second-inner-body-1 .row .span{
    font-style: italic;
    margin-top: 5px;
    text-transform: capitalize;
}
.second-inner-body-1 .row .p2{
    border-left: 1px solid rgb(0, 0, 37);
    padding: 10px;
}
.second-inner-body-1 .row .p33{
    text-align: center;
}
.second-inner-body-1 .row .pT-1{
    padding: 10px;
}
.second-inner-body-1 .row .pText{
    padding: 10px;
    font-weight: 700;
}
.second-inner-body-1 .row .pText .p11{
    margin-bottom: 7px;
}


/* second-inner-body-2 */
.second-inner-body-2 .head-p{
    padding: 10px 20px;
    background: rgb(0, 0, 37);
    color: white;
    font-size: 12px;
    position: relative;
}
.second-inner-body-2 .row{
    border-bottom: 2px solid rgb(0, 0, 37);
    padding-left: 10px;
}

.second-inner-body-2 .row p{
    font-size: 12px;
    font-weight: 700;
    padding-top: 5px;
}
.second-inner-body-2 .row .pWrite{
    display: flex;
}
.second-inner-body-2 .row .pWrite .pWrite-inner.first{
    flex-basis: 40%;
}
.second-inner-body-2 .row .pWrite .pWrite-inner.last{
    border-left: 1px solid rgb(0, 0, 37);
    flex-basis: 60%;
    padding-left: 10px;
}
.second-inner-body-2 .row .pWrite .pWrite-inner.lasty .vat-text{
    margin-top: 25px;
}
.second-inner-body-2 .row .pWrite .pWrite-inner .vat-text{
    margin-top: 7px;
    padding-bottom: 7px;
    font-style: italic;
}
.second-inner-body-2 .row .pWrite .pWrite-inner .textVat{
    font-size: 10px;
}
.second-inner-body-2 .row .pWrite .pWrite-inner .checkBox{
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    padding-bottom: 5px;
}
.second-inner-body-2 .row .pWrite .pWrite-inner .checkBox p{
    font-size: 11px;
    margin-top: -3px;
    display: flex;
    align-items: center;
}
.second-inner-body-2 .row .pWrite .pWrite-inner .checkBox p span{
    margin-left: 4px;
}
.second-inner-body-2 .row .pWrite .pWrite-inner .checkBox p{
    font-size: 11px;
    margin-top: -3px;
    display: flex;
    align-items: center;
}
.second-inner-body-2 .row .pWrite .pWrite-inner .checkBox p span{
    margin-left: 4px;
}
.second-inner-body-2 .row.last-child{
    border-bottom: 2px solid orangered;
}
.second-inner-body-2 .row .yesP .checkBox{
    display: flex;
    margin-top: 7px;
    padding-bottom: 5px;
}
.second-inner-body-2 .row .yesP .checkBox p span{
    margin-left: 4px;
}
.second-inner-body-2 .row .yesP .checkBox p{
    font-size: 11px;
    margin-top: -15px;
    display: flex;
    align-items: center;
    margin-right: 7px;
}
.second-inner-body-2 .row .yesP .checkBox .span-acc{
    font-size: 11px;
    text-align: center;
    font-weight: 700;
    font-style: italic;
}
.second-inner-body-2 .row .yesP .checkBox .dot-span{
    font-size: 10px;
    margin-top: 10px;
    text-align: center;
    border-top: 1px dotted rgb(0, 0, 37);
}
.second-inner-body-2 .last-last{
    border: none;
}
.second-inner-body-2 .last-last .sign-date{
    margin-top: 10px;
    display: flex;
    margin-bottom: 5px;
}
.second-inner-body-2 .last-last .sign-date p{
    flex-basis: 50%;
    font-size: 12px;
}
.second-inner-body-2 .last-last .sign-date span{
    font-style: italic;
    margin-left: 10px;
}


/* THIRD COLUMN DETAILS
============================================================ */
.third-column{
    width: 250px;
    position: relative;
    border-right: 2px solid orangered;
}
.third-column .head {
    padding: 30px;
    padding-bottom: 40px;
    text-align: center;
    position: relative;
    margin-top: 10px;
}
.third-column .head h2{
    font-size: 14px;
    color: orangered;
}

/* third-inner-body-1 */
.third-inner-body-1 .head-p{
    padding: 10px 20px;
    background: rgb(0, 0, 37);
    color: white;
    font-size: 12px;
    position: relative;
}
.third-inner-body-1 .head-p span{
    font-size: 10px;
    color: white;
    font-weight: lighter;
    position: absolute;
    right: 5px;
    top: 35%;
    font-style: italic;
}
.third-inner-body-1 .row{
    display: flex;
    border-bottom: 2px solid rgb(0, 0, 37);
    padding: 10px 0;
    padding-left: 10px;
}
.third-inner-body-1 .row:last-child{
    border-bottom: none;
}
.third-inner-body-1 .row p{
    font-size: 12px;
    font-weight: 700;
}
.third-inner-body-1 .row p.cos{
    margin-right: 20px;
    font-size: 11px;
}
.third-inner-body-1 .row .cos-check p{
    margin-bottom: 7px;
    font-size: 11px;
    display: flex;
    align-items: center;
}
.third-inner-body-1 .row .cos-check p span{
    margin-left: 5px;
}
.third-inner-body-1 .row p.cos-2{
    margin-right: 20px;
    font-size: 9px;
    margin-bottom: 10px;
}
.third-inner-body-1 .row-2{
    display: block;
}
.third-inner-body-1 .row .gCos{
    display: flex;
    margin-top: 10px;
}
.third-inner-body-1 .row .gCos .cos-check-1{
    margin-right: 15px;
}
.third-inner-body-1 .row .gCos-1{
    display: flex;
    justify-content: space-between;
    padding-right: 20px;
}
.third-inner-body-1 .row .gCos-1 .spanCos{
    font-style: italic;
    margin-left: 15px;
}
.third-inner-body-1 .row .gCos-detail{
    display: flex;
}
.third-inner-body-1 .row .gCos-detail p{
    font-size: 10px;
    margin-bottom: 10px;
}
.third-inner-body-1 .row .gCos-detail h3{
    font-size: 11px;
    margin-bottom: 10px;
}
.third-inner-body-1 .row .gCos-detail .gCos-detail-inner{
    flex-basis: 50%;
    padding: 10px;
}
.third-inner-body-1 .row .gCos-detail .gCos-detail-inner.one{
    border-right: 1px solid rgb(0, 0, 37);
}
.third-inner-body-1 .row-3{
    padding: 0;
}

.third-inner-body-1 .row .cos-curr{
    display: flex;
}
.third-inner-body-1 .row .cos-curr .cos-check-1{
    flex-basis: 50%;
    padding: 10px;
}
.third-inner-body-1 .row .cos-curr .cos-check-1.one{
    border-right: 1px solid rgb(0, 0, 37);
}
.third-inner-body-1 .row .cos-curr .cos-check-1 h3{
    font-size: 13px;
    margin-top: 7px;
}
.third-inner-body-1 .che-row p{
    margin-bottom: 7px;
}
.third-inner-body-1 .che-row .cos-check-1{
    display: flex;
}
.third-inner-body-1 .che-row .cos-check-1 p{
    flex-basis: 50%;
}
.third-inner-body-1 .che-row span{
    font-style: italic;
    margin-left: 7px;
}

/* slant-word-last */
.slant-word-last{
    position: absolute;
    top: 50%;
    right: -110px;
    transform: rotate(90deg);
    font-weight: 700;
}
.slant-word-last p{
    color: orangered;
    font-size: 16px;
}








/* Media Query for Mobile Devices */
@media (max-width: 767px) {
    .invoice {
        flex-direction: column;
        width: 100%;
        margin: 0;
        border: none;
    }

    .first-column,
    .second-column,
    .third-column {
        width: 100%;
        border-right: none;
        padding: 20px;
    }

    .first-column .head,
    .second-column .head,
    .third-column .head {
        padding: 15px;
    }

    .first-column .head .logo {
        width: 70px;
    }

    /* Adjust styles for inner-body sections */
    .inner-body-1,
    .inner-body-2,
    .inner-body-3 {
        border-left: none;
        padding: 20px;
    }
    /* slant-word-last */
.slant-word-last {
    position: absolute;
    top: 50%;
    right: -40px; /* Adjust this value to position it properly on mobile */
    transform: rotate(90deg);
    font-weight: 700;
    white-space: nowrap; /* Prevent text from wrapping */
}

.slant-word-last p {
    color: orangered;
    font-size: 14px; /* Adjust the font size for better readability on mobile */
}

    /* Adjust styles for specific elements as needed */
    /* ... */
}

/* Your existing styles for larger screens here */
/* ... */




@media (max-width: 767px) {
    * {
        font-size: 14px; /* Adjust font size for better readability on mobile */
    }

    .invoice {
        flex-direction: column;
        width: 100%;
        margin: 0;
        border: none;
    }

    .first-column,
    .second-column,
    .third-column {
        width: 100%;
        border-right: none;
        padding: 20px;
    }

    .first-column .head,
    .second-column .head,
    .third-column .head {
        padding: 15px;
    }

    .first-column .head .logo {
        width: 70px;
    }

    /* Adjust styles for inner-body sections */
    .inner-body-1,
    .inner-body-2,
    .inner-body-3 {
        border-left: none;
        padding: 20px;
    }

    /* Adjust other specific elements as needed for mobile view */
    /* ... */

    /* slant-word-last */
    .slant-word-last {
        position: absolute;
        top: 50%;
        right: -40px; /* Adjust this value to position it properly on mobile */
        transform: rotate(90deg);
        font-weight: 700;
        white-space: nowrap; /* Prevent text from wrapping */
    }

    .slant-word-last p {
        color: orangered;
        font-size: 14px; /* Adjust the font size for better readability on mobile */
    }
}

















/* Original Styles for Laptop/Desktop View */
/* ... Your existing styles here ... */

/* Print Styles */
@media print {
    /* Hide unnecessary elements */
    body * {
        font-size: 12pt;
        color: black;
        background-color: white;
    }

    /* Print only the necessary elements */
    .invoice,
    .printable {
        visibility: visible;
        display: block;
        position: absolute;
        left: 10;
        top: 10;
    }

    /* Customize print layout and appearance */
    .invoice {
        width: 100%;
        margin: 0;
        border: none;
    }

    .first-column,
    .second-column,
    .third-column {
        width: 100%;
        border-right: none;
        padding: 20px;
    }

    .first-column .head,
    .second-column .head,
    .third-column .head {
        padding: 15px;
    }

    /* Adjust styles for inner-body sections */
    .inner-body-1,
    .inner-body-2,
    .inner-body-3 {
        border-left: none;
        padding: 20px;
    }

    /* Adjust other specific elements as needed for print */
    /* ... */

    /* slant-word-last */
    .slant-word-last {
        position: absolute;
        top: 50%;
        right: -40px; /* Adjust this value to position it properly on mobile */
        transform: rotate(90deg);
        font-weight: 700;
        white-space: nowrap; /* Prevent text from wrapping */
    }

    .slant-word-last p {
        color: orangered;
        font-size: 14px; /* Adjust the font size for better readability on print */
    }
}



/* CSS to style the print button */
.print-button {
    text-align: center;
    margin: 20px 0;
}

.print-button button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 4px;
}

.print-button button:hover {
    background-color: #0056b3;
}