#page.site .c-order-list-overview {
  display               : grid; 
  grid-template-columns : 0 auto auto 1fr 0;
  column-gap            : 16px;
}
@media(min-width: 768px) {
  #page.site .c-order-list-overview {
    grid-template-columns : 0 auto auto 1fr auto auto auto 0;
    column-gap            : 16px;
  }
}
@media(min-width: 1180px) {
  #page.site .c-order-list-overview {
    grid-template-columns : 80px 1fr auto auto auto auto auto auto 0;
    column-gap            : 16px;
  }
}
/* No Items */
#page.site .c-order-list-overview > h1 {
  grid-column : 1/6;
}
@media(min-width: 768px) {
  #page.site .c-order-list-overview > h1 {
    grid-column : 1/9;
  }
}
@media(min-width: 1180px) {
  #page.site .c-order-list-overview > h1 {
    grid-column : 1/10;
  }
}
#page.site .c-order-list-overview > p {
  grid-column : 1/6;
}
@media(min-width: 768px) {
  #page.site .c-order-list-overview > p {
    grid-column : 1/9;
  }
}
@media(min-width: 1180px) {
  #page.site .c-order-list-overview > p {
    grid-column : 1/10;
  }
}
/* Download */
#page.site .c-order-list-overview > a {
  grid-column : 1 / 6;
}
@media(min-width: 768px) {
  #page.site .c-order-list-overview > a {
    grid-column : 5 / 9;
  }
}
@media(min-width: 1180px) {
  #page.site .c-order-list-overview > a {
    grid-column : 7 / 10;
  }
}

/* Items Grid */
.c-order-list-overview .c-item {
  display              : grid;
  grid-template-columns: subgrid;
  align-items          : center;
  grid-column          : span 5;
  row-gap              : 8px;
  grid-template-rows   : 8px auto auto auto auto auto auto auto;
  grid-template-areas:
    ".           .               .            .           .          "
    ".           div_name        div_name     button_send .          "
    ".           datel           datel        datel       .          "
    ".           datef           datef        datef       .          "
    ".           datee           datee        datee       .          "
    ".           div_countLabel  div_count    div_price   .          "
    ".           .               .            .           .          "
    "div_message div_message     div_message  div_message div_message"
    ;
}
.c-order-list-overview .c-item.c-empty-item {
  row-gap               : 0;
  grid-template-rows    : 16px auto 16px auto auto auto auto auto;;
}
@media(min-width: 768px) {
  .c-order-list-overview .c-item {
    display               : grid;
    grid-template-columns : subgrid;
    align-items           : center;
    grid-column           : span 8;
    row-gap               : 0;
    grid-template-rows    : 8px auto 56px auto auto;
    grid-template-areas: 
      ".           .              .           .           .           .           .           .          "
      ".           div_name       div_name    div_name    div_name    div_name    div_name    .          "
      ".           div_countLabel div_count   datel       datef       div_price   button_send .          "
      "div_message div_message    div_message div_message div_message div_message div_message div_message"
      "datee       datee          datee       datee       datee       datee       datee       datee      "
      ;
  }
  .c-order-list-overview .c-item.c-empty-item {
    grid-template-rows    : 16px auto 16px auto auto;
  }
}
@media(min-width: 1180px) {
  .c-order-list-overview .c-item {
    display               : grid;
    grid-template-columns : subgrid;
    align-items           : center;
    grid-column           : span 9;
    row-gap               : 0;
    grid-template-rows    : auto auto auto;
    grid-template-areas: 
      "image       div_name    div_countLabel div_count   datel       datef       div_price   button_send .          "
      "div_message div_message div_message    div_message div_message div_message div_message div_message div_message"
      "datee       datee       datee          datee       datee       datee       datee       datee       datee      "
      ;
  }
  .c-order-list-overview .c-item.c-empty-item {
    grid-template-rows    : auto auto auto;
  }
}
@media(min-width: 1180px) {
  .c-order-list-overview .c-item::before {
    grid-area : image;
  }
}
.c-order-list-overview .c-item .div_name {
  grid-area : div_name;
}
.c-order-list-overview .c-item .div_countLabel {
  grid-area : div_countLabel;
}
.c-order-list-overview .c-item.c-empty-item .div_countLabel{
    display : none;
}
.c-order-list-overview .c-item .div_count {
  grid-area : div_count;
}
.c-order-list-overview .c-item.c-empty-item .div_count {
    display : none;
}
.c-order-list-overview .c-item .c-delivery-date {
  display : contents;
}
.c-order-list-overview .c-item .c-delivery-date > label {
  grid-area : datel;
} 
.c-order-list-overview .c-item .c-delivery-date > div {
  grid-area : datef;
}
.c-order-list-overview .c-item .c-delivery-date > p {
  grid-area : datee;
}
.c-order-list-overview .c-item.c-empty-item .c-delivery-date {
  display : none;
}
.c-order-list-overview .c-item .div_price {
  grid-area : div_price;
}
.c-order-list-overview .c-item.c-empty-item .div_price {
  display : none;
}
.c-order-list-overview .c-item .button_send {
  grid-area : button_send;
}
.c-order-list-overview .c-item.c-empty-item .button_send {
  display : none;
}
.c-order-list-overview .c-item .div_message{
  grid-area : div_message;
}

/* Design */

