.orders-content {
    grid-area: main;
    display: grid;
    grid-template-columns: 1fr minmax(100px, 1180px) 1fr;
    grid-template-areas: "a b c";
}

.orders-content-container {
    grid-area: b;
    justify-self: center;
    height: min-content;
    width: 100%;

}

.matrix-buttons {
    display: flex;
    justify-content: end;
    margin-bottom: 1em;
}

.matrix-button {
    margin-right: 1em;
    margin-left: 1em;
}

.button-and-totals-container {
    display: grid;
    grid-template-areas: "buttons totals";
    grid-template-columns: repeat(2, 50%);
    column-gap: 5px;
    padding: 0 5px 0 5px;
}

.place-order-generate-price-buttons {
    grid-area: buttons;
}

.totals {
    grid-area: totals;
    text-align: end;
    display: grid;
    grid-template-areas: "labels values";
    grid-template-columns: 75% 25%;
}

.total-labels {
    grid-area: labels;
    text-align: end;
}

.total-values {
    grid-area: values;
    text-align: end;
}

.order-form-line-items-header {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: "details sizes";
}

.order-form-line {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: "details sizes";
    margin: 10px 0 10px 0;
    border: solid darkgrey 5px;
}

.order-form-details {
    display: grid;
    grid-column: 1/2;
    grid-template-areas: "style color description";
    grid-template-columns: 14% 25% 59%;
    padding: 2px 0 2px 0;
    grid-gap: 5px;

    /*This is commented out for now, we need the parent container to fill up*/
    /*all the available space. Can uncomment the code below to see how the */
    /*order form looks with the left side of it filling up more space*/

    /*grid-row-start: span 2;*/
}

.order-form-description {
    padding:0;
    border: 0;
}

.order-form-sizes {
    display: grid;
    grid-column: 2/3;
    grid-template-areas: "XS S M L XL XL2 XL3 XL4 XL5 XL6 unit-price price";
    grid-template-columns: repeat(10, 7.0%) 58px 58px;
    background-color: lightgrey;
    column-gap: 5px;
    padding: 2px 5px 2px 5px;
}

.order-form-sizes-header {
    display: grid;
    grid-column: 2/3;
    grid-template-areas:"XS S M L XL XL2 XL3 XL4 XL5 XL6 unit-price price";
    grid-template-columns: repeat(10, 7.0%) 58px 58px;
    column-gap: 5px;
    padding: 0 5px 0 5px;
    justify-items: center;
}

.lower-priced-items {
    padding-top: 2px;
}

.higher-priced-sizes {
    padding-bottom: 2px;
}

.bkgr-lightGrey {
    background-color: lightgrey;
}

.dropdown {
    border: none;
}

.XS {
    grid-area: XS;
    text-align: center;
    padding: 0;
    display:grid;
    grid-template-areas:
            "a"
            "b";
    grid-template-columns:100%;
    grid-template-rows:1fr 100%;
}

.S {
    grid-area: S;
    text-align: center;
    padding: 0;
    display:grid;
    grid-template-areas:
            "a"
            "b";
    grid-template-columns:100%;
    grid-template-rows:1fr 100%;
}

.M {
    grid-area: M;
    text-align: center;
    padding: 0;
    display:grid;
    grid-template-areas:
            "a"
            "b";
    grid-template-columns:100%;
    grid-template-rows:1fr 100%;
}

.L {
    grid-area: L;
    text-align: center;
    padding: 0;
    display:grid;
    grid-template-areas:
            "a"
            "b";
    grid-template-columns:100%;
    grid-template-rows:1fr 100%;
}

.XL {
    grid-area: XL;
    text-align: center;
    padding: 0;
    display:grid;
    grid-template-areas:
            "a"
            "b";
    grid-template-columns:100%;
    grid-template-rows:1fr 100%;
}

.XL2 {
    grid-area: XL2;
    text-align: center;
    padding: 0;
    display:grid;
    grid-template-areas:
            "a"
            "b";
    grid-template-columns:100%;
    grid-template-rows:1fr 100%;
}

.XL3{
    grid-area: XL3;
    text-align: center;
    padding: 0;
    display:grid;
    grid-template-areas:
            "a"
            "b";
    grid-template-columns:100%;
    grid-template-rows:1fr 100%;
}

.XL4 {
    grid-area: XL4;
    text-align: center;
    padding: 0;
    display:grid;
    grid-template-areas:
            "a"
            "b";
    grid-template-columns:100%;
    grid-template-rows:1fr 100%;
}

.XL5 {
    grid-area: XL5;
    text-align: center;
    padding: 0;
    display:grid;
    grid-template-areas:
            "a"
            "b";
    grid-template-columns:100%;
    grid-template-rows:1fr 100%;
}

.XL6 {
    grid-area: XL6;
    text-align: center;
    padding: 0;
    display:grid;
    grid-template-areas:
            "a"
            "b";
    grid-template-columns:100%;
    grid-template-rows:1fr 100%;
}

.raw-material-price {
    font-size: .75em;
    grid-area: b;
    justify-self: start;
}

.size-input {
    grid-area: a;
}

.calc-price {
    grid-area: a;
    justify-self: end;
}

.print-price {
    font-size: .75em;
    grid-area: b;
    justify-self: end;
}

.unit-price {
    grid-area: unit-price;
    justify-self: center;
    padding: 0;
    display:grid;
    grid-template-areas:
            "a"
            "b";
    grid-template-columns:100%;
    grid-template-rows:65% 35%;
}

.price {
    grid-area: price;
    justify-self: end;
    padding: 0;
}

.order-info-container {
    display: grid;
    grid-template-areas: "customer design";
    grid-template-columns: 1fr 1fr;
}

.customer-container {
    grid-area: customer;
}

.design-container {
    grid-area: design;
    /*background-color: coral;*/
    text-align: center;
}

.orders-list-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.order-list-container-header {
    padding: 10px 0 10px 0;
    border-bottom: 1px solid black;
}

.new-order-button {
    font-weight: bold;
    text-decoration: none;
    color: white;
    background-color: green;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #e2e2e2;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #afafaf;

}
:-ms-input-placeholder { /* IE 10+ */
    color: #e2e2e2;
}
:-moz-placeholder { /* Firefox 18- */
    color: #e2e2e2;
}