/**
 * -----------------
 * Color order stati
 * -----------------
 */

.woocommerce-MyAccount-content table tr td span.order-status.status-alert {
    background: #f8dda7;
    color: #573b00;
}

.woocommerce-MyAccount-content table tr td span.order-status.status-info {
    background: #c7deed;
    color: #003d66;
}

.woocommerce-MyAccount-content table tr td span.order-status.status-success {
    background: #c6e1c6;
    color: #2c4700;
}

.woocommerce-MyAccount-content table tr td span.order-status.status-error {
    background: #eba3a3;
    color: #570000;
}

.woocommerce-MyAccount-content table tr td span.order-status.status-benign {
    background-color: var( --color-pearlgray-light );
}

/**
 * ------------------------------------
 * Style order stati in orders overview
 * ------------------------------------
 */

.woocommerce-MyAccount-content table.account-orders-table tr.woocommerce-orders-table__row td.woocommerce-orders-table__cell span.order-status {
    display: inline-block;
    border-radius: calc( 1em + 10px );
    padding: 5px 12px;
}

/**
 * -------------------------------------
 * Style order progress in order details
 * -------------------------------------
 */

.woocommerce-MyAccount-content section.woocommerce-order-progress table tr td span.order-status {
    display: inline-block;
    border-radius: calc( 1em + 10px );
    padding: 5px 12px;
    color: var( --color-panthagray );
}

.woocommerce-MyAccount-content section.woocommerce-order-progress table tr:first-child td {
    background-color: var( --color-pearlwhite );
}

.woocommerce-MyAccount-content section.woocommerce-order-progress table span.entry {
    display: inline-block;
    border-radius: 50%;
    padding: 8px;
    width: calc( 1em + 16px );
    height: calc( 1em + 16px );
    line-height: 1em;
    color: var( --color-white );
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    margin-right: 10px;
}

.woocommerce-MyAccount-content section.woocommerce-order-progress table span.entry.passed {
    background-color: var( --color-pearlgray-light );
}

.woocommerce-MyAccount-content section.woocommerce-order-progress table span.entry.recent {
    background-color: var( --color-pearlgray );
}