@extends('shopify-app::layouts.default')
@section('content')

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ URL::asset('css/bootstrap.min.css') }}">

<link
    rel="stylesheet"
    href="https://unpkg.com/@shopify/polaris@4.0.0/styles.min.css"/>

<style>
    .list-body {
        max-height: 300px;
        overflow-Y: scroll;
    }

    .list-pro {
        padding: 4px 15px;
        cursor: pointer;
    }

    .list-pro.active {
        background-color: #007bff;
        color: #ffffff;
    }
    .table-align {
        text-align:right;
    }
    .Polaris-ButtonGroup{ }
    .Polaris-ButtonGroup__Item {
        margin: 0 auto; flex:1 !important;
    }
    .Polaris-ButtonGroup__Item .add-line-item{ width:100% !important;}

    .Polaris-Card__Footer {
        
    }
    .Total-td {
        float: right;
        
    }
    .Total-td span {
        padding-left: 30px;
    }
    .quantity-field {
        text-align: center;
        width: 55px;
    }
    .invalid {
        border-color: #dc3545;
    }

    .Polaris-Frame-ToastManager {
        top: 116px;
    }
    .Polaris-Frame-Toast {
        display:inline-block !important; padding-top:.8rem !important; padding-bottom:32px !important;
        /* background-color:#c70e20; */
    }
    .Polaris-Frame-Toast__CloseButton {
        float:right;
    }
    .bill-checkbox {
        text-align: right;
        padding-inline-end: 26px;
        margin-top:-24px;
    }
    #line-item-property td{
        text-align:left !important;
    }
    /* del-img-mt */
    .delete-button{
        margin-top: -7px;
        cursor: pointer;
    }
    .spinner{
        position: absolute;
        left:0;
        top: 0;
        bottom: 0;
        height: 100%;
        width: 100%; z-index: 10000;
        background-color: rgba(68, 66, 66, 0.32);
    }
    .spinner img{ position: fixed;
        left: 50%;
        height: auto;
        margin-left: -25px;
        width: 50px;
        top: 50%; 
    }
    .validateForm {
        position: relative;
    }
    .orderTags {
        padding: 2rem 2rem 0;
    }

    .table-head{ margin-right:-2rem;}
</style>
    
    <div class="container">
    
<div>