:root {
    --sb-green: #0a7c2f;
    --sb-green-dark: #075c22;
    --sb-green-deeper: #053d17;
    --sb-yellow: #ffc83a;
    --sb-yellow-dark: #f5b400;
    /* content area palette (NEW — premium light) */
    --canvas-bg: #f3f5f3;
    --canvas-bg-2: #ecf0ec;
    --surface: #ffffff;
    --surface-tint: #fbfdfb;
    --line: rgba(8, 30, 14, .08);
    --line-2: rgba(8, 30, 14, .14);
    --ink: #0c1f12;
    --ink-2: #1f3527;
    --ink-mute: #4a6354;
    --ink-faint: #7f927f;
    --shadow-card: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(8,30,14,.04), 0 12px 30px -12px rgba(8,30,14,.12), 0 30px 60px -30px rgba(8,30,14,.18);
    --shadow-soft: 0 1px 2px rgba(8,30,14,.04), 0 8px 24px -10px rgba(8,30,14,.1);
    --sb-red:rgb(196, 50, 46);
}

.space-grotesk {
    font-family: 'Space Grotesk';
}

.account .body, .account .internal-content {
    font-family: "Manrope", sans-serif;
    font-weight: normal;
    margin: 0px;
    max-width: unset;
    line-height: 1;
    color: var(--ink);
    background-color: var(--canvas-bg)
}

.account .main-content, .account .internal-content {
    padding: 24px 28px 48px;
    margin: 0px;
    display: flex;
    flex-direction: column;
}

.account .internal-content {
    padding: 18px 14px 32px;
}

.account .row {
    display: flex;
    flex-direction: row;
}

.account .flex-wrap {
    flex-wrap: wrap;
}

.account .column {
    display: flex;
    flex-direction: column;
}

.account .main-content app-widget-host , .account .internal-content app-widget-host {
    display: inherit;
    flex-direction: inherit;
    flex-wrap: inherit;
    justify-content: inherit;
    align-items: inherit;
}

.account-page-top {
    margin-bottom: 24px;
    justify-content: space-between
}

.account-page-top > app-widget-host {
    gap: 24px;
}

.account-breadcrumb {
    width: 100%;
    align-items: center;
    margin-bottom: 10px;
}

.account-breadcrumb > app-widget-host {
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--sb-green);
    background: rgba(10, 124, 47, .08);
    padding: 6px 10px;
    border-radius: 999px;
    width: auto
}

.account-breadcrumb > app-widget-host::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sb-green);
    box-shadow: 0 0 0 4px rgba(10, 124, 47, .15);
}

.account-title-subtitle {
    max-width: 480px;
}

.account-page-title {
    margin: 0;
    font-size: 34px;
    letter-spacing: -.02em;
    font-weight: 700;
    line-height: 1.05;
    display: inline;
}

.account-page-title .text {
    display: inline-block;
    margin-right: 8px;
}

.account-page-title .text div {
    display: contents
}

.account-page-title .text:not(:first-of-type) {
}

.account-page-title .span {
    /* margin-left:8px; */
}

.account-page-subtitle {
    margin: 8px 0 0;
    color: var(--ink-mute);
    font-size: 14px;
}

.text-green {
    color: var(--sb-green)
}

.text-yellow {
    color: var(--sb-yellow-dark);
}

.header-chips-container {
    justify-content: flex-end;
    align-items: flex-end
}
.header-chips-container .beto-block:empty {
    display:none;
}
.header-chips-container > app-widget-host {
    gap: 8px;
}

.header-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
    box-shadow: var(--shadow-soft);
}
.verification-chip {
        background: rgba(255, 200, 58, 0.16);
    border-color: rgba(255, 200, 58, 0.4);
    color: rgb(122, 85, 0);
}
.chip-value {
    font-family: "Space Grotesk";
    color: var(--ink);
    font-weight:bold;
}
.header-chip > app-widget-host {
    gap: 7px;
}

.header-chip.networks .icon {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .18);
}

#root .payments-container > app-widget-host {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    counter-reset: payment-counter;
}

#root .payments-container.withdraw > app-widget-host {
    grid-template-columns: repeat(3, 1fr);
}

#root .mobile .payments-container > app-widget-host {
    grid-template-columns: repeat(1, 1fr);
}

.card-container > app-widget-host {
    gap: 18px;
}

.payment-wrapper > app-widget-host {
    gap: 22px;
}

.payment-method, .account .card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px;
    cursor: pointer;
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s;
    box-shadow: var(--shadow-soft);
    counter-increment: payment-counter;
    flex: 1;
}
.account .card .link a {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}
.payment-method-top, .card-top {
    justify-content: space-between;
    margin-bottom: 4px;
}

.payment-method-art, .card-art {
    margin: 14px 0 16px;
    height: 116px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--sb-green) 0%, var(--sb-green-deeper) 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.call .card-art {
    background: linear-gradient(135deg, rgb(184, 138, 22), rgb(90, 68, 8));
}
.c-telegram .card-art {
        background: linear-gradient(135deg, rgb(26, 58, 38), rgb(6, 26, 14));
}
.payment-method-art::after {
    content: "";
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(140px 100px at 80% 20%, rgba(255,200,58,.35), transparent 60%), radial-gradient(180px 120px at 10% 110%, rgba(255,255,255,.08), transparent 60%);
}

.payment-no, .card-top-text {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--ink-faint);
    width: auto
}

.payment-no div::after {
    content: " • " counter(payment-counter, decimal-leading-zero)
}

.payment-tag {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--canvas-bg);
    color: var(--ink-2);
    border: 1px solid var(--line);
    width: auto;
}

.payment-tag.fast {
    background: rgba(34, 197, 94, .1);
    color: #0f7a36;
    border-color: rgba(34, 197, 94, .25);
}

.payment-tag.most-used {
    background: rgba(255, 200, 58, .16);
    color: #7a5500;
    border-color: rgba(255, 200, 58, .4);
}

.payment-method-title, .card .card-title-subtitle .card-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.payment-method-subtitle, .card .card-title-subtitle .card-subtitle {
    margin: 0;
    color: var(--ink-mute);
    font-size: 13px;
    line-height: 1.55;
}

.payment-duration-fees, .card-bottom {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--line-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--ink-mute);
    font-weight: 500;
}

.card-bottom .text {
    font-weight: 600;
    color: var(--ink);
    font-size: 12.5px;
}

.payment-duration-fees .icon {
    margin-right: 4px;
}

.payment-method .link-arrow, .card .link-arrow {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sb-green);
    color: #fff;
    display: grid;
    place-items: center;
    background-image: url(/v1.541/r/images/icons/account/arrow_right.svg);
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform .2s, background .2s;
    margin-left: auto;
}

.payment-method .p-separator {
    margin: 0px 10px;
    opacity: .4
}

.quick-deposit-wrapper {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px 18px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-soft);
    flex-wrap: wrap;
}

.quick-deposit-wrapper > app-widget-host {
    gap: 14px;
}

.quick-deposit-wrapper .icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(10, 124, 47, .1);
    color: var(--sb-green);
    display: grid;
    place-items: center;
}

.quick-deposit .payment-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.quick-deposit .payment-presets button {
    appearance: none;
    border: 1px solid var(--line);
    background: #fff;
    padding: 9px 14px;
    border-radius: 999px;
    font: 600 13px / 1 'Space Grotesk', sans-serif;
    color: var(--ink);
    cursor: pointer;
    transition: all .15s;
}

.quick-deposit .payment-presets button.preset-active {
    background: var(--sb-green);
    color: #fff;
    border-color: var(--sb-green);
}

.mc-art .phone-mock {
    position: relative;
    z-index: 1;
    width: 70px;
    height: 110px;
    border-radius: 12px;
    background: #0c1f12;
    border: 2px solid rgba(255,255,255,.2);
    box-shadow: 0 18px 30px -10px rgba(0,0,0,.4);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mc-art .phone-mock .top-dot {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,.4);
    margin: 0 auto 4px
}

.mc-art .phone-mock .line {
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,.12)
}

.mc-art .phone-mock .line.amt {
    background: var(--sb-yellow);
    width: 80%
}

.mc-art .phone-mock .line.btn {
    background: rgba(255,200,58,.7);
    margin-top: auto;
    height: 10px
}

.mc-art .float-card {
    position: absolute;
    width: 78px;
    height: 52px;
    background: transparent;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.35));
}

.mc-art .float-card.logo-card {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.mc-art .stack-1 {
    top: 18px;
    left: calc(50% - 110px);
    transform: rotate(-10deg)
}

.mc-art .stack-2 {
    top: 26px;
    left: calc(50% + 38px);
    transform: rotate(8deg)
}

.mc-art .stack-3 {
    top: 56px;
    left: calc(50% + 70px);
    transform: rotate(-3deg)
}

.mc-art.voucherish {
    background: linear-gradient(135deg, var(--sb-green-dark), var(--sb-green-deeper))
}

.mc-art.voucherish .vbody {
    position: relative;
    z-index: 1;
    background: var(--sb-yellow);
    border-radius: 10px;
    padding: 12px 16px;
    width: 220px;
    box-shadow: 0 18px 30px -10px rgba(0,0,0,.35);
    transform: rotate(-3deg);
}

.mc-art.voucherish .vbody::before, .mc-art.voucherish .vbody::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--sb-green-deeper);
    top: calc(50% - 7px);
}

.mc-art.voucherish .vbody::before {
    left: -7px
}

.mc-art.voucherish .vbody::after {
    right: -7px
}

.mc-art.voucherish .vlbl {
    font-family: 'Space Grotesk';
    font-size: 9px;
    font-weight: 700;
    color: #5a3d00;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.mc-art.voucherish .vcode {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .22em;
    color: var(--sb-green-deeper);
}

