brotherton-erpnext/erpnext/public/scss/order-page.scss

#page-order {
    .main-column {
        .page-content-wrapper {

            .breadcrumb-container {
                @media screen and (min-width: 567px) {
                    padding-left: var(--padding-sm);
                }
            }

            .container.my-4 {
                background-color: var(--fg-color);

                @media screen and (min-width: 567px) {
                    padding: 1.25rem 1.5rem;
                    border-radius: var(--border-radius-md);
                    box-shadow: var(--card-shadow);
                }
            }
        }
    }
}

.indicator-container {
    @media screen and (max-width: 567px) {
        padding-bottom: 0.8rem;
    }
}

.order-items {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--gray-700);

    @media screen and (max-width: 567px) {
        align-items: flex-start !important;
    }
    .col-2 {
        @media screen and (max-width: 567px) {
            flex: auto;
            max-width: 28%;
        }
    }

    .order-item-name {
        font-size: var(--text-base);
        font-weight: 500;
    }

    .btn:focus,
    .btn:hover {
        background-color: var(--control-bg);
    }


    .col-6 {
        @media screen and (max-width: 567px) {
            max-width: 100%;
        }

        &.order-item-name {
            font-size: var(--text-base);
        }
    }
}

.item-grand-total {
    font-size: var(--text-base);
}

.list-item-name,
.item-total,
.order-container,
.order-qty {
    font-size: var(--text-md);
}

.d-s-n {
    @media screen and (max-width: 567px) {
        display: none;
    }
}

.d-l-n {
    @media screen and (min-width: 567px) {
        display: none;
    }
}

.border-btm {
    border-bottom: 1px solid var(--border-color);
}

.order-taxes {
    display: flex;

    @media screen and (min-width: 567px) {
        justify-content: flex-end;
    }

    .col-4 {
        padding-right: 0;

        .col-8 {
            padding-left: 0;
            padding-right: 0;
        }

        @media screen and (max-width: 567px) {
            padding-left: 0;
            flex: auto;
            max-width: 100%;
        }
    }
}