.payments-workspace{background:#f4f7f6;min-width:0}.payments-topbar{height:auto;min-height:108px;padding:22px 30px;background:#fff;gap:14px;flex-wrap:wrap}.payments-topbar .topbar__title{min-width:280px;margin-right:auto}.payments-topbar h1{font-size:28px}.payments-prototype{padding:7px 10px;border:1px solid #cadfdd;border-radius:4px;background:#edf6f5;color:#426568;font-size:12px;font-weight:700}.payments-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:20px 24px}.payments-metrics article{min-height:118px;padding:18px 20px;border:1px solid #dce5e3;border-radius:8px;background:#fff;box-shadow:0 7px 20px rgba(30,55,57,.05)}.payments-metrics span,.payments-metrics small{display:block;color:#718084}.payments-metrics span{font-size:13px;font-weight:650}.payments-metrics b{display:block;margin:10px 0 7px;font-size:27px;letter-spacing:-.4px}.payments-metrics small{font-size:12px;line-height:1.4}.payments-metrics .is-danger{border-color:#efd8d5;background:#fffafa}.payments-metrics .is-danger b{color:#b83c35}.payments-tabs{display:flex;gap:4px;margin:0 24px;padding:0 4px;border-bottom:1px solid #d7e0df;overflow-x:auto;scrollbar-width:thin}.payments-tabs button{min-height:44px;padding:0 13px;border:0;border-bottom:3px solid transparent;background:transparent;color:#657477;white-space:nowrap;cursor:pointer}.payments-tabs button b{display:inline-grid;min-width:20px;height:20px;margin-left:5px;place-items:center;border-radius:10px;background:#e7edec;color:#667578;font-size:11px}.payments-tabs button[aria-selected=true]{border-bottom-color:#08737a;color:#075d63;font-weight:700}.payments-tabs button[aria-selected=true] b{background:#d7ecea;color:#075d63}.payments-workarea{display:grid;grid-template-columns:minmax(720px,1fr) 330px;gap:16px;padding:18px 24px 30px}.payments-list,.payment-detail{border:1px solid #dce5e3;border-radius:8px;background:#fff;box-shadow:0 7px 22px rgba(30,55,57,.05)}.payments-list{min-width:0;overflow:hidden}.payments-list-head,.payment-row{display:grid;grid-template-columns:minmax(160px,1.45fr) minmax(100px,.86fr) minmax(94px,.75fr) minmax(104px,.82fr) minmax(88px,.7fr) minmax(122px,1fr) minmax(76px,.66fr);align-items:center;column-gap:12px}.payments-list-head{min-height:48px;padding:0 14px;border-bottom:1px solid #e2e8e7;background:#f8faf9;color:#7b888a;font-size:10px;font-weight:750;letter-spacing:.03em;text-transform:uppercase}.payment-row{width:100%;min-height:76px;padding:11px 14px;border:0;border-bottom:1px solid #e6ebea;background:#fff;color:inherit;text-align:left;cursor:pointer}.payment-row:last-child{border-bottom:0}.payment-row:hover{background:#f6fbfa}.payment-row.is-selected{background:#edf7f6;box-shadow:inset 3px 0 #08737a}.payment-row span,.payment-row time{min-width:0}.payment-row b,.payment-row small{display:block}.payment-row b{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.payment-row small{margin-top:5px;overflow:hidden;color:#788689;font-size:10px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.payment-money{font-size:12px;font-weight:700;white-space:nowrap}.payment-row time{font-size:11px;color:#5c696c}.payment-row time.is-overdue{color:#bc3e37;font-weight:700}.payment-status{display:inline-block;max-width:100%;padding:6px 8px;border-radius:11px;background:#edf1f0;color:#536164;font-size:9px;font-style:normal;font-weight:800;line-height:1.15;text-align:center}.payment-status.is-waiting{background:#fff2d9;color:#8b5a0b}.payment-status.is-partial{background:#e5eff8;color:#386484}.payment-status.is-reconcile{background:#f3e8f8;color:#75548a}.payment-status.is-overdue{background:#fde8e5;color:#a63b34}.payment-status.is-confirmed{background:#e4f3ea;color:#28734c}.payments-empty{padding:30px;text-align:center;color:#718084}.payment-detail{align-self:start;padding:20px;position:sticky;top:16px}.payment-detail header{padding-bottom:17px;border-bottom:1px solid #e1e7e6}.payment-detail header>span{display:inline-block;padding:5px 8px;border-radius:10px;background:#fff2d9;color:#875b14;font-size:10px;font-weight:800}.payment-detail h2{margin:12px 0 5px;font-size:22px}.payment-detail header p{margin:0;color:#748184;font-size:12px}.payment-detail dl{margin:0;padding:10px 0;border-bottom:1px solid #e1e7e6}.payment-detail dl div{display:flex;justify-content:space-between;gap:14px;padding:7px 0}.payment-detail dt{color:#778588;font-size:11px}.payment-detail dd{margin:0;font-size:12px;font-weight:800}.payment-detail section{padding:15px 0;border-bottom:1px solid #e1e7e6}.payment-detail h3{margin:0 0 8px;font-size:12px}.payment-detail section p{margin:0 0 5px;font-size:12px;font-weight:700}.payment-detail section small{color:#788689;font-size:10px}.payment-detail ol{margin:0;padding:0;list-style:none}.payment-detail li{position:relative;margin:0;padding:5px 0 8px 21px;color:#667477;font-size:10px;line-height:1.35}.payment-detail li:before{content:'';position:absolute;left:2px;top:8px;width:8px;height:8px;border:2px solid #c1cecc;border-radius:50%;background:#fff}.payment-detail li:after{content:'';position:absolute;left:7px;top:20px;bottom:-3px;width:1px;background:#d8e1df}.payment-detail li:last-child:after{display:none}.payment-detail li.is-done:before{border-color:#338a5c;background:#338a5c}.payment-detail li.is-current{color:#182326;font-weight:750}.payment-detail li.is-current:before{border-color:#08737a}.payment-detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:17px}.payment-detail-actions .button{display:grid;place-items:center;padding:0 8px;text-decoration:none;font-size:11px;text-align:center}.payments-demo-status{margin:12px 0 0;color:#7b888a;font-size:9px;line-height:1.4}.payments-demo-status:not(:empty){min-height:26px}

@media(max-width:1180px){html,body{min-width:0}.payments-workarea{grid-template-columns:1fr}.payment-detail{position:static}.payments-list{overflow-x:auto}.payments-list-head,.payment-row{min-width:810px}.payments-metrics{grid-template-columns:repeat(3,minmax(180px,1fr))}}
@media(max-width:720px){.payments-workspace{width:calc(100% - 64px);margin-left:64px}.payments-topbar{padding:17px 14px;gap:9px}.payments-topbar .topbar__title{min-width:100%;width:100%}.payments-topbar h1{font-size:23px}.payments-topbar p{font-size:12px}.payments-prototype{order:2;width:100%;font-size:10px}.payments-topbar .button{flex:1;padding:0 8px;font-size:11px}.payments-metrics{grid-template-columns:1fr;padding:14px;gap:9px}.payments-metrics article{min-height:96px;padding:14px 16px}.payments-metrics b{font-size:23px}.payments-tabs{margin:0 14px}.payments-workarea{padding:14px;gap:12px}.payments-list{overflow:visible;border:0;background:transparent;box-shadow:none}.payments-list-head{display:none}.payment-row{display:grid;grid-template-columns:1fr auto;gap:8px 12px;min-width:0;min-height:0;margin-bottom:9px;padding:13px;border:1px solid #dce5e3;border-radius:7px}.payment-row>span:nth-child(1){grid-column:1/2}.payment-row>span:nth-child(2){grid-column:1/2}.payment-row>span:nth-child(3){grid-column:2/3;grid-row:1;text-align:right}.payment-row>span:nth-child(4){grid-column:2/3;grid-row:2;text-align:right}.payment-row>span:nth-child(4):before{content:'Сейчас ';color:#829092;font-size:9px;font-weight:400}.payment-row>span:nth-child(5){display:none}.payment-row>span:nth-child(6){grid-column:1/2}.payment-row>time{grid-column:2/3;text-align:right}.payment-row b,.payment-money{font-size:11px}.payment-row small{white-space:normal}.payment-detail{padding:16px}.payment-detail-actions{grid-template-columns:1fr}.payments-tabs button{padding:0 10px;font-size:11px}}

.payment-row-balance{display:none}.payment-detail header>[data-detail-status]{font-size:10px}.payment-detail header>.payment-status.is-waiting{background:#fff2d9;color:#8b5a0b}.payment-detail header>.payment-status.is-partial{background:#e5eff8;color:#386484}.payment-detail header>.payment-status.is-reconcile{background:#f3e8f8;color:#75548a}.payment-detail header>.payment-status.is-overdue{background:#fde8e5;color:#a63b34}.payment-detail header>.payment-status.is-confirmed{background:#e4f3ea;color:#28734c}.payment-detail section .payment-detail-owner{margin-bottom:8px;color:#53696c;font-size:10px;font-weight:650}
@media(max-width:720px){.payments-tabs{flex-wrap:wrap;overflow-x:visible}.payment-row>.payment-row-balance{display:block;grid-column:1/3;padding-top:7px;border-top:1px dashed #d7e2e0;color:#66777a;font-size:9px}}
.payments-tabs button[aria-pressed=true]{border-bottom-color:#08737a;color:#075d63;font-weight:700}.payments-tabs button[aria-pressed=true] b{background:#d7ecea;color:#075d63}