.mc-art.cardish {
    background: linear-gradient(135deg, #0c1f12, #1a3a26)
}

.mc-art.cardish .big-card {
    position: relative;
    z-index: 1;
    width: 160px;
    height: 100px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff, #f0f0f0);
    box-shadow: 0 18px 30px -10px rgba(0,0,0,.4);
    padding: 12px;
    transform: rotate(-6deg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mc-art.cardish .big-card .chip-sq {
    width: 26px;
    height: 20px;
    border-radius: 3px;
    background: linear-gradient(135deg, #f0c656, #b1832a);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}

.mc-art.cardish .big-card .num {
    font-family: 'Space Grotesk';
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .15em;
    color: #2a2a2a;
}

.mc-art.cardish .small-card {
    position: absolute;
    z-index: 0;
    width: 140px;
    height: 90px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1a3a26, #0c1f12);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 18px 30px -10px rgba(0,0,0,.4);
    transform: rotate(6deg);
    right: 30px;
    bottom: 14px;
}

.mc-art.shopish .shop-front {
    position: relative;
    z-index: 1;
    width: 200px;
    height: 92px;
    border-radius: 10px;
    background: var(--sb-yellow);
    box-shadow: 0 14px 30px -10px rgba(0,0,0,.4);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: rotate(-2deg);
}

.mc-art.shopish .shop-front .sign {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 11px;
    color: var(--sb-green-deeper);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.mc-art.shopish .shop-front .code {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 18px;
    color: var(--sb-green-deeper);
    letter-spacing: .2em;
}

.mc-art.shopish .shop-front .ttl {
    font-size: 9px;
    color: rgba(0,0,0,.55);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
}

.mc-art.shopish .shop-front::before, .mc-art.shopish .shop-front::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--sb-green-deeper);
    top: calc(50% - 7px);
}

.mc-art.shopish .shop-front::before {
    left: -7px
}

.mc-art.shopish .shop-front::after {
    right: -7px
}

mc-art.bankish {
    background: linear-gradient(135deg, #0d2a1a, #061a0e)
}

.mc-art.bankish .bank-glyph {
    position: relative;
    z-index: 1;
    width: 130px;
    height: 92px;
    color: var(--sb-yellow);
    display: grid;
    place-items: center;
}

.mc-art.bankish .bank-glyph svg {
    width: 100%;
    height: 100%;
    opacity: .92;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,.35))
}

.mc-art.bankish .acct {
    position: absolute;
    right: 22px;
    bottom: 14px;
    background: rgba(255,255,255,.95);
    border-radius: 8px;
    padding: 6px 10px;
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 10px;
    color: #0c1f12;
    letter-spacing: .14em;
    box-shadow: 0 6px 14px -4px rgba(0,0,0,.4);
}

.payment-logo-info-wrapper {
    align-items: center;
    margin-bottom: 22px;
}

.payment-logo-info-wrapper > app-widget-host {
    gap: 14px;
}

.payment-logo img {
    max-width: 74px;
}

.payment-form-wrapper {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 26px;
    box-shadow: var(--shadow-soft);
    flex: 1;
}

.payment-logo-wrapper {
    position: relative;
    cursor: pointer;
    border-radius: 14px;
    padding: 16px 14px;
    background: var(--surface-tint);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all .15s;
}

.payment-logo-wrapper .text {
    font-weight: 600;
    color: var(--ink);
    font-size: 11px;
}

.payment-info-title {
    font-size: 14px;
    font-weight: 700;
}

.payment-info-subtitle {
    font-size: 12.5px;
    color: var(--ink-mute);
}

.payment-form .form-row {
    flex-wrap: wrap;
    padding: 0px;
}

#root .beto-payment, #root .beto-payment .payment-form, #root .beto-payment .payment-form .generic-form {
    display: contents
}

#root .beto-payment .payment-form .generic-form > div {
    width: 100%;
}

#root .beto-payment .payment-form .generic-form ui-button[type="submit"] {
    order: 6;
    display: flex;
    margin-top: 22px;
    width: unset;
    flex: 1;
}

#root .beto-payment .payment-form .generic-form ui-button[type="submit"] button {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 14px 18px;
    border-radius: 12px;
    font: 700 14px / 1 'Manrope', sans-serif;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .15s;
    flex: 1;
    background: var(--sb-green);
    color: #fff;
    height: auto;
    box-shadow: 0 10px 24px -8px rgba(10, 124, 47, .4), inset 0 1px 0 rgba(255, 255, 255, .12);
}

#root .beto-payment .payment-form .generic-form ui-button[type="submit"] button::after {
    content: "";
    width: 14px;
    height: 14px;
    display: block;
    background-image: url(/v1.555/r/images/icons/account/arrow_right_white.svg)
}

.payment-form-buttons-wrapper .cancel-button {
    margin-top: 22px;
    order: 5;
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 14px 18px;
    border-radius: 12px;
    font: 700 14px / 1 'Manrope', sans-serif;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .15s;
    background: #fff;
    color: var(--ink-2);
    border: 1px solid var(--line-2);
    position: relative;
    margin-right: 10px;
}

.payment-form-buttons-wrapper .cancel-button a {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    font-size: 0;
}

#root .payment-form .form-row label {
    width: 100%;
    font-size: 11px!important;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 10px;
    max-width:unset;
flex:1;
}

.payment-form .form-row .form-element-wrapper {
    flex: unset;
    width: 100%;
}

.payment-form app-text-field .form-row .form-element-wrapper, .payment-form app-select-field .form-row .form-element-wrapper {
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 12px 14px;
    transition: all .15s;
    background: var(--surface-tint);
    opacity: 0.85;
}

#root .payment-form app-text-field .form-row .form-element-wrapper input, #root .payment-form app-select-field .form-row .form-element-wrapper select {
    height: unset;
    appearance: none;
    border: 0;
    outline: 0;
    background: transparent;
    width: 100%;
    color: var(--ink);
    font-size: 15px;
    font-family: 'Space Grotesk';
    font-weight: 600;
    padding: 4px 0 2px;
}

#root .payment-form app-text-field .form-row .form-element-wrapper input:disabled {
    background-image: url(/v1.555/r/images/icons/account/lock_faint.svg);
    background-repeat: no-repeat;
    background-position: center right
}
#root .payment-form .fld-telephone app-text-field .form-row .form-element-wrapper input:disabled {
    background-image: url(/v1.555/r/images/icons/account/lock_faint.svg), url(/assets/themes/betomall/images/icons/flags/ghana.svg);
    background-repeat: no-repeat;
    background-position: center right,left center
}
#root .payment-form .fld-telephone app-text-field label:after {
    content:"LOCKED · REGISTERED";
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-faint);
    background: var(--surface-tint);
    border: 1px solid var(--line);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    margin-left:8px;
}
#root .payment-form .fld-telephone app-text-field .form-row .form-element-wrapper input {
    padding-left:36px;
}
.payment-form .payment-form-errors {
    order: 4
}

.payment-form app-fields-section > div {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.payment-form .fld-amount .form-row .form-element-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--surface-tint);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 4px 14px;
    transition: all .15s;
    flex-direction: row;
    order: 2
}

.payment-form .fld-amount .form-row .form-element-wrapper::before {
    content: "GHS";
    color: var(--ink-faint);
    font-weight: 700;
    font-size: 13px;
    padding-right: 12px;
    border-right: 1px solid var(--line);
}

.payment-form .fld-amount .form-row .form-element-wrapper::after {
    content: "min 1 · max 10,000";
    color: var(--ink-faint);
    font-size: 11.5px;
    white-space: nowrap;
}

.payment-form .deposit-card .fld-amount .form-row .form-element-wrapper::after {
    content: "includes GHS 1.00 fee";
    position: unset;
    transform: translate(0)
}

.payment-form .withdrawal-mobile .fld-amount .form-row .form-element-wrapper::after , .payment-form .withdrawal-shop .fld-amount .form-row .form-element-wrapper::after , .payment-form .withdrawal-bank .fld-amount .form-row .form-element-wrapper::after {
    content: "min 5 · max " attr(max-amount);
    position: unset;
    transform: translate(0)
}

#root .payment-form .fld-amount .form-row .form-element-wrapper input {
    flex: 1;
    appearance: none;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-size: 22px;
    font-family: 'Space Grotesk';
    font-weight: 600;
    padding: 16px 12px;
    min-width: 0;
    height: unset;
}

.payment-form .fld-amount .form-row .useMax {
    order: 0;
    appearance: none;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--sb-green);
    padding: 6px 12px;
    border-radius: 999px;
    font: 700 11.5px / 1 'Manrope', sans-serif;
    letter-spacing: .04em;
    cursor: pointer;
    margin-left: auto;
    margin-bottom: 10px;
}

.payment-wrapper .field-presets {
    margin-top: 12px;
    width: 100%;
}

.payment-wrapper .payment-presets {
    display: flex;
    gap: 8px;
}

.payment-wrapper .payment-presets button {
    appearance: none;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-2);
    padding: 11px 8px;
    border-radius: 10px;
    font: 600 13px / 1 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: all .15s;
    flex: 1;
}

.payment-wrapper .payment-presets button.preset-active {
    background: var(--sb-green);
    border-color: var(--sb-green);
    color: #fff;
}

.field-printer {
    width: 100%;
}

.field-printer .field-wrapper {
    display: flex;
    flex-direction: column;
}

#root .field-printer .field-wrapper label {
    width: 100%;
    font-size: 11px!important;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 10px;
    max-width: unset;
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#root .field-printer .field-wrapper label .tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-faint);
    background: var(--surface-tint);
    border: 1px solid var(--line);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.04em;
}

#root .field-printer .field-wrapper input {
    background: var(--surface-tint);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 12px 14px;
    transition: all .15s;
    width: 100%;
    color: var(--ink);
    font-size: 15px;
    font-family: 'Space Grotesk';
    font-weight: 600;
}
#root .field-printer.telephone .field-wrapper input {
    background-image:url(/assets/themes/betomall/images/icons/flags/ghana.svg);
    background-size:22px auto;
    background-repeat:no-repeat;
    background-position:12px center;
    padding-left:45px;
}
.documents-wrapper > app-widget-host {
    gap: 22px;
}

