.order-items-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.order-items-table th, .order-items-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
.order-items-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}
.product-image {
    width: 100px;
}
.order-id {
    font-size: 1.2em;
    color:  #e10613;
}
.btn-back
{
    background-color: black;
}
.swal2-black-button {
    background-color: black !important;
    color: white !important;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
}
    .quantity-box-wrapper input[type="button"] {
        background-color: #000 !important;
    }

    ul.pagination {
        margin: 0 auto !important;
    }

    .page-link.active,
    .active>.page-link {
        background: #000;
    }

    .customer-info {
        margin-bottom: 20px;
    }

    .page-link,
    .page-link:hover {
        color: black;
    }

    /* Style the select dropdown */
    .customer-info select {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #f9f9f9;
        font-size: 16px;
        color: #333;
        margin-bottom: 15px;
        box-sizing: border-box;
        -webkit-appearance: none;
        /* Remove default styling for webkit browsers */
        -moz-appearance: none;
        /* Remove default styling for firefox */
        appearance: none;
        /* Remove default styling */
    }

    /* Add a little arrow to indicate it's a dropdown */
    .customer-info select {
        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMS4wMDAyM0wyLjEwMDUgMC4xMDAwNEMyLjUwMDggLTAuMzY2NjEgMy4yMDA4IC0wLjM2NjYyIDMuNjAwNiAwLjEwMDAyTDYgMi42OTkyTDguMzkyMyAwLjEwMDA0QzguNzkwMyAtMC4zNjY2MSA5LjUwMDggLTAuMzY2NjIgOS45OTU2IDAuMTAwMDJDMTAuNDkyIDAuNTY2NTcgMTAuNDkyIDEuMzMzMyA5Ljk5NTYgMS43OTk5TDUuOTk5OCA1LjY5OTlDNS42NjY1IDYuMDMzMiA1LjAwMDUgNi4wMzMyIDQuNjY2MyA1LjY5OTlMMSA0LjcwMDlMMC4zOTk1IDIuNjk5MkMwLjMwOTUgMi4yNzUzIDAuMTAwMiAxLjAwMDIzIDAgMC41OTk5OTdMMC40MDAzIDAuMTEgMCAwLjUwMDAyIDAgMS41OTk5OTdMMC4zOTk5IDAuNDEgMSAxLjk5OTkgMCAxLjAwMDIzIDAuNDAwNiAwLjgxMDAyIDEuMzk5OTIgMi43OTk5bC0xLS41MzM2IDAgMSAwIDIuNzQ2OSAwLjQwMDIgMyAyLjcgMC0wLjQyMDAyIDAuNTM0NDMtMy44OTM2bC0wLTIuNzAwNCAtMSAtMS00LTAuNDQxMDgtMy4zMzk2IDEuMzk5NzMgMC0yMC40OTIgMy4zMDA4IEMyMiwgM2wwLDJDMzIsIDQsIDAsMFozMDBNQzAwzMiwgWWUwQSt9PXdKT3NOUk+WC+l/1CglC+tJ3wgZG8PSUg0VT4hSUNNUFIUZU4jDktd9sC');
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 12px 8px;
    }

    /* Add some hover effect */
    .customer-info select:hover {
        border-color: #aaa;
    }

    /* Style for the dropdown options */
    .customer-info select option {
        padding: 10px;
        font-size: 16px;
    }

    /* General form field styling */
    .customer-info-field {
        margin-bottom: 15px;
    }

    .customer-info h3 {
        font-size: 24px;
        margin-bottom: 20px;
        color: #333;
    }


    .customer-info-row {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }

    .customer-info-field {
        flex: 1 1 30%;
        /* Each field takes up approximately 30% of the row */
        margin-right: 10px;
        /* Space between fields */
        box-sizing: border-box;
        /* Ensures padding and borders are included in the width */
    }

    .customer-info-field input {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        /* Ensures padding is included in the width */
        border: 1px solid #ccc;
        /* Light border for inputs */
        border-radius: 4px;
        /* Rounded corners for inputs */
    }

    .product_list_search {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        /* Space below search bar */
    }

    .product_list_search input[type="text"] {
        flex: 1;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-right: 10px;
        /* Space between input and button */
    }

    .product_list_search .search_icon button {
        background-color: #007bff;
        /* Button color */
        color: #fff;
        /* Text color */
        border: none;
        padding: 10px 15px;
        border-radius: 4px;
        cursor: pointer;
    }

    .product_list_search .search_icon button:hover {
        background-color: #0056b3;
        /* Darker color on hover */
    }

    .cart_icon a {
        color: #007bff;
        /* Link color */
        text-decoration: none;
    }

    .cart_icon a:hover {
        text-decoration: underline;
        /* Underline on hover */
    }

    .product_sec .product_list {
        margin-top: 20px;
    }

    .product_list .table_scroll {
        overflow-x: auto;
    }

    .product_list table {
        width: 100%;
        border-collapse: collapse;
    }

    .product_list th,
    .product_list td {
        padding: 10px;
        border: 1px solid #ddd;
        text-align: left;
    }

    .product_list th {
        background-color: #f8f9fa;
        /* Light background for headers */
    }

    .product-list .buttons-wrapper {
        display: flex;
        align-items: center;
    }

    .quantity-box-wrapper {
        display: flex;
        align-items: center;
    }

    .quantity-box-wrapper input[type="button"],
    .quantity-box-wrapper input[type="number"] {
        height: 40px;
    }

    .quantity-box-wrapper input[type="button"] {
        background-color: #007bff;
        /* Button color */
        color: #fff;
        border: none;
        padding: 0 15px;
        cursor: pointer;
    }

    .quantity-box-wrapper input[type="button"]:hover {
        background-color: #0056b3;
        /* Darker color on hover */
    }

    .quantity-box-wrapper input[type="number"] {
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 60px;
        margin: 0 5px;
        /* Space between buttons and input */
    }

    .quote_notes {
        width: 100%;
    }

    .pagination {justify-content: center;}
    .pagination li a {color: #000;}
    .pagination li.active a {background: #000;}

    textarea#quote_notes {width: 100%;}
    .quotes_button button {background-color: #000 !important;}
    .quotes_button {
        text-align: center;
        margin-top: 20px;
    }

    .quotes_button button {
        background-color: #007bff;
        /* Button background color */
        color: white;
        /* Text color */
        border: none;
        padding: 12px 24px;
        font-size: 16px;
        border-radius: 5px;
        cursor: pointer;
        margin: 10px;
        transition: background-color 0.3s ease, transform 0.3s ease;
        /* Smooth transition */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* Subtle shadow */
    }

    .quotes_button button:hover {
        background-color: #0056b3;
        /* Darker background on hover */
        transform: translateY(-2px);
        /* Slight lift on hover */
    }

    .quotes_button button:active {
        background-color: #004085;
        /* Darker background on active state */
        transform: translateY(0);
        /* Reset transform on click */
    }

    .quotes_button button:focus {
        outline: none;
        /* Remove default focus outline */
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
        /* Custom focus outline */
    }

    /* Style the dropdown container */
    .user_selection {
        text-align: center;
        margin: 20px 0;
        /* Add some space around the dropdown */
    }

    /* Style the label */
    .user_selection label {
        font-size: 16px;
        /* Increase the font size */
        margin-right: 10px;
        /* Add some space between the label and dropdown */
        font-weight: bold;
        /* Make the label bold */
        color: #333;
        /* Dark text color */
    }

    /* Style the dropdown itself */
    #user_selection_dropdown {
        width: 300px;
        /* Set a specific width */
        padding: 10px;
        /* Add padding inside the dropdown */
        font-size: 16px;
        /* Increase font size for better readability */
        border: 1px solid #ccc;
        /* Add a border to the dropdown */
        border-radius: 5px;
        /* Rounded corners */
        background-color: #f9f9f9;
        /* Light background color */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        /* Subtle shadow for depth */
        transition: background-color 0.3s ease, border-color 0.3s ease;
        /* Smooth transition for hover effects */
    }

    /* Style dropdown on focus */
    #user_selection_dropdown:focus {
        border-color: #007bff;
        /* Change border color on focus */
        background-color: #fff;
        /* Change background color on focus */
        outline: none;
        /* Remove default outline */
    }

    /* Optional: Add hover effect */
    #user_selection_dropdown:hover {
        background-color: #e9ecef;
        /* Change background color on hover */
    }

    /* Optional: Add a custom arrow for the dropdown */
    #user_selection_dropdown {
        -webkit-appearance: none;
        /* Remove default arrow in webkit browsers */
        -moz-appearance: none;
        /* Remove default arrow in Firefox */
        appearance: none;
        /* Remove default arrow in other browsers */
        background-image: url('data:image/svg+xml;charset=US-ASCII,<svg%20xmlns="http://www.w3.org/2000/svg"%20width="12"%20height="12"%20viewBox="0%200%2024%2024"><path%20d="M7%2010l5%205%205-5z"/></svg>');
        /* Custom arrow icon */
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 12px 12px;
    }
    .qty-update-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

