/* Semasir SMS Portal design system. Generated from assets/src/portal-ui.css by tools/build-ui.js. Do not edit by hand. */
@font-face{
font-family:"BX Public Sans";
src:url("fonts/public-sans.woff") format("woff");
font-weight:100 900;
font-style:normal;
font-display:swap
}
@font-face{
font-family:"BX Bricolage";
src:url("fonts/bricolage-grotesque.woff") format("woff");
font-weight:500 800;
font-style:normal;
font-display:swap
}
@keyframes bx-shimmer{
0%{
background-position:-320px 0
}
100%{
background-position:320px 0
}
}
@keyframes bx-spin{
to{
transform:rotate(360deg)
}
}
@keyframes bx-rise{
from{
opacity:0;
transform:translateY(8px)
}
to{
opacity:1;
transform:none
}
}
@keyframes bx-sheet{
from{
transform:translateX(-100%)
}
to{
transform:none
}
}
@layer bx-util,bx-comp,bx-base,bx-reset;
@layer bx-base{
#bsms-app.bx-app,.bx{
--bx-brand: var(--bsms-primary,#0a7a3c)!important;
--bx-brand-ink: color-mix(in oklab,var(--bx-brand) 78%,#000)!important;
--bx-brand-hover: color-mix(in oklab,var(--bx-brand) 86%,#000)!important;
--bx-brand-wash: color-mix(in oklab,var(--bx-brand) 9%,#fff)!important;
--bx-brand-line: color-mix(in oklab,var(--bx-brand) 30%,#fff)!important;
--bx-deep: color-mix(in oklab,var(--bx-brand) 26%,#0c1512)!important;
--bx-deep-2: color-mix(in oklab,var(--bx-brand) 34%,#101c18)!important;
--bx-on-deep: #f4f8f6!important;
--bx-on-deep-muted: color-mix(in oklab,#f4f8f6 66%,var(--bx-deep))!important;
--bx-ink: #17201c!important;
--bx-ink-2: #3c4943!important;
--bx-muted: #5a6962!important;
--bx-canvas: #f2f5f3!important;
--bx-surface: #ffffff!important;
--bx-sunken: #f7f9f8!important;
--bx-line: #dde4e0!important;
--bx-line-strong: #c3cec8!important;
--bx-good: #13795b!important;
--bx-good-wash: #e5f3ec!important;
--bx-bad: #b42318!important;
--bx-bad-wash: #fcebe9!important;
--bx-wait: #915400!important;
--bx-wait-wash: #fbf0dc!important;
--bx-info: #1f5aa6!important;
--bx-info-wash: #e8eff9!important;
--bx-font: "BX Public Sans",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;
--bx-font-display: "BX Bricolage",var(--bx-font)!important;
--bx-text-xs: 13px!important;
--bx-text-s: 14px!important;
--bx-text-m: 16px!important;
--bx-text-l: 18px!important;
--bx-text-xl: 22px!important;
--bx-r-s: 8px!important;
--bx-r-m: 12px!important;
--bx-r-l: 18px!important;
--bx-gap: 24px!important;
--bx-shadow: 0 1px 2px rgba(23,32,28,.06),0 10px 28px -18px rgba(23,32,28,.32)!important;
--bx-ring: 0 0 0 3px color-mix(in oklab,var(--bx-brand) 32%,#fff)!important;
--bx-top-offset: var(--wp-admin--admin-bar--height,0px)!important
}
}
@layer bx-reset{
#bsms-app.bx-app,.bx,.bx *:not(svg,svg *),.bx *:not(svg,svg *)::before,.bx *:not(svg,svg *)::after{
all: revert!important
}
}
@layer bx-base{
.bx,.bx *,.bx *::before,.bx *::after,#bsms-app.bx-app{
box-sizing: border-box!important
}
.bx{
font-family: var(--bx-font)!important;
font-size: var(--bx-text-m)!important;
line-height: 1.5!important;
color: var(--bx-ink)!important;
-webkit-font-smoothing: antialiased!important;
text-rendering: optimizeLegibility!important
}
.bx h1,.bx h2,.bx h3,.bx h4,.bx p,.bx ul,.bx ol,.bx dl,.bx dd,.bx figure,.bx blockquote{
margin: 0!important;
padding: 0!important
}
.bx ul,.bx ol{
list-style: none!important
}
.bx h1{
font-family: var(--bx-font-display)!important;
font-weight: 700!important;
font-size: clamp(28px,1.6vw + 18px,36px)!important;
line-height: 1.1!important;
letter-spacing: -0.02em!important;
color: var(--bx-ink)!important
}
.bx h2{
font-family: var(--bx-font)!important;
font-weight: 650!important;
font-size: var(--bx-text-l)!important;
line-height: 1.3!important;
color: var(--bx-ink)!important
}
.bx h3{
font-family: var(--bx-font)!important;
font-weight: 650!important;
font-size: var(--bx-text-m)!important;
line-height: 1.35!important;
color: var(--bx-ink)!important
}
.bx p{
max-width: 68ch!important
}
.bx a{
color: var(--bx-brand-ink)!important;
text-decoration: underline!important;
text-underline-offset: 3px!important;
text-decoration-thickness: 1px!important
}
.bx a:hover{
text-decoration-thickness: 2px!important
}
.bx strong,.bx b{
font-weight: 650!important
}
.bx small{
font-size: var(--bx-text-s)!important
}
.bx img{
max-width: 100%!important;
height: auto!important;
display: block!important
}
.bx code,.bx kbd{
font-family: ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace!important;
font-size: .92em!important;
background: var(--bx-sunken)!important;
border: 1px solid var(--bx-line)!important;
border-radius: 6px!important;
padding: 1px 6px!important;
overflow-wrap: anywhere!important
}
.bx button,.bx input,.bx select,.bx textarea{
font: inherit!important;
color: inherit!important;
margin: 0!important
}
.bx button{
cursor: pointer!important;
background: none!important;
border: 0!important;
padding: 0!important;
text-align: inherit!important
}
.bx button:disabled{
cursor: not-allowed!important
}
.bx :focus-visible{
outline: 3px solid color-mix(in oklab,var(--bx-brand) 55%,#fff)!important;
outline-offset: 2px!important;
border-radius: 6px!important
}
.bx svg{
display: inline-block!important;
flex: none!important
}
.bx-num{
font-variant-numeric: tabular-nums!important
}
}
@layer bx-comp{
.bx-page{
display: block!important;
width: 100%!important;
max-width: 1180px!important;
margin: 0!important;
padding: 28px 36px 64px!important;
animation: bx-rise .28s ease-out both!important
}
.bx-head{
display: flex!important;
flex-wrap: wrap!important;
align-items: flex-end!important;
justify-content: space-between!important;
gap: 16px 28px!important;
margin: 0 0 28px!important
}
.bx-head-text{
display: block!important;
min-width: 0!important;
flex: 1 1 420px!important
}
.bx-lede{
display: block!important;
margin-top: 10px!important;
font-size: var(--bx-text-m)!important;
color: var(--bx-muted)!important;
max-width: 64ch!important
}
.bx-head-actions{
display: flex!important;
flex-wrap: wrap!important;
gap: 10px!important
}
.bx-section{
display: block!important;
margin-top: 32px!important
}
.bx-section-head{
display: flex!important;
flex-wrap: wrap!important;
align-items: baseline!important;
justify-content: space-between!important;
gap: 8px 20px!important;
margin-bottom: 14px!important
}
.bx-section-head p{
color: var(--bx-muted)!important;
font-size: var(--bx-text-s)!important;
margin-top: 4px!important
}
.bx-split{
display: grid!important;
grid-template-columns: minmax(0,1fr) minmax(300px,372px)!important;
gap: var(--bx-gap)!important;
align-items: start!important
}
.bx-split.is-even{
grid-template-columns: repeat(2,minmax(0,1fr))!important
}
.bx-aside{
display: grid!important;
gap: 18px!important;
position: sticky!important;
top: calc(var(--bx-top-offset) + 84px)!important
}
.bx-stack{
display: grid!important;
gap: var(--bx-gap)!important
}
.bx-stack.is-tight{
gap: 14px!important
}
.bx-grid{
display: grid!important;
gap: 16px!important;
grid-template-columns: repeat(auto-fill,minmax(var(--min,240px),1fr))!important
}
.bx-row-flex{
display: flex!important;
flex-wrap: wrap!important;
align-items: center!important;
gap: 10px!important
}
.bx-row-flex.is-between{
justify-content: space-between!important
}
.bx-muted{
color: var(--bx-muted)!important
}
.bx-small{
font-size: var(--bx-text-s)!important
}
.bx-xs{
font-size: var(--bx-text-xs)!important
}
.bx-strong{
font-weight: 650!important
}
.bx-break{
overflow-wrap: anywhere!important
}
.bx-divider{
display: block!important;
height: 1px!important;
border: 0!important;
background: var(--bx-line)!important;
margin: 20px 0!important
}
.bx-panel{
display: block!important;
background: var(--bx-surface)!important;
border: 1px solid var(--bx-line)!important;
border-radius: var(--bx-r-m)!important;
padding: 24px!important;
min-width: 0!important
}
.bx-panel.is-flush{
padding: 0!important;
overflow: hidden!important
}
.bx-panel.is-sunken{
background: var(--bx-sunken)!important
}
.bx-panel-head{
display: flex!important;
flex-wrap: wrap!important;
align-items: flex-start!important;
justify-content: space-between!important;
gap: 10px 18px!important;
margin-bottom: 18px!important
}
.bx-panel-head p{
margin-top: 4px!important;
color: var(--bx-muted)!important;
font-size: var(--bx-text-s)!important
}
.bx-panel.is-flush>.bx-panel-head{
padding: 20px 24px 0!important
}
.bx-step{
display: grid!important;
grid-template-columns: 32px minmax(0,1fr)!important;
gap: 4px 14px!important
}
.bx-step + .bx-step{
margin-top: 28px!important;
padding-top: 28px!important;
border-top: 1px solid var(--bx-line)!important
}
.bx-step-num{
grid-row: span 2!important;
display: inline-grid!important;
place-items: center!important;
width: 32px!important;
height: 32px!important;
border-radius: 50%!important;
background: var(--bx-brand-wash)!important;
color: var(--bx-brand-ink)!important;
font-weight: 700!important;
font-size: var(--bx-text-s)!important;
font-variant-numeric: tabular-nums!important
}
.bx-step-title{
align-self: center!important
}
.bx-step-title p{
color: var(--bx-muted)!important;
font-size: var(--bx-text-s)!important;
margin-top: 2px!important
}
.bx-step-body{
grid-column: 2!important;
display: grid!important;
gap: 16px!important;
margin-top: 14px!important;
min-width: 0!important
}
.bx-btn{
display: inline-flex!important;
align-items: center!important;
justify-content: center!important;
gap: 8px!important;
min-height: 44px!important;
padding: 0 18px!important;
border-radius: 10px!important;
border: 1px solid var(--bx-line-strong)!important;
background: var(--bx-surface)!important;
color: var(--bx-ink)!important;
font-family: var(--bx-font)!important;
font-size: 15px!important;
font-weight: 600!important;
line-height: 1.2!important;
text-decoration: none!important;
white-space: nowrap!important;
transition: background-color .15s,border-color .15s,color .15s!important
}
.bx-btn:hover{
background: var(--bx-sunken)!important;
border-color: var(--bx-ink-2)!important
}
.bx-btn.is-primary{
background: var(--bx-brand)!important;
border-color: var(--bx-brand)!important;
color: #fff!important
}
.bx-btn.is-primary:hover{
background: var(--bx-brand-hover)!important;
border-color: var(--bx-brand-hover)!important
}
.bx-btn.is-quiet{
background: transparent!important;
border-color: transparent!important;
color: var(--bx-brand-ink)!important;
padding: 0 10px!important
}
.bx-btn.is-quiet:hover{
background: var(--bx-brand-wash)!important
}
.bx-btn.is-danger{
color: var(--bx-bad)!important;
border-color: color-mix(in oklab,var(--bx-bad) 40%,#fff)!important
}
.bx-btn.is-danger:hover{
background: var(--bx-bad-wash)!important;
border-color: var(--bx-bad)!important
}
.bx-btn.is-small{
min-height: 36px!important;
padding: 0 12px!important;
font-size: var(--bx-text-s)!important;
border-radius: 8px!important
}
.bx-btn.is-large{
min-height: 52px!important;
padding: 0 24px!important;
font-size: var(--bx-text-m)!important
}
.bx-btn.is-block{
display: flex!important;
width: 100%!important
}
.bx-btn:disabled,.bx-btn[aria-disabled="true"]{
opacity: .55!important;
cursor: not-allowed!important
}
.bx-btn .bx-spin{
width: 16px!important;
height: 16px!important;
border-radius: 50%!important;
border: 2px solid currentColor!important;
border-right-color: transparent!important;
animation: bx-spin .7s linear infinite!important
}
.bx-link{
display: inline!important;
padding: 0!important;
border: 0!important;
background: none!important;
color: var(--bx-brand-ink)!important;
font-weight: 600!important;
text-decoration: underline!important;
text-underline-offset: 3px!important;
cursor: pointer!important
}
.bx-field{
display: grid!important;
gap: 6px!important;
min-width: 0!important;
align-content: start!important
}
.bx-label{
display: block!important;
font-size: 15px!important;
font-weight: 600!important;
color: var(--bx-ink)!important
}
.bx-label .bx-optional{
font-weight: 400!important;
color: var(--bx-muted)!important
}
.bx-hint{
display: block!important;
font-size: var(--bx-text-s)!important;
color: var(--bx-muted)!important
}
.bx-hint.is-bad{
color: var(--bx-bad)!important
}
.bx-hint.is-good{
color: var(--bx-good)!important
}
.bx-input,.bx-select,.bx-textarea{
display: block!important;
width: 100%!important;
min-height: 46px!important;
padding: 10px 14px!important;
border: 1px solid var(--bx-line-strong)!important;
border-radius: 10px!important;
background: var(--bx-surface)!important;
color: var(--bx-ink)!important;
font-family: var(--bx-font)!important;
font-size: 16px!important;
line-height: 1.4!important;
appearance: none!important;
box-shadow: none!important;
transition: border-color .15s,box-shadow .15s!important
}
.bx-textarea{
min-height: 148px!important;
resize: vertical!important
}
.bx-input::placeholder,.bx-textarea::placeholder{
color: #85938c!important;
opacity: 1!important
}
.bx-input:hover,.bx-select:hover,.bx-textarea:hover{
border-color: var(--bx-ink-2)!important
}
.bx-input:focus,.bx-select:focus,.bx-textarea:focus{
outline: none!important;
border-color: var(--bx-brand)!important;
box-shadow: var(--bx-ring)!important
}
.bx-input[aria-invalid="true"],.bx-textarea[aria-invalid="true"]{
border-color: var(--bx-bad)!important
}
.bx-input:disabled,.bx-select:disabled{
background: var(--bx-sunken)!important;
color: var(--bx-muted)!important
}
.bx-select{
padding-right: 40px!important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%233c4943' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
background-repeat: no-repeat!important;
background-position: right 14px center!important;
background-size: 12px 8px!important
}
.bx-money-input{
display: flex!important;
align-items: stretch!important;
border: 1px solid var(--bx-line-strong)!important;
border-radius: 12px!important;
background: var(--bx-surface)!important;
overflow: hidden!important
}
.bx-money-input:focus-within{
border-color: var(--bx-brand)!important;
box-shadow: var(--bx-ring)!important
}
.bx-money-input span{
display: grid!important;
place-items: center!important;
padding: 0 16px!important;
font-family: var(--bx-font-display)!important;
font-size: 26px!important;
font-weight: 700!important;
color: var(--bx-muted)!important;
background: var(--bx-sunken)!important;
border-right: 1px solid var(--bx-line)!important
}
.bx-money-input input{
flex: 1!important;
min-width: 0!important;
border: 0!important;
outline: none!important;
padding: 12px 16px!important;
font-family: var(--bx-font-display)!important;
font-size: 30px!important;
font-weight: 700!important;
font-variant-numeric: tabular-nums!important;
background: transparent!important;
appearance: textfield!important
}
.bx-money-input input::-webkit-outer-spin-button,.bx-money-input input::-webkit-inner-spin-button{
appearance: none!important;
margin: 0!important
}
.bx-fields{
display: grid!important;
gap: 16px!important;
grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr))!important
}
.bx-file{
display: grid!important;
gap: 4px!important;
place-items: start!important;
padding: 18px!important;
border: 1.5px dashed var(--bx-line-strong)!important;
border-radius: var(--bx-r-m)!important;
background: var(--bx-sunken)!important;
cursor: pointer!important
}
.bx-file:hover,.bx-file:focus-within{
border-color: var(--bx-brand)!important;
background: var(--bx-brand-wash)!important
}
.bx-file input{
position: absolute!important;
width: 1px!important;
height: 1px!important;
opacity: 0!important;
overflow: hidden!important
}
.bx-file strong{
color: var(--bx-ink)!important
}
.bx-check{
display: flex!important;
align-items: flex-start!important;
gap: 10px!important;
cursor: pointer!important
}
.bx-check input{
appearance: none!important;
flex: none!important;
width: 20px!important;
height: 20px!important;
margin-top: 2px!important;
border: 1.5px solid var(--bx-line-strong)!important;
border-radius: 6px!important;
background: var(--bx-surface)!important;
cursor: pointer!important
}
.bx-check input:checked{
background: var(--bx-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 10px no-repeat!important;
border-color: var(--bx-brand)!important
}
.bx-check input:focus-visible{
box-shadow: var(--bx-ring)!important;
outline: none!important
}
.bx-switch{
appearance: none!important;
flex: none!important;
width: 44px!important;
height: 26px!important;
border-radius: 999px!important;
cursor: pointer!important;
background: radial-gradient(circle at 13px 50%,#fff 9px,transparent 9.5px),var(--bx-line-strong)!important;
transition: background .18s!important
}
.bx-switch:checked{
background: radial-gradient(circle at 31px 50%,#fff 9px,transparent 9.5px),var(--bx-brand)!important
}
.bx-switch:focus-visible{
outline: none!important;
box-shadow: var(--bx-ring)!important
}
.bx-switch:disabled{
opacity: .5!important;
cursor: not-allowed!important
}
.bx-seg{
display: inline-flex!important;
flex-wrap: wrap!important;
gap: 4px!important;
padding: 4px!important;
border-radius: 12px!important;
background: var(--bx-canvas)!important;
border: 1px solid var(--bx-line)!important;
max-width: 100%!important
}
.bx-seg button{
display: inline-flex!important;
align-items: center!important;
gap: 8px!important;
min-height: 38px!important;
padding: 0 14px!important;
border-radius: 9px!important;
font-size: 15px!important;
font-weight: 550!important;
color: var(--bx-ink-2)!important
}
.bx-seg button:hover{
color: var(--bx-ink)!important;
background: color-mix(in oklab,var(--bx-surface) 60%,transparent)!important
}
.bx-seg button[aria-pressed="true"],.bx-seg button[aria-selected="true"]{
background: var(--bx-surface)!important;
color: var(--bx-ink)!important;
font-weight: 650!important;
box-shadow: 0 1px 2px rgba(23,32,28,.12),0 0 0 1px var(--bx-line)!important
}
.bx-seg button:disabled{
opacity: .45!important
}
.bx-seg.is-block{
display: flex!important
}
.bx-seg.is-block button{
flex: 1 1 0!important;
justify-content: center!important
}
.bx-choices{
display: grid!important;
gap: 10px!important;
grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr))!important
}
.bx-choice{
display: grid!important;
gap: 2px!important;
padding: 14px 16px!important;
border: 1.5px solid var(--bx-line)!important;
border-radius: var(--bx-r-m)!important;
background: var(--bx-surface)!important;
text-align: left!important;
cursor: pointer!important
}
.bx-choice:hover{
border-color: var(--bx-line-strong)!important
}
.bx-choice[aria-pressed="true"],.bx-choice:has(input:checked){
border-color: var(--bx-brand)!important;
background: var(--bx-brand-wash)!important
}
.bx-choice strong{
font-size: var(--bx-text-m)!important
}
.bx-choice span{
font-size: var(--bx-text-s)!important;
color: var(--bx-muted)!important
}
.bx-choice input{
position: absolute!important;
opacity: 0!important;
width: 1px!important;
height: 1px!important
}
.bx-choice:disabled,.bx-choice[aria-disabled="true"]{
opacity: .5!important;
cursor: not-allowed!important
}
.bx-chips{
display: flex!important;
flex-wrap: wrap!important;
gap: 8px!important
}
.bx-chip{
display: inline-flex!important;
align-items: center!important;
gap: 6px!important;
min-height: 36px!important;
padding: 0 14px!important;
border-radius: 999px!important;
border: 1px solid var(--bx-line-strong)!important;
background: var(--bx-surface)!important;
font-size: 15px!important;
font-weight: 600!important;
color: var(--bx-ink)!important;
font-variant-numeric: tabular-nums!important;
cursor: pointer!important
}
.bx-chip:hover{
border-color: var(--bx-ink-2)!important
}
.bx-chip[aria-pressed="true"]{
background: var(--bx-ink)!important;
border-color: var(--bx-ink)!important;
color: #fff!important
}
.bx-chip.is-filter{
background: var(--bx-brand-wash)!important;
border-color: var(--bx-brand-line)!important;
color: var(--bx-brand-ink)!important;
min-height: 32px!important;
font-size: var(--bx-text-s)!important
}
.bx-pill{
display: inline-flex!important;
align-items: center!important;
gap: 6px!important;
padding: 2px 10px 2px 8px!important;
border-radius: 999px!important;
font-size: var(--bx-text-xs)!important;
font-weight: 650!important;
line-height: 20px!important;
white-space: nowrap!important;
background: var(--bx-sunken)!important;
color: var(--bx-ink-2)!important
}
.bx-pill::before{
content: ""!important;
width: 7px!important;
height: 7px!important;
border-radius: 50%!important;
background: currentColor!important
}
.bx-pill.is-good{
background: var(--bx-good-wash)!important;
color: var(--bx-good)!important
}
.bx-pill.is-bad{
background: var(--bx-bad-wash)!important;
color: var(--bx-bad)!important
}
.bx-pill.is-wait{
background: var(--bx-wait-wash)!important;
color: var(--bx-wait)!important
}
.bx-pill.is-info{
background: var(--bx-info-wash)!important;
color: var(--bx-info)!important
}
.bx-note{
display: grid!important;
grid-template-columns: auto minmax(0,1fr)!important;
gap: 2px 12px!important;
align-items: start!important;
padding: 14px 16px!important;
border-radius: var(--bx-r-m)!important;
background: var(--bx-info-wash)!important;
color: var(--bx-ink)!important;
border: 1px solid color-mix(in oklab,var(--bx-info) 22%,#fff)!important;
font-size: 15px!important
}
.bx-note>svg{
grid-row: span 2!important;
margin-top: 2px!important;
color: var(--bx-info)!important
}
.bx-note strong{
display: block!important
}
.bx-note p{
color: var(--bx-ink-2)!important
}
.bx-note .bx-row-flex{
grid-column: 2!important;
margin-top: 8px!important
}
.bx-note.is-good{
background: var(--bx-good-wash)!important;
border-color: color-mix(in oklab,var(--bx-good) 25%,#fff)!important
}
.bx-note.is-good>svg{
color: var(--bx-good)!important
}
.bx-note.is-bad{
background: var(--bx-bad-wash)!important;
border-color: color-mix(in oklab,var(--bx-bad) 25%,#fff)!important
}
.bx-note.is-bad>svg{
color: var(--bx-bad)!important
}
.bx-note.is-wait{
background: var(--bx-wait-wash)!important;
border-color: color-mix(in oklab,var(--bx-wait) 25%,#fff)!important
}
.bx-note.is-wait>svg{
color: var(--bx-wait)!important
}
.bx-stats{
display: grid!important;
grid-template-columns: repeat(auto-fit,minmax(min(100%,170px),1fr))!important;
background: var(--bx-surface)!important;
border: 1px solid var(--bx-line)!important;
border-radius: var(--bx-r-m)!important;
overflow: hidden!important
}
.bx-stat{
display: grid!important;
gap: 4px!important;
align-content: start!important;
padding: 18px 20px!important;
border-left: 1px solid var(--bx-line)!important;
margin-left: -1px!important;
text-align: left!important;
min-width: 0!important
}
button.bx-stat{
cursor: pointer!important
}
button.bx-stat:hover{
background: var(--bx-sunken)!important
}
button.bx-stat[aria-pressed="true"]{
background: var(--bx-brand-wash)!important;
box-shadow: inset 0 -3px 0 var(--bx-brand)!important
}
.bx-stat-label{
font-size: var(--bx-text-s)!important;
color: var(--bx-muted)!important;
font-weight: 550!important
}
.bx-stat-value{
font-family: var(--bx-font-display)!important;
font-size: 28px!important;
font-weight: 700!important;
line-height: 1.1!important;
letter-spacing: -0.01em!important;
font-variant-numeric: tabular-nums!important;
color: var(--bx-ink)!important;
overflow-wrap: anywhere!important
}
.bx-stat-note{
font-size: var(--bx-text-xs)!important;
color: var(--bx-muted)!important
}
.bx-stat.is-good .bx-stat-value{
color: var(--bx-good)!important
}
.bx-stat.is-bad .bx-stat-value{
color: var(--bx-bad)!important
}
.bx-stat.is-wait .bx-stat-value{
color: var(--bx-wait)!important
}
.bx-figure{
font-family: var(--bx-font-display)!important;
font-weight: 700!important;
font-variant-numeric: tabular-nums!important;
letter-spacing: -0.02em!important;
line-height: 1.05!important
}
.bx-bar{
display: flex!important;
height: 8px!important;
border-radius: 999px!important;
overflow: hidden!important;
background: var(--bx-line)!important
}
.bx-bar i{
display: block!important;
height: 100%!important;
width: var(--w,0%)!important
}
.bx-bar i.is-good{
background: var(--bx-good)!important
}
.bx-bar i.is-bad{
background: var(--bx-bad)!important
}
.bx-bar i.is-wait{
background: #d99a2b!important
}
.bx-bar i.is-info{
background: color-mix(in srgb,var(--bx-good) 40%,#fff)!important
}
.bx-legend{
display: flex!important;
flex-wrap: wrap!important;
gap: 6px 16px!important;
font-size: var(--bx-text-s)!important;
color: var(--bx-ink-2)!important
}
.bx-legend span{
display: inline-flex!important;
align-items: center!important;
gap: 6px!important
}
.bx-legend span::before{
content: ""!important;
width: 9px!important;
height: 9px!important;
border-radius: 3px!important;
background: var(--c,var(--bx-line))!important
}
.bx-list{
display: block!important;
background: var(--bx-surface)!important;
border: 1px solid var(--bx-line)!important;
border-radius: var(--bx-r-m)!important;
overflow: hidden!important
}
.bx-tr{
display: grid!important;
grid-template-columns: var(--cols,1fr)!important;
gap: 6px 18px!important;
align-items: center!important;
padding: 14px 20px!important;
border-top: 1px solid var(--bx-line)!important;
min-width: 0!important
}
.bx-tr:first-child{
border-top: 0!important
}
.bx-tr.is-head{
padding-top: 11px!important;
padding-bottom: 11px!important;
background: var(--bx-sunken)!important;
font-size: var(--bx-text-xs)!important;
font-weight: 650!important;
color: var(--bx-muted)!important
}
.bx-tr>*{
min-width: 0!important
}
.bx-tr .is-num{
text-align: right!important;
font-variant-numeric: tabular-nums!important;
justify-self: end!important
}
.bx-td-main{
display: grid!important;
gap: 2px!important
}
.bx-td-main small,.bx-td-sub{
color: var(--bx-muted)!important;
font-size: var(--bx-text-s)!important
}
.bx-clip{
display: -webkit-box!important;
-webkit-line-clamp: 2!important;
-webkit-box-orient: vertical!important;
overflow: hidden!important;
overflow-wrap: anywhere!important
}
.bx-mono{
font-family: ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace!important;
font-size: 14px!important;
letter-spacing: .01em!important;
overflow-wrap: anywhere!important
}
details.bx-item{
display: block!important;
border-top: 1px solid var(--bx-line)!important
}
details.bx-item:first-of-type{
border-top: 0!important
}
.bx-list>.bx-tr.is-head + details.bx-item{
border-top: 1px solid var(--bx-line)!important
}
details.bx-item>summary{
display: grid!important;
list-style: none!important;
cursor: pointer!important;
border-top: 0!important
}
details.bx-item>summary::-webkit-details-marker{
display: none!important
}
details.bx-item>summary:hover{
background: var(--bx-sunken)!important
}
details.bx-item[open]>summary{
background: var(--bx-sunken)!important
}
.bx-item-body{
display: grid!important;
gap: 16px!important;
padding: 4px 20px 20px!important;
background: var(--bx-sunken)!important
}
.bx-facts{
display: grid!important;
grid-template-columns: repeat(auto-fit,minmax(min(100%,160px),1fr))!important;
gap: 12px 20px!important
}
.bx-facts div{
display: grid!important;
gap: 2px!important
}
.bx-facts dt{
font-size: var(--bx-text-xs)!important;
color: var(--bx-muted)!important;
font-weight: 600!important
}
.bx-facts dd{
font-size: 15px!important;
overflow-wrap: anywhere!important
}
.bx-quote{
display: block!important;
padding: 14px 16px!important;
border-radius: var(--bx-r-m)!important;
background: var(--bx-surface)!important;
border: 1px solid var(--bx-line)!important;
white-space: pre-wrap!important;
overflow-wrap: anywhere!important;
font-size: 15px!important
}
.bx-admin-box{
display: grid!important;
gap: 8px!important;
padding: 14px 16px!important;
border-radius: var(--bx-r-m)!important;
border: 1px dashed var(--bx-line-strong)!important;
background: var(--bx-surface)!important;
font-size: var(--bx-text-s)!important
}
.bx-rows{
display: grid!important;
background: var(--bx-surface)!important;
border: 1px solid var(--bx-line)!important;
border-radius: var(--bx-r-m)!important;
overflow: hidden!important
}
.bx-rows>*{
border-top: 1px solid var(--bx-line)!important
}
.bx-rows>*:first-child{
border-top: 0!important
}
.bx-line-item{
display: flex!important;
flex-wrap: wrap!important;
align-items: center!important;
justify-content: space-between!important;
gap: 10px 18px!important;
padding: 16px 20px!important;
min-width: 0!important
}
.bx-line-item>div{
min-width: 0!important
}
button.bx-line-item{
width: 100%!important;
text-align: left!important;
cursor: pointer!important;
background: transparent!important;
border: 0!important;
border-top: 1px solid var(--bx-line)!important;
font: inherit!important;
color: inherit!important
}
.bx-rows>button.bx-line-item:first-child{
border-top: 0!important
}
button.bx-line-item:hover{
background: var(--bx-sunken)!important
}
.bx-line-item.is-send{
display: grid!important;
grid-template-columns: minmax(0,1fr) minmax(150px,210px) auto!important;
align-items: center!important
}
@media (max-width: 720px){
.bx-line-item.is-send{
grid-template-columns: minmax(0,1fr) auto!important
}
.bx-line-item.is-send>.bx-td-bar{
grid-column: 1 / -1!important;
grid-row: 2!important
}
}
.bx-num.is-good,.bx-amount.is-good{
color: var(--bx-good)!important
}
.bx-amount.is-wait{
color: var(--bx-wait)!important
}
.bx-sender-name{
font-size: 22px!important
}
.bx-td-main>.bx-pill,.bx-td-main>.bx-bar{
justify-self: start!important
}
.bx-td-main>.bx-bar{
justify-self: stretch!important;
max-width: 280px!important
}
.bx ul.bx-bullets{
display: grid!important;
gap: 6px!important;
list-style: disc!important;
padding-left: 18px!important
}
.bx-list.is-inset{
border: 0!important;
border-radius: 0!important
}
.bx-list.is-inset.is-top{
border-top: 1px solid var(--bx-line)!important
}
.bx-list>.bx-filters{
margin: 0!important;
border: 0!important;
border-bottom: 1px solid var(--bx-line)!important;
border-radius: 0!important
}
.bx-panel.is-flush>.bx-filters{
margin: 0!important;
border-left: 0!important;
border-right: 0!important;
border-radius: 0!important
}
.bx-input.is-short{
max-width: 120px!important
}
.bx-grow{
flex: 1 1 auto!important;
min-width: 0!important
}
.bx-row-flex.is-nowrap{
flex-wrap: nowrap!important
}
.bx-choice strong{
display: flex!important;
align-items: center!important;
gap: 8px!important
}
.bx-money-input[data-invalid]{
border-color: var(--bx-bad)!important
}
.bx-contact{
align-items: flex-start!important
}
.bx-contact>svg{
margin-top: 2px!important;
color: var(--bx-brand)!important
}
.bx-td-actions{
justify-self: end!important
}
.bx-tr .bx-row-flex.bx-td-actions{
justify-content: flex-end!important
}
.bx-active-filters .bx-chip svg{
opacity: .7!important
}
.bx-panel-head .bx-btn.is-quiet{
margin-right: -8px!important
}
.bx-panel.is-flush>.bx-rows,.bx-panel.is-flush>div>.bx-rows{
border: 0!important;
border-top: 1px solid var(--bx-line)!important;
border-radius: 0!important
}
.bx-panel.is-flush>div>.bx-empty,.bx-panel.is-flush>div>.bx-skel-group{
border-top: 1px solid var(--bx-line)!important
}
.bx-panel.is-flush>div>.bx-list{
border: 0!important;
border-top: 1px solid var(--bx-line)!important;
border-radius: 0!important
}
.bx-tile .bx-stat-value{
font-size: 30px!important
}
.bx-tile.is-alert{
border-color: color-mix(in oklab,var(--bx-wait) 40%,#fff)!important;
background: var(--bx-wait-wash)!important
}
.bx-tile.is-alert>svg{
color: var(--bx-wait)!important
}
.bx-tile.is-alert:hover{
border-color: var(--bx-wait)!important;
background: color-mix(in oklab,var(--bx-wait-wash) 80%,var(--bx-wait))!important
}
.bx-stats.is-inset{
border: 0!important;
border-top: 1px solid var(--bx-line)!important;
border-radius: 0!important
}
.bx-tabs{
margin-bottom: 4px!important
}
.bx-switch-row{
cursor: pointer!important
}
.bx-field.is-wide,.bx-check.is-wide{
grid-column: 1 / -1!important
}
dialog.bx-dialog.is-wide{
width: min(860px,calc(100vw - 32px))!important
}
.bx-tr.is-off{
background: var(--bx-sunken)!important
}
.bx-tr.is-off .bx-td-lead strong,.bx-tr.is-off .is-num b{
color: var(--bx-muted)!important
}
.bx-tick-sm{
display: inline-grid!important;
place-items: center!important;
width: 26px!important;
height: 26px!important;
border-radius: 50%!important
}
.bx-tick-sm.is-ok{
background: var(--bx-good-wash)!important;
color: var(--bx-good)!important
}
.bx-tick-sm.is-warn{
background: var(--bx-wait-wash)!important;
color: var(--bx-wait)!important
}
.bx-pad{
padding: 8px 24px 16px!important;
border-top: 1px solid var(--bx-line)!important
}
.bx-logo-preview{
display: inline-grid!important;
place-items: center!important;
min-width: 120px!important;
height: 56px!important;
padding: 6px 12px!important;
border: 1px dashed var(--bx-line-strong)!important;
border-radius: 10px!important;
background: var(--bx-sunken)!important
}
.bx-logo-preview img{
max-height: 44px!important;
max-width: 180px!important;
width: auto!important
}
.bx-admin-box pre{
margin: 0!important;
white-space: pre-wrap!important;
max-height: 260px!important;
overflow: auto!important;
font-size: 13px!important
}
.bx-chart{
display: flex!important;
align-items: flex-end!important;
gap: 4px!important;
height: 220px!important;
padding: 8px 0 0!important;
overflow-x: auto!important
}
.bx-chart-col{
flex: 1 0 18px!important;
min-width: 18px!important;
display: flex!important;
flex-direction: column!important;
align-items: center!important;
gap: 6px!important;
height: 100%!important
}
.bx-chart-bar{
flex: none!important;
margin-top: auto!important;
width: 100%!important;
max-width: 34px!important;
height: var(--h,0%)!important;
min-height: 2px!important;
display: flex!important;
flex-direction: column!important;
border-radius: 6px 6px 2px 2px!important;
overflow: hidden!important;
background: var(--bx-line)!important
}
.bx-chart-bar i{
display: block!important;
width: 100%!important;
height: var(--w,0%)!important
}
.bx-chart-bar i.is-good{
background: var(--bx-good)!important
}
.bx-chart-bar i.is-bad{
background: var(--bx-bad)!important
}
.bx-chart-bar i.is-wait{
background: #d99a2b!important
}
.bx-chart-col span{
font-size: 11px!important;
color: var(--bx-muted)!important;
white-space: nowrap!important;
writing-mode: vertical-rl!important;
transform: rotate(180deg)!important;
max-height: 56px!important;
overflow: hidden!important
}
.bx-chart-col{
height: calc(100% + 0px)!important
}
.bx-chart:has(.bx-chart-col:nth-child(15)) .bx-chart-col span{
font-size: 10px!important
}
.bx-code{
display: block!important;
margin: 0!important;
padding: 14px 16px!important;
border-radius: var(--bx-r-m)!important;
background: #16211c!important;
color: #e6efe9!important;
font-family: ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace!important;
font-size: 13.5px!important;
line-height: 1.6!important;
white-space: pre-wrap!important;
overflow-wrap: anywhere!important
}
.bx-checklist .bx-tick.bx-tick-num{
color: var(--bx-brand-ink)!important;
background: var(--bx-brand-wash)!important;
border-color: var(--bx-brand-line)!important;
font-weight: 700!important;
font-size: var(--bx-text-s)!important
}
details.bx-qa-panel>summary{
cursor: pointer!important;
list-style: none!important;
display: flex!important;
justify-content: space-between!important;
align-items: center!important;
gap: 12px!important
}
details.bx-qa-panel>summary::-webkit-details-marker{
display: none!important
}
details.bx-qa-panel>summary::after{
content: "+"!important;
font-size: 22px!important;
line-height: 1!important;
color: var(--bx-muted)!important
}
details.bx-qa-panel[open]>summary::after{
content: "−"!important
}
.bx-prose{
display: grid!important;
gap: 14px!important;
max-width: 72ch!important;
font-size: var(--bx-text-m)!important;
line-height: 1.65!important;
color: var(--bx-ink-2)!important
}
.bx-prose h2,.bx-prose h3,.bx-prose h4{
color: var(--bx-ink)!important;
margin-top: 8px!important
}
.bx-prose ul,.bx-prose ol{
padding-left: 22px!important;
list-style: disc!important;
display: grid!important;
gap: 6px!important
}
.bx-prose ol{
list-style: decimal!important
}
.bx-prose img{
border-radius: var(--bx-r-m)!important
}
.bx-prose table{
border-collapse: collapse!important;
width: 100%!important
}
.bx-prose td,.bx-prose th{
border: 1px solid var(--bx-line)!important;
padding: 8px 10px!important;
text-align: left!important
}
.bx-filters{
display: flex!important;
flex-wrap: wrap!important;
gap: 12px!important;
align-items: flex-end!important;
padding: 16px!important;
margin-bottom: 14px!important;
background: var(--bx-surface)!important;
border: 1px solid var(--bx-line)!important;
border-radius: var(--bx-r-m)!important
}
.bx-filters .bx-label{
font-size: var(--bx-text-s)!important
}
.bx-filters .bx-input,.bx-filters .bx-select{
min-height: 42px!important
}
.bx-filters>.bx-field{
flex: 1 1 150px!important
}
.bx-filters>.bx-field:first-child{
flex: 2 1 240px!important
}
.bx-filters>.bx-field[hidden]{
display: none!important
}
.bx-filter-actions{
display: flex!important;
gap: 8px!important;
flex: 0 0 auto!important
}
.bx-active-filters{
display: flex!important;
flex-wrap: wrap!important;
align-items: center!important;
gap: 8px!important;
margin: 0 0 14px!important;
font-size: var(--bx-text-s)!important;
color: var(--bx-muted)!important
}
.bx-pager{
display: flex!important;
flex-wrap: wrap!important;
align-items: center!important;
justify-content: space-between!important;
gap: 10px 16px!important;
padding: 14px 20px!important;
border-top: 1px solid var(--bx-line)!important;
background: var(--bx-surface)!important;
font-size: var(--bx-text-s)!important;
color: var(--bx-muted)!important
}
.bx-pager-buttons{
display: flex!important;
align-items: center!important;
gap: 8px!important;
flex-wrap: wrap!important
}
.bx-pager-nums{
display: flex!important;
align-items: center!important;
gap: 4px!important
}
.bx-pager-num{
min-width: 36px!important;
height: 36px!important;
padding: 0 8px!important;
border: 1px solid transparent!important;
border-radius: var(--bx-r-s)!important;
background: transparent!important;
color: var(--bx-ink-2)!important;
font: inherit!important;
font-weight: 600!important;
font-variant-numeric: tabular-nums!important;
cursor: pointer!important
}
.bx-pager-num:hover{
background: var(--bx-sunken)!important;
color: var(--bx-ink)!important
}
.bx-pager-num[aria-current="page"]{
background: var(--bx-brand)!important;
border-color: var(--bx-brand)!important;
color: #fff!important;
cursor: default!important
}
.bx-pager-num:focus-visible{
outline: 2px solid var(--bx-brand)!important;
outline-offset: 2px!important
}
.bx-pager-gap{
min-width: 20px!important;
text-align: center!important;
color: var(--bx-muted)!important
}
.bx-pager-of{
display: none!important;
font-weight: 600!important;
color: var(--bx-ink-2)!important;
white-space: nowrap!important
}
@media (max-width: 640px){
.bx-pager{
justify-content: center!important
}
.bx-pager-count{
width: 100%!important;
text-align: center!important
}
.bx-pager-buttons{
width: 100%!important;
justify-content: space-between!important;
flex-wrap: nowrap!important
}
.bx-pager-nums{
display: none!important
}
.bx-pager-of{
display: inline!important
}
}
.bx-empty{
display: grid!important;
gap: 8px!important;
justify-items: start!important;
padding: 32px 24px!important
}
.bx-empty>svg{
color: var(--bx-brand)!important;
margin-bottom: 4px!important
}
.bx-empty strong{
font-size: var(--bx-text-l)!important;
font-weight: 650!important
}
.bx-empty p{
color: var(--bx-muted)!important
}
.bx-empty .bx-btn{
margin-top: 8px!important
}
.bx-skel{
display: block!important;
height: var(--h,16px)!important;
width: var(--w,100%)!important;
border-radius: 8px!important;
background: linear-gradient(90deg,#e8edea 0,#f4f7f5 50%,#e8edea 100%) 0 0/640px 100%!important;
animation: bx-shimmer 1.4s linear infinite!important
}
.bx-skel-group{
display: grid!important;
gap: 12px!important;
padding: 20px!important
}
.bx-loading{
display: flex!important;
align-items: center!important;
gap: 10px!important;
padding: 24px!important;
color: var(--bx-muted)!important
}
.bx-loading::before{
content: ""!important;
width: 18px!important;
height: 18px!important;
border-radius: 50%!important;
border: 2px solid var(--bx-line-strong)!important;
border-right-color: var(--bx-brand)!important;
animation: bx-spin .7s linear infinite!important
}
.bx-slip{
position: relative!important;
display: block!important;
background: var(--bx-surface)!important;
border: 1px solid var(--bx-line)!important;
border-radius: var(--bx-r-l)!important;
padding: 22px 22px 20px!important;
box-shadow: var(--bx-shadow)!important
}
.bx-slip-title{
display: flex!important;
align-items: center!important;
justify-content: space-between!important;
gap: 10px!important;
font-size: var(--bx-text-s)!important;
font-weight: 650!important;
color: var(--bx-muted)!important
}
.bx-slip-rows{
display: grid!important;
gap: 10px!important;
margin-top: 16px!important
}
.bx-slip-row{
display: flex!important;
align-items: baseline!important;
justify-content: space-between!important;
gap: 16px!important;
font-size: 15px!important;
color: var(--bx-ink-2)!important
}
.bx-slip-row b{
color: var(--bx-ink)!important;
font-weight: 650!important;
font-variant-numeric: tabular-nums!important;
text-align: right!important
}
.bx-slip-row.is-bad b{
color: var(--bx-bad)!important
}
.bx-slip-row.is-good b{
color: var(--bx-good)!important
}
.bx-slip-row>span small{
display: block!important;
font-size: 13px!important;
color: var(--bx-muted)!important;
margin-top: 2px!important
}
.bx-savebar{
position: sticky!important;
top: 12px!important;
z-index: 5!important;
display: flex!important;
align-items: center!important;
justify-content: space-between!important;
gap: 12px!important;
flex-wrap: wrap!important;
padding: 12px 16px!important;
margin-bottom: 20px!important;
border-radius: var(--bx-r-m)!important;
background: var(--bx-ink)!important;
color: #fff!important;
box-shadow: 0 10px 30px rgba(23,32,28,.18)!important
}
.bx-savebar[hidden]{
display: none!important
}
.bx-savebar>span:first-child{
display: inline-flex!important;
align-items: center!important;
gap: 8px!important;
font-weight: 600!important
}
.bx-savebar .bx-btn.is-quiet{
color: #fff!important
}
.bx-tr.is-key{
background: var(--bx-sunken)!important
}
.bx-slip-tear{
position: relative!important;
display: block!important;
height: 0!important;
margin: 18px -22px!important;
border-top: 2px dashed var(--bx-line-strong)!important
}
.bx-slip-tear::before,.bx-slip-tear::after{
content: ""!important;
position: absolute!important;
top: -11px!important;
width: 20px!important;
height: 20px!important;
border-radius: 50%!important;
background: var(--bx-canvas)!important;
border: 1px solid var(--bx-line)!important
}
.bx-slip-tear::before{
left: -11px!important;
clip-path: inset(0 0 0 50%)!important
}
.bx-slip-tear::after{
right: -11px!important;
clip-path: inset(0 50% 0 0)!important
}
.bx-slip-total{
display: flex!important;
align-items: baseline!important;
justify-content: space-between!important;
gap: 12px!important
}
.bx-slip-total span{
font-size: 15px!important;
font-weight: 600!important;
color: var(--bx-ink-2)!important
}
.bx-slip-total strong{
font-family: var(--bx-font-display)!important;
font-size: 34px!important;
font-weight: 700!important;
letter-spacing: -0.02em!important;
font-variant-numeric: tabular-nums!important;
color: var(--bx-ink)!important
}
.bx-slip-foot{
display: grid!important;
gap: 12px!important;
margin-top: 18px!important
}
.bx-slip-foot .bx-hint{
text-align: left!important
}
.bx-phone{
display: block!important;
width: 100%!important;
max-width: 340px!important;
margin: 0 auto!important;
padding: 10px!important;
border-radius: 34px!important;
background: #1b2420!important;
box-shadow: var(--bx-shadow)!important
}
.bx-phone-screen{
display: grid!important;
grid-template-rows: auto 1fr!important;
min-height: 300px!important;
border-radius: 26px!important;
background: #f5f7f6!important;
overflow: hidden!important
}
.bx-phone-top{
display: grid!important;
justify-items: center!important;
gap: 4px!important;
padding: 18px 16px 12px!important;
border-bottom: 1px solid #e3e8e5!important;
background: #fff!important
}
.bx-phone-avatar{
display: grid!important;
place-items: center!important;
width: 40px!important;
height: 40px!important;
border-radius: 50%!important;
background: var(--bx-brand-wash)!important;
color: var(--bx-brand-ink)!important;
font-weight: 700!important;
font-size: 15px!important
}
.bx-phone-sender{
font-weight: 650!important;
font-size: 15px!important;
color: var(--bx-ink)!important;
overflow-wrap: anywhere!important;
text-align: center!important
}
.bx-phone-sub{
font-size: 12px!important;
color: var(--bx-muted)!important
}
.bx-phone-body{
display: flex!important;
flex-direction: column!important;
justify-content: flex-start!important;
gap: 6px!important;
padding: 16px 14px 20px!important
}
.bx-phone-bubble{
align-self: flex-start!important;
max-width: 88%!important;
padding: 10px 13px!important;
border-radius: 18px 18px 18px 6px!important;
background: #e3e8e5!important;
color: var(--bx-ink)!important;
font-size: 15px!important;
line-height: 1.4!important;
white-space: pre-wrap!important;
overflow-wrap: anywhere!important
}
.bx-phone-bubble.is-empty{
color: var(--bx-muted)!important;
font-style: italic!important
}
.bx-phone-time{
font-size: 11px!important;
color: var(--bx-muted)!important;
padding-left: 6px!important
}
.bx-meter{
display: flex!important;
flex-wrap: wrap!important;
align-items: center!important;
justify-content: space-between!important;
gap: 6px 16px!important;
font-size: var(--bx-text-s)!important;
color: var(--bx-muted)!important
}
.bx-meter b{
color: var(--bx-ink)!important;
font-weight: 650!important;
font-variant-numeric: tabular-nums!important
}
.bx-meter .is-warn{
color: var(--bx-wait)!important;
font-weight: 600!important
}
.bx-balance{
display: grid!important;
grid-template-columns: minmax(0,1fr) auto!important;
gap: 20px 32px!important;
align-items: end!important;
padding: 28px!important;
border-radius: var(--bx-r-l)!important;
background: var(--bx-deep)!important;
color: var(--bx-on-deep)!important
}
.bx-balance-label{
font-size: 15px!important;
color: var(--bx-on-deep-muted)!important;
font-weight: 550!important
}
.bx-balance-amount{
display: block!important;
margin-top: 6px!important;
font-family: var(--bx-font-display)!important;
font-size: clamp(40px,4vw + 16px,60px)!important;
font-weight: 700!important;
letter-spacing: -0.03em!important;
line-height: 1!important;
font-variant-numeric: tabular-nums!important;
color: #fff!important;
overflow-wrap: anywhere!important
}
.bx-balance-note{
display: block!important;
margin-top: 10px!important;
color: var(--bx-on-deep-muted)!important;
font-size: 15px!important
}
.bx-balance .bx-btn{
border-color: rgba(255,255,255,.35)!important;
background: transparent!important;
color: #fff!important
}
.bx-balance .bx-btn:hover{
background: rgba(255,255,255,.1)!important;
border-color: #fff!important
}
.bx-balance .bx-btn.is-primary{
background: #fff!important;
color: var(--bx-deep)!important;
border-color: #fff!important
}
.bx-balance .bx-btn.is-primary:hover{
background: #e9f0ec!important
}
.bx-checklist{
display: grid!important;
gap: 0!important
}
.bx-checklist li{
display: grid!important;
grid-template-columns: 28px minmax(0,1fr) auto!important;
gap: 12px!important;
align-items: center!important;
padding: 14px 0!important;
border-top: 1px solid var(--bx-line)!important
}
.bx-checklist li:first-child{
border-top: 0!important;
padding-top: 4px!important
}
.bx-checklist .bx-tick{
display: grid!important;
place-items: center!important;
width: 28px!important;
height: 28px!important;
border-radius: 50%!important;
border: 1.5px solid var(--bx-line-strong)!important;
color: transparent!important
}
.bx-checklist li.is-done .bx-tick{
background: var(--bx-good)!important;
border-color: var(--bx-good)!important;
color: #fff!important
}
.bx-checklist li.is-done .bx-check-title{
color: var(--bx-muted)!important;
text-decoration: line-through!important;
text-decoration-color: var(--bx-line-strong)!important
}
.bx-check-title{
font-weight: 600!important
}
.bx-checklist li.is-ok .bx-tick{
background: var(--bx-good)!important;
border-color: var(--bx-good)!important;
color: #fff!important
}
.bx-checklist li:not(.is-ok):not(.is-done) .bx-tick{
color: var(--bx-wait)!important;
border-color: color-mix(in oklab,var(--bx-wait) 45%,#fff)!important
}
.bx-aside .bx-checklist li{
grid-template-columns: 28px minmax(0,1fr)!important
}
.bx-aside .bx-checklist li>.bx-btn{
grid-column: 2!important;
justify-self: start!important
}
.bx-kv{
display: grid!important;
gap: 0!important
}
.bx-kv>div{
display: flex!important;
justify-content: space-between!important;
gap: 16px!important;
padding: 10px 0!important;
border-top: 1px solid var(--bx-line)!important;
font-size: 15px!important
}
.bx-kv>div:first-child{
border-top: 0!important
}
.bx-kv dt{
color: var(--bx-muted)!important
}
.bx-kv dd{
font-weight: 600!important;
text-align: right!important;
overflow-wrap: anywhere!important;
font-variant-numeric: tabular-nums!important
}
.bx-copy{
display: flex!important;
align-items: center!important;
gap: 10px!important;
padding: 8px 8px 8px 14px!important;
border-radius: 10px!important;
background: var(--bx-sunken)!important;
border: 1px solid var(--bx-line)!important
}
.bx-copy>span{
flex: 1!important;
min-width: 0!important;
font-variant-numeric: tabular-nums!important;
font-weight: 650!important;
font-size: var(--bx-text-l)!important;
letter-spacing: .02em!important;
overflow-wrap: anywhere!important
}
.bx-copy>span.bx-mono{
font-size: 14px!important;
font-weight: 500!important;
letter-spacing: 0!important
}
.bx-search{
display: flex!important;
gap: 8px!important
}
.bx-search .bx-input{
flex: 1!important;
min-height: 52px!important;
font-size: 17px!important
}
details.bx-qa{
display: block!important;
border-top: 1px solid var(--bx-line)!important
}
details.bx-qa:first-child{
border-top: 0!important
}
details.bx-qa>summary{
display: flex!important;
align-items: center!important;
justify-content: space-between!important;
gap: 16px!important;
padding: 16px 20px!important;
cursor: pointer!important;
list-style: none!important;
font-weight: 600!important
}
details.bx-qa>summary::-webkit-details-marker{
display: none!important
}
details.bx-qa>summary::after{
content: "+"!important;
flex: none!important;
font-size: 22px!important;
line-height: 1!important;
color: var(--bx-muted)!important;
font-weight: 400!important
}
details.bx-qa[open]>summary::after{
content: "−"!important
}
details.bx-qa>summary:hover{
background: var(--bx-sunken)!important
}
.bx-qa-body{
display: grid!important;
gap: 12px!important;
padding: 0 20px 18px!important;
color: var(--bx-ink-2)!important
}
.bx-qa-tag{
font-size: var(--bx-text-xs)!important;
font-weight: 600!important;
color: var(--bx-muted)!important
}
.bx-tile{
display: grid!important;
gap: 6px!important;
align-content: start!important;
padding: 18px!important;
border: 1px solid var(--bx-line)!important;
border-radius: var(--bx-r-m)!important;
background: var(--bx-surface)!important;
text-align: left!important;
cursor: pointer!important;
color: var(--bx-ink)!important;
text-decoration: none!important
}
.bx-tile:hover{
border-color: var(--bx-brand-line)!important;
background: var(--bx-brand-wash)!important
}
.bx-tile>svg{
color: var(--bx-brand)!important
}
.bx-tile strong{
font-size: var(--bx-text-m)!important
}
.bx-tile span{
font-size: var(--bx-text-s)!important;
color: var(--bx-muted)!important
}
.bx-price{
display: grid!important;
gap: 4px!important;
padding: 18px 20px!important;
border-top: 1px solid var(--bx-line)!important
}
.bx-price-amount{
font-family: var(--bx-font-display)!important;
font-size: 26px!important;
font-weight: 700!important;
font-variant-numeric: tabular-nums!important
}
dialog.bx-dialog{
display: block!important;
position: fixed!important;
inset: 0!important;
margin: auto!important;
width: min(520px,calc(100vw - 32px))!important;
max-height: calc(100vh - 48px)!important;
overflow: auto!important;
padding: 0!important;
border: 0!important;
border-radius: var(--bx-r-l)!important;
background: var(--bx-surface)!important;
color: var(--bx-ink)!important;
box-shadow: 0 30px 80px -20px rgba(12,21,18,.5)!important;
z-index: 100000!important
}
dialog.bx-dialog:not([open]){
display: none!important
}
dialog.bx-dialog::backdrop{
background: rgba(12,21,18,.52)!important
}
.bx-dialog-body{
display: grid!important;
gap: 14px!important;
padding: 26px 26px 8px!important
}
.bx-dialog-body h2{
font-family: var(--bx-font-display)!important;
font-size: 24px!important;
font-weight: 700!important;
letter-spacing: -0.01em!important
}
.bx-dialog-body p{
color: var(--bx-ink-2)!important
}
.bx-dialog-actions{
display: flex!important;
flex-wrap: wrap!important;
justify-content: flex-end!important;
gap: 10px!important;
padding: 18px 26px 24px!important
}
.bx-toast{
position: fixed!important;
left: 50%!important;
bottom: 28px!important;
transform: translateX(-50%)!important;
z-index: 100001!important;
display: flex!important;
align-items: center!important;
gap: 10px!important;
max-width: min(560px,calc(100vw - 32px))!important;
padding: 12px 18px!important;
border-radius: 12px!important;
background: var(--bx-ink)!important;
color: #fff!important;
font-size: 15px!important;
font-weight: 550!important;
box-shadow: 0 16px 40px -16px rgba(12,21,18,.6)!important;
animation: bx-rise .2s ease-out both!important
}
.bx-toast.is-bad{
background: var(--bx-bad)!important
}
.bsms-connection-status{
position: fixed!important;
top: 12px!important;
left: 50%!important;
transform: translateX(-50%)!important;
z-index: 100002!important;
max-width: min(560px,calc(100vw - 32px))!important;
padding: 10px 16px!important;
border-radius: 10px!important;
font: 600 14px/1.4 var(--bx-font)!important;
color: #fff!important;
background: var(--bx-bad)!important;
box-shadow: 0 12px 30px -12px rgba(12,21,18,.5)!important
}
.bsms-connection-status.is-online{
background: var(--bx-good)!important
}
.bsms-connection-status[hidden]{
display: none!important
}
body:has(#bsms-app.bx-app:not(.bx-embedded)){
background: var(--bx-canvas,#f2f5f3)!important;
padding-bottom: 0!important
}
body:has(#bsms-app.bx-app:not(.bx-embedded))>header,body:has(#bsms-app.bx-app:not(.bx-embedded))>footer,body:has(#bsms-app.bx-app:not(.bx-embedded)) :is(.site-header,#masthead,.elementor-location-header,.wp-site-blocks>header,.fusion-header-wrapper,.site-footer,#colophon,.elementor-location-footer,.wp-site-blocks>footer){
display: none!important
}
body:has(#bsms-app.bx-app:not(.bx-embedded)) .wp-site-blocks>.wp-block-template-part:not(:has(#bsms-app)){
display: none!important
}
body:has(#bsms-app.bx-app:not(.bx-embedded)) :is(#page,#primary,#main,#content,.site,.site-main,.content-area,.site-content,.entry-content,.page-content,.wp-block-post-content,.wp-site-blocks,main,article,.elementor,.elementor-section,.elementor-container,.elementor-column,.elementor-widget-wrap,.elementor-widget-container):has(#bsms-app){
max-width: none!important;
width: 100%!important;
margin: 0!important;
padding: 0!important;
border: 0!important;
box-shadow: none!important;
background: transparent!important
}
body:has(#bsms-app.bx-app:not(.bx-embedded)) :is(.is-layout-constrained,.is-layout-flow):has(>#bsms-app)>#bsms-app{
max-width: none!important;
margin: 0!important
}
#bsms-app.bx-app.bx-embedded{
display: block!important;
min-height: 0!important;
background: var(--bx-canvas)!important;
margin: 0 0 0 -20px!important
}
#bsms-app.bx-app.bx-embedded .bx-page{
padding: 24px 28px 48px!important;
max-width: 1240px!important
}
#bsms-app.bx-app.bx-embedded .bsms-page.hidden{
display: none!important
}
@media (max-width: 782px){
#bsms-app.bx-app.bx-embedded{
margin-left: -10px!important
}
#bsms-app.bx-app.bx-embedded .bx-page{
padding: 16px 12px 40px!important
}
}
#bsms-app.bx-app{
display: grid!important;
grid-template-columns: 268px minmax(0,1fr)!important;
align-items: start!important;
width: 100%!important;
max-width: none!important;
min-height: 100vh!important;
margin: 0!important;
padding: 0!important;
background: linear-gradient(to right,var(--bx-deep) 268px,var(--bx-canvas) 268px)!important;
color: var(--bx-ink)!important;
font-family: var(--bx-font)!important;
font-size: var(--bx-text-m)!important;
line-height: 1.5!important;
border: 0!important;
box-shadow: none!important;
overflow: visible!important;
position: relative!important
}
.bx-rail{
position: sticky!important;
top: var(--bx-top-offset)!important;
z-index: 30!important;
display: flex!important;
flex-direction: column!important;
gap: 22px!important;
height: calc(100vh - var(--bx-top-offset))!important;
overflow-y: auto!important;
padding: 22px 14px 18px!important;
background: var(--bx-deep)!important;
color: var(--bx-on-deep)!important;
scrollbar-width: thin!important;
scrollbar-color: rgba(255,255,255,.2) transparent!important
}
.bx-brand{
display: flex!important;
align-items: center!important;
gap: 10px!important;
min-height: 40px!important;
padding: 0 10px!important;
color: #fff!important;
text-decoration: none!important;
font-family: var(--bx-font-display)!important;
font-weight: 700!important;
font-size: 21px!important;
letter-spacing: -0.01em!important
}
.bx-brand img{
display: block!important;
max-height: 38px!important;
max-width: 170px!important;
width: auto!important;
height: auto!important
}
.bx-brand:focus-visible{
outline-color: #fff!important
}
.bx-wallet{
display: grid!important;
gap: 4px!important;
padding: 16px!important;
border-radius: 14px!important;
background: var(--bx-deep-2)!important;
border: 1px solid rgba(255,255,255,.08)!important
}
.bx-wallet-label{
font-size: var(--bx-text-s)!important;
color: var(--bx-on-deep-muted)!important
}
.bx-wallet-amount{
font-family: var(--bx-font-display)!important;
font-size: 27px!important;
font-weight: 700!important;
letter-spacing: -0.02em!important;
font-variant-numeric: tabular-nums!important;
color: #fff!important;
line-height: 1.15!important;
overflow-wrap: anywhere!important
}
.bx-wallet-note{
font-size: var(--bx-text-xs)!important;
color: var(--bx-on-deep-muted)!important
}
.bx-wallet .bx-btn{
margin-top: 10px!important;
min-height: 38px!important;
font-size: var(--bx-text-s)!important;
background: #fff!important;
color: var(--bx-deep)!important;
border-color: #fff!important
}
.bx-wallet .bx-btn:hover{
background: #e9f0ec!important
}
.bx-nav{
display: grid!important;
gap: 18px!important
}
.bx-nav-group{
display: grid!important;
gap: 2px!important
}
.bx-nav-label{
padding: 0 12px 6px!important;
font-size: var(--bx-text-xs)!important;
font-weight: 600!important;
color: var(--bx-on-deep-muted)!important
}
.bx-nav-item{
position: relative!important;
display: flex!important;
align-items: center!important;
gap: 12px!important;
width: 100%!important;
min-height: 40px!important;
padding: 0 12px!important;
border-radius: 9px!important;
color: color-mix(in oklab,#fff 86%,var(--bx-deep))!important;
font-size: 15px!important;
font-weight: 500!important;
text-align: left!important;
text-decoration: none!important
}
.bx-nav-item svg{
opacity: .78!important
}
.bx-nav-item:hover{
background: rgba(255,255,255,.07)!important;
color: #fff!important
}
.bx-nav-item[aria-current="page"]{
background: rgba(255,255,255,.12)!important;
color: #fff!important;
font-weight: 650!important
}
.bx-nav-item[aria-current="page"] svg{
opacity: 1!important
}
.bx-nav-item[aria-current="page"]::before{
content: ""!important;
position: absolute!important;
left: -14px!important;
top: 9px!important;
bottom: 9px!important;
width: 3px!important;
border-radius: 0 3px 3px 0!important;
background: color-mix(in oklab,var(--bx-brand) 50%,#fff)!important
}
.bx-nav-item:focus-visible{
outline-color: #fff!important
}
.bx-rail-foot{
display: grid!important;
gap: 6px!important;
margin-top: auto!important;
padding-top: 16px!important;
border-top: 1px solid rgba(255,255,255,.1)!important
}
.bx-me{
display: flex!important;
align-items: center!important;
gap: 10px!important;
padding: 4px 12px!important;
min-width: 0!important
}
.bx-me-avatar{
display: grid!important;
place-items: center!important;
flex: none!important;
width: 34px!important;
height: 34px!important;
border-radius: 50%!important;
background: rgba(255,255,255,.14)!important;
color: #fff!important;
font-weight: 700!important;
font-size: 14px!important
}
.bx-me-text{
display: grid!important;
min-width: 0!important
}
.bx-me-text strong{
color: #fff!important;
font-size: var(--bx-text-s)!important;
white-space: nowrap!important;
overflow: hidden!important;
text-overflow: ellipsis!important
}
.bx-me-text small{
color: var(--bx-on-deep-muted)!important;
font-size: var(--bx-text-xs)!important;
white-space: nowrap!important;
overflow: hidden!important;
text-overflow: ellipsis!important
}
.bx-main{
display: flex!important;
flex-direction: column!important;
min-width: 0!important;
min-height: 100vh!important
}
.bx-top{
position: sticky!important;
top: var(--bx-top-offset)!important;
z-index: 25!important;
display: flex!important;
align-items: center!important;
justify-content: space-between!important;
gap: 16px!important;
min-height: 64px!important;
padding: 10px 36px!important;
background: color-mix(in srgb,var(--bx-canvas) 90%,transparent)!important;
backdrop-filter: saturate(1.4) blur(10px)!important;
-webkit-backdrop-filter: saturate(1.4) blur(10px)!important;
border-bottom: 1px solid var(--bx-line)!important
}
.bx-crumb{
display: flex!important;
align-items: center!important;
gap: 8px!important;
min-width: 0!important;
font-size: 15px!important;
color: var(--bx-muted)!important
}
.bx-crumb strong{
color: var(--bx-ink)!important;
font-weight: 650!important;
white-space: nowrap!important;
overflow: hidden!important;
text-overflow: ellipsis!important
}
.bx-crumb svg{
color: var(--bx-line-strong)!important
}
.bx-top-actions{
display: flex!important;
align-items: center!important;
gap: 10px!important
}
.bx-top-brand,.bx-menu-btn,.bx-top-balance{
display: none!important
}
.bx-notices{
display: grid!important;
gap: 10px!important;
padding: 18px 36px 0!important;
max-width: 1180px!important
}
.bx-notices:empty{
display: none!important
}
.bx-notice{
display: grid!important;
grid-template-columns: auto minmax(0,1fr) auto!important;
gap: 4px 12px!important;
align-items: start!important;
padding: 14px 16px!important;
border-radius: var(--bx-r-m)!important;
background: var(--bx-surface)!important;
border: 1px solid var(--bx-line)!important;
box-shadow: inset 4px 0 0 var(--bx-info)!important
}
.bx-notice.is-wait{
box-shadow: inset 4px 0 0 var(--bx-wait)!important
}
.bx-notice.is-good{
box-shadow: inset 4px 0 0 var(--bx-good)!important
}
.bx-notice>svg{
margin-top: 2px!important;
color: var(--bx-info)!important
}
.bx-notice.is-wait>svg{
color: var(--bx-wait)!important
}
.bx-notice.is-good>svg{
color: var(--bx-good)!important
}
.bx-notice p{
color: var(--bx-ink-2)!important;
font-size: 15px!important
}
.bx-notice-close{
display: grid!important;
place-items: center!important;
width: 32px!important;
height: 32px!important;
border-radius: 8px!important;
color: var(--bx-muted)!important
}
.bx-notice-close:hover{
background: var(--bx-sunken)!important;
color: var(--bx-ink)!important
}
#bsms-app.bx-app .bsms-page{
min-width: 0!important
}
#bsms-app.bx-app .bsms-page:not(:has(>.bx)){
padding: 24px 36px 64px!important
}
#bsms-app.bx-app .bsms-page:has(>.bx){
padding: 0!important;
margin: 0!important;
max-width: none!important;
background: transparent!important;
border: 0!important;
box-shadow: none!important
}
.bx-dock{
display: none!important
}
.bx-scrim{
display: none!important
}
@media (max-width: 1080px){
.bx-split,.bx-split.is-even{
grid-template-columns: minmax(0,1fr)!important
}
.bx-aside{
position: static!important
}
.bx-aside>.bx-slip{
order: -1!important
}
}
@media (max-width: 960px){
#bsms-app.bx-app{
display: block!important;
background: var(--bx-canvas)!important
}
.bx-rail{
position: fixed!important;
left: 0!important;
top: var(--bx-top-offset)!important;
bottom: 0!important;
height: auto!important;
width: min(300px,86vw)!important;
transform: translateX(-100%)!important;
visibility: hidden!important;
transition: transform .22s ease,visibility 0s linear .22s!important;
box-shadow: 24px 0 60px -30px rgba(0,0,0,.5)!important;
z-index: 1001!important
}
#bsms-app.bx-app.is-nav-open .bx-rail{
transform: none!important;
visibility: visible!important;
transition: transform .22s ease!important
}
#bsms-app.bx-app.is-nav-open .bx-scrim{
display: block!important;
position: fixed!important;
inset: 0!important;
z-index: 1000!important;
background: rgba(12,21,18,.45)!important
}
.bx-top{
padding: 8px 12px 8px 8px!important;
min-height: 58px!important
}
.bx-crumb{
display: none!important
}
.bx-menu-btn{
display: inline-grid!important;
place-items: center!important;
width: 44px!important;
height: 44px!important;
border-radius: 10px!important;
color: var(--bx-ink)!important
}
.bx-menu-btn:hover{
background: var(--bx-sunken)!important
}
.bx-top-brand{
display: flex!important;
align-items: center!important;
gap: 4px!important;
flex: 1!important;
min-width: 0!important;
font-family: var(--bx-font-display)!important;
font-weight: 700!important;
font-size: 19px!important;
color: var(--bx-ink)!important;
text-decoration: none!important;
white-space: nowrap!important;
overflow: hidden!important;
text-overflow: ellipsis!important
}
.bx-top-brand img{
max-height: 30px!important;
max-width: 130px!important;
width: auto!important
}
.bx-top-balance{
display: inline-flex!important;
align-items: center!important;
min-height: 36px!important;
padding: 0 12px!important;
border-radius: 999px!important;
background: var(--bx-surface)!important;
border: 1px solid var(--bx-line)!important;
font-weight: 650!important;
font-size: var(--bx-text-s)!important;
font-variant-numeric: tabular-nums!important;
color: var(--bx-ink)!important
}
.bx-top-actions .bx-btn.is-primary,.bx-top-actions .bx-btn.is-quiet{
display: none!important
}
.bx-page{
padding: 20px 16px 104px!important
}
.bx-notices{
padding: 12px 16px 0!important
}
#bsms-app.bx-app .bsms-page:not(:has(>.bx)){
padding: 16px 16px 104px!important
}
.bx-dock{
position: fixed!important;
left: 0!important;
right: 0!important;
bottom: 0!important;
z-index: 999!important;
display: grid!important;
grid-template-columns: repeat(5,1fr)!important;
padding: 6px 6px calc(6px + env(safe-area-inset-bottom))!important;
background: var(--bx-surface)!important;
border-top: 1px solid var(--bx-line)!important;
box-shadow: 0 -10px 30px -20px rgba(12,21,18,.35)!important
}
.bx-dock button{
display: grid!important;
justify-items: center!important;
gap: 2px!important;
min-height: 52px!important;
padding: 6px 2px!important;
border-radius: 10px!important;
color: var(--bx-muted)!important;
font-size: 12px!important;
font-weight: 600!important
}
.bx-dock button[aria-current="page"]{
color: var(--bx-brand-ink)!important;
background: var(--bx-brand-wash)!important
}
.bx-dock button.is-send{
color: #fff!important;
background: var(--bx-brand)!important
}
.bx-head{
margin-bottom: 20px!important
}
.bx-panel{
padding: 18px!important
}
.bx-balance{
grid-template-columns: minmax(0,1fr)!important;
padding: 22px!important
}
.bx-step{
grid-template-columns: 28px minmax(0,1fr)!important;
gap: 4px 12px!important
}
.bx-step-num{
width: 28px!important;
height: 28px!important
}
.bx-step-body{
grid-column: 1 / -1!important
}
}
@media (max-width: 720px){
.bx-tr{
grid-template-columns: minmax(0,1fr) auto!important;
padding: 14px 16px!important
}
.bx-tr.is-head{
display: none!important
}
.bx-tr>[data-label]{
display: grid!important;
grid-template-columns: minmax(96px,38%) minmax(0,1fr)!important;
gap: 10px!important;
grid-column: 1 / -1!important;
text-align: left!important;
justify-self: stretch!important
}
.bx-tr>[data-label]>.bx-pill,.bx-tr>[data-label] .bx-pill{
justify-self: start!important;
width: max-content!important
}
.bx-tr>[data-label]::before{
content: attr(data-label)!important;
color: var(--bx-muted)!important;
font-size: var(--bx-text-s)!important;
font-weight: 550!important
}
.bx-tr>[data-label].is-num{
text-align: left!important
}
.bx-tr>.bx-td-lead{
grid-column: 1 / -1!important
}
.bx-tr>.bx-td-lead::before{
display: none!important
}
.bx-tr>.bx-td-lead[data-label]{
display: grid!important;
grid-template-columns: minmax(0,1fr)!important
}
.bx-tr>.bx-td-actions{
grid-column: 1 / -1!important;
justify-self: start!important
}
.bx-filters>.bx-field:first-child{
flex-basis: 100%!important
}
.bx-filter-actions{
flex: 1 1 100%!important
}
.bx-filter-actions .bx-btn{
flex: 1!important
}
.bx-stat{
padding: 14px 16px!important
}
.bx-stat-value{
font-size: 23px!important
}
.bx-stats{
grid-template-columns: repeat(2,minmax(0,1fr))!important
}
.bx-stat{
border-top: 1px solid var(--bx-line)!important;
margin-top: -1px!important
}
.bx-slip-total strong{
font-size: 30px!important
}
.bx-item-body{
padding: 4px 16px 18px!important
}
.bx-line-item{
padding: 14px 16px!important
}
.bx-head-actions{
width: 100%!important
}
.bx-head-actions .bx-btn{
flex: 1 1 auto!important
}
.bx-search{
flex-direction: column!important
}
}
}
@layer bx-comp{
.bx-auth{
display: block!important;
padding: clamp(20px,4vw,56px) 16px!important;
background: var(--bx-canvas)!important;
color: var(--bx-ink)!important;
font-family: var(--bx-font)!important;
font-size: 16px!important;
line-height: 1.5!important;
border-radius: var(--bx-r-l)!important
}
.bx-auth-grid{
display: grid!important;
gap: 24px!important;
max-width: 460px!important;
margin: 0 auto!important;
align-items: start!important
}
.bx-auth.has-panel .bx-auth-grid{
max-width: 1060px!important;
grid-template-columns: minmax(0,460px) minmax(0,1fr)!important;
gap: clamp(24px,5vw,64px)!important
}
.bx-auth-card{
display: grid!important;
gap: 20px!important;
padding: clamp(24px,4vw,40px)!important;
background: var(--bx-surface)!important;
border: 1px solid var(--bx-line)!important;
border-radius: var(--bx-r-l)!important;
min-width: 0!important
}
.bx-auth-brand{
display: inline-flex!important;
align-items: center!important;
gap: 10px!important;
justify-self: start!important;
color: var(--bx-ink)!important;
font-weight: 650!important;
font-size: 16px!important;
text-decoration: none!important
}
.bx-auth-brand:focus-visible{
outline: none!important;
box-shadow: var(--bx-ring)!important;
border-radius: 8px!important
}
.bx-auth-brand img{
display: block!important;
max-height: 36px!important;
width: auto!important
}
.bx-auth-tile{
display: grid!important;
place-items: center!important;
width: 36px!important;
height: 36px!important;
border-radius: 10px!important;
background: var(--bx-brand)!important;
color: #fff!important;
font-family: var(--bx-font-display)!important;
font-size: 18px!important;
font-weight: 700!important
}
.bx-auth .bx-auth-title{
margin: 12px 0 0!important;
font-family: var(--bx-font-display)!important;
font-size: clamp(32px,2.4vw + 20px,44px)!important;
line-height: 1.02!important;
letter-spacing: -0.025em!important;
font-weight: 700!important;
color: var(--bx-ink)!important
}
.bx-auth-lede{
margin: -8px 0 0!important;
color: var(--bx-muted)!important;
font-size: 16px!important;
line-height: 1.5!important;
max-width: 40ch!important
}
.bx-auth-form{
display: grid!important;
gap: 18px!important;
margin: 0!important
}
.bx-auth-password{
position: relative!important;
display: block!important
}
.bx-auth-password .bx-input{
padding-right: 80px!important
}
.bx-auth-toggle{
position: absolute!important;
top: 50%!important;
right: 6px!important;
transform: translateY(-50%)!important;
min-height: 34px!important;
padding: 0 12px!important;
border: 0!important;
border-radius: 8px!important;
background: var(--bx-sunken)!important;
color: var(--bx-ink-2)!important;
font-family: var(--bx-font)!important;
font-size: 14px!important;
font-weight: 600!important;
cursor: pointer!important
}
.bx-auth-toggle:hover{
background: var(--bx-line)!important
}
.bx-auth-toggle:focus-visible{
outline: none!important;
box-shadow: var(--bx-ring)!important
}
.bx-auth-under{
margin-top: -12px!important
}
.bx-auth-row{
display: flex!important;
flex-wrap: wrap!important;
align-items: center!important;
justify-content: space-between!important;
gap: 10px 16px!important
}
.bx-auth-actions{
display: grid!important;
gap: 10px!important
}
.bx-auth-switch{
margin: 0!important;
color: var(--bx-muted)!important;
text-align: center!important
}
.bx-auth .bx-note{
grid-template-columns: minmax(0,1fr)!important
}
.bx-auth .bsms-hp-field{
position: absolute!important;
left: -10000px!important;
width: 1px!important;
height: 1px!important;
overflow: hidden!important
}
.bx-auth .bsms-recaptcha-wrap{
max-width: 100%!important;
overflow-x: auto!important
}
.bx-auth-panel{
position: sticky!important;
top: 24px!important;
display: grid!important;
gap: 14px!important;
align-content: start!important;
padding: clamp(24px,4vw,44px)!important;
border-radius: var(--bx-r-l)!important;
background: var(--bx-deep)!important;
color: var(--bx-on-deep)!important;
min-width: 0!important
}
.bx-auth-panel h2{
margin: 0!important;
font-family: var(--bx-font-display)!important;
font-size: clamp(22px,1vw + 16px,28px)!important;
line-height: 1.15!important;
letter-spacing: -0.015em!important;
font-weight: 700!important;
color: var(--bx-on-deep)!important
}
.bx-auth-panel>p{
margin: 0!important;
max-width: 46ch!important;
color: var(--bx-on-deep-muted)!important
}
.bx-auth-thread,.bx-auth-steps{
display: grid!important;
margin: 10px 0 0!important;
padding: 0!important;
list-style: none!important
}
.bx-auth-thread{
gap: 12px!important
}
.bx-auth-sms{
display: grid!important;
gap: 6px!important;
max-width: 440px!important;
padding: 12px 16px 14px!important;
border-radius: 18px 18px 18px 6px!important;
background: color-mix(in oklab,var(--bx-on-deep) 9%,var(--bx-deep))!important;
border: 1px solid color-mix(in oklab,var(--bx-on-deep) 15%,var(--bx-deep))!important;
animation: bx-rise .5s cubic-bezier(.2,.7,.2,1) both!important
}
.bx-auth-sms:nth-child(2){
animation-delay: .12s!important
}
.bx-auth-sms:nth-child(3){
animation-delay: .24s!important
}
.bx-auth-from{
font-size: 13px!important;
font-weight: 700!important;
letter-spacing: .04em!important;
color: var(--bx-on-deep-muted)!important
}
.bx-auth-sms p{
margin: 0!important;
color: var(--bx-on-deep)!important;
line-height: 1.45!important
}
.bx-auth-sms .bx-pill{
justify-self: start!important
}
.bx-auth-steps{
gap: 20px!important
}
.bx-auth-steps li{
display: grid!important;
grid-template-columns: 34px minmax(0,1fr)!important;
gap: 14px!important;
align-items: start!important
}
.bx-auth-num{
display: grid!important;
place-items: center!important;
width: 34px!important;
height: 34px!important;
border-radius: 999px!important;
border: 1.5px solid color-mix(in oklab,var(--bx-on-deep) 35%,var(--bx-deep))!important;
color: var(--bx-on-deep)!important;
font-weight: 700!important;
font-variant-numeric: tabular-nums!important
}
.bx-auth-steps strong{
display: block!important;
color: var(--bx-on-deep)!important;
font-weight: 650!important
}
.bx-auth-steps li span:not(.bx-auth-num){
display: block!important;
color: var(--bx-on-deep-muted)!important;
font-size: 15px!important
}
@media (max-width: 860px){
.bx-auth.has-panel .bx-auth-grid{
grid-template-columns: minmax(0,1fr)!important;
max-width: 460px!important
}
.bx-auth-panel{
position: static!important
}
}
@media (max-width: 480px){
.bx-auth{
padding: 12px 0!important;
background: transparent!important
}
.bx-auth-card{
border: 0!important;
padding: 20px 16px!important
}
}
@media (prefers-reduced-motion: reduce){
.bx-auth-sms{
animation: none!important
}
}
}
@layer bx-util{
.bx [hidden],.bx[hidden],#bsms-app.bx-app [hidden].bx{
display: none!important
}
.bx .bx-sr,.bx-sr{
position: absolute!important;
width: 1px!important;
height: 1px!important;
padding: 0!important;
margin: -1px!important;
overflow: hidden!important;
clip: rect(0 0 0 0)!important;
white-space: nowrap!important;
border: 0!important
}
#bsms-app.bx-app .bsms-page.hidden{
display: none!important
}
.bx .bx-mt-0{
margin-top: 0!important
}
.bx .bx-mt-s{
margin-top: 12px!important
}
.bx .bx-mt-m{
margin-top: 18px!important
}
body:has(#bsms-app.bx-app:not(.bx-embedded)){
margin: 0!important;
padding: 0!important;
overflow: visible!important;
overflow-x: clip!important
}
body *:has(#bsms-app.bx-app:not(.bx-embedded)){
overflow: visible!important
}
body *:has(#bsms-app.bx-app:not(.bx-embedded)){
padding: 0!important;
margin: 0!important;
max-width: none!important;
width: auto!important;
min-width: 0!important;
border: 0!important;
gap: 0!important
}
body:has(#bsms-app.bx-app:not(.bx-embedded)) :is(.wp-block-post-title,.entry-header,.page-header,h1.entry-title){
display: none!important
}
body.wp-admin:has(#bsms-app.bx-embedded){
overflow: visible!important;
height: auto!important
}
.bx-skip{
position: absolute!important;
left: 12px!important;
top: -100px!important;
z-index: 100002!important;
padding: 10px 16px!important;
border-radius: 10px!important;
background: var(--bx-ink,#17201c)!important;
color: #fff!important;
font-weight: 600!important;
text-decoration: none!important
}
.bx-skip:focus{
top: 12px!important
}
@media (prefers-reduced-motion: reduce){
.bx *,.bx *::before,.bx *::after,.bx{
animation-duration: .001ms!important;
animation-iteration-count: 1!important;
transition-duration: .001ms!important;
scroll-behavior: auto!important
}
}
}