/* Hide Table */
.gift-table.hidden {
    display: none;
}



.dash-data-con .gift-table:not(.hidden) {
    border-collapse: collapse;
    width: calc((100% - var(--main-margin-add)) - 1px);
    outline: 1px solid var(--table-outline-clr);
    background: var(--table-bg);
    backdrop-filter: blur(2px);
    margin-left: 1px;
}

.gift-table tr {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    border-bottom: 1px solid var(--data-box-bottom-clr);
    height: fit-content;
    min-height: calc(var(--gift-col-item-size) + var(--img-size-increase));
    padding: 5px 0;
}
.gift-table tr td:first-child {
    width: 30%;
    margin-left: 3%;
    justify-content: flex-start;
}
.gift-table tr:last-child {
    border-bottom: 1px solid transparent;
}
.gift-table tr:nth-child(even) {
    background: var(--data-box-bg);
}
.gift-table tr td, .gift-table tr th {
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px 0;
}
.gift-table td span {
    font-size: var(--gift-col-item-size);
}

.gift-sort-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: calc(100% - var(--main-margin-add));
    margin: -3vh 0 2vh;
}

.gift-sort-label {
    color: var(--nav-inactive-clr);
    font-size: 0.9rem;
    margin-right: 4px;
}

.gift-sort-controls button {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 0.55rem 0.9rem;
    color: var(--main-clr);
    background: var(--card-bg);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow:
        7px 7px 20px -8px var(--alt-clr-two) inset,
        -7px -7px 20px -8px var(--alt-clr-one) inset,
        0 0 8px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    transition: filter 160ms ease, border-color 160ms ease,
        box-shadow 160ms ease, color 160ms ease;
}

.gift-sort-controls button:hover {
    filter: brightness(1.15);
    border-color: rgba(255, 255, 255, 0.28);
}

.gift-sort-controls button:focus-visible {
    outline: 2px solid var(--main-clr-alt);
    outline-offset: 2px;
}

.gift-sort-controls button[aria-pressed="true"] {
    color: var(--main-clr-alt);
    border-color: rgba(20, 250, 255, 0.42);
    background: var(--card-bg-alt);
    box-shadow:
        7px 7px 20px -8px var(--alt-clr-three) inset,
        -7px -7px 20px -8px var(--alt-clr-four) inset,
        0 0 10px rgba(0, 0, 0, 0.4);
}

.gift-table-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.gift-table-pagination {
    box-sizing: border-box;
    width: min(100%, 900px);
    margin: 16px auto 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--main-clr);
}

.gift-table-pagination[hidden] {
    display: none;
}

.gift-table-pagination button {
    min-height: 40px;
    padding: 8px 16px;
    color: var(--main-clr);
    font: inherit;
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    cursor: pointer;
    box-shadow:
        7px 7px 20px -8px var(--alt-clr-two) inset,
        -7px -7px 20px -8px var(--alt-clr-one) inset,
        0 0 8px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    transition: filter 160ms ease, border-color 160ms ease,
        box-shadow 160ms ease, color 160ms ease;
}

.gift-table-pagination button:hover:not(:disabled) {
    filter: brightness(1.15);
    border-color: rgba(255, 255, 255, 0.28);
}

.gift-table-pagination button:focus-visible {
    outline: 2px solid var(--main-clr-alt);
    outline-offset: 2px;
}

.gift-table-pagination button:not(:disabled):active {
    color: var(--main-clr-alt);
    border-color: rgba(20, 250, 255, 0.42);
    background: var(--card-bg-alt);
}

.gift-table-pagination button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.gift-table-pagination span {
    min-width: 180px;
    text-align: center;
    color: rgba(255, 255, 255, 0.76);
}

.gift-table td img {
    /*margin-top: calc(var(--img-size-increase) / 2);*/
    width: calc(var(--gift-col-item-size) + var(--img-size-increase));
    height: auto;
    margin: 0;
    margin-right: 5px;
}
.gift-table td img:not(.hidden) {
    animation: displayImage 0.25s ease-out;
}
@keyframes displayImage {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.gift-table:first-child {
    border-top-left-radius: var(--gift-table-b-radius);
    border-top-right-radius: var(--gift-table-b-radius);
}
.gift-table:last-child {
    border-bottom-left-radius: var(--gift-table-b-radius);
    border-bottom-right-radius: var(--gift-table-b-radius);
}



@media only screen and (max-width: 768px) {
    .gift-sort-controls {
        width: 100%;
        margin-top: -2vh;
    }

    .gift-sort-controls button {
        padding: 0.5rem 0.7rem;
        font-size: 0.85rem;
    }

    .gift-table-pagination {
        gap: 8px;
    }

    .gift-table-layout {
        padding-bottom: calc(75px + 5vh + 12px);
    }

    .gift-table-pagination button {
        padding: 8px 12px;
    }

    .gift-table-pagination span {
        min-width: 100%;
        order: -1;
    }

    .dash-data-con .gift-table:not(.hidden) {
        width: 100%;
        margin-left: 0px;
    }
}

@media only screen and (min-width: 769px) {
    body[data-nav-type="glass"] .gift-table-layout {
        padding-bottom: calc(75px + 2.5vh + 12px);
    }
}





main .ui-section.profile:not(.hidden) {
    animation: profileFade 0.25s ease-out;
}
@keyframes profileFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}