.grid-container {
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px 3px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.grid-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
}
.grid-row-empty {
    cursor: initial;
}

.grid-row:hover {
    background-color: #fdfdfd;
}

.grid-row.header {
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
    background-color: #f9f9f9;
    cursor: initial;
}

.grid-row:last-child {
    border-bottom: none;
}

.grid-head, .grid-col {
    flex: 1;
    padding: 15px;
    text-align: center;
}

.grid-head {
    background-color: #f9f9f9;
    font-weight: bold;
}

/*.grid-col.status {
    border-radius: 5px;
    padding: 10px 15px;
    color: #ffffff;
}

.grid-col.status.unpaid {
    background-color: #ff6b6b;
}

.grid-col.status.paid {
    background-color: #4caf50;
}

.grid-col.status.pending {
    background-color: #ffc107;
}*/

.grid-col a {
    color: #2196f3;
    text-decoration: none;
}

.grid-col a:hover {
    text-decoration: underline;
}