h3.blue {
    background-color: #008adb;
    color: #FFF;
}

.order { border-top: 1px solid #CCC; }

.orderform { padding: 10px; }

.order .labels {
    background-color: #F9F9F9;
    text-transform: uppercase;
}

.order .labels > div {
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
}

.order .product > div:not(:first-child) {
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    line-height: 40px;
}

.order .product { border-top: 1px solid #CCC; }

/* ((())) INFO: dublirano s basket.css */
.order .product picture {
    display: block;
    width: 60px;
    height: 60px;
    float: left;
    margin-right: 10px;
}

.order .product picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* <<<<<< */

.order .product .l,
.order .product .p1.c,
.order .product .r { line-height: 20px }

.order .product .l { padding: 10px 0 10px 10px; }

.order .product .r { padding: 10px 10px 10px 0; }

/* ((())) INFO: dublirano s products.css */
.order .product a.title {
    display: block;
    padding: 5px 0;
    text-decoration: none;
    color: #2457AA;
    font-weight: 700;
}
/* <<<<<< */

.order .product { position: relative; }

.order .product .remove {
    position: absolute;
    top: 0;
    right: 0;
}

/* TODO: move in delivery.css */
.order .delivery { border-top: 1px solid #CCC; }
/* <<<<<< */


/* TODO: move in invoice.css */
.order .invoice { border-top: 1px solid #CCC; }
/* <<<<<< */

.order .total {
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    font-size: 18px;
    font-weight: bold;
    text-align: right;
    margin: 0 10px;
}

/*            .order .total > div,
.order .buttons > div {
    width: 50%;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    padding: 10px;
}

.order .total textarea { width: 100%; }*/


/* ((())) INFO: dublirano s basket.css */
.order a.button {
    display: inline-block;
    text-transform: uppercase;
    text-align: center;
    font-size: 14px;
    line-height: 24px;
    text-decoration: none;
    padding: 5px 20px;
    color: #fff;
    background-color: #0084d9;
    border-radius: 5px;
    cursor: pointer;
}

.order a.button:hover { background-color: #0b4887; }
/* <<<<<< */

/*.order .product > div:last-child > div {
    width: 33.333333333%;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
}*/

.paymentInfo {
    padding: 10px;
    margin: 0 10px;
    background-color: #FFFEE4;
    color: red;
}

.product .green,
.product .blue,
.product .yellow,
.product .orange,
.product .red,
.product .white {
    padding: 1px 3px;
    margin-bottom: 2px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 15px;
    /*max-width: 120px;*/
    /*white-space: nowrap;*/
}

.product .green {
    background-color: #d2e9b2;
    border: 1px solid #abc783;
}

.product .blue {
    background-color: #85c7ee;
    border: 1px solid #008adb;
}

.product .yellow { /* INFO: same as green !!! */
    background-color: #d2e9b2;
    border: 1px solid #abc783;
}

.product .orange {
    background-color: #ffd870;
    border: 1px solid #ffc470;
}

.product .red {
    background-color: red;
    border: 1px solid #c00000;
    color: #FFF;
}

.product .white {
    background-color: #FFF;
    border: 1px solid #CCC;
}



@media (max-width: 640px) {
    h3.blue { padding: 10px; }

    .order .buttons { padding: 10px; }

    .order .product > div:first-child { padding: 10px 80px 10px 10px; }

    .order .product > div:not(:first-child) { padding: 0 10px; }

    .order .remove { padding: 10px 10px 10px 20px; }
}

@media (min-width: 641px) {
    h3.blue { padding: 14px 20px; }

    .order .labels  { padding: 3px 10px; }
    .order .delivery,
    .order .total { padding: 10px; }

    .order .buttons { padding: 20px; }

    .order .remove { padding: 10px 20px; }
}

@media (min-width: 641px) and (max-width: 900px) {
    .order .product > div:first-child { padding: 10px 100px 10px 20px; }

    .order .product > div:not(:first-child) { padding: 0 20px; }
}

/* Tablet & Mobile */
@media (max-width: 900px) {
    .order .product { border-bottom: 8px solid #F9F9F9; }

    .order .labels > div:first-child { display: none; }

    .order .product > div:first-child { border-bottom: 1px solid #CCC; }

    .order .labels > div:not(:first-child),
    .order .product > div:not(:first-child) { width: 33.333333333%; }

    .order .product > div:not(:first-child) { border-bottom: 1px solid #CCC; }

/*    .order .product > div:not(:first-child) {
        height: 41px;
        border-bottom: 1px solid #CCC;
    }*/
}


/* Tablet & Desktop */
@media (min-width: 901px) {
    .order .product { padding: 0 10px; }

    .order .product > div {
        display: inline-block;
        box-sizing: border-box;
        vertical-align: top;
    }

    .order .labels > div:first-child,
    .order .product > div:first-child { width: 40%; }

    .order .product > div:first-child { padding: 10px; }

    .order .labels > div:not(:first-child),
    .order .product > div:not(:first-child) { width: 15%; }

    .order .product > div:last-child { width: 45%; }

    .order .product .l,
    .order .product .r { line-height: 20px; }

    .order .product > div:not(:first-child) { margin: 40px 0 0 0; }

    .order .product > div:nth-child(2) {
        margin-top: 15px;
        vertical-align: top;
        padding-right: 20px;
    }
}

@media (max-width: 1440px) {
    h3.blue { margin: 10px 0 2px 0; }
}

@media (min-width: 1441px) {
    h3.blue { margin: 10px 10px 2px 10px; }

    .order,
    .orderform { margin: 0 10px; }
}