.invoice_modal {
    max-width: 84.2rem;
    width: 84.2rem;

    .modal-content {
        border-radius: 0 !important;
    }

    .invoice {
        border: .1rem solid $scroll_thumb;

        &_header {
            background: $gray;
            background-image: url('../images/invoice_bottom_left_red_bg.svg'), url('../images/invoice_top_right_red_bg.svg');
            background-position: bottom left, top right;
            background-repeat: no-repeat;
            min-height: 24rem;
            margin-bottom: 4rem;

        }

        &_logo {
            padding: 0rem 0rem 2rem 4rem;
        }

        &_top_details {
            padding: 3rem 3rem 0 0;
            max-width: 33rem;

            h2 {
                @extend .font_40;
            }
        }

        &_to_order_info {
            @extend .d-flex;
            width: 100%;
            padding: 0 3.5rem;
        }

        &_to,
        &_order_info {
            flex: 0 0 42%;
            width: 100%;

            // max-width: 50%;
            h2 {
                @extend .font_36;
                @extend .poppins_500;
            }

            h4 {
                @extend .font_18;
                line-height: 2.7rem;
                color: $red_highlighted;
                @extend .text-uppercase;
            }
        }

        .data_table {
            table {
                min-width: 74rem;

                thead {
                    td {
                        border-top: 0;
                    }
                }
            }
        }
    }
}

.new-invoice {
    table {
        tbody tr {
            td {
                padding: 0;
            }

            .ant-select-selector {
                color: black !important;
            }
        }

        .ant-form-item {
            margin: 0;
            padding: 10px;
        }

    }

    .ant-form-item {
        margin: 0;
    }

    .ant-checkbox-wrapper {
        margin-inline-start: 0;
    }

    form {
        .react-datepicker-wrapper {
            float: unset !important;
        }
    }
}

.datepicker-icon {
    background-image: url('../images/icon_date_red.svg');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 45px 20px;
    padding-right: 30px;
    cursor: pointer;
}

.invoice-action {
    width: 40%;
    margin: auto;
    display: flex;
    justify-content: space-between;

    label {
        cursor: pointer;
        padding: 5px;
    }
}

.invoice-search {
    form {
        margin: 0;
    }

    .ant-form .ant-form-item .ant-form-item-label>label {
        width: auto;
    }
}

.invoicelist-btn {
    padding: 1rem 1.58rem 3.18rem;
    font-size: 14px;
    font-family: poppins_500;
    display: flex !important;
    align-items: baseline;
}

.custom-datepicker {
    user-select: unset !important;
    /* Disable text selection */
    -moz-user-select: none !important;
    -webkit-user-select: unset !important;
    -ms-user-select: none !important;
    -webkit-user-drag: none;
}

.ant-checkbox-indeterminate {
    .ant-checkbox-inner::after {
        background: transparent;
    }
}

.invoice-filter {
    .ant-form {
        padding: 0;

        .ant-form-item {
            .ant-row {
                display: block;

                .ant-form-item-control {
                    .ant-input {
                        width: 100%;
                        max-width: 475px;

                        @media screen and (max-width: 992px) {
                            max-width: 100%;
                        }

                    }

                }
            }


        }

        .date_box {
            max-width: 250px;

            @media screen and (max-width: 992px) {
                max-width: 100%;
                width: 48%;

            }

            @media screen and (max-width: 575px) {
                width: 100%;
            }
        }

        .button_grp {
            .ant-form-item {
                width: 100%;
                max-width: 246px;

                @media screen and (max-width: 992px) {
                    max-width: 100%;


                }

            }
        }

        .ant-btn {
            margin: 0 !important;
            margin-bottom: 24px !important;
            padding: 18px 30px;
            display: flex !important;
            align-items: center;
            justify-content: center;
        }
    }
}

.invoice_pay {
    width: 100%;
    padding: 20px;

    .invoice_pay_details {
        list-style-type: none;
        margin-bottom: 0px;
        padding: 0px;
    }
}