#cart-info-flex-container {
    display: flex;
    margin-top: 2em;
    margin-bottom: 2em;
}
#cart-table,
#cart-table td,
#cart-table th,
#cart-table caption {
    border: 1px solid grey;
}
#cart-table {
    order: 1;
    width: 75%;
    margin: auto;
    margin-bottom: 2em;
    text-align: left;
    border-collapse: separate;
    border-spacing: 1px;
    table-layout: fixed;
}
#cart-table td, #cart-table th {
    padding: .3125em;
}
#cart-table th {
    background-color: #CCCC99;
    text-decoration: underline;
}
#cart-table th#catalog-id,
#cart-table th#price,
#cart-table th#amount {
    width: 10%;
}
#cart-table th#plantname {
    width: 50%;
}
#cart-table th#quantity {
    width: 20%;
    text-align: center;
}
#cart-table form.update-qty {
    text-align: center;
}
#cart-table input[type=submit],
#cart-table input[type=number] {
    height: 2em;
}
#cart-table input[type=number] {
    width: 5em;
    text-align: center;
}
#cart-table tr.subtotal,
#cart-table tr.grandtotal {
    font-weight: bold;
    background-color: #E5E5CC;
}
#cart-list p.warning,
#cart-table tr.warning {
    color: red;
    font-size: large;
    font-weight: bold;
    text-align: center;
}

#proceed-to-checkout-cell {
    text-align: center;
}
#proceed-to-checkout-cell p {
    margin-top: 0;
}
#cart-instructions {
    order: 2;
    width: 25%;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 1em;
}

.required {
    color: red;
    background-color: yellow;
}
p#intro {
    text-align: center;
}
section {
    margin: 2em auto;
}
fieldset {
    display: inline-block;
    border: 3px solid #CCCC99;
}
legend {
    /* Derived from note class. */
    color: #006600;
    font-family: Geneva, Arial, sans-serif;
    font-size: normal;
    font-weight: bold;
    letter-spacing: .02em;
}
form,
section#order-info,
section#buttons {
    text-align: center;
}
section#availability fieldset,
section#payment-options {
    text-align: left;
}

div.csz-container {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
}

section#shipping-and-contact-info fieldset div.input-element {
    margin: .25em auto;
}

#contact-info fieldset,
#shipping-info fieldset,
#availability fieldset,
#ship-date fieldset,
#comments fieldset {
    width: 50%;
}

/* Get the phone elements on the same line. */
section#contact-info fieldset div#phone-container.input-element {
    display: inline-flex;
}
section#contact-info fieldset div#phone-container.input-element label {
    margin-right: .25em;
}

/* Payment page. */
fieldset#order-comments {
    width: 50%;
    margin: auto;
}
div.formbox {
    width: 400px;
    padding: 5px;
    margin: 10px auto 20px auto;
    border: 2px solid black;
}
p {
    text-align: center;
}
form#submit-order {
    margin-bottom: 2em;
}
fieldset#cc-info {
    width: 50%;
    margin-bottom: 1em;
}
div#ccnum {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
div#details-wrapper {
    /* Center the fieldset. */
    text-align: center;
}
fieldset#order-details {
    width: 50%;
    margin-bottom: 2em;
}

/* Rearrange the order info on smaller screens. */
@media only screen and (max-width: 1340px) {
    #cart-info-flex-container { flex-direction: column; }
    #cart-action-results-mobile {
        order: 1;
        text-align: center;
    }
    #cart-table {
        order: 2;
        width: 100%;
    }
    #cart-instructions {
        order: 3;
        width: 100%;
    }
    #cart-list { order: 2; }

    /* Collapse the instructions a bit in mobile view. */
    div#cart-instructions { padding: 0; }
    div#cart-instructions p { margin: .5em auto; }
    div#cart-info-flex-container { margin: 1em auto; }
}

/* Adjust widths of fieldsets to be consistent once the
   screen size drops enough to make their contained elements
   determine the width. */
