chuksjoe/AutoMart_UI

h2 {
    text-align: center;
}
.history-list {
    max-width: 1000px;
    margin: 0 auto;
    background-color: #fff;
    list-style: none;
    padding: 15px;
    box-shadow: 0 0 3px #333;
}
.history-list-item {
    border: 2px solid #eee;
    margin-bottom: 10px;
}
.history-list-item:hover {
    background-color: #eee;
    border: 2px solid #fff;
}
.history-list-item:hover .purchase-date {
    border-right: 2px solid #fff;
}
.history-list-item:hover .user-actions {
    border-left: 2px solid #fff;
}
.purchase-date {
    width: 20%;
    position: relative;
    border-right: 2px solid #eee;
}
.purchase-details {
    width: 55%;
}
.purchase-info {
    margin: 5px 0 0;
    text-align: left;
}
.status {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: #FEBD2D;
    padding: 5px 10px;
}
.user-actions {
    width: 25%;
    border-left: 2px solid #eee;
}
 
@media only screen and (max-width: 820px) {
    .history-list-item {
        display: block
    }
 
    .purchase-date,
    .purchase-details,
    .user-actions {
        width: 100%;
    }
    .purchase-date p {
        margin: 0;
    }
    .purchase-date {
        border-right: none; 
        border-bottom: 2px solid #eee;
    }
    .user-actions {
        border-left: none;
        border-top: 2px solid #eee;
        display: flex;
    justify-content: space-between;
    }
  .user-actions .btn {
    margin: 0 2px;
  }
    .history-list-item:hover .purchase-date {
        border-right: none; 
        border-bottom: 2px solid #fff;
    }
    .history-list-item:hover .user-actions {
        border-left: none;
        border-top: 2px solid #fff;
    }
    .full-btn {
        width: 49%;
    }
}