html {
    /* background-color: grey; */
    /*background-image: -webkit-linear-gradient(65deg, #A683E3 50%, #E4E9FD 50%);*/
    min-height: 100px;
    font-family: 'helvetica neue';
}

body{ margin: 0; }

/* Progress Bar */
:root {
    --gray: #9F9FA3;
    --white: #DBF1FF;
    --purple:#A683E3;
    --font-color: black;
    --highlight-color: #A683E3;
    --table-row-separator-color: #BFC0C3;
    --topbar-h: 3rem;
    --sidebar-open: 250px;
    --sidebar-closed: 50px;
}

h1 {
    color: #fff;
    padding: 10px;
}

h2 {
    color: #fff;
    padding: 10px;
}

h3 {
    color: #A683E3;
    padding: 5px 10px 10px 0px;
    text-align: center;
    padding: 20px;
}

h5 {
    color: #A683E3;
    padding: 5px 10px 10px 0px;
}

h6 {
    color: #A683E3;
    padding: 0px 10px 10px 0px;
}

hr.searchResultHr {
    border: 0px
}

img {
    width: 80%;
    border: solid 1px #ccc;
}

.box {
    max-width: 500px;
    margin: 5px auto 5px;
    background: white;
    border-radius: 5px;
    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
    text-align: center
}

