html,
body {
    overflow-x: hidden; /* Prevent scroll on narrow devices */
}

body {
    padding-top: 56px;
}

body.env-test {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='100px'><text transform='translate(20, 100) rotate(-45)' fill='rgb(245,45,45)' font-size='15'>TEST</text></svg>");
}

table {
    font-size: .9rem;
}

body {
    padding: 0 !important;
}

@media (max-width: 991.98px) {
    .offcanvas-collapse {
        position: fixed;
        top: 56px; /* Height of navbar */
        bottom: 0;
        left: 100%;
        width: 100%;
        padding-right: 1rem;
        padding-left: 1rem;
        overflow-y: auto;
        visibility: hidden;
        background-color: #343a40;
        transition: transform .3s ease-in-out, visibility .3s ease-in-out;
    }

        .offcanvas-collapse.open {
            visibility: visible;
            transform: translateX(-100%);
        }
}


.navbar-dark .nav {
    display: flex;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, .75);
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    flex-direction: row;
    justify-content: space-between;
    gap:0;
}

.nav-underline .nav-link {
    padding: 5px;
    font-size: 0.85rem;
    color: #ddd;
    border-right: solid 1px #333;
    text-align: left;
    border-bottom: solid 1px #333;
    opacity: 0.7;
}

    .nav-underline .nav-link:hover {
        color: #000;
        background: #fff;
        opacity: 1;
    }
    .nav-underline .nav-link.selected {
        color: #000;
        background: #fff;
        opacity: 1;
    }

.nav-tools {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: space-evenly;
    border-bottom: solid 1px #333;
    background: #000;
    padding: 10px 0;
    align-items: center;
}

.nav-link-title {
    font-weight: 600;
}

.nav-link-badges {
    display:flex;
}

.nav-link-badges .bg-danger {
    margin-left:2px;
}

.nav-underline .active {
    font-weight: 500;
    color: #343a40;
}

.navbar-dark .badge {
    font-size: .95em;
}

.bg-purple {
    background-color: #6f42c1;
}

.badge {
    font-weight: normal;
}

main {
    margin-top: 100px;
    margin-bottom: 100px;
}

.nav-underline .nav-link {
    color: #ddd;
}

.row-orderno-column {
    text-wrap: nowrap;
}

.nav-link.title {
    color: #888;
    font-weight: normal;
}

.navbar-dark input {
    line-height: 1em;
    display: inline;
    height: 30px;
    vertical-align: bottom;
    width: 170px;
    margin-top: 8px;
    text-transform: uppercase;
}

.navbar-dark select {
    line-height: 1em;
    display: inline;
    height: 30px;
    vertical-align: bottom;
    width: 170px;
    margin-top: 8px;
}

.navbar-dark button {
    font-size: 15px;
    margin-left: 20px;
    height: 36px;
    margin-top: 4px;
}

.sent-details i {
    font-size: 0.9em;
    font-style: normal;
}

.sent-details-col {
/*    text-align: right;*/
}

.environment {
    color: #ffc107 !important;
    font-weight: bold !important;
    font-size: 150% !important;
    opacity:1;
}

#toast-container {
    position: fixed;
    z-index: 1055;
    top: 100px;
    right: 10px;
}

#toast-wrapper {
    position: fixed;
    top: 160px;
    right: 20px;
    margin: 5px;
}

#toast-container button {
    float: right;
    display: block;
    text-align: right;
    position: absolute;
    right: 10px;
    left: auto;
    border: 0;
    background: none;
}

.toast-header {
    padding: 0.1rem 0.75rem !important;
}

.toast {
    border: 1px solid rgba(0,0,0,.2) !important;
    box-shadow: 8px 1rem 1rem 0px rgb(0 0 0 / 15%) !important;
}

.toast img {
    margin-right: 10px;
}

.toast strong {
    margin-right: 10px;
}

.toast-header .badge {
    margin-left: 10px;
}

.toast-body i {
    font-style: normal;
    width: 80px;
    display: inline-block;
}