.account .panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 26px;
    box-shadow: var(--shadow-soft);
    flex: 1;
    max-width: 100%;
        margin-top: 22px;
}

.account .wrapper-panel > app-widget-host {
    gap: 22px
}

.account .panel-wrapper {
    flex: 1;
}

.mobile .account .panel {
    padding: 18px;
}

.panel-title {
    margin: 0 0 4px;
    font-size: 20px;
    letter-spacing: -.01em;
    font-weight: bold;
}

.panel-subtitle {
    margin: 0 0 20px;
    color: var(--ink-mute);
    font-size: 13px;
}

#root .account .field-label {
    font-size: 11px!important;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 10px;
}

.form-select-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.form-select-wrap input[type="radio"] {
    display: none;
}

#root .form-select-wrap label {
    cursor: pointer;
    text-align: left;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--surface-tint);
    border: 1px solid var(--line);
    box-shadow: none;
    transition: 0.15s;
    width: 100%;
    max-width: unset;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

#root .form-select-wrap input[type="radio"]:checked + label {
    background: rgb(255, 255, 255);
    border: 1px solid var(--sb-green);
    box-shadow: rgba(10, 124, 47, 0.08) 0px 0px 0px 4px;
}

#root .form-select-wrap label .title {
    font-weight: 700;
    font-size: 13.5px;
    flex: 1;
}

#root .form-select-wrap label .doc-required {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--sb-yellow-dark);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#root .form-select-wrap label .status {
    width: 100%;
    order: 3;
    font-size: 12px;
    color: var(--ink-mute);
    margin-top: 6px;
}
#root .form-select-wrap label .status.approved {
    color: var(--sb-green);
    font-weight: 600;
    display: inline-flex;
    gap: 5px;
    align-items: center;
}
#root .form-select-wrap label .status.approved::before {
    content:"";
    width:12px;
    height:12px;
    background-image:url(/v1.558/r/images/icons/account/tickgreen.svg);
    background-repeat:no-repeat;
}
#root .form-select-wrap label .status.pending {
    color: var(--sb-yellow-dark);
    font-weight: bold;
}

#root .file-field-upload .field-label {
    display: none;
}

.file-field-upload #drop_zone {
    border: 2px dashed var(--line-2);
    background: var(--surface-tint);
    border-radius: 14px;
    padding: 34px 18px;
    text-align: center;
    transition: 0.15s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.file-field-upload #drop_zone.input-active .field-errors {
    display: none
}

.file-field-upload #drop_zone .field-errors {
    font-size: 11px;
    color: var(--ink-faint);
    margin-top: 10px;
}

.file-field-upload #drop_zone .upload-image {
    width: 54px;
    height: 54px;
    margin: 0px auto 12px;
    border-radius: 14px;
    background: rgba(10, 124, 47, 0.1);
    color: var(--sb-green);
    display: grid;
    place-items: center;
    background-image: url(/v1.544/r/images/icons/account/upload.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.file-field-upload #drop_zone input[type="file"] {
    display: none;
}

.file-field-upload #drop_zone .instructions {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
}

.file-field-upload #drop_zone .instructions.hint {
    font-size: 12.5px;
    color: var(--ink-mute);
    margin-bottom: 14px;
    font-weight: unset;
}

#root label[for="document_upload"]::before {
    content: "";
    width: 14px;
    height: 14px;
    background-image: url(/v1.544/r/images/icons/account/boxplus.svg);
    background-repeat: no-repeat;
    background-position: center;
}

#root label[for="document_upload"], #root .submit-document button {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 14px 18px;
    border-radius: 12px;
    font: 700 14px / 1 'Manrope', sans-serif;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--sb-green);
    color: #fff;
}

#root .submit-document {
    margin-top: 10px;
}

#root .submit-document button {
    width: 100%;
}

#root .submit-document button:disabled {
    opacity: .4
}

.file-list .field-label {
    display: none
}

#file_list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#document_list_wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#document_list_wrapper .document-entry, #file_list .file-entry {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--surface-tint);
    border: 1px solid var(--line);
    border-radius: 12px;
}

#document_list_wrapper .document-entry .document-icon, #file_list .file-entry .file-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 46px;
    border-radius: 6px;
    background: rgb(255, 255, 255);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    color: var(--sb-green);
    background-image: url(/v1.544/r/images/icons/account/document.svg);
    background-repeat: no-repeat;
    background-position: center;
}

#document_list_wrapper .document-entry .document-info, #file_list .file-entry .file-info-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
}

#document_list_wrapper .document-entry .document-info .document-file-name, #file_list .file-entry .file-info-wrapper .file-name {
    font-weight: 600;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    order: -1
}

#document_list_wrapper .document-entry .document-info span:not(.document-file-name), #file_list .file-entry .file-info-wrapper span:not(.file-name) {
    font-size: 11.5px;
    color: var(--ink-mute);
    margin-top: 2px;
    margin-right: 5px;
}

#document_list_wrapper .document-entry .document-status {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
}

#document_list_wrapper .document-entry.pending .document-status {
    border: 1px solid var(--line);
    background: rgba(255, 200, 58, 0.16);
    border-color: rgba(255, 200, 58, 0.4);
    color: rgb(122, 85, 0);
}
#document_list_wrapper .document-entry.approved .document-status {
    background: rgba(34, 197, 94, 0.12);
    color: rgb(15, 122, 54);
    border: 1px solid rgba(34, 197, 94, 0.25);
}
#root .account .ui-widget {
    font-family: "Manrope"
}

#root .beto-history {
    font-family: "Manrope";
    display: flex;
    flex-direction: column;
}

.beto-history .history-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--line);
    border-bottom: 0px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 26px;
    padding-bottom: 0px;
    /* box-shadow: var(--shadow-soft); */
}

.beto-history .history-header .history-filter {
    flex: 1;
    margin-bottom: 18px;
    flex-direction: row;
    align-items: flex-start;
    padding-bottom: 0px;
}

.mobile .beto-history .history-header .history-filter {
    flex: unset
}

#root .beto-history .history-header > div label , #root .beto-statement .statement-header-wrapper > div label {
    display: none;
}

.history-filter p-dropdown {
    display: none;
}

.history-filter .history-status-tabs .window-tab {
    appearance: none;
    border: 1px solid var(--line);
    background: #fff;
    padding: 9px 14px;
    border-radius: 999px;
    font: 600 12.5px / 1 'Manrope';
    color: var(--ink-mute);
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto
}

.history-filter .history-status-tabs .window-tab.tab-selected {
    background: var(--sb-green);
    color: #fff;
    border-color: var(--sb-green);
}

.history-filter .history-status-tabs.window-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
}

.history-from, .history-to, .statement-from, .statement-to {
    height: unset;
    margin-bottom: 18px;
    align-items: flex-start;
    padding: 0px;
    /* flex:1; */
}

.mobile .history-from, .mobile .history-to, .mobile .statement-from, .mobile .statement-to {
    flex: 1
}

.mobile .history-from p-calendar, .mobile .history-to p-calendar, .mobile .statement-from p-calendar, .mobile .statement-to p-calendar {
    display: block;
    width: 100%;
}

.mobile .history-from p-calendar .ui-calendar, .mobile .history-to p-calendar .ui-calendar, .mobile .statement-from p-calendar .ui-calendar, .mobile .statement-to p-calendar .ui-calendar {
    display: block;
    width: 100%;
}

.history-from .ui-datepicker-trigger, .history-to .ui-datepicker-trigger, .statement-from .ui-datepicker-trigger, .statement-to .ui-datepicker-trigger {
    display: none
}

#root .history-from input, #root .history-to input, #root .statement-from input, #root .statement-to input {
    width: 100%;
    border-radius: 10px;
    border-color: var(--line-2);
    font: 600 13px / 1 'Space Grotesk';
    color: var(--ink);
    padding: 8px 12px;
    padding-left: 34px;
    max-width: unset;
}

#root .history-from input, #root .statement-from input {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right: 0px;
    background-image: url(/v1.555/r/images/icons/account/calendar_green.svg);
    background-repeat: no-repeat;
    background-position: 10px center;
}

#root .history-to input, #root .statement-to input {
    border-left: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-right: 1px solid var(--line-2);
    max-width: unset;
}

#root .history-to .ui-calendar::before, #root .statement-to .ui-calendar::before {
    content: "→";
    position: absolute;
    display: flex;
    width: 34px;
    align-items: center;
    height: 100%;
    justify-content: center;
}

.history-show, #root .account-history .statement-show {
    margin-bottom: 18px;
    display: flex!important;
    margin-left: 10px;
}

.mobile .history-show {
    width: 100%;
    margin-left:0px;
}

.show-results {
    appearance: none;
    border: 0;
    cursor: pointer;
    border-radius: 12px;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    background: var(--sb-green);
    color: #fff;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 10px 18px;
    font-size: 13px;
    line-height: 14px;
    font-family: "Manrope";
    margin-bottom: 0px;
}

.history-content-wrapper, .history-content, .history-content p-table, .history-content p-table .ui-table-responsive, .history-content p-table .ui-table-wrapper, .history-content p-table .ui-table-wrapper table {
    display: contents;
}

.beto-history tfoot {
    order: -1
}

.beto-history tfoot .history-bet-footer div {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
}

.beto-history tfoot .history-bet-footer div span:first-child {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0px;
    margin-bottom: 6px;
    width: 100%;
    order: -1;
    line-height: 1;
}

.beto-history tfoot .history-bet-footer div:before {
    content: "GHS";
    order: 1;
    font-size: 11px;
    color: var(--ink-faint);
    font-weight: 600;
    line-height: 1;
    margin-top: auto;
    margin-bottom: 2px;
    margin-right: 6px;
    font-family: 'Space Grotesk';
}