.homePageBox {
    width: 40%;
    margin: 5px auto 5px;
    background: white;
    border-radius: 5px;
    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.newRemoveInventorybox{
    max-width: 800px;
    margin: 5px auto 5px;
    background: white;
    border-radius: 5px;
    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
    text-align: center
}

.newRemoveInventoryButtonbox{
    max-width: 800px;
    margin: 5px auto 5px;
    background: white;
    border-radius: 5px;
}

.containerInboundBox {
    max-width: 400px;
    margin: 5px auto 5px;
    background: white;
    border-radius: 5px;
    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
    text-align: center
}

.containerBox {
    max-width: 400px;
    margin: 5px auto 5px;
    background: white;
    border-radius: 5px;
    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
}

.containerBox2 {
    max-width: 800px;
    margin: 5px auto 5px;
    background: white;
    border-radius: 5px;
    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
}

.eCommerceForecastContainer{
    max-width: 80%;
    margin: 5px auto 5px;
    background: white;
    border-radius: 5px;
    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
}

.homePageInfoDisplay {
    display: flex;
    align-content: space-around;
    flex-direction: column;
    justify-content: space-around;
    margin: 5px auto 5px;
}

.homePageInfoDisplayRow {
    display: flex;
    align-content: space-around;
    flex-direction: row;
    justify-content: space-around;
    margin: 5px auto 5px;
}


/*.button-container {*/
/*    display: flex;*/
/*    margin: 10px; !* Add margin to space out each button container *!*/
/*    max-width: 300px; !* Optional: Set a maximum width for each container *!*/
/*}*/


.homeLinkButton {
    display: inline-block;
    padding: 10px 20px;
    background-color: #d4c1f5;
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
}

.homeLinkButton:hover {
    background-color: #eae1fa;
}

.homePageTodaysInbound {
    max-width: 90%;
    min-height: 650px;
    align-content: space-around;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 5px auto 5px;
    background: white;
    border-radius: 5px;
    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
}


.historyInboundECommerceSearchResultContainer {
    max-width: 90%;
    /* you can keep or remove min-height as you prefer */
    min-height: 650px;

    display: flex;
    flex-wrap: wrap;          /* if you really need row‑wrapping */
    flex-direction: row;

    /* ── pull everything to the top left ── */
    align-content: flex-start;    /* vertical alignment of wrapped lines */
    justify-content: flex-start;  /* horizontal alignment of each line */
    /* ─────────────────────────────────── */

    margin: 5px auto;
    background: white;
    border-radius: 5px;
    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
}



.containerBoxHome {
    max-width: 400px;
    height: 400px;
    flex: 1 1 350px; /* This means the item can grow and shrink, and has a base width of 350px */
    margin: 5px auto 5px;
    background: white;
    border-radius: 5px;
    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
}


.messageBoardHome {
    width: 95%;
    border-radius: 5px;
    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
}

.authenticateFormBox {
    display: flex;
    justify-content: space-around;
    min-width: 400px;
}

.ecommerceTotalShipmentsToday {
    display: flex;
    flex-direction: row;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis

}

.scanTime {
    overflow: hidden;
    max-width: 14ch;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clientGroupbox {
    max-width: 600px;
    margin: 5px auto 5px;
    background: white;
    border-radius: 5px;
    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
    text-align: center
}

.containerInvoiceEntryInput {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 600px;
    margin: 5px auto 5px;
    background: white;
    border-radius: 5px;
    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
}

.ScannedBox {
    max-width: 70%;
    margin: 12px auto;
    /* padding: 10px 10px 10px 10px; */
    background: white;
    border-radius: 5px;
    /* box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3); */
}

.homeInfoDisplayTabs {
    width: 100%;
    margin: 12px auto;
    /* padding: 10px 10px 10px 10px; */
    background: white;
    border-radius: 5px;
    /* box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3); */
}

.outboundInputArea {
    max-width: 100%;
    margin: 20px auto 20px;
    /* padding: 10px 10px 10px 10px; */
    background: white;
    border-radius: 5px;
    text-align: center;
    /* box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3); */
}

.outboundList {
    max-width: 100%;
    margin: 10px auto 10px;
    /* padding: 10px 10px 10px 10px; */
    background: white;
    border-radius: 5px;
    text-align: left;
    /* box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3); */
}

.outboundHistory {
    max-width: 95%;
    margin: 10px auto 10px;
    /* padding: 10px 10px 10px 10px; */
    background: white;
    border-radius: 5px;
    text-align: center;
    /* box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3); */
}

.outboundBox {
    max-width: 100%;
    margin: 50px auto 50px;
    padding: 10px 5px 5px 10px;
    background: white;
    border-radius: 5px;
    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
}

.addProductFromInventory {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center
}

.palletOutboundSelectedPalletQt {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center
}

.checkboxForHiddingOutboundDetail {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-self: center
}

.inventoryPickingModalBodyTitleBarcode {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center
}

.eCommerceOutboundBatchSizeModal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
}

.containerResultsButtons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.invoiceTotalDisplay {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.complicateShippingLabelPrintModal {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
}

.complicateShippingLabelPrintModal1 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
}

.outboundFromInventoryOverAllDisplay {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center
}

.outBoundTruckLoadingDis {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center
}

.scanSKUPrintLabelInfoDisplay {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.outboundWarehouseOperatingArea {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center
}

.smallPackageInputArea {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-grow: 4;
}

.outboundWarehouseScanInputBox {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center
}

.trackingNumberDisplayMiddlePanel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.containerNumberBoxDisplay{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.outboundInventoryBox {
    max-width: 95%;
    margin: 50px auto 50px;
    padding: 10px 5px 5px 10px;
    background: white;
    border-radius: 5px;
    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
}

.heading {
    background-color: #A683E3;
    text-align: center;
}

.heading2 {
    /* background-color: white; */
    text-align: center;
}

.clientDropDownMenu {
    font-size: 30px;
    color: #fff;
    padding: 10px;
    background-color: #A683E3;
    margin: 20px auto 5px;
    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
    width: 300px;
    border-radius: 5px;
    text-align: center;
}

.clientDropDownMenuOptions {
    font-size: 25px;
}

.clientDropDownMenu2 {
    font-size: 30px;
    color: #fff;
    padding: 5px;
    background-color: #A683E3;
    margin: 0px auto 5px;
    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
    width: 300px;
    border-radius: 5px;
    text-align: center;
}

.dropDownMenuFromInventory {
    font-size: 15px;
    color: #fff;
    padding: 5px;
    background-color: #A683E3;
    margin: 10px auto 5px;
    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
    width: 150px;
    border-radius: 5px;
    text-align: center;
}

.clientDropDownMenuOptions2 {
    font-size: 25px;
}

.container-fluid {
    background: white
}

/* .item {
  min-height: 70px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #F1F1F1;
}

.item:last-child {
  border-bottom: 0;
} */

.palletStickerInfo {
    font-size: 50px;
    padding: 5px 5px 5px 5px;
    margin: 5px auto 5px;
}

.pickingListShipmentIDBarcode {
    font-size: 20px;
    text-align: center;
    padding: 0px 5px 5px 5px;
    margin: 0px auto 5px;
}

/* form.item {
  text-align: center;
  margin-left: 20px;
} */

a.addButton, button.addButton {
    min-height: 40px;
    width: 120px;
    border-color: transparent;
    background-color: #A683E3;
    color: #fff;
    font-size: 20px;
    padding-bottom: 6px;
    border-width: 0;
    margin-top: 16px;
    margin-bottom: 16px;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    text-decoration: none; /* Remove underline from the anchor */
}

/* Hover effect */
a.addButton:hover, button.addButton:hover {
    background-color: #d3c1f1; /* New color on hover */
}

button.addButtonDisabled {
    min-height: 40px;
    width: 120px;
    border-color: transparent;
    background-color: grey;
    color: #fff;
    font-size: 20px;
    padding-bottom: 6px;
    border-width: 0;
    margin-top: 16px;
    margin-bottom: 16px;
    border-radius: 5px;
}

button.inboundButton {
    min-height: 50px;
    width: 230px;
    border-color: transparent;
    background-color: #A683E3;
    color: #fff;
    font-size: 30px;
    padding-bottom: 6px;
    border-width: 0;
    margin: 16px auto 16px;
    border-radius: 5px;
}

button.outboundRequestButton {
    width: 80%;
    border-color: transparent;
    background-color: #A683E3;
    color: #fff;
    font-size: 25px;
    padding-bottom: 6px;
    border-width: 0;
    margin: 0px auto 5px;
    border-radius: 5px;
    text-align: left;

    white-space: normal !important;   /* allow wrapping */
    overflow-wrap: anywhere;          /* break long words if needed */
    word-break: break-word;
    max-width: 100%;
}

button.containerButton {
    /*min-height: 50%;*/
    /*width: 30%;*/
    /*min-width: 100px;*/
    /*border-color: transparent;*/
    /*background-color: #A683E3;*/
    /*color: #fff;*/
    /*font-size: 20px;*/
    /*padding-bottom: 6px;*/
    /*border-width: 0;*/
    /*margin-top: 16px;*/
    /*margin-bottom: 16px;*/
    /*border-radius: 5px;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50%;
    width: 30%;
    min-width: 100px;
    border-color: transparent;
    background-color: #A683E3;
    color: #fff;
    font-size: 20px;
    padding-bottom: 6px;
    border-width: 0;
    margin-top: 16px;
    margin-bottom: 16px;
    border-radius: 5px;
}

button.containerButtonWithInvoice {
    /*min-height: 50%;*/
    /*width: 30%;*/
    /*min-width: 100px;*/
    /*border-color: transparent;*/
    /*background-color: #A683E3;*/
    /*color: #fff;*/
    /*font-size: 20px;*/
    /*padding-bottom: 6px;*/
    /*border-width: 0;*/
    /*margin-top: 16px;*/
    /*margin-bottom: 16px;*/
    /*border-radius: 5px;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50%;
    width: 30%;
    min-width: 100px;
    border-color: transparent;
    background-color: #00A683;
    color: #fff;
    font-size: 20px;
    padding-bottom: 6px;
    border-width: 0;
    margin-top: 16px;
    margin-bottom: 16px;
    border-radius: 5px;
}

button.containerButtonSearch {
    /*min-height: 50%;*/
    /*width: 30%;*/
    /*min-width: 100px;*/
    /*border-color: transparent;*/
    /*background-color: #A683E3;*/
    /*color: #fff;*/
    /*font-size: 20px;*/
    /*padding-bottom: 6px;*/
    /*border-width: 0;*/
    /*margin-top: 16px;*/
    /*margin-bottom: 16px;*/
    /*border-radius: 5px;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50%;
    width: 45%;
    min-width: 100px;
    border-color: transparent;
    background-color: #A683E3;
    color: #fff;
    font-size: 20px;
    padding-bottom: 6px;
    border-width: 0;
    margin-top: 16px;
    margin-bottom: 16px;
    border-radius: 5px;
}

.containerButtonsBox{
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: center;
    align-items: stretch;
}

button.containerDetailButton{
    min-height: 40px;
    width: 24%;
    border-color: transparent;
    background-color: #A683E3;
    color: #fff;
    font-size: 20px;
    padding-bottom: 6px;
    border-width: 0;
    margin-top: 16px;
    margin-bottom: 16px;
    border-radius: 5px;
    text-wrap: avoid;
}

.stickerTitle {
    font-size: 50px;
    margin: 10px auto 10px;
    text-align: center
}

#ScanTrackingReset {
    min-height: 40px;
    width: 120px;
    border-color: transparent;
    background-color: #A683E3;
    color: #fff;
    font-size: 20px;
    padding-bottom: 6px;
    border-width: 0;
}


.singleColTexInput {
    text-align: center;
    height: 60px;
    top: 10px;
    border: none;
    background: transparent;
    font-size: 20px;
    font-weight: 200;
    width: 85%;
}

.trippleColTexInput {
    display: flex;
    justify-content: space-around;
    text-align: center;
    height: 60px;
    top: 10px;
    border: none;
    background: transparent;
    font-size: 20px;
    font-weight: 200;
}

.singleColNumberInput {
    text-align: center;
    height: 60px;
    top: 10px;
    border: none;
    background: transparent;
    font-size: 20px;
    font-weight: 200;
    width: 313px;
}

.singleColInput:focus {
    outline: none;
    box-shadow: inset 0 -3px 0 0 #A683E3;
}

::placeholder {
    color: grey;
    opacity: 1;
}

.OutboundButton {
    background: #A683E3;
    color: #fff;
    text-align: center;
    display: block;
    float: right;
    border-color: #fff;
    width: 300%;
}

.inventoryCheckButton {
    background: #A683E3;
    color: #fff;
    text-align: center;
    display: block;
    float: right;
    border-color: #fff;
    width: 100%;
}

.inventoryCheckInput {
    text-align: center;
    height: 30px;
    top: 10px;
    border: 1px;
    background: transparent;
    font-size: 20px;
    font-weight: 200;
    width: 80%;
}

.table-ShippingInfo {
    max-height: 350px; /* Adjust this value to the desired height */
    overflow-y: scroll;
}

.uploadButton {
    text-align: center;
}

.outboundButtons {
    background: #fff;
    text-align: center;
    display: block;
    float: right;
    border-color: #fff;
    width: 40px;
}

.tabButtons {
    background-color: #A683E3;
}

.outboundNoteBox {
    width: 100%;
    border: 1px solid #A683E3;
    margin: 10px auto 10px;
}

.uploadedFileBox {
    width: 90%;
    text-align: left;
}

/*Pallet sticker CSS*/
.stickerTitle {
    font-size: 20px;
    margin: 5px auto 5px;
    text-align: center
}

.stickerBarcodeInfo {
    font-size: 50px;
    padding: 2px 2px 2px 2px;
    margin: 2px auto 2px;
    text-align: center
}

.palletStickerInfoClient {
    font-size: 30px;
    text-align: left;
}


.palletStickerInfo {
    font-size: 50px;
    padding: 2px 2px 2px 2px;
    margin: 2px auto 2px;
    text-align: center
}

.palletRackStickerInfo {
    font-size: 50px;
    padding: 2px 2px 2px 2px;
    margin: 2px auto 2px;
    text-align: center
}


.palletStickerInfoBoxQt {
    font-size: 30px;
    padding: 5px 5px 5px 5px;
    margin: 5px auto 5px;
    text-align: center
}

.palletStickerUnloadTime {
    font-size: 20px;
    text-align: left;
}


.labelBox {
    margin: 5px auto 5px;
    text-align: center
}

#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    text-decoration: none;
    color: #fff;
    background-color: #A683E3;
    padding: 8px 12px;
    border-radius: 4px;
    display: none;
    font-size: 18px;
    opacity: 0.8;
    z-index: 1000;
}

#back-to-top:hover {
    background-color: #666;
    opacity: 1;
}

footer {
    color: white;
    color: rgba(0, 0, 0, 0.5);
    text-align: center;
}


/*below is the invoice CSS*/

a {
    color: inherit;
    text-decoration: none;
}

hr {
    margin: 1cm 0;
    height: 0;
    border: 0;
    border-top: 1mm solid var(--highlight-color);
}

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

main table thead th {
    height: 1cm;
    color: var(--highlight-color);
}

main table thead th:nth-of-type(2),
main table thead th:nth-of-type(3),
main table thead th:last-of-type {
    width: 2.5cm;
}

main table tbody td {
    padding: 2mm 0;
}


/*
By default text within TH elements is aligned in the center, we do not want that
so we overwrite it with an left alignment.
*/
/*main table th {*/
/*    text-align: center ;*/
/*}*/



/*
The summary table, so the table containing the subtotal, tax and total amount
gets a width of 40% + 2cm. The plus 2cm is added because our body has a 2cm padding
but we want our highlight color for the total row to go to the edge of the document.
To move the table to the right side we simply set a margin-left of 60%.
*/
main table.summary {
    width: calc(40% + 2cm);
    margin-left: 60%;
    margin-top: .5cm;
}

.invoiceHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
}