#page.site .c-order-list-overview > a {
  justify-self     : right;
  margin-bottom    : 24px;
  background-color : var(--c-background);
}
#page.site .c-order-list-overview > a::before {
  background-image : url(/wp-content/plugins/custom/assets/printer-icon.svg);
}

.c-order-list-overview .c-item {
  padding              : 0;
  border               : 1px solid var(--c-border);
  border-radius        : var(--c-radius);
  margin-bottom        : 16px;
  background-color     : white ;
  text-decoration      : none !important ;
  cursor               : pointer;
}
#page.site .c-order-list-overview .c-item:hover {
  background-color: var(--c-background);
}

/* Image */
.c-order-list-overview .c-item::before {
  display: none;
}
@media(min-width: 1180px) {
  .c-order-list-overview .c-item::before {
    display       : block;
    content       : url(/wp-content/plugins/custom/assets/list-image.svg);
    border-radius : 5px 0 0 5px;
    height        : 80px;
    width         : 80px;
  }
}
/* Name */
.c-order-list-overview .c-item .div_name {
  font-size     : 14px;
  line-height   : 20px;
  font-weight   : 500;
  font-family   : var(--c-font-familiy-title);
  color         : var(--c-text-title);
}
@media(min-width: 768px) {
  .c-order-list-overview .c-item .div_name {
    margin-left   : 8px;
  }
}
/* Count */
.c-order-list-overview .c-item .div_countLabel {
  display     : block;
  font-size   : 14px;
  line-height : 20px;
  font-weight : 400;
  font-family : var(--c-font-familiy-text);
  color       : var(--c-text-secondary);
}
@media(min-width: 768px) {
  .c-order-list-overview .c-item .div_countLabel {
    transform    : translateX(10px);
    justify-self : right;
  }
}
.c-order-list-overview .c-item .div_countLabel::before {
  content             : '';
  display             : inline-block;
  height              : 16px;
  width               : 16px;
  background-repeat   : no-repeat;
  background-size     : 16px;
  background-position : center center;
  margin-right        : 4px;
  vertical-align      : text-bottom;
  background-image    : url(/wp-content/plugins/custom/assets/box-icon.svg);
}
.c-order-list-overview .c-item .div_count {
  display      : block;
  justify-self : right;
  font-size    : 14px;
  line-height  : 20px;
  font-weight  : 500;
  font-family  : var(--c-font-familiy-title);
  color        : var(--c-text-title);
}
/* Date */
@media(min-width: 768px) {
  .c-order-list-overview .c-item > .c-delivery-date {
    /* font-size    : 14px; */
    /* margin       : 0; */
    transform    : translateX(8px);
    justify-self : right;
  }  
}
.c-order-list-overview .c-item .c-delivery-date label {
  font-size    : 14px;
  line-height  : 20px;
  font-weight  : 400;
  font-family  : var(--c-font-familiy-text);
  color        : var(--c-text-title);
}
@media(min-width: 768px) {
  .c-order-list-overview .c-item .c-delivery-date label {
    justify-self : end;
  }
}
.c-order-list-overview .c-item .c-delivery-date label::before {
  display: none;
}
@media(min-width: 768px) {
  .c-order-list-overview .c-item .c-delivery-date label::before {
    content             : '';
    display             : inline-block;
    height              : 16px;
    width               : 16px;
    background-repeat   : no-repeat;
    background-size     : 16px;
    background-position : center center;
    margin-right        : 4px;
    vertical-align      : text-bottom;
    background-image    : url(/wp-content/plugins/custom/assets/delivery-icon.svg);
  }
}
/* Errror */
.c-order-list-overview .c-item > .c-delivery-date > p.c--error {
  display : block;
}
.c-order-list-overview .c-item > .c-delivery-date > p {
  display     : none;
  font-size   : 14px;
  line-height : 20px;
  font-weight : 500;
  font-family : var(--c-font-familiy-title);
  color       : var(--c-error);
  margin      : 0;
  padding     : 8px 0;
}
@media(min-width: 768px) {
  .c-order-list-overview .c-item > .c-delivery-date > p {
    border-top  : 1px solid var(--c-border);
    padding : 8px 16px;
  }
}

/* Price */
.c-order-list-overview .c-item .div_price {
  justify-self  : right;
  font-size     : 14px;
  line-height   : 20px;
  font-weight   : 500;
  font-family   : var(--c-font-familiy-title);
  color         : var(--c-text-title);
  margin-right  : 6px;
}

/* Order */
.c-order-list-overview .c-item  .button_send {
  background-color : white;
  justify-self     : right;
  padding          : 8px 0;
  margin-right     : 16px;
}
.c-order-list-overview .c-item .button_send:before {
  content             : '';
  display             : inline-block;
  height              : 14px;
  width               : 14px;
  background-repeat   : no-repeat;
  background-size     : 14px;
  background-position : center center;
  vertical-align      : text-bottom;
  background-image    : url(/wp-content/plugins/custom/assets/cart2-icon.svg);
}
#page.site .c-order-list-overview .c-item:hover .button_send {
  background-color : var(--c-background);
}

/* Message */
.c-order-list-overview .c-item .div_message {
  font-size   : 14px;
  line-height : 20px;
  font-weight : 500;
  font-family : var(--c-font-familiy-title);
  color       : var(--c-error);
  margin      : 0;
  padding     : 8px 16px;
  border-top  : 1px solid var(--c-border);
}
@media(min-width: 768px) {
  .c-order-list-overview .c-item .div_message {
    padding : 8px 16px;
  }
}