tr.primary-row .address label {
    font-size: 12px;
    color: #555;
    vertical-align: text-top;
    margin: 0 3px 0 13px;
}

tr.primary-row .address.invalid {
    color: red;
}

.pay-name {
    font-size: .75em;
}

.note {
    font-size: 14px;
    color: darkgoldenrod;
}

.note b {
    font-weight:normal;
}

.invoice-note {
    font-size: 12px;
    color: mediumpurple;
}

.invoice-note-red {
    background: #dc3545;
    color: #fff;
    padding: 2px 4px;
    border-radius: 10px;
}

.info-part span {
    font-size: 12px;
}

tr.action-row img {
    max-height: 20px;
}

tr.secondary-row.mb-4 {
    border-color: transparent;
}

.hidden {
    display: none;
}

.table-row-container {
    background: #fff;
    border-collapse: separate;
    box-shadow: rgb(0 0 0 / 5%) 0px 6px 24px 0px, rgb(0 0 0 / 8%) 0px 0px 0px 1px;
}

.info-part {
    margin-right: 15px;
    display: inline-block;
}

.orderId-large {
    font-size: 16px;
}

.vendor-selected td span {
    background-color: rgb(13 202 240 / 30%);
}

.vendor-selected td.sent-item-column span, .sent-details span {
    background-color: unset;
}

#num-orders {
    font-size: 30px;
    color: #fff;
    margin-left: 20px;
    font-weight: bold;
    display: block;
    margin-right: 20px;
}

.num-orders {
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    right: 0;
    top: 0;
}

.action-panel {
    text-align: center;
    margin-top: 30px;
}

.action-panel button {
    display: inline-block;
}

.table-row-container.selected {
    box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
}

#showingText {
    text-shadow: #ffffff 1px 1px 0;
    color: #939597;
    font-size: 21px;
    text-align: center;
    margin-top: 0;
    padding-top: 0;
}

.variant2 i {
    font-size: .75em;
    font-style: normal;
}

.vendor-header-row td {
    padding-top: 1em;
    vertical-align:top;
}

.label-success, .badge-success {
    background-color: #468847;
}

.label-important, .badge-important {
    background-color: #b94a48;
}

.text-success {
    color: #468847 !important;
    font-size: .75em;
}

.text-important {
    color: #b94a48 !important;
    font-size: .75em;
}

.form-check-input[type=radio] {
    border-radius: 2px;
}

.form-check {
    margin-right: 20px;
    display: flex;
    align-items: center;
}

.offcanvas .form-check .form-check-input {
    height: 38px;
    margin-top: 0;
    width: 38px;
}

.form-check .form-check-label {
    margin-top: 6px;
    margin-left: 5px;
}

.icon-sentto {
    padding: 5px 9px;
    border-radius: 100px;
    font-weight: bold;
    font-size: 12px;
}

.icon-watea {
    background: skyblue;
}

.icon-customer {
    background: yellow;
}

.icon-actual-profit {
    background: #2d742f;
    font-weight: normal;
    transform: translate(-50%,3px) !important;
    border-radius: 4px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    top:40px !important;
}

.icon-margin {
    font-size: 14px;
}

.loss .icon-actual-profit {
    background: #dc3545;
}

hr {
    margin:3px 0;
}

.icon-manual, .icon-unspecified {
    display: none;
}

.order-actions {
    visibility: hidden;
    padding: 0;
}

.order-icons {
    float: right;
}

.table-row-container:hover .order-actions {
    visibility: visible;
}

.order-actions button {
    font-size: 12px;
    padding: 0 5px;
    background: none;
}

.order-actions .order-action-addnote {
    border-color: darkgoldenrod;
    color: darkgoldenrod;
}

.order-actions .order-action-addnote:hover {
    background-color: darkgoldenrod;
    color: white;
}

.order-actions .order-action-toggleFulfilledItems {
    background-color: white;
    color: black;
}

.order-actions .order-action-toggleFulfilledItems:hover {
    background-color: black;
    color: white;
}