.palletOutboundList{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center
}

.bolCSS {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* Adjust spacing between the sections */
    align-items: flex-start; /* Align items to the top */
    padding: 10px; /* Add padding for spacing */
    border: 1px solid #ccc; /* Add a border for separation */
    border-radius: 5px; /* Add rounded corners for a container effect */
}

.bolCSS .info-section {
    flex: 1; /* Allow sections to grow and shrink evenly */
    padding: 5px; /* Add spacing between labels and values */
}

.bolCSS h5 {
    margin-top: 0; /* Remove default margin for <h5> elements */
}


.palletOutboundSearchBox {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center
}

.searchBoxArea{
    display: flex;
    width: 40%;
    flex-direction: row;
    justify-content: space-around;
    align-items: center
}
.searchBoxNoFilter{
    height: 55px;
    width:100%;
    text-indent: 33px;
    border-color:#A683E3;
    border-radius: 10px;
}
.searchButton{
    height: 55px;
    width: 70px;
    text-align: center;
    border-color:#A683E3;
    border-radius: 10px;
}

.invoiceHeaderInvoiceTotal{
    display: flex;
    flex-direction: row;
    justify-content: flex-start
}

/*
The row containing the total amount gets its background color set to the highlight
color and the font weight to bold.
*/
main table.summary tr.total {
    font-weight: bold;
    background-color: var(--highlight-color);
}

