.id-card-image {
    width: 21rem;
    align-self: center;
    transition: transform 0.2s ease-in-out;
    aspect-ratio: 1.58/1;
    transform-origin: top left;
    margin-bottom: 0.75rem;
    border-radius: 1rem;
    z-index: 4;
}

.id-card-image:hover {
    transition-delay: 250ms;
    transform: scale(2);
    z-index: 5;
}

.id-card-image[back] {
    transform-origin: top right;
}

.id-card-image:not(:hover) {
    transform: scale(1);
}

#membersTableWrapper {
    display: flex;
    flex: 1;
}

.member-payment-method-buttons, sl-radio-group.member-payment-method-buttons[separated-buttons]::part(button-group){
    width: 100%;
}

sl-radio-group.member-payment-method-buttons[separated-buttons]::part(button-group__base) {
    justify-content: space-around;
    width: 100%;
}

sl-radio-group.member-payment-method-buttons[separated-buttons] sl-radio-button::part(button) {
    width: 10rem;
    justify-content: center;
    font-size: var(--font-size-normal);
}
sl-radio-group.member-payment-method-buttons[separated-buttons] sl-radio-button::part(prefix) {
    font-size: 1.25rem;
}

sl-radio-group.member-payment-method-buttons[separated-buttons] sl-radio-button span {
    display: flex;
    align-items: center;
    justify-content: center;
}

member-management {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    width: 100%;
    height: calc(100vh - var(--window-header-height) - 6.8rem);
}

member-main {
    flex: 0 0 60%;
    max-width: 60%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: scroll;
    padding: 0.5rem;
    margin-bottom: 0.2rem;
}

member-side-containers {
    flex: 0 0 40%;
    max-width: 40%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-x: auto;
    padding: 0.5rem;
}

.member-side-container{
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    min-height: 25rem;
    max-width: 100%;
    overflow-x: hidden;
    background: var(--blue-gray);
    box-shadow: var(--soft-continer-outer-shadow);
    flex: 1;
}

side-container-header{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--global-font-color);
    padding: 1rem 1.5rem;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}

side-container-body{
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
}

member-side-containers .text-secondary, #topupMemberWalletForm .text-secondary {
    color: var(--light-global-font-color);
    font-size: var(--font-size-small);
}

/*#region Subscriptions-specific */

subscriptions-container{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
}

member-subscription{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 2rem;
    background: var(--blue-gray);
    box-shadow: var(--soft-continer-outer-shadow);
    border-radius: 1.5rem;
}

/*#endregion */


/*#region Wallet-specific */
wallet-transaction {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background-color: var(--blue-gray);
    border-radius: 1.5rem;
    box-shadow: var(--soft-continer-outer-shadow);
}

@keyframes moving-background-gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

current-balance-container{
    background: var(--blue-gray);
    box-shadow: var(--soft-continer-outer-shadow);
    background-size: 400% 400%;
    animation: moving-background-gradient 15s ease infinite;
    border-radius: 0.75rem;
    padding: 1rem 2rem;
    margin-bottom: 0.5rem;
}

current-balance-container .current-balance, current-balance-container sl-icon[name="wallet"]{
    transition: transform 0.15s ease-in-out;
    font-size: 1.8rem;
}

recent-transations {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;
}

.current-balance {
    color: var(--success-green);
    cursor: default;
}

.current-balance:hover  {
    color: var(--success-green);
    transform: scale(1.1);
}

.wallet-quick-amount-btns, sl-radio-group.wallet-quick-amount-btns[separated-buttons]::part(button-group){
    width: 100%;
}

sl-radio-group.wallet-quick-amount-btns[separated-buttons]::part(button-group__base) {
    justify-content: center;
    width: 100%;
}

sl-radio-group.wallet-quick-amount-btns[separated-buttons] sl-radio-button::part(button) {
    min-width: 5rem;
    justify-content: center;
}

#newBalancePreview{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--background-white);
    border-radius: 0.5rem;
}

#newBalancePreview #calculationContainer{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--deep-background-color);
    border-radius: 0.5rem;
}

[data-theme="light"] #newBalancePreview {
    background-color: var(--background-white);
    border: 1px solid var(--border-color);
}

/*#endregion */

/*#region Notes-specific */

member-note{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-radius: 1.5rem;
    background: var(--blue-gray);
    box-shadow: var(--soft-continer-outer-shadow);
}

 #memberNotesContainer p.text-center.text-secondary:not(:only-child) {
     display: none;
 }
/*#endregion */

wallet-representation {
    display: flex;
    flex-direction: column;
    background: var(--blue-gray);
    box-shadow: var(--outline-button-shadow);
    padding: 1rem;
    width: 100%;
    border-radius: 1.5rem;
    min-width: 30rem;
}
wallet-representation wallet-balance {
    display: flex;
    flex-direction: column;
    align-items: center;
}

wallet-representation svg {
    color: var(--light-text);
}

wallet-representation h1 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 2.5rem;
}
wallet-representation h3 {
    color: var(--light-text);
    margin: 0;
}

wallet-representation label {
    color: var(--light-text);
}

wallet-transaction-summary {
    border: 1px solid var(--border-color);
    border-radius: 1.5rem;
    width: 100%;
}

.transaction-summary-header {
    background-color: var(--deep-background-color);
    padding: 0.5rem 1rem;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
}
.transaction-summary-details hr{
    width: 100%;
    border-top: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 4px;
}
.transaction-summary-details h3 {
    margin-top: 0;
    margin-bottom: 0;
}
.wallet-checkout-buttons {
    padding: 1rem 2rem;
    width: 100%;
}
.wallet-checkout-buttons nb-button {
    margin-top: 0;
}
.wallet-checkout-buttons nb-button::part(button) {
    width: 10rem;
}

/*#region Statistics */

#memberStatisticsPage {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0.5rem;
}

.statistics-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

.statistics-stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    background: var(--blue-gray);
    border-radius: 1rem;
    box-shadow: var(--soft-continer-outer-shadow);
    min-height: 6.5rem;
}

.statistics-stat-card-label {
    font-size: var(--font-size-small);
    color: var(--light-global-font-color);
    font-weight: 500;
}

.statistics-stat-card-value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary-green);
    line-height: 1;
}

.statistics-stat-card-sub {
    font-size: var(--font-size-tiny);
    color: var(--light-text);
}

.statistics-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.statistics-section-title {
    margin: 0;
    font-size: var(--font-size-large);
    color: var(--global-font-color);
}

.statistics-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
    gap: 1rem;
}

.member-statistics-chart {
    background: var(--blue-gray);
    border-radius: 1rem;
    box-shadow: var(--soft-continer-outer-shadow);
    padding: 1.25rem;
}

.member-statistics-chart h4 {
    margin: 0 0 0.5rem 0;
    font-size: var(--font-size-medium);
    color: var(--global-font-color);
}

.member-statistics-chart chart-container {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.member-statistics-chart chart-legend {
    min-width: 0;
    width: 100%;
}

.member-statistics-chart chart-legend ul {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.statistics-experimental-tooltip {
    display: inline-flex;
    align-items: center;
    color: var(--light-global-font-color);
    font-size: 1.25rem;
    cursor: help;
}

.statistics-chart-tooltip {
    display: inline-flex;
    align-items: center;
    color: var(--light-global-font-color);
    font-size: 1rem;
    cursor: help;
}

/*#endregion */