.order-actions .order-action-toggleLock {
    border-color: red;
    color: red;
}

    .order-actions .order-action-toggleLock:hover {
        background-color: red;
        color: white;
    }

.bg-order2, .btn-order2 {
    background: darkgoldenrod;
}

.order-results, .order-actions {
    display: inline-block;
    margin-right: 10px;
}

.btn-toolbar .btn-group {
    margin-right: 20px;
    margin-top: 1px;
}

.total-discounts span {
    color: #ff5722 !important;
}

.start-100-40 {
    left: calc(100% + 32px) !important;
}

.nav .form-select {
    margin-right: 30px;
}

.fulfilled-header-row td {
    padding-top: 40px;
}

.loss {
    border-top: solid 10px #dc3644;
}

.item-profit-calc {
    margin-left: 10px;
    font-size: .75em;
    display: none;
}

    .item-profit-calc .green {
        font-weight: normal;
        color: rgb(25,135,84);
    }

    .item-profit-calc .red {
        font-weight: normal;
        color: #dc3644;
    }

.variant2 .text-success, .variant2 .text-important {
    width: 70px;
    display: inline-block;
}

.table-row-container:hover .item-profit-calc {
    display: inline-block;
}

.order-vendor-actions {
    display: none;
}

.table-row-container:hover .order-vendor-actions {
    display: inline-block;
}

.order-vendor-actions .btn {
    font-size: 12px;
    padding: 0 5px;
    background: none;
}

.order-vendor-actions .order-action-instockwatea {
    border-color: darkgoldenrod;
    color: darkgoldenrod;
}

.tracking {
    color:#eee;
}

tr.vendor-header-row td {
    padding-bottom: 5px;
}

.rural {
    font-size: 12px;
}

.tracking {
    color: #444;
}

.info-part-referrer {
    max-width: 400px;
}

.btn-selectSupplier {
    color: #aaa;
    color: #ccc;
}

.toast {
    background:#fff;
}

@media (max-width: 800px) {
    .fixed-top {
        position: relative;
    }

    .offcanvas-bottom {
        height: 50vh;
    }
}

.stt {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgb(255, 255, 255) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='currentColor' d='M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
    opacity: 1;
    z-index: 9999999;
}

    .stt:hover {
        opacity: 0.8;
    }

    .stt:focus {
        opacity: 0.9;
    }

    .stt:active {
        opacity: 1;
    }

.sttlo {
    position: fixed;
    right: 4.5rem;
    bottom: 1rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    opacity: 1;
    z-index: 9999999;
}

    .sttlo svg {
        color: white;
        background: #fff;
        border-radius: 100px;
        padding: 5px;
    }

.nav-item.dropdown-toggle {
    border:0;
}

.invoice-link {
    color: #9572dc;
    text-decoration: none;
    margin-right:3px;
}

.invoice-link:hover {
    text-decoration:underline;
}

.mode-audit .item-fulfilled-row.hidden,
.mode-audit .fulfilled-header-row.hidden {
    display: block;
}

.mode-audit .sent {
    opacity:1;
}

.issue-pdf {
    width:100%;
    height:80vh;
}

table.resolved {
    opacity:0.5;
}

.issue-card .order-actions {
    display:none;
}

.issueDelete-action {
    float:right;
}

.form-orderNo {
    margin-bottom: 20px;
    width: 100px;
    display: inline-block;
}

.issue-card .sent {
    opacity:1;
}

.order-action-issuedelete {
    border-color: red;
    color: red;
}

.order-action-issuedelete:hover {
    background:red;
    color:#fff;
}

.order-action-issuefetchorder {
}

.order-action-issuefetchorder:hover {
    background: darkgoldenrod;
    color: #fff;
}

.issue-card .form-issuelookup label {
    display: block;
}

.form-issuelookup, .form-issueresolve {
    padding: 10px 0;
    margin: 0px 0px;
}