@media only screen and (max-width: 911px) {
    section#shipping-info fieldset,
    section#contact-info fieldset,
    section#availability fieldset,
    section#ship-date fieldset,
    section#comments fieldset { width: 85%; }

    form#submit-order,
    fieldset#cc-info,
    fieldset#order-details { width: 100%; }
}

/* Use the list instead of table on small screens. */
#cart-list { display: none; }
@media only screen and (max-width: 750px) {
    #cart-table { display: none; }
    #cart-list { display: initial; }
    #cart-list ul#line-items li,
    #cart-list ul.line-item li {
        text-align: center;
        list-style-type: none;
    }
    #cart-list ul#line-items {
        padding: 0;
        width: 100%;
        margin: auto;
        margin-bottom: .5em;
    }
    #cart-list ul.line-item,
    #cart-list div#totals-and-warnings,
    #cart-list div#checkout-totals-and-warnings {
        padding: .25em 0;
        width: 100%;
        margin: auto;
        background-color: #CCCC99;
    }
    #cart-list ul.line-item { margin-bottom: .5em; }
    #cart-list ul.line-item h1 {
        margin-top: 0;
        font-size: large;
    }
    #cart-list input[type=number] { width: 5em; }

    /* Place labels and values for list items and totals next to each
       other, centering the divide on the middle of the page. */
    #cart-list li.quantity form,
    #cart-list ul.line-item p.line-item-label,
    #cart-list ul.line-item p.line-item-value {
        width: 40%;
        margin: auto;
        display: inline-block;
    }
    #cart-list ul.line-item p.line-item-label { text-align: right; }
    #cart-list ul.line-item p.line-item-value { text-align: left; }
    /* Get the the number input and update button all the way to the left. */
    #cart-list li.quantity form.update-qty p.line-item-value {
        display: inline-flex;
        flex-direction: row;
        justify-content: left;
        width: 100%;
    }
    #cart-list div.total {
        width: 100%;
        margin: auto;
        text-align: center;
    }
    #cart-list div.total p.total-label,
    #cart-list div.total p.total-value {
        width: 40%;
        margin: auto;
        display: inline-block;
    }
    #cart-list div.total p.total-label { text-align: right; }
    #cart-list div.total p.total-value { text-align: left; }

    #cart-list form#checkout {
        background-color: #CCCC99;
        padding: .25em;
        margin-top: .5em;
    }
    #cart-list form#checkout p {
        margin-top: 0;
    }

    #cart-list p#grand-total {
        font-weight: bold;
        margin-top: .5em;
    }

    /* Don't bump bullets so far over on small screens. */
    #additional-ordering-info ul { padding-left: 1em; }

    /* Checkout page. */
    p#intro { margin-bottom: auto; }
    section#order-info { margin-top: 1em; }
    section#order-info h2 { margin-top: auto; }

    section#shipping-and-contact-info fieldset {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: space-between;
        text-align: left;
    }
    section#shipping-and-contact-info fieldset div.flex-column {
        flex-direction: column;
    }
    section#shipping-and-contact-info fieldset div.flex-row {
        flex-direction: row;
    }
    section#shipping-and-contact-info fieldset div.no-wrap {
        flex-wrap: nowrap;
    }
    div.csz-container div.input-element { width: 100%; }
    div.csz-container div.input-element,
    section#contact-info fieldset div.input-element,
    section#shipping-and-contact-info fieldset div.input-element {
        display: inline-flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    section#shipping-and-contact-info fieldset div.input-element label {
        width: auto;
    }
    section#shipping-and-contact-info fieldset div.input-element input {
        width: 12em;
    }
    section#contact-info fieldset div.input-element div#phone {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    section#contact-info fieldset div.input-element div#phone input {
        width: 4em;
    }
    section#shipping-info fieldset p { text-align: center; }
    section#comments textarea { width: 100%; }
    section#availability fieldset, section#ship-date fieldset, section#comments fieldset { width: 100%; }

    div.csz-container {
        display: inline-flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    fieldset#order-comments { width: 100%; }
}