/*
The TH elements of the summary table are not on top but the cells on the left side
these get a padding left of 1cm to give the highlight color some space.
*/
main table.summary th {
    padding: 4mm 0 4mm 1cm;
}

/*
As only the highlight background color should go to the edge of the document
but the text should still have the 2cm distance, we set the padding right to
2cm.
*/
main table.summary td {
    padding: 4mm 2cm 4mm 0;
    border-bottom: 0;
}

/*
The content below the tables is placed in a ASIDE element next to the MAIN element.
To ensure this element is always at the bottom of the page, just above the page
footer, we use the Prince custom property "-prince-float" with the value bottom.
See Page Floats on https://www.princexml.com/howcome/2021/guides/float/.
*/
aside {
    -prince-float: bottom;
    padding: 0 2cm .5cm 2cm;
}

/*
The content itself is shown in 2 columns we use flexbox for this.
*/
aside > div {
    display: flex;
    justify-content: space-between;
}

/*
Each "column" has a width of 45% of the document.
*/
aside > div > div {
    width: 45%;
}

/*
The list with the payment options has no bullet points and no margin.
*/
aside > div > div ul {
    list-style-type: none;
    margin: 0;
}




.ProgressBar {
    margin: 0 auto;
    padding: 2em 0 3em;
    list-style: none;
    position: relative;
    display: flex;
    justify-content: space-between;
}

