.lgg-single--page:has(.lgg-member-page--account) .lgg-single__body{ padding: 0} .lgg-member-page--account .lgg-member-page__body> h2, .lgg-member-page--account .lgg-member-page__title{ display: none} .lgg-member-page--account .lgg-member-page__body{ padding: 0} .lgg-member-page--account[data-lgg-member-guest]:not([hidden]){ padding: 0.5rem} .account{ background-color: #030a12; display: grid; grid-template-rows: auto 1fr; min-height: calc(100vh - 180px - 2rem); position: relative; width: 100%} @supports(height: 100dvh){ .account{ min-height: calc(100dvh - 180px - 2rem)}} .account> header.surface--primary{ background-color: #030a12; padding: 0.5rem; position: sticky; top: 58px; width: 100%; z-index: 9} .account> header.surface--primary h2{ align-items: center; display: flex; font-size: 0.875rem; font-weight: 900; margin: 0} .account> header.surface--primary h2 i{ margin-right: 0.5rem} .account__nav-spacer{ height: 0} .account__forms{ display: grid; gap: 1rem; padding: 0 0.5rem 0.5rem} .account .form-heading{ color: #0e34d5; 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-lgg-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} .account .input__placeholder{ margin-bottom: 0.75rem; width: 100%} .account .input__placeholder label{ color: #fff; display: block; font-size: 0.875rem; font-weight: 700; margin-bottom: 0.25rem} .account .input__placeholder .input{ background-color: #081950; border: 2px solid #081950; border-radius: 2px; color: #fff; font-size: 0.875rem; min-height: 2.5rem; padding: 0.5rem 1rem 0.5rem 2.5rem; width: 100%} .account .input__container label{ color: #fff} .account .input__container .input{ background-color: #081950; border: 2px solid #081950; border-radius: 2px; color: #fff; font-size: 0.875rem; min-height: 2.5rem; padding: 0.5rem 1rem 0.5rem 2.5rem; width: 100%} .account .input--icon{ padding-left: 2.5rem} .account .input__icon{ color: #fff; left: 0.625rem; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3} .account .input__validation-icon{ position: absolute; right: 0.625rem; top: 50%; transform: translateY(-50%); z-index: 3} .account .input--invalid{ border-color: #ff4d4d} .account .input-password .input{ padding-right: 4.5rem} .account .input-password__controls{ display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; height: 100%; position: absolute; right: 0; top: 0; z-index: 4} .account .input-password__controls button{ align-items: center; background: none; border: 0; color: hsla(0, 0%, 100%, 0.6); cursor: pointer; display: flex; font-size: 1.125rem; height: 100%; justify-content: center; padding: 0 0.5rem; width: 2rem} .account .input-password__controls button.enabled{ color: #fff} .account .input-confirm{ background-color: #081950; border: 2px solid #081950; border-radius: 2px; margin-bottom: 0.75rem; width: 100%} .account .input-confirm__label{ align-items: center; cursor: pointer; display: grid; gap: 0.5rem; grid-template-columns: auto 1fr; padding: 7px 0.5rem} .account .input-confirm__label span{ font-size: 0.75rem} .account .input-confirm input{ position: absolute; visibility: hidden} .account .input-confirm--confirmed .input-confirm__label i{ color: #139c44} .account .input-confirm--confirmed .input-confirm__label span{ color: #fff} .account .account__address-field{ grid-column: 1 / -1} .account form .btn.btn--success{ display: flex; margin-top: 0.5rem; max-width: 20rem; width: 100%} .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: #081950; border: 2px solid #081950; 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: #0e34d5; 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: #0e34d5} .date-select__calendar-header{ align-items: center; border-bottom: 2px solid #081950; display: flex; font-size: 0.875rem; gap: 1rem; justify-content: center; padding: 0.5rem} .account--d{ min-height: calc(100vh - 80px - 1.5rem)} @supports(height: 100dvh){ .account--d{ min-height: calc(100dvh - 80px - 1.5rem)}} @media(min-width: 1024px){ .account--d .form-heading{ margin-top: 0} .account--d .account__forms{ align-items: start; gap: 1rem; grid-template-columns: repeat(9, minmax(0, 1fr))} .account--d .account__bank, .account--d form{ background-color: #081950; border-radius: 2px; margin-bottom: 0; padding: 1rem} .account--d .account__bank .btn, .account--d form .btn{ margin: 0 auto; max-width: 20rem} .account--d .account__bank, .account--d .user-form{ border-bottom: none; grid-column: 1 / 7} .account--d .user-form{ height: 100%} .account--d .reset-password-form{ grid-column: 7 / 10; grid-row: 1 / 2; height: 100%} .account--d .account--editable, .account--d .account--locked, .account--d .account__bank{ display: grid; column-gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr))} .account--d .account__bank .form-heading{ grid-column: 1 / -1} .account--d .input-confirm{ grid-column: 1 / -1; justify-self: start; width: auto}} @media(max-width: 1023px){ .account--d .account__bank, .account--d form{ background-color: #081950; border-radius: 2px; padding: 1rem} .account--d .account--editable, .account--d .account--locked, .account--d .account__bank{ display: grid; gap: 0}}