.orderStateArea {
  width:100%;
  background-color:#cc0033;
  border-radius:3px;
  padding-bottom:16px;
  margin:16px 0;
}

.orderStateHead {
  color:#fff;
  text-align:center;
  font-size:12px;
  line-height:2.4;
}

@media screen and (min-width: 720px){
  .orderStateHead {
      font-size:14px;
  }
}

.orderStateCardsArea {
  
  overflow:hidden;
  
}

.orderCard {
  background-color:#fff;
  width:96%;
  margin-left:auto;
  margin-right:auto;
  border-radius:3px;
  height:80px;
  overflow:hidden;
  display:flex;
  align-items:center;
}

.orderCard.hidden {
  opacity:0;
  height:0;
}
.orderCard.hidden + .orderCard {
  margin-top:0px;
}
.orderCard + .orderCard {
  margin-top:4px;
}

.orderCard__device {
  width:80px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.orderCard__device img {
  width:40px;
}

.orderCard__infoSide {
  flex-grow:1;
  font-size:13px;
  line-height:1.3;
  display:flex;
  flex-flow:column;
  justify-content:center;
  align-items:center;
  width:100%;
  padding-right:8px;
}

.orderCard__infoString {
  width:100%;
  text-align:center;
}

.orderCard__place {
  width:100%;
  text-align:left;
  font-size:12px;
  color:#666;
  margin-bottom:2px;
}

.orderCard__itemName ,.orderCard__price {
    color:#cc0033;
}

.orderCard__orderCode {
  width:100%;
  text-align:right;
  font-size:10px;
  color:#999;
  margin-top:2px;
}

@media screen and (min-width: 720px){
  .orderCard__infoString{
    display:flex;
    justify-content:center;
    font-size:12px;
    line-height:2;
  }
  
  .orderCard__place {
    width:auto;
    margin-bottom:0;
    font-size:12px;
  }
  
  .orderCard__itemName {
    margin-left:8px;
  }
  
  .orderCard__price {
    margin-right:8px;
  }
  
  .orderCard__itemName ,.orderCard__price {
    font-weight:bold;
  }
}