.qty-update-container input.quote-qty {
    width: 60px;
    padding: 5px;
    font-size: 14px;
    text-align: center;
}

.update-qty-btn.btn_update {
    cursor: pointer;
    height: 30px;
    margin-right: 15px;
}




.customer-details {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    margin: 20px auto;
    max-width: 900px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}

.customer-details h3 {
    text-align: center;
    color: #444;
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: bold;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}

.two-columns .detail-column {
    width: 48%; /* Equal space for Name/Email and Address Line 1/2 */
}

.three-columns .detail-column {
    width: 30%; /* For City, State, ZIP */
}

.one-column .detail-column {
    width: 100%; /* For Phone */
}

.detail-column {
    display: flex;
    flex-direction: column;
}

.detail-label {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.detail-value {
    color: #555;
    font-size: 16px;
    padding: 8px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    min-height:42px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .detail-row {
        flex-wrap: wrap;
    }

    .detail-column {
        width: 100%; /* Full width on small screens */
        margin-bottom: 10px;
    }
}
#quote-status {
    margin: 20px;
}

.quote_heading h2 {
    margin-bottom: 20px;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th, .table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}

.table th {
    background-color: #f4f4f4;
}

.btn {
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.btn-primary {
    background-color: black;
    color: #fff;
}

.btn-secondary {
    background-color: #6c757d;
    color: #fff;
}

.text-center {
    text-align: center;
}
.create_quote .container-menubar
{
    display: none;
}

.btn:hover
{
    color: white;
}