.portalsetting > div > div:first-child {
    flex: 1 0 auto;
}

.portalsetting > div > div:nth-child(2) {
    width: 120px;
}

.portalsetting fluent-divider {
    margin: 0 !important;
}

/* // PRODUCT MEASURES // */

.productmeasure {
    overflow: visible;
    border-color: var(--neutral-stroke-focus) !important;
    /* to show border-radius since we use overflow: visible */
    padding: 2px;
}
    /*
    .productmeasure th {
        font-weight: normal;
    }
    */

    .productmeasure table fluent-select {
        min-width: auto;
    }

    .productmeasure table .stack-horizontal {
        align-items: end !important;
    }

    .productmeasure table fluent-number-field {
        width: 120px;
    }

.checkout {
    row-gap: 20px !important;
    max-width: 720px;
}

    .checkout > div.stack-horizontal {
        column-gap: 20px !important;
    }

        .checkout .fluent-autocomplete-multiselect,
        .checkout .fluent-autocomplete-multiselect > *,
        .checkout > div.stack-horizontal > div {
            width: 100%;
        }

.checkout-totals {
    width: 100%;
    padding: 16px;
    text-align: center;
    font-size: var(--type-ramp-plus-2-font-size);
    line-height: var(--type-ramp-plus-2-line-height);
    font-weight: lighter;
    margin: 0;
    border-color: var(--neutral-fill-inverse-rest);
}

/* Centered since the last status change is underneath */
.statuslabel {
    justify-content: center;
}

fluent-button.status::part(control) {
    justify-content: center;
}

/*#region ===== PAGE HEADER 3 COLUMN WITH BUTTONS ===== */

.header3col {
    align-items: center !important;
    column-gap: 40px !important;
    justify-content: space-between !important;
    padding: 8px;
}

    .header3col > div:first-child {
        white-space: nowrap;
        padding-left: 20px;
    }

    .header3col > div:nth-child(2),
    .header3col > div:nth-child(3) {
        white-space: nowrap;
    }

    .header3col > div:nth-child(4) {
        width: 120px;
    }

.orderstatus {
    text-align: center;
    padding: 20px 0;
}

    .orderstatus fluent-button {
        min-width: 140px;
        margin: 2px 0;
    }

    .orderstatus span {
        display: block;
        font-size: var(--type-ramp-minus-1-font-size);
        color: var(--neutral-foreground-hover);
    }

/*#endregion ===== */

/*#region ===== CART ===== */

.fluentui-counterbadge[title="0"] {
    display: none;
}

.cart-item {
    column-gap: 18px !important;
    padding: 10px;
}

    .cart-item.new {
        border: 1px solid var(--accent-fill-rest);
        border-radius: 4px;
    }

    /* product info */
    .cart-item > div:nth-child(2) {
        row-gap: 6px !important;
    }
        /* product title */
        .cart-item > div:nth-child(2) > div:first-child {
        }
        /* product category */
        .cart-item > div:nth-child(2) > div,
        .cart-item > div:nth-child(3) > div:not(:first-child) {
            font-size: var(--type-ramp-minus-1-font-size);
        }

            .cart-item > div:nth-child(2) > div:nth-child(1) {
                font-size: var(--type-ramp-base-font-size);
            }

    /* order info */
    .cart-item > div:nth-child(3) {
        max-width: 180px;
        row-gap: 6px !important;
        text-align: center;
    }

        .cart-item > div:nth-child(3) > div:first-child {
            align-items: center !important;
            justify-content: center !important;
        }

        .cart-item > div:nth-child(3) fluent-select {
            min-width: 110px;
        }

    .cart-item > div:first-child {
        min-width: 90px;
    }

        .cart-item > div:first-child,
        .cart-item > div:first-child img {
            max-width: 90px;
        }

/* Product itms in orderable list */
.pitem > fluent-button:not(.del) > svg {
    margin-left: -7px;
}

/*#endregion ===== */

/*#region ===== ORDER ===== */
order-comments {
    padding: 16px;
    border-radius: 6px 0 6px 6px;
}

.order-comments > div {
    padding: 10px;
    margin-top: 10px;
}

    .order-comments > div:first-child {
        margin-top: 0;
    }
    /* Name / Created / Updated */
    .order-comments > div > div:first-child {
        line-height: var(--type-ramp-plus-1-line-height);
        border-right: 1px solid var(--neutral-stroke-focus);
        padding-right: 10px;
        width: 120px;
    }

        .order-comments > div > div:first-child span {
            display: block;
        }

        .order-comments > div > div:first-child > span:nth-child(2),
        .order-comments > div > div:first-child > span:nth-child(3) {
            font-size: var(--type-ramp-minus-1-font-size);
            opacity: .8;
            text-align: center;
        }

        .order-comments > div > div:first-child span:nth-child(3) {
            font-style: italic;
        }

            .order-comments > div > div:first-child span:nth-child(3) > span {
                margin-top: -6px;
            }

    /* Comment */
    .order-comments > div > div:nth-child(2) {
        flex-grow: 1;
    }

        .order-comments > div > div:nth-child(2) > div {
            font-style: italic
        }

.order-comments .creator0 {
    border-color: var(--accent-fill-rest);
}

/* Returns */

.returns {
}

    .returns > div > div {
        column-gap: 20px !important;
        justify-content: end !important;
        padding: 10px;
    }

/*#endregion ===== */

/*#region ===== DASHBOARD ===== */

.minicharts {
    justify-content: space-evenly !important;
    margin: 28px 0 32px;
}

    .minicharts > div {
        width: 220px !important;
        text-align: end;
    }

        .minicharts > div > div:nth-child(1) {
            font-size: 40px;
            padding: 12px 0 16px;
        }

        .minicharts > div > div:nth-child(2) {
            opacity: 0.8;
        }
        /*
        .minicharts > div > div:nth-child(3) {
        }*/

/*#endregion ===== */

/*#region ===== USER CREATE ===== */

.usercreate {
    max-width: 800px;
}

    .usercreate fluent-text-area,
    .usercreate fluent-text-field {
        width: 100%;
    }

    .usercreate div.compbox.sameform.pad {
        margin: 16px 0;
    }

/*#endregion ===== */