.nas-single--page:has(.nas-member-page--referral) .nas-single__body{ padding: 0} .nas-single--page:has(.referral-info) .nas-single__body{ padding: 0} .referral-info{ background-color: var(--color-primary); display: grid; grid-template-rows: auto 1fr; position: relative; width: 100%} .referral-info> header.surface--primary{ align-items: center; background-color: var(--color-primary); display: flex; padding: 0.5rem; position: sticky; top: 58px; width: 100%; z-index: 9} .referral-info> header.surface--primary h2{ align-items: center; display: flex; font-size: 0.875rem; font-weight: 900; gap: 0; margin: 0} .referral-info> header.surface--primary h2 i{ margin-right: 0.5rem} .referral-info__wrapper{ display: grid; gap: 0.5rem; align-content: start} .referral-info__content{ background-color: var(--color-primary); display: grid; gap: 0.5rem; padding: 0 1.25rem 0.5rem} .referral-info__content article{ font-size: 0.8125rem; line-height: 1.45} .referral-info__content article h2{ font-size: 1.25rem} .referral-info__content article p{ font-size: 0.75rem; font-weight: 700} .referral-info__content article ol, .referral-info__content article ul{ margin: 0; padding-left: 1.25rem} .referral-info__details{ background-color: var(--color-primary); display: grid; gap: 1rem; padding: 0.5rem 0.75rem} .referral-info__details> .btn{ justify-self: center} .referral-info__benefits{ display: grid; gap: 0.5rem} .referral-info__benefits h4, .referral-info__bonus h4, .referral-info__steps h4{ font-size: 0.875rem; font-weight: 700; margin: 0; text-transform: uppercase} .referral-info__benefits ul, .referral-info__bonus ul, .referral-info__steps ul{ list-style: none; margin: 0; padding: 0} .referral-info__benefits ul{ display: grid; gap: 0.25rem} .referral-info__benefits li{ align-items: center; display: grid; font-size: 0.75rem; gap: 0.5rem; grid-template-columns: 1.5rem 1fr} .referral-info__benefits li h5{ font-size: 0.75rem; font-weight: 600; margin: 0} .referral-info__benefits li i{ color: var(--color-brand); justify-self: center} .referral-info__bonus{ display: grid; gap: 0.5rem} .referral-info .referral-info__bonus-detail{ display: grid; gap: 0.5rem; grid-template-columns: 1fr} .referral-info .referral-info__bonus-detail li.surface{ align-items: center; background-color: var(--color-primary-dark); border: 2px solid var(--color-brand-dark); border-radius: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.5rem} .referral-info .referral-info__bonus-detail h5{ font-size: 0.75rem; font-weight: 600; margin: 0} .referral-info .referral-info__bonus-detail span{ background-color: var(--color-brand-dark); border-radius: 10px; color: #fff; display: block; font-size: 0.75rem; font-weight: 700; padding: 0.75rem 0.5rem; text-align: center} .referral-info__steps{ display: grid; gap: 0.5rem} .referral-info__steps ul{ display: grid; gap: 0.5rem} .referral-info__steps li.surface{ background-color: var(--color-primary-dark); border: 2px solid var(--color-brand-dark); border-radius: 10px; display: grid; gap: 0.25rem; padding: 0.5rem} .referral-info__steps li h5{ align-items: center; display: flex; font-size: 0.8125rem; font-weight: 600; gap: 0.5rem; margin: 0} .referral-info__steps li> span{ font-size: 0.75rem; font-weight: 700} .referral-info__wrapper> .alert{ margin: 0.5rem 0.75rem} @media(min-width: 1024px){ .referral-info> header.surface--primary{ top: 0} .referral-info--d .referral-info__wrapper{ gap: 0; grid-template-rows: auto 1fr} .referral-info--d .referral-info__content{ position: relative} .referral-info--d .referral-info__details{ align-content: start; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.75rem} .referral-info--d .referral-info__steps{ align-items: center; grid-column: span 2; grid-template-columns: 1fr 4fr} .referral-info--d .referral-info__steps ul{ grid-auto-rows: 1fr; grid-template-columns: repeat(3, minmax(0, 1fr))} .referral-info--d .referral-info__steps ul li{ align-content: start}} @media(max-width: 1023px){ .referral-info> header.surface--primary{ top: 0}} .nas-member-page--referral .nas-member-page__body> h2{ display: none} .nas-member-page--referral .nas-member-page__body{ padding: 0} .nas-member-page--referral .nas-member-page__title{ display: none} .nas-member-page--referral[data-nas-member-guest]:not([hidden]){ padding: 0.5rem} .referral-user__message{ margin: 1rem 0; font-size: 0.875rem} .referral-user__detail{ display: grid; margin-bottom: 1rem; column-gap: 0.5rem; grid-template-columns: repeat(4, minmax(0, 1fr))} .referral-user__detail> label{ display: block; font-weight: 500; font-size: 0.875rem; grid-column: 1 / -1; margin-bottom: 0.25rem} .referral-user__detail div{ display: flex; align-items: center; grid-column: 1 / 4; font-weight: 700; font-size: 0.875rem; color: var(--color-text-primary); padding: 0.375rem 0.5rem; height: 34px; border-radius: 2px; background-color: var(--color-primary-light)} .referral-user__detail div span{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis} .referral-user__how{ margin-bottom: 1rem; padding: 0.5rem 0.5rem 0} .referral-user__bonus-detail{ padding: 0.5rem; font-size: 0.875rem; grid-column: 1 / -1; border-radius: 2px; background-color: var(--color-primary-light); list-style: none; margin: 0} .referral-user__bonus-detail li{ padding: 0.125rem 0; display: flex; flex-direction: row; align-items: center; justify-content: space-between} .referral-user__bonus-detail li label, .referral-user__bonus-detail li span{ flex: 0 0 50%} .referral-user__bonus-detail li span{ text-align: right} .referral-user__social{ display: flex; align-items: center; grid-column: 1 / -1; list-style: none; margin: 0; padding: 0} .referral-user__social li{ width: 2rem; height: 2rem; margin-right: 1rem} .referral-user__social li:last-child{ margin-right: 0} .referral-user__social li img{ width: 100%} .referral-user__tabs section{ padding: 0.5rem 0; background-color: var(--color-primary)} .referral-user__tabs section, .referral-user__tabs ul{ width: calc(100% + 1rem); transform: translateX(-0.5rem)} .referral-user__tabs ul{ display: grid; column-gap: 0.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0} .referral-user__tabs ul .btn{ padding: 0; width: 100%; border-radius: 0} .referral-user__tabs ul .app-link--active{ color: var(--color-brand); background-color: var(--color-primary)} .referral-history.page, .referral-downline.page, .referral-rules.page{ box-sizing: border-box; max-width: 100%; min-width: 0; overflow-x: clip; padding: 0.5rem} .referral-info__meta{ color: rgba(255, 255, 255, 0.7); font-size: 0.8125rem; margin: 0 0 0.75rem} .referral-info__meta strong{ color: #fff; font-weight: 700} .referral-downline__toolbar{ display: grid; gap: 0.75rem; margin-bottom: 0.75rem} .referral-downline__filter{ align-items: end; display: grid; gap: 0.5rem; grid-template-columns: minmax(0, 1fr)} .referral-downline__filter-type .input__root, .referral-downline__filter-value .input__root{ width: 100%} .referral-downline__filter-actions{ display: grid; gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr))} .referral-downline__export .btn{ justify-content: center; width: 100%} .referral-downline__export .btn i{ margin-right: 0.375rem} .referral-downline__status{ color: rgba(255, 255, 255, 0.72); font-size: 0.75rem; margin: 0 0 0.75rem} .referral-downline__filter-value--empty{ display: none} .referral-info__table-wrap{ background-color: var(--color-primary-dark); border-radius: 8px; box-sizing: border-box; max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%} .referral-info__table{ border-collapse: collapse; font-size: 0.8125rem; min-width: 100%; width: max-content} .referral-info__table thead th{ background-color: var(--color-brand-dark); color: rgba(255, 255, 255, 0.85); font-size: 0.75rem; font-weight: 600; padding: 0.625rem 0.5rem; text-align: left; white-space: nowrap} .referral-info__table tbody td{ border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 0.625rem 0.5rem; vertical-align: top} .referral-info__table tbody tr:last-child td{ border-bottom: none} .referral-info__empty{ color: rgba(255, 255, 255, 0.65); text-align: center} @media(max-width: 1023px){ .referral-info__table{ min-width: 34rem} .referral-info__table thead th, .referral-info__table tbody td{ font-size: 0.6875rem; padding: 0.5rem 0.375rem} .referral-info__table tbody td:nth-child(2){ max-width: 6.5rem; white-space: normal; word-break: break-word}} .referral-history.page{ width: 100%} .referral-history__filter{ align-items: end; column-gap: 0.5rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 0.5rem} .referral-history__filter .select__container{ grid-column: 1 / 4; margin-bottom: 0} .referral-history__filter .btn{ grid-column: 4 / 5} .referral-history__total{ padding: 0.5rem 0.5rem 0} .referral-history__total h5{ font-size: 0.8125rem; font-weight: 700; margin: 0} .referral-history__data{ border-bottom: 1px solid var(--color-primary-dark); margin: 0.5rem 0} .referral-history__data header{ align-items: center; background-color: var(--color-brand); color: #fff; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; text-align: center} .referral-history__data header h6{ font-size: 0.75rem; font-weight: 600; margin: 0; padding: 0.25rem} .referral-history__data ul{ list-style: none; margin: 0; padding: 0} .referral-history__data ul li{ display: grid; font-size: 0.75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center} .referral-history__data ul li:nth-child(even){ background-color: var(--color-primary-dark)} .referral-history__data ul li span{ overflow: hidden; padding: 0.375rem 0.25rem; text-overflow: ellipsis; white-space: nowrap} .referral-history .alert{ margin: 0.5rem} .referral-downline .pagination, .referral-history .pagination, .referral-downline .pagination a, .referral-history .pagination a, .referral-downline .pagination span, .referral-history .pagination span{ display: flex; justify-content: center} .referral-downline .pagination, .referral-history .pagination{ flex-wrap: wrap; gap: 0.35rem; justify-content: center; margin: 0.75rem 0 0; padding: 0; width: 100%} .referral-downline .pagination a, .referral-history .pagination a, .referral-downline .pagination span, .referral-history .pagination span{ align-items: center; box-sizing: border-box; color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1; margin: 0 0.1rem; padding: 0.25rem 0.75rem; text-decoration: none} .referral-downline .pagination a, .referral-history .pagination a{ border: 2px solid var(--color-brand-dark); border-radius: 10px} .referral-downline .pagination a.app-link--exact-active, .referral-downline .pagination a.app-link--active, .referral-history .pagination a.app-link--exact-active, .referral-history .pagination a.app-link--active{ background-color: var(--color-brand-dark); border-color: var(--color-brand-dark); color: #fff} .referral-downline .pagination span, .referral-history .pagination span{ border: 0} .referral-downline.page{ width: 100%} @media(min-width: 1024px){ .is-desktop-page .referral-user{ margin-top: 0.5rem; padding: 2rem 3rem; background-color: var(--color-primary)} .is-desktop-page .referral-user__links{ position: relative; display: grid; align-items: start; column-gap: 1rem; grid-template-columns: repeat(5, minmax(0, 1fr))} .is-desktop-page .referral-user__links .referral-user__id, .is-desktop-page .referral-user__links .referral-user__link{ grid-column: 1 / 4} .is-desktop-page .referral-user__links .referral-user__bonus{ grid-area: 1 / 4 / 4 / 6} .is-desktop-page .referral-user__links .referral-user__share{ grid-area: 3 / 1 / 4 / 4} .is-desktop-page .referral-user__links .referral-user__how{ grid-area: 3 / 4 / 4 / 6; align-self: end} .is-desktop-page .referral-user__tabs ul{ width: 50%; transform: unset} .is-desktop-page .referral-user__tabs section{ width: auto; transform: unset; background-color: var(--color-primary-dark)} .is-desktop-page .referral-user__tabs .app-link--active{ background-color: var(--color-primary-dark)} .referral-history.page, .referral-downline.page, .referral-rules.page{ padding: 0.75rem} .referral-downline__filter{ align-items: end; grid-template-columns: minmax(0, 10rem) minmax(0, 12rem) auto auto} .referral-downline__filter-actions{ grid-template-columns: auto auto} .referral-downline__toolbar{ align-items: end; grid-template-columns: minmax(0, 1fr) auto} .referral-downline__export .btn{ width: auto; white-space: nowrap} .referral-history--d .referral-history__filter{ width: 50%} .referral-history--d .referral-history__data header h6{ padding: 0.5rem 0.25rem} .referral-history--d .referral-history__data ul li{ background-color: var(--color-primary)} .referral-history--d .referral-history__data ul li:nth-child(even){ background-color: var(--color-primary)}} @media(max-width: 1023px){ .referral-downline .pagination{ -ms-overflow-style: none; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 0.5rem 0.25rem 0.25rem; scrollbar-width: none} .referral-downline .pagination::-webkit-scrollbar{ display: none} .referral-downline .pagination a, .referral-downline .pagination span{ flex: 0 0 auto; font-size: 0.6875rem; margin: 0; min-height: 2rem; min-width: 2rem; padding: 0.35rem 0.5rem} .referral-downline__filter-actions .btn{ min-height: 2.5rem}}