.deposit{ margin-bottom: 1rem; min-height: 50vh} .deposit .nas-deposit-pane{ margin-top: 1rem; min-width: 0} .deposit--d, .deposit> form{ display: grid; align-content: start} .deposit--d{ align-items: start; padding: 2rem 3rem; margin-top: 0.5rem; column-gap: 2rem; background-color: var(--color-primary); grid-template-columns: repeat(9, minmax(0, 1fr))} .deposit--d .page-header{ grid-column: 1 / -1} .deposit--d .side-nav{ grid-column: 1 / 3} .deposit--d .nas-deposit-pane, .deposit--d> form{ grid-column: 3 / -1} .deposit--d> form{ width: 100%; max-width: 30rem; justify-self: center} .bank-select{ margin-bottom: 1rem} .bank-select--disabled{ pointer-events: none; color: rgba(var(--color-text-primary-rgb), 0.38)} .bank-select__label{ display: block; font-size: 0.875rem; margin-bottom: 0.25rem} .bank-select__body{ display: grid; overflow: hidden; gap: 0.5rem; grid-template-columns: repeat(3, minmax(0, 1fr))} .bank-select__item{ position: relative; overflow: hidden; height: 60px; background-color: var(--color-primary-light); border-radius: 5px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; transition: background-color 0.2s} .bank-select__item--active .bank-select__icon{ color: var(--color-success)} .bank-select__item--disabled{ pointer-events: none; opacity: 0.38} @media(hover: hover) and (min-width: 1024px){ .bank-select__item:hover{ background-color: var(--color-primary-light-d5)}} .bank-select__icon{ position: absolute; left: 0.625rem; pointer-events: none} .bank-select label{ display: flex; height: 100%; cursor: pointer; padding: 0.5rem 0.5rem 0.5rem 2rem; width: 100%} .bank-select label img{ width: 100%; height: 100%; object-fit: contain} .bank-select__input{ position: absolute; visibility: hidden} .bank-select--d .bank-select__body{ grid-template-columns: repeat(4, minmax(0, 1fr))} .preset-amounts{ margin-bottom: 1rem} .preset-amounts__label{ display: flex; align-items: flex-end; justify-content: space-between; font-size: 0.875rem; margin-bottom: 0.25rem} .preset-amounts__label button{ font-size: 1rem; color: var(--color-text-primary)} .preset-amounts__body{ display: grid; gap: 0.5rem; grid-template-columns: repeat(4, minmax(0, 1fr))} @media(max-width: 400px){ .preset-amounts__body{ grid-template-columns: repeat(2, minmax(0, 1fr))}} .preset-amounts__item, .preset-amounts label{ display: flex; align-items: center; justify-content: center} .preset-amounts label{ position: relative; width: 100%; cursor: pointer; font-weight: 500; background-color: var(--color-primary-light)} .preset-amounts label.preset-amounts--disabled{ cursor: not-allowed; color: rgba(var(--color-text-primary-rgb), 0.38); border-color: rgba(var(--color-text-primary-rgb), 0.38)} .preset-amounts label.preset-amounts--active{ color: var(--color-brand); border: 1px solid var(--color-brand)} .preset-amounts__input{ position: absolute; visibility: hidden} .wallet-detail{ margin-bottom: 1rem} .wallet-detail__label{ display: flex; align-items: flex-end; justify-content: space-between; font-size: 0.875rem; margin-bottom: 0.25rem} .wallet-detail__body{ position: relative; display: grid; gap: 0.25rem; overflow: hidden; padding: 0.25rem 0; font-size: 0.75rem; justify-content: start; grid-template-columns: auto 1fr auto; border-radius: 5px; background-color: var(--color-primary-light)} .wallet-detail__body.wallet-detail__body--muted label, .wallet-detail__body.wallet-detail__body--muted span{ color: rgba(var(--color-text-primary-rgb), 0.6)} .wallet-detail__btn-copy{ position: absolute; right: 0.5rem; bottom: 0.5rem; display: flex; align-items: center; justify-content: center} .wallet-detail__btn-copy.has-qr{ position: relative; left: 0.5rem; right: unset; bottom: unset; grid-area: 2 / 1 / 3 / 3; place-self: center start} .wallet-detail__btn-copy.wallet-detail--copied{ border: 1px solid var(--color-success)} .wallet-detail__labels, .wallet-detail__values{ display: flex; flex-direction: column} .wallet-detail__labels label, .wallet-detail__labels span, .wallet-detail__values label, .wallet-detail__values span{ display: flex; align-items: center; position: relative; white-space: nowrap; height: 24px; padding: 0.25rem 0.5rem} .wallet-detail__labels label::after, .wallet-detail__values label::after{ position: absolute; right: 0; content: ":"} .wallet-detail__values{ font-weight: 700; letter-spacing: 1px; color: var(--color-text-primary)} .wallet-detail__qr{ width: 100%; max-width: 8rem; grid-area: 1 / 3 / 3 / 4; place-self: center; padding: 0.25rem 0.5rem; background: transparent; border: 0} .wallet-detail__qr img{ display: block; width: 100%} .wallet-form--mvp-host{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0)} .deposit .alert[hidden]{ display: none !important} .deposit--gateway #nas-deposit-pick{ display: none !important} .nas-deposit-pane> #dpContainer, .nas-deposit-pane> #dpContainer iframe{ display: block; width: 100%; min-height: 37.5rem; border: 0; background: var(--color-primary-dark)} @media(min-width: 1024px){ .wallet-form--d #nas-deposit-detail{ display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 2rem; align-items: start} .wallet-form--d #nas-deposit-detail> .nas-deposit-detail{ display: contents} .wallet-form--d #nas-deposit-detail .wallet-detail__deposit-to{ grid-column: 1 / 2} .wallet-form--d #nas-deposit-detail .wallet-detail:not(.wallet-detail__deposit-to){ position: static; grid-column: 2 / 3; grid-row: auto; width: auto}} #opIframe[hidden]{ display: none} #opIframe:not([hidden]), #opIframe:not([hidden]) .depo-select-iframe{ display: block; width: 100%; min-height: 37.5rem; border: 0; background: var(--color-primary-dark)} .bonus-select{ margin-bottom: 1rem} .bonus-select__label{ display: block; margin-bottom: 0.25rem} .bonus-select__body{ display: grid; gap: 0.5rem; max-height: 16rem; overflow: auto} .bonus-select__item{ position: relative; display: flex; align-items: center; justify-content: space-between; overflow: hidden; border-radius: 5px; background: var(--color-primary-light)} .bonus-select__item--muted, .bonus-select__item--disabled{ opacity: 0.45} .bonuses-notice{ display: grid; gap: 0.75rem} .bonuses-notice__dismiss{ border: 0; background: transparent; color: inherit; cursor: pointer; text-decoration: underline} .bonus-select__item label{ display: grid; width: 100%; padding: 0.5rem 0.5rem 0.5rem 2rem} .bonus-select__item h3, .bonus-select__item h6{ margin: 0} .bonus-select__item h6{ font-size: 0.75rem} .bonus-select__icon{ position: absolute; left: 0.5rem} .bonus-select__item--active .bonus-select__icon{ color: var(--color-success)} .bonus-select__input{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0)} .deposit-pending .deposit-detail{ display: grid; gap: 0.35rem; margin: 0.75rem 0 0; padding: 0} .deposit-pending .deposit-detail li{ display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: 0.5rem} .deposit-pending img{ margin-top: 0.75rem} @media(max-width: 1023px){ .deposit--d{ display: block; padding: 0.5rem} .deposit--d .side-nav, .deposit--d .nas-deposit-pane{ grid-column: auto}}