.form-issuelookup {
    display: inline-block;
    background-color: rgba(var(--bs-warning-rgb),var(--bs-bg-opacity)) !important;
    border: 0;
    padding: 10px 4px;
    border-radius: 2px;
    margin-bottom:20px;
}

.form-controls {
    margin-top: 20px;
    padding: 0;
    background: #fefefe;
    border: solid 1px #e1e1e1;
    border-radius: 2px;
}

.issue-card .form-orderNo {
    margin-bottom: 0;
}

.issue-lines {
    display: inline-block;
    margin-bottom: 0;
    min-width: 400px;
}

.processing-item-qty {
    width: 50px;
    text-align: right;
}

.form-issueresolve label {
    display:block;
}

.invoice-details {
    font-size:12px;
}

    .invoice-details .text-important,
    .invoice-details .text-success {
        font-size: 1em;
    }

.order-profitability hr {
    height: 0.01em;
    color: #999;
}

.order-profitability h4 {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
}

.order-profitability h4.profit {
    color: #2d742f;
    border-top: unset;
}

.order-profitability h4.loss {
    color: #dc3545;
    border-top:unset;
}

.order-profitability .text-important, .order-profitability .text-success {
    font-size: unset;
    font-weight:bold;
}

.order-profit-breakdown {
    font-size:12px;
}

.order-profit-breakdown .text-important, .order-profit-breakdown .text-success, .order-profit-breakdown .badge {
    font-size: unset;
}

.icon-actual-profit i {
    text-transform: uppercase;
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.05em;
}

.summary-top .container {
    margin-bottom:40px;
}

.summary-top .container .col {
    padding:40px;
    margin:0 40px;
    color:#fff;
    font-size:30px;
    border-radius:5px;
}

.summary-top .container label {
    display:block;
    font-size:15px;
    text-transform:uppercase;
}

.card-body-top {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.card-body-notes, .card-body-progress {
    border-radius: 2px;
    border: solid 1px #ddd;
    margin: 25px 10px 0 10px;
    padding: 20px;
}

.card-body-progress {
    padding: 20px 20px 0 20px;
}

.card-body .form-check:after {
    content: '.........';
    color: #ccc;
    margin: 0 3px 0 20px;
}

.card-body .form-check:last-of-type:after {
    content: '';
    margin-right:0;
}

.card-body-progress {
    display:flex;
}

.card-footer {
    margin-top: 20px;
    background: #fff;
    border-top: 0;
    margin-bottom: 10px;
}

.card-body-actions-delete {
    display: flex;
    flex-direction: row-reverse;
}

.right-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: space-between;
    justify-content: flex-start;
    align-items: stretch;
}

.icon-journey {
    background: #2d742f;
    font-weight: normal;
    transform: translate(-50%,3px) !important;
    border-radius: 4px;
    font-size: 16px;
    color: #fff;
    text-align: center;
}

.col-table {
    color: #000;
    display: flex;
    justify-content: center;
}

    .col-table td {
        color: #000;
        padding: 5px;
        text-align:left;
    }

        .col-table td.col-table-value {
            text-align: right;
        }

.conversion-row-visits td {
    border-bottom:0;
}

.mode-audit .order-results, .mode-audit .order-actions {
    display: none;
}

#lookup-order-modal .modal-header {
    justify-content: space-between;
}

#lookup-order-modal .close {
    border: 0;
    background: none;
}

.lookup-order-modal-card .sent {
    opacity: 1;
}

.lookup-order-modal-card {
    margin: 10px 0;
    padding: 0;
}

    .lookup-order-modal-card .order-selected {
        display: none;
    }

.order-locked-icon {
    font-size: 16px;
    color: red;
    display: none;
}

.locked .order-locked-icon {
    display: inline;
}

.locked .order-selected {
    display:none;
}

.locked .order-vendor-actions {
    display:none !important;
}

.lock-reason-text {
    display:none;
}

.locked .lock-reason-text {
    color: red;
    margin-left: 5px;
    display: inline;
}

.unmatched-invoices-header span {
    margin-top: 10px;
    font-size: 12px;
    color: #fa423b;
}