.ProgressBar-step {
    text-align: center;
    position: relative;
    width: 100%;
}

.ProgressBar-step::before,
.ProgressBar-step::after {
    content: "";
    height: 0.5em;
    background-color: var(--gray);
    position: absolute;
    z-index: 1;
    width: 100%;
    left: -50%;
    top: 50%;
    transform: translateY(-50%);
    transition: all .25s ease-out;
}

.ProgressBar-step:first-child::before,
.ProgressBar-step:first-child::after {
    display: none;
}

.ProgressBar-step::after {
    background-color: var(--purple);
    width: 0%;
}

.ProgressBar-step.is-complete + .ProgressBar-step.is-current::after,
.ProgressBar-step.is-complete + .ProgressBar-step.is-complete::after {
    width: 100%;
}

.ProgressBar-icon {
    width: 1.5em;
    height: 1.5em;
    background-color: #5e5a63;
    fill: var(--purple);
    border-radius: 50%;
    padding: 0.5em;
    max-width: 100%;
    z-index: 10;
    position: relative;
    transition: all .25s ease-out;
}


.ProgressBar-step.is-current .ProgressBar-icon {
    fill: var(--blue);
    background-color: var(--purple);
}

.ProgressBar-step.is-complete .ProgressBar-icon {
    fill: var(--white);
    background-color: var(--purple);
}

