/* ==== =====
Invoice
============= */

.table>thead>tr>.no-line {
    border-bottom: none;
}

.table>tbody>tr>.no-line {
    border-top: none;
}

.table>tbody>tr>.thick-line {
    border-top: 2px solid $gray-100;
}

.ic-total-product {
    padding-top: 24px;
}

.ic-product-head {
    padding-top: 15px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 8px;
    grid-row-gap: 8px;

    @media (max-width: 1770px) {
        grid-template-columns: repeat(5, 1fr);
    }

    @media (max-width: 1500px) {
        grid-template-columns: repeat(4, 1fr);
    }

    @media (max-width: 1366px) {
        grid-template-columns: repeat(3, 1fr);
    }

    @media (max-width: 1280px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 1100px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 991px) {
        grid-template-columns: repeat(4, 1fr);
    }

    @media (max-width: 767px) {
        grid-template-columns: repeat(4, 1fr);
    }

    @media (max-width: 575px) {
        grid-template-columns: repeat(3, 1fr);
    }

    @media (max-width: 480px) {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-items {
        -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.09);
        -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.09);
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.09);

        .ic-images-out-of-stock {
            position: relative;

            .ic-stock-overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;

                p {
                    padding: 3px;
                    margin-bottom: 0;
                    background: $primary;
                    font-size: 11px;
                    text-align: center;
                    display: inline-block;
                    border-radius: 4px;
                    position: absolute;
                    white-space: nowrap;
                    right: 8px;
                    top: 8px;
                    color: #fff;
                    background-color: $danger;
                }
            }
        }

        .product-item-body {

            label,
            p {
                font-size: 12px;
            }
        }
    }
}

.ic-payment-method {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 24px;

    @media (max-width: 1440px) {
        grid-column-gap: 12px;
    }

    @media (max-width: 480px) {
        grid-template-columns: repeat(1, 1fr);
    }
}

.ic-payment-method-online {
    margin-top: 30px;

    @media (max-width: 575px) {
        margin-top: 14px;
    }
}

.ic-print-header {
    text-align: right;

    @media (max-width: 575px) {
        text-align: left;

        a {
            display: block;
            margin-top: 14px;
        }
    }
}

.paypal-button-container {
    display: grid;
    grid-column-gap: 8px;
}

.ic-copy-url {
    position: relative;

    .copy-url-btn {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
    }
}

.ic-layout2-body {
    .ic-product-head {
        grid-template-columns: repeat(4, 1fr);

        @media (max-width: 1200px) {
            grid-template-columns: repeat(3, 1fr);
        }

        @media (max-width: 991px) {
            grid-template-columns: repeat(4, 1fr);
        }

        @media (max-width: 767px) {
            grid-template-columns: repeat(3, 1fr);
        }

        @media (max-width: 575px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }
}

/* ==============
  Print css
===================*/
@media print {

    .topbar,
    .left,
    .page-title-box,
    .footer {
        display: none;
    }

    .wrapper {
        padding: 0;
    }

    .content {
        margin-top: 0;
        padding-top: 0;
    }

    .content-page {
        margin-left: 0;
        margin-top: 0;
    }

    .container-fluid {
        width: 100%;
    }
}

.ic-stripe-logo {
    max-width: 50px;
}

.ic-responsive-invoice {
    table {
        tr {
            td {
                white-space: nowrap;
                padding: 4px;
            }
        }
    }
}

.ic-right-content {
    text-align: right;

    @media (max-width: 991px) {
        text-align: left;
    }
}