.lgg-single--page:has(.lgg-member-page--referral) .lgg-single__body{ padding: 0} .lgg-single--page:has(.referral-info) .lgg-single__body{ padding: 0} .referral-info{ background-color: #030a12; display: grid; grid-template-rows: auto 1fr; position: relative; width: 100%} .referral-info> header.surface--primary{ align-items: center; background-color: #030a12; 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: #030a12; 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 h1{ 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: #030a12; 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: #0e34d5; 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: #081950; border: 2px solid #081950; 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: #081950; 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: #081950; border: 2px solid #081950; 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}} .lgg-member-page--referral .lgg-member-page__body> h2{ display: none} .lgg-member-page--referral .lgg-member-page__body{ padding: 0} .lgg-member-page--referral .lgg-member-page__title{ display: none} .lgg-member-page--referral[data-lgg-member-guest]:not([hidden]){ padding: 0.5rem} .referral-user{ background-color: #030a12; display: grid; grid-template-rows: auto auto auto 1fr; max-width: 100%; min-height: calc(100vh - 180px - 2rem); min-width: 0; overflow-x: clip; position: relative; width: 100%} @supports(height: 100dvh){ .referral-user{ min-height: calc(100dvh - 180px - 2rem)}} .referral-user> header.surface--primary h2{ gap: 0} .referral-user__wrapper{ display: grid; gap: 0.75rem; padding: 0.5rem} .referral-user__content{ display: grid; gap: 0.75rem} .referral-user__content article{ font-size: 0.8125rem; line-height: 1.45} .referral-user__content article ol, .referral-user__content article ul{ margin: 0; padding-left: 1.25rem} .referral-user__details{ display: grid; gap: 0.75rem} .referral-user__link{ background-color: #081950; border-radius: 8px; display: grid; gap: 0.5rem; padding: 0.75rem} .referral-user__link h5{ align-items: center; display: flex; font-size: 0.8125rem; font-weight: 600; gap: 0.35rem; margin: 0} .referral-user__link> span{ color: rgba(255, 255, 255, 0.9); font-size: 0.8125rem; word-break: break-all} .referral-user__bonus h4, .referral-user__share h4{ font-size: 0.875rem; font-weight: 700; margin: 0 0 0.5rem} .referral-user .referral-info__bonus-detail{ display: grid; gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0} .referral-user .referral-info__bonus-detail li.surface{ border-radius: 8px; padding: 0.625rem 0.75rem} .referral-user .referral-info__bonus-detail h5{ font-size: 0.75rem; font-weight: 600; margin: 0 0 0.2rem} .referral-user .referral-info__bonus-detail span{ color: rgba(255, 255, 255, 0.75); font-size: 0.75rem} .referral-user__share ul{ display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0} .referral-user__share img{ display: block; height: 2rem; width: 2rem} .referral-user> .page-nav.surface{ margin: 0; position: sticky; top: 58px; z-index: 9} .referral-user> .page-nav .page-nav__scroll-parent ul a.btn--primary:not(.app-link--active){ background-color: #081950} .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: #081950; 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: #081950; 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 #081950; margin: 0.5rem 0} .referral-history__data header{ align-items: center; background-color: #0e34d5; 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: #081950} .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 #081950; 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: #081950; border-color: #081950; color: #fff} .referral-downline .pagination span, .referral-history .pagination span{ border: 0} .referral-downline.page{ width: 100%} @media(min-width: 1024px){ .referral-user{ min-height: calc(100vh - 80px - 1.5rem)} @supports(height: 100dvh){ .referral-user{ min-height: calc(100dvh - 80px - 1.5rem)}} .referral-user__wrapper{ gap: 1rem; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); padding: 0.75rem} .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-user .referral-info__bonus-detail{ grid-template-columns: repeat(3, minmax(0, 1fr))} .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: #030a12} .referral-history--d .referral-history__data ul li:nth-child(even){ background-color: #030a12}} @media(max-width: 1023px){ .referral-user{ min-height: auto} .referral-user> .page-nav.surface{ position: sticky; top: 0} .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}}