main
{

  padding: 35px 20px;
  display: flex;
  justify-content: center;
  background-color: rgb(250, 250, 250);
  
}

/* ===-Orders-=== */

.main-content
{
  display: flex;
  flex-direction: column;
}

.order-container
{
  width: 65vw;
  min-width: 445px;
}


/* ===-Order Container-=== */
.order
{
  margin-top: 25px;
  margin-bottom: 25px;
  border: 1px solid rgba(0, 0, 0, 0.161);
  overflow: hidden;
  border-radius: 10px;
  background-color: white;
}


/* ===-OrderTOP-=== */
.order-top
{
  display: flex;
  align-items: center;
  background-color: rgb(240, 242, 242);
  padding: 20px 25px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.161);
}

.order-placed,
.order-price,
.order-id
{
  display: flex;
  flex-direction: column;
  
}

.order-placed{
  margin-right: 45px;
  white-space: nowrap;
}

.order-price
{
  flex: 1;
  margin-right: 45px;
}

.order-title
{
  font-weight:600;
}

/* ===-Order Items-=== */

.order-items
{
  display: flex;
  row-gap: 25px;
  flex-direction: column;
  padding: 20px 0;
}

/* ===-Order Item-=== */

.order-item
{
  display: flex;
  column-gap: 40px;
  padding: 20px 25px;
}

.order-item-info-container
{
  display: flex;
  column-gap: 40px;
  flex:1;
}


/* ===-Order Image-=== */
.order-item-image
{
  width: 105px;
}

.order-item-image > img
{
  width: 100%;
  min-width: 105px;
  object-position: 34%;
  object-fit: cover;
}

/* ===-Order item Info-=== */
.order-item-info
{
  flex: 1;

}

.order-item-name,
.order-item-arrive-date,
.order-item-quantity
{
  margin-bottom: 7px;
}

.order-item-name
{
  font-weight: bold;
 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;

}

.order-item-button-buy-again
{
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 15px;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  background-color: rgb(255, 216, 20);
  font-size: 15px;
  transition: background-color .15s;
  cursor: pointer;
  min-width: 142.39px;
  min-height:35px;

  box-shadow: 0 0 3px .5px rgba(0, 0, 0, 0.137);
}

.order-item-button-buy-again:hover
{
  background-color:  rgb(241, 204, 19);
}

.order-item-button-buy-again > img
{
  width: 25px;
  height: 25px;
}

/* ===-Orders-=== */
.track-button-container
{
  text-decoration: none;
}

.track-button
{
  border: 1px solid rgb(219, 214, 214);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.157);
  padding: 9px 54px;
  border-radius: 6px;
  background-color: white;
  cursor: pointer;
  transition: background-color .15s;
  white-space: nowrap;
}

.track-button:hover
{
  background-color: rgb(235, 230, 230);
}

.empty-order-button
{
  margin-top: 9px;
  font-weight: bold;
  background-color: rgb(255, 216, 20);
  border: none;
  padding: 12px;
  border-radius: 5px;
  cursor: pointer;
  
  font-size: 16px;

  transition: background-color .15s ease-in-out;
}

.empty-order-button
{
  font-weight: 500;
}


.empty-order-button:hover{
  background-color: rgb(243, 205, 18);
}


/* ===-Media-=== */

@media screen and (max-width: 575px){
  .order-top
  {
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    row-gap: 5px;
  }

  .order-top *
  {
    padding: 0;
    margin:0;
  }

  .order-placed,
  .order-price,
  .order-id
  {
    flex-direction: row;
    column-gap: 5px;
  }

  .order-item-name
  {
    width: 259px;
  }
}

@media screen and (max-width: 700px){
  .order-item-info-container
  {
    flex-direction: column;
    column-gap: 0;
    row-gap: 10px;
  }

  .track-button
  {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 15px;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 15px;
    transition: background-color .15s;
    cursor: pointer;
    min-width: 142.39px;
    min-height:35px;
  }
}

@media screen and (min-width: 701px) and (max-width: 880px)
{
  .order-container
  {
    width: 600px;
  }
}