.ProgressBar-stepLabel {
    display: block;
    text-transform: uppercase;
    color: var(--gray);
    position: absolute;
    padding-top: 0.5em;
    width: 100%;
    transition: all .25s ease-out;
}

.ProgressBar-step.is-current > .ProgressBar-stepLabel,
.ProgressBar-step.is-complete > .ProgressBar-stepLabel {
    color: var(--purple);
}

button.containerButton .ProgressBar-stepLabel {
    font-size: 10px;
}



/* For Codepen Formatting */
.wrapper {
    max-width: 100%;
    margin: 4em auto;
    font-size: 16px;
}
/* End Codepen Formatting */


#finishSelectingPalletsButton {
    position: fixed;
    bottom: 10px;
    right: 25%;
    z-index: 1051; /* This should be higher than the modal's z-index to ensure the button appears on top */
}

.palletAssignmentHead{
    display: flex;
    justify-content: space-between;
}

.assignPalletToTruckButtons{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-content: center;
    margin: auto;
}


.fbaPOTable {
    table-layout: fixed;
    width: 100%;
}

.wrap-cell-content {
    white-space: normal; /* This allows the text to wrap */
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
}

/*truckload toggle switch for finishing loading*/
.toggle-switch {
    position: relative;
    width: 60px;
    height: 30px;
    display: inline-block;
}

.toggle-switch-checkbox {
    display: none;
}

.toggle-switch-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 30px;
    background-color: #ccc;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.toggle-switch-checkbox:checked + .toggle-switch-label {
    background-color: #2ECC71;
}

.toggle-switch-label::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 24px;
    transition: left 0.2s;
}

.toggle-switch-checkbox:checked + .toggle-switch-label::after {
    left: 33px;
}

/*for container search results*/

