payment.css

/* /src/styles/PaymentHistory.css */

.payment-history {
    padding: 20px;
}

.history-tablee {
    width: 80%;
    border-collapse: collapse;
    margin-top: 20px;
    text-align: center;
}


.History-title {
    color:#FFD36A;
    margin-top: 10px;
    margin-bottom: 20px
}

.history-tablee th,
.history-tablee td {
    border: 1px solid #ffffff;
    padding: 8px;
    text-align: left;
}

.history-tablee th {
    background-color: #FFD36A;
    text-align: center;
    color: #030303;
}

.history-tablee td {
    text-align: center;
    color: #fbfbfb;
    background-color: #1A2D31;
}

.history-tablee th:nth-child(1),
td:nth-child(1) {
    width: 5%;
}

.history-tablee th:nth-child(2),
td:nth-child(2) {
    width: 20%;
}

.history-tablee th:nth-child(3),
td:nth-child(3) {
    width: 10%;
}

.history-tablee th:nth-child(4),
td:nth-child(4) {
    width: 10%;
}

.button-group {
    margin-top: 10px;
}

.payment-history .button-group button {
    padding: 10px 20px;
    margin: 0 10px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    font-size: 16px;
    background-color: #FFD36A;
    color: #333;
    border-radius: 4px;
}

.payment-history .button-group button:hover {
    background-color: #000000;
    color: #fff;
}

.payment-history .button-group button:active {
    background-color: #080808;
    color: #fff;
}

.payment-history .button-group .active {
    background-color: #060606;
    color: #fff;
}

/* Additional hover effects for table rows */
.payment-history .history-tablee tbody tr:hover {
    background-color: #f1f1f1;
}