.user-dash-transactions {
    padding: 1vw;
    width: 100%;
    position: relative;
    gap: 1.5vw;
}

.transaction-box-cards {
    padding: 2vw;
    width: 100%;
    position: relative;
}

.user-dash-transactions .transaction-box-card {
    padding: 0.5vw;
    width: 20vw;
    height: 7vw;
    border-radius: 1vw;
    gap: 1vw;
    box-shadow: 0 0 0.75vw rgba(0, 0, 0, 0.2);
    justify-content: start!important;
    position: relative;
    color: var(--dark-font) !important;
    background-color: rgba(0, 255, 119, 0.85);
    transform: scale(0.9);
}

body.dark .user-dash-transactions .transaction-box-card {
    box-shadow: 0 0 0.75vw rgba(0, 0, 0, 0.55);
}

.user-dash-transactions .transaction-box-card svg {
    fill: var(--dark-font) !important;
}

.user-dash-transactions .transaction-box-card .division1 {
    width: 6vw;
    height: 6vw;
    border-radius: 0.8vw;
    background-color: rgba(255, 255, 255, 0.4);
    font-size: 2.5vw;
}

.user-dash-transactions .transaction-box-card .division2 {
    width: calc(100% - 6vw);
    gap: 0.5vw;
    align-items: start!important;
}

.user-dash-transactions .transaction-box-card .division2 h4 {
    font-size: 0.85vw;
}

.user-dash-transactions .transaction-box-card .division2 h2 {
    font-size: 1.6vw;
    font-family: Vazir, sans-serif;
    gap: 0.5vw;
}

table.transaction-list-cards {
    padding: 1vw;
    width: 99%;
    min-height: 1vw;
    position: relative;
    border-collapse: collapse;
}

table.transaction-list-cards tr:first-child {
    border-bottom: 0.1vw solid rgba(192, 192, 192, 0.4);
}

table.transaction-list-cards tr:not(:first-child) {
    display: inline-block;
    margin-top: 0.7vw;
    width: 100%;
    border-radius: 0.75vw;
    box-shadow: 0 0 0.75vw rgba(0, 0, 0, 0.2);
    gap: 1vw;
    cursor: pointer;
    transition: all 0.25s;
}

table.transaction-list-cards tr:not(:first-child):hover {
    background-color: rgba(1, 195, 255, 0.1);
}

body.dark table.transaction-list-cards tr:not(:first-child) {
    box-shadow: 0 0 0.75vw rgba(0, 0, 0, 0.6);
}

table.transaction-list-cards tr td,th {
    padding: 0.5vw;
    width: 20vw;
    font-size: 0.9vw;
    text-align: center;
}

table.transaction-list-cards tr th {
    font-weight: 500;
}

table.transaction-list-cards tr td {
    font-weight: 300;
    font-family: Vazir, sans-serif;
}

table.transaction-list-cards tr td.paid {
    color: #0abd72;
}

table.transaction-list-cards tr td.paid i {
    transform: translateY(0.1vw);
    margin-left: 0.4vw;
}

table.transaction-list-cards tr td.canceled {
    color: #bd0a34;
}

table.transaction-list-cards tr td.canceled i {
    transform: translateY(0.1vw);
    margin-left: 0.4vw;
}

@media screen and (max-width: 450px) {
    .user-dash-transactions {
        padding: 2vw;
        gap: 4vw;
    }

    .transaction-box-cards {
        padding: 2vw 0;
        gap: 1vw;
        flex-wrap: wrap!important;
    }

    .user-dash-transactions .transaction-box-card {
        padding: 1.5vw;
        width: 47%;
        height: 16vw;
        border-radius: 3vw;
        gap: 2vw;
        box-shadow: 0 0 2vw rgba(0, 0, 0, 0.2);
        transform: scale(0.95);
    }

    .user-dash-transactions .transaction-box-card:last-child {
        width: 57%;
    }

    body.dark .user-dash-transactions .transaction-box-card {
        box-shadow: 0 0 2.75vw rgba(0, 0, 0, 0.55);
    }

    .user-dash-transactions .transaction-box-card .division1 {
        width: 14vw;
        height: 13vw;
        border-radius: 2vw;
        font-size: 6.5vw;
    }

    .user-dash-transactions .transaction-box-card .division2 {
        width: calc(100% - 14vw);
        gap: 1vw;
    }

    .user-dash-transactions .transaction-box-card .division2 h4 {
        font-size: 2.5vw;
    }

    .user-dash-transactions .transaction-box-card .division2 h2 {
        font-size: 4vw;
        gap: 1.5vw;
    }

    .user-dash-transactions .transaction-box-card .division2 h2 div.toman {
        width: 3.7vw!important;
        height: 3.7vw!important;
    }

    table.transaction-list-cards {
        padding: 2vw;
        min-height: 50vw;
        border-spacing:0 1.5vw;
        overflow-x: scroll;
        display: block;
    }

    table.transaction-list-cards tr {
        display: inline-block;
        width: 200vw!important;
    }


    table.transaction-list-cards tr:first-child {
        width: 100%;
        border-bottom: 0.4vw solid rgba(192, 192, 192, 0.4);
    }

    table.transaction-list-cards tr:not(:first-child) {
        width: 100%;
        border-radius: 2.5vw;
        box-shadow: 0 0 2.5vw rgba(0, 0, 0, 0.2);
        gap: 2vw;
    }

    body.dark table.transaction-list-cards tr:not(:first-child) {
        box-shadow: 0 0 2.5vw rgba(0, 0, 0, 0.6);
    }

    table.transaction-list-cards tr td,th {
        padding: 0.7vw 1vw;
        font-size: 2.9vw;
    }

    table.transaction-list-cards tr th {
        width: 60vw;
        font-weight: 500;
        color: var(--blue2);
    }

    table.transaction-list-cards tr td {
        width: 60vw!important;
        font-weight: 300;
        font-family: Vazir, sans-serif;
    }

    table.transaction-list-cards tr td:first-child, th:first-child {
        width: 20vw!important;
    }

    table.transaction-list-cards tr td:nth-child(2), th:nth-child(2) {
        width: 36%;
    }

    table.transaction-list-cards tr td.paid {
        color: #0abd72;
    }

    table.transaction-list-cards tr td.paid i {
        transform: translateY(0.1vw);
        margin-left: 0.4vw;
    }

    table.transaction-list-cards tr td.canceled {
        color: #bd0a34;
    }

    table.transaction-list-cards tr td.canceled i {
        transform: translateY(0.1vw);
        margin-left: 0.4vw;
    }
}