#resultsContainer {
    display: flex;
    justify-content: space-around; /* This will center a single button. */
    align-items: center;     /* This vertically centers items. */
    flex-wrap: wrap;         /* This allows items to wrap to the next line. */
}


.inboundSmallPackageScanDisplay{
    display: flex;
    justify-content: start; /* This will center a single button. */
    align-items: center;     /* This vertically centers items. */
    flex-wrap: wrap;         /* This allows items to wrap to the next line. */
}

/*findproduct input areas*/
.textarea-container {
    display: flex;
    justify-content: center; /* This will center a single button. */
    gap: 16px;  /* Adjust this value for the space between textareas */
}

.textarea-group {
    display: flex;
    flex-direction: column;
    align-items: center;  /* This aligns the label and textarea to the left */
}

.selectedWarehouse {
    background-color: #4CAF50; /* Green color for demonstration */
    color: white;
}


/*ecommerce outbound*/

button.ecommerceButton{
    min-height: 40px;
    border-color: transparent;
    background-color: #A683E3;
    color: #fff;
    font-size: 20px;
    padding-bottom: 6px;
    border-width: 0;
    margin-top: 16px;
    margin-bottom: 16px;
    border-radius: 5px;
    text-wrap: avoid;
}

.dropdown-submenu:hover .dropdown-menu {
    display: block;
}


/*e Commerce Separate and packing page*/

.left-section, .right-section {
    width: 48%; /* Adjust the width as per your requirement */
}

.eCommerceProcessSection{
    display: flex;
    justify-content: space-around;
}


/* for floating input place holders*/

/* Basic input field styles */
.singleColTexInput, .singleColNumberInput {
    width: 90%;
    padding: 8px;
    margin-top: 16px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 8px;
}

/* Container to hold each input and its label */
.inputContainer {
    position: relative;
    margin-bottom: 20px;
}

/* Style for the floating label */
.floatingLabel {
    position: absolute;
    pointer-events: none;
    left: 10%;
    top: 20%;
    transition: 0.2s ease all;
    color: #999;
}

/* Move the label above when the input is focused or filled */
.singleColTexInput:focus ~ .floatingLabel,
.singleColNumberInput:focus ~ .floatingLabel,
.singleColTexInput:not(:placeholder-shown) ~ .floatingLabel,
.singleColNumberInput:not(:placeholder-shown) ~ .floatingLabel {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: #5264AE;
}


.pickUpPDABox{
    display: flex;
    align-content: space-around;
    text-align: center;
    flex-direction: row;
    justify-content: space-around;
    margin: 5px auto 5px;
}


/*PDA pick up*/

/* Hide all nav containers by default */
.nav-desktop, .nav-mobile {
    display: none;
}



/* FILTER BOX  */

.filterBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px; /* Adjust as needed */
}


.filterBar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 8px;
    justify-content: flex-start;
    align-items: center;
}

.searchBox, .dateInput, .selectBox, .dateLabel {
    min-height: 40px; /* Ensure consistent height with button */
    height: 40px; /* Explicit height */
    line-height: 40px; /* Center text vertically */
    padding: 0 8px; /* Consistent padding for inputs */
    border-radius: 5px;
    box-sizing: border-box;
}

.searchBox, .dateInput, .selectBox {
    flex: 1 1 150px; /* Responsive width */
    border: 1px solid #ccc;
}

.dateLabel {
    line-height: 40px; /* Vertically align label text */
    margin-right: 5px; /* Spacing to the right of the label */
}



#shipmentOrderNumberQRCode {
    width: 80px;   /* Match the QR code's intended size */
    height: 80px;
    overflow: hidden;  /* Prevents any overflow */
}

     /* adjust these values as needed */
 .billing-template-wrapper {
     width: 100%;
     height: 250px;
     overflow-y: auto;
     padding: 1rem;
     border: 1px solid #ddd;
     border-radius: 0.25rem;
     background: #f9f9f9;
 }


.table th, .table td { text-align: left; }