.nas-single--page:has(.nas-member-page--account) .nas-single__body{ padding: 0} .nas-member-page--account .nas-member-page__body> h2, .nas-member-page--account .nas-member-page__title{ display: none} .nas-member-page--account .nas-member-page__body{ padding: 0} .nas-member-page--account[data-nas-member-guest]:not([hidden]){ padding: 0.5rem} .account .form-heading{ color: var(--color-brand); margin: 0.5rem 0; text-transform: uppercase} .account form{ margin-bottom: 1rem} .account .user-form{ padding-bottom: 1rem} .account .account__bank, .account .user-form{ border-bottom: 1px solid rgba(var(--color-contrast-rgb), 0.1)} .account .alert{ margin-bottom: 1rem} @media(min-width: 1024px){ .is-desktop-page .account{ display: grid; align-items: start; gap: 1rem; grid-template-columns: repeat(9, minmax(0, 1fr)); margin-top: 0.5rem; padding: 2rem 3rem; background-color: var(--color-primary)} .is-desktop-page .account .page-header{ grid-column: 1 / -1} .is-desktop-page .account .form-heading{ margin-top: 0} .is-desktop-page .account .account__bank, .is-desktop-page .account form{ margin-bottom: 0; padding: 1rem; background-color: var(--color-primary-dark); border-radius: 5px} .is-desktop-page .account .account__bank .btn, .is-desktop-page .account form .btn{ max-width: 20rem; margin: 0 auto} .is-desktop-page .account .account__bank, .is-desktop-page .account .user-form{ grid-column: 1 / 7; border-bottom: none} .is-desktop-page .account .reset-password-form{ grid-area: 2 / 7 / 3 / 10} .is-desktop-page .account .account--editable, .is-desktop-page .account .account--locked, .is-desktop-page .account .account__bank{ display: grid; column-gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr))} .is-desktop-page .account .account__bank .form-heading{ grid-column: 1 / -1} .is-desktop-page .account .input-confirm{ width: unset; grid-column: 1 / -1; justify-self: start}} .account .form-heading{ color: var(--color-brand); font-size: 0.875rem; font-weight: 700; margin: 0 0 0.5rem; text-transform: uppercase} .account .alert{ margin-bottom: 1rem} .account form .alert--error, .account form .alert--success{ width: 100%} .account .alert[hidden], .account .input__error[hidden], .account[data-nas-field-error][hidden], .account .date-select__calendar[hidden]{ display: none !important} .account .alert--info{ align-items: flex-start} .account .alert--info p{ font-size: 0.75rem; font-weight: 600; line-height: 1.4} .date-select{ margin-bottom: 0.75rem} .date-select .date-select__wrapper{ width: 100%} .date-select .date-select__wrapper> div:first-child{ align-items: center; display: flex; position: relative} .date-select .date-select__wrapper> div:first-child> span{ color: hsla(0, 0%, 100%, 0.38); font-size: 1rem; pointer-events: none; position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); z-index: 3} .date-select .date-select__wrapper> div:first-child> span span{ align-items: center; display: flex; justify-content: center} .date-select .input__date{ cursor: pointer} .date-select .date-select__calendar{ background-color: var(--color-primary-dark); border: 2px solid var(--color-brand-dark); border-radius: 5px; left: 0; margin-top: 0.5rem; position: absolute; top: 100%; width: 100%; z-index: 12} .date-select .date-select__calendar header{ align-items: center; display: flex; justify-content: space-between; padding: 0.5rem} .date-select .date-select__calendar header .prev, .date-select .date-select__calendar header .next{ cursor: pointer; font-weight: 700; padding: 0.25rem 0.5rem; user-select: none} .date-select .date-select__calendar header .next.disabled, .date-select .date-select__calendar header .prev.disabled{ color: hsla(0, 0%, 100%, 0.38); cursor: default; pointer-events: none} .date-select .date-select__calendar header .day__month_btn{ font-size: 0.875rem; font-weight: 700} .date-select .date-select__calendar> div:last-child{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0.5rem} .date-select .date-select__calendar .cell{ border: none; font-size: 0.75rem; font-weight: 700; height: 32px; line-height: 32px; padding: 0; text-align: center} .date-select .date-select__calendar .cell.day:not(.blank):not(.disabled){ cursor: pointer} .date-select .date-select__calendar .cell.selected{ background-color: var(--color-brand); border-radius: 10px} .date-select .date-select__calendar .cell.disabled{ color: hsla(0, 0%, 100%, 0.38); cursor: default} .date-select .date-select__calendar .cell:not(.blank):not(.disabled).day:hover{ color: var(--color-brand)} .date-select__calendar-header{ align-items: center; border-bottom: 2px solid var(--color-brand-dark); display: flex; font-size: 0.875rem; gap: 1rem; justify-content: center; padding: 0.5rem} .history__content{ margin: 0.5rem 0} .history .alert--info{ align-items: center; gap: 0.5rem; margin: 0.75rem 0} .history .alert--info p{ margin: 0} .history__item{ min-width: 0} .history__group{ list-style: none; margin: 0 0 2rem; padding: 0} .history__group> h5, .history__item> h5{ margin: 0 0 0.25rem; font-size: 0.875rem} .history__group li{ margin: 0.75rem 0} .history__group:last-child, .history__item:last-child .history__group{ margin-bottom: 0} .history .alert{ margin: 1rem 0} .history--d{ margin-top: 0.5rem; padding: 2rem 3rem; background-color: var(--color-primary)} .activity{ margin: 0.5rem 0} .activity__nav{ width: calc(100% + 1rem); transform: translateX(-0.5rem)} .activity__nav ul{ display: flex; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x mandatory; list-style: none; margin: 0; padding: 0} .activity__nav ul::-webkit-scrollbar{ display: none} .activity__nav ul li{ scroll-snap-align: start} .activity__nav ul li .btn{ width: 100%; border-radius: 0} .activity__nav ul li.activity__nav--active .btn{ color: var(--color-brand); background-color: var(--color-primary-dark)} .activity__content{ overflow: hidden; margin-top: 0.5rem; border-radius: 5px; background-color: var(--color-primary-dark)} .activity__content__header{ padding: 0.5rem; font-weight: 500; font-size: 0.875rem; color: var(--color-text-brand); background-color: var(--color-brand-dark); display: grid; gap: 0.5rem; justify-items: center; grid-template-columns: repeat(6, minmax(0, 1fr))} .activity__content__header--coupon{ grid-template-columns: repeat(7, minmax(0, 1fr))} .activity__item{ display: grid; padding: 0.5rem; font-size: 0.875rem; row-gap: 0.5rem; place-items: center start; grid-template-columns: repeat(2, minmax(0, 1fr))} .activity__item:nth-child(2n){ background-color: var(--color-primary)} .activity__item__created, .activity__item__date, .activity__item__updated{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 300} .activity__item__amount, .activity__item__date, .activity__item__gain, .activity__item__provider, .activity__item__service, .activity__item__updated{ justify-self: end} .activity__load{ display: flex; align-items: center; justify-content: center; margin-top: 0.5rem} .inbox{ margin-bottom: 0.5rem} .inbox__menu{ display: flex; flex-direction: column; margin-bottom: 1rem} .inbox__nav ul{ display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0} .inbox__nav li{ flex: 1 1 50%} .inbox__nav a:not(.btn){ display: flex; align-items: center; justify-content: center; padding: 0.5rem; font-weight: 700; font-size: 0.75rem; white-space: nowrap; color: var(--color-text-primary); border-bottom: 2px solid var(--color-primary-light)} .inbox__nav a:not(.btn).app-link--exact-active, .inbox__nav a:not(.btn):hover{ color: var(--color-brand); border-color: var(--color-brand)} .inbox__nav a:not(.btn) .badge{ height: unset; padding: 0; margin-left: 0.5rem; font-size: 0.75rem} .messages{ margin-bottom: 0.5rem; width: calc(100% + 1rem); transform: translateX(-0.5rem); list-style: none; padding: 0} .messages .alert{ margin: 0 1rem; place-self: center} .messages .message{ background-color: var(--color-primary)} .messages .message:nth-child(2n){ background-color: var(--color-primary-light)} .messages .message a{ position: relative; display: grid; padding: 0.5rem; font-size: 0.75rem; row-gap: 0.5rem; align-items: center; grid-template-columns: repeat(2, minmax(0, 1fr)); color: inherit; text-decoration: none} .messages .message a .message__id{ grid-column: 1 / 2} .messages .message a .message__department{ grid-area: 3 / 1 / 4 / 1; color: rgba(var(--color-text-primary-rgb), 0.6)} .messages .message a .message__subject{ grid-area: 2 / 1 / 3 / -1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0} .messages .message a .message__status{ justify-self: end; grid-column: 2 / 3} .messages .message a .message__date{ grid-area: 3 / 2 / 4 / 3; justify-self: end; color: rgba(var(--color-text-primary-rgb), 0.6)} .messages .message--global{ background-color: rgba(var(--color-brand-rgb), 0.5)} .messages .message--read .message__id, .messages .message--read .message__subject{ color: rgba(var(--color-text-primary-rgb), 0.38)} .messages .inbox__load{ display: flex; align-items: center; justify-content: center; padding: 0.5rem 0} .ticket-create.page{ width: 100%; align-items: stretch; justify-content: flex-start} .ticket-form{ width: 100%} .ticket-form{ display: flex; flex-direction: column; gap: 0.75rem; box-sizing: border-box; margin: 0.5rem 0; padding: 1rem; background-color: var(--color-primary-dark); border-radius: 5px} .ticket-form .input__container{ margin: 0} .ticket-form .input, .ticket-form .input__select{ width: 100%; box-sizing: border-box} .ticket-form .input__textarea .input{ min-height: 8rem; resize: vertical} .ticket-form__error[hidden]{ display: none} .ticket-form__actions{ display: flex; gap: 1rem; justify-content: flex-end} .ticket-form__actions> *{ flex: 0 1 7rem} .ticket{ display: grid; grid-template-rows: auto minmax(12rem, 1fr) auto; margin-bottom: 60px; position: relative; min-width: 0} .ticket__header{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; row-gap: 0.5rem; padding: 0.5rem; background-color: var(--color-primary-dark); font-size: 0.75rem; position: sticky; top: 3.5rem; z-index: 2} .ticket__header .message__subject{ grid-area: 2 / 1 / 3 / -1; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap} .ticket__header .message__id{ grid-column: 1 / 2} .ticket__header .message__department{ grid-area: 3 / 1 / 4 / 1; color: rgba(var(--color-text-primary-rgb), 0.6)} .ticket__header .message__status{ grid-column: 2 / 3; justify-self: end} .ticket__header button{ justify-self: end} .ticket .ticket__conversation{ min-height: 0; overflow-y: auto; padding: 0.5rem 1rem 5.5rem} .ticket .ticket__conversation ul{ display: flex; flex-direction: column; align-items: flex-start; list-style: none; margin: 0; padding: 0} .ticket .conversation__item{ max-width: 70%; margin-bottom: 0.5rem; padding: 0.5rem; border-radius: 5px; background-color: var(--color-primary-light); font-size: 0.875rem} .ticket .conversation__item--right{ margin-left: auto; background-color: rgba(var(--color-brand-rgb), 0.45)} .ticket .conversation__item__author{ margin: 0 0 0.35rem; color: var(--color-brand)} .ticket .conversation__item p{ margin: 0; overflow-wrap: anywhere; white-space: pre-wrap} .ticket .conversation__item span{ display: block; margin-top: 0.5rem; color: rgba(var(--color-text-primary-rgb), 0.6); font-size: 0.75rem} .ticket__reply{ background-color: var(--color-primary); position: fixed; left: 0; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); width: 100%; z-index: 20} .ticket__reply form{ display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.5rem; width: 100%} .ticket__reply form .input__textarea{ flex: 1 1 auto; margin: 0} .ticket__reply form .input{ width: 100%; min-height: 36px; resize: none; box-sizing: border-box} .ticket--completed .ticket__conversation{ margin-bottom: 0; padding-bottom: 1rem} .ticket--completed{ margin-bottom: 0} @media(min-width: 1024px){ .activity__nav{ width: auto; transform: unset} .activity__nav ul{ display: inline-flex} .activity__content{ margin-top: 1rem} .activity__item{ gap: 0.5rem; justify-items: center} .activity__item--casino, .activity__item--payment{ grid-template-columns: repeat(6, minmax(0, 1fr))} .activity__item--coupon{ grid-template-columns: repeat(7, minmax(0, 1fr))} .activity__item__amount, .activity__item__date, .activity__item__gain, .activity__item__provider, .activity__item__service, .activity__item__updated{ justify-self: center} .activity__load{ margin-top: 1rem} .is-desktop-page .inbox{ display: grid; gap: 1rem 2rem; margin-top: 0.5rem; padding: 2rem 3rem; align-items: start; background-color: var(--color-primary); grid-template-columns: repeat(9, minmax(0, 1fr))} .is-desktop-page .inbox .page-header{ grid-column: 1 / -1} .is-desktop-page .inbox .inbox__body{ width: auto; transform: unset; grid-column: 3 / -1} .is-desktop-page .inbox .inbox__menu{ grid-column: 1 / 3; padding: 1rem; border-radius: 10px; background-color: var(--color-primary-dark)} .is-desktop-page .inbox .inbox__menu ul{ gap: unset; flex-direction: column} .is-desktop-page .inbox .inbox__menu li{ margin: 0.75rem 0} .is-desktop-page .inbox .inbox__menu a:not(.btn){ text-align: left; font-size: 0.875rem; justify-content: space-between} .is-desktop-page .messages{ width: auto; transform: unset} .is-desktop-page .messages .message a{ grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0.75rem} .is-desktop-page .messages .message a .message__subject{ font-size: 0.875rem; grid-area: 1 / 2 / 2 / 5} .is-desktop-page .messages .message a .message__department{ grid-area: 1 / 5 / 2 / 6; justify-self: center} .is-desktop-page .messages .message a .message__status{ grid-column: 6 / 7; justify-self: center} .is-desktop-page .messages .message a .message__date{ grid-area: 1 / 7 / 2 / 8} .is-desktop-page .ticket-form{ max-width: 37.5rem; margin-inline: auto} .is-desktop-page .ticket{ height: calc(100dvh - 138px - 1.75rem); margin-bottom: 0; overflow: hidden} .is-desktop-page .ticket__header{ position: static; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0.75rem} .is-desktop-page .ticket__header .message__subject{ font-size: 0.875rem; grid-area: 1 / 2 / 2 / 5} .is-desktop-page .ticket__header .message__department{ grid-area: 1 / 5 / 2 / 6; justify-self: center} .is-desktop-page .ticket__header .message__status{ grid-column: 6 / 7; justify-self: center} .is-desktop-page .ticket__header button{ grid-area: 1 / 7 / 2 / 8} .is-desktop-page .ticket__reply{ position: static; width: auto}}