.beto-history tfoot .history-bet-footer div span:last-child {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -.01em;
    line-height: 1;
    display: flex;
    align-items: baseline;
    margin: 0px;
    gap: 6px;
    overflow: hidden;
    text-indent: -51px;
    order: 3;
    line-height: 1;
}

.beto-history tfoot .history-bet-footer div span.positive:last-child {
    color: var(--sb-green)
}

#root .beto-history tfoot .history-bet-footer-dates {
    display: none;
}

.beto-history tfoot .history-bet-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 22px;
}

.beto-history .history-content-wrapper tbody {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 0px;
    padding: 26px;
    padding-top: 0px;
    box-shadow: var(--shadow-soft);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    gap: 14px;
}

.mobile .beto-history .history-content-wrapper tbody {
    padding: 18px;
}

#root .beto-history .history-bet-wrapper {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    margin: 0px;
    display: flex;
    flex-direction: column;
}
#root .beto-history .history-bet-wrapper.has-bet-builder::after {
    display:none;
}
#root .beto-history .history-bet-wrapper > .history-bet-header {
    border: 0;
    cursor: pointer;
    width: 100%;
    display: grid;
    align-items: center;
    column-gap: 14px;
    padding: 14px 18px;
    background: var(--sb-green);
    color: #fff;
    text-align: left;
    font-family: 'Manrope', sans-serif;
    transition: background .15s;
    height: unset;
    grid-template-columns: 26px 1fr auto;
    position: relative;
    order: -1;
    grid-template-areas: "header-toggle header-stake header-status" "header-toggle header-time-id header-status"
}

#root .beto-history .history-bet-wrapper .history-bet-header .history-bet-toggle {
    grid-area: header-toggle;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .18);
    color: #fff;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background-image: url(/v1.09/r/images/site/icons/Plus.svg);
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
}

#root .beto-history .history-bet-wrapper .history-bet-header .history-bet-toggle::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    background-image: unset;
    top: 0px;
    z-index: 11;
}

#root .beto-history .history-bet-wrapper .history-bet-header .history-bet-info {
    grid-area: header-stake;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .02em;
    line-height: 1.1;
    padding-bottom: 0px;
}

#root .beto-history .history-bet-wrapper .history-bet-header .history-bet-date-time-id {
    grid-area: header-time-id;
    font-size: 11.5px;
    opacity: .88;
    margin-top: 3px;
    display: flex;
    column-gap: 8px;
    flex-wrap: wrap;
    padding-top: 0px;
}

#root .beto-history .history-bet-wrapper .history-bet-header .history-bet-status {
    grid-area: header-status;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex: 0 0 auto;
}

.history-bet-status.lost {
    background: #c4322e !important;
    color: #fff !important;
    border-width: 1px;
    border: 1px solid rgba(255, 255, 255, .3) !important;
}

#root .beto-history .history-bet-date-time-id .history-bet-id {
    order: -1
}

#root .beto-history .history-bet-date-time-id::before {
    content: "-"
}

#root .history-bet-wrapper .history-bet-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-tint);
    line-height: unset;
    font-size: unset;
    order: -1;
    width: 100%;
}

#root .history-bet-wrapper .history-bet-footer > div {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 200px;
}

#root .history-bet-wrapper .history-bet-footer > div span:first-child {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-left: unset;
    margin-bottom: 4px;
}

#root .history-bet-wrapper .history-bet-footer > div span:last-child {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    margin-left: unset;
}

#root .history-bet-wrapper.expanded > div {
    width: 100%;
}

#root .history-bet-wrapper:not(.expanded) .history-bet-content, #root .history-bet-wrapper:not(.expanded) .history-systems-wrapper, #root .history-bet-wrapper:not(.expanded) .history-actions-wrapper {
    display: none;
}

#root .history-bet-wrapper .history-bet-content {
    padding: 16px 18px;
}

#root .history-bet-wrapper .history-bet-content .history-bet-match-details {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.history-bet-match-wrapper .match-and-time .bet-match-tournament-info {
    padding-left:20px;
    background-image:url(/v1.560/r/images/icons/account/globe_dark.svg);
    background-repeat:no-repeat;
}
.mobile .history-bet-match-wrapper .match-and-time .bet-match-tournament-info {
     padding-left:0px;
    background-image:unset;
}
.history-bet-match-wrapper .match-and-time .bet-match-tournament-info .bet-match-category {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--ink);
    margin-bottom: 2px;
}
.mobile .history-bet-match-wrapper .match-and-time .bet-match-tournament-info .bet-match-category::before {
    content:"";
    width:14px;
    height:14px;
     background-image:url(/v1.560/r/images/icons/account/globe_dark.svg);
    background-repeat:no-repeat;
}
.history-bet-match-wrapper .match-and-time .bet-match-tournament-info .bet-match-tournament {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sb-green);
    margin-bottom: 6px;
}

.desktop .history-bet-match-wrapper .match-and-time .bet-match-tournament-info .bet-match-tournament {
    margin-left: 26px;
}

.history-bet-match-wrapper .match-and-time .history-bet-match-name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.desktop .history-bet-match-wrapper .match-and-time .history-bet-match-name {
    margin-left: 45px;
}

.history-bet-match-wrapper .match-and-time .history-bet-match-name::before {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background-repeat: no-repeat;
    background-position: center;
}

.won .history-bet-match-wrapper .match-and-time .history-bet-match-name::before {
    background-color: rgba(34, 197, 94, .15);
    color: #0f7a36;
    background-image: url(/v1.545/r/images/icons/account/tickgreen.svg);
}

.lost .history-bet-match-wrapper .match-and-time .history-bet-match-name::before {
    background-color: rgba(196, 50, 46, .12);
    color: #a02620;
    background-image:url(/v1.556/r/images/icons/account/close_red.svg);
}

.pending .history-bet-match-wrapper .match-and-time .history-bet-match-name::before {
    background-color: rgba(255, 200, 58, .18);
    color: #7a5500;
    background-image: url(/v1.556/r/images/icons/account/clock_orange.svg);
}

.history-bet-match-wrapper .match-and-time .match-competitors {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--sb-green);
}

.history-bet-match-wrapper .match-and-time .match-competitors .match-versus {
    color: var(--ink-faint);
    font-weight: 500;
    margin: 0 4px;
}

.history-bet-match-details .history-bet-match-time {
    font-size: 11.5px;
    color: var(--ink-mute);
}

.desktop .history-bet-match-details .history-bet-match-time {
    margin-left: 77px;
}

#root .history-bet-match-wrapper .match-date-code-wrapper {
    font-size: 11.5px;
    color: var(--ink-faint);
    margin-bottom: 0px;
    margin-top: 2px;
}

#root .desktop .history-bet-match-wrapper .match-date-code-wrapper {
    margin-left: 76px;
}

.history-bet-match-wrapper [class*="history-selection-info"] {
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.desktop .history-bet-match-wrapper [class*="history-selection-info"] {
    margin-left: 76px;
}

.history-bet-match-wrapper [class*="history-selection-info"] .selection-status {
    display: none;
}

#root .beto-history .history-bet-wrapper.expanded .history-systems-wrapper {
    margin: 16px 18px;
    margin-top: 0px;
    background: var(--surface-tint);
    border-radius: 10px;
    overflow: hidden;
    width: calc(100% - 36px);
    display: flex;
    flex-direction: column;
}

#root .beto-history .history-bet-wrapper .history-systems-wrapper .history-bet-header {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    background: rgba(8, 30, 14, .04);
    border-bottom: 1px solid var(--line);
    padding: 0;
}

#root .beto-history .history-bet-wrapper .history-systems-wrapper .history-system-wrapper {
    padding: 0px;
}

#root .beto-history .history-bet-wrapper .history-systems-wrapper .history-system-wrapper div {
    padding: 12px 14px;
    text-align: left;
    display: flex;
}

#root .mobile .beto-history .history-bet-wrapper .history-systems-wrapper .history-system-wrapper div {
    padding: 10px;
    font-size: 10.5px;
}

#root .beto-history .history-bet-wrapper .history-systems-wrapper .history-system-wrapper:not(.history-bet-header) .history-system-odds, #root .beto-history .history-bet-wrapper .history-systems-wrapper .history-system-wrapper:not(.history-bet-header) .history-system-stake {
    font-family: "Space Grotesk"
}

.selection-and-odds .history-bet-odds {
    font-family: 'Space Grotesk';
    font-weight: 700;
    color: var(--sb-green);
    font-size: 14px;
}

.mobile .selection-and-odds .history-bet-odds {
    margin-left: unset;
    width: 100%
}

.history-bet-match-wrapper .selection-and-odds .history-bet-selection {
    margin-right: auto;
    color: var(--sb-green);
    font-weight: 700;
}

#root .history-bet-wrapper div.history-actions-wrapper {
    display: flex;
    gap: 10px;
    /* margin-top: 14px; */
    flex-wrap: wrap;
    padding: 16px 18px;
    padding-top: 0px;
    justify-content: flex-start;
    height: unset;
}

.no-history-records {
    padding: 50px 24px;
    text-align: center;
    background: var(--surface-tint);
    border-radius: 14px;
    border: 1px dashed var(--line-2);
    font-size: 20px;
    font-weight: bold;
    display: flex;
    flex-direction: column
}

.no-history-records::before {
    width: 80px;
    height: 80px;
    margin: 0px auto 16px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10, 124, 47, 0.18), rgba(10, 124, 47, 0.04));
    color: var(--sb-green);
    display: grid;
    place-items: center;
    content: "";
    background-image: url(/v1.555/r/images/icons/account/facesmiley.svg),radial-gradient(circle, rgba(10, 124, 47, 0.18), rgba(10, 124, 47, 0.04));
    background-repeat: no-repeat;
    background-position: center;
}

