.orders-navigation{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:22px 0;
}

.orders-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.orders-heading h1{
  margin:0 0 5px;
  color:#172033;
  font-size:28px;
  line-height:1.2;
}

.orders-heading p{
  margin:0;
  color:#687386;
  font-size:15px;
}

#ordersCount{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 12px;
  border-radius:19px;
  background:#eef5fb;
  color:#0064b4;
  font-size:15px;
}

.orders-list{
  display:grid;
  gap:16px;
  padding-bottom:36px;
}

.order-card{
  overflow:hidden;
  border:1px solid #dce3ec;
  border-radius:16px;
  background:#ffffff;
  box-shadow:0 6px 22px rgba(31,55,86,.06);
}

.order-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-bottom:1px solid #e7ebf0;
  background:#f8fafc;
}

.order-card-top div>span{
  display:block;
  margin-bottom:3px;
  color:#6c7788;
  font-size:12px;
}

.order-card-top div>strong{
  color:#172033;
  font-size:17px;
}

.order-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:5px 11px;
  border-radius:15px;
  background:#fff5d9;
  color:#855e00;
  font-size:13px;
  font-weight:600;
}

.order-status-ticketed{
  background:#e7f7ed;
  color:#18753c;
}

.order-status-canceled{
  background:#fdebec;
  color:#a4262c;
}

.order-route{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px;
  color:#172033;
  font-size:20px;
}

.order-route span{
  color:#7b8797;
}

.order-info{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  border-top:1px solid #edf0f4;
}

.order-info>div{
  min-width:0;
  padding:13px 18px;
  border-right:1px solid #edf0f4;
  border-bottom:1px solid #edf0f4;
}

.order-info>div:nth-child(3n){
  border-right:0;
}

.order-info span,
.order-ticket span{
  display:block;
  margin-bottom:4px;
  color:#718096;
  font-size:12px;
}

.order-info strong,
.order-ticket strong{
  display:block;
  overflow-wrap:anywhere;
  color:#172033;
  font-size:14px;
}

.order-ticket{
  padding:13px 18px;
  border-bottom:1px solid #edf0f4;
}

.order-actions{
  display:flex;
  justify-content:flex-end;
  padding:15px 18px;
}

.orders-state{
  padding:45px 20px;
  border:1px solid #dce3ec;
  border-radius:16px;
  background:#ffffff;
  color:#687386;
  text-align:center;
}

.orders-state strong{
  display:block;
  margin-bottom:8px;
  color:#172033;
  font-size:18px;
}

.orders-state p{
  margin:0 0 18px;
}

@media(max-width:720px){
  .orders-heading{
    align-items:flex-start;
  }

  .order-card-top{
    align-items:flex-start;
  }

  .order-route{
    font-size:18px;
  }

  .order-info{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .order-info>div:nth-child(3n){
    border-right:1px solid #edf0f4;
  }

  .order-info>div:nth-child(2n){
    border-right:0;
  }

  .order-actions .btn{
    width:100%;
  }
}

@media(max-width:460px){
  .order-card-top{
    flex-direction:column;
  }

  .order-info{
    grid-template-columns:1fr;
  }

  .order-info>div{
    border-right:0!important;
  }
}