.no-history-records::after {
    content: "Try a different filter or expand your date range.";
    margin: 0px;
    font-size: 13.5px;
    color: var(--ink-mute);
    font-weight: normal;
    margin-top: 4px;
}

#root .history-bet-wrapper div.history-actions-wrapper button, #root .history-bet-wrapper div.history-actions-wrapper button.cashout {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 14px 18px;
    border-radius: 12px;
    font: 700 14px / 1 'Manrope', sans-serif;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .15s;
    margin: 0!important;
    background: #fff;
    color: var(--ink-2);
    border: 1px solid var(--line-2);
    flex: 0 0 auto;
    position: unset;
    height: auto;
}

#root .history-bet-wrapper div.history-actions-wrapper button.history-bet-cashout {
    order: -1
}

#root .history-bet-wrapper .history-actions-wrapper button > div {
    padding: 0px;
}

.betbuilder-match .history-bet-match-wrapper .history-combine-info.all {
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.desktop .betbuilder-match .history-bet-match-wrapper .history-combine-info.all {
    margin-left: 76px;
}

.mobile .history-bet-match-wrapper {
    margin: 0;
}

.transaction-menu {
    background: var(--surface-tint);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 5px;
    margin-bottom: 18px;
}

.transaction-menu > app-widget-host {
    gap: 6px;
}

.transaction-menu-item {
    flex: 1;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--ink-mute);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

.transaction-menu-item > app-widget-host {
    gap: 7px;
}

#root.add-deposit-history .transaction-menu-item.deposit-item, #root:not(.add-withdraw-history) .transaction-menu-item.deposit-item, #root.add-withdraw-history .transaction-menu-item.withdraw-item {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 2px 8px -2px rgba(8, 30, 14, .1);
}

#root .account-history table:not(.ui-datepicker-calendar) th {
    text-align: left;
    padding: 12px 14px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    background: var(--surface-tint);
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
}

#root .account-history table:not(.ui-datepicker-calendar) th:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    border-left: 1px solid var(--line);
}

#root .account-history table:not(.ui-datepicker-calendar) th:last-child, #root .account-history table:not(.ui-datepicker-calendar) td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    border-right: 1px solid var(--line);
    text-align: right;
}

#root .account-history table:not(.ui-datepicker-calendar) td {
    padding: 14px 14px;
    border: 0;
    border-bottom: 1px dashed var(--line);
    font-size: 13px;
    color: var(--ink);
    font-family: "Space Grotesk";
    font-weight: 600;
    font-size: 12.5px;
}

#root .account-history .deposit-history td[data-column="Amount"] div {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 15px;
    color: var(--sb-green);
}

#root .account-history .deposit-history td[data-column="Amount"] div::before {
    content: "+";
}

#root .account-history .withdraw-history td[data-column="Amount"] div {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
}

#root .account-history .withdraw-history td[data-column="Amount"] div::before {
    content: "-";
}

#root .account-history td[data-column="Status"] div {
    display: inline-flex;
    margin-left: auto;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

#root .account-history .sts-completed td[data-column="Status"] div {
    background: rgba(10, 124, 47, .1);
    color: var(--sb-green);
    border: 1px solid rgba(10, 124, 47, .22);
}

#root .account-history table:not(.ui-datepicker-calendar) td > div {
    text-align: left;
    font-family: "Space Grotesk";
    font-weight: 600;
    font-size: 12px;
    color: var(--ink-mute);
}

#root .account-history table:not(.ui-datepicker-calendar) td:last-child div {
    text-align: right;
    max-width: unset;
}

#root .mobile .account-history td > div {
    margin: 0;
}

body .mobile .account .account-history .ui-table .ui-table-tbody>tr {
    border: 0px;
    display: block;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line);
    margin-bottom: 0px;
}

#root .mobile .account-history table:not(.ui-datepicker-calendar) td {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 0;
    border: 0;
}

#root .mobile .account-history table:not(.ui-datepicker-calendar) td::before {
    content: attr(data-column) " · ";
    color: var(--ink-faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-right: 6px;
}

#root .beto-statement .statement-header-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end
}

.balance-hero {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

.balance-hero > app-widget-host {
    gap: 22px;
}

.balance-hero .available-to-withdraw-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 6px;
}

.balance-hero .available-to-withdraw-value .beto-content-block {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 44px;
    color: var(--ink);
    letter-spacing: -.02em;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-indent: -92px;
    overflow: hidden;
}

.balance-hero .available-to-withdraw-value {
    align-items: flex-end;
}

.balance-hero .available-to-withdraw-value::before {
    content: "GHS";
    font-size: 18px;
    color: var(--ink-faint);
    font-weight: 600;
}

.balance-hero .available-to-withdraw {
    flex: 1;
}

.balance-hero .withdraw-info {
    color: var(--ink-mute);
    font-size: 12.5px;
    margin-top: 8px;
    display: inline
}

.balance-hero .withdraw-info > app-widget-host {
    display: inline
}

.balance-hero .withdraw-info > app-widget-host > *:not(.widget-content-placeholder) {
    display: inline-block;
    margin-right: 3px;
}

.balance-hero .withdraw-limits {
    display: flex;
    margin-top: 16px;
    flex-wrap: wrap;
}

.balance-hero .withdraw-limits > app-widget-host {
    gap: 14px;
}

.balance-hero .withdraw-limits-tuple {
    font-size: 12px;
    color: var(--ink-mute);
}

.balance-hero .withdraw-limits .value {
    color: var(--ink);
    font-family: 'Space Grotesk';
    font-weight: 600;
    margin-left: 4px
}

.withdrawal-tips {
    flex: 1;
    background: var(--surface-tint);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
}

.withdrawal-tips .withdrawal-tips-label {
    margin: 0 0 8px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 700;
}

.withdrawal-tips .withdrawal-tip {
    margin: 0;
    padding: 0;
    font-size: 12.5px;
    color: var(--ink-mute);
    line-height: 1.8;
    align-items: center;
}

.withdrawal-tips .withdrawal-tip > app-widget-host {
    gap: 8px;
}

.withdrawal-tips .withdrawal-tip .icon {
    width: 14px;
    height: 14px;
}

.withdrawal-tips .withdrawal-tip .icon img {
    width: 100%;
    height: auto
}

#paymentForm app-radio-field .buttons-holder {
    gap: 12px;
    display: flex;
    flex-direction: row
}

#root #paymentForm app-radio-field .buttons-holder label {
    position: relative;
    cursor: pointer;
    border-radius: 14px;
    padding: 16px 14px;
    background: var(--surface-tint);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .15s;
    flex: 1;
    max-width: unset;
    margin-bottom: 0;
    text-transform: unset;
}

#root #paymentForm app-radio-field .buttons-holder label::before {
    width: 64px;
    height: 42px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .04em;
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .2);
    background-size: contain;
}

#root #paymentForm app-radio-field .buttons-holder label::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--sb-green);
    color: #fff;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(.6);
    transition: all .2s;
}

#root #paymentForm app-radio-field .buttons-holder input:checked + label::after {
    opacity: 1;
    transform: scale(1);
    background-image: url(/v1.555/r/images/icons/account/tick_white.svg);
    background-repeat: no-repeat;
    background-position: center;
}

#root #paymentForm app-radio-field .buttons-holder input:checked + label {
    border-color: var(--sb-green);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(10, 124, 47, .08), var(--shadow-card);
}

.back-to-methods {
    align-items: center;
    color: var(--sb-green);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--line);
    cursor: pointer;
    margin-bottom: 18px;
    box-shadow: var(--shadow-soft);
    transition: all .15s;
    position: relative;
}

.back-to-methods > app-widget-host {
    gap: 6px;
}

.back-to-methods a {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
    font-size: 0px;
}

.order-summary .order-summary-field {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px dashed var(--line);
    color: var(--ink-mute);
    font-size: 13px;
}

.order-summary .order-summary-field .value {
    color: var(--ink);
    font-family: 'Space Grotesk';
    font-weight: 600;
    font-size: 14px;
}

.order-summary .total {
    margin-top: 8px;
    padding: 18px;
    background: linear-gradient(135deg, rgba(10, 124, 47, .06), rgba(255, 200, 58, .12));
    border: 1px solid rgba(10, 124, 47, .18);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order-summary .total .label {
    color: var(--ink-mute);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
}

.order-summary .total .value-container .currency {
    color: var(--ink-faint);
    font-size: 14px;
    font-weight: 600;
    margin-right: 6px;
}

.order-summary .total #total_order_value {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -.01em;
}

.stat-container {
    margin-bottom: 22px;
}

.stat-container > app-widget-host {
    gap: 14px;
}

.stat-container .stat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
    flex: 1;
}

.mobile .stat-container .stat {
    flex: unset;
    width: 100%;
}

.stat-container .stat.highlight {
    background: radial-gradient(420px 200px at 100% 0%, rgba(255, 200, 58, .18), transparent 60%), linear-gradient(135deg, var(--sb-green-dark), var(--sb-green-deeper));
    border-color: rgba(255, 200, 58, .2);
    color: #fff;
}

.stat-container .stat .label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 8px;
}

.stat-container .stat.highlight .label, .stat-container .stat.highlight .stat-subtitle, .stat-container .stat.highlight .value::before {
    color: rgba(255, 255, 255, .7);
}

.stat-container .stat .value {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -.01em;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.stat-container .stat-subtitle {
    margin-top: 6px;
    font-size: 12px;
    color: var(--ink-mute);
}

.stat-container .stat .value .beto-content-block {
    overflow: hidden;
    text-indent: -64px;
}

.stat-container .stat .value::before {
    content: "GHS";
    font-size: 14px;
    color: var(--ink-faint);
    font-weight: 600;
}

.pending-withdraw-timeline {
    width: 100%;
}

.pending-withdraw-timeline > div {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.panel-head .panel-title {
    flex: 1;
}

.panel-head .call-button {
    appearance: none;
    border: 1px solid var(--sb-green);
    background: var(--sb-green);
    color: #fff;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 10px;
    font: 700 12.5px / 1 'Manrope';
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all .15s;
    position:relative;
}
.panel-head .call-button a {
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
}
.panel-head .call-button > app-widget-host {
    gap: 7px;
}

.panel-head .panel-subtitle {
    width: 100%;
}

.timeline-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: var(--shadow-soft);
    transition: border-color .15s;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.timeline-card .timeline-card-head .icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
}

.timeline-card .icon.mtndirect {
    background-color: rgba(255, 200, 58, .18);
    color: #a07000;
    background-image: url(/v1.555/r/images/icons/account/phone_dark_orange.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.timeline-card .timeline-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.timeline-card .timeline-card-head .amount {
    text-align: right;
    flex: 0 0 auto;
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 22px;
    color: var(--ink);
    letter-spacing: -.01em;
}

.timeline-card .withdraw-status {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 200, 58, .16);
    color: #7a5500;
    border: 1px solid rgba(255, 200, 58, .4);
}

.timeline-card .timeline-card-head .amount .currency {
    font-size: 10px;
    color: var(--ink-faint);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 2px;
}

.timeline-card .pending-withdrawal-info {
    flex: 1;
}

.timeline-card .pending-withdrawal-info .withdraw-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.timeline-card .pending-withdrawal-info .withdrawal-method {
    font-size: 12.5px;
    color: var(--ink-mute);
}

.timeline-card .amount {
    display: flex;
    flex-direction: column;
}

.timeline-card .withdraw-timeline {
    display: flex;
    align-items: center;
    padding: 14px 6px;
    background: var(--surface-tint);
    border-radius: 10px;
    margin-bottom: 14px;
}

.timeline-card .request-timeline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-mute);
}

.timeline-card .request-timeline .icon {
    background-image: url(/v1.555/r/images/icons/account/clock_faint.svg);
    background-size: 13px;
    background-repeat: no-repeat;
    width: 13px;
    height: 13px;
    display: block;
}

.timeline-card .withdraw-timeline .step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
}

.timeline-card .withdraw-timeline .step-label {
    font-size: 10.5px;
    color: var(--ink-mute);
    font-weight: 600;
    letter-spacing: .04em;
}

.withdraw-timeline .step .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--line-2);
    position: relative;
    z-index: 1;
}

.withdraw-timeline .step.done .dot {
    background: var(--sb-green);
    border-color: var(--sb-green);
}

.withdraw-timeline .step.active .dot {
    background: var(--sb-yellow);
    border-color: var(--sb-yellow-dark);
    box-shadow: 0 0 0 5px rgba(255, 200, 58, .2);
}

.withdraw-timeline .step + .step::before {
    content: "";
    position: absolute;
    left: -50%;
    right: 50%;
    top: 7px;
    height: 2px;
    background: var(--line-2);
}

.step.done + .step::before, .step.done::before {
    background: var(--sb-green);
}

.timeline-card .withdrawal-id {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
}

.info-panel {
    margin-top: 22px;
    display: flex;
    background: var(--surface-tint);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 20px;
    width: 100%;
}

.info-panel .icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 200, 58, 0.18);
    color: var(--sb-yellow-dark);
    display: grid;
    place-items: center;
}

.info-panel > app-widget-host {
    gap: 14px;
}

.info-panel .info-panel-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(10, 124, 47, .08);
    color: var(--sb-green);
    display: grid;
    place-items: center;
}

.info-panel .info-content {
    font-size: 12.5px;
    color: var(--ink-mute);
    line-height: 1.55;
}

.info-panel .info-content .info.bold {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 3px;
}

.info-panel .info-content .info .bold {
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 3px;
    margin-right:3px;
}

#root .info > app-widget-host {
    display: inline
}

#root .info > app-widget-host app-content-block {
    display: inline-block
}

.form-wrapper .beto-api-form, .form-wrapper .beto-api-form form {
    display: contents;
}

#root .form-wrapper.voucher label {
    display: none;
}

.form-wrapper.voucher .beto-api-form app-text-field .form-element-wrapper {
    background: var(--surface-tint);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    font: 700 24px / 1 'Space Grotesk', sans-serif;
    color: var(--ink);
    letter-spacing: .2em;
    transition: all .15s;
    flex-direction: row;
}

.form-wrapper.voucher .beto-api-form app-text-field .form-element-wrapper::before {
    content: "";
    width: 22px;
    height: 22px;
    background-image: url(/v1.555/r/images/icons/account/voucher_dark.svg)
}

.form-wrapper.voucher .beto-api-form app-text-field .form-element-wrapper input {
    appearance: none;
    border: 0;
    outline: 0;
    background: transparent;
    flex: 1;
    color: var(--ink);
    font: inherit;
    letter-spacing: .22em;
    text-transform: uppercase;
    min-width: 0;
    max-width: unset;
}

.form-wrapper.voucher .beto-api-form .api-form-wrapper {
    width: 100%;
    margin-bottom: 22px;
}

.form-wrapper.voucher .beto-api-form ui-button {
    display: flex;
    flex: 1;
    order:4;
}
.form-wrapper.voucher .clear-button {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 14px 18px;
    border-radius: 12px;
    font: 700 14px / 1 'Manrope', sans-serif;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    color: var(--ink-2);
    border: 1px solid var(--line-2);
    margin-right:10px;
}
.form-wrapper.voucher .beto-api-form .form-row {
    padding-bottom: 0px;
}

.form-wrapper.voucher .beto-api-form button {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 14px 18px;
    border-radius: 12px;
    font: 700 14px / 1 'Manrope', sans-serif;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .15s;
    flex: 1;
    background: var(--sb-yellow);
    color: var(--sb-green-deeper);
    box-shadow: 0 10px 24px -8px rgba(255, 200, 58, .5);
    height:unset;
}

.form-wrapper.voucher .beto-api-form button::before {
    content: "";
    width: 14px;
    height: 14px;
    background-image: url(/v1.555/r/images/icons/account/gift_dark.svg);
    background-repeat: no-repeat;
    background-size: 14px;
}

.promo-list > app-widget-host {
    gap: 8px;
}

.promo-list .promo {
    padding: 14px 16px;
    background: var(--surface-tint);
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
}

.promo-list .promo > app-widget-host {
    gap: 14px;
}

.promo-list .promo .promo-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(255, 200, 58, 0.18);
    color: var(--sb-yellow-dark);
    display: grid;
    place-items: center;
}

.promo .promo-top {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.promo .promo-top > app-widget-host {
    gap: 8px;
}

.promo .promo-tag {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--sb-green);
    background: rgba(10, 124, 47, 0.08);
    padding: 3px 8px;
    border-radius: 4px;
}

.promo .promo-title {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 14px;
}

.promo .promo-sub {
    font-size: 12.5px;
    color: var(--ink-mute);
    line-height: 1.5;
}

.promo .promo-exp {
    font-size: 11.5px;
    color: var(--ink-faint);
    margin-top: 6px;
    display: flex;
    align-items: center;
}

.promo .promo-exp > app-widget-host {
    gap: 6px;
}

.account .panel.no-padding {
    padding: 0px;
    overflow: hidden;
}

.responsible-gaming-tabs {
    border-bottom: 1px solid var(--line);
}

.responsible-gaming-tabs .responsible-gaming-tab {
    flex: 1;
}

.responsible-gaming-tabs .responsible-gaming-tab > app-widget-host {
    appearance: none;
    border-width: 0px 0px 2px;
    border-style: none none solid;
    border-color: currentcolor currentcolor transparent;
    border-image: initial;
    background: rgb(255, 255, 255);
    color: var(--sb-green);
    padding: 18px 16px;
    cursor: pointer;
    font: 700 13px / 1 Manrope;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.15s;
}

#root .responsible-gaming-panel {
    display: none;
}

#root:not(.show-access-limits):not(.show-timeout):not(.show-self-exclusion) .responsible-gaming-panel.amount-limits, #root.show-amount-limits .responsible-gaming-panel.amount-limits, #root.show-access-limits .responsible-gaming-panel.access-limits, #root.show-timeout .responsible-gaming-panel.timeout, #root.show-self-exclusion .responsible-gaming-panel.self-exclusion {
    display: flex;
}

#root:not(.show-access-limits):not(.show-timeout):not(.show-self-exclusion) .responsible-gaming-tab.amount-limits, #root.show-amount-limits .responsible-gaming-tab.amount-limits, #root.show-access-limits .responsible-gaming-tab.access-limits, #root.show-timeout .responsible-gaming-tab.time-out, #root.show-self-exclusion .responsible-gaming-tab.self-exclusion {
    border-top: 0px;
    border-right: 0px;
    border-bottom: 2px solid var(--sb-green);
    border-left: 0px;
    border-image: initial;
}

.responsible-gaming-subtabs {
    padding: 24px;
    padding-bottom: 18px;
}

.responsible-gaming-subtabs > app-widget-host {
    gap: 8px;
}

.responsible-gaming-subtabs .responsible-gaming-subtab > div {
    appearance: none;
    cursor: pointer;
    background: rgb(255, 255, 255);
    color: var(--ink-mute);
    border: 1px solid var(--line);
    padding: 9px 14px;
    border-radius: 999px;
    font: 600 12.5px / 1 Manrope;
}

.amount-limits .responsible-gaming-item {
    display: none;
    flex-direction: column;
    /* padding:24px; */
    padding-top: 0px;
}

#root:not(.show-access-limits):not(.show-timeout):not(.show-self-exclusion):not(.show-wager-limits):not(.show-loss-limits) .responsible-gaming-subtab.deposit-limits > div, #root:not(.show-access-limits):not(.show-timeout):not(.show-self-exclusion).show-wager-limits .responsible-gaming-subtab.wager-limits > div, #root:not(.show-access-limits):not(.show-timeout):not(.show-self-exclusion).show-loss-limits .responsible-gaming-subtab.loss-limits > div {
    background: var(--sb-green);
    color: rgb(255, 255, 255);
    border: 1px solid var(--sb-green);
}

#root:not(.show-access-limits):not(.show-timeout):not(.show-self-exclusion):not(.show-wager-limits):not(.show-loss-limits) .amount-limits .responsible-gaming-item.deposit-limits, #root:not(.show-access-limits):not(.show-timeout):not(.show-self-exclusion).show-deposit-limits .amount-limits .responsible-gaming-item.deposit-limits, #root:not(.show-access-limits):not(.show-timeout):not(.show-self-exclusion).show-wager-limits .amount-limits .responsible-gaming-item.wager-limits, #root:not(.show-access-limits):not(.show-timeout):not(.show-self-exclusion).show-loss-limits .amount-limits .responsible-gaming-item.loss-limits {
    display: flex;
}

.amount-limits .responsible-gaming-item h3 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    margin: 0px 24px;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 18px;
}

app-amount-limit, .responsible-gaming-item > div > app-label-value, .responsible-gaming-item app-label-value[myinputtype="Password"] {
    margin: 0 24px;
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 14px 16px;
    background: var(--surface-tint);
    border: 1px solid var(--line);
    border-radius: 12px;
}

app-amount-limit {
    margin-bottom: 14px;
}

.amount-limit-wrapper {
    width: 100%;
}

app-label-value {
    display: flex;
    align-items: center;
}

#root .label-value-container {
    height: unset;
    align-items: center;
}

app-label-value .element.label {
    text-align: left;
    font-weight: 600;
    font-size: 14px;
}

app-label-value .element.value {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--surface-tint);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 4px 14px;
    transition: all .15s;
    background: rgb(255, 255, 255);
}

app-amount-limit .element.value::before {
    content: "GHS";
    color: var(--ink-faint);
    font-weight: 700;
    font-size: 13px;
    padding-right: 12px;
    border-right: 1px solid var(--line);
}

app-label-value .element.value input {
    flex: 1;
    appearance: none;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-size: 22px;
    font-family: 'Space Grotesk';
    font-weight: 600;
    font-size: 16px;
    padding: 12px 8px;
    min-width: 0;
}

.action-buttons-container {
    border-top: 1px solid var(--line);
    padding: 16px 24px;
    background: var(--surface-tint);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 24px;
}

.action-buttons-container button {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 14px 18px;
    border-radius: 12px;
    font: 700 14px / 1 'Manrope', sans-serif;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .15s;
    background: #fff;
    color: var(--ink-2);
    border: 1px solid var(--line-2);
}

.action-buttons-container button.btn-edit-values, .action-buttons-container button.btn-save-acccess {
    background: var(--sb-green);
    color: #fff;
}

.access-limits-tabs-header, .access-limits-tabs-rows, .access-limits-tabs-footer {
    display: flex;
    /* gap: 18px; */
    align-items: center;
    padding: 14px 16px;
    background: var(--surface-tint);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin: 0 24px;
}

app-access-limits {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

app-access-limits h3 {
    display: none;
}

app-access-limits .day-tab-row, app-access-limits .day-tab-header, app-access-limits .day-tab-footer, app-access-limits .hours-tab-header:last-child {
    text-align: center;
    justify-content: center;
}

.responsible-gaming-panel .panel-title, .responsible-gaming-panel .panel-subtitle {
    margin: 0 24px;
}

.responsible-gaming-panel .panel-title {
    margin-top: 24px;
    ; margin-bottom: 6px;
}

.responsible-gaming-panel .panel-subtitle {
    margin-bottom: 18px;
}

.timeout .time-out-title, .self-exclusion-title {
    display: none;
}

.time-out-content, .temporary-suspension-wrapper {
    padding-bottom: 24px;
}

.input-type-buttons .element.label {
    display: none
}

.input-type-buttons app-set-value {
    width: 100%;
    margin: 0px 24px;
    margin-bottom: 18px;
}

.input-type-buttons .element.value {
    gap: 10px;
    width: 100%;
    border: 0;
    padding: 0px;
    flex-wrap: wrap;
}

.input-type-buttons .element.value button {
    appearance: none;
    cursor: pointer;
    padding: 16px 14px;
    border-radius: 12px;
    background: rgb(255, 255, 255);
    border: 1px solid var(--line);
    font: 600 14px / 1 Manrope;
    color: var(--ink);
    flex: 1;
}
.input-type-buttons .element.value button.button-selected {
    background: rgb(255, 255, 255);
    border: 1px solid rgb(196, 50, 46);
    color: rgb(196, 50, 46);
}
.input-type-buttons .element.value button:disabled {
    opacity: 0.7;
}

.btn-account-timeout, .btn-account-temporary-suspension {
    appearance: none;
    cursor: pointer;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgb(196, 50, 46);
    color: rgb(255, 255, 255);
    border: 0px;
    font: 700 14px / 1 Manrope;
    display: block;
    width: calc(100% - 48px);
    margin: 18px 24px;
    margin-bottom: 0px
}

.info-box {
    padding: 18px 20px;
    background: rgb(254, 244, 243);
    border: 1px solid rgb(251, 206, 203);
    border-radius: 14px;
    margin: 24px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
}

.info-box > app-widget-host {
    gap: 14px;
}

.info-box .icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgb(196, 50, 46);
    color: rgb(255, 255, 255);
    display: grid;
    place-items: center;
}

.info-box .info-box-content .info-box-title {
    display: block;
    font-size: 14px;
    color: rgb(111, 24, 22);
    margin-bottom: 3px;
    font-weight: bold;
}

.info-box .info-box-content .info-box-caption {
    font-size: 12.5px;
    color: rgb(111, 24, 22);
    line-height: 1.5;
}

.custom-profile-form input, .custom-profile-form select {
    background: var(--surface-tint);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 12px 14px;
    transition: all .15s;
    width: 100%;
    background: transparent;
    width: 100%;
    color: var(--ink);
    font-size: 15px;
    font-family: 'Space Grotesk';
    font-weight: 600;
}

#root .account .custom-profile-form .section-label {
    margin: 0 0 4px;
    font-size: 20px;
    letter-spacing: -.01em;
    text-transform: unset;
    font-weight: bold;
    width: 100%;
}

.custom-profile-form .section-caption {
    margin: 0 0 20px;
    color: var(--ink-mute);
    font-size: 13px;
    width: 100%
}

#root .account .custom-profile-form label {
    font-size: 11px!important;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 10px;
    display: flex;
    gap: 8px;
}

#root .account .custom-profile-form label .locked {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-faint);
    background: var(--surface-tint);
    border: 1px solid var(--line);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.04em;
}

#root .account .custom-profile-form .field-wrap {
    display: flex;
    width: 100%;
    gap: 10px;
}

#root .account .custom-profile-form .field-wrap .form-select-wrap {
    display: flex;
    width: 100%;
}

#root .account .custom-profile-form .field-wrap .locked {
    display: none;
}

#root .account .custom-profile-form hr {
    display: none;
}

#root .account .custom-profile-form form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#root .account .custom-profile-form form .form-section {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 14px;
}

#root .account .custom-profile-form .form-section > [class*="field-"] {
    width: 100%;
}

#root .desktop .account .custom-profile-form .form-section > [class*="field-"]:not(.field-telephone):not(.field-dateOfBirth) {
    width: calc(50% - 7px);
}

#root .account .custom-profile-form .form-section > .field-dateOfBirth, #root .account .custom-profile-form .form-section > .field-telephone {
    width: 100%;
}

#root .account .custom-profile-form .form-section > .field-telephone .field-wrap {
    gap: 0px;
}

#root .account .custom-profile-form .form-section > .field-telephone .field-wrap select {
    border-right: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    /* max-width: 69px; */
    appearance: none;
    width: auto;
    text-align:right;
    background-image: url(/assets/themes/betomall/images/icons/flags/ghana.svg);
    background-size: 22px auto;
    background-repeat: no-repeat;
    background-position: 12px center;
    color: var(--ink-faint);
    font-weight: 600;
    font-size: 13px;
    max-width:90px
}

#root .account .custom-profile-form .form-section > .field-telephone .field-wrap input {
    border-left: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

#root .account .custom-profile-form .form-section > .field-telephone .field-wrap input {
    padding-left: 0;
}

.row-avatar.avatar > div {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.row-avatar.avatar .avatar-bubble {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sb-green-dark), var(--sb-green-deeper));
    color: rgb(255, 255, 255);
    display: grid;
    place-items: center;
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.02em;
    display: flex;
    justify-content: center;
}

.row-avatar.avatar .full-name {
    font-size: 16px;
    font-weight: 700;
}

#root .profile-info {
    max-width: unset;
    margin: 0;
}

.profile-info > app-widget-host {
    gap: 8px;
}

.profile-info-row {
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
    border-bottom: 1px dashed var(--line);
}

.profile-info-row .label + .value {
    margin-left: auto;
}

.profile-info-row .label {
    font-size: 12px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.profile-info-row .value {
    font-family: "Space Grotesk";
    font-weight: 600;
    font-size: 13px;
    color: var(--ink);
}

.custom-change-password form .password-wrap {
    background: var(--surface-tint);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 12px 14px;
    transition: all .15s;
    display: flex;
}
.custom-change-password  .error-container {
        margin-top: 8px;
    color: var(--sb-red);
    font-size: 12px;
    font-weight: 500;
    
}
.custom-change-password  .field-submit .error-container.submit-success,
#root .account .custom-profile-form .error-container.submit-success{
    width:100%;
    margin-top: 16px;
    padding: 12px 14px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 10px;
    color: rgb(15, 122, 54);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.custom-change-password  .field-submit .error-container.submit-success::before,
#root .account .custom-profile-form .error-container.submit-success::before{
    content:"";
    width:16px;
    height:16px;
    background-image:url(/v1.558/r/images/icons/account/tickgreen.svg);
    background-repeat:no-repeat;
    background-size:16px;
}
.custom-change-password form .password-wrap input {
    appearance: none;
    border: 0;
    outline: 0;
    background: transparent;
    width: 100%;
    color: var(--ink);
    font-size: 15px;
    font-family: 'Space Grotesk';
    font-weight: 600;
    padding: 4px 0 2px;
}
.custom-change-password form .password-wrap .toggle-visibility {
    background-color:transparent;
    width:30px;
    height:30px;
    font-size:0px;
    background-image:url(/v1.556/r/images/icons/account/show_password.svg);
    background-position:center;
    background-repeat:no-repeat;
}
.custom-change-password form .password-wrap .toggle-visibility.password-visible {
     background-image:url(/v1.556/r/images/icons/account/hide_password.svg);
}
#root .custom-change-password form label {
    font-size: 11px!important;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 10px;
}

#root .custom-change-password form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rules-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rules-list li {
    display: flex;
    align-items: center;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--ink-mute);
}

.rules-list li .rule-active-indicator {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-tint);
    color: var(--ink-faint);
    border: 1px solid var(--line-2);
    transition: 0.2s;
}

.rules-list li:not(.active) .rule-active-indicator::before {
    content: "";
    width: 4px;
    height: 4px;
    display: block;
    background-color: var(--ink-faint);
    border-radius: 50%;
}

.info-panel .info:not(.info-w-divider) {
    margin-bottom: 8px;
}

.info-panel .info.info-w-divider {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    color: var(--ink-faint);
}

.custom-change-password button[type="submit"] {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 14px 18px;
    border-radius: 12px;
    font: 700 14px / 1 'Manrope', sans-serif;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .15s;
    width: 100%;
    flex: 1;
    background: var(--sb-green);
    color: #fff;
}
.custom-change-password .field-submit {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:10px;
}
.custom-change-password .field-submit button[type="reset"] {
        appearance: none;
    border: 0;
    cursor: pointer;
    padding: 14px 18px;
    border-radius: 12px;
    font: 700 14px / 1 'Manrope', sans-serif;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
        background: #fff;
    color: var(--ink-2);
    border: 1px solid var(--line-2);
    gap: 10px;
}
.rule-progress-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 10px;
}

.rule-progress-container .rule-progress-bar-container {
    width: 100%;
    height: 5px;
    order: 3;
    position: relative;
    margin-top: 6px;
    background: var(--surface-tint);
}

.rule-progress-container .rule-progress-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-faint);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rule-progress-container .rule-progress-bar-container .rule-progress-bar {
    position: absolute;
    width: 0%;
    height: 100%;
    background: rgb(196, 50, 46);
}

.rule-progress-container.medium .rule-progress-bar-container .rule-progress-bar {
    background: rgb(224, 168, 0);
}

.rule-progress-container.strong .rule-progress-bar-container .rule-progress-bar {
    background: var(--sb-green);
}

.rule-progress-container .strength-indicator {
    font-size: 12px;
    font-weight: 700;
    color: rgb(196, 50, 46);
    margin-left: auto
}

.rule-progress-container.medium .strength-indicator {
    color: rgb(224, 168, 0);
}

.rule-progress-container.strong .strength-indicator {
    color: var(--sb-green)
}

.rule-item.active .rule-active-indicator {
    background-color: var(--sb-green);
    background-image:url(/v1.556/r/images/icons/account/tick_white.svg);
    background-repeat:no-repeat;
    background-position:center;
    background-size:12px;
}

.content-accordion-title {
    padding: 14px 0px;
}

.content-accordion-title .content-accordion-text {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}
.content-accordion-title .content-accordion-icon {
    margin-left:auto
}
.content-accordion-section {
    margin-top: 10px;
    font-size: 13px;
    color: var(--ink-mute);
    line-height: 1.6;
}

.payment-form .fld-code app-text-field .form-row .form-element-wrapper {
    display: none;
}

.dummy-field {
    width: 100%;
}

.dummy-field input {
    appearance: none;
    border: 0;
    outline: 0;
    background: transparent;
    flex: 1;
    color: var(--ink);
    font: inherit;
    letter-spacing: .22em;
    text-transform: uppercase;
    min-width: 0;
}

.dummy-field .input-wrapper {
    background: var(--surface-tint);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    font: 700 24px / 1 'Space Grotesk', sans-serif;
    color: var(--ink);
    letter-spacing: .2em;
    transition: all .15s;
}

.dummy-field .blocks-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 11.5px;
    color: var(--ink-faint);
}

.dummy-field .blocks-container .blocks {
    flex: 1 1 0%;
    display: flex;
    gap: 4px;
}

.dummy-field .blocks-container .blocks .block {
    height: 3px;
    flex: 1 1 0%;
    border-radius: 2px;
    background: rgba(8, 30, 14, 0.08);
}

.dummy-field .blocks-container .blocks .block.active {
    background: var(--sb-green);
}

.step-list {
    width: 100%;
}

.step-list .step {
    align-items: center;
    padding: 14px 0px;
    border-bottom: 1px dashed var(--line);
}

.step-list .step > app-widget-host {
    gap: 14px;
}

.step-list .step .step-number {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(10, 124, 47, 0.1);
    color: var(--sb-green);
    display: grid;
    place-items: center;
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 13px;
}

.step-list .step-title {
    font-weight: 600;
    font-size: 13.5px;
}

.step-list .step-description {
    font-size: 12.5px;
    color: var(--ink-mute);
    margin-top: 2px;
    line-height: 1.5;
}

.step-list .step.info-panel {
    margin-top: 0px;
    padding: 14px;
    border-bottom: 1px solid var(--line);
}

.step-list > app-widget-host {
    gap: 14px;
}

.list-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 10px;
    margin-top: 22px;
}

.card-preview {
    border-radius: 18px;
    padding: 22px;
    aspect-ratio: 1.586 / 1;
    background: radial-gradient(800px 300px at 0 0, rgba(255,255,255,.1), transparent), linear-gradient(135deg, var(--sb-green-dark), #061a0e 80%);
    border: 1px solid rgba(255,200,58,.18);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}

.card-preview::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,200,58,.2), transparent 70%);
}

.card-preview .top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.card-preview .chip-sq {
    width: 40px;
    height: 30px;
    border-radius: 6px;
    background: linear-gradient(135deg, #f0c656, #b1832a);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
    position: relative;
}

.card-preview .chip-sq::before, .card-preview .chip-sq::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    height: 1px;
    background: rgba(0,0,0,.2);
}

.card-preview .chip-sq::before {
    top: 10px
}

.card-preview .chip-sq::after {
    bottom: 10px
}

.card-preview .num {
    font: 600 18px/1.2 'Space Grotesk';
    letter-spacing: .15em;
    margin: 12px 0 4px;
}

.card-preview .row {
    display: flex;
    gap: 18px;
    align-items: flex-end;
    justify-content: space-between
}

.card-preview .row .col .ttl {
    font-size: 9px;
    opacity: .6;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 3px;
    font-weight: 600
}

.card-preview .row .col .val {
    font: 600 12px/1 'Space Grotesk';
    letter-spacing: .06em
}

.card-preview .brand-wm {
    font-family: 'Space Grotesk';
    font-weight: 700;
    letter-spacing: .04em;
    font-size: 14px
}

.card-preview .brand-wm .y {
    color: var(--sb-yellow)
}

.note {
    align-items: center;
    gap: 8px;
    color: var(--ink-faint);
    font-size: 11.5px;
    margin-top: 14px;
}

.note > app-widget-host {
    gap: 8px;
}

#root .account-nav-menu {
    position: sticky;
    top: 10px;
    right: 16px;
    z-index: 5;
    background: rgba(7, 26, 14, .9);
    color: #fff;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 11.5px;
    letter-spacing: .04em;
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .3);
    display: flex;
    gap: 4px;
    align-items: center;
    backdrop-filter: blur(8px);
    width: auto;
    margin-left: auto;
}

#root .account-nav-menu ul.menu li {
    height: unset;
}

#root .account-nav-menu ul.menu li a {
    appearance: none;
    border: 0;
    background: transparent;
    color: #fff;
    opacity: .7;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: .02em;
    height: unset;
}

#root .account-nav-menu ul.menu li a.active {
    opacity: 1;
    background: rgba(255, 200, 58, .9);
    color: var(--sb-green-deeper);
}

#root .account-nav-menu ul.menu {
    width: auto;
    padding: 0px;
}

.account-nav-menu li {
    display: flex;
}

.account-nav-menu li:not(:last-child)::after {
    content: ".";
    margin: 0 4px;
}

.promo-container {
    margin-top: 22px;
    border-radius: 16px;
    padding: 18px 22px;
    background: radial-gradient(400px 200px at 100% 50%, rgba(255, 200, 58, .25), transparent 60%), linear-gradient(120deg, var(--sb-green-deeper), var(--sb-green-dark));
    color: #fff;
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

.promo-container > app-widget-host {
    gap: 16px
}

.promo-container .icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex: 0 0 auto;
    background: var(--sb-yellow);
    color: var(--sb-green-deeper);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px -8px rgba(255, 200, 58, .6);
}

.promo-container .promo-title {
    font-size: 14.5px;
    font-weight: bold;
    display: inline-block
}
.promo-container .promo-title *{
    display:inline
}
.promo-container .promo-title data-view {
    margin-right: 5px;
}

.promo-container .promo-desc {
    color: rgba(255, 255, 255, .78);
    font-size: 12.5px;
    margin-top: 2px;
}

.promo-container .promo-link {
    margin-left: auto;
    background: var(--sb-yellow);
    color: var(--sb-green-deeper);
    border: 0;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    box-shadow: 0 8px 18px -6px rgba(255, 200, 58, .5);
}
.account span.required {
        color: var( --sb-red)
}