/* MoySklad clone: layout and tokens follow docs/DESIGN.md (snapshot of online.moysklad.ru). */ :root { --top-bg: #1F75A8; --top-text: #C6DDEA; --link: #186999; --link-new: #1F75A8; --text: #222; --muted: #999; --border: #BFBFBF; --grid-line: #E3E3E3; --accent: #EE644A; --green: #A2C617; --green-border: #8FAE14; --progress: #82B54B; --tab-blue: #036CE5; --pos-head: #5F6D79; --pos-text: #091739; --hl: #E8541E; --font: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-grid: Tahoma, Arial, sans-serif; --font-new: "ALS Hauss", "Segoe UI", Roboto, Arial, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* the page scrolls sideways as a whole when a list is wider than the window (the original's 2640 px orders); the blue bar and the sub menu's line run on past the window, their items stay where the window put them; under a page shorter than the window it is white (the bar must not start over) */ html { background: #fff linear-gradient(var(--top-bg) 0 58px, #fff 58px 98px, #ECECEC 98px 99px, #fff 99px) repeat-x; } body { font: 12px var(--font); color: var(--text); background: #fff; } a { color: var(--link); } button { font: inherit; } input, textarea, select { font: 12px Arial, sans-serif; color: #000; } textarea { font-family: var(--font); color: var(--text); } .hidden { display: none !important; } svg.ic { display: inline-block; vertical-align: middle; flex: none; } /* ------------------------------------------------------------ top bar */ #top { height: 58px; background: var(--top-bg); display: flex; align-items: stretch; color: #fff; position: relative; z-index: 20; } #top .logo { width: 58px; display: flex; align-items: center; justify-content: center; } #top .menu { display: flex; align-items: stretch; } .top-item { min-width: 68px; padding: 0 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--top-text); font-size: 11px; text-decoration: none; cursor: pointer; white-space: nowrap; border-radius: 3px 3px 0 0; } .top-item:hover { color: #fff; } .top-item.selected { background: rgba(0, 0, 0, .15); color: #fff; } .top-item.off { opacity: .45; cursor: default; } .top-item.off:hover { color: var(--top-text); } #top .right { margin-left: auto; display: flex; align-items: center; gap: 0; padding-right: 30px; } #top .user { text-align: right; cursor: pointer; line-height: 14px; position: relative; } #top .user .name { font-size: 12px; color: #fff; } #top .user .login { font-size: 11px; color: var(--top-text); } #top .avatar { width: 36px; height: 36px; border-radius: 50%; background: #C9D7E1; display: flex; align-items: center; justify-content: center; } /* ------------------------------------------------------------ sub menu */ #sub { min-height: 40px; border-bottom: 1px solid #ECECEC; display: flex; flex-wrap: wrap; padding: 0 0 0 20px; background: #fff; } #sub.nowrap { flex-wrap: nowrap; } .sub-item { height: 40px; line-height: 38px; margin-right: 40px; font-size: 13px; color: var(--link-new); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; } .sub-item.active { border-bottom-color: var(--top-bg); color: var(--top-bg); } .sub-item.off { color: #9DBCD0; cursor: default; } #page { padding-bottom: 40px; } #page > .route { display: contents; } /* a page with nothing to show by its address (core.js Notice) */ .page-note { padding: 30px 40px; color: #555; line-height: 18px; } .page-note a { display: inline-block; margin-top: 8px; } /* a payment's paid document the clone does not keep or the role does not see (doc.js operationsEditor) */ tr.op-off .g { color: #888; } /* ------------------------------------------------------------ buttons */ .btn { height: 28px; padding: 0 10px; border: 1px solid #CCC; border-radius: 3px; background: linear-gradient(#FDFDFD, #EDEDED); font-size: 12px; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .btn:hover { background: linear-gradient(#FFF, #E4E4E4); } .btn:disabled, .btn.disabled { color: #B5B5B5; cursor: default; background: linear-gradient(#FDFDFD, #F2F2F2); } .btn.primary { background: linear-gradient(#B3D334, var(--green)); border-color: var(--green-border); color: #fff; } .btn.primary:hover { background: linear-gradient(#BEDC45, #97BA12); } .btn .caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: #555; border-bottom: 0; margin-left: -1px; } /* 5 px after the text: «Изменить» 89 px, as on the original's lists (cards: .card-tools) */ .btn.primary .caret { border-top-color: #fff; } .btn-group { display: inline-flex; } .btn-group > .btn { border-radius: 0; margin-left: -1px; } .btn-group > .btn:first-child { border-radius: 3px 0 0 3px; margin-left: 0; } .btn-group > .btn:last-child { border-radius: 0 3px 3px 0; } /* a pressed button of a group (the stock report's «По товарам» | «По складам») */ .btn.pressed, .btn.pressed:hover { background: #DADADA; border-color: transparent; box-shadow: inset 0 1px 3px #333; padding: 1px 9px 1px 12px; } .btn .plus { width: 14px; height: 14px; border-radius: 50%; background: #1E88D3; position: relative; flex: none; } .btn .plus.orange { background: #F2A019; } .btn .plus::before, .btn .plus::after { content: ""; position: absolute; background: #fff; left: 3px; right: 3px; top: 6px; height: 2px; } .btn .plus::after { left: 6px; right: auto; width: 2px; top: 3px; bottom: 3px; height: auto; } .sel-count { width: 48px; height: 28px; border: 1px solid #CCC; border-radius: 3px 0 0 3px; display: inline-flex; align-items: center; justify-content: center; background: #fff; } .icon-btn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--link-new); display: inline-flex; align-items: center; } .link { color: var(--link); cursor: pointer; text-decoration: underline; background: none; border: 0; padding: 0; font: inherit; } .link-new { color: var(--link-new); cursor: pointer; background: none; border: 0; padding: 0; font: 14px var(--font-new); } /* ------------------------------------------------------------ inputs */ .inp { height: 21px; border: 1px solid var(--border); border-radius: 0; padding: 0 3px; background: #fff; outline: none; } .inp:focus, .ta:focus { border-color: #5B9DD9; box-shadow: 0 0 2px #5B9DD9; } .inp.num { text-align: right; } .inp.err, .ref.err, .date.err { border-color: #E2453C; background: #FFF3F2; } .ta { border: 1px solid var(--border); padding: 3px; resize: vertical; outline: none; min-height: 36px; } .inp:disabled, .ta:disabled { background: #EEE; } .search { width: 206px; height: 23px; border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; font: 12px Arial, sans-serif; outline: none; } /* reference select: text, × and ▾ in one frame, pencil or + beside it */ .ref, .date { display: inline-flex; align-items: center; height: 21px; border: 1px solid var(--border); background: #fff; vertical-align: middle; flex: none; } .ref input, .date input { flex: 1; min-width: 0; height: 19px; border: 0; padding: 0 3px; background: transparent; outline: none; } .ref:focus-within, .date:focus-within { border-color: #5B9DD9; box-shadow: 0 0 2px #5B9DD9; } .ref.dis { background: #EEE; } .ref .clear { width: 7px; height: 19px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #999; font: bold 14px Arial, sans-serif; } .ref .open { width: 18px; height: 19px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .ref .open::after { content: ""; border-style: solid; border-width: 5px 4px 0; border-color: #7B7B7B transparent transparent; } .field-tools { display: inline-flex; align-items: center; gap: 6px; margin-left: 5px; } .gl { display: inline-flex; } .gl svg { display: block; } /* above the windows (.overlay 200, the side sheet .sd 301): a reference picked inside one */ .dd { position: absolute; z-index: 310; background: #fff; border: 1px solid #C5C5C5; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); max-height: 320px; overflow-y: auto; min-width: 160px; } .dd .opt { padding: 4px 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dd .opt:hover, .dd .opt.cur { background: #E5F1F8; } .dd .opt.empty { color: var(--muted); cursor: default; background: none; } .dd .opt .sub { color: var(--muted); margin-left: 6px; } /* date input: calendar glyph and the text in one frame */ .date { height: 22px; } .date .cal { display: flex; cursor: pointer; padding-left: 1px; } .date.plain { border-color: transparent; } .date.plain:hover, .date.plain:focus-within { border-color: var(--border); } .calendar { position: absolute; z-index: 110; background: #fff; border: 1px solid #C5C5C5; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); padding: 6px; font-size: 12px; } .calendar .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-weight: bold; } .calendar .head button { background: none; border: 0; cursor: pointer; font-size: 14px; color: var(--link); } .calendar table { border-collapse: collapse; } .calendar td, .calendar th { width: 26px; height: 22px; text-align: center; } .calendar th { color: var(--muted); font-weight: normal; } .calendar td { cursor: pointer; } .calendar td:hover { background: #E5F1F8; } .calendar td.other { color: #BBB; } .calendar td.sel { background: var(--top-bg); color: #fff; } .calendar td.today { outline: 1px solid var(--top-bg); } .calendar .time { margin-top: 6px; display: flex; gap: 6px; align-items: center; } /* popup menu */ .menu-pop { position: absolute; z-index: 120; background: #fff; border: 1px solid #C5C5C5; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); padding: 4px 0; min-width: 150px; } .menu-pop .mi { padding: 5px 14px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; } .menu-pop .mi:hover { background: #E5F1F8; } .menu-pop .mi.dis { color: #B5B5B5; cursor: default; background: none; } .menu-pop .sep { border-top: 1px solid #E3E3E3; margin: 4px 0; } .menu-pop .swatch { width: 10px; height: 10px; flex: none; } /* a list line's ⋮ menu (the stock report's), measured in the original */ .menu-pop.row { min-width: 0; padding: 0; border-color: #999; box-shadow: 0 1px 3px #C8C8C8; } .menu-pop.row .mi { padding: 4px 15px; line-height: 15px; } /* toast and modal */ #toasts { position: fixed; right: 20px; top: 70px; z-index: 300; display: flex; flex-direction: column; gap: 8px; } .toast { min-width: 260px; max-width: 420px; padding: 10px 14px; background: #fff; border-left: 4px solid var(--progress); box-shadow: 0 3px 10px rgba(0, 0, 0, .25); font-size: 13px; white-space: pre-line; } .toast.err { border-left-color: #E2453C; } .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding-top: 80px; } .modal { background: #fff; min-width: 420px; max-width: 92vw; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); } .modal .mh { padding: 14px 20px; font-size: 18px; border-bottom: 1px solid #E3E3E3; display: flex; justify-content: space-between; } .modal .mh .x { cursor: pointer; color: #777; } .modal .mb { padding: 16px 20px; overflow: auto; } .modal .mf { padding: 12px 20px; border-top: 1px solid #E3E3E3; display: flex; gap: 8px; } /* «Массовое редактирование» (massedit.js): a tick per field, the unticked ones pale */ .me { font-size: 13px; } .me-count { font-weight: 600; margin-bottom: 6px; } .me-help { color: #555; margin-bottom: 12px; line-height: 1.4; } .me-title { font-size: 15px; margin: 4px 0 10px; } .me-fields { border-collapse: collapse; } .me-fields td { padding: 4px 6px; vertical-align: middle; } .me-fields .me-label { width: 170px; } .me-row.off .me-label, .me-row.off .me-ed { opacity: .55; } .me-note { color: #777; margin-top: 10px; } .me-sum { border-collapse: collapse; min-width: 420px; } .me-sum th, .me-sum td { text-align: left; padding: 5px 8px; border-bottom: 1px solid #E3E3E3; } .me-sum th { color: #777; font-weight: normal; } .me-clear { color: #C0392B; } .me-bool { display: inline-flex; align-items: center; gap: 4px; } /* a section of the catalogs' fields (the original's bulk-edit-block-header) */ .me-head td { font-weight: 600; padding: 14px 6px 4px; } .me-link td { padding: 2px 6px 4px; } .me-row.dis .me-label, .me-row.dis .me-ed { opacity: .35; pointer-events: none; } .me-hint td { padding: 0 6px 4px; font-size: 11px; color: #888; } /* in-page editor of a reference (the original's dialog box): a white sheet 48px in from the sides and 28px from top and bottom, title 20px bold, the form under it, Создать/Сохранить and Отмена at the very foot */ .sheet-ov { position: fixed; inset: 0; z-index: 50; background: rgba(1, 4, 11, .36); } .sheet { position: absolute; top: 28px; bottom: 28px; left: 48px; right: 47px; padding: 0 15px; background: #fff; border-radius: 5px; box-shadow: 0 0 25px #333; display: flex; flex-direction: column; } .sheet .sh-cap { flex: none; padding: 15px 30px 15px 0; font: bold 20px/23px var(--font); color: #222; } .sheet .sh-x { position: absolute; top: 15px; right: 10px; width: 23px; height: 23px; border-radius: 50%; background: linear-gradient(#F2F2F2, #DFDFDF); cursor: pointer; } .sheet .sh-x::before, .sheet .sh-x::after { content: ""; position: absolute; left: 6px; top: 10px; width: 11px; height: 2.5px; background: #505050; transform: rotate(45deg); } .sheet .sh-x::after { transform: rotate(-45deg); } .sheet .sh-body { flex: 1; min-height: 0; overflow: auto; margin-top: 10px; padding-left: 20px; } .sheet .sh-foot { flex: none; height: 31px; display: flex; gap: 9px; align-items: flex-start; } .sheet .sh-corner { position: absolute; top: 63px; right: 40px; display: flex; align-items: flex-start; z-index: 1; background: #fff; } .sh-owner { position: relative; width: 140px; padding-right: 20px; text-align: right; color: var(--link); line-height: 14px; } .sh-owner::after { content: ""; position: absolute; right: 8px; top: 9px; width: 4px; height: 4px; border: solid var(--link); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } .sh-owner small { display: block; color: #909090; font-size: 10px; line-height: 11px; } .sh-audit { display: flex; gap: 6px; margin: 0 20px 0 8px; } .sh-audit .who { text-align: right; line-height: 14px; color: #8C8C8C; } .sh-audit .who .v { display: block; font-size: 10px; line-height: 11px; color: var(--link); } .sh-audit .ava { width: 28px; height: 28px; border-radius: 50%; background: #DDE3E8; } /* the guide editor: labels right-aligned in a 180px column, controls 16px on */ .sh-form { display: grid; grid-template-columns: 180px max-content; column-gap: 16px; row-gap: 10px; align-items: start; } .sh-form.auto { grid-template-columns: max-content max-content; } .sh-form.auto > .lbl { padding-left: 4px; } .sh-form > .lbl { position: relative; display: flex; justify-content: flex-end; align-items: flex-start; gap: 4px; padding-top: 2px; line-height: 14px; text-align: right; } .sh-form > .lbl.req::before { content: "*"; color: #FF4444; margin-right: -2px; } .sh-form > .lbl .help { position: static; width: 15px; height: 15px; font-size: 10px; margin: -1px 6px 0 0; order: -1; } .sh-form > .lbl.req .help { margin-right: -1px; } .sh-form .inp { width: 250px; } .sh-form .inp.num { width: 120px !important; } .sh-form textarea.ta { display: block; width: 252px; height: 72px; margin-bottom: 3px; } .sh-form textarea.ta.short { height: 30px; } .sh-form textarea.ta.mid { height: 46px; } .sh-form .ctl > input[type=checkbox] { display: block; margin: 2px 0 0; width: 13px; height: 13px; } .sh-form .sel23 .ref { height: 23px; } .sh-form .ctl > .tall, .sh-form .ctl.tall { padding-bottom: 0; } /* contract: number, date and state over two columns of fields */ .sh-doc-title { display: flex; align-items: flex-start; height: 36px; padding-left: 5px; font-size: 18px; line-height: 20px; } .sh-doc-title > * { margin-top: 1px; } .sh-doc-title .t { margin-top: 2px; } .sh-doc-title .no { height: 24px; font: 18px var(--font); border: 1px solid transparent; padding: 0 5px; background: transparent; outline: none; margin-left: 15px; } .sh-doc-title .no.framed { border-color: var(--border); background: #fff; } .sh-doc-title .no:hover, .sh-doc-title .no:focus { border-color: var(--border); } .sh-doc-title .ot { margin: 2px 8px 0 3px; } .sh-doc-title .date { height: 24px; } .sh-doc-title .date input { height: 22px; font: 18px var(--font); } .sh-doc-title .date.plain { border-color: transparent; } .sh-doc-title .btn { margin-left: 16px; color: #000; } .sheet .sh-print { margin-left: 0; } .btn.sm { height: 23px; padding: 0 12px; gap: 8px; } .sh-cols { display: flex; align-items: flex-start; } .sh-contract .sh-cols > :first-child { width: 463px; } .sh-contract .sh-cols > :last-child { margin-left: 0; } .sh-sub { margin-top: 10px; } .sh-bal { margin-top: 10px; line-height: 14px; } .sh-bal .neg { color: #F00; } .sh-bal .pos { color: #84AB0F; } .sh-acc { margin-top: 5px; } /* organization: the form on the left, legal details and accounts in boxes */ .sh-cols.org { gap: 78px; padding-bottom: 20px; } .sh-cols.org > .sh-form { margin-top: 10px; } .sh-box { width: 462px; padding: 10px 10px 15px; border-radius: 3px; margin-bottom: 10px; } .sh-box.gray { background: #F2F2F2; } .sh-box.blue { background: #DDEEFB; } .sh-box .bt { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 15px; color: #E8541E; } .sh-box .sh-form { grid-template-columns: 170px max-content; } .sh-del { width: 13px; height: 13px; border-radius: 50%; background: #B9B9B9; position: relative; cursor: pointer; } .sh-del::before, .sh-del::after { content: ""; position: absolute; left: 3px; top: 5.5px; width: 7px; height: 2px; background: #fff; transform: rotate(45deg); } .sh-del::after { transform: rotate(-45deg); } .sh-radio { display: inline-flex; align-items: center; gap: 4px; } /* a counterparty's or warehouse's own card inside the sheet */ .sh-card .card { padding: 0; } /* ------------------------------------------------------------ list pages */ .list-head { display: flex; align-items: center; gap: 10px; padding: 25px 20px 0 20px; flex-wrap: wrap; } /* the original's title: the help mark (15 px), 10 px, the title, 10 px, the refresh mark (10 px), 10 px to the first button (25.10.2026) */ .list-head h1 { font-size: 20px; margin: 0; font-weight: bold; display: flex; align-items: center; gap: 10px; } .list-head h1 .help { width: 15px; height: 15px; font-size: 10px; } .list-head .grow { flex: 1; } /* «Объединить» of the counterparties (the original's pump page): the buttons, then the caption with its warning 8 px under the title */ .list-head.union { display: block; } .list-head.union .union-btns { display: flex; gap: 10px; } .list-head.union .union-cap { margin-top: 20px; } .list-head.union .union-hint { padding-top: 8px; font-size: 13px; } /* the search box: 21 px high, 15 px from its neighbours (the original's on every list) */ .list-head .search { height: 21px; margin: 0 5px; } .help { width: 16px; height: 16px; border: 1px solid #A9CBE0; border-radius: 50%; background: #F0F7FC; color: #1F75A8; font: bold 11px Arial, sans-serif; display: inline-flex; align-items: center; justify-content: center; flex: none; cursor: help; } .refresh { cursor: pointer; color: #888; display: inline-flex; } .filter-panel { margin: 14px 20px 0; padding: 14px 16px; background: #F5F5F5; border: 1px solid #E3E3E3; display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 8px 30px; } .filter-panel label { display: flex; align-items: center; gap: 8px; } .filter-panel label > span:first-child { width: 110px; flex: none; } .filter-panel .actions { grid-column: 1 / -1; display: flex; gap: 8px; } /* a list page is as wide as its grid (at least the window): the chips wrap at that width; the grid has no scroller of its own, the page has */ .lp { display: inline-block; min-width: 100%; vertical-align: top; } .grid-wrap { margin: 20px 30px 0; display: flow-root; } /* scrolled down, the toolbar stays at the top (its buttons at y 8, not moving sideways) once they reach it, and the grid's head under it (y 44, moving with the grid) — the original's floating panels: a white shade 44 px, with the head 76 px, a #AAA line and a shadow (24.10.2026) */ .list-head.float { position: fixed; top: 0; left: 0; right: 0; padding-top: 8px; z-index: 12; } .lp-shade { position: fixed; top: 0; left: 0; right: 0; height: 45px; background: #fff; border-bottom: 1px solid #AAA; box-shadow: 0 0 10px rgba(0, 0, 0, .5); z-index: 10; } .lp-shade.head { height: 77px; } .lp-shade.head.two { height: 107px; } table.grid.lg:not(.foot) thead th { position: sticky; top: 44px; z-index: 11; background: #fff; } table.grid { border-collapse: collapse; font: 11px var(--font-grid); min-width: calc(100% - 10px); } table.grid th { text-align: left; font-weight: normal; color: var(--link); padding: 8px 6px; border-bottom: 2px solid var(--top-bg); white-space: nowrap; cursor: default; position: relative; } table.grid th.sort { cursor: pointer; text-decoration: underline; } table.grid th .mark { position: absolute; top: -2px; left: 50%; font-size: 8px; color: #555; text-decoration: none; } table.grid td { padding: 0 6px; height: 31px; border-bottom: 1px solid var(--grid-line); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; position: relative; } table.grid tr:hover td { background: #F5F9FC; } table.grid tr.sel td { background: #FFF8D9; } /* (a draft's links are grey as well: rgb(153,153,153) in every list of the original, 26.10.2026) */ table.grid tr.unposted td { color: #999; font-style: italic; } table.grid tr.unposted td a { color: #999; } table.grid td.r, table.grid th.r { text-align: right; } table.grid td.cb, table.grid th.cb { width: 26px; padding: 0 4px; text-decoration: none; } table.grid .bar { position: absolute; left: 4px; right: 4px; bottom: 1px; height: 4px; } table.grid .bar i { display: block; height: 4px; background: var(--progress); } table.grid .empty td { text-align: center; color: var(--muted); height: 60px; } .state { display: inline-block; padding: 2px 6px; color: #fff; font-size: 11px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } /* list grids — the original's GWT cell table: fixed columns, each followed by a 5 px gap (the resize handle), as wide as the columns sum up to */ table.grid.lg { table-layout: fixed; min-width: 0; margin-top: 10px; font: 11px var(--font-grid); color: #222; } table.grid.lg th { height: 32px; padding: 0; box-sizing: border-box; vertical-align: top; text-align: center; color: var(--link); border-bottom: 2px solid var(--link); text-decoration: none; overflow: hidden; } table.grid.lg th.sort { cursor: pointer; text-decoration: none; } table.grid.lg th.plain { color: #333; } table.grid.lg .hw { margin-top: 6px; } /* the heads over groups of columns (Обороты): bold, centred, underlined light; when the head floats the columns' row sticks under them at 75 */ table.grid.lg tr.grp th { border-bottom: 0; color: #222; cursor: default; } table.grid.lg tr.grp th div { height: 30px; border-bottom: 1px solid #DDD; font: bold 11px/30px Tahoma, Geneva, sans-serif; text-align: center; white-space: nowrap; overflow: hidden; } table.grid.lg tr.grp th div:empty { border-bottom: 0; } table.grid.lg.grouped:not(.foot) thead tr:not(.grp) th { top: 75px; } table.grid.lg.grouped { margin-top: 9px; } /* the original's grouped head is 1 px higher (185, not 186) */ table.grid.lg .hs { height: 4px; line-height: 0; font-size: 0; } table.grid.lg .hs i { display: inline-block; border-left: 4px solid transparent; border-right: 4px solid transparent; vertical-align: top; } table.grid.lg .hs i.desc { border-top: 4px solid #6C6C6C; } table.grid.lg .hs i.asc { border-bottom: 4px solid #6C6C6C; } table.grid.lg .hc { height: 15px; line-height: 13px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* a report's head (measured on Движение денежных средств and Взаиморасчеты, 25.10.2026): the original draws the 2 px line inside the 32 px head, the collapsed border here half under it — a px less keeps the line and the rows where the original's are; the text 11 px under the head's top */ table.grid.lg.report:not(.foot) thead tr:not(.grp) th { height: 31px; } table.grid.lg.report tr.grp th div { height: 31px; line-height: 31px; } table.grid.lg.report .hw { margin-top: 5px; } table.grid.lg th.r .hc { text-align: right; } table.grid.lg th.rz { cursor: col-resize; } table.grid.lg th.cb, table.grid.lg td.cb { width: auto; padding: 0 7px 0 10px; text-align: left; } table.grid.lg th.cb input { margin: 10px 0 0; } table.grid.lg td.cb input { margin: 0; vertical-align: middle; } table.grid.lg th.gear { padding: 13px 10px 0 3px; text-align: left; cursor: pointer; color: var(--link); white-space: nowrap; } table.grid.lg th.gear .cog { display: inline-block; width: 9px; height: 9px; vertical-align: top; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cg fill='%23186999'%3E%3Ccircle cx='4.5' cy='4.5' r='3.2'/%3E%3Crect x='3.6' width='1.8' height='9'/%3E%3Crect y='3.6' width='9' height='1.8'/%3E%3Crect x='3.6' width='1.8' height='9' transform='rotate(45 4.5 4.5)'/%3E%3Crect y='3.6' width='9' height='1.8' transform='rotate(45 4.5 4.5)'/%3E%3C/g%3E%3Ccircle cx='4.5' cy='4.5' r='1.3' fill='%23fff'/%3E%3C/svg%3E") no-repeat; } table.grid.lg th.gear .caret { display: inline-block; margin: 3px 0 0 4px; vertical-align: top; border: 3px solid transparent; border-top-color: var(--link); border-bottom: 0; } table.grid.lg td { height: 31px; padding: 0; border-bottom: 1px solid #DDD; max-width: none; overflow: hidden; vertical-align: middle; } table.grid.lg .cv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 15px; } table.grid.lg td.r .cv { text-align: right; padding-right: 2px; } table.grid.lg td.img .cv { text-align: center; line-height: 0; } table.grid.lg a.link-item { display: block; } table.grid.lg td.img img { max-width: 32px; max-height: 26px; vertical-align: middle; } table.grid.lg tr:hover td { background: #FFFB8C; } /* a report (stock): no checkboxes, the first column and its title start 10 px in (the original's cellTableFirstColumnHeader); a line's ⋮ in the last cell under the pointer; the cart after «Доступно» */ table.grid.lg.report td:first-child, table.grid.lg.report thead th:first-child { padding-left: 10px; } /* a list without selection drawn as the documents' («Звонки», listPage noSel): the same 10 px */ table.grid.lg.nosel td:first-child, table.grid.lg.nosel thead th:first-child { padding-left: 10px; } /* a report's summary lines (the money reports' balances and totals) */ table.grid.lg tr.emph td { background: #EDEDED; font-weight: bold; } /* their labels run on over the next columns («Расчетные счета», «Начальный остаток») */ table.grid.lg tr.emph td:first-child { overflow: visible; z-index: 1; } table.grid.lg tr.emph td:first-child .cv, table.grid.lg tr.emph td:first-child .cv > div { overflow: visible; text-overflow: clip; } /* a group's line over its lines (cfg.groupOf; the stock report's «Разбить по группам»): the original's group-row b-emphasis — #EDEDED under the pointer too, bold #222, 20 px in, across the table */ table.grid.lg tr.group-row td:first-child, table.grid.lg tr.group-row:hover td:first-child { background: #EDEDED; font-weight: bold; color: #222; padding-left: 20px; overflow: visible; white-space: nowrap; cursor: auto; } /* «Прибыли и убытки»: the sums' lines bold on white, the expenses set in by 25 px, a loss red; the table ends with the head's line (no pager under it) */ table.grid.lg tr.b td { font-weight: bold; } table.grid.lg.report tr.sub td:first-child { padding-left: 35px; } table.grid.lg .neg { color: #F00; } table.grid.lg.bare tbody tr:last-child td { border-bottom-color: var(--link); } /* its table is the original's document table (b-document-table), not the reports' grid: the head's line 1 px lower, the first row whole under it */ table.grid.lg.report.bare:not(.foot) thead tr th { height: 32px; } table.grid.lg.report.bare .hw { margin-top: 6px; } table.grid.lg.bare tbody tr:first-child td { height: 32px; padding-top: 1px; } table.grid.lg.bare td .cv { position: relative; top: -1px; } table.grid.lg td.gear .rowmenu { display: none; width: 19px; height: 18px; margin-top: 2px; cursor: pointer; vertical-align: middle; background: radial-gradient(circle, var(--link-new) 0 1.6px, transparent 2.1px) 50% 0 / 6px 6px repeat-y; } table.grid.lg tr:hover td.gear .rowmenu { display: inline-block; } table.grid.lg td.cart .cv { line-height: 0; color: #333; } table.grid.lg td.cart .cart-add { display: inline-block; cursor: pointer; } table.grid.lg td.cart .cart-add:hover { color: var(--link); } /* «Тележка» (cart.js, the original's stock2.cart; sizes — the clone's): the toolbar's count and sum, the window — «Цены», the goods, the buttons and the red «Очистить» (m-link-button-red) */ .cart-btn .cart-total span + span { margin-left: 6px; } .menu-pop.cart-pop { padding: 10px; width: 520px; } .cart-pop .no-in-cart-label { width: 300px; line-height: 1.4; white-space: normal; } .cart-pop .cart-prices { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; } .cart-pop .cart-prices select { flex: 1; } .cart-pop #cart-popup-table { max-height: 300px; overflow: auto; } .cart-pop .cart-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .cart-pop .cart-table th, .cart-pop .cart-table td { padding: 4px 5px; border-bottom: 1px solid #EDEDED; text-align: left; white-space: nowrap; } .cart-pop .cart-table th { color: #777; font-weight: normal; } .cart-pop .cart-table td.name { overflow: hidden; text-overflow: ellipsis; } .cart-pop .cart-table .r { width: 90px; text-align: right; } .cart-pop .cart-table .q { width: 70px; } .cart-pop .cart-table td.q input { width: 60px; } .cart-pop .cart-table th:last-child { width: 14px; } .cart-pop .cart-del { cursor: pointer; color: #999; } .cart-pop .cart-del:hover { color: #F00; } .cart-pop .buttons-panel { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } .cart-pop .buttons-panel .btn + .btn { margin-left: 5px; } .cart-pop .cart-clear { color: #F00; } /* totals under the columns, in the bar at the bottom (placed by script) */ table.grid.lg.foot { position: absolute; top: 5px; margin: 0; pointer-events: none; } table.grid.lg.foot th { height: 17px; padding: 0 0 5px; border: 0; vertical-align: top; text-align: left; color: #222; font-weight: bold; white-space: nowrap; overflow: hidden; } /* the totals end at the column's edge, 2 px right of the rows' values (the original's footer cells have no padding) */ table.grid.lg.foot th.r { text-align: right; padding-right: 0; } table.grid.lg tr.sel td { background: #E4F1FA; } /* (the original's text has 5 px of margin after it: «Напечатан» 54 px — a pill of 79) */ table.grid.lg .cv .state { height: 18px; box-sizing: border-box; padding: 1px 15px 3px 10px; line-height: 14px; border-radius: 2px; max-width: none; overflow: visible; } table.grid.lg .bar { left: 0; right: 0; } table.grid.lg i.chk { display: inline-block; width: 15px; height: 11px; vertical-align: middle; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 11'%3E%3Cpath d='M1.3 4.6l3.8 3.8 7.6-7.6' fill='none' stroke='%2370AD00' stroke-width='2.6'/%3E%3C/svg%3E") no-repeat; } table.grid.lg i.chk.off { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 11'%3E%3Cpath d='M1.3 4.6l3.8 3.8 7.6-7.6' fill='none' stroke='%23E5EFCD' stroke-width='2.6'/%3E%3C/svg%3E"); } table.grid.lg .empty td { height: 60px; } /* the ⚙ menu: a column per line, the label on the right of the window */ .colmenu { position: absolute; z-index: 50; background: #fff; padding: 16px 16px 16px 16px; box-shadow: 0 2px 12px rgba(0, 0, 0, .25); overflow-y: auto; font: 12px var(--font); color: #222; } .colmenu .cm-row { display: flex; align-items: center; justify-content: flex-end; height: 20px; cursor: pointer; white-space: nowrap; } .colmenu .cm-row span { padding: 0 7px 0 0; } .colmenu .cm-row input { width: 13px; height: 13px; margin: 0; } .colmenu .cm-gap { height: 14px; } .colmenu .cm-row:has(input:disabled) { color: #999; cursor: default; } .colmenu .cm-sizes { margin-top: 20px; text-align: center; } .colmenu .cm-sizes > div { margin-bottom: 6px; } .colmenu .cm-sizes .seg button { height: 26px; padding: 0 10px; } /* the bar at the bottom (the original's, measured 25.10.2026): 23 px under a #AAA line and a shadow; under a grid shorter than the window it follows the last row, no shadow, its line blue and as wide as the grid (.under, placed by script: --ux, --uw); « at 40, ‹ at 57, the pages 116 px wide centred, › at 186, » at 203 */ .pager { position: fixed; left: 0; right: 0; bottom: 0; height: 23px; background: #fff; border-top: 1px solid #AAA; box-shadow: 0 0 10px rgba(0, 0, 0, .5); display: flex; align-items: flex-start; padding: 4px 40px 0; z-index: 10; font-size: 11px; } .pager.under { bottom: auto; border-top: 0; padding-top: 5px; box-shadow: none; background: #fff linear-gradient(var(--link), var(--link)) no-repeat var(--ux, 0) 0 / var(--uw, 100%) 1px; } .pager .pg { width: 13px; height: 13px; border: 1px solid #9DB4C4; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; color: var(--link-new); cursor: pointer; background: #fff; padding: 0; flex: none; } .pager .pg:nth-child(1), .pager .pg:nth-child(4) { margin-right: 4px; } .pager .pg:disabled { color: #CCC; border-color: #DDD; cursor: default; } .pager .info { width: 116px; flex: none; padding-top: 2px; text-align: center; } /* «Σ Показать итоги»: at the window's right (a narrow grid's right, --sr), 4 px under the bar's line */ .pager .sumbtn { position: absolute; right: var(--sr, 15px); top: 3px; display: flex; align-items: center; height: 16px; padding: 0; border: 0; background: none; color: var(--link); font: 13px/12px "Helvetica Neue", system-ui; cursor: pointer; white-space: nowrap; } .pager.under .sumbtn { top: 4px; } .pager.under.side { right: auto; box-sizing: border-box; padding-left: 40px; } .pager .sumbtn .ic { margin-right: 6px; } .pager .sum { margin-left: 20px; color: #444; } /* goods: folder tree + grid */ .goods-body { display: flex; align-items: flex-start; margin-top: 20px; } .tree { width: 306px; flex: none; font-size: 12px; padding-left: 16px; } .tree .node { position: relative; height: 32px; line-height: 32px; padding-left: 48px; color: var(--link-new); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tree .node .tw { position: absolute; left: 34px; width: 12px; text-align: center; color: #999; font-size: 9px; } .tree .node.root { padding-left: 24px; } /* «Перемещение в группу»: the tree in a window */ .tree.pick { width: auto; max-height: 60vh; overflow: auto; padding-left: 0; } /* «Редактор цен» */ .pe { gap: 8px; font-size: 13px; } .pe .frow > .lbl { width: 140px; } .pe-whom { color: #555; margin-bottom: 4px; } .pe-change { display: inline-flex; gap: 6px; align-items: center; } .pe-note { color: #888; font-size: 12px; margin-top: 6px; } .tree .node.cur { background: #E5F1F8; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); } .goods-body .grid-wrap { flex: 1; margin: 0 30px 0 44px; } /* under the chips: the tree's first node and the grid's head on one line, 10 px under the chips; nodes 290 px, the grid from x 350 (24.10.2026) */ .fchips + .goods-body { margin-top: 0; } .fchips + .goods-body .tree { margin-top: 10px; } /* ------------------------------------------------------------ cards */ .card { padding: 22px 40px 40px 40px; max-width: 1440px; } .card-tools { display: flex; align-items: center; gap: 10px; } /* the buttons as the original's cards' (25.10.2026): 5 px from an icon to the text and from the text to the ▾, which takes 9 px («Изменить» 90 px, «Печать» 95, «Отправить» 116 between their neighbours' borders) */ .card-tools .btn { gap: 5px; } .card-tools .btn .caret { margin: 0 1px 0 0; } /* the documents' new form (customer order, invoice, supply; .card.nf): the toolbar 23 px under the menu (the classic forms' 20), the buttons 11 px to the text and 16 px after the ▾ (8 px wide), overlapping by 2 px — «Изменить» 94, «Создать документ» 141, «Печать» 100, «Отправить» 121 */ .card.doc { padding-top: 20px; } .card.doc.nf { padding-top: 23px; } .card.nf .card-tools > .btn-group > .btn { padding: 0 15px 0 10px; margin-left: -2px; } .card.nf .card-tools > .btn-group > .btn:first-child { margin-left: 0; } .card.nf .card-tools .btn .caret { margin-right: 0; } /* owner and group 10 px after the buttons — right-aligned in 120 px, the ▾ after them; the last change 28 px on, as wide as the original's «Изменения: 201» (89 px; the clone has no count of changes), the avatar 6 px after it; all from the buttons' top line (the new form's owner 1 px above it, its date 2 px lower) */ .card-tools .right { margin-left: 0; display: flex; align-items: flex-start; gap: 28px; font-size: 12px; color: var(--muted); } .card-tools .right .who { text-align: right; line-height: 14px; min-width: 89px; } .card-tools .right .who .v { font-size: 10px; color: var(--link); line-height: 11px; } .card-tools .right .ava { width: 28px; height: 28px; border-radius: 50%; background: #DDE3E8; margin-left: -22px; } .card.nf .card-tools .owner { margin-top: -1px; } .card.nf .card-tools .who .v { position: relative; top: 2px; } /* «1 из N ‹ ›» after «Закрыть» (widgets.js cardNav), as the original's (25.10.2026): the label 12 px #222 right-aligned in 70 px, the arrows 5 px after it — two 29 px buttons sharing a border, white to #E6E6E6, the gray chevrons centred and alike when disabled; on the classic forms the label 2 px and the chevrons 1 px under the buttons' middle, on the counterparty's the chevrons so and the label as wide as its text */ .lnav { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #222; } .lnav .n { min-width: 70px; text-align: right; white-space: nowrap; line-height: 14px; } .lnav.old .n { position: relative; top: 2px; } .lnav.old .gl, .lnav.cat .gl { position: relative; top: 1px; } .lnav.cat .n { min-width: 0; } .lnav .btn { width: 29px; padding: 0; justify-content: center; background: linear-gradient(#FFF, #E6E6E6); } .lnav .btn:hover:not(:disabled) { background: linear-gradient(#FFF, #F7F7F7); } .lnav .btn:disabled { background: linear-gradient(#FFF, #E6E6E6); } .owner { width: 120px; color: var(--link); text-align: right; line-height: 14px; cursor: default; position: relative; } /* the ▾ as the original's: 6 × 3 px, 6 px after the box, 13 px under its top */ .owner .chev { position: absolute; left: 126px; top: 13px; width: 6px; height: 3px; background: var(--link); clip-path: polygon(0 0, 33.4% 0, 50% 33.4%, 66.6% 0, 100% 0, 50% 100%); } .owner small { display: block; color: #909090; font-size: 10px; line-height: 11px; } /* the contract card (contracts.js) — the original's #Contract/edit at 1440 px (25.10.2026): the toolbar 2 px higher than a document's; "?" and «Поместить в архив» 270 px after «Закрыть» or «1 из N ‹ ›» (x 470 or 612); the menus 28 px further; the title 45 px under the buttons */ .contract-card { padding-top: 20px; } .contract-card .arch { display: flex; align-items: center; gap: 10px; margin-left: 260px; } .contract-card .arch .btn { padding: 0 12px; } .contract-card .card-tools > .btn-group { margin-left: 18px; } .contract-card .sh-doc-title { margin-top: 43px; } .doc-title { display: flex; align-items: center; margin: 16px 0 18px; font-size: 18px; flex-wrap: wrap; row-gap: 8px; } .doc-title .no { height: 24px; font: 18px Arial, sans-serif; border: 1px solid transparent; padding: 0 5px; background: transparent; outline: none; } .doc-title .no:hover, .doc-title .no:focus { border-color: var(--border); } .doc-title .ot { margin: 0 4px 0 6px; } .doc-title .date { height: 26px; } .doc-title .date input { height: 24px; font-size: 18px; } .doc-title .date .cal { padding: 0 1px 0 2px; } .doc-title > .pill { margin-left: 5px; } .doc-title > .pill.pay { margin-left: 15px; } .doc-title > .pill.pay + .pill { margin-left: 12px; } .pill { height: 26px; padding: 0 10px; border-radius: 3px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: default; white-space: nowrap; } .pill.pay { border: 1px solid #CCC; background: #fff; } .pill.pay .o { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #F2A019; } .pill.pay.part .o { border-color: #F2A019; background: linear-gradient(90deg, #F2A019 50%, #fff 50%); } .pill.pay.paid .o { border-color: var(--progress); background: var(--progress); } .pill.state-btn { color: #fff; cursor: pointer; padding: 0 12px; border-radius: 0; } .pill.state-btn .caret { border: 4px solid transparent; border-top-color: #fff; border-bottom: 0; } .pill.red { background: #E9262E; color: #fff; border-radius: 0; text-transform: uppercase; } .pill.ok { background: var(--progress); color: #fff; border-radius: 0; text-transform: uppercase; } .posted { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; margin-left: 40px; } .posted .help { margin-right: 2px; } .posted.wait { margin-left: 34px; } /* a purchase order's «Ожидание» after «Проведено» */ .card input[type=checkbox] { appearance: none; width: 16px; height: 16px; margin: 0; border: 1px solid #C5CBD3; border-radius: 4px; background: #fff; cursor: pointer; flex: none; vertical-align: middle; } .card input[type=checkbox]:checked { border-color: #036CE5; background: #036CE5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center/11px no-repeat; } /* document header: columns 1-2 share rows (labels as wide as the longest), column 3 and the currency row stand apart; spacing measured on the original */ .dochead { display: flex; align-items: flex-start; } .fleft { display: flex; flex-direction: column; gap: 10px; } .fgrid { --c1: 288px; display: grid; grid-template-columns: max-content minmax(var(--c1), max-content) max-content minmax(291px, max-content); column-gap: 11px; row-gap: 10px; align-items: start; } .dochead.pay .fgrid { --c1: 296px; } .fcur { display: grid; grid-template-columns: max-content max-content; column-gap: 11px; } .fgrid3 { display: grid; grid-template-columns: 97px max-content; column-gap: 11px; row-gap: 13px; margin-left: 11px; align-items: start; } .dochead .lbl, .attrs .lbl { position: relative; line-height: 14px; margin-top: 4px; white-space: nowrap; } .dochead .lbl.req::before, .attrs .lbl.req::before { content: "*"; color: #FF4444; position: absolute; left: -7px; top: -1px; } .dochead .ctl { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } .dochead .line { display: flex; align-items: center; } .dochead .ot { margin: 0 6px; } .dochead .note { font-size: 12px; line-height: 17px; color: var(--text); } .dochead .note .neg { color: #F00; } .dochead .note:empty { display: none; } /* the invoice look's balance line is 14px (the original's, 25.10.2026: invoices, purchase orders, supplies; an order's 17) */ .card.doclook .dochead .note { line-height: 14px; } .dochead.curgap .fcur { margin-top: 10px; } /* a currency other than the accounting one: the document's rate after it (the original's .rate-view) and «Курс валюты документа» */ .dochead .fcur .ctl { flex-direction: row; align-items: center; gap: 0; } .rate-view { display: flex; align-items: center; white-space: nowrap; color: #A9A9A9; } .rate-view .rate-lhs { margin: 0 5px; } .rate-view .rate-rhs-rate { max-width: 80px; overflow: hidden; text-overflow: ellipsis; text-align: right; } .rate-view .rate-rhs-label { margin-left: 3px; } .rate-view .rate-edit { display: inline-flex; margin-left: 4px; cursor: pointer; } .rate-view .rate-edit svg { width: 10px; height: 10px; } .operation-rate-dialog { min-width: 300px; } .operation-rate-dialog .chooser { display: flex; align-items: center; white-space: nowrap; } .operation-rate-dialog .chooser label { display: flex; align-items: center; } .operation-rate-dialog input[type=radio] { margin: 0 4px 0 0; } .operation-rate-dialog .equality-sign { margin: 0 5px; } .operation-rate-dialog .ccrate-rhs-rate { max-width: 80px; overflow: hidden; text-overflow: ellipsis; text-align: right; } .operation-rate-dialog .ccrate-rhs-label { margin-left: 3px; } .operation-rate-dialog .radio-panel { margin: 2px 0 20px; } .operation-rate-dialog .rate-help { margin: 4px 0 0 22px; color: #909090; } .operation-rate-dialog input.inp { width: 60px; margin-right: 5px; } /* the old form (classic shipment, payments): measured on the original */ .doc-title.old-look { margin: 12px 0 15px; } /* 46 px under the toolbar's top, as the original's (25.10.2026) */ .doc-title.pay-look { margin: 12px 0 14px; } .doc-title.pay-look .posted, .doc-title.old-look .posted { gap: 5px; } .doc-title.pay-look .posted .help, .doc-title.old-look .posted .help { width: 15px; height: 15px; margin-right: 5px; font-size: 10px; } .doc-title.pay-look .posted input[type=checkbox], .doc-title.old-look .posted input[type=checkbox] { width: 13px; height: 13px; border-radius: 2px; background-size: 9px; } .dochead.old-look .fleft, .dochead.pay-look .fleft { gap: 13px; } /* without a third column the currency row stands 10 px under the others (enters, losses, moves, returns, factures; a shipment's 13 — 25.10.2026) */ .dochead.old-look:not(:has(.fgrid3)) .fleft { gap: 10px; } /* the old form's tabs 21 px under the head, or 24 under the attributes; a type without attributes shows no strip for them */ .card.old .tabs-old { margin-top: 21px; } .card.old .attrs.old { padding-bottom: 3px; } .card.old .attrs.old:not(:has(.lbl)) { display: none; } .dochead.old-look .note, .dochead.pay-look .note { line-height: 14px; margin: 4px 0 3px; } .dochead.pay-look .fgrid .ta { margin-bottom: 3px; } .dochead .lbl.hl { display: flex; align-items: flex-start; } .dochead .lbl .q { width: 15px; height: 15px; margin: -1px 10px 0 5px; font-size: 10px; } .fcol { display: flex; flex-direction: column; gap: 10px; } .frow { display: flex; align-items: flex-start; min-height: 21px; } .frow > .lbl { width: 120px; flex: none; padding-top: 3px; position: relative; } .frow > .lbl.req::before { content: "*"; color: #E2453C; position: absolute; left: -7px; top: 2px; } .frow > .ctl { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .frow > .ctl > .line { display: flex; align-items: center; } .frow .note { font-size: 12px; } .frow .note .neg { color: #E2453C; } /* custom fields: dealt over three columns, each a grid of its own */ .attrs { display: flex; align-items: flex-start; margin-top: 10px; } .attrs .acol { display: grid; grid-template-columns: max-content max-content; column-gap: 10px; row-gap: 12px; align-items: start; margin-right: 50px; } /* the old form (classic documents, payments) — measured on the original 24.10.2026: label +15, a field column of at least 250 and 50 to the next column; a label with a help icon counts 20 wider and sits 4px lower, its icon 25 to the left */ .attrs.old .acol { grid-template-columns: max-content minmax(250px, max-content); column-gap: 15px; } .attrs.old .lbl { margin-top: 3px; line-height: 12px; } .attrs.old .lbl.hh { padding-right: 20px; margin-top: 7px; } .attrs.old .lbl .help { left: -25px; top: -2px; width: 15px; height: 15px; font-size: 10px; } .attrs.old .ctl > .inp.num { width: 99px !important; } .attrs.old .ctl > textarea { height: 38px !important; } .attrs.old .ctl.tall { padding-bottom: 0; } .attrs.old .ctl > input[type=checkbox] { width: 13px; height: 13px; border-radius: 2px; background-size: 9px; } .attrs .lbl { margin-top: 2px; } .attrs .lbl .help { position: absolute; left: -24px; top: -1px; } .attrs .ctl { min-height: 21px; display: flex; align-items: center; } .attrs .ctl.tall { padding-bottom: 3px; } .attrs .ctl > textarea { display: block; } .panel .attrs { display: block; } .panel .attrs .acol { grid-template-columns: 160px minmax(0, 1fr); row-gap: 8px; } .panel .attrs .lbl { color: #666; white-space: normal; } /* tabs: new widgets (order) and classic (other documents) */ .tabs-new { display: flex; align-items: flex-end; gap: 16px; border-bottom: 1px solid #D1D6DF; margin-top: 26px; font: 14px var(--font-new); } /* 43px with a 3px underline; the content sits 16px from the top, as in the original */ .tabs-new .tab { height: 43px; padding-bottom: 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; border-bottom: 3px solid transparent; margin-bottom: -1px; color: #222; } .tabs-new .tab.cur { border-bottom-color: var(--tab-blue); } .tabs-new .tab .cnt { margin-left: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #F1F4F9; color: #222; font-size: 12px; line-height: 16px; text-align: center; } .tabs-new .right { margin-left: auto; display: flex; gap: 20px; align-items: center; align-self: flex-start; } .tabs-new .right .link-new { height: 32px; padding: 0 8px; color: var(--tab-blue); } .tabs-new .right .btn-outline { width: 208px; padding: 0; } .btn-outline { height: 30px; padding: 0 16px; border: 1px solid var(--tab-blue); border-radius: 8px; background: #fff; color: var(--tab-blue); font: 14px var(--font-new); cursor: pointer; } .btn-outline:hover { background: #F1F4F9; } /* the old form's tabs — the original's GWT TabBar (its demand, facture, inventory and price list cards at 1440 px): tabs 24 px high, the current one framed on top and at the sides, the others underlined (#186999); no line under the rest of the bar. Its tabName: padding 5 7 0 10, then the 2-px item end. (3 px under the bar — padding, the content's margins do not swallow it: the content starts where it did when the tabs were 27 px high with a line under the whole bar.) */ .tabs-old { display: flex; margin-top: 24px; padding-bottom: 3px; } .tabs-old .tab { box-sizing: border-box; height: 24px; padding: 5px 9px 0 10px; overflow: hidden; white-space: nowrap; cursor: pointer; color: var(--link); border-bottom: 1px solid #186999; font-size: 13px; } .tabs-old .tab.cur { border: 1px solid #186999; border-bottom: 0; background: #fff; font-weight: bold; color: #222; } /* positions toolbar: button group, search, VAT switches, column settings */ .pos-tools { display: flex; align-items: center; gap: 32px; padding: 8px 0; border-bottom: 1px solid #D1D6DF; font: 14px var(--font-new); } .pos-tools .pg-group { display: flex; align-items: center; background: #F1F4F9; border-radius: 8px; height: 28px; padding: 0 6px; gap: 6px; } .pos-tools .pg-group .all { margin: 0 6px; color: var(--pos-text); } .pos-tools .pg-group .sep { width: 1px; height: 16px; background: #C9CFD6; } .pos-tools .pg-group button { height: 28px; color: var(--tab-blue); background: none; border: 0; border-radius: 6px; cursor: pointer; font: 14px var(--font-new); padding: 0 6px; } .pos-tools .pg-group button:hover { background: #E3E8F0; } .psearch-box { position: relative; display: inline-flex; align-items: center; } .psearch-box svg { position: absolute; right: 10px; pointer-events: none; } .pos-tools .psearch { width: 312px; height: 28px; border: 1px solid #C9CFD6; border-radius: 8px; padding: 0 30px 0 10px; font: 14px var(--font-new); color: var(--pos-text); outline: none; } .pos-tools .psearch:focus { border-color: var(--tab-blue); } .pos-tools .psearch::placeholder { color: #8F9BA6; } .pos-tools .right { margin-left: auto; display: flex; align-items: center; gap: 16px; color: var(--pos-text); } .pos-tools .right .invisible { visibility: hidden; } .colset-btn { width: 40px; height: 28px; border: 0; border-radius: 6px; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .colset-btn:hover { background: #F1F4F9; } .toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .toggle i { width: 28px; height: 16px; border-radius: 8px; background: #C9CFD6; position: relative; transition: background .15s; } .toggle i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .15s; } .toggle.on i { background: var(--tab-blue); } .toggle.on i::after { left: 14px; } /* new-style drop-downs: column menus, row menu, column settings */ .menu-pop.new { border: 0; border-radius: 8px; box-shadow: 0 2px 12px rgba(9, 23, 57, .18); padding: 4px 0; font: 14px var(--font-new); color: var(--pos-text); } .menu-pop.new .mi { padding: 0 16px; height: 32px; } .menu-pop.new .mi:hover { background: #F1F4F9; } .menu-pop.new .sep { border-top-color: #E3E8F0; } .colset { position: absolute; z-index: 120; width: 284px; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(9, 23, 57, .18); padding: 8px 8px 6px; font: 14px var(--font-new); color: var(--pos-text); } .colset .cs-h { font-size: 12px; color: var(--pos-head); padding: 6px 8px 8px; } .colset .cs-h.sep { border-top: 1px solid #E3E8F0; margin: 6px -8px 0; padding: 10px 16px 4px; } .colset .cs-seg { display: flex; background: #F1F4F9; border-radius: 8px; padding: 3px; gap: 2px; } .colset .cs-seg button { flex: 1; height: 26px; border: 0; border-radius: 6px; background: none; display: flex; align-items: center; justify-content: center; gap: 8px; font: 14px var(--font-new); color: var(--pos-text); cursor: pointer; } .colset .cs-seg button.cur { background: #fff; box-shadow: 0 1px 2px rgba(9, 23, 57, .12); } .colset .cs-reset { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border: 0; background: none; font: 14px var(--font-new); color: var(--pos-text); cursor: pointer; } .colset .cs-reset::before { content: "↺"; color: var(--tab-blue); font-size: 18px; } .colset .cs-i { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; cursor: pointer; } .colset input[type=checkbox], table.pgrid2 input[type=checkbox] { appearance: none; width: 16px; height: 16px; margin: 0; border: 1px solid #C5CBD3; border-radius: 4px; background: #fff; cursor: pointer; flex: none; } .colset input[type=checkbox]:checked, table.pgrid2 input[type=checkbox]:checked { background: #036CE5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"); border-color: #036CE5; } /* positions grid (order): fixed columns as measured on the original at 1440px */ table.pgrid2 { width: 100%; table-layout: fixed; border-collapse: collapse; font: 12px var(--font-new); color: var(--pos-text); } table.pgrid2 th { color: var(--pos-head); font-weight: normal; text-align: left; padding: 9px 8px 5px; line-height: 20px; border-bottom: 1px solid #D1D6DF; white-space: nowrap; overflow: hidden; } table.pgrid2 td { padding: 0 8px; height: 29px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } table.pgrid2 .r { text-align: right; } table.pgrid2 .hd { display: flex; justify-content: flex-end; align-items: center; } table.pgrid2 .hd .t { overflow: hidden; text-overflow: ellipsis; min-width: 0; } table.pgrid2 .chev { width: 20px; height: 20px; margin-left: 4px; border: 0; border-radius: 4px; background: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; } table.pgrid2 .chev:hover { background: #E3E8F0; } table.pgrid2 th.dots { padding: 9px 0 5px; text-align: center; } table.pgrid2 th.dots .chev { margin: 0 auto; } table.pgrid2 .no { text-align: right; position: relative; } table.pgrid2 td.no input, table.pgrid2 th.no input { position: absolute; right: 8px; top: 50%; margin-top: -8px; } table.pgrid2 td.no input { visibility: hidden; } table.pgrid2 tbody tr:hover td.no input, table.pgrid2 tr.sel td.no input, table.pgrid2.has-sel td.no input { visibility: visible; } table.pgrid2 tbody tr:hover td.no .n, table.pgrid2 tr.sel td.no .n, table.pgrid2.has-sel td.no .n { visibility: hidden; } table.pgrid2 tbody tr:not(.add):hover td, table.pgrid2 tr.sel td { background: #F1F4F9; } table.pgrid2 .name a { color: var(--pos-text); text-decoration: none; } table.pgrid2 tr:hover .name a { color: var(--tab-blue); } table.pgrid2 .name .code { color: var(--pos-head); margin-right: 4px; } table.pgrid2 td.img { padding: 0 0 0 8px; } table.pgrid2 td.img img { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; border-radius: 4px; } table.pgrid2 td.dots { padding: 0; text-align: center; } table.pgrid2 button.dots { width: 20px; height: 20px; border: 0; border-radius: 4px; background: none; color: #5F6D79; font-size: 8px; letter-spacing: 1px; padding: 0 0 0 1px; cursor: pointer; } table.pgrid2 button.dots:hover { background: #E3E8F0; } table.pgrid2 th > span { display: inline-block; } table.pgrid2 input.cell, table.pgrid2 select.cell { width: 100%; height: 20px; border: 1px solid transparent; border-radius: 4px; background: transparent; text-align: right; font: 12px var(--font-new); color: var(--pos-text); padding: 0 4px; outline: none; } table.pgrid2 select.cell { appearance: none; text-align-last: right; cursor: pointer; } table.pgrid2 tr:hover input.cell, table.pgrid2 tr:hover select.cell { border-color: #C9CFD6; background: #fff; } table.pgrid2 input.cell:focus { border-color: var(--tab-blue); background: #fff; } table.pgrid2 td.uom { padding-left: 1px; } table.pgrid2 td > div { line-height: 20px; overflow: hidden; text-overflow: ellipsis; } table.pgrid2.comfy td { height: 41px; } table.pgrid2 tr.add td { height: 32px; border-bottom: 1px solid #D1D6DF; overflow: visible; background: none; } table.pgrid2 tr.add td.addc { padding-left: 16px; } table.pgrid2 tr.add td.cnt { padding-right: 10px; } /* invoice / receipt look of the same grid */ .pos-tools .pg-doc { display: flex; align-items: center; height: 28px; } .pos-tools .pg-doc .allbox { margin-left: 16px; display: inline-flex; } .pos-tools .pg-doc .pill { margin-left: 12px; height: 26px; padding: 0 12px; border-radius: 13px; background: #DFF0FE; display: inline-flex; align-items: center; color: var(--pos-text); font-size: 14px; } .pos-tools .pg-doc .btns { margin-left: 20px; display: flex; gap: 20px; } .pos-tools .pg-doc .btns button { height: 20px; padding: 0; border: 0; background: none; color: var(--tab-blue); font: 14px var(--font-new); cursor: pointer; } .pos-tools .pg-doc input[type=checkbox] { appearance: none; width: 16px; height: 16px; margin: 0; border: 1px solid #C5CBD3; border-radius: 4px; background: #fff; cursor: pointer; } .pos-tools .pg-doc input[type=checkbox]:checked { background: #036CE5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"); border-color: #036CE5; } table.pgrid2.doc th { padding: 5px 8px 6px; } table.pgrid2.doc th.ch { padding-right: 4px; } table.pgrid2.doc th.nm { padding: 5px 4px 6px 9px; } table.pgrid2.doc th.nm .hd { justify-content: space-between; } table.pgrid2.doc th.txt { padding-left: 9px; } table.pgrid2.doc td { height: 26px; padding: 2px; vertical-align: top; } table.pgrid2.doc td.no { padding: 0 8px; vertical-align: middle; color: #222; } table.pgrid2.doc tbody tr:not(.add) td.no { vertical-align: top; line-height: 26px; } table.pgrid2.doc td.img { padding: 2px; } table.pgrid2.doc td.img img { width: 26px; height: 22px; } table.pgrid2.doc td.name { padding: 2px 4px 2px 2px; white-space: normal; } table.pgrid2.doc .nmc { display: flex; align-items: flex-start; gap: 4px; padding: 1px 0; } table.pgrid2.doc .nmc .nm { flex: 1; min-width: 0; padding-top: 2px; line-height: 15px; } table.pgrid2.doc .nmc .dots { flex: none; margin-top: 1px; } table.pgrid2.doc td.uom { padding: 2px 2px 2px 0; color: #222; } table.pgrid2.doc td.uom > div { line-height: 22px; } table.pgrid2.doc td.r:has(> div) { padding: 5px 4px 4px; color: #222; } table.pgrid2.doc td.r:has(> div) > div { line-height: 16px; } table.pgrid2.doc td.r.vs { padding: 3px 18px 0 2px; color: var(--pos-text); } table.pgrid2.doc td.r.vs > div { line-height: 20px; } table.pgrid2.doc input.cell, table.pgrid2.doc select.cell { height: 22px; color: #000; } table.pgrid2 input.cell.txt { text-align: left; } table.pgrid2.doc tr.add td { height: 32px; padding: 0; vertical-align: middle; } table.pgrid2.doc tr.add td.addc { padding-left: 16px; } table.pgrid2.doc tr.add td.cnt { padding-right: 10px; } .add-wrap { position: relative; display: flex; align-items: center; gap: 12px; } .add-wrap .plus-big { width: 20px; height: 20px; border: 0; padding: 0; background: none; cursor: pointer; display: inline-flex; } .add-input { flex: none; width: 480px; height: 24px; border: 1px solid #C9CFD6; border-radius: 8px; padding: 0 12px; font: 14px var(--font-new); color: #222; outline: none; } .add-input:focus { border-color: #091739; } .add-input::placeholder { color: #8F9BA6; } .counts { text-align: right; font: bold 14px var(--font-new); line-height: 19px; color: #222; white-space: nowrap; } .counts > span { margin-left: 20px; } .pick-check .bar { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; font: 14px var(--font-new); } .pick-check .bar input { width: 360px; height: 28px; border: 1px solid #C9CFD6; border-radius: 8px; padding: 0 10px; font: 14px var(--font-new); outline: none; } .pick-check .bar input:focus { border-color: var(--tab-blue); } .pick-check table td.r, .pick-check table th.r { text-align: right; } .pick-check tr.done td { background: #E6F2DA; } .pick-check tr.over td { background: #FDE2E0; } .dm { display: flex; flex-direction: column; gap: 8px; } .dm .dm-row { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px; border-radius: 2px; cursor: pointer; } .dm .dm-row:has(input:checked) { background: #E5F1F8; } .dm .dm-row b { width: 82px; } .add-dd { position: absolute; left: 48px; z-index: 100; width: 736px; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); font: 14px var(--font-new); } .add-dd .hd { padding: 10px 16px; border-bottom: 1px solid #E3E3E3; display: flex; align-items: center; gap: 8px; } .add-dd .it { padding: 7px 40px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; letter-spacing: .2px; } .add-dd .it:hover, .add-dd .it.cur { background: #F2F4F7; } .add-dd .it .nm { flex: 1; white-space: normal; } .add-dd .it .hl { color: var(--hl); } .add-dd .it .badge { background: #FDE2E0; color: #E2453C; border-radius: 4px; padding: 0 6px; font-size: 13px; } .add-dd .it .badge.ok { background: #E6F2DA; color: #4E8A1D; } .add-dd .more { padding: 7px 40px; color: var(--tab-blue); cursor: pointer; } .add-dd .ft { padding: 10px 12px; border-top: 1px solid #E3E3E3; color: var(--tab-blue); cursor: pointer; display: flex; align-items: center; gap: 10px; } .add-dd .ft b { font-weight: 300; font-size: 24px; line-height: 16px; } .add-dd .empty { padding: 10px 40px; color: var(--muted); } /* old grid (shipment, enter, loss, move): the original's GWT inline editor, measured at 1920px (24.10.2026). It starts 30px left of the form. */ .card.old { max-width: none; } .ogrid-wrap { margin-left: -30px; margin-top: 8px; font: 12px var(--font); color: #222; } .ogrid { border-collapse: collapse; table-layout: fixed; } .ogrid th, .ogrid td { padding: 3px 5px 3px 0; vertical-align: middle; text-align: left; font-weight: 400; overflow: hidden; } .ogrid th { height: 30px; box-sizing: border-box; border-bottom: 1px solid #186999; font-size: 11px; white-space: nowrap; overflow: visible; } .ogrid td { height: 30px; box-sizing: border-box; border-bottom: 1px solid #BFBFBF; } .ogrid .r { text-align: right; } .ogrid th.rn, .ogrid td.rn { text-align: right; font-size: 11px; } .ogrid input[type=checkbox], .ototals input[type=checkbox] { width: 13px; height: 13px; margin: 0; vertical-align: middle; border-radius: 2px; background-size: 9px; } .ogrid td.rn input { display: none; } .ogrid tr:hover td.rn input, .ogrid tr.sel td.rn input { display: inline-block; } .ogrid tr:hover td.rn .n, .ogrid tr.sel td.rn .n { display: none; } .ogrid tbody tr:hover td { background: #FFFB8C; } .ogrid tbody tr.sel td { background: #E4F1FA; } .ogrid td.dg { padding: 0; } .ogrid .grip { display: none; width: 10px; height: 14px; margin-left: 2px; cursor: move; background: radial-gradient(circle, #C9C9B5 1px, transparent 1.2px) 0 0 / 4px 4px; } .ogrid tr:hover .grip { display: block; } .ogrid td.img { padding: 2px 0 1px; } .ogrid td.img img { display: block; max-width: 26px; max-height: 26px; } .ogrid td.nm { padding: 2px 0; } .ogrid .nmv { line-height: 14px; white-space: normal; word-break: break-word; } .ogrid .nmv b { font-weight: 700; } .ogrid .nmv a { color: inherit; text-decoration: none; } .ogrid tr:hover .nmv a { color: #186999; } .ogrid th.nm.sel { padding-left: 2px; } .ov { box-sizing: border-box; height: 23px; padding: 1px 3px; border: 1px solid transparent; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ogrid tr:hover .ov.ed { border-color: #BFBFBF; background: #fff; cursor: text; } .oin { box-sizing: border-box; display: block; width: 100%; height: 23px; margin: 0; border: 1px solid #BFBFBF; padding: 1px 3px; font: 12px var(--font); color: #222; outline: none; background: #fff; } select.oin { padding: 0 1px; } .obtn { display: inline-flex; align-items: center; gap: 5px; height: 23px; padding: 0 10px; border: 1px solid #DDD; border-radius: 3px; background: #fff; color: #186999; font: 11px var(--font); cursor: pointer; white-space: nowrap; vertical-align: middle; } .obtn:hover { border-color: #BBB; } .obtn.odel .x { width: 9px; height: 9px; margin-right: 1px; background: linear-gradient(45deg, transparent 43%, #186999 43%, #186999 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, #186999 43%, #186999 57%, transparent 57%); } .ogear { width: 16px; height: 12px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; } .odots { display: none; box-sizing: border-box; width: 24px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 3px; background: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .odots i { width: 3px; height: 2px; background: #186999; } .ogrid tr:hover .odots, .odots.open { display: inline-flex; } .odots:hover { border-color: #186999; } .odots.open { background: #186999; border-color: #186999; } .odots.open i { background: #fff; } .ocolmenu { position: absolute; z-index: 120; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); padding: 10px 14px 8px 10px; font: 12px var(--font); color: #222; } .ocolmenu label { display: flex; align-items: center; justify-content: flex-end; gap: 6px; height: 20px; cursor: pointer; white-space: nowrap; } .ocolmenu input { margin: 0; width: 13px; height: 13px; } .menu-pop .mi input[type=checkbox] { margin: 0 6px 0 0; width: 13px; height: 13px; } .obar { display: flex; align-items: center; gap: 20px; box-sizing: border-box; height: 40px; margin-top: -1px; padding: 7px 30px 3px; border-bottom: 1px solid #186999; } .obar .add-input { box-sizing: border-box; width: 507px; height: 26px; border: 1px solid #BFBFBF; border-radius: 0; padding: 2px 2px 2px 3px; font: 14px Arial, sans-serif; } .obar .add-input::placeholder { font-style: italic; font-size: 12px; color: #999; } .obar .add-input:focus { border-color: #8CB7D6; } .obtn2 { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 26px; padding: 0 10px; border: 1px solid #CCC; border-radius: 3px; background: linear-gradient(#FDFDFD, #E6E6E6); font: 12px var(--font); color: #222; cursor: pointer; white-space: nowrap; } .obtn2:hover { background: linear-gradient(#FFF, #DCDCDC); } .obar .imp { margin-left: auto; } /* a shipment's «Подобрать партию» refusals (positions.js fefo) */ .fefo-msg { max-width: 420px; font-size: 13px; line-height: 18px; } /* under the old grid: the comment and the totals ending at the "Сумма" column */ .obottom { display: flex; align-items: flex-start; padding: 20px 0 38px; } .obottom .comment.old { flex: none; box-sizing: border-box; height: 83px; margin-right: 65px; padding: 3px; border: 1px solid #E4E4E4; border-radius: 0; font: 12px var(--font); color: #222; resize: vertical; } .obottom .comment.old::placeholder { font-style: italic; color: #999; } .ototals { flex: none; width: 340px; font: 12px var(--font); color: #222; } .ototals > div { display: flex; align-items: baseline; } .ototals .rv { margin-left: auto; } .ototals .ot-sub, .ototals .ot-total { height: 21px; font-size: 18px; font-weight: 700; line-height: 21px; } .ototals .ot-total { margin-top: 5px; } .ototals .ot-total.after-sub { margin-top: 15px; } .ototals .ot-vat { height: 20px; align-items: center; } .ototals .ot-vat label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .ototals .ot-vat input { width: 13px; height: 13px; margin: 0; } .ototals .ot-profit { height: 11px; font-size: 10px; line-height: 11px; color: #808080; } .ototals .ot-gap { height: 30px; } .ototals .ot-wv { height: 24px; } .ototals .ot-wv .half { width: 170px; } .ototals .ot-qty { height: 25px; box-sizing: border-box; padding-bottom: 10px; border-bottom: 1px solid #BFBFBF; } .ototals .ot-over { position: relative; margin-top: 10px; height: 21px; align-items: center; gap: 5px; } .ototals .ot-over .help { position: absolute; left: -20px; top: 3px; } .ototals .ovh { box-sizing: border-box; width: 56px; height: 21px; margin: 0 0 0 0; border: 1px solid #BFBFBF; padding: 2px; font: 12px Arial, sans-serif; text-align: right; } .ototals .ot-over > span:nth-of-type(2) { width: 114px; } .ototals .dist { color: #186999; border-bottom: 1px dashed #186999; cursor: pointer; line-height: 14px; } .doc-bottom { display: flex; margin-top: 24px; align-items: flex-start; } .doc-bottom .comment { flex: 1; min-width: 0; height: 64px; min-height: 64px; font: 14px var(--font-new); color: #222; padding: 8px; border: 1px solid #C9CFD6; border-radius: 4px; resize: vertical; } .totals { flex: none; margin-left: 60px; padding-right: 10px; font: 14px var(--font-new); color: #222; display: grid; grid-template-columns: 1fr auto; column-gap: 20px; row-gap: 8px; align-items: baseline; justify-items: end; line-height: 18px; } .totals .big { font-size: 20px; font-weight: bold; line-height: 24px; } .ext-code { margin-top: 16px; font: 14px var(--font-new); } .ext-code .link-new { color: var(--tab-blue); line-height: 20px; } /* related documents graph (related.js, 30.10.2026): the original's RelatedDocumentsView — boxes of 155 px in columns of 185, lines between; the old form's boxes are GWT tables in a 155 × 145 cell, the new form's — blocks in a 155 × 156 one; both clip the boxes' shadow on the sides */ .rel { margin-top: 10px; } .rel-tools { height: 31px; } .rel-tools .btn { vertical-align: top; } .rel-graph { position: relative; font: 12px var(--font); color: #222; } .rel-old .rel-graph { font-size: 13px; line-height: 15px; } .rel-graph .wrap { position: absolute; width: 155px; height: 145px; overflow: hidden; } .rel-graph .wrap2 { display: table-cell; vertical-align: middle; width: 155px; height: 145px; } .rel-graph .node { width: 155px; background: #FBFBFB; border: 1px solid #ADADAD; box-shadow: 0 1px 3px #C8C8C8; cursor: pointer; } .rel-graph table.node { border-collapse: collapse; border-spacing: 0; } .rel-graph table.node > tbody > tr > td { padding: 0 10px; font-size: 12px; line-height: normal; text-align: left; } .rel-graph table.node > tbody > tr > td.stc { padding: 1px; } .rel-graph table.hd { border-collapse: collapse; margin: 5px 0; } .rel-graph table.hd td { padding: 0; vertical-align: top; } .rel-graph table.hd td.icon { padding-right: 3px; } .rel-graph i.chk { display: block; width: 15px; height: 11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 11'%3E%3Cpath d='M1.3 4.6l3.8 3.8 7.6-7.6' fill='none' stroke='%2370AD00' stroke-width='2.6'/%3E%3C/svg%3E") no-repeat; } .rel-graph i.chk.off { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 11'%3E%3Cpath d='M1.3 4.6l3.8 3.8 7.6-7.6' fill='none' stroke='%23E5EFCD' stroke-width='2.6'/%3E%3C/svg%3E"); } .rel-graph table.hd i.chk { margin-top: 3px; } .rel-graph .type { font-weight: bold; line-height: 14px; color: #000; } .rel-graph .num, .rel-graph .mom, .rel-graph .sum { margin: 2px 0; } .rel-graph table .num { width: 120px; overflow: hidden; } .rel-graph .mom { color: #999; } .rel-graph .sum { font-weight: bold; } .rel-graph .st { font-size: 11px; font-weight: bold; color: #fff; text-align: center; padding: 2px 10px; overflow: hidden; } .rel-graph .pw { position: absolute; width: 155px; height: 156px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .rel-graph .pw .node { flex: none; } .rel-graph .pw .hd { display: flex; align-items: flex-start; padding: 5px 10px; } .rel-graph .pw .hd i.chk { flex: none; margin: 3px 3px 0 0; } .rel-graph .pw .num, .rel-graph .pw .mom, .rel-graph .pw .sum { padding: 0 10px; } .rel-graph .pw .num > div { overflow: hidden; } .rel-graph .pw .st { margin: 1px; } /* the card's own document — dark; one not seen or not kept — not a link */ .rel-graph .node.cur { background: #363636; border-color: #1B1B1B; cursor: default; } .rel-graph .node.cur .type, .rel-graph .node.cur td, .rel-graph .node.cur .num, .rel-graph .node.cur .sum { color: #fff; } .rel-graph .node.cur .mom { color: #999; } .rel-graph .node.off { cursor: default; } .rel-graph .rel-ca { position: absolute; width: 0; height: 0; } .rel-graph .rel-ca > div { position: absolute; } .rel-graph .hl { height: 1px; } .rel-new .rel-graph .hl.l { margin-left: 1px; } .rel-graph .vl { width: 1px; } .rel-graph .ub { width: 5px; height: 5px; border-radius: 2px; margin: -2px 0 0 -2px; } .empty-note { color: var(--muted); padding: 16px 0; } /* catalog cards (product, counterparty) */ .big-name-label { margin-top: 24px; font-size: 12px; color: var(--muted); position: relative; padding-left: 10px; } .big-name-label::before { content: "*"; color: #E2453C; position: absolute; left: 3px; } .big-name { width: 100%; max-width: 1265px; height: 32px; font-size: 20px; font-weight: bold; border: 1px solid #5B9DD9; padding: 0 6px; margin-top: 6px; outline: none; } .cat-body { display: flex; gap: 32px; margin-top: 16px; align-items: flex-start; } .panels { width: 464px; flex: none; display: flex; flex-direction: column; gap: 12px; } .panel { background: #F7F7F7; padding: 16px 32px 20px 32px; position: relative; } .panel::before { content: "⠿"; position: absolute; left: 6px; top: 6px; color: #BBB; font-size: 10px; } .panel .ph { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: bold; cursor: pointer; } .panel .ph::after { content: ""; border: 5px solid transparent; border-top-color: #444; border-bottom: 0; } .panel.closed .ph::after { transform: rotate(-90deg); } .panel.closed .pb { display: none; } .panel .pb { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; } .panel .frow > .lbl { width: 160px; color: #666; } .panel .sep { border-top: 1px solid #E0E0E0; margin: 6px 0; } .panel .sub-card { background: #fff; border: 1px solid #E3E3E3; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .cat-right { flex: 1; min-width: 0; max-width: 770px; } /* the counterparty's (.cp) and the product's (.gd) cards as the original's at 1440 px (25.10.2026): content x 32–1296, the toolbar 20 px under the menu — Сохранить and Закрыть 99 px, «1 из N ‹ ›» 32 px after them; at the right edge the last change, the avatar 6 px after it, Печать (the product's) 6 px after that, ⚙ and ••• 36 px, 10 px apart (16 px after the avatar). The name: its label 38 px under the toolbar (the product's 28), the field 10 px under it, 29 px high — 600 px wide on the counterparty's, the whole width on the product's; the panels 32 px under it (the product's 10, its tabs 21 px lower still) */ .card.cat { padding: 20px 32px 40px; max-width: 1328px; } .card.cat .card-tools > .btn { width: 99px; justify-content: center; } .card.cat .lnav { margin-left: 22px; } .card.cat .card-tools .right { margin-left: auto; gap: 10px; } .card.cat .card-tools .right .ava { margin: 0 -4px; } .card.cat .card-tools .right .ava + .cfg { margin-left: 10px; } .card.cat .card-tools .right .cfg, .card.cat .card-tools .right .more { width: 36px; padding: 0; justify-content: center; } .card.cat .card-tools .right .more { gap: 2px; } .card.cat .card-tools .right .more i { width: 4px; height: 4px; border-radius: 50%; background: #333; } .card.cat .big-name-label { margin-top: 38px; line-height: 14px; } .card.cat .big-name { height: 29px; max-width: none; padding: 0 5px; margin-top: 10px; } .card.cp .big-name { width: 600px; } .card.cat .cat-body { margin-top: 32px; } .card.gd .big-name-label { margin-top: 28px; } .card.gd .cat-body { margin-top: 10px; } .card.gd .cat-right { margin-top: 21px; max-width: 768px; } .card.cp .cat-right { max-width: 768px; } /* product card: the left column (goodleft.js; the original's #good/edit at 1440 px, 29.10.2026 — guide-editor-block-widget): panels 464 px at x 32, 12 px apart, #F7F7F7 with 2 px corners and 12 px under the content. The title row is 28 px: the handle (15 px cell), the bold 14 px title 17 px further and 12 px down, its «?» 10 px after it, ▾ 16 px from the right (turned to the side when folded). The help box: 11 px under the title row at x 64, 400 px, «i» at x 73, the text at x 96 (310 px, 16 px lines), × at x 446. The body: 16 px under, 7 px in; labels 25 px in (x 64), grey, 160 px to the fields at x 224 (240 px; a selector with its pencil 218 px); rows 26 px (fields), 25 (selectors), 41 (Описание); a line between the groups (18 px). */ .gp { position: relative; width: 464px; background: #F7F7F7; border-radius: 2px; padding-bottom: 12px; } .gp.dragging { opacity: .5; } .gp.drop-before { box-shadow: 0 -6px 0 -3px var(--link-new); } .gp.drop-after { box-shadow: 0 6px 0 -3px var(--link-new); } .gp-head { display: flex; align-items: flex-start; min-height: 28px; } .gp-drag { flex: none; width: 15px; height: 15px; cursor: move; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cg fill='%239E9E9E'%3E%3Crect width='2' height='2'/%3E%3Crect x='4' width='2' height='2'/%3E%3Crect y='4' width='2' height='2'/%3E%3Crect x='4' y='4' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E") 6px 5px no-repeat; } .gp-title { flex: none; max-width: 380px; padding: 12px 0 0 17px; font: bold 14px/16px var(--font); color: #222; } .gp-help { flex: none; width: 15px; height: 15px; margin: 12px 0 0 10px; border-radius: 50%; background: #186999; color: #fff; font: bold 10px/15px Arial, sans-serif; text-align: center; cursor: pointer; user-select: none; } .gp-fold { flex: none; width: 16px; height: 16px; margin: 12px 16px 0 auto; cursor: pointer; display: flex; align-items: center; justify-content: center; } .gp-fold::after { content: ""; border-style: solid; border-width: 5px 5px 0; border-color: #383838 transparent transparent; } .gp.closed .gp-fold::after { transform: rotate(-90deg); } .gp.closed .gp-help, .gp.closed .gp-info, .gp.closed .gp-body { display: none; } .gp-info { display: flex; align-items: flex-start; width: 400px; margin: 11px 0 0 32px; padding: 6px 0 10px; background: #ECF8FF; border: 1px solid #D5DBDF; border-radius: 2px; } .gp-info.off { display: none; } .gp-info-i { flex: none; width: 12px; height: 12px; margin: 2px 11px 0 8px; border-radius: 50%; background: #186999; color: #fff; font: bold 9px/12px Georgia, serif; text-align: center; } .gp-info-t { flex: none; width: 310px; font: 12px/16px var(--font); color: #222; } .gp-info-t a { color: var(--link); text-decoration: underline; } .gp-info-x { flex: none; position: relative; width: 7px; height: 7px; margin-left: 40px; cursor: pointer; } .gp-info-x::before, .gp-info-x::after { content: ""; position: absolute; left: -1px; top: 3px; width: 9px; height: 1.6px; background: #828282; transform: rotate(45deg); } .gp-info-x::after { transform: rotate(-45deg); } .gp-body { padding: 16px 25px 0 7px; } .gp-row { display: flex; align-items: flex-start; } .gp-lbl { flex: none; display: flex; align-items: flex-start; width: 185px; min-height: 25px; padding: 4px 0 0 25px; font: 12px/14px var(--font); color: rgba(0, 0, 0, .45); } .gp-lbl .help, .gp-attrs .lbl .help { position: static; width: 15px; height: 15px; margin-left: 5px; font-size: 10px; } .gp-ctl { flex: none; width: 247px; } .gp-ctl > .inp { display: block; width: 240px; height: 21px; padding: 1px 3px; margin-bottom: 5px; font: 12px var(--font); color: #000; } .gp-ctl > .ta { display: block; width: 240px; height: 36px; min-height: 36px; padding: 3px; margin-bottom: 5px; font: 12px var(--font); } .gp-row.sel .gp-ctl > .line { display: flex; align-items: flex-start; margin-bottom: 4px; } .gp-row.cp .gp-ctl > .line { margin-bottom: 5px; } /* the original's counterparty selector: 26 px */ .gp-row .field-tools { margin-left: 6px; height: 21px; } .gp-ctl .ref input { padding: 0 3px; font: 12px/14px var(--font); color: #000; } .gp-sep { height: 2px; margin: 7px 7px 9px 25px; border-top: 1px solid #979797; opacity: .2; } .gp-vat { display: block; width: 80px; height: 21px; margin-bottom: 4px; border: 1px solid var(--border); background: #fff; } .gp-vat.err { border-color: #E2453C; background: #FFF3F2; } .gp-vat input { display: block; width: 78px; height: 19px; padding: 0 3px; border: 0; outline: none; background: transparent; font: 12px/14px var(--font); color: #000; } .gp-btns { margin-left: 25px; padding-bottom: 3px; } /* Неснижаемый остаток: the radios 2 px under the body's top, 23 px in, 30 px each; the sum's field 164 px at x 269 */ .gp-radios { margin: 2px 0 4px 23px; } .gp-radio { display: flex; align-items: flex-start; min-height: 30px; max-width: 400px; } .gp-radio label { display: flex; align-items: flex-start; min-width: 207px; line-height: 30px; font-size: 12px; color: #222; cursor: pointer; } .gp-radio.dis label { color: rgba(0, 0, 0, .45); cursor: default; } .gp-radio input[type=radio] { flex: none; width: 13px; height: 13px; margin: 7px 6px 0 0; } .gp-radio .inp { width: 164px; height: 21px; margin-top: 4px; padding: 1px 3px; font: 12px Arial, sans-serif; } /* «Задать для каждого склада» — the stores' editor under its radio (30.10.2026; the original's block-min-balance-editor, widths — the clone's guess) */ .gp-ms-varied { margin: 0 0 6px 19px; max-width: 380px; } .gp-ms-varied.off { display: none; } .gp-ms-help { font-size: 12px; line-height: 16px; color: rgba(0, 0, 0, .55); margin: 0 0 6px; } .gp-ms-line { display: flex; align-items: center; gap: 6px; height: 26px; } .gp-ms-line .gp-ms-store { width: 200px; height: 21px; font: 12px Arial, sans-serif; } .gp-ms-line .gp-ms-qty { width: 80px; height: 21px; padding: 1px 3px; font: 12px Arial, sans-serif; text-align: right; } .gp-ms-line .inp.err { border-color: #d0021b; } .gp-ms-line:hover .fl-del-old { opacity: 1; } .gp-ms-add { margin-top: 6px; } /* Изображения: tiles 90 px (a 1 px frame) at x 64, 12 px apart, four a row; ⊗ 13 px over the corner; «+ Изображение» at x 48, 5 px under them */ .gp-imgs { display: flex; flex-wrap: wrap; margin-left: 25px; max-height: 450px; overflow-y: auto; } .gp-img { position: relative; width: 90px; height: 90px; margin: 0 12px 12px 0; border: 1px solid #E1E1E1; background: #F4F4F4; display: flex; align-items: center; justify-content: center; } .gp-img:nth-child(4n) { margin-right: 0; } .gp-img a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .gp-img img { display: block; max-width: 88px; max-height: 88px; } .gp-img-x { position: absolute; top: -4px; right: -4px; width: 13px; height: 13px; border-radius: 50%; background: #ACACAC; cursor: pointer; } .gp-img-x::before, .gp-img-x::after { content: ""; position: absolute; left: 3px; top: 6px; width: 7px; height: 1.4px; background: #fff; transform: rotate(45deg); } .gp-img-x::after { transform: rotate(-45deg); } .gp-img-x:hover { background: #8C8C8C; } .gp-up { margin: 5px 0 0 9px; padding-bottom: 4px; } .gp-up .btn { gap: 5px; } /* Дополнительные поля: attrsEditor in one column — labels as above, «?» after the name; text 240 px, numbers 120 (right), texts 240 × 78, files «Прикрепить файл» 120, selectors 218 with their pencil or «+» */ .gp-attrs .attrs { display: block; margin: 0; } .gp-attrs .acol { grid-template-columns: 185px 247px; column-gap: 0; row-gap: 0; margin: 0; } .gp-attrs .lbl { position: relative; display: flex; align-items: flex-start; min-height: 25px; margin: 0; padding: 4px 0 0 25px; font: 12px/14px var(--font); color: rgba(0, 0, 0, .45); white-space: normal; } .gp-attrs .lbl .help { order: 1; flex: none; } .gp-attrs .lbl.req::before { left: 18px; top: 4px; } .gp-attrs .ctl, .gp-attrs .ctl.tall { display: block; min-height: 0; padding: 0; } .gp-attrs .ctl > .inp, .gp-attrs .ctl > .line > .inp { display: block; width: 240px !important; height: 21px; padding: 1px 3px; margin-bottom: 5px; font: 12px var(--font); } .gp-attrs .ctl > .inp.num { width: 120px !important; } .gp-attrs .ctl > textarea { width: 240px !important; height: 78px !important; padding: 3px; margin-bottom: 5px; font: 12px var(--font); } .gp-attrs .ctl > input[type=checkbox] { display: block; margin: 4px 0 8px; } .gp-attrs .ctl > .line { display: flex; align-items: flex-start; margin-bottom: 4px; } .gp-attrs .ctl > .line > .inp { margin-bottom: 1px; } .gp-attrs .ctl > .line > .ref { width: 218px !important; } .gp-attrs .ctl > .ffile { display: flex; min-height: 21px; margin-bottom: 5px; } .gp-attrs .ff-attach { width: 120px; height: 21px; padding: 0 10px; justify-content: center; border: 1px solid #CCC; border-radius: 3px; background: linear-gradient(#FDFDFD, #EDEDED); font: 12px var(--font); color: #222; } .gp input[type=checkbox] { width: 13px; height: 13px; border-radius: 2px; background-size: 9px; } /* the lower panels (the original's product and service cards, 29.10.2026): a flag's row 25 px, the box 4 px down at x 224; «Маркировка» — a row of 38 px, the bold 14 px heading 13 px down at x 64, its «?» 5 px after it; a disabled field #F0F0F0 with grey text and no arrow. «Кассовый чек» and «Доступ»: labels 186 px (fields at x 225), «Доступ» labels at x 63 and its last row 23 px */ .gp-row.chk .gp-ctl > input[type=checkbox] { display: block; margin: 4px 0 8px; } .gp-row.chk.last .gp-ctl > input[type=checkbox] { margin-bottom: 6px; } .gp-row.chk.last .gp-lbl { min-height: 23px; } .gp-row.w186 .gp-lbl { width: 186px; } .gp-row.l63 .gp-lbl { padding-left: 24px; } .gp-row.btnrow .gp-ctl > .btn { margin-bottom: 4px; } .gp-mark { display: flex; align-items: flex-start; height: 38px; padding: 13px 0 0 25px; box-sizing: border-box; font: bold 14px/16px var(--font); color: #222; } .gp-mark .help { position: static; width: 15px; height: 15px; margin: -1px 0 0 5px; font-size: 10px; } .gp-ctl > .inp.gp-dis { background: #F0F0F0; } .gp .ref.dis { background: #F0F0F0; } .gp .ref.dis input { color: #888; -webkit-text-fill-color: #888; } .gp .ref.dis .open, .gp .ref.dis .clear { display: none; } .gp-pen { display: inline-flex; align-items: center; height: 21px; color: #9E9E9E; cursor: default; } .gp-ctl > .line > .line { display: flex; align-items: flex-start; } /* Отдел: its selector and the grey pencil */ /* Штрихкоды: rows 24 px apart from the body's top — the handle at x 68, the type 138 px at x 78, the code 215 at x 224, ••• 21 × 21 at x 443; «+ Штрихкод» at x 48, 8 px under the last row (16 px above the bottom) */ .gp-bcs { display: flow-root; margin-left: 29px; } .gp-bc { display: flex; align-items: flex-start; height: 21px; margin-bottom: 3px; } .gp-bc-drag { flex: none; width: 10px; height: 21px; cursor: move; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='10'%3E%3Cg fill='%239E9E9E'%3E%3Crect width='2' height='2'/%3E%3Crect y='4' width='2' height='2'/%3E%3Crect y='8' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E") 0 6px no-repeat; } .gp-bc .line { flex: none; } .gp-bc .field-tools { display: none; } .gp-bc .ref input { padding: 0 3px; font: 12px/14px var(--font); color: #000; } .gp-bc > .inp { flex: none; width: 215px; height: 21px; margin-left: 8px; padding: 1px 3px; font: 12px var(--font); color: #000; } .gp-bc-more { flex: none; width: 21px; height: 21px; margin-left: 4px; padding: 0; border: 1px solid #CCC; border-radius: 3px; background: linear-gradient(#FDFDFD, #EDEDED); cursor: pointer; display: flex; align-items: center; justify-content: center; } .gp-bc-more span { width: 11px; height: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='3'%3E%3Cg fill='%23555'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5'/%3E%3Ccircle cx='5.5' cy='1.5' r='1.5'/%3E%3Ccircle cx='9.5' cy='1.5' r='1.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat; } .gp-up.gp-bc-add { margin-top: 8px; } .tabs-gray { display: flex; } .tabs-gray .tab { flex: 1; height: 40px; display: flex; align-items: center; justify-content: center; background: #E3E3E3; border-right: 1px solid #fff; cursor: pointer; font-size: 12px; white-space: nowrap; padding: 0 8px; } .tabs-gray .tab.cur { background: var(--top-bg); color: #fff; } .tab-body { padding-top: 28px; } .kpi { display: flex; align-items: flex-start; width: 768px; border-top: 1px solid #EDEDED; padding-top: 24px; margin-top: 32px; font: 12px/14px var(--font); color: #222; } .kpi-l { width: 336px; flex: none; } .kpi-l .hd, .kpi-t tr.hd td { height: 24px; font-weight: bold; } .kpi table { border-collapse: collapse; } .kpi td { padding: 0; vertical-align: top; white-space: nowrap; } .kpi-bal td { height: 20px; } .kpi-bal td.n { text-align: right; } .kpi-bal td + td { padding-left: 5px; } .kpi-bal tr.org td { height: 24px; vertical-align: bottom; color: #A9A9A9; } .kpi-r { margin-left: 20px; padding-left: 20px; border-left: 1px solid #EDEDED; } .kpi-t { table-layout: fixed; width: 188px; } .kpi-t td { height: 20px; } .kpi-t td.k { color: #A9A9A9; } .kpi-t tr.gap td { height: 14px; } .kpi-t tr.hd td + td { font-weight: normal; } .kpi .cur { margin-left: 5px; } /* counterparty card: the left column (cpleft.js; the original's #company/edit at 1440 px — docs/ui_dumps/crm_company_edit — panels as the product card's .gp above). Labels at x 63, fields at x 224 (240 px); rows 26 px, Статус 29 (its box 242 × 24), an address 41 (215 × 36 and ▾ 21 px 4 px after it), comments 83 (240 × 78; the legal address' 41), Код ФИАС 49 (the link 4 px under the field, 10 under it); the phone and the e-mail 215 px and a grey 21 px button 4 px after them */ .cp-col .gp-lbl { padding-left: 24px; } .cp-col .gp-lbl.req > span:first-child { position: relative; } .cp-col .gp-lbl.req > span:first-child::before { content: "*"; position: absolute; left: -9px; color: #F00; } .cp-col .gp-ctl > .ta.h78 { height: 78px; } .cp-col .gp-ctl > .ta.h50 { height: 50px; } .cp-col .gp-ctl > .inp.half { width: 120px; } .cp-help-pop { position: absolute; z-index: 150; width: 300px; padding: 10px 12px; background: #fff; border: 1px solid #C5C5C5; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); font: 12px/16px var(--font); color: #222; } .cp-col .help.pressed { background: #1F75A8; color: #fff; } .cp-status { position: relative; width: 242px; height: 24px; margin-bottom: 5px; padding: 0 25px 0 11px; border-radius: 2px; color: #fff; font: 12px/24px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .cp-status.empty { padding-left: 10px; border: 1px solid #BFBFBF; background: #fff; color: #000; line-height: 22px; } .cp-status::after { content: ""; position: absolute; right: 9px; top: 10px; border-style: solid; border-width: 5px 4px 0; border-color: #fff transparent transparent; } .cp-status.empty::after { top: 9px; border-color: #7B7B7B transparent transparent; } /* Группы: the original's multi-selector — labels #E4F1FA, 15 px, 3 px apart */ .cp-multi { display: flex; align-items: flex-start; width: 240px; min-height: 21px; margin-bottom: 5px; border: 1px solid var(--border); background: #fff; cursor: text; } .cp-multi:focus-within { border-color: #5B9DD9; box-shadow: 0 0 2px #5B9DD9; } .cp-tags { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-start; } .cp-tag { display: inline-flex; align-items: center; max-width: 200px; height: 15px; margin: 2px 0 2px 3px; padding: 0 0 0 6px; border: 1px solid #C2E0F3; border-radius: 10px; background: #E4F1FA; color: #186999; font: 11px/13px Tahoma, Arial, sans-serif; } .cp-tag .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-tag .x { position: relative; flex: none; width: 20px; height: 13px; cursor: pointer; } .cp-tag .x::before, .cp-tag .x::after { content: ""; position: absolute; left: 9px; top: 2px; width: 2px; height: 9px; background: #1F75A8; transform: rotate(45deg); } .cp-tag .x::after { transform: rotate(-45deg); } .cp-tags input { flex: 1; min-width: 16px; height: 19px; padding: 0 3px; border: 0; outline: none; background: transparent; font: 12px var(--font); color: #000; } .cp-load { flex: none; width: 18px; height: 19px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .cp-load::after { content: ""; border-style: solid; border-width: 5px 4px 0; border-color: #7B7B7B transparent transparent; } .cp-bw { display: flex; width: 240px; margin-bottom: 5px; } .cp-bw > .inp { flex: none; width: 215px; height: 21px; padding: 1px 3px; font: 12px var(--font); color: #000; } .cp-bw > .cp-wb { flex: none; width: 21px; height: 21px; margin-left: 4px; padding: 0; border: 0; border-radius: 3px; background: #C6C6C6; color: #C6C6C6; display: flex; align-items: center; justify-content: center; cursor: pointer; } .cp-bw > .cp-wb:hover { background: #1F75A8; color: #1F75A8; } .cp-bw > .cp-wb svg { display: block; } .cp-bw > .cp-wb:disabled { cursor: default; } /* .gwt-Button[disabled]: the look stays, the hover too */ /* an address: the string, ▾ (white, a 1 px #CCC frame), the parts in a white box at x 64, 400 px — its labels 15 px in, the fields 170 px further, 208 px (Индекс, Дом, Квартира/Офис 68) — by the original's styles: its parts are not open in the dump */ .cp-col .addr-line { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 5px; } .cp-col .addr-ta { flex: none; width: 215px; height: 36px; min-height: 36px; padding: 3px; font: 12px var(--font); color: #222; } .cp-col .addr-tog { flex: none; width: 21px; height: 21px; border: 1px solid #CCC; border-radius: 3px; background: linear-gradient(#FFF, #EBEBEB); } .cp-col .addr-tog:hover { border-color: #1F75A8; } .cp-col .addr-tog svg { display: none; } .cp-col .addr-tog::after { content: ""; border-style: solid; border-width: 5px 4.5px 0; border-color: #383838 transparent transparent; } .cp-col .addr-tog.open::after { border-width: 0 4.5px 5px; border-color: transparent transparent #383838; } .cp-col .addr-parts { grid-column: auto; display: grid; grid-template-columns: 170px auto; grid-auto-rows: auto; align-items: start; margin: 0 7px 5px 25px; padding: 9px 0 6px; background: #fff; border: 1px solid #EBEBEB; border-radius: 2px; } .cp-col .addr-parts.hidden { display: none; } .cp-col .addr-parts > .lbl { margin: 0; padding: 9px 1px 0 15px; text-align: left; font: 12px/14px var(--font); color: rgba(0, 0, 0, .45); } .cp-col .addr-parts > .ctl { width: auto; padding: 5px 0 0 5px; background: none; } .cp-col .addr-parts .inp, .cp-col .addr-parts .inp.wide { display: block; width: 208px; height: 21px; } .cp-col .addr-parts > .ctl.short .inp { width: 68px; } .cp-col .addr-parts .ref { width: 208px !important; } .cp-fias { margin-bottom: 10px; } .cp-fias .inp { display: block; width: 240px; height: 21px; } .cp-fias a { display: block; width: max-content; margin-top: 4px; font: 12px/14px var(--font); color: #186999; } /* Реквизиты: Тип контрагента 23 px, ИНН 110 px and «Заполнить по ИНН» 124 × 21 6 px after it, КПП/ОГРН/ОКПО 120 px; the accounts 11 px lower */ .cp-col .gp-row.ctype .ref { height: 23px; } .cp-inn { display: flex; gap: 6px; margin-bottom: 5px; } .cp-inn .inp { width: 110px; height: 21px; padding: 1px 3px; font: 12px var(--font); color: #000; } .cp-inn .btn { width: 124px; height: 21px; padding: 0; justify-content: center; } /* selectors and dates: 26 px rows (the product card's are 25), the attributes' too */ .cp-col .gp-ctl > .line, .cp-grp > .line { display: flex; align-items: flex-start; } .cp-col .gp-row .gp-ctl > .line { margin-bottom: 5px; } .cp-col .gp-attrs .ctl > .line > .ref { margin-bottom: 1px; } .cp-col .gp-ctl > .date { display: flex; height: 21px; margin-bottom: 5px; } /* a list's cards (Контактные лица, the accounts): 434 px at x 48, white with a #EBEBEB frame, 16 px apart; the head 18 px (the handle, ×), labels at x 66, fields at x 225, 11 px under the last row; «+ …» 16 px under them */ .cp-many { margin-left: 9px; padding-bottom: 4px; } .cp-accs { margin-top: 11px; } .cp-card { width: 434px; margin-bottom: 16px; border: 1px solid #EBEBEB; border-radius: 2px; background: #fff; } .cp-card-head { display: flex; justify-content: space-between; height: 18px; } .cp-card-drag { width: 15px; height: 15px; cursor: default; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cg fill='%239E9E9E'%3E%3Crect width='2' height='2'/%3E%3Crect x='4' width='2' height='2'/%3E%3Crect y='4' width='2' height='2'/%3E%3Crect x='4' y='4' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E") 6px 5px no-repeat; } .cp-card-x { position: relative; width: 15px; height: 15px; cursor: pointer; } .cp-card-x::before, .cp-card-x::after { content: ""; position: absolute; left: 2px; top: 7px; width: 11px; height: 1px; background: #333; transform: rotate(45deg); } .cp-card-x::after { transform: rotate(-45deg); } .cp-card .gp-lbl { width: 176px; padding-left: 17px; } .cp-card .gp-lbl.req > span:first-child::before { left: -9px; } .cp-card-foot { height: 11px; } .cp-dsep { margin: 6px 16px 5px; border-top: 2px solid #F9F9F9; } .cp-radio { display: flex; align-items: center; gap: 3px; height: 16px; margin: 0 16px; font: 12px var(--font); color: #222; cursor: pointer; } .cp-radio input { width: 13px; height: 13px; margin: 0; } .cp-many .cp-add { gap: 5px; } /* Скидки и цены: «Действующие скидки» bold, a row of 30 px; the percent 80 px to the right, «%» 4 px after it */ .cp-heading { min-height: 25px; margin-bottom: 4px; padding: 4px 0 0 24px; font: bold 12px/14px var(--font); color: #000; } .cp-pct { display: flex; align-items: flex-start; margin-bottom: 5px; } .cp-pct .inp { width: 80px; height: 21px; padding: 1px 3px; font: 12px var(--font); color: #000; } .cp-pct .u { padding: 4px 0 0 4px; } /* Доступ (accessWidget): the fields at x 225; Отдел 218 px and its pencil */ .cp-acc .gp-ctl { padding-left: 1px; } .cp-grp { display: flex; align-items: flex-start; margin-bottom: 5px; } .cp-grp .field-tools { display: none; } .cp-pen { margin: 4px 0 0 5px; opacity: .4; cursor: default; } .cp-acc .gp-row.cb .gp-lbl { min-height: 23px; } .cp-acc .gp-row.cb input[type=checkbox] { display: block; width: 13px; height: 13px; margin: 4px 0 6px; } /* the browser's own checkbox frame, as the original's */ .cp-col input[type=checkbox]:not(:checked) { border-color: #767676; } /* Онлайн-заказ: 400 × 58 at x 64; the red note 32 px (#FFDCDC, a #FCC0C0 frame), the triangle at x 72, the text at x 93 */ .cp-oo { width: 400px; height: 58px; margin-left: 25px; } .cp-oo-note { display: flex; align-items: center; height: 32px; padding-left: 7px; border: 1px solid #FCC0C0; background: #FFDCDC; color: #222; font: 12px var(--font); } .cp-oo-note .tri { position: relative; flex: none; width: 14px; height: 12px; margin-right: 7px; background: #D04A49; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .cp-oo-note .tri::after { content: "!"; position: absolute; left: 0; right: 0; top: 2px; text-align: center; color: #fff; font: bold 9px/10px Arial, sans-serif; } .cp-oo-off { padding-top: 9px; color: rgba(0, 0, 0, .45); font: 12px/14px var(--font); } /* the card's action bar and its blocks (the original's CompanyDashboardPanel), as at 1440 px: an open block draws a darker line under it */ .kpi-head { padding-top: 4px; } .kpi-bar .btn { margin-right: 16px; } .kpi-head.act + .kpi { margin-top: 27px; border-top: 2px solid #B7B7B7; padding-top: 24px; } /* the counterparty card's «События» (cpevents.js) — the original's AgentEventsView, its CSS and measures at 1440 px */ .ev-panel { padding-top: 4px; } .ev-bar { display: flex; justify-content: flex-end; height: 28px; } .air-radio { display: flex; height: 28px; border: 1px solid #D2D2D2; border-radius: 3px; } .air-radio > div { height: 28px; margin: -1px -1px 0; padding: 0 20px; border: 1px solid transparent; display: flex; align-items: center; cursor: pointer; color: #222; white-space: nowrap; } .air-radio > div.cur { border-color: #186999; border-radius: 3px; color: #186999; } .ev-gear { width: 32px; height: 28px; padding: 10px 0 0 13px; display: flex; gap: 2px; cursor: pointer; } .ev-gear svg { display: block; } .ev-gear .a { margin-top: 4px; width: 0; height: 0; border-left: 2px solid transparent; border-right: 2px solid transparent; border-top: 2.5px solid #1A6C8F; } .ev-sizes { position: absolute; z-index: 120; background: #fff; border: 1px solid #C5C5C5; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); padding: 10px 14px; text-align: center; } .ev-sizes > div { margin-bottom: 5px; } .ev-sizes .seg button { padding: 0 11px; } .ev-delim { height: 2px; border-top: 1px solid #EDEDED; } .ev-delim.start { margin: 32px 0 23.5px; } .ev-delim.stop { margin: 48px 0 16.5px; } .ev-content { width: 516px; } .ev-create-label { padding-bottom: 10px; line-height: 14px; } .ev-ta { display: block; width: 510px; max-width: 510px; height: 67px; margin-bottom: 6px; padding: 3px; border: 1px solid #BFBFBF; border-radius: 1px; font-size: 12px; resize: vertical; } .ev-ta::placeholder { opacity: .45; } .ev-buttons { display: flex; gap: 10px; margin: 0 0 19.5px; } .ev-item { width: 510px; } .ev-item:nth-child(odd) { padding-bottom: 1px; } .ev-month { height: 57px; background: #F6F6F6; display: flex; align-items: center; justify-content: center; color: #878787; } .ev-month.first { height: 35px; border-top: 1px solid #B7B7B7; } .ev-pad { height: 15px; } .ev-head { display: flex; align-items: center; height: 23px; } .ev-type { flex: none; align-self: flex-start; width: 20px; height: 20px; } .ev-type svg { display: block; } .ev-title { flex: 1; min-width: 0; padding-left: 8px; color: #989898; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ev-user { flex: none; display: inline-flex; align-items: center; } .ev-name { margin-right: 10px; max-width: 200px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ev-menu { width: 16px; height: 16px; margin-left: 10px; border-radius: 3px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; } .ev-menu i { width: 3px; height: 3px; border-radius: 50%; background: #A3A3A3; } .ev-menu.pressed { background: #E3E7EB; } .ev-menu.disabled { cursor: default; } .ev-menu.disabled i { background: #DADADA; } .ev-call { padding-left: 28px; } .ev-call .dur { padding: 6px 0 5px; line-height: 14px; white-space: pre-wrap; word-break: break-word; } .ev-records { display: flex; height: 23px; padding-top: 5px; } .ev-record { position: relative; width: 89px; height: 17px; margin-right: 5px; padding-left: 17px; border: 1px solid #84ADC5; border-radius: 9.5px; background: #DEEEFA; color: #222; line-height: 15px; white-space: nowrap; text-decoration: none; } .ev-record .oval { position: absolute; left: -1px; top: -1px; margin: 1px 0 0 1px; width: 15px; height: 15px; border-radius: 50%; background: #1F75A8; } .ev-record .play { position: absolute; left: 5px; top: 2px; margin: 1px 0 0 1px; width: 0; height: 0; border-top: 4px solid transparent; border-left: 6px solid #fff; border-bottom: 5px solid transparent; } .ev-note { padding: 8px 0 0 28px; } .ev-note .text { line-height: 14px; white-space: pre-wrap; word-break: break-word; } .ev-note .ev-ta { width: 482px; max-width: 482px; } .ev-note .ev-buttons { margin-bottom: 0; } .ev-line { margin-top: 20px; border-top: 1px solid #EDEDED; } .menu-pop.ev-pop { width: 147px; min-width: 0; border: 1px solid rgba(203, 203, 203, .45); border-radius: 2px; box-shadow: 0 6px 10px rgba(0, 0, 0, .14); } .ev-confirm { position: absolute; z-index: 130; display: flex; padding: 10px 0 10px 10px; background: #fff; border: 1px solid #DCDCDC; border-radius: 5px; } .ev-confirm a { margin-right: 10px; } /* the counterparty card's «Задачи» (purpose.js agentTasksTab) — the original's purpose-widget at 1440 px: the filter on the left, the table (the page's rows, no header) wider than the card, a faint line, the pager, «Создать задачу» */ .pt-widget { padding-top: 4px; } .pt-bar { display: flex; height: 28px; } .ev-delim.pt-start { margin: 32px 0 20px; } .pt-widget .pp-table { width: 975px; font: 12px/14px var(--font); } .pt-widget .pp-row td.c-done { padding-left: 0; } .pt-widget .pp-row .box { width: 52px; } .pt-delim { width: 768px; height: 2px; margin: 10px 0 20px; border-top: 1px solid #979797; opacity: .2; } .pt-add { margin-top: 25px; } /* the counterparty card's «Документы» (cpdocs.js) — the original's documents-widget at 1440 px: the switch, a line 32 px under it, the table 32 px under the line (no sorting, the last row's line blue), «Еще N …» 8 px under, the create button 25 px under the rest */ .cpd { width: 768px; padding-top: 4px; } .cpd-bar { display: flex; box-sizing: border-box; height: 61px; padding-bottom: 32px; border-bottom: 1px solid #EDEDED; } .cpd-content { padding-top: 32px; } table.grid.lg.cpd-table { margin-top: 1px; } table.grid.lg.cpd-table tbody tr:last-child td { border-bottom-color: var(--link); } table.grid.lg.cpd-table tr.cpd-none td { height: 1px; border-bottom: 0; } .cpd-more { display: inline-block; margin-top: 8px; font: 12px/14px var(--font); } .tk-pager-old.cpd-pager { margin-top: 4px; } .cpd-addpanel { margin-top: 25px; } /* the cards' «Файлы» (files.js cardFilesTab) — the original's filesTable at 1440 px: the table 32 px under the tab bar, rows of 36 px, the old pager 5 px under, «+ Файл» 25 px under that */ .fc { padding-top: 4px; } table.grid.lg.fc-table { margin-top: 1px; } table.grid.lg.fc-table td { height: 36px; } table.grid.lg.fc-table tbody tr:last-child td { border-bottom-color: var(--link); } table.grid.lg.fc-table tr.cpd-none td { height: 1px; border-bottom: 0; } table.grid.lg.fc-table td.fc-img { text-align: center; line-height: 0; } table.grid.lg.fc-table td.fc-img img { max-width: 36px; max-height: 26px; vertical-align: middle; } table.grid.lg.fc-table td.fc-ava { padding-left: 7px; line-height: 0; } table.grid.lg.fc-table a.fc-name { color: var(--link); text-decoration: underline; white-space: normal; display: block; max-height: 28px; overflow: hidden; line-height: 14px; } table.grid.lg.fc-table td.fc-del { text-align: center; } table.grid.lg.fc-table tr:hover .fl-del-old { opacity: 1; } .tk-pager-old.fc-pager { margin-top: 5px; } .fc-add { margin-top: 25px; } /* the product card's tabs (goodtabs.js; the original's #good/edit at 1440 px, 29.10.2026): «Модификации (N)» 128 px, the rest share the bar; each tab's content 32 px under it */ .card.gd .tabs-gray .tab { padding: 0; } .card.gd .tabs-gray .tab[data-key="var"] { flex: 0 0 128px; } .gt { padding-top: 4px; } .tk-pager-old.gt-pager { margin-top: 5px; } /* the stock and history tables start right at their place (the counterparty card's tables keep 1 px above): their lines then fall on the original's */ table.grid.lg.cpd-table.gt-st-table, table.grid.lg.cpd-table.gt-hi-table { margin-top: 0; } table.grid.lg.gt-table tr:hover .fl-del-old { opacity: 1; } table.grid.lg.gt-table td a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Упаковка — good-packs-widget: heads 8 px into their 30 px, a blue line under them; rows 30 px, the value 3 px in (4 px from the text's sides), a grey line; editors 21 px high in their place */ .gt-pk { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: 768px; margin-top: 2px; font: 12px var(--font); color: #222; } .gt-pk th { height: 30px; padding: 8px 5px 0 0; vertical-align: top; text-align: left; font: 11px/14px var(--font); color: #222; font-weight: normal; border-bottom: 1px solid var(--link); white-space: nowrap; overflow: hidden; } .gt-pk th:nth-child(2), .gt-pk td.gt-name { padding-right: 0; } .gt-pk th.r { text-align: right; } .gt-pk td { height: 30px; padding: 3px 5px 0 0; vertical-align: top; border-bottom: 1px solid #BFBFBF; position: relative; } .gt-pk .v { height: 23px; padding: 3px 4px 0; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; } .gt-pk td.r .v { text-align: right; } .gt-pk td.gt-drag .v { padding: 0; cursor: move; opacity: 0; background: radial-gradient(circle, #999 1px, transparent 1.5px) 1px 4px / 4px 4px repeat-y, radial-gradient(circle, #999 1px, transparent 1.5px) 5px 4px / 4px 4px repeat-y; } .gt-pk tr:hover td.gt-drag .v { opacity: 1; } .gt-pk tr.drop td { box-shadow: inset 0 -3px 0 var(--link); } .gt-pk tr.dragging td { opacity: 0.5; } .gt-pk td.gt-kill { padding: 4px 0 0; } .gt-pk tr:hover .fl-del-old { opacity: 1; } .gt-pk .ed { display: block; height: 21px; margin-top: 0; border: 1px solid #BFBFBF; border-radius: 0; padding: 0 4px; font: 12px var(--font); color: #222; background: #fff; } .gt-pk input.ed.num { text-align: right; } .gt-pk input.ed.err { border-color: #E04B4B; } .gt-pk .gt-bc { position: relative; width: 265px; padding: 0; border: 0; } .gt-pk .gt-bc input { width: 265px; height: 21px; padding-right: 20px; border: 1px solid #BFBFBF; font: 12px var(--font); } .gt-pk .gt-gen { position: absolute; right: 0; top: 0; width: 16px; height: 21px; border: 0; padding: 0; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 9'%3E%3Cg fill='%23186999'%3E%3Crect width='1' height='9'/%3E%3Crect x='2' width='2' height='9'/%3E%3Crect x='5' width='1' height='9'/%3E%3Crect x='7' width='1' height='9'/%3E%3Crect x='9' width='1' height='9'/%3E%3C/g%3E%3C/svg%3E") center / 10px 9px no-repeat; } .gt-add { margin-top: 24px; } .gt-pk .v.ro { cursor: default; } /* a variant's grid: the product's pack, not edited */ /* Аналоги — analogs-widget: the text (two lines), «+ Аналог» 20 px under */ .gt-an-empty { font: 12px/14px var(--font); color: #222; } .gt-an-btn { margin-top: 20px; } .gt-warn { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; font: 12px/14px var(--font); color: #222; } .gt-warn-i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #F2A019; color: #fff; font: bold 10px/14px Arial, sans-serif; text-align: center; } /* Остатки — stock-widget: the totals in bold on the old pager's line (the pager in the first cell), «Показать по модификациям» 25 px under */ table.grid.lg.gt-st-table tfoot th { height: 18px; padding: 5px 0 0; border: 0; vertical-align: top; text-align: right; color: #222; font: bold 11px/12px var(--font-grid); white-space: nowrap; } table.grid.lg.gt-st-table tfoot th.gt-pg { padding: 0; text-align: left; font-weight: normal; overflow: visible; } table.grid.lg.gt-st-table tfoot .tk-pager-old { margin-top: 5px; } table.grid.lg.gt-st-table tr.gt-subrow td:first-child .cv { padding-left: 20px; color: #555; } .gt-st-link { margin-top: 25px; font: 12px/14px var(--font); } .gt-st-link a { color: var(--link); } /* История — history-widget: «Закупки» and «Продажи», 222 px blocks 35 px apart, the heading 14 px over its table */ .gt.gt-hist { padding-top: 5px; } .gt-hi-block { height: 222px; } .gt-hi-block + .gt-hi-block { margin-top: 35px; } .gt-hi-head { height: 14px; font: bold 12px/14px var(--font); color: #000; } /* Цены — goodPricesWidget (goodprices.js; the original's product and service cards at 1440 px, 29.10.2026): labels 171 px, rows 27 px — the label 8 px down, the value 140 × 21 6 px down, the currency 8 px after it (140 px with ▾, the pencil 22 × 21 right after); «Цены продажи» 68 px — the legend 35 px down, «Настроить цены» 27; a line 30 px under the table, the checkbox 10 px under the line */ .gpr { font: 12px var(--font); color: #222; } .gpr-table { width: 481px; border-collapse: collapse; border-spacing: 0; table-layout: fixed; } .gpr-table td { padding: 0; vertical-align: top; } .gpr-table tr { height: 27px; } .gpr-table tr.gpr-setup { height: 68px; } .gpr-lbl { display: flex; align-items: flex-start; height: 15px; margin-top: 8px; } .gpr-t { padding-right: 1px; line-height: 14px; white-space: nowrap; } .gpr-lbl .help { width: 15px; height: 15px; margin-left: 5px; font-size: 10px; } .gpr-lbl.gpr-pt { display: block; height: 14px; max-width: 156px; width: max-content; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gpr-lbl.gpr-legend { height: 17px; margin-top: 35px; padding-top: 2px; } .gpr-legend .gpr-t { padding: 0 0 0 1px; } .gpr-setup-btn { width: 113px; margin-top: 27px; justify-content: center; } .gpr-ed { display: flex; align-items: flex-start; height: 21px; margin-top: 6px; } .gpr-val { flex: none; width: 140px; height: 21px; margin: 0; border: 1px solid var(--border); border-radius: 0; padding: 1px 4px 1px 1px; background: #fff; color: #000; font: 12px Arial, sans-serif; text-align: right; outline: none; } .gpr-val:focus { border-color: #5B9DD9; box-shadow: 0 0 2px #5B9DD9; } .gpr-val.err { border-color: #E2453C; background: #FFF3F2; } .gpr-cur { flex: none; width: 162px; margin-left: 8px; } .gpr-cur .line { display: flex; align-items: flex-start; } .gpr-cur .ref input { padding: 0 5px 0 4px; color: #000; font: 12px/14px Arial, sans-serif; } .gpr-cur .ref .open { align-items: flex-start; } .gpr-cur .ref .open::after { margin-top: 8px; border-width: 4px 4px 0; } .gpr-cur .field-tools { margin-left: 0; gap: 0; } .gpr-cur .field-tools .icon-btn { width: 22px; height: 21px; justify-content: center; } /* the icon's box 10 × 10 as the original's; the 12-px glyph drawn over it covers the same pixels as its pencil */ .gpr-cur .field-tools .gl { display: flex; align-items: center; justify-content: center; width: 10px; height: 10px; overflow: visible; } .gpr-cur .field-tools svg { flex: none; } .gpr-line { width: 475px; height: 2px; margin: 30px 0 10px; border-top: 1px solid #EDEDED; } .gpr-line.short { width: 310px; } .gpr-disc { display: flex; align-items: flex-start; height: 14px; line-height: 14px; white-space: nowrap; } .gpr-disc input[type=checkbox] { flex: none; width: 13px; height: 13px; margin: 1px 0 0; border-color: #767676; border-radius: 2px; background-size: 9px; } .gpr-disc span { margin: 1px 0 0 5px; } .kpi-act .kt { font-weight: bold; line-height: 14px; } .kpi-act .fi { width: auto; padding: 0; margin-top: 11px; } .kpi-act .fi .date { width: 126px !important; } .kpi-act .fi .pair, .kpi-act .fi .pbar { margin-top: 3px; } .kpi-act .fi .pbar { width: 266px; } .kpi-act .kl { line-height: 14px; margin: 10px 0 4px; } .kpi-act .kb { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; } .kpi-act .kb .btn { width: 122px; justify-content: center; } .kpi-act .kb .btn.pr { justify-content: flex-start; gap: 0; } .kpi-act .kb .btn.pr .ic { margin-right: 19px; } .kpi-act .kb .btn.pr .caret { margin-left: 12px; } .kpi-act .fi .date .cal { padding-left: 2px; } /* stock report */ .seg { display: inline-flex; border: 1px solid #CCC; border-radius: 3px; overflow: hidden; } .seg button { height: 26px; padding: 0 12px; border: 0; background: linear-gradient(#FDFDFD, #EDEDED); cursor: pointer; font-size: 12px; } .seg button.cur { background: #D7E6F0; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15); } table.grid td.img { width: 40px; padding: 0 4px; } table.grid td.img img { max-width: 32px; max-height: 26px; vertical-align: middle; } /* login */ .login-page { min-height: 100vh; background: #F0F3F5; display: flex; align-items: center; justify-content: center; } .login-box { width: 360px; background: #fff; padding: 34px 36px; box-shadow: 0 2px 12px rgba(0, 0, 0, .12); } .login-box h1 { font-size: 20px; margin: 0 0 22px; display: flex; align-items: center; gap: 10px; } .login-box label { display: block; margin-bottom: 14px; color: #666; } .login-box input { width: 100%; height: 32px; margin-top: 4px; border: 1px solid var(--border); padding: 0 8px; font-size: 14px; } .login-box .btn { width: 100%; height: 34px; justify-content: center; font-size: 14px; margin-top: 6px; } .login-box .err { color: #E2453C; min-height: 18px; margin-top: 10px; } /* ---- tasks and the event feed of documents (tasks.js), measured on the original 24.10.2026 */ .tk-ava { display: inline-flex; border-radius: 50%; background: #B7BDCC; overflow: hidden; flex: none; } .tk-ava.old { background: #D9D9D9; } .tk-tab { margin-top: 11px; } .tk-add { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 0; border-radius: 4px; box-shadow: inset 0 0 0 1px #CCC; background: linear-gradient(#FDFDFD, #EDEDED); font: 13px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #000; cursor: pointer; } .tk-plus { width: 14px; height: 14px; border-radius: 50%; background: #1E88D3; position: relative; flex: none; } .tk-plus::before, .tk-plus::after { content: ""; position: absolute; background: #fff; left: 3px; right: 3px; top: 6px; height: 2px; } .tk-plus::after { left: 6px; right: auto; width: 2px; top: 3px; bottom: 3px; height: auto; } .tk-table { width: 1207px; border-collapse: collapse; table-layout: fixed; font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #222; } .tk-table tr { cursor: pointer; } .tk-table td { padding: 4px 8px 3px; border-bottom: 1px solid #EBEEF3; vertical-align: top; } .tk-table td > div { min-height: 28px; display: flex; align-items: center; gap: 8px; } .tk-table .c-done { width: 58px; padding: 0 0 0 2px; } .tk-table .c-desc { width: 481px; } .tk-table .c-agent { width: 158px; } .tk-table .c-due { width: 166px; } .tk-table .c-who { width: 212px; } .tk-table .c-a { width: 66px; } .tk-table .late, .tk-row-old .late { color: #EE644A; } .tk-desc { white-space: pre-wrap; word-break: break-word; } .tk-done { display: flex; justify-content: center; width: 52px; height: 28px; cursor: pointer; } .tk-circle { width: 22px; height: 22px; margin-top: 7px; border: 2px solid #1F75A8; border-radius: 18px; background: #fff; box-sizing: border-box; } .tk-done:hover .tk-circle { background: #EAF2F7; } .tk-pager { display: flex; align-items: center; gap: 0; margin-top: 12px; font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #222; } .tk-pager > span { margin: 0 8px; padding: 0 16px; } .tk-pg { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 4px; background: none; padding: 0; cursor: pointer; } .tk-pg:disabled { opacity: .55; cursor: default; } .tk-pager.ev { margin-top: 6px; gap: 4px; font: 14px/20px var(--font-new); color: #091739; } .tk-pager.ev > span { margin: 0; padding: 0 13px; } .tk-pager.ev .tk-pg { width: 20px; height: 20px; border: 0; } /* new-UI buttons (ALS Hauss, radius 8) */ .nb { height: 32px; padding: 0 16px; border: 0; border-radius: 8px; font: 14px/20px var(--font-new); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--tab-blue); } .nb.primary { background: var(--tab-blue); color: #fff; } .nb.primary:disabled { background: rgba(211, 216, 221, .7); color: #9FA7AF; cursor: default; } .nb.flat { padding: 0; } .nb.flat:disabled { color: #9FA7AF; cursor: default; } .nb.outline { background: #fff; border: 1px solid #D1D6DF; color: #091739; } .nb.big { padding: 0 16px; } .tk-events { width: 600px; margin-top: 13px; font: 14px/20px var(--font-new); color: #091739; } .tk-ev-head { display: flex; align-items: center; height: 32px; } .tk-ev-head h4 { margin: 0; font: 700 16px/18px var(--font-new); } .tk-help { width: 20px; height: 20px; margin-left: 12px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; } .tk-watch { margin-left: auto; width: 139px; padding: 0 16px; } .tk-input-box { position: relative; margin-top: 12px; border: 1px solid #D1D6DF; border-radius: 8px; background: #fff; } .tk-input-box:focus-within { border-color: #091739; } .tk-input { display: block; width: 100%; height: 96px; padding: 10px 12px; border: 0; border-radius: 8px; resize: vertical; outline: none; font: 14px/20px var(--font-new); color: #091739; background: transparent; box-sizing: border-box; } .tk-input::placeholder { color: #9FA7AF; } .tk-input.small { height: 60px; } .tk-buttons { display: flex; gap: 20px; margin-top: 12px; } .tk-mentions { position: absolute; left: 12px; top: 100%; z-index: 5; min-width: 220px; max-height: 240px; overflow: auto; background: #fff; border-radius: 8px; box-shadow: 0 8px 16px rgba(0, 0, 0, .08), 0 0 4px rgba(10, 4, 41, .06); padding: 4px 0; } .tk-mentions .it { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; } .tk-mentions .it:hover { background: #F1F4F9; } .tk-mention { color: var(--tab-blue); } .tk-feed { margin-top: 20px; } .tk-month { display: flex; height: 38px; } .tk-month .left, .tk-ev .left { position: relative; width: 28px; flex: none; } .tk-month .circle { position: absolute; left: 8px; top: 12px; width: 13px; height: 13px; border: 1px solid #D1D6DF; border-radius: 50%; box-sizing: border-box; } .tk-month .line { position: absolute; left: 14px; top: 29px; bottom: 0; width: 1px; background: #D1D6DF; } .tk-month .name { margin: 6px 0 0 12px; } .tk-ev { display: flex; } .tk-ev .left .tk-ava { margin-top: 4px; } .tk-ev .left .line { position: absolute; left: 14px; top: 36px; bottom: 0; width: 1px; background: #D1D6DF; } .tk-ev .info { flex: 1; min-width: 0; margin-left: 12px; padding: 8px 0 12px; } .tk-ev .hdr { display: flex; align-items: center; height: 20px; } .tk-ev .hdr h4 { margin: 0; font: 700 16px/18px var(--font-new); } .tk-ev .type { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: #5F6D79; } .tk-ev .when { margin-left: 8px; color: #5F6D79; } .tk-ev .acts { display: inline-flex; margin-left: 8px; opacity: 0; } .tk-ev:hover .acts { opacity: 1; } .tk-ev .acts button { width: 24px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; } .tk-ev-text, .tk-text { margin: 8px 0 0; font: 14px/20px var(--font-new); color: #091739; white-space: pre-wrap; word-break: break-word; } /* old form: "Задачи" and "Файлы" sections under the totals */ .tk-sec + .tk-sec { margin-top: 30px; } /* 34 px under «Нет задач», 33 under the pager (25.10.2026) */ .tk-sec { margin-top: 30px; font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #222; } .tk-sec-head { display: flex; align-items: center; gap: 20px; margin-left: -15px; } .tk-fold { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0; border: 0; background: none; color: #CC420C; font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; } .tk-fold .tri { width: 0; height: 0; border: 4.5px solid transparent; border-top: 5px solid #CC420C; border-bottom: 0; } .tk-sec-head.closed .tri { transform: rotate(-90deg); } .tk-sec-body { margin-top: 9px; } .tk-sec-body.files { margin-top: 14px; } .tk-row-old { display: flex; align-items: center; width: 1032px; min-height: 40px; padding: 3px 0 9px; border-bottom: 1px solid #DDD; cursor: pointer; } .tk-row-old .tk-done { width: 39px; height: 22px; justify-content: flex-start; } .tk-row-old .tk-circle { margin-top: 0; } .tk-row-old .tk-desc { width: 465px; line-height: 14px; } .tk-row-old .tk-due { width: 265px; text-align: right; padding-right: 20px; } .tk-row-old .tk-who { display: flex; align-items: center; gap: 22px; } .tk-none { margin-top: -6px; color: #999; line-height: 14px; } .tk-pager-old { display: flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 11px; } .tk-pager-old .pg { width: 13px; height: 13px; border: 1px solid #9DB4C4; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; color: var(--link-new); background: #fff; padding: 0; cursor: pointer; } .tk-pager-old .pg:disabled { color: #CCC; border-color: #CCC; cursor: default; } .tk-pager-old .info { width: 100px; margin: 0 4px; text-align: center; } table.grid.files-old { width: 755px; min-width: 0; table-layout: fixed; } table.grid.files-old th { font: 11px Tahoma, sans-serif; color: var(--link); padding: 0 5px 9px 0; border-bottom: 2px solid var(--link); } /* the table's own bottom line: 1px under the last row, 3px with the header when empty */ .files-old-wrap { width: 755px; border-bottom: 1px solid var(--link); } table.grid.files-old td { height: 35px; padding: 0 5px 0 0; font: 11px Tahoma, sans-serif; color: #222; } table.grid.files-old tr:last-child td { border-bottom: 0; } table.grid.files-old td a { color: var(--link); text-decoration: underline; } table.grid.files-old td.c-emp { overflow: visible; } .fl-ava-old { position: absolute; left: -39px; top: 4px; display: flex; } .fl-del-old { opacity: 0; border: 0; background: none; color: #999; font: 14px Arial, sans-serif; cursor: pointer; padding: 0 4px; } table.grid.files-old tr:hover .fl-del-old { opacity: 1; } .btn-file { font-family: Verdana, sans-serif; } .files-old .chk { width: 41px; } .files-old .c-name { width: 255px; } .files-old .c-size { width: 105px; text-align: right; } .files-old .c-date { width: 171px; } .files-old .c-emp { width: 155px; } /* task drawer (create / view): right half of the window */ .tk-drawer-ov { position: fixed; inset: 0; z-index: 60; background: rgba(1, 4, 11, .36); } .tk-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; min-width: 760px; background: #F1F4F9; box-shadow: 0 2px 7px rgba(9, 23, 57, .2); font: 14px/20px var(--font-new); color: #091739; } .tk-close { position: absolute; left: -16px; top: 8px; z-index: 1; width: 32px; height: 32px; border: 0; border-radius: 20px; background: #F1F4F9; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .tk-dr-content { height: 100%; overflow: auto; padding: 42px 32px 24px; box-sizing: border-box; display: flex; flex-direction: column; } .tk-dr-content.new { padding-right: 0; } .tk-dr-head { display: flex; align-items: flex-start; flex: none; } .tk-dr-head h2 { margin: 0; font: 700 24px/28px var(--font-new); } .tk-links { display: flex; gap: 18px; margin: 2px 0 0 20px; } .tk-links .nb { height: 32px; margin-top: 0; } .tk-stamp { margin-left: auto; font: 12px/16px var(--font-new); text-align: right; } .tk-stamp .who { color: var(--tab-blue); } .tk-cols { display: flex; gap: 20px; margin-top: 16px; flex: 1; min-height: 0; } .tk-col { display: flex; flex-direction: column; gap: 20px; } .tk-col.main { width: 500px; } .tk-col.side { width: 376px; } .tk-paper { background: #fff; border-radius: 8px; padding: 20px; box-sizing: border-box; } .tk-paper.comments { flex: 1; display: flex; flex-direction: column; min-height: 300px; } .tk-paper.wide { margin-top: 16px; } .tk-paper.wide + .tk-paper.wide { margin-top: 20px; } .tk-cap { display: flex; align-items: center; gap: 8px; font: 12px/16px var(--font-new); color: #5F6D79; } .tk-pen { width: 16px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; } .tk-muted { margin: 0; color: #5F6D79; } .tk-notes { flex: 1; overflow: auto; } .tk-note { display: flex; gap: 12px; margin-bottom: 16px; } .tk-note .hdr { display: flex; gap: 8px; align-items: baseline; } .tk-note .when { color: #5F6D79; } .tk-note .tk-text { margin-top: 4px; } .tk-input-box.composer { margin-top: 12px; } .tk-input-box.composer .tk-input { height: 40px; padding: 10px 12px 0; resize: none; } .tk-input-box .bar { display: flex; justify-content: flex-end; height: 24px; padding: 10px 12px 6px; } .tk-send { width: 24px; height: 24px; border: 0; background: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } .tk-send:disabled { opacity: .4; cursor: default; } .tk-label { display: block; font: 14px/20px var(--font-new); color: #091739; margin-bottom: 4px; } .tk-label.gap { margin-top: 20px; } .tk-label .req { color: #E50347; margin-left: 2px; } .tk-small { display: block; font: 12px/16px var(--font-new); color: #5F6D79; margin-bottom: 4px; } .tk-field { margin-top: 20px; } .tk-paper > .tk-field:first-child { margin-top: 0; } .tk-date.date { height: 30px; border: 1px solid #D1D6DF; border-radius: 8px; padding-left: 11px; gap: 8px; box-sizing: border-box; } .tk-date.date input { font: 14px var(--font-new); color: #091739; } .tk-date.date input::placeholder { color: #9FA7AF; } .tk-switch { display: flex; align-items: center; gap: 8px; margin-top: 20px; cursor: pointer; } .tk-switch input { position: absolute; opacity: 0; pointer-events: none; } .tk-switch .track { position: relative; width: 28px; height: 16px; border-radius: 12px; background: #9FA7AF; flex: none; } .tk-switch .thumb { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #9FA7AF; transition: left .15s; } .tk-switch input:checked + .track { background: var(--tab-blue); } .tk-switch input:checked + .track .thumb { left: 12px; box-shadow: inset 0 0 0 1px var(--tab-blue); } .tk-switch .thumb::before, .tk-switch .thumb::after { content: ""; position: absolute; left: 4.5px; top: 7.5px; width: 7px; height: 1px; background: #9FA7AF; transform: rotate(45deg); } .tk-switch .thumb::after { transform: rotate(-45deg); } .tk-switch input:checked + .track .thumb::before, .tk-switch input:checked + .track .thumb::after { display: none; } .tk-type { display: flex; align-items: center; gap: 4px; } .tk-combo { display: flex; align-items: center; justify-content: space-between; width: 280px; height: 32px; padding: 0 13px 0 12px; border: 1px solid #D1D6DF; border-radius: 8px; box-sizing: border-box; background: #fff; } .tk-combo.empty { color: #9FA7AF; } .tk-type, .tk-combo { cursor: pointer; } .tk-combo .tk-tn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tk-tsw { flex: none; width: 12px; height: 12px; margin-right: 6px; border-radius: 2px; } /* the type's colour */ .tk-ctrls { width: 480px; } .tk-input-box.desc { position: relative; margin-top: 0; height: 138px; } .tk-input.big { height: 106px; resize: none; } /* the paperclip row below */ .tk-person { display: flex; align-items: center; gap: 8px; } .tk-drawer .ref { height: 32px; border: 1px solid #D1D6DF; border-radius: 8px; padding: 0 8px 0 12px; box-sizing: border-box; } .tk-drawer .ref input { font: 14px var(--font-new); color: #091739; height: 30px; } .tk-drawer .ref .clear { display: none; } .tk-drawer .ref .open { width: 16px; } .tk-drawer .ref .open::after { width: 7px; height: 7px; border: solid #091739; border-width: 0 1.2px 1.2px 0; transform: translateY(-2px) rotate(45deg); } .tk-drawer .date .cal { padding-left: 0; } .tk-doc { position: relative; width: 340px; margin-top: 4px; padding: 16px; background: #F1F4F9; border-radius: 4px; box-sizing: border-box; } .tk-doc .name { display: flex; align-items: center; gap: 8px; } .tk-doc a { display: block; margin: 4px 0 0 24px; color: var(--tab-blue); text-decoration: none; } .tk-docpick { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 4px; } .tk-docpick .tk-field { margin-top: 0; } .tk-x { position: absolute; right: 14px; top: 14px; width: 16px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; } .tk-nodoc { margin-top: 4px; color: #5F6D79; } .tk-dr-foot { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 24px; flex: none; } /* «Создать задачи» of the counterparty list (tasks.js bulkTasksDrawer): the counterparties the tasks link to; with none ticked — the original's hint (purpose-bulk-create-popup, its styles) */ .tk-bulk-hint { margin-top: 8px; font: 12px/16px var(--font-new); color: #5F6D79; } .tk-bulk-agents { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow: auto; margin-top: 4px; font: 14px/20px var(--font-new); } .purpose-bulk-create-popup { max-width: 293px; padding: 16px; line-height: 16px; box-sizing: border-box; } /* new form: the "Файлы" tab (files.js), measured on the original 24.10.2026 */ .fl-table { width: 1032px; border-collapse: collapse; table-layout: fixed; font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #222; } .fl-table th { height: 32px; padding: 0; text-align: left; font-weight: 400; color: #5F6D79; border-bottom: 1px solid #D1D6DF; } .fl-table th.r, .fl-table td.r { text-align: right; } .fl-table .c-chk { width: 42px; } .fl-table .c-name { width: 465px; } .fl-table .c-size, .fl-table .c-date { width: 150px; } .fl-table .c-emp { width: 196px; } .fl-table .c-del { width: 29px; } .fl-table td { height: 36px; padding: 0 8px; border-bottom: 1px solid #EBEEF3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fl-table td:last-child { padding: 0; } .fl-name { color: var(--link); text-decoration: underline; } .fl-who { display: flex; align-items: center; gap: 8px; } .fl-del { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: none; cursor: pointer; padding: 0; } .fl-del:hover { background: #F1F4F9; } /* task drawer: files attached to a new task */ .tk-clip { position: absolute; left: 17px; bottom: 11px; width: 16px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; } .tk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .tk-chips:empty { display: none; } .tk-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 4px; background: #F1F4F9; font: 13px/18px var(--font-new); } .tk-chip button { border: 0; background: none; cursor: pointer; color: #5F6D79; font-size: 14px; padding: 0 2px; } /* old form: a shipment's "Другие поля" (measured 24.10.2026 at 1920px) */ /* 20px under the attributes; 16px to the tabs, which add 9 of their own */ .oth { margin: 20px 0 7px; font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #222; } .oth-head { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0; border: 0; background: none; color: #CC420C; font: inherit; cursor: pointer; } .oth-head .tri { width: 0; height: 0; border: 4.5px solid transparent; border-top: 5px solid #CC420C; border-bottom: 0; } .oth-head.closed .tri { transform: rotate(-90deg); } .oth-body { margin-top: 15px; } .oth-grid { display: grid; grid-template-columns: 163px 300px 203px 300px; row-gap: 8px; align-items: center; } /* labels fit the original's Helvetica Neue; the fallback font may run into the padding */ .oth-l { position: relative; padding-right: 10px; line-height: 14px; white-space: nowrap; } .oth-l.second { padding: 0 10px; } .oth-l .help { position: absolute; left: -15px; top: 50%; width: 15px; height: 15px; margin-top: -8px; font-size: 10px; } .oth-c .inp { width: 256px; } .oth-c .inp.sdn { width: 81px; } .oth-c .line .ot { display: inline-block; flex: none; width: 25px; margin: 0 10px; text-align: center; } .oth-c .date { height: 21px; } .oth-c .date .cal { padding-left: 4px; } /* ---------------------------------------------------------------- filter panel (filters.js) The original's .dynamic-filter-panel and its stylesheet (24.10.2026): a grey box at x 20, cells 264 px (fields 250 + 7 + 7), the buttons first. */ .fpanel { margin: 8px 0 0 20px; padding: 4px 15px 10px 20px; background: #E3E3E3; border-radius: 3px; display: inline-flex; max-width: calc(100% - 75px); font: 12px var(--font); color: #222; } .fp-grid { display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-start; min-width: 270px; min-height: 50px; max-width: 1584px; } .fi { width: 264px; padding: 6px 7px; position: relative; box-sizing: border-box; } .fi.on { background: rgba(101, 190, 241, .3); border-radius: 2px; } .fi.on.nb-right { border-top-right-radius: 0; border-bottom-right-radius: 0; } .fi.on.nb-left { border-top-left-radius: 0; border-bottom-left-radius: 0; } .fi.on.nb-top { border-top-left-radius: 0; border-top-right-radius: 0; } .fi.on.nb-bottom { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .fi .fh { height: 17px; white-space: nowrap; overflow: hidden; display: flex; align-items: flex-start; } .fi .fl { display: inline-block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 3px; line-height: 14px; } .fi.per .fl { max-width: 122px; padding-right: 4px; } .fi select { width: 250px; height: 21px; font: 12px Arial, sans-serif; border: 1px solid #A9A9A9; background: #fff; display: block; } .fi input.ft { width: 250px; height: 21px; box-sizing: border-box; border: 1px solid #BFBFBF; padding: 2px; font: 12px Arial, sans-serif; display: block; } .fi .pair { display: flex; align-items: center; height: 21px; } .fi .pair .dash { width: 14px; text-align: center; font-size: 14px; } .fi input.fr { width: 118px; height: 21px; box-sizing: border-box; border: 1px solid #BFBFBF; padding: 2px; font: 12px Arial, sans-serif; } .fi input.fr::placeholder { text-align: right; color: #888; } .fi .date { width: 118px !important; height: 21px; box-sizing: border-box; border-color: #BFBFBF; } .fi .date .cal { padding-left: 4px; } .fi .date input { padding-left: 7px; font: 12px Arial, sans-serif; } /* one moment: the whole cell, the text 13 px from the frame (232 px) */ .fi.one .date { width: 250px !important; } .fi.one .date .cal { padding-left: 0; } .fi.one .date input { padding-left: 3px; } .fi.tm .date .cal { padding-left: 0; } .fi.tm .date input { padding-left: 2px; } .fi input:disabled, .fi .date.dis, .fi .date.dis input { background: #E3E3E3; color: #888; } /* presets: "вч·сег·нед·мес"; a picked one sits between arrows */ .fi .pps { display: inline-block; white-space: nowrap; line-height: 14px; } .fi .pp { cursor: pointer; color: #186999; font-size: 13px; } .fi .pp:hover, .fi .pp.on { color: #F88001; } .fi .pm { color: #186999; font-weight: bold; display: inline-block; width: 5px; margin: 0 1px; text-align: center; } .fi .pps.dis .pp, .fi .pps.dis .pm { color: #888; cursor: default; } .fi .pbar { display: flex; align-items: center; justify-content: space-between; height: 21px; } .fi .pl { color: #186999; font-size: 15px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fi .pa { width: 0; height: 0; border-style: solid; cursor: pointer; margin: 0 4px; } .fi .pa.l { border-width: 6px 10px 6px 0; border-color: transparent #186999 transparent transparent; } .fi .pa.r { border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #186999; } /* the condition dot and its menu */ /* 9 px and its 1-px border round it, 11 in all, as the original's: the label 17 px from the cell */ .cw { box-sizing: content-box; width: 9px; height: 9px; display: inline-block; border-radius: 50%; cursor: pointer; border: 1px solid transparent; position: relative; top: 1px; margin: 0 4px 0 2px; flex: none; } .cw:hover { border-color: #fff; } .cw.active { background: #fff; } .cw i { width: 5px; height: 5px; border-radius: 50%; background: #808080; position: absolute; left: 2px; top: 2px; } .cw.notequals, .cw.notempty { width: 11px; height: 11px; background: #000; border: 0; } .cw.notequals i::before, .cw.notequals i::after { content: ''; position: absolute; left: 2px; top: -1px; width: 1px; height: 7px; background: #fff; } .cw.notequals i::before { transform: rotate(45deg); } .cw.notequals i::after { transform: rotate(-45deg); } .cw.notequals i, .cw.notempty i { background: none; left: 3px; top: 3px; } .cw.empty { width: 7px; height: 7px; border: 2px solid #000; } .cw.empty i { background: none; } .cw-pop { position: absolute; z-index: 300; width: 190px; background: #fff; border: 1px solid #BFBFBF; box-shadow: 0 1px 3px #C8C8C8; font: 12px var(--font); padding: 0; } .cw-pop .row { position: relative; padding: 6px 3px 6px 25px; cursor: pointer; } .cw-pop .row:hover { background: #FFFB8C; } .cw-pop .ci { position: absolute; left: 7px; top: 7px; border-radius: 50%; display: inline-block; } .cw-pop .ci.equals { width: 11px; height: 11px; background: #B9B9B9; } .cw-pop .ci.equals i { position: absolute; left: 4px; top: 1px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1px 1px 0; transform: rotate(45deg) scaleX(.9); } .cw-pop .ci.notequals, .cw-pop .ci.notempty { width: 11px; height: 11px; background: #000; } .cw-pop .ci.notequals i::before, .cw-pop .ci.notequals i::after { content: ''; position: absolute; left: 5px; top: 2px; width: 1px; height: 7px; background: #fff; } .cw-pop .ci.notequals i::before { transform: rotate(45deg); } .cw-pop .ci.notequals i::after { transform: rotate(-45deg); } .cw-pop .ci.empty { width: 7px; height: 7px; border: 2px solid #000; } /* a reference field: chosen values as tags, a list with checkboxes */ .msel { display: flex; align-items: stretch; width: 250px; min-height: 21px; box-sizing: border-box; border: 1px solid #BFBFBF; background: #fff; cursor: text; } .msel .tags { flex: 1; display: inline-flex; flex-wrap: wrap; align-items: center; min-width: 0; line-height: 19px; } .msel .tb { flex: 1; min-width: 17px; border: 0; outline: 0; height: 19px; padding: 0 5px 0 2px; font: 12px var(--font); background: transparent; } .msel .tag { display: inline-flex; align-items: center; height: 13px; margin: 2px 0 2px 3px; padding: 0 6px; max-width: 200px; background: #E4F1FA; border: 1px solid #C2E0F3; border-radius: 10px; color: #186999; font: 11px Tahoma, Arial, sans-serif; white-space: nowrap; } .msel .tag .t { overflow: hidden; text-overflow: ellipsis; max-width: 180px; line-height: 13px; } .msel .tag .x { position: relative; width: 9px; height: 9px; margin-left: 6px; cursor: pointer; flex: none; } .msel .tag .x::before, .msel .tag .x::after { content: ''; position: absolute; left: 3px; top: 0; width: 2px; height: 9px; background: #1F75A8; } .msel .tag .x::before { transform: rotate(45deg); } .msel .tag .x::after { transform: rotate(-45deg); } .msel .ld { width: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; } .msel .ld i { border-style: solid; border-width: 4px 4px 0; border-color: #7B7B7B transparent transparent; } .msel.dis, .msel.dis .tb { background: #E3E3E3; color: #888; cursor: default; } .msel-pop { position: absolute; z-index: 300; display: flex; background: #fff; border: 1px solid #BFBFBF; box-shadow: 0 1px 3px #C8C8C8; font: 12px var(--font); color: #000; } .msel-pop .sugg { width: 250px; max-height: 200px; overflow-y: auto; } .msel-pop.wide .sugg { flex: none; } .msel-pop .row { display: flex; align-items: flex-start; gap: 6px; padding: 3px 17px 3px 3px; cursor: pointer; } .msel-pop .row:hover { background: #FFFB8C; } .msel-pop .row input { margin: 2px 0 0 7px; flex: none; } .msel-pop .row .sub { font-size: 11px; color: #666; } .msel-pop .empty { padding: 20px; text-align: center; color: #C0C0C0; } .msel-pop .tagcol { width: 217px; max-height: 200px; overflow-y: auto; padding: 2px 0; } .msel-pop .ttag { display: block; width: fit-content; max-width: 205px; margin: 3px 0 6px 2px; padding: 0 6px; height: 13px; line-height: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #E4F1FA; border: 1px solid #C2E0F3; border-radius: 10px; color: #186999; font: 11px Tahoma, Arial, sans-serif; cursor: pointer; } .msel-pop .ttag.on { background: #1F75A8; border-color: #1F75A8; color: #fff; } /* the first cell: Найти, Очистить, the bookmark, ⚙ */ .fbtns { width: 250px; margin: 10px 7px 0; padding-bottom: 5px; display: flex; align-items: center; box-sizing: content-box; } .fbtns .btn { height: 28px; font-size: 12px; } .fbtns .ffind { padding: 0 21px; margin-right: 10px; background: linear-gradient(#CCE255, #A1B900); border-color: #A1B900; } .fbtns .ffind:hover { background: linear-gradient(#D4E86A, #A9C000); } .fbtns .freset { padding: 0 12px; background: linear-gradient(#FFF, #E6E6E6); } .fround { width: 28px; height: 28px; border-radius: 14px; border: 1px solid #AEAAAA; cursor: pointer; flex: none; background-repeat: no-repeat; background-position: center; } .fround.fsave { margin: 0 5px 0 15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13'%3E%3Cpath d='M0 0h8v13L4 9.8 0 13z' fill='%23fff'/%3E%3C/svg%3E"), linear-gradient(#C0C0C0, #B4B4B4 96%); } .fround.fset { margin: 0 15px 0 5px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='8' cy='8' r='5.2'/%3E%3Crect x='6.9' width='2.2' height='16'/%3E%3Crect y='6.9' width='16' height='2.2'/%3E%3Crect x='6.9' width='2.2' height='16' transform='rotate(45 8 8)'/%3E%3Crect y='6.9' width='16' height='2.2' transform='rotate(45 8 8)'/%3E%3C/g%3E%3Ccircle cx='8' cy='8' r='2' fill='%23B8B8B8'/%3E%3C/svg%3E"), linear-gradient(#C0C0C0, #B4B4B4 96%); } .fround.fsave:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13'%3E%3Cpath d='M0 0h8v13L4 9.8 0 13z' fill='%23fff'/%3E%3C/svg%3E"), linear-gradient(#848484, #909090); } .fround.fset:hover, .fround.fset.active { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='8' cy='8' r='5.2'/%3E%3Crect x='6.9' width='2.2' height='16'/%3E%3Crect y='6.9' width='16' height='2.2'/%3E%3Crect x='6.9' width='2.2' height='16' transform='rotate(45 8 8)'/%3E%3Crect y='6.9' width='16' height='2.2' transform='rotate(45 8 8)'/%3E%3C/g%3E%3Ccircle cx='8' cy='8' r='2' fill='%238A8A8A'/%3E%3C/svg%3E"), linear-gradient(#848484, #909090); } /* ⚙: every field with a checkbox */ .fs-pop { position: absolute; z-index: 300; width: 200px; max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid #BFBFBF; box-shadow: 0 1px 3px #C8C8C8; font: 12px var(--font); } .fs-pop .row { display: flex; align-items: center; height: 22px; padding: 0 3px 0 10px; cursor: pointer; } .fs-pop .row:hover { background: #FFFB8C; } .fs-pop .row input { margin: 2px 4px 0 0; cursor: pointer; } .fs-pop .row span { max-width: 172px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the "Фильтр" button: pressed while the panel shows, blue while a filter applies */ .btn.fbtn { padding: 0 13px; } /* 68 px as the original's */ .btn.fbtn.on { background: linear-gradient(#E6E6E6, #D6D6D6); box-shadow: inset 0 1px 3px #333; border-color: transparent; } .btn.fbtn.ind { background: linear-gradient(#82BFEA, #1F75A8); border-color: #1F75A8; color: #fff; } .btn.fbtn.ind.on { box-shadow: inset 0 1px 3px #333; } /* chips of the saved filters: the original's row is there without chips too (15 px), 8 px under the toolbar or right under the panel; the grid's head comes 10 px under it (24.10.2026, 1440 px: toolbar buttons at y 124, chips at 160, head at 216) */ .fchips { margin: 8px 0 0 20px; padding: 8px 0 7px; font: 12px var(--font); } .fpanel:not(.hidden) + .fchips { margin-top: 0; } .fchips + .grid-wrap { margin-top: 0; } /* the line under the head comes 41 px under the chips row, chips or not: a report's head (31 px, see table.grid.lg.report) goes 1 px lower for it (25.10.2026: contracts and stock by stores without chips, orders, stock by goods with them — pixel for pixel) */ .fchips + .grid-wrap.rep { margin-top: 1px; } /* the minimum width is the text's: a chip of one letter is 75 px */ .fchip { position: relative; display: inline-block; vertical-align: top; box-sizing: content-box; min-width: 50px; max-width: 250px; margin: 3px 3px 0; padding: 6px 15px 5px 10px; background: #E3E3E3; border-radius: 15px; line-height: 1.4; color: #222; cursor: pointer; } .fchip:hover { background: #D1D1D1; } .fchip .t { display: block; max-width: 225px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fchip .fedit { position: absolute; right: 5px; top: 10px; width: 10px; height: 10px; display: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M6.2.6l2.2 2.2-5.3 5.3-2.9.9.9-2.9z' fill='%235E5E5E'/%3E%3C/svg%3E") no-repeat; } .fchip:hover .fedit { display: block; } .fchip.selected { background: #1F75A8; color: #fff; } .fchip.selected .fedit { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M6.2.6l2.2 2.2-5.3 5.3-2.9.9.9-2.9z' fill='%23fff'/%3E%3C/svg%3E"); } /* «Закладки» */ .fdlg-ov { position: fixed; inset: 0; z-index: 400; background: rgba(0, 0, 0, .35); display: flex; align-items: flex-start; justify-content: center; padding-top: 30px; } .fdlg { position: relative; width: 500px; padding: 18px 12px 0; background: #fff; border-radius: 6px; box-shadow: 0 4px 20px rgba(0, 0, 0, .35); font: 12px var(--font); color: #222; } .fdlg-cap { font-size: 20px; font-weight: bold; margin: 0 0 18px 4px; } .fdlg-x { position: absolute; right: 10px; top: 14px; width: 22px; height: 22px; border-radius: 50%; background: #D8D8D8; cursor: pointer; } .fdlg-x::before, .fdlg-x::after { content: ''; position: absolute; left: 10px; top: 5px; width: 2px; height: 12px; background: #333; } .fdlg-x::before { transform: rotate(45deg); } .fdlg-x::after { transform: rotate(-45deg); } .fdlg-row { display: flex; align-items: center; margin-left: 1px; } .fdlg-l { margin-right: 8px; line-height: 21px; } .fdlg input.ft { width: 400px; height: 21px; box-sizing: border-box; border: 1px solid #BFBFBF; padding: 2px; font: 12px Arial, sans-serif; } .fdlg input.ft.err { border-color: red; } .fdlg-btns { display: flex; align-items: center; gap: 10px; margin: 15px 0; } .fdlg-btns .btn { height: 28px; } .fdlg-btns .btn.primary { background: linear-gradient(#CCE255, #A1B900); border-color: #A1B900; } .fdlg-del { margin: 0 15px 0 auto; color: #D04A49; border-bottom: 1px dashed #D04A49; line-height: 15px; cursor: pointer; } /* «Детализация» of a stock report line: a panel over the right of the page (the original's at 1440 px: from x 360, padding 15/10/0/30) */ .sd-glass { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 300; } .sd { position: fixed; top: 0; right: 0; bottom: 0; left: 360px; z-index: 301; overflow: auto; box-sizing: border-box; padding: 15px 10px 20px 30px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, .5); font: 12px var(--font); color: #222; } .sd .sd-close { cursor: pointer; color: #999; } .sd .sd-close a { color: #999; text-decoration: underline; } .sd .sd-close i { font-style: normal; margin-left: 3px; color: #666; } .sd .sd-name { font: 20px/22px var(--font); margin: 7px 0; } .sd .sd-name a { color: var(--link); } .sd .sd-codes { color: #999; } .sd .sd-codes b { font-weight: normal; padding-right: 25px; } .sd table.sd-info { margin: 18px 0 20px; border-collapse: collapse; } .sd table.sd-info td { padding: 0 30px 0 0; text-align: right; font-size: 13px; white-space: nowrap; } .sd table.sd-info tr.v td { font: 17px/20px var(--font); } .sd table.sd-info tr.v td.b { font-weight: bold; } .sd .sd-disc { margin: 20px 0; } .sd .sd-disc-h { display: inline-flex; align-items: center; gap: 6px; margin-left: -15px; font: 15px/20px var(--font); color: #CC420C; cursor: pointer; } .sd .sd-disc-h i { width: 0; height: 0; border: 4.5px solid transparent; border-top: 5px solid #CC420C; border-bottom: 0; } .sd .sd-disc.closed .sd-disc-h i { border: 4.5px solid transparent; border-left: 5px solid #CC420C; border-right: 0; } .sd .sd-disc.closed table { display: none; } .sd table.sd-lots { width: 990px; table-layout: fixed; border-collapse: collapse; margin-left: -10px; font: 11px var(--font-grid); color: #222; } .sd table.sd-lots th { height: 32px; padding: 0 0 6px; box-sizing: border-box; vertical-align: bottom; text-align: left; font-weight: normal; color: #333; border-bottom: 2px solid var(--link); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sd table.sd-lots td { height: 31px; padding: 0; border-bottom: 1px solid #DDD; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sd table.sd-lots tr:last-child td { border-bottom-color: var(--link); } .sd table.sd-lots .r { text-align: right; } .sd table.sd-lots th:first-child, .sd table.sd-lots td:first-child { padding-left: 10px; } .sd table.sd-lots td.empty { text-align: center; color: var(--muted); } /* «Прибыльность» (profit.js): the chart between the saved filters and the table, as the original's (25.10.2026 at 1440 px: x 30–1412, 366 px) */ .pgraph { margin: 0 28px 0 30px; border: 1px solid #E2E2E2; border-radius: 3px; background: #FFF; height: 366px; box-sizing: border-box; } .pgraph.hidden { display: none; } .pg-set { display: flex; align-items: center; height: 51px; box-sizing: border-box; padding: 8px 10px; background: #FAFAFA; border-bottom: 1px solid #E2E2E2; } .pg-set .cmpchk { display: flex; align-items: center; gap: 5px; margin-left: 10px; cursor: pointer; } .pg-set .cmpchk input { margin: 0; position: relative; top: -1px; } .pg-set .btn.cmp { margin-left: 10px; width: 179px; justify-content: space-between; } .pg-set .cper { display: flex; align-items: center; margin-left: 11px; } .pg-set .cper .date { height: 21px; } .pg-set .cper .dash { width: 14px; text-align: center; } .pg-set .agg { margin-left: auto; } .pg-set .x { display: flex; align-items: center; justify-content: center; width: 14px; height: 13px; margin: 0 10px 0 19px; cursor: pointer; } .pg-ind { position: relative; height: 28px; margin-top: 20px; } .pg-ind .btn.ind { position: absolute; top: 0; width: 232px; justify-content: space-between; background: var(--c); border-color: var(--c); color: #FFF; } .pg-ind .btn.ind .caret { border-top-color: #FFF; } .pg-ind .btn.ind.none { background: linear-gradient(#FFF, #E6E6E6); border-color: #CCC; color: var(--text); } .pg-ind .btn.ind.none .caret { border-top-color: #555; } .pg-plot { height: 265px; padding-left: 25px; } .pg-svg { display: block; } .pgraph + .grid-wrap { margin-top: 1px; } /* the table 10 px under the chart (its grouped head adds 9) */ .list-head .btn.graph .ic { flex: none; } /* the balance we owe: green, as the original's (a return's card) */ .dochead .note .pos { color: #84AB0F; } /* an invoice-facture's «Главная» (doc.js factureMain): label and value columns, the value at x 174 (186 on an advance one, its labels longer) */ /* invoice-factures (25.10.2026, at 1440 px): rows 31 px; a received one's labels as wide as «Сумма» and 15 px; the comment 37 px over «Задачи» */ .fo-main { display: grid; grid-template-columns: 134px auto; column-gap: 0; row-gap: 0; padding: 1px 0 0; font-size: 12px; color: var(--text); } .fo-main.in { grid-template-columns: max-content auto; } .fo-main.in .fo-l { padding-right: 15px; } .fo-main.adv { grid-template-columns: 146px auto; } .fo-main .fo-l { line-height: 15px; padding: 7px 0 8px; position: relative; } .fo-main .fo-c { display: flex; align-items: center; min-height: 31px; } .fo-main .fo-v { line-height: 15px; } .fo-main .fo-num { width: 170px; } .fo-main .fo-rate { width: 250px; } .fo-main .fo-goods { width: 327px; height: 36px; } .fo-main .fo-q { position: absolute; left: -25px; top: 7px; } .obottom.fo { padding: 14px 0 3px; } .obottom.fo .comment { width: 508px; height: 64px; } .fo-main .ot { margin: 0 6px; } .fo-main select.fo-rate { height: 20px; border: 1px solid #B3B3B3; border-radius: 2px; background: #fff; font-size: 12px; } .tabs-old.fo { width: max-content; } /* a field a base document fixes (a return's organization, counterparty) */ .dochead .ref.dis { background: #F0F0F0; } .dochead .ref.dis input { color: #888; -webkit-text-fill-color: #888; } .dochead .ref.dis .open, .dochead .ref.dis .clear { display: none; } /* «Воронка продаж» (funnel.js; the original's, 25.10.2026 at 1440 px): a bar #4EB5DA 20 px high at the cell's left; the successful line between two 2-px lines #186999, the last line's 1-px; «Сумма» centred */ table.grid.lg td.c .cv, table.grid.lg th.c .hc { text-align: center; } table.grid.lg .fbar { height: 20px; background: #4EB5DA; } table.grid.lg tr.fin td { border-top: 2px solid #186999; border-bottom: 2px solid #186999; } table.grid.lg tr.fin + tr td { border-top: 0; } table.grid.lg.report:has(tr.fin) tbody tr:last-child td { border-bottom-color: #186999; } .funnel-none { margin: 22px 0 0 40px; font-size: 12px; line-height: 15px; color: #222; } .funnel-none b { display: block; } .funnel-none .btn { margin-top: 14px; } /* the funnel's grid 34 px under the buttons: no strip of saved filters until there are some */ .lp.funnel .fchips:empty, .lp.nochips .fchips:empty { display: none; } /* lists of the original's newer pages (commission reports): no chips row until there are chips — the head 62 px under the toolbar's buttons */ .lp.funnel .fchips:empty ~ .grid-wrap, .lp.nochips .fchips:empty ~ .grid-wrap { margin-top: 24px; } /* (a document list's head text on y 195, as the original's price lists and internal orders — 26.10.2026; a report's grid sits 1 px lower anyway) */ .lp.nochips .fchips:empty ~ .grid-wrap:not(.rep) { margin-top: 23px; } /* under the open panel 8 px closer (the original's «Корректировки», whose panel is open by default: the head's text 42 px under the panel) */ .lp.nochips .fpanel:not(.hidden) + .fchips:empty ~ .grid-wrap:not(.rep) { margin-top: 15px; } .lp.funnel .fchips:empty ~ .lp-notice .funnel-none { margin-top: 22px; } /* «Юнит-экономика» (unit.js): the original's new page, measured 25.10.2026 */ .ue { min-height: calc(100vh - 139px); margin-bottom: -40px; padding: 20px 40px 0 20px; box-sizing: border-box; background: #F1F4F9; font: 14px/20px var(--font-new); color: var(--pos-text); } .ue-head { display: flex; align-items: center; height: 32px; } .ue-head h2 { margin: 0; font: 700 24px/28px var(--font-new); color: var(--pos-text); white-space: nowrap; } .ue-help { width: 20px; height: 20px; margin-left: 12px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; flex: none; } .ue-lbl { margin: 0 8px 0 24px; color: var(--pos-head); white-space: nowrap; } .ue-lbl.to { margin-left: 8px; } .ue .date { height: 30px; box-sizing: border-box; border: 1px solid #D1D6DF; border-radius: 8px; background: #fff; display: flex; align-items: center; } .ue .date .cal { padding-left: 11px; color: var(--pos-text); } .ue .date input { flex: 1; min-width: 0; height: 28px; padding: 0 0 0 8px; border: 0; background: transparent; outline: none; font: 14px var(--font-new); color: var(--pos-text); } .ue .date:focus-within { border-color: var(--pos-text); } .ue-sw { display: flex; align-items: center; gap: 8px; margin-left: 24px; cursor: pointer; white-space: nowrap; user-select: none; } .ue-switch { position: relative; width: 28px; height: 16px; border-radius: 12px; background: #9FA7AF; color: #9FA7AF; flex: none; transition: background .15s; } .ue-switch i { position: absolute; left: 0; top: 0; width: 16px; height: 16px; box-sizing: border-box; border: 1px solid currentColor; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; transition: left .15s; } .ue-switch.on { background: var(--tab-blue); color: var(--tab-blue); } .ue-switch.on i { left: 12px; } .ue-excel { margin-left: auto; height: 32px; padding: 6px 16px; box-shadow: inset 0 0 0 1px var(--tab-blue); } .ue-excel:disabled { color: #9FA7AF; box-shadow: inset 0 0 0 1px #D1D6DF; cursor: default; } .ue-card { margin-top: 16px; background: #fff; border: 1px solid #F0F3F8; border-radius: 8px; overflow: hidden; } .ue-panel { display: flex; align-items: center; height: 51px; box-sizing: border-box; padding: 10px 20px 12px 12px; } .ue-chip { height: 28px; padding: 0 12px; border-radius: 8px; background: #F1F4F9; display: flex; align-items: center; } .ue-gear { margin-left: auto; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: var(--tab-blue); cursor: pointer; display: flex; } .ue-scroll { position: relative; height: calc(100vh - 290px); min-height: 401px; overflow: auto; } table.ue-t { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font: 14px/20px var(--font-new); color: var(--pos-text); } table.ue-t thead th { position: sticky; top: 0; z-index: 2; height: 32px; padding: 0; background: #fff; text-align: left; font-weight: normal; box-shadow: inset 0 -1px 0 #F0F3F8; } table.ue-t th.gp, table.ue-t td.gp { padding-right: 8px; } .ue-th { display: flex; align-items: center; height: 32px; padding: 6px 8px; box-sizing: border-box; font: 12px/20px var(--font-new); color: var(--pos-head); } .ue-th .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.ue-t .g .ue-th, table.ue-t .g .ue-c { background: #E1E3E6; } .ue-chev { width: 20px; height: 20px; margin-left: 4px; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; } .ue-chev:hover { background: #E3E8F0; } .ue-chev.asc svg { transform: rotate(180deg); } table.ue-t td { position: relative; height: 32px; padding: 0; } table.ue-t td::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #F0F3F8; } .ue-c { height: 32px; padding: 4px 8px; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; } .ue-c .k { color: var(--pos-head); } table.ue-t td.nm .ue-c { justify-content: flex-start; } table.ue-t td.nm a { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--pos-text); text-decoration: none; } table.ue-t td.nm a:hover { color: var(--tab-blue); } table.ue-t tfoot th { position: sticky; bottom: 0; z-index: 2; height: 32px; padding: 0; background: #fff; box-shadow: 0 -1px 0 #D1D6DF; text-align: left; font-weight: normal; } .ue-f { display: flex; justify-content: flex-end; padding: 6px 16px 6px 8px; font: 700 14px/20px var(--font-new); } table.ue-t th.gp .ue-f { padding-right: 8px; } .ue-pager { display: flex; align-items: center; gap: 4px; height: 32px; padding: 6px 15px 6px 6px; box-sizing: border-box; font: 14px/20px var(--font-new); } .ue-pager > span { padding: 0 12px; } .ue-pg { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: none; color: #000; cursor: pointer; display: flex; align-items: center; justify-content: center; } .ue-pg:hover:not(:disabled) { background: #E3E8F0; } .ue-pg:disabled { color: #797979; cursor: default; } .ue-hint { position: absolute; z-index: 300; box-sizing: border-box; padding: 20px 24px 20px 20px; border-radius: 4px; background: #fff; box-shadow: 0 2px 20px rgba(9, 23, 57, .16), 0 0 2px rgba(9, 23, 57, .12); font: 14px/20px var(--font-new); color: var(--pos-text); } .ue-hint p { margin: 0; } .ue-hint a { color: var(--tab-blue); text-decoration: none; } .ue-hint .ue-doc { display: inline-flex; align-items: center; height: 32px; } .ue-hint::before { content: ""; position: absolute; top: 15px; border: 8px solid transparent; } .ue-hint.right::before { left: -16px; border-right: 8px solid #fff; filter: drop-shadow(-1px 0 0 rgba(9, 23, 57, .08)); } .ue-hint.left::before { right: -16px; border-left: 8px solid #fff; filter: drop-shadow(1px 0 0 rgba(9, 23, 57, .08)); } .ue-x { position: absolute; top: 14px; right: 14px; width: 12px; height: 12px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; } .ue-pop { position: absolute; z-index: 300; width: 242px; box-sizing: border-box; padding: 4px; border-radius: 8px; background: #fff; box-shadow: 0 1px 6px rgba(85, 96, 115, .35); font: 14px/20px var(--font-new); color: var(--pos-text); } .ue-pop-in { padding: 6px 12px 12px; } .ue-pop .cap { font-size: 12px; line-height: 16px; color: #999; margin-bottom: 6px; } .ue-seg { display: flex; border: 1px solid #CBD0DB; border-radius: 8px; overflow: hidden; } .ue-seg div { height: 32px; padding: 6px 24px; box-sizing: border-box; cursor: pointer; } .ue-seg div:last-child { flex: 1; } .ue-seg div.sel { background: #DFF0FE; } /* «Обучение» (onboarding.js): the original's #sales-onboarding, measured 25.10.2026 */ .onb { min-height: calc(100vh - 139px); margin-bottom: -40px; padding: 20px 20px 20px 32px; box-sizing: border-box; overflow: hidden; background: #F1F4F9; font: 14px/20px var(--font-new); color: var(--pos-text); } .onb h1 { margin: 0; font: 700 32px/38px var(--font-new); } .onb .lead { margin: 8px 0 0; } .onb a { color: var(--tab-blue); text-decoration: none; } .onb-svg { display: flex; flex: none; } .onb-cols { display: flex; gap: 20px; margin-top: 20px; min-height: calc(100vh - 265px); } .onb-tabs { width: 234px; flex: none; display: flex; flex-direction: column; gap: 16px; align-self: flex-start; } .onb-tab { display: flex; flex-direction: column; align-items: flex-start; padding: 17px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; font: 14px/20px var(--font-new); color: var(--pos-text); } .onb-tab:hover { background: #E3E8F0; } .onb-tab.sel { background: #D1D6DF; } .onb-tab .t { margin-top: 5px; line-height: 18px; } .onb-tab.sel .t { font-weight: 700; } .onb-tab .s { margin-top: 1px; font-size: 12px; line-height: 16px; color: var(--pos-head); } .onb-main { width: 580px; flex: none; padding: 20px 20px 24px; box-sizing: border-box; border-radius: 12px; background: #fff; } .onb-main h3, .onb-card h3 { margin: 0; font: 700 20px/24px var(--font-new); } .onb-card.web h3 { white-space: nowrap; } .onb-main h4 { margin: 20px 0 0; font: 700 16px/18px var(--font-new); } .onb-main ol { margin: 12px 0 0; padding: 0; list-style: none; } .onb-main h3 + ol { margin-top: 20px; } .onb-main li { display: flex; align-items: flex-start; } .onb-main li + li { margin-top: 12px; } .onb-main li .n { margin-right: 8px; } .onb-main li .txt.w { max-width: 370px; } .onb-main li .c { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--pos-head); } .onb-main li .go { margin: 7px 8px 0 auto; padding-left: 16px; flex: none; white-space: nowrap; } .onb-main li .go.off { color: #9DBCD0; cursor: default; } .onb-side { width: 572px; flex: none; display: flex; flex-direction: column; gap: 20px; } .onb-card { padding: 20px; box-sizing: border-box; border-radius: 12px; background: #fff; } .onb-card.web { display: flex; gap: 20px; } .onb-card.web p { margin: 8px 0 0; color: var(--pos-head); } .onb-card.web .reg { display: inline-flex; align-items: center; height: 32px; margin-top: 8px; } .onb-card.mat { flex: 1; } .onb-card.mat a { display: flex; align-items: center; gap: 8px; margin-top: 16px; } .onb-main .sub { margin: 4px 0 0; } .onb-main .sub + ol { margin-top: 20px; } /* «Обучение» CRM: 40 px from both edges, the side column 506 px; «Опция CRM» down to the page's end */ .onb.crm { padding: 20px 40px; min-height: calc(100vh - 99px); } .onb.crm .onb-cols { min-height: calc(100vh - 225px); } .onb.crm .onb-side { width: 506px; } .onb.crm .onb-card.web h3 { white-space: normal; } .onb.crm .onb-card.web p { font-size: 12px; line-height: 16px; } .onb-card.opt { flex: 1; } .onb-card.opt p { margin: 4px 0 0; } .onb-card.opt p.c { font-size: 12px; line-height: 16px; color: var(--pos-head); } .onb-card.opt ul { margin: 16px 0 0; padding: 0; list-style: none; } .onb-card.opt li { position: relative; padding-left: 21px; } .onb-card.opt li::before { content: '•'; position: absolute; left: 7px; } /* «Обучение» Производство (31.10.2026; the original's at 1440 px): tabs 217 px, steps 571, the side 572 down to the page's end — the option's card (text 376 px, its picture 140 at the right), the tab's video (572 × 314) and «Полезные материалы»; a step's check 16 px 4 px after its title */ .onb.prod { min-height: calc(100vh - 99px); } .onb.prod .onb-cols { min-height: calc(100vh - 225px); } .onb.prod .onb-tabs { width: 217px; } .onb.prod .onb-main { width: 571px; } .onb-main li .tt { display: flex; gap: 4px; } .onb-main li .tt .onb-ok { margin-top: 1px; } .onb-card.popt { display: flex; justify-content: space-between; } .onb-card.popt .pt { width: 376px; } .onb-card.popt p { margin: 12px 0 0; font-size: 12px; line-height: 16px; color: var(--pos-head); } /* (the original's row wraps both buttons in 376 px — with the clone's font they would fit: one under the other) */ .onb-card.popt .pb { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 20px; } .onb-btn { height: 32px; padding: 6px 16px; box-sizing: border-box; border: 0; border-radius: 8px; font: 14px/20px var(--font-new); white-space: nowrap; } .onb-btn.pri { background: var(--tab-blue); color: #fff; } .onb-btn.fl { padding: 6px 0; background: transparent; color: var(--tab-blue); } .onb-btn:disabled { opacity: .45; cursor: default; } .onb .onb-video { position: relative; height: 314px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; background: linear-gradient(135deg, #2D4A7A, #0F2347); color: #fff; text-align: center; } .onb-video .onb-svg { margin-bottom: 8px; } .onb-video .vt { max-width: 440px; font: 700 20px/24px var(--font-new); } .onb-video .vs { font-size: 12px; line-height: 16px; opacity: .8; } /* an inventory's grid (the original's at 1440 px, 25.10.2026): «Фильтр» and the search over it, the goods panel, a grey 0 of what is not counted yet, the pager under the add bar */ .inv-tools { display: flex; align-items: center; gap: 15px; padding: 1px 0 6px 30px; } /* an inventory with cells: «Остатки по складу | Остатки по ячейке» above the tools (positions.js invTabs; the sizes — a guess) */ .inventory-tab-panel { padding: 1px 0 10px 30px; } .inventory-tab-panel .btn { height: 29px; padding: 0 13px; } .ogrid .obtn.odel:disabled { opacity: .5; cursor: default; } .inv-tools .inv-fbtn { height: 29px; padding: 0 13px; } .inv-tools .inv-fbtn.on { background: linear-gradient(#DCDCDC, #FFF); } .inv-search { box-sizing: border-box; width: 206px; height: 21px; border: 1px solid #BFBFBF; padding: 1px 3px; font: 12px Arial, sans-serif; outline: none; } .inv-search::placeholder { color: #999; } .inv-search:focus { border-color: #8CB7D6; } .inv-panel { display: grid; grid-template-columns: repeat(5, 250px); column-gap: 14px; row-gap: 10px; box-sizing: border-box; width: 1355px; margin: 0 0 6px 10px; padding: 14px 22px 16px 27px; background: #EBEBEB; } .inv-panel.hidden { display: none; } .inv-pbtns { display: flex; align-items: center; gap: 10px; padding-top: 4px; } .inv-pbtns .btn { height: 28px; padding: 0 20px; } .inv-pf { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #333; } .inv-pf input { box-sizing: border-box; height: 20px; border: 1px solid #CCC; padding: 1px 3px; font: 12px Arial, sans-serif; } .ogrid td.zero .ov { color: #CCC; } .inv-pager { margin: 12px 0 0 30px; } .inv-check { display: flex; align-items: center; gap: 6px; font-size: 13px; } /* the inventory card: no custom fields — no room for them; the tabs underline only themselves; a plain «Статус»; no rule under «Кол-во» */ .card.inv .attrs.old:not(:has(.acol > *)) { display: none; } .card.inv .tabs-old { width: max-content; } .state-btn.plain { background: #FFF; border: 1px solid #BBB; color: #222; } .state-btn.plain .caret { border-top-color: #555; } .card.inv .ot-qty { border-bottom: 0; } /* «Задачи» (#purpose, purpose.js): sizes and colours of the original's page (25.10.2026) */ #sub.none { display: none; } .ti-ic { position: relative; display: inline-flex; } .tb-badge { position: absolute; left: 21px; top: 2px; height: 14px; padding: 0 6px 0 5px; border-radius: 29px; background: #EE644A; color: #fff; font: 11px/14px Arial, sans-serif; white-space: nowrap; } .tb-badge.hidden { display: none; } .list-head.pp-head { padding-left: 45px; } .pp-head .search.pp-search { width: 206px; box-sizing: border-box; margin-left: 14px; } /* the page's panel and chips 10 px further right than the lists' (its frame is 50 px from the edge) */ .pp-page .fpanel, .pp-page .fchips { margin-left: 30px; } /* a solid cog (the filter panel's, dark) as the original's */ .pp-head .pp-gear, .pp-head .pp-gear:disabled { width: 38px; padding: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='%23444'%3E%3Ccircle cx='8' cy='8' r='5.2'/%3E%3Crect x='6.9' width='2.2' height='16'/%3E%3Crect y='6.9' width='16' height='2.2'/%3E%3Crect x='6.9' width='2.2' height='16' transform='rotate(45 8 8)'/%3E%3Crect y='6.9' width='16' height='2.2' transform='rotate(45 8 8)'/%3E%3C/g%3E%3Ccircle cx='8' cy='8' r='2' fill='%23F4F4F4'/%3E%3C/svg%3E") no-repeat center, linear-gradient(#FFF, #E6E6E6); } .pp-wrap { padding: 11px 0 40px 40px; } .pp-table { border-collapse: collapse; table-layout: fixed; width: 1279px; font: 12px/16.8px Tahoma, Geneva, sans-serif; color: #222; } .pp-table td { padding: 5px 0; vertical-align: middle; overflow-wrap: break-word; } .pp-group { cursor: pointer; } .pp-table tr.pp-group td { height: 40px; padding: 5px 0 0 8px; vertical-align: top; font: 15px Tahoma, Geneva, sans-serif; color: #CC420C; } .pp-group td > div { display: flex; align-items: flex-start; } .pp-group span.tri { flex: none; width: 0; height: 0; margin: 10px 7px 0 0; border-style: solid; border-width: 5px 4.5px 0; border-color: #CC420C transparent transparent; } .pp-group.closed span.tri { margin: 8px 11px 0 2px; border-width: 4.5px 0 4.5px 5px; border-color: transparent transparent transparent #CC420C; } .pp-row { cursor: pointer; } .pp-row.even { border-bottom: 1px solid #DDD; } .pp-row.hidden { display: none; } .pp-row td.c-done { padding-left: 10px; vertical-align: top; } .pp-row .box { position: relative; width: 42px; height: 32px; } .pp-done { position: absolute; left: 13px; top: 4px; width: 22px; height: 22px; box-sizing: border-box; border: 2px solid #1F75A8; border-radius: 18px; background: #fff; cursor: pointer; } .pp-done.on { background: #1F75A8; } .pp-done.on::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .pp-row.done .c-desc { color: #999; } .pp-row td.c-due.late { color: #EE644A; } .pp-row td.c-link { padding-left: 12px; } .pp-row .pp-tc { display: block; width: 12px; height: 12px; } /* the type's colour */ .pp-row td.c-link a { color: #186999; text-decoration: none; } .pp-row td.c-link a:hover { text-decoration: underline; } .pp-row td.c-ava .tk-ava { display: block; margin: 5px 0 4px 3px; } .pp-notes, .pp-files { display: flex; align-items: center; } .pp-notes label, .pp-files label { color: #1F75A8; font-weight: bold; line-height: 14.04px; cursor: pointer; } .pp-files .fi { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 16px; background: #79BEE7; } .pp-files label { padding-left: 4px; } .pager.pp-pager { height: 18px; padding: 2px 50px 0; border-top: 0; box-shadow: none; background: #fff; } .pp-pager .info { width: 100px; margin: 0 8px; padding-top: 0; } /* ---------------------------------------------------------------- print forms (print.js) */ .menu-pop.print-menu { min-width: 158px; } /* «Комплект...» — the templates by document type, a ticked one's copies */ .pset { font-size: 13px; } .pset-type { margin: 14px 0 6px; font-weight: bold; color: #333; } .pset-type:first-child { margin-top: 0; } .pset-row { display: flex; align-items: center; justify-content: space-between; min-height: 26px; padding-left: 4px; } .pset-row label { display: flex; align-items: center; gap: 6px; cursor: pointer; } .pset-n { width: 46px; height: 22px; box-sizing: border-box; padding: 0 4px; border: 1px solid #C4C4C4; text-align: right; } .pset-none { color: #777; } /* the print format's dialog (chooseFormat): the original's MessageBox with its print-form-table — the rules of its CSS, the layout a guess */ .print-format { font-size: 12px; } .print-format .messageBoxText { margin-bottom: 8px; font-size: 13px; } .print-form-table { border-collapse: collapse; } .print-form-table td { height: 25px; padding: 0; vertical-align: middle; } .print-form-table .gwt-ListBox { height: 19px; font-size: 12px; background-color: #fff; border: 1px solid #bfbfbf; box-sizing: content-box; } .print-form-table .gwt-CheckBox { display: inline-flex; align-items: center; font-size: 12px; white-space: nowrap; cursor: pointer; } .print-form-table .gwt-CheckBox input { margin: 0 5px 0 0; } .print-format-modal .mf { justify-content: flex-end; } /* «Печать этикеток и ценников» (labels.js, 30.10.2026): the original's PriceTypePrintDialog — its rules (.PriceTypePrintDialog .radio-button, table.radio-button-panel, .label-warning), the layout a guess */ .labels-form { border-collapse: collapse; font-size: 12px; } .labels-form > tbody > tr > td { height: 25px; padding: 0; vertical-align: middle; } .labels-form td.lbl { padding-right: 12px; white-space: nowrap; } .labels-form td.lbl.top { vertical-align: top; padding-top: 4px; } .labels-form .gwt-ListBox { width: 240px; height: 21px; font-size: 12px; background-color: #fff; border: 1px solid #bfbfbf; } .labels-form input.num { width: 80px; height: 21px; box-sizing: border-box; padding: 0 4px; border: 1px solid #C4C4C4; text-align: right; font-size: 12px; } .PriceTypePrintDialog table.radio-button-panel { margin-top: 2px; border-collapse: collapse; } .PriceTypePrintDialog table.radio-button-panel td { height: 20px; padding: 0; } .PriceTypePrintDialog .radio-button { display: inline-flex; align-items: center; vertical-align: middle; white-space: nowrap; cursor: pointer; } .PriceTypePrintDialog .radio-button input { height: auto; margin: 0 5px 0 0; } .PriceTypePrintDialog .label-warning { color: #d1622a; margin: 12px 0 0; max-width: 380px; font-size: 12px; } /* ---------------------------------------------------------------- «Отправить» (send.js; the original's own rules) */ .menu-pop.send-menu { min-width: 300px; } .publication-mark-flex { display: inline-flex; width: 100%; flex-direction: row; justify-content: space-between; } .publication-mark { display: inline-block; color: #fff; border-radius: 2px; background-color: #14a7e6; padding: 2px 5px; margin: 0 0 0 20px; line-height: 11px; } .send-modal .mb { padding-top: 0; } .send-dlg { font-size: 13px; } .send-dlg .default-label, .send-dlg .required-label { margin-top: 20px; font-weight: bold; margin-bottom: 3px; } .send-dlg .required-label:after { color: #f00; content: "*"; display: inline-block; position: relative; right: -3px; width: 0; } .send-dlg .warn-label { color: red; margin-top: 3px; font-style: italic; } .send-dlg .warn-label:empty { display: none; } .send-dlg .mail-subject, .send-dlg .pub-link { width: 100%; height: 21px; box-sizing: border-box; padding: 0 3px; border: 1px solid #C4C4C4; font: inherit; } .send-dlg .mail-text { width: 100%; box-sizing: border-box; padding: 3px; border: 1px solid #C4C4C4; font: inherit; resize: vertical; } .send-dlg .chips { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-height: 23px; padding: 1px 22px 1px 3px; box-sizing: border-box; border: 1px solid #C4C4C4; cursor: text; } .send-dlg .chips-in { flex: 1; min-width: 120px; height: 19px; border: 0; outline: 0; padding: 0; font: inherit; } .send-dlg .chips-arrow { position: absolute; right: 6px; top: 50%; margin-top: -2px; border: 5px solid transparent; border-top-color: #7B7B7B; border-bottom: 0; cursor: pointer; } .send-dlg .chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 5px; border: 1px solid #A6CFE9; border-radius: 3px; background: #E4F1FA; color: #1F75A8; line-height: 17px; } .send-dlg .chip-x { cursor: pointer; font-size: 11px; } .send-dlg label { display: flex; align-items: center; gap: 5px; cursor: pointer; } .send-dlg .publish-radio { margin-top: 15px; margin-bottom: 10px; } .send-dlg .attach-radio { margin-bottom: 10px; } .send-dlg .publish-panel { padding-left: 17px; } .send-dlg .display-link-label { display: inline-block; margin-bottom: 10px; } .send-dlg .processing-label { margin-left: 5px; margin-bottom: 10px; color: #777; } .send-dlg .link-default-label { font-weight: bold; margin-bottom: 3px; } .send-dlg .copy-delete-panel { display: flex; gap: 8px; margin-top: 10px; margin-bottom: 10px; } .send-dlg .publication-delete-button { margin-top: 0; } .send-dlg .radio-default { padding-bottom: 10px; padding-left: 17px; } .send-dlg .radio-default:has(input:disabled), .send-dlg .publish-radio:has(input:disabled) { color: #999; cursor: default; } .send-dlg .send-note { margin-top: 6px; padding: 6px 8px; background: #FFF8D6; border: 1px solid #F0DD8C; color: #5C4A00; } .hist .he-t td.he-plain { white-space: pre-wrap; } body.printing { background: #E5E5E5; } body.printing #top, body.printing #sub { display: none; } .pf-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 8px 20px; background: #F7F7F7; border-bottom: 1px solid #D5D5D5; } .pf-bar .pf-title { margin-left: 12px; font: 13px Arial, sans-serif; color: #444; } .pf-desk { padding: 20px 0 40px; } .pf-paper { margin: 0 auto; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .25); box-sizing: border-box; } .pf-paper + .pf-paper { margin-top: 20px; } /* the workbook's next sheet */ @media screen { .pf-paper.pf-wide { min-width: max-content; } } /* a sheet wider than its paper (a report) */ .pf-bar .pf-warn { margin-left: 12px; font: 12px Arial, sans-serif; color: #A94442; } .pf-wait { padding: 40px; font: 13px Arial, sans-serif; color: #777; } .pf-sheet { position: relative; width: max-content; overflow: hidden; } /* past the print area nothing prints */ .pf-sheet.pf-center { margin: 0 auto; } .pf-table { border-collapse: collapse; table-layout: fixed; } .pf-table td { padding: 0 2px; overflow: visible; line-height: 1.15; font-size: 10pt; font-family: Arial, sans-serif; } .pf-table td.pf-clip { overflow: hidden; } .pf-table tr.pf-hidden { visibility: collapse; } .pf-table td.pf-has-img { position: relative; } .pf-img { position: absolute; left: 0; top: 0; z-index: 2; } .pf-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; } .pf-layer img { position: absolute; z-index: 2; } @media print { body.printing { background: #fff; } .pf-bar { display: none; } .pf-desk { padding: 0; } .pf-paper { width: auto !important; padding: 0 !important; box-shadow: none; margin: 0; } .pf-paper + .pf-paper { margin-top: 0; break-before: page; } .pf-table tr.pf-break { break-before: page; } .pf-table tr { break-inside: avoid; } } .pf-table .pf-line { display: flex; white-space: pre; } .pf-table .pf-line.pf-end { justify-content: flex-end; } .pf-table .pf-line.pf-center { justify-content: center; } /* Сотрудник (employees.js): the original's old form, measured 26.10.2026 at 1440 px — labels end at 221 px, fields from 236 px, rows 31 px apart; the access block from 568 px, its labels end at 703 px; the role blocks 14 px above their radio, their notes 13 px lines with 15 px under them */ .emp-card { padding-top: 20px; } .emp-card .arch { display: flex; align-items: center; gap: 10px; margin-left: 260px; } .emp-card .arch .btn { padding: 0 12px; } .emp-del { margin-left: 28px; color: #D04A49; border-bottom: 1px dashed #D04A49; line-height: 15px; cursor: pointer; } .emp-del.off { opacity: .5; cursor: default; } .emp-body { display: flex; align-items: flex-start; margin-top: 53px; } .emp-left { width: 528px; flex: none; } .emp-grid { display: grid; grid-template-columns: 181px max-content; column-gap: 15px; row-gap: 10px; align-items: start; } .emp-grid > .lbl, .emp-card .emp-attrs .lbl { text-align: right; margin-top: 3px; line-height: 14px; position: relative; white-space: nowrap; } .emp-grid > .lbl.req::before, .emp-card .emp-attrs .lbl.req::before { content: "*"; position: static; margin-right: 1px; color: #E2453C; } .emp-grid > .lbl .help { margin-right: 4px; } .emp-grid > .ctl { min-height: 21px; display: flex; align-items: center; } .emp-grid > .ctl.short { min-height: 16px; } .emp-card .emp-attrs { margin-top: 12px; } .emp-card .emp-attrs .acol { grid-template-columns: 181px max-content; column-gap: 15px; row-gap: 10px; margin-right: 0; } .emp-sec { margin: 0 0 10px; font-size: 15px; line-height: 17px; color: #CC420C; } .emp-left .emp-sec { margin: 13px 0 20px; } .emp-add { display: inline-flex; align-items: center; gap: 5px; color: var(--link); cursor: pointer; line-height: 15px; } .emp-add b { width: 10px; font-weight: 400; font-size: 16px; line-height: 12px; text-align: center; } .emp-add.off { color: #9DB8CB; cursor: default; } .emp-right { width: 412px; } .emp-on { display: flex; align-items: center; gap: 5px; height: 14px; margin: 0 0 10px; } .emp-on input[type=checkbox] { width: 13px; height: 13px; margin: 0; border-radius: 2px; background-size: 9px; } .emp-grid.acc { grid-template-columns: 135px max-content; } .emp-login { line-height: 14px; } .emp-suffix { margin-left: 5px; } .emp-pwrow { margin: 11px 0 0 150px; } .emp-pwrow.hidden, .emp-roles.hidden { display: none; } .emp-pwrow.own { margin: 15px 0 0; } .emp-roles { margin-top: 38px; } .emp-warn { display: flex; align-items: center; gap: 9px; padding: 15px 21px 15px 12px; border: 1px solid #E5D97F; background: #FFFDC4; line-height: 14px; margin-bottom: 8px; } .emp-warn svg { flex: none; color: #D9A400; } .emp-role { padding: 14px 0 0; } .emp-role.on { background: #E5F0F9; } .emp-role label { display: flex; align-items: center; gap: 3px; margin-left: 7px; line-height: 14px; } .emp-role label input { margin: 0; width: 13px; height: 12px; } .emp-role label .dis { color: #808080; } .emp-note { width: 407px; margin-left: 5px; padding-bottom: 14px; font-size: 11px; font-style: italic; color: #808080; line-height: 13px; } .emp-role .btn { margin: -6px 0 9px 23px; } .emp-roles > .emp-sec:not(:first-child) { margin-top: 25px; } .emp-net-h { font-weight: 700; line-height: 14px; margin: 0 0 13px; } .emp-net-h ~ .emp-net-h { margin: 17px 0 3px; } .emp-net { line-height: 16px; margin-bottom: 4px; } .emp-pw { display: grid; grid-template-columns: 70px 250px; gap: 10px 12px; align-items: center; font-size: 12px; } .emp-pw .lbl { text-align: right; } .emp-pw .note { grid-column: 1 / -1; color: #666; line-height: 15px; } .emp-ava { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #DDE3E8; } .list-head .emp-help { display: inline-flex; align-items: center; gap: 6px; margin-left: 30px; font-size: 14px; color: #036CE5; text-decoration: none; } .emp-grid > .lbl .req-mark { margin-right: 1px; color: #E2453C; } /* employee card (employees.js): the original's #employee/edit at 1440 px (29.10.2026) — the labels' text 2 px under its field's top, the «?» 15 px and 10 px before the text, a «*» 7 px before it; the toolbar as the company card's; the custom fields 13 px under «Описание», «Изображение» 10 px under them; «Уведомления» under «Сеть» (the account page's table) */ .empl-card .emp-grid > .lbl, .empl-card .emp-attrs .lbl { margin-top: 2px; } .empl-card .emp-grid > .lbl.req::before, .empl-card .emp-attrs .lbl.req::before { content: "*"; display: inline-block; position: relative; right: 7px; top: 0; left: auto; width: 0; margin: 0; color: #F00; } .empl-card .emp-grid > .lbl .help, .empl-card .emp-attrs .lbl .help { position: static; width: 15px; height: 15px; margin-right: 10px; font-size: 10px; vertical-align: top; } .empl-card .emp-grid > .lbl .req-mark { display: inline-block; position: relative; right: 7px; width: 0; margin: 0; color: #F00; } .empl-card .emp-grid > .lbl.req:has(.help)::before, .empl-card .emp-attrs .lbl.req:has(.help)::before { content: none; } .empl-card .emp-grid > .lbl.req .help, .empl-card .emp-attrs .lbl.req .help { position: relative; left: 0; top: 0; } .empl-card .emp-grid > .lbl.req .help::after, .empl-card .emp-attrs .lbl.req .help::after { content: "*"; position: absolute; left: 17px; top: -1px; font-size: 12px; font-weight: 400; line-height: 14px; color: #F00; } .empl-card .arch .help { width: 15px; height: 15px; margin-top: -1px; font-size: 10px; } .empl-card .arch .btn { width: 132px; justify-content: flex-start; padding: 0 0 0 10px; } .empl-card .card-tools .right { align-self: flex-start; margin-left: 5px; } .empl-card .card-tools .who .v { position: relative; top: -2px; } .empl-card .emp-attrs { margin-top: 13px; } .empl-card .emp-attrs .date { height: 21px; } .empl-card .emp-left .emp-sec { margin-top: 10px; } .empl-card .emp-add { align-items: flex-start; } .empl-card .emp-add b { height: 10px; margin-top: 2px; font-size: 0; background: linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat; } /* a new login: the field, the account's suffix after it, wrapping in 250 px */ .empl-card .emp-grid > .ctl.login { display: block; width: 250px; line-height: 14px; } .empl-card .emp-newlogin .emp-suffix { margin-left: 0; } .empl-card .emp-nt { margin-top: 25px; } /* the access block: «Разрешить вход» text on the checkbox's top line, the warning #FDFFC1 in a #CCD008 frame, its sign 10 px in, the text 10 px after it; the chosen role's panel #E4F1FA */ .empl-card .emp-right > .emp-sec:first-child { margin-bottom: 11px; } .empl-card .emp-on { align-items: flex-start; } .empl-card .emp-pwrow { margin-top: 10px; } .empl-card .emp-pwrow.hidden + .emp-roles { margin-top: 35px; } .empl-card .emp-warn { align-items: flex-start; gap: 10px; padding: 15px 20px 15px 10px; border-color: #CCD008; background: #FDFFC1; margin-bottom: 9px; } .empl-card .emp-role.on { background: #E4F1FA; } /* a role's note: 11 px italic, 12 px lines, 16.5 px in (1.5em), 5 px over and 12 under */ .empl-card .emp-note { width: auto; padding: 5px 0 12px 16.5px; line-height: 12px; } .empl-card .emp-role .btn { margin: -7px 0 8px 22px; } .empl-card .emp-add { display: flex; width: max-content; } .empl-card .emp-roles > .emp-sec:not(:first-child) { margin-top: 26px; } .empl-card .emp-nt > .emp-sec { line-height: 17px; } /* the flags 3 px left of their column's middle, as the original's */ .empl-card .emp-nt .nt-set input[type=checkbox] { position: relative; left: -3px; } /* Юр. лицо (organizations.js): the old form as the employee's (labels end at 221 px, fields from 236); the right column's boxes 461 px from x 566, their labels end at 747 px and fields start at 762 (26.10.2026, 1440 px) */ .org-card .emp-left { width: 526px; } .org-right { width: 461px; margin-top: -10px; } .org-card .emp-attrs .lbl .help { position: static; margin-right: 4px; } .emp-grid > .ctl.org-type { min-height: 23px; } .org-box { box-sizing: border-box; width: 461px; padding: 11px 10px 14px; border-radius: 3px; margin-bottom: 10px; } .org-box.gray { background: #F2F2F2; padding-bottom: 18px; } .org-box.blue { background: #DDEEFB; } .org-box .emp-sec { display: flex; align-items: center; justify-content: space-between; margin: 0 0 9px; } .org-box.cash .emp-sec { margin-bottom: 14px; } .org-box .emp-grid { grid-template-columns: 171px max-content; } .org-del { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: #C4C4C4; color: #fff; cursor: pointer; } .org-add { display: inline-flex; align-items: center; gap: 5px; color: var(--link); cursor: pointer; line-height: 15px; } .org-add b { width: 10px; font-weight: 400; font-size: 16px; line-height: 12px; text-align: center; } .org-add.hidden, .org-desc.hidden { display: none; } .emp-left > .org-add { margin: 11px 0 8px 196px; } .org-desc { margin-top: 10px; } .org-signs { margin-top: 1px; } .org-desc:not(.hidden) + .org-signs { margin-top: 10px; } .org-add.acc { margin: 2px 0 17px 5px; } /* a file field (widgets.js fileField): the original's «Прикрепить файл» (134 × 19), or the miniature, the name and ⊗ at the field's right end */ .ffile { display: inline-flex; align-items: center; gap: 5px; width: 250px; min-height: 19px; } .ff-attach { height: 19px; padding: 0 11px; font: 13.3333px Arial, sans-serif; color: #000; background: #EFEFEF; border: 1px solid #767676; border-radius: 2px; } /* the miniature: the original's .file-uploader .image-miniature (no more than 32 × 18, 5 px before the name — the gap) */ .ff-thumb { max-width: 32px; max-height: 18px; flex: none; } .ff-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ff-x { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin: 0 2px 0 auto; border-radius: 50%; background: #C4C4C4; color: #fff; cursor: pointer; flex: none; } .ff-x:hover { background: #A9A9A9; } .org-radio { display: inline-flex; align-items: center; gap: 3px; line-height: 14px; } .org-radio input { margin: 0; width: 13px; height: 12px; } .org-vat { display: grid; gap: 6px; justify-items: start; } .org-bal { line-height: 14px; } .org-2l { display: inline-block; line-height: 14px; vertical-align: top; } .org-card .ta { min-height: 0; } .org-fias { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 3px 0 11px; } .org-title { margin-bottom: 3px; } .org-fias a { line-height: 15px; } .emp-grid > .ctl.org-innrow { min-height: 25px; margin: 1px 0 5px; } .emp-grid > .lbl:has(+ .ctl.org-innrow) { margin-top: 7px; } .org-byinn { height: 25px; padding: 0 10px; } /* organization card (organizations.js): the original's #mycompany/edit at 1440 px (29.10.2026) — each label's text 2 px under its field's top (an address comment's 1 px over it, a FIAS code's 5 px under it), its «?» 15 px and 10 px before the text, a «*» 7 px before it; the files: the miniature 18 px high, the name 5 px after it in 199 px, ⊗ after them; a two-line label's row centres its field; the groups 25 px apart, their rows 10 px under the title («Маркировка» 12) */ /* the toolbar: «?» 15 px, «Поместить в архив» 132 px, its text from 10 px; owner, changes and the avatar 5 px further than the documents', the date of the last change 2 px higher */ .org-card .arch .help { width: 15px; height: 15px; margin-top: -1px; font-size: 10px; } .org-card .arch .btn { width: 132px; justify-content: flex-start; padding: 0 0 0 10px; } .org-card .card-tools .right { align-self: flex-start; margin-left: 5px; } .org-card .card-tools .who .v { position: relative; top: -2px; } .org-card .emp-grid > .lbl, .org-card .emp-attrs .lbl { margin-top: 2px; } .org-card .emp-grid > .lbl.req::before, .org-card .emp-attrs .lbl.req::before { content: "*"; display: inline-block; position: relative; right: 7px; top: 0; left: auto; width: 0; margin: 0; color: #F00; } .org-card .emp-grid > .lbl .help, .org-card .emp-attrs .lbl .help { position: static; width: 15px; height: 15px; margin-right: 10px; font-size: 10px; vertical-align: top; } .org-card .emp-grid > .lbl.addr-c { margin-top: 0; } .org-card .emp-grid > .lbl.fias { margin-top: 8px; } .org-card .org-fias { gap: 4px; margin-bottom: 10px; } .org-card .org-fias a { line-height: 14px; } /* «+ Комментарий», «+ Расчетный счет»: the plus 10 × 10, 2 px bars */ .org-card .org-add { align-items: flex-start; } .org-card .org-add b { height: 10px; margin-top: 2px; font-size: 0; background: linear-gradient(#186999, #186999) center / 10px 2px no-repeat, linear-gradient(#186999, #186999) center / 2px 10px no-repeat; } .org-card .emp-left > .org-add { margin: 10px 0 9px 196px; } /* a label of two or three lines: 14 px lines, its «?» makes the first 15 */ .org-card .org-2l { display: inline; line-height: inherit; } /* a «*» with a «?»: between them, 7 px before the text */ .org-card .emp-grid > .lbl.req:has(.help)::before, .org-card .emp-attrs .lbl.req:has(.help)::before { content: none; } .org-card .emp-grid > .lbl.req .help, .org-card .emp-attrs .lbl.req .help { position: relative; left: 0; top: 0; } .org-card .emp-grid > .lbl.req .help::after, .org-card .emp-attrs .lbl.req .help::after { content: "*"; position: absolute; left: 17px; top: -1px; font-size: 12px; font-weight: 400; line-height: 14px; color: #F00; } .org-card .emp-grid > .ctl.mid { align-self: center; } .org-card .emp-grid > .ctl.file { min-height: 20px; align-items: flex-start; } .ffile.bare { align-items: flex-start; gap: 0; min-height: 0; } .ffile.bare:has(.ff-name) { height: 21px; } .ffile.bare .ff-thumb { width: auto; max-width: 60px; height: 18px; margin-right: 5px; } .ffile.bare .ff-name { width: 199px; max-width: 199px; margin-top: 4px; line-height: 14px; } .ffile.bare .ff-x { width: 14px; height: 13px; margin: 3px 0 0; } .org-grp { margin-top: 25px; } .org-card .org-grp > .emp-sec { margin: 0 0 10px; } .org-card .org-grp.mark > .emp-sec { margin-bottom: 12px; } .org-card .org-grp.xattrs .emp-attrs { margin-top: 0; } /* a file field: its row 20 px, the button at its top; a file's name 1 px lower, its ⊗ at the top (the original's miniature — the clone has none for an attribute's file) */ .org-card .emp-attrs .ctl:has(> .ffile) { min-height: 20px; align-items: flex-start; } .org-card .emp-attrs .ffile { align-items: flex-start; min-height: 0; } .org-card .emp-attrs .ffile .ff-name { margin-top: 1px; line-height: 14px; } .org-card .emp-attrs .ffile .ff-x { height: 13px; margin-top: 0; } .org-card .emp-grid > .lbl.org-bold { font-weight: 700; } .org-card .emp-grid > .ctl.org-empty { min-height: 16px; } .org-pct { display: inline-flex; align-items: flex-start; } .org-pct .u { padding: 3px 0 0 2px; line-height: 14px; } .org-card .emp-grid > .ctl.org-conn { min-height: 46px; align-items: flex-start; padding-top: 15px; } .org-conn .btn { width: 152px; } .org-card .emp-grid > .ctl.chain input { margin: 0; width: 13px; height: 13px; } .org-card .emp-grid > .lbl.org-log { margin-top: 10px; } .org-off { color: #9DB8CB; text-decoration: underline; cursor: default; } .org-card .org-grp .date { height: 21px; } .org-card .date.dis { background: #F0F0F0; } /* the right column: the boxes 10 px in, their title 10 px under the top (the cash's 13), «Изменить» 20 px after a balance; an account's ↑ ↓ ⊗ at its right end, the offer of the bank's app 10 px under its rows and 24 px over its bottom; «+ Расчетный счет» 10 px under the last; «Подразделения» 40 px under the taxes */ .org-card .org-box { padding: 10px 10px 15px; } .org-card .org-box .emp-sec { margin-bottom: 10px; } .org-card .emp-grid > .ctl.org-type { min-height: 23px; } .org-card .org-type .ref { height: 23px; } .org-card .emp-grid > .lbl:has(+ .ctl.org-innrow) { margin-top: 8px; } .org-card .emp-grid > .lbl:has(+ .ctl.org-innrow) .help { margin-right: -5px; } .org-card .emp-grid > .ctl.org-innrow { min-height: 31px; margin: 0; align-items: flex-start; } .org-card .org-byinn { width: 192px; height: 28px; padding: 0 10px; } .org-card .org-box.cash { padding: 13px 10px 17px; } .org-card .org-box.cash .emp-sec { margin-bottom: 15px; } .org-bal { display: inline-flex; margin-top: 1px; line-height: 16px; } .org-bal .chg { margin-left: 20px; } .org-card .org-box.blue { background: #D9ECFF; } .org-card .org-box.acc { padding-bottom: 25px; } .org-card .org-box.acc .emp-sec { margin-bottom: 9px; } .org-card .emp-grid > .ctl.bic { min-height: 22px; } .org-card .emp-grid > .lbl:has(+ .ctl.bic) { margin-top: 3px; } .org-tools { position: relative; align-self: stretch; } .org-tools > * { position: absolute; } .org-move.up { right: 46px; top: -2px; } .org-move.down { right: 21px; top: 0; } .org-move svg { display: block; } .org-card .org-tools .org-del { right: 0; top: 3px; height: 13px; } .org-card .org-del, .org-card .ff-x { background: #ACACAC; } /* a grey field: #888 on #F0F0F0, as the original's */ .org-card .inp:disabled { background: #F0F0F0; color: #888; } .org-offer { width: 400px; margin: 10px 0 0 10px; line-height: 14px; } .org-offer:empty { margin-top: 10px; } .org-off.inst { margin-left: 4px; } .org-card .org-add.acc { display: flex; width: max-content; margin: 0 0 10px; } .org-card .org-box.taxes { padding-bottom: 19px; } .org-card .emp-grid > .ctl.cb { align-items: flex-start; } .org-card .emp-grid > .ctl.cb input { width: 13px; height: 13px; margin: 2px 0 0; } .org-card .org-vat { margin-top: 2px; } .org-card .org-vat .org-radio { align-items: flex-start; } .org-card .org-vat .org-radio input { height: 13px; } .org-branches { margin-top: 40px; padding-left: 10px; } .org-branches .emp-sec { margin: 0 0 10px; } .org-branch-add { height: 28px; gap: 5px; padding: 0 10px; } .org-branch-add .pl { width: 14px; height: 14px; border-radius: 50%; background: #2A87C8 linear-gradient(#FFF, #FFF) center / 8px 2px no-repeat; position: relative; } .org-branch-add .pl::after { content: ""; position: absolute; inset: 3px 6px; background: #FFF; } .org-btbl { display: flex; margin: 20px 0 0 -10px; padding: 0 0 7px 10px; width: 463px; border-bottom: 2px solid #186999; line-height: 14px; } .org-btbl .c1 { width: 301px; } .tk-pager-old.org-bpager { margin-top: 10px; } /* the address (address.js): the chevron 4 px right of the textarea; the parts' gray box 13 px under it, rows of 36 px on the grid's columns, the next row 5 px under the box (26.10.2026, 1440 px) */ .addr-line { display: inline-flex; align-items: flex-start; gap: 4px; margin-bottom: 8px; } .addr-ta { width: 228px; height: 30px; min-height: 0; } .addr-tog { box-sizing: border-box; width: 18px; height: 18px; padding: 0; border: 1px solid #C2C2C2; border-radius: 3px; background: linear-gradient(#FFF, #E6E6E6); color: #666; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .addr-tog.open svg { transform: rotate(180deg); } .addr-parts { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-auto-rows: 36px; margin: -5px 0 -5px; } .addr-parts.hidden { display: none; } .addr-parts > .lbl { text-align: right; margin-top: 5px; line-height: 14px; white-space: nowrap; } .addr-parts > .ctl { box-sizing: border-box; width: 250px; padding: 5px 0 0 5px; background: #F2F2F2; } .addr-parts .inp { box-sizing: border-box; width: 223px; height: 19px; } .addr-parts .inp.wide { width: 225px; height: 21px; } /* a document of the recycle bin (doc.js): read-only, the fields greyed as the original's (#F0F0F0, #888); its note over the top bar — an info window, green, centred, rounded below (26.10.2026) */ .card.ro input:disabled, .card.ro textarea:disabled, .card.ro select:disabled { background: #F0F0F0; color: #888; } .card.ro .ref, .card.ro .date { background: #F0F0F0; } .card.ro .ref { box-sizing: content-box; height: 19px; padding-right: 18px; } /* the original's read-only field: 248 px where the edited is 228 */ .card.ro .ref input:disabled, .card.ro .date input:disabled { background: transparent; } .card.ro .ref .clear, .card.ro .ref .open, .card.ro .field-tools, .card.ro .date .cal, .card.ro .btn-file { display: none; } /* the number and the date — text, as the original's; «Добавить позицию» white; «Цена», «Добавить из справочника», «Импорт» greyed */ .card.ro .doc-title .no:disabled { background: none; color: #222; border-color: transparent; } .card.ro .doc-title .date { background: none; border-color: transparent; } .card.ro .doc-title .date input:disabled { color: #555; padding-left: 9px; } .card.ro .add-input:disabled { background: #fff; color: inherit; } .card.ro .obtn2, .card.ro th.r .obtn { color: #B5B5B5; } .ro-note { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 1000; height: 26px; padding: 0 24px 0 8px; display: flex; align-items: center; background: #D4E8AE; border-radius: 0 0 5px 5px; box-shadow: 0 0 5px #333; font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #000; white-space: nowrap; } .ro-note .x { position: absolute; right: 7px; top: 5px; color: #666; font-size: 15px; line-height: 15px; cursor: pointer; } /* ------------------------------------------------------------------ the audit (audit.js) a card's «Изменения: <кто>», the date under it — both links to the history, as the original's (26.10.2026) */ .who .n, .who .v.go { color: var(--link); cursor: pointer; } .who .n:hover, .who .v.go:hover { text-decoration: underline; } /* «Аудит»: 36 px rows with the avatar between «Время» and «Сотрудник» */ table.grid td.ava-c .cv { overflow: visible; } table.grid td.ava-c .ava { display: block; width: 24px; height: 24px; margin: -5px auto; border-radius: 50%; background: #DDE3E8; } /* «История изменений»: the original's panel on the right (782 px at 1440), the close button on its edge; an entry — the avatar, «кто, изменено … дата», «Поле / Было / Стало» */ .hist-ov { position: fixed; inset: 0; z-index: 60; background: rgba(1, 4, 11, .36); } .hist { position: absolute; top: 0; right: 0; bottom: 0; width: min(782px, 100%); box-sizing: border-box; overflow: auto; padding: 38px 47px 30px 32px; background: #fff; box-shadow: 0 0 25px rgba(0, 0, 0, .35); font-size: 14px; line-height: 18px; color: #222; } .hist-x { position: absolute; top: 9px; right: min(769px, calc(100% - 26px)); z-index: 1; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, .3); cursor: pointer; } .hist-x::before, .hist-x::after { content: ""; position: absolute; left: 6px; top: 12px; width: 14px; height: 1.5px; background: #555; transform: rotate(45deg); } .hist-x::after { transform: rotate(-45deg); } .hist-cap { padding-left: 1px; font: bold 24px/28px var(--font); margin-bottom: 30px; } .hist-empty { color: #8C8C8C; } .hist .he { display: flex; gap: 8px; margin-bottom: 18px; } .hist .he .ava { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #DDE3E8; } .hist .he-main { flex: 1; min-width: 0; padding-top: 3px; color: #5A6470; } .hist .he-head b { color: #222; } .hist .he-t { width: 100%; margin-top: 10px; border-collapse: collapse; table-layout: fixed; color: #222; } .hist .he-t th { padding: 0 0 6px; font-size: 11px; font-weight: normal; color: #5F6D79; text-align: left; border-bottom: 1px solid #E0E3E6; } .hist .he-t th:first-child { width: 148px; } .hist .he-t th:nth-child(2) { width: 262px; } .hist .he-t td { padding: 5px 8px 5px 0; vertical-align: top; border-bottom: 1px solid #E0E3E6; overflow-wrap: anywhere; } .hist .he-t a { color: var(--link); } .lp.audit table.grid tbody td { height: 35px; } /* «Файлы»: «Используется: N МБ» and «Увеличить объем» after the search, as the original's */ .list-head .fp-used { margin-left: 14px; font-size: 12px; color: #222; white-space: nowrap; } /* «Показатели» (#dashboard, dashboard.js) — the original's at 1440 px: two columns 208–716 and 776–1284, titles #CC420C, totals 20 px, tables with fixed columns and 30 px rows under a blue line. The root is .dashb, not .dash: that is the filter panel's «–» between two boxes (its margin threw every range's second box aside) */ .dashb { position: relative; width: 1076px; margin: 0 0 40px 208px; font-size: 12px; color: #222; } .dashb .d-title { position: relative; font-size: 15px; color: #CC420C; line-height: 18px; margin-left: 10px; } .dashb .d-help { position: absolute; left: -35px; top: 2px; width: 14px; height: 14px; border: 1px solid #4A9BD0; border-radius: 50%; color: #4A9BD0; font-size: 10px; line-height: 14px; text-align: center; cursor: help; } .dashb .d-sales { position: relative; height: 301px; padding-top: 20px; } .dashb .d-sales .d-tabs { display: inline-flex; margin: 11px 0 0 10px; } .dashb .d-sales .d-tabs .btn { height: 28px; padding: 0 10px 0 9px; margin-left: 0; } .dashb .d-sales .d-tabs .btn.pressed { padding: 0 8px 0 11px; } .dashb .d-cap { margin: 24px 0 0 10px; line-height: 14px; } .dashb .d-cap.second { margin-top: 42px; } .dashb .d-cap.second + .d-line { margin-top: 8px; } .dashb .d-line { display: flex; margin: 7px 0 0 10px; } .dashb .d-tot { display: flex; align-items: flex-start; } .dashb .d-tot .n { font-size: 20px; line-height: 20px; white-space: nowrap; } .dashb .d-tot .u { font-size: 10px; line-height: 14px; color: #6D6D6D; text-align: center; } .dashb .d-cnt { min-width: 50px; text-align: center; margin-right: 40px; } .dashb .d-cnt .n { color: #3E9F9F; } .dashb .d-sum { text-align: center; } .dashb .d-delta { margin: -2px 0 0 0; position: absolute; left: 188px; } .dashb .d-line { position: relative; } .dashb .d-delta .l1 { font-size: 17px; line-height: 21px; white-space: nowrap; } .dashb .d-delta sup { font-size: 10px; color: #6D6D6D; margin-left: 3px; vertical-align: 6px; line-height: 0; } .dashb .d-delta.down .l1 { color: #EB2646; } .dashb .d-delta.up .l1 { color: #3E9F9F; } .dashb .d-delta .ar { font-size: 11px; margin-right: 3px; vertical-align: 2px; } .dashb .d-delta .l2 { font-size: 10px; color: #6D6D6D; line-height: 12px; } .dashb .d-sales .d-chart { position: absolute; left: 469px; top: 49px; } .dashb svg text.ax { font: 9px Arial, sans-serif; fill: #222; } .dashb .d-row { display: flex; gap: 60px; height: 326px; } .dashb .d-half { width: 508px; } .dashb .d-half > .d-tot { margin: 7px 0 0 10px; } .dashb .d-half > .d-tot .d-cnt { margin-right: 40px; } .dashb table.d-table { border-collapse: collapse; table-layout: fixed; } .dashb table.d-table th { font-size: 13px; font-weight: 700; text-align: left; vertical-align: top; padding: 0 10px 8px; line-height: 15px; white-space: nowrap; border-bottom: 2px solid #1F6497; } .dashb table.d-table th .dim { font-size: 10px; font-weight: 400; color: #6D6D6D; line-height: 11px; } /* the original cuts a long cell off, without «…» */ .dashb table.d-table td { height: 30px; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: clip; } .dashb table.d-table .r { text-align: right; } .dashb table.d-table a { color: var(--link); } .dashb table.overdue { width: 508px; margin-top: 7px; } .dashb table.overdue th:nth-child(1) { width: 271px; } .dashb table.overdue th:nth-child(2) { width: 96px; } .dashb table.overdue th:nth-child(3) { width: 90px; } .dashb table.overdue th:nth-child(4) { width: 51px; } /* a long name is cut at 130 px */ .dashb table.overdue td.ag a { display: inline-block; max-width: 130px; overflow: hidden; white-space: nowrap; vertical-align: middle; } .dashb a.d-agent.arch { color: #999; } .dashb a.d-agent .ab { display: inline-block; width: 10px; height: 10px; margin-right: 2px; background: #999; color: #fff; font-size: 8px; line-height: 10px; text-align: center; vertical-align: 1px; } .dashb .d-all { display: inline-block; margin: 8px 0 0 10px; font-weight: 700; color: var(--link); } .dashb .d-money { position: relative; height: 364px; } .dashb .d-money .d-left { width: 510px; } .dashb .d-tot.money { width: 169px; justify-content: center; margin: 7px 0 0 10px; } .dashb table.money { width: 510px; margin-top: 7px; } .dashb table.money th:nth-child(1) { width: 400px; } .dashb table.money th:nth-child(2) { width: 110px; } .dashb table.money tbody tr:last-child td { border-bottom: 2px solid #1F6497; } .dashb .d-pager { display: flex; align-items: center; height: 23px; margin-top: 1px; font-size: 11px; } .dashb .d-pager .pb { width: 12px; height: 12px; border: 1px solid #1F6497; border-radius: 2px; margin-right: 6px; cursor: pointer; position: relative; } .dashb .d-pager .pb.off { border-color: #ccc; cursor: default; } .dashb .d-pager .pb::after { position: absolute; inset: 0; font-size: 10px; line-height: 10px; text-align: center; color: #1F6497; } .dashb .d-pager .pb.off::after { color: #ccc; } .dashb .d-pager .first::after { content: '«'; } .dashb .d-pager .prev::after { content: '‹'; } .dashb .d-pager .next::after { content: '›'; } .dashb .d-pager .last::after { content: '»'; } .dashb .d-pager .pt { width: 104px; text-align: center; margin-right: 6px; } .dashb .d-money .d-chart.money { position: absolute; left: 570px; top: 0; } .dashb .d-legend { display: flex; justify-content: center; gap: 34px; margin-top: -3px; font-size: 12px; } .dashb .d-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; border: 1px solid; } .dashb .d-legend .dot.inc { background: #DCF4C4; border-color: #9ACD6E; } .dashb .d-legend .dot.out { background: #FFAAAA; border-color: #D9534F; } .dashb .d-legend .dot.bal { background: #BFE2F2; border-color: #6BB3D6; } .dashb .d-recent .d-title { height: 18px; } .dashb .d-recent .d-refresh { margin-left: 12px; cursor: pointer; vertical-align: -1px; } .dashb table.recent { width: 931px; margin-top: 7px; } .dashb table.recent th { font-size: 13px; } .dashb table.recent th:nth-child(1) { width: 150px; } .dashb table.recent th:nth-child(2) { width: 57px; } .dashb table.recent th:nth-child(3) { width: 113px; } .dashb table.recent th:nth-child(4) { width: 150px; } .dashb table.recent th:nth-child(5) { width: 100px; } .dashb table.recent th:nth-child(6) { width: 77px; } .dashb table.recent th:nth-child(7) { width: 70px; } .dashb table.recent th:nth-child(8) { width: 113px; } .dashb table.recent th:nth-child(9) { width: 101px; } .dashb table.recent td:nth-child(3) { padding-right: 0; } .dashb table.recent td.ap { color: #6AA92C; } .dashb table.recent td.ap.off { color: #DDEBC8; } /* «Документы» (#operation, documents.js): «Документ» — two columns of sections (150 and 186 px), a section's name bold on grey */ .menu-pop.doc-create { display: flex; gap: 7px; padding: 9px 10px 9px; } .doc-create .dc-col:first-child { width: 150px; } .doc-create .dc-col:last-child { width: 186px; } .doc-create .dc-group { height: 22px; line-height: 22px; padding: 0 4px; margin-bottom: 6px; background: #E5E5E5; font-weight: 700; } .doc-create .mi { height: 24px; padding: 0 6px; } /* «Настройки компании» (#companysettings): the original's page at 1440 px (26.10.2026) — a column 651 px wide from x 40, «Сохранить» at y 129, headings 20 px, rows 20 px with 16 px between, the box 16 px at x 40 and its text at x 64 */ .cset { width: 691px; padding: 30px 0 40px 40px; font: 14px/20px var(--font-new); color: #091739; } .cset .bar { height: 36px; } .cset .save { width: 97px; height: 36px; border: 0; border-radius: 4px; background: linear-gradient(#CEE356, #A1B900); color: #fff; font: 14px var(--font-new); cursor: pointer; } .cset .save:disabled { opacity: .6; cursor: default; } .cset h1 { margin: 32px 0 0; font: 700 32px/38px var(--font-new); } .cset h3 { display: flex; align-items: center; gap: 12px; margin: 30px 0 0; font: 700 20px/24px var(--font-new); } .cset h1 + h3 { margin-top: 24px; } .cset h3.far { margin-top: 34px; } .cset .opt { display: flex; align-items: center; height: 20px; margin-top: 16px; cursor: pointer; } .cset h3 + .opt { margin-top: 24px; } .cset .opt input { width: 16px; height: 16px; margin: 0 8px 0 0; accent-color: #036CE5; cursor: pointer; } .cset .opt.dis { cursor: default; color: #5F6D79; } .cset .opt.dis input { cursor: default; } .cset .q { display: inline-flex; margin-left: 12px; cursor: help; } .cset h3 .q { margin-left: 0; } .cset .addr-row { margin: 8px 0 0 24px; } .cset .addr { width: 300px; height: 28px; box-sizing: border-box; padding: 0 8px; border: 1px solid #C9D0D8; border-radius: 4px; font: 14px var(--font-new); color: #091739; } .cset a.mailhelp { display: block; width: max-content; height: 18px; margin-top: 33px; color: #036CE5; font-size: 14px; line-height: 18px; text-decoration: none; } .cset a.mailhelp + h3 { margin-top: 33px; } .cset .note { margin: 2px 0 0 24px; font-size: 12px; line-height: 15px; color: #5F6D79; } .cset .note + .opt { margin-top: 17px; } .cset .gap { height: 16px; } .cset .note2 { margin-top: 16px; font-size: 12px; line-height: 16px; color: #5F6D79; } .cset .country { margin: 16px 0 0; font-weight: 600; } /* a price list's grid (pricelist.js; the original's card of 26.10.2026 at 1440 px): pill buttons, «Фильтр» and the search box over the grid; 11px lines, a column per price column (85px), the names as links; 100 lines a page with the pager under them */ .card.pricelist .tabs-old { width: max-content; margin-top: 20px; padding-bottom: 4px; } /* (its tab: 70 × 28 at 1440 px — padding 5 7 0 10 of the original's tabName) */ .card.pricelist .tabs-old .tab { padding: 5px 6px 6px 9px; } .card.pricelist .doc-title .date input { font-family: var(--font); } .pl-wrap { position: relative; padding-top: 18px; } .pl-tools { position: relative; height: 31px; } .pl-pill { position: absolute; top: 2px; box-sizing: border-box; height: 26px; padding: 0 10px; border: 1px solid #E0E0E0; border-radius: 12px; background: #fff; font: 700 11px var(--font); color: #222; cursor: pointer; white-space: nowrap; } .pl-pill:first-child { left: 0; } .pl-pill.gray { left: 176px; color: #C0C0C0; cursor: default; } .pl-pill:not(:first-child):not(.gray) { left: 176px; } .pl-pill .plus { margin-right: 6px; font-size: 15px; line-height: 0; color: #1A73C1; } .pl-filter { position: absolute; top: 0; left: 380px; box-sizing: border-box; height: 28px; padding: 0 13px; border: 1px solid #CCC; border-radius: 3px; background: linear-gradient(#fff, #F2F2F2); font: 12px var(--font); color: #222; cursor: pointer; } .pl-filter.on { background: #E4F1FA; } .pl-search { position: absolute; top: 4px; left: 463px; box-sizing: border-box; width: 206px; height: 21px; padding: 2px; border: 1px solid #BFBFBF; border-radius: 3px; font: 12px var(--font); } .pl-addbox { margin: 6px 0; } .pl-add { box-sizing: border-box; width: 400px; height: 23px; padding: 1px 4px; border: 1px solid #BFBFBF; font: 12px var(--font); } .pl-addbox .cd { color: #999; } .pl-panel { display: flex; gap: 20px; margin: 8px 0; padding: 10px; background: #F5F5F5; } .pl-find { display: flex; flex-direction: column; gap: 6px; } .pl-fields { display: flex; flex-wrap: wrap; gap: 8px 16px; } .pl-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #666; } .pl-f .inp { width: 200px; } .pl-grid { table-layout: fixed; border-collapse: collapse; font: 11px var(--font-grid); color: #222; } .pl-grid th { box-sizing: border-box; height: 33px; padding: 0 3px; border-top: 1px solid #E4F1FA; border-bottom: 1px solid #C5C5C5; background: #fff; color: #186999; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-grid th:nth-child(n+3) { border-left: 1px solid #E0E0E0; } /* (a long word of a code or an article is cut at the cell's edge, as the original's) */ .pl-grid td { box-sizing: border-box; height: 31px; padding: 0 5px; border-bottom: 1px solid #DDD; vertical-align: middle; overflow: hidden; } .pl-grid .pl-c { padding: 0; text-align: center; } .pl-grid input[type=checkbox] { width: 13px; height: 13px; margin: 0; vertical-align: middle; } .pl-grid td.pl-n { padding: 0 5px 0 0; text-align: right; } .pl-grid td.pl-nm { padding: 0; white-space: nowrap; text-overflow: ellipsis; } .pl-grid td.pl-nm a { color: #186999; text-decoration: underline; } .pl-grid td.pl-v { padding: 0 5px; text-align: right; cursor: text; } .pl-grid tbody tr:hover td { background: #FFFB8C; } .pl-grid tr.new td { background: #F4FAF0; } .pl-ov { min-height: 13px; } .pl-in { box-sizing: border-box; width: 100%; height: 22px; padding: 1px 3px; border: 1px solid #BFBFBF; font: 11px var(--font-grid); text-align: right; } .pl-pager { display: flex; align-items: flex-start; gap: 12px; padding: 5px 0 0 8px; font: 11px var(--font); color: #186999; } .pl-count { padding: 2px 4px; margin-right: -6px; font-weight: 700; } .pl-pg { padding: 0 2px 3px; margin-top: 2px; text-decoration: underline; cursor: pointer; } .obottom.pl { padding: 19px 0 0 3px; } /* «Задачи» 17 px under the comment («Файлы» as the other old forms) */ .card.pricelist .tk-sec { margin-top: 13px; } .card.pricelist .tk-sec + .tk-sec { margin-top: 30px; } .obottom.pl .comment.old { width: 808px; height: 64px; margin-right: 0; } /* Скидки (#discount, discounts.js): the original's old list (26.10.2026) — the note 8 px under the buttons, the grid of 519 px from x 30 (Tahoma 11 px; the head 32 px over a 2 px #186999 line, rows of 32 px with 1 px #DDD, the last one's line #186999), the pager 5 px under it */ .disc-list .list-head h1 { margin-right: 0; } .disc-seg { display: inline-flex; } .disc-seg button { height: 28px; padding: 0 10px; border: 1px solid #CCC; background: linear-gradient(#FFF, #E6E6E6); font: 12px var(--font); color: var(--text); cursor: pointer; } /* 94 and 115 px wide, as the original's */ .disc-seg button:first-child { border-radius: 3px 0 0 3px; border-right: 0; padding: 1px 9px 1px 11px; } .disc-seg button:last-child { border-radius: 0 3px 3px 0; padding: 0 9px 0 10px; } .disc-seg button.cur { background: linear-gradient(#E6E6E6, #D6D6D6); box-shadow: inset 0 1px 3px #333; border-color: #AAA; } .disc-gear { width: 38px; padding: 0; justify-content: center; } /* the original's note opens with an empty line: 70 px from y 160 */ .disc-note { margin: 8px 0 0 40px; padding-top: 14px; font: 12px/14px var(--font); color: var(--text); } .disc-off { color: #186999; text-decoration: underline; cursor: default; } .disc-grid { margin: 10px 0 0 30px; width: 519px; border-collapse: collapse; table-layout: fixed; font: 11px Tahoma, Arial, sans-serif; color: var(--text); } .disc-grid th { height: 32px; padding: 5px 0 0 5px; text-align: left; font-weight: normal; color: #186999; border-bottom: 2px solid #186999; position: relative; white-space: nowrap; } .disc-grid td { height: 32px; padding: 0 0 0 5px; border-bottom: 1px solid #DDD; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .disc-grid tr:last-child td { border-bottom-color: #186999; } /* the widths hold the paddings: 75, 205, 205 and 34 = 519 */ .disc-grid .ac { width: 75px; padding-left: 10px; } .disc-grid .nm, .disc-grid .tp { width: 205px; } .disc-grid th.gear, .disc-grid td.gear { width: 34px; padding: 5px 0 0 8px; } .disc-grid td.gear { padding: 0; } .disc-grid a { color: #186999; text-decoration: none; } .disc-grid a:hover { text-decoration: underline; } .disc-grid th.sort { cursor: pointer; } .disc-grid th.sort i { position: absolute; left: 98px; top: 5px; width: 0; height: 0; border: 3.5px solid transparent; border-bottom: 4px solid #555; border-top: 0; } .disc-grid th.sort.desc i { border-bottom: 0; border-top: 4px solid #555; } .disc-colgear { display: inline-flex; align-items: center; gap: 1px; cursor: pointer; } .disc-colgear .caret { width: 0; height: 0; border: 3px solid transparent; border-top: 3px solid #186999; border-bottom: 0; } /* «Активность»: 24 × 12, on — #3B99FC with the knob at the right */ .dtoggle { display: block; position: relative; width: 22px; height: 10px; border: 1px solid #E4E4E4; border-radius: 6px; background: #F5F5F5; cursor: pointer; } .dtoggle::after { content: ""; position: absolute; left: 1px; top: 1px; width: 6px; height: 6px; border: 1px solid #E4E4E4; border-radius: 50%; background: #F5F5F5; } .dtoggle.on { background: #3B99FC; border-color: #3B99FC; } .dtoggle.on::after { left: auto; right: 1px; border-color: #fff; background: #fff; } .dtoggle.ro { cursor: default; } .disc-pager.pager.under { position: static; height: auto; padding: 5px 0 0 40px; background: none; z-index: auto; } .disc-strategy { position: absolute; z-index: 50; background: #fff; padding: 12px 16px; box-shadow: 0 2px 12px rgba(0, 0, 0, .25); font: 12px var(--font); } .disc-strategy .hd { font-weight: bold; margin-bottom: 8px; } .disc-strategy label { display: flex; align-items: center; gap: 6px; height: 22px; white-space: nowrap; } /* the card: the original's personal discount's (26.10.2026) — the kind's name 18 px at y 180, «Наименование» with a 400 × 26 box of 18 px Arial, the groups' headings 15 px #CC420C, native checkboxes and radios */ .disc-card { padding-top: 20px; } .disc-card .disc-del { color: #D04A49; border-bottom: 1px dashed #D04A49; line-height: 15px; cursor: pointer; margin-left: 10px; } .disc-card .disc-chg { align-self: flex-start; margin: 0 0 0 18px; color: #8C8C8C; } .disc-card .disc-del + .disc-chg { margin-left: 12px; } .disc-card .disc-chg .v { color: #186999; margin-left: 4px; } .disc-card .disc-chg .v.go { cursor: pointer; } .disc-card .disc-chg .v.go:hover { text-decoration: underline; } .disc-form { padding-top: 33px; font: 12px var(--font); color: var(--text); } .disc-type { font-size: 18px; line-height: 21px; } .disc-row { display: flex; align-items: center; gap: 6px; margin-top: 23px; } .disc-row .lbl.req { position: relative; top: -1px; } .disc-row .lbl.req::before { content: "*"; position: absolute; left: -7px; top: -1px; color: #E2453C; } .disc-name { width: 400px; height: 26px; box-sizing: border-box; border: 1px solid #BFBFBF; padding: 1px; font: 18px Arial, sans-serif; color: #000; } .disc-name.err { border-color: #E2453C; } .disc-card input[type=checkbox], .disc-card input[type=radio] { appearance: auto; width: 13px; height: 13px; margin: 0; border: 0; background: none; } .disc-chk { display: flex; align-items: center; gap: 5px; margin-top: 10px; cursor: pointer; } .disc-group { margin-top: 36px; font-size: 15px; line-height: 17px; color: #CC420C; } .disc-group + * { margin-top: 9px; } .disc-group + .disc-opts { margin-top: 5px; } .disc-text + .disc-group { margin-top: 26px; } .disc-opts + .disc-group { margin-top: 38px; } .disc-text { line-height: 14px; } .disc-opts .disc-radio { display: flex; align-items: center; gap: 3px; height: 25px; cursor: pointer; } .disc-opts .disc-add { margin: 2px 0 0; } .disc-items { margin-top: 6px; } .disc-items:empty { display: none; } .disc-items.off { opacity: .5; } .disc-item { display: flex; align-items: center; gap: 5px; height: 20px; } .disc-x { color: #999; cursor: pointer; font-size: 14px; padding: 0 3px; } .disc-x:hover { color: #D04A49; } .disc-tags { width: 250px; height: 21px; box-sizing: border-box; margin-left: 3px; border: 1px solid #BFBFBF; padding: 1px 3px; font: 12px var(--font); } .disc-tags:disabled { background: #E0E0E0; border-color: #D0D0D0; } .disc-sub { margin: 0 0 6px 16px; } .disc-sel { height: 22px; font: 12px var(--font); } .disc-num { width: 80px; height: 21px; box-sizing: border-box; border: 1px solid #BFBFBF; padding: 1px 3px; font: 12px var(--font); text-align: right; } .disc-levels table { border-collapse: collapse; } .disc-levels th { text-align: left; font-weight: normal; color: #8C8C8C; padding: 0 12px 4px 0; } .disc-levels td { padding: 0 12px 4px 0; } .disc-levels .disc-num { width: 120px; } .disc-link { color: #186999; border-bottom: 1px dashed #186999; cursor: pointer; line-height: 15px; } .disc-line { display: flex; align-items: center; gap: 4px; height: 28px; } .disc-line .l { width: 250px; } .disc-line.sub { padding-left: 18px; } .disc-pick { position: absolute; z-index: 50; width: 420px; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .25); padding: 8px; } .disc-search { width: 100%; height: 24px; box-sizing: border-box; border: 1px solid #BFBFBF; padding: 1px 4px; font: 12px var(--font); } .disc-res { max-height: 300px; overflow: auto; margin-top: 6px; } .disc-res .it { display: flex; align-items: center; gap: 4px; padding: 4px 6px; cursor: pointer; } .disc-res .it:hover { background: #F2F4F7; } .disc-res .it small { color: #8C8C8C; } .disc-res .none { padding: 4px 6px; color: #8C8C8C; } /* an archived object: grey, its «A» before the name (the original's .archived-record) — in a reference box and in a list's cell */ .ref.arch::before { content: "A"; flex: none; width: 12px; margin: 0 2px; background: #999; color: #fff; font: 10px/12px Arial, sans-serif; text-align: center; } .ref.arch input { color: #999; } .grid a.arch { color: #999; } .grid a.arch .ab { display: inline-block; margin-right: 2px; padding: 0 2px; background: #999; color: #fff; font-size: 9px; line-height: 11px; vertical-align: 1px; } /* a settlement adjustment's card (the original's, 26.10.2026 at 1440 px): labels 142 px wide; rows 31, 31 and 30 px apart, a sum's label 2 px above its 15 px box; the comment 808 × 64 */ .card.adj .doc-title { margin-bottom: 14px; } .card.adj .fgrid { grid-template-columns: 141px minmax(var(--c1), max-content) max-content minmax(291px, max-content); } .card.adj .adj-cur { width: 102px; height: 21px; text-align: right; line-height: 20px; } .card.adj .fgrid > .lbl:has(+ .ctl .adj-cur) { margin-top: 3px; } .card.adj .dochead .lbl.hf { position: relative; margin-top: 0; } .card.adj .dochead .lbl.hf .q { position: absolute; left: -25px; top: -1px; margin: 0; } .card.adj .dochead input.num { height: 15px; margin: 2px 0 3px; padding: 0 2px; } .card.adj .adj-bottom textarea.comment { display: block; box-sizing: border-box; width: 808px; height: 64px; margin: 58px 0 3px 3px; padding: 3px; border: 1px solid #E4E4E4; border-radius: 0; font: 12px var(--font); color: #222; resize: vertical; } .card.adj .adj-bottom textarea.comment::placeholder { color: #A0A0A0; } /* an account adjustment's «Валюта документа» (the original's editor at 1440 px, 31.10.2026): a grey box as wide as the account's */ .card.adj input.adj-currency { box-sizing: border-box; width: 250px; height: 21px; padding: 0 3px; border: 1px solid #CCC; background: #EBEBEB; color: #999; } /* bonus operations (bonus.js, 30.10.2026): the card's points box and its «баллов», the execution date of a done one greyed; the tables of the counterparty's and the program's cards; the counterparty's points in «Действующие скидки» (the original's bonuses-label: 4 px down); the bonus program's «Начисление и списание баллов» — the original's bonus-points-settings-item: labels 170 px, boxes 70, sub-labels 7 px after, 10 px between; «Приветственные баллы» orange, its rows 15 px under */ .card .int-suffix { margin-left: 5px; line-height: 21px; } .card .date.off { background: #F0F0F0; color: #888; } .card .date.off input { color: #888; } .cp-bonus { padding-top: 4px; min-height: 22px; } /* (not .bp: the «Бизнес-процессы» page's main) */ .bp-points { margin-top: 9px; } .bp-item { display: flex; align-items: center; min-height: 21px; padding-bottom: 10px; } .bp-item .l { flex: none; width: 170px; } .bp-item .sub { margin-left: 7px; } .disc-card .bp-item input.bp-box { width: 70px; } .bp-chk, .bp-radio, .bp-main { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } .bp-main { margin-top: 3px; } .bp-main span { color: #CC420C; } .bp-welcome { padding-top: 15px; } .bp-ops { margin-top: 9px; padding-left: 10px; } .bp-add { margin: 25px 0 0 10px; } /* «Серийные номера» of a position (serialdlg.js). The old form's dialog as the original's help shows it: 707 px, the title 24 px bold, a round ×, «Выбирать», the box of 603 px with the two-triangle button 11 px to its right, «Лимит», the green «Сохранить» under them on the left */ .overlay:has(> .sdlg) { align-items: center; padding-top: 0; } /* as the help's: in the middle */ .sdlg { background: #fff; width: 707px; max-width: 94vw; padding: 18px 18px 34px; border-radius: 3px; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); font-size: 14px; color: #333; } .sdlg .sh { display: flex; justify-content: space-between; align-items: center; } .sdlg .sh h2 { margin: 0; font-size: 24px; font-weight: 700; } .sdlg .sx { width: 28px; height: 28px; border-radius: 50%; border: 0; background: #E9E9E9; color: #444; font-size: 22px; line-height: 26px; padding: 0; cursor: pointer; } .sdlg .sx:hover { background: #DCDCDC; } .sdlg .smode { margin: 14px 0 2px 13px; } .sdlg .smode label { cursor: pointer; } .sdlg .smode input { margin: 0 2px 0 4px; vertical-align: -2px; } .sdlg .srow { display: flex; align-items: flex-start; gap: 11px; margin-left: 13px; } .sdlg .srow .swrap { width: 603px; flex: 0 1 auto; } .sdlg .sarrow { border: 0; background: none; padding: 2px 0 0; cursor: pointer; } .sdlg .slimit, .sdlg .smsg { margin-left: 13px; } .sdlg .slimit { margin-top: 3px; } .sdlg .sfoot { margin-top: 26px; } .sdlg .sfoot .btn { height: 35px; padding: 0 14px; font-size: 14px; } .swrap { position: relative; } .sbox { min-height: 33px; box-sizing: border-box; border: 1px solid #C9C9C9; background: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 3px 4px; cursor: text; } .sbox .sin { flex: 1 1 60px; min-width: 60px; height: 24px; border: 0; outline: 0; padding: 0 2px; font: inherit; background: none; } .sbox .chip { display: inline-flex; align-items: center; max-width: 100%; height: 22px; box-sizing: border-box; padding: 0 5px; background: #E8EEF4; border: 1px solid #C9D5E0; border-radius: 3px; cursor: default; } .sbox .chip .cn { text-decoration: underline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sbox .chip .cx { margin-left: 6px; color: #7E9CB8; font-size: 12px; cursor: pointer; } .sbox .chip .cx:hover { color: #E2231A; } .sbox .chip .cn { cursor: pointer; } .sedit .inp { width: 100%; box-sizing: border-box; } .sedit .smsg { margin-top: 6px; } .sdd { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; max-height: 220px; overflow: auto; background: #fff; border: 1px solid #C9C9C9; border-top: 0; box-shadow: 0 3px 8px rgba(0, 0, 0, .12); } .sdd .sit { padding: 4px 8px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sdd .sit:hover, .sdd .sit.cur { background: #E5F1F8; } .smsg { font-size: 13px; min-height: 0; } .smsg .sm-warn { color: #B07800; } .smsg .sm-err { color: #E2231A; } .smsg .sm-warn i::before { content: '⚠'; font-style: normal; } .smsg .sm-err i::before { content: '✖'; font-style: normal; } .smsg:not(:empty) { margin: 6px 0; } .sdlg-new .sall { margin-bottom: 10px; } .sdlg-new .sall a { cursor: pointer; } .sdlg-new .slimit { margin-top: 6px; } /* the quantity of goods on tracking opens the dialog; red while the numbers are not as many */ .ogrid .ov.sq { cursor: pointer; } .ogrid .ov.sq.off, .sqbtn.off { color: #E2231A; } .sqbtn { border: 0; background: none; padding: 0 2px; font: inherit; color: inherit; cursor: pointer; border-bottom: 1px dashed #9AAEC0; } /* «Обучение» of Закупки (onboarding.js purchaseOnboarding; the original's at 1440 px) */ .ponb h1 { margin-top: 0; } .ponb-cols { display: flex; gap: 20px; margin-top: 20px; min-height: calc(100vh - 197px); } .ponb-card { width: 913px; flex: none; display: flex; gap: 20px; padding: 32px; box-sizing: border-box; border-radius: 12px; background: #fff; } .ponb-col { width: 420px; flex: none; display: flex; flex-direction: column; gap: 32px; } .ponb-col + .ponb-col { width: 409px; } .ponb-head { display: flex; align-items: center; gap: 8px; } .ponb-head h3 { margin: 0; font: 700 20px/24px var(--font-new); color: #091739; } .ponb-links { display: flex; flex-direction: column; gap: 16px; margin: 12px 0 0 32px; } .ponb-side { width: 451px; flex: none; } .ponb-banner { position: relative; height: 260px; border-radius: 12px; background: #6E9BFF; overflow: hidden; } .ponb-course { position: absolute; left: 69px; top: 63px; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 6px 16px; box-sizing: border-box; border-radius: 8px; background: #fff; color: #091739 !important; font: 14px/20px var(--font-new); } .ponb-course .onb-svg svg { width: 16px; height: 16px; } .ponb-banner > .onb-svg { position: absolute; right: 56px; top: 22px; } .ponb-title { position: absolute; left: 69px; top: 184px; width: 310px; color: #fff; font: 700 22px/24px var(--font-new); } /* «Обучение» Склад: «Полезные материалы» under the banner */ .ponb.wh .ponb-course { top: 65px; } .ponb-mat { min-height: 290px; margin-top: 20px; padding: 20px; box-sizing: border-box; border-radius: 12px; background: #fff; } .ponb-mat h4 { margin: 0; font: 700 16px/18px var(--font-new); color: #091739; } .ponb-mat a { display: flex; align-items: center; gap: 8px; margin-top: 24px; } .ponb-mat h4 + a { margin-top: 18px; } /* «Управление закупками» (purchasecontrol.js; the original's at 1440 px) */ .pc-forecast { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--pos-text); white-space: nowrap; } .pc-days { width: 36px; height: 21px; padding: 0 4px; box-sizing: border-box; border: 1px solid #C8CED6; border-radius: 3px; font: inherit; text-align: right; } /* «Снабжение (Сбор заказа)» (provision.js): the toolbar as a card's, the goods in a document grid's look; the way, the source and the quantity chosen in the line */ .pv-page { padding: 23px 40px 40px; } .pv-tools { display: flex; gap: 6px; margin-bottom: 20px; } .pv-title { font-size: 18px; font-weight: normal; margin: 0 0 6px; } .pv-of { color: #555; margin-bottom: 14px; } .pv-made { margin: 0 0 10px; padding: 8px 10px; background: #EEF7DA; border: 1px solid #C9E28F; } .pv-err { margin: 0 0 10px; padding: 8px 10px; background: #FDECEC; border: 1px solid #F3B6B6; color: #A00; } .pv-pick { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; } /* «Будут созданы: …» and its error by «Создать» (the original's documentsCount / error) */ .pv-count { align-self: center; margin-left: 14px; color: #555; } .pv-count.err { color: #E50347; } .pv-plan { width: 200px; } table.pv { border-collapse: collapse; font: 11px var(--font-grid); color: #222; } table.pv th { height: 32px; padding: 0 8px; border-bottom: 2px solid var(--link); color: var(--link); font-weight: normal; text-align: left; white-space: nowrap; } table.pv th.sort { cursor: pointer; } table.pv th.r, table.pv td.r { text-align: right; } table.pv td { height: 30px; padding: 0 8px; border-bottom: 1px solid #DDD; white-space: nowrap; } table.pv td.name { white-space: normal; min-width: 260px; max-width: 420px; } table.pv td.num, table.pv th.num { width: 30px; color: #888; } table.pv td.cb, table.pv th.cb { width: 16px; padding: 0 4px 0 8px; } table.pv td.empty { color: #999; text-align: center; height: 60px; } table.pv tbody tr:hover td { background: #FFFB8C; } .pv-hm { cursor: pointer; } .pv-hm .caret { margin-left: 5px; } .pv-q { width: 70px; text-align: right; } .pv-way { width: 180px; } /* The document lists' ⚙ «Настройки <документов>» (docsettings.js): the original's panel at 1440 px — 720 px on the right over the page dimmed by half, content from x 750: «Закрыть ×» (y 22), the title (y 55), «Изменения» and the avatar on the right, «Сохранить» 81 and «Отменить» 75 px at y 81, red-orange section heads, radios at x 781, numbers 56 px, the date 122, field rows 32 px with ▲▼ (x 755), ▶ (786) and ⊗. */ .list-head .btn.misc { width: 37px; padding: 0; justify-content: center; } .list-head .btn.misc .cogs { display: inline-block; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cg fill='%23333'%3E%3Ccircle cx='4.5' cy='4.5' r='3.2'/%3E%3Crect x='3.6' width='1.8' height='9'/%3E%3Crect y='3.6' width='9' height='1.8'/%3E%3Crect x='3.6' width='1.8' height='9' transform='rotate(45 4.5 4.5)'/%3E%3Crect y='3.6' width='9' height='1.8' transform='rotate(45 4.5 4.5)'/%3E%3C/g%3E%3Ccircle cx='4.5' cy='4.5' r='1.3' fill='%23F3F3F3'/%3E%3C/svg%3E") no-repeat center / contain; } .list-head .btn.misc.disabled .cogs { opacity: .35; } .dsp-ov { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .5); } .dsp { position: absolute; top: 0; right: 0; bottom: 0; width: min(720px, 100%); box-sizing: border-box; overflow: auto; padding: 15px 45px 40px 30px; background: #fff; font: 12px/15px var(--font); color: #333; } .dsp-close, .dsp-tab, .dsp-name, .dsp-add { cursor: pointer; } .dsp-close { display: inline-block; color: #999; font-size: 12px; text-decoration: underline; } .dsp-close span { display: inline-block; margin-left: 4px; text-decoration: none; } .dsp-head { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 6px; min-height: 36px; } .dsp-title { font-size: 20px; line-height: 24px; color: #222; padding-top: 7px; } .dsp-who { position: relative; padding-right: 34px; text-align: right; font-size: 12px; line-height: 13px; margin-top: 6px; } .dsp-who .k { color: #999; } .dsp-who .v { color: var(--link); } .dsp-who .d { color: var(--link); font-size: 11px; } .dsp-who .ava { position: absolute; right: 0; top: -1px; width: 28px; height: 28px; border-radius: 50%; background: #DDE3E8; } .dsp-btns { display: flex; gap: 11px; margin-top: 9px; } .dsp-btns .dsp-save { width: 81px; justify-content: center; } .dsp-btns .dsp-cancel { width: 75px; justify-content: center; } .dsp-tabs { display: flex; margin: 19px 0 0 6px; border-bottom: 1px solid var(--link); width: max-content; } .dsp-tab { padding: 4px 10px 3px; color: var(--link); font-size: 13px; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; } .dsp-tab.on { color: #222; font-weight: bold; border-color: var(--link); background: #fff; } .dsp-sec { position: relative; margin: 22px 0 4px; font-size: 17px; line-height: 20px; color: #CC430D; } .dsp-sec .help { position: absolute; left: -25px; top: 3px; } .dsp-cb { display: flex; align-items: center; gap: 5px; margin: 0 0 7px; cursor: pointer; } .dsp-cb input { margin: 0; } .dsp-body { padding-top: 11px; } /* the first head 37 px under the buttons (pixels of the original's, 28.10.2026) */ .dsp-lbl { margin: 2px 0 4px; } .dsp-period { padding-left: 31px; margin-bottom: -6px; } /* the next head 35 px under «Начиная с» */ .dsp-rad { display: flex; align-items: center; gap: 4px; min-height: 22px; margin-bottom: 1px; } .dsp-rad input[type=radio] { margin: 0 3px 0 0; } .dsp-num { width: 56px; height: 19px; box-sizing: border-box; margin-left: 2px; padding: 0 3px; text-align: right; border: 1px solid #BBB; font: inherit; } .dsp-rad .u { margin-left: 2px; } .dsp-rad .date { margin-left: 6px; } /* the original's b-fields-table (geometry read 28.10.2026): rows 32 px, cells 0 5px; ▲▼ 7 × 4 at +13.5, ▶ 11 × 11 at +10, the name 16 px after it, ⊗ 14 × 13 at +8; the last row's «+ Поле» 250 px wide */ table.dsp-fields { border-collapse: collapse; margin: 4px 0 6px; } /* the customer orders' note (the original's at 1440 px: 750–1226 × 812–889, the ⓘ at 758, 825, the words from x 779, two lines 17 px apart) */ .dsp-bpnote { position: relative; width: 477px; box-sizing: border-box; margin-top: 12px; padding: 7px 10px 9px 28px; border: 1px solid #E2F4FF; background: #ECF8FF; color: #262626; font-size: 12px; line-height: 17px; } .dsp-bpnote::before { content: 'i'; position: absolute; left: 7px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: #186999; color: #fff; font: bold 9px/12px Georgia, serif; text-align: center; } .dsp-bpnote a { color: #186999; } .dsp-bpnote .dsp-bp { display: inline-block; margin-top: 9px; color: #186999; text-decoration: none; cursor: pointer; } table.dsp-fields td { height: 32px; padding: 0 5px; vertical-align: top; white-space: nowrap; } table.dsp-fields td.mv { width: 25px; padding-top: 11px; } /* 15 px and the padding */ .dsp-mv { width: 7px; height: 9px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; vertical-align: top; position: relative; } .dsp-mv::before { content: ""; position: absolute; left: 0; top: 2.5px; border: 3.5px solid transparent; } .dsp-mv.up::before { border-bottom: 4px solid #00F; border-top: 0; } .dsp-mv.down::before { border-top: 4px solid #00F; border-bottom: 0; } .dsp-mv:disabled { cursor: default; } /* the original's arrows look the same at the ends */ .dsp-name { display: inline-flex; align-items: center; gap: 5px; height: 14px; margin-top: 10px; padding-right: 5px; color: #222; text-decoration: none; } .dsp-name .tri { align-self: flex-start; width: 0; height: 0; margin: 0 2px 0 3px; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; border-left: 6px solid #636563; } .dsp-name.open .tri { margin: 2.5px 0; border: 0 solid transparent; border-width: 6px 5.5px 0; border-top-color: #636563; } table.dsp-fields td.rmc { padding-top: 8px; } .dsp-rm { display: block; width: 13px; height: 13px; margin-right: 1px; padding: 0; border: 0; border-radius: 50%; background: #BBB; cursor: pointer; position: relative; } .dsp-rm::before, .dsp-rm::after { content: ""; position: absolute; left: 2.5px; top: 5.75px; width: 8px; height: 1.5px; background: #fff; transform: rotate(45deg); } .dsp-rm::after { transform: rotate(-45deg); } table.dsp-fields tr.add td { height: 20px; } table.dsp-fields td.add { padding: 10px 0 5px; } .dsp-add { display: flex; align-items: center; gap: 5px; width: 250px; height: 20px; color: var(--link); text-decoration: none; } .dsp-add .p { position: relative; width: 10px; height: 10px; } .dsp-add .p::before, .dsp-add .p::after { content: ""; position: absolute; left: 4px; top: 0; width: 2px; height: 10px; background: var(--link); } .dsp-add .p::after { left: 0; top: 4px; width: 10px; height: 2px; } table.dsp-ed { margin: 8px 0 4px 15px; border-collapse: collapse; } table.dsp-ed td { padding: 0 0 7px; vertical-align: middle; } table.dsp-ed td.lg { position: relative; padding-right: 10px; white-space: nowrap; color: #555; } table.dsp-ed .help { margin-right: 4px; } .dsp-in { width: 260px; height: 21px; box-sizing: border-box; border: 1px solid #BBB; padding: 0 3px; font: inherit; } .dsp-sel { height: 21px; font: inherit; } .dsp-sel.ref { margin-left: 6px; } .dsp-ta { width: 300px; border: 1px solid #BBB; font: inherit; resize: vertical; } /* the statuses' window (states.js): the custom fields' table with the name, the state type, the colour square (20 px) and ⊗; the palette — the original's b-color-selector-popup: 16 squares, four in a row */ table.st-table th { height: 22px; padding: 0 5px; text-align: left; font-weight: normal; color: #555; white-space: nowrap; } table.st-table td.nm, table.st-table td.tp, table.st-table td.cl { padding-top: 5px; } table.st-table .dsp-in { width: 280px; } table.st-table .st-type { width: 200px; } .st-color { display: block; width: 20px; height: 20px; margin-top: 0.5px; padding: 0; border: 1px solid #999; cursor: pointer; } .st-pal { position: absolute; z-index: 1000; display: grid; grid-template-columns: repeat(4, 20px); gap: 4px; padding: 6px; background: #fff; border: 1px solid #AAA; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); } .st-pal .st-sq { width: 20px; height: 20px; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .15); cursor: pointer; } .st-pal .st-sq:hover { outline: 2px solid var(--link); } .st-err { min-height: 16px; margin-top: 4px; } .st-err .sm-err { color: #E2231A; } .st-err .sm-err i::before { content: '✖'; font-style: normal; } /* «Справочники» (directories.js; the original's settings pages, 28.10.2026 at 1440 px): the sidebar 289 px with its line #E0E0E0 — headers 12px bold uppercase #CC420C, items 13px #186999 37 px high, the open one on #E4F1FA; the list right of it («?» at x 309, the grid at 319) */ .dirs { display: flex; align-items: stretch; min-height: calc(100vh - 59px); padding-top: 1px; } /* «Бизнес-процессы» (the original's React page at 1440 px: the area #F1F4F9 from x 289, the title's letters from x 315 / y 82, the card 434 × 197 at x 313, y 205) */ .dirs-main.bp { background: #F1F4F9; padding: 18px 24px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #091739; } .bp-title { display: flex; align-items: center; gap: 17px; height: 40px; } .bp-title h1 { margin: 0; font-size: 32px; line-height: 40px; font-weight: bold; color: #091739; } .bp-help { align-self: flex-start; margin-top: 8px; width: 20px; height: 20px; border: 1px solid #A0A9B2; border-radius: 50%; color: #A0A9B2; font-size: 13px; line-height: 18px; text-align: center; text-decoration: none; } .bp-text { margin: 19px 0 23px; max-width: 720px; font-size: 14px; line-height: 23px; } .bp-create { width: 434px; height: 197px; display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; border: 1px solid #D1D6DF; border-radius: 8px; color: #036CE5; font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; } .bp-create:disabled { cursor: default; opacity: .5; } .bp-plus { position: relative; width: 18px; height: 18px; } .bp-plus::before, .bp-plus::after { content: ''; position: absolute; background: #036CE5; } .bp-plus::before { left: 8px; top: 0; width: 1.5px; height: 18px; } .bp-plus::after { top: 8px; left: 0; height: 1.5px; width: 18px; } .dirs-side { width: 289px; flex: none; border-right: 1px solid #E0E0E0; padding-bottom: 20px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .dirs-side .sb-head { padding: 20px 10px 10px 38px; font-size: 12px; line-height: 14px; font-weight: bold; text-transform: uppercase; color: #CC420C; } .dirs-side .sb-head.with { height: 49px; box-sizing: border-box; padding: 15px 12px 0 38px; display: flex; align-items: flex-start; justify-content: space-between; } .dirs-side .sb-head.with > span { padding-top: 8px; } .dirs-side .sb-head .btn { height: 30px; padding: 0 15px 0 10px; gap: 7px; font-size: 13px; font-weight: normal; text-transform: none; color: #222; background: #fff; border-color: #C8C8C8; } .dirs-side .btn .plus.dark { width: 11px; height: 11px; border-radius: 0; background: none; } .dirs-side .btn .plus.dark::before { background: #1A6699; left: 0; right: 0; top: 4.5px; height: 2px; } .dirs-side .btn .plus.dark::after { background: #1A6699; left: 4.5px; width: 2px; top: 0; bottom: 0; } .dirs-side .sb-item { display: block; padding: 11px 10px 11px 38px; font-size: 13px; line-height: 15px; color: #186999; text-decoration: none; } .dirs-side .sb-item:hover { text-decoration: underline; } .dirs-side .sb-item.on { background: #E4F1FA; } .dirs-side .sb-item.off { color: #AAA; cursor: default; text-decoration: none; } .dirs-main { flex: 1; min-width: 0; position: relative; } /* the bar starts at the sidebar's edge (arrows at x 329); under a short grid it ends with the grid (the help of «Каналы продаж» stays seen) */ .dirs .pager { left: 289px; } .dirs .pager.under { right: auto; width: calc(var(--ux, 289px) + var(--uw, 0px) - 289px); box-sizing: border-box; background-position: calc(var(--ux, 289px) - 289px) 0; } .dirs .list-head.float { left: 289px; } /* the currency list's note over the grid (#F2F7FA, its line #CFDFEA) */ .dir-info { margin: 0 0 -20px 40px; width: 817px; box-sizing: border-box; padding: 15px; border: 1px solid #CFDFEA; background: #F2F7FA; color: #333; font-size: 12px; } .dir-info p { margin: 0 0 10px; } .dir-info p:last-child { margin: 0; } .dir-info a { color: var(--link-new); } /* the sales channels' help right of their grid (x 983) */ .dir-help { position: absolute; left: 684px; top: 76px; width: 320px; font-size: 12px; color: #222; line-height: 14px; } .dir-help p { margin: 10px; } .dir-help ol { margin: 0 0 0 30px; padding: 0; } .dir-help li { line-height: 17px; } .dir-help li::marker { font-weight: bold; font-size: 15px; } .dir-help a { color: var(--link-new); } /* the cards: «?» and the archive 270 px after «Закрыть», «Изменить» 28 px on */ .dir-card { padding-top: 21px; } .dir-card .emp-body { margin-top: 43px; } .dir-card .arch { margin-left: 260px; } /* «Изменить ▾»: 28 px after the archive button, 10 after «Закрыть» (a custom element) */ .dir-card .arch + .dir-change { margin-left: 18px; } /* «Удалить …»: 20 px after «Закрыть» (a unit), 38 after the archive (a currency) */ .dir-card .emp-del.dir-del { margin-left: 10px; } .dir-card .arch + .emp-del.dir-del { margin-left: 28px; } .dir-card.ro .inp:disabled, .dir-card.ro .ta:disabled { background: #F0F0F0; color: #888; } /* a tax rate: a preset one's grey rate, the note under the comment 5 px below the field, its text 3 px lower (the original's 28.10.2026); a preset rate keeps the 28 px of «Удалить ставку» before the owner (18 and the toolbar's gap) */ .dir-card .inp:disabled { background: #F0F0F0; color: #888; } .dir-card .dir-hinted .inp { display: block; } .dir-card .dir-hint { display: block; width: 250px; margin-top: 5px; padding-top: 3px; font-size: 11px; color: #909090; white-space: normal; } .dir-card .arch + .dir-del-gap { margin-left: 18px; } /* the original's GWT fields: text 1 px inside a field, flush in a text area */ .dir-card .inp { padding: 1px; } .dir-card .ta { padding: 0; } .dir-card .emp-grid > .lbl .help { margin-right: 10px; } /* store card (storecard.js): the original's #warehouse/edit at 1440 px (29.10.2026) — the old form in one column, each label (23 px: 5 above the text, 4 under it) over its field, 13 px from the field above; the address' string 228 × 30 and the chevron, «Комментарий к адресу» 10 px under them; «Внешний код» a link (its dialog); «Дополнительные поля» 29 px under it, the fields 11 px apart, a «?» 25 px left of its label, a date 15 px in and 10 px down; on the right from x 449 «Адресное хранение товаров» (15 px, its «?» 24 px left) and the zones' (576 px) and cells' (761 px) tables — 2 px #186999 lines, «+ Зона», «+ Ячейка» */ .st-card { padding-top: 20px; } .st-card .arch .help { width: 15px; height: 15px; margin-top: -1px; font-size: 10px; } .st-card .arch .btn { width: 132px; justify-content: flex-start; padding: 0 0 0 10px; } .st-card .dir-change { width: 90px; } .st-card .dir-change .caret { position: relative; top: 1px; } /* the date of the last change 2 px higher than the documents' (its line) */ .st-card .card-tools .who .v { position: relative; top: -2px; } .st-card .card-tools .right { align-self: flex-start; } .st-body { display: flex; align-items: flex-start; margin-top: 25px; } .st-left { width: 409px; flex: none; } .st-lbl { padding: 5px 0 4px; margin-top: 13px; line-height: 14px; } .st-left > .st-lbl:first-child { margin-top: 0; } .st-lbl .req::before { content: "*"; display: inline-block; position: relative; right: 7px; width: 0; color: #F00; } .st-card .inp { display: block; width: 250px; padding: 1px; } .st-card .ta { display: block; padding: 0; resize: vertical; } .st-addr { margin-top: 18px; } .st-lbl0 { line-height: 14px; } .st-card .st-addr .addr-line { display: flex; gap: 4px; height: 33px; margin: 4px 0 0; } .st-card .st-addr .addr-ta { width: 228px; height: 30px; padding: 0; } .st-card .st-addr .st-lbl.c { margin-top: 10px; } .st-card .st-addr > textarea { width: 252px; height: 44px; min-height: 0; } /* the parts (closed in the dump; the original's styles): a #F7F7F7 box, each label over its field, 8 px in */ .st-card .st-addr .addr-parts { display: block; width: 253px; margin: 13px 0 3px; padding: 0 0 10px; border-radius: 3px; background: #F7F7F7; } .st-card .st-addr .addr-parts.hidden { display: none; } .st-card .st-addr .addr-parts > .lbl { margin: 0; padding: 11px 8px 0; text-align: left; line-height: 14px; } .st-card .st-addr .addr-parts > .lbl:first-child { padding-top: 7px; } .st-card .st-addr .addr-parts > .ctl { width: auto; padding: 5px 0 0 8px; background: none; } .st-card .st-addr .addr-parts .inp, .st-card .st-addr .addr-parts .inp.wide { width: 225px; height: 21px; } .st-card .st-addr .addr-parts .ref { width: 225px !important; } .st-card .st-desc { width: 252px; height: 72px; min-height: 0; } .st-extrow { margin-top: 14px; line-height: 14px; } .st-ext { color: var(--link); cursor: pointer; text-decoration: underline; } /* no href (storecard.js): the underline a link had */ .st-ext-dlg { display: flex; align-items: center; gap: 10px; } .st-ext-dlg .inp { width: 200px; } .st-attrs { margin-top: 29px; } .st-sec { padding-top: 32px; font-size: 15px; line-height: 17px; color: #CC420C; } .st-attrs .attrs { display: block; margin: 13px 0 0; } .st-attrs .attrs .acol { display: block; margin: 0; } .st-attrs .attrs .lbl { margin: 0; padding: 5px 0 4px; line-height: 14px; white-space: normal; } .st-attrs .attrs .lbl.hh { padding-bottom: 5px; } .st-attrs .attrs .lbl.req::before { left: -7px; top: 5px; color: #F00; } .st-attrs .attrs .lbl .help { left: -25px; top: 5px; width: 15px; height: 15px; font-size: 10px; } .st-attrs .attrs .ctl { display: block; min-height: 0; padding: 0 0 11px; } .st-attrs .attrs .ctl > .inp.num { width: 120px !important; } .st-attrs .attrs .ctl > .date { width: 120px; height: 21px; margin: 14px 0 -3px 15px; } .st-attrs .attrs .ctl > .date .cal { align-self: flex-start; padding-left: 2px; } .st-attrs .attrs .ctl > textarea { width: 252px !important; } .st-attrs .attrs .ctl > .line > .ref { width: 228px; } .st-right { flex: none; width: 761px; } .st-sec2 { position: relative; margin-left: 1px; padding-top: 10px; font-size: 15px; line-height: 18px; color: #CC420C; } .st-sec2 > .help { position: absolute; left: -25px; top: 12px; width: 15px; height: 15px; font-size: 10px; } .st-tbl { border-collapse: separate; border-spacing: 0; table-layout: fixed; } .st-tbl.zones { width: 576px; margin-top: 35px; } .st-tbl.cells { width: 761px; margin-top: 29px; } .st-tbl td { padding: 0; white-space: nowrap; overflow: hidden; } .st-tbl .st-th td { height: 30px; padding-top: 7px; vertical-align: top; border-bottom: 2px solid #186999; line-height: 14px; } .st-tbl.cells .st-th td { height: 31px; padding-top: 8px; } /* the rows (slots.js storageWidget): the last one's line is the original's 2px blue (tr.last-row), the others' a thin grey (a guess) */ .st-tbl .st-tr td { height: 31px; vertical-align: middle; border-bottom: 1px solid #D9D9D9; line-height: 14px; } .st-tbl .st-tr.last td { border-bottom: 2px solid #186999; } /* «Проводить инвентаризацию по ячейкам» above the zones (store/slotgaps.go; the place — the original's, the sizes — a guess) */ .inventory-address-warehouse-checkbox-div { display: flex; align-items: center; gap: 6px; margin-top: 22px; line-height: 16px; cursor: pointer; } .inventory-address-warehouse-checkbox-div:not(.hidden) + .st-tbl.zones { margin-top: 18px; } .st-tbl .st-tr td.z { padding-bottom: 2px; } .st-tbl .st-v { height: 21px; padding: 0 4px; line-height: 21px; overflow: hidden; text-overflow: ellipsis; cursor: text; border: 1px solid transparent; } .st-tbl .st-tr:hover .st-v { border-color: #BFBFBF; background: #fff; } .st-tbl .st-v.empty { color: #999; } .st-tbl .st-in { box-sizing: border-box; height: 23px; padding: 1px 4px; border: 1px solid #BFBFBF; font: 12px var(--font); color: #222; outline: none; } .st-tbl .st-in.err { border-color: #E04B4B; } .st-tbl .st-sel { box-sizing: border-box; width: 163px; height: 23px; border: 1px solid #BFBFBF; font: 12px var(--font); } .st-tbl td.st-dg .grip { display: none; width: 10px; height: 14px; margin-left: 2px; cursor: move; background: radial-gradient(circle, #9DB8CB 1px, transparent 1.5px) 0 0 / 4px 4px; } .st-tbl .st-tr:hover td.st-dg .grip { display: block; } .st-tbl td.st-kill { text-align: center; } .st-tbl .st-tr:hover .fl-del-old { opacity: 1; } .st-tbl .st-tr:hover .fl-del-old.slot-remove-disabled { opacity: .75; color: #D3D3D3; cursor: default; } .slot-free, .slot-used { color: #999; font-style: italic; } .st-nozone { color: #999; font-style: italic; } .st-add { display: inline-flex; align-items: center; height: 20px; margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--link); cursor: pointer; } .st-add:not(.off):hover { color: #F88001; } .st-add b { align-self: flex-start; width: 10px; height: 10px; margin: 4px 6px 0 0; background: linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat; } .st-add.off { color: #9DB8CB; cursor: default; } .st-right > .st-add, .warehouse-zones-widget > .st-add { display: flex; width: max-content; } /* a position's cell and its picker (slots.js; the original's slot-popup: 400 px, its tabs, filter and list) */ .ogrid td.slot { overflow: visible; } .ogrid th.slot .obtn { max-width: 100%; } .ov.slot-viewer-empty { color: #999; } .ov.slot-place { color: var(--link); } .slot-popup { position: absolute; z-index: 120; box-sizing: border-box; width: 400px; padding-bottom: 6px; background: #fff; border: 1px solid #BFBFBF; box-shadow: 0 4px 4px rgba(0, 0, 0, .15); font: 12px var(--font); color: #222; } .slot-menu { display: flex; padding: 0 8px; border-bottom: 1px solid #BFBFBF; } .slot-menu-item { margin-bottom: -1px; padding: 6px 8px 4px; border-bottom: 2px solid transparent; font-size: 11px; line-height: 16px; cursor: pointer; white-space: nowrap; } .slot-menu-item:hover { background: #FBF499; } .slot-menu-item.active { border-bottom-color: #186999; color: #186999; } .slot-popup-filter { display: block; box-sizing: content-box; width: 154px; height: 17px; margin: 10px 8px 8px; padding: 1px 4px; border: 1px solid #BFBFBF; font: 12px var(--font); outline: none; } .slot-popup-filter:focus { background: #ECFCFF; border-color: #3EC5FF; } .slot-list { max-height: 180px; overflow-y: auto; } .slot-item { padding-left: 8px; font-size: 12px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .slot-item.selected { background: #E4F1FA; } .slot-item.active { background: #DFF3DF; } .slot-zone, .slot-stock { padding-left: 1em; color: #999; font-style: italic; } .slot-stock.slot-invalid { color: #E04B4B; } .slot-item.slot-none .slot-name { color: #999; } .slot-empty { padding-left: 8px; line-height: 20px; color: #999; } .slot-bulk-title { padding: 10px 8px 0; } .slot-auto { margin: 8px 8px 0; } /* the new form's cell (slots.js newSlotCell, 31.10.2026; its frontend's SlotCellSelector, SlotList and SlotPopup styles): the field, the list 5 px under it — the groups' tabs, 400 px of cells up to 180 px high — and the head's popup */ table.pgrid2 td.slot { overflow: visible; } table.pgrid2 input.cell.nslot-in { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } table.pgrid2 input.cell.nslot-in::placeholder { color: #999; } .nslot-pop { position: absolute; z-index: 120; margin-top: 3px; background: #fff; border: 1px solid #BFBFBF; box-shadow: 0 4px 4px #00000026; } .nslot-menu { display: flex; white-space: nowrap; } .nslot-group { flex: 1; padding: 4px 8px; border-bottom: 1px solid #BFBFBF; color: #222; font-size: 11px; line-height: 16px; text-align: center; cursor: pointer; } .nslot-group:hover { background: #FBF499; } .nslot-group.active { border-bottom: 2px solid #186999; color: #186999; } .nslot-list { width: 400px; max-height: 180px; overflow-y: auto; } .nslot-opt { padding: 3px 0 3px 8px; color: #091739; font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .nslot-opt[data-selected="true"] { background: #DFF3DF; } .nslot-opt[data-highlighted="true"] { background: #E4F1FA; } .nslot-opt:hover { background: #FFFB8C; } .nslot-state { padding-left: 1em; color: #999; font-style: italic; } .nslot-invalid { color: red; } .nslot-empty { padding: 3px 0 3px 8px; color: #999; font-size: 12px; font-style: italic; } .nslot-bulk { position: absolute; z-index: 120; box-sizing: border-box; width: 400px; background: #fff; border: 1px solid #BFBFBF; box-shadow: 0 4px 4px #00000026; font-size: 14px; } .nslot-bulk .nslot-list { width: auto; } .nslot-desc { margin: 16px 28px 0 8px; color: #222; font: 12px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; } .nslot-filter { display: block; box-sizing: content-box; width: 154px; height: 17px; margin: 10px 0 10px 8px; padding: 2px; border: 1px solid #BFBFBF; background: #fff; font-size: 12px; outline: none; } .nslot-filter:focus { background: #ECFCFF; border-color: #3EC5FF; } .nslot-close { position: absolute; top: 8px; right: 8px; width: 12px; height: 12px; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; } /* «Волны отбора» (waves.js, 31.10.2026; the clone's look): the empty list's texts, the card's fields and its two tables */ .wave-empty { max-width: 640px; margin: 24px 0 0 30px; color: #222; font-size: 13px; line-height: 18px; } .wave-empty-title { margin-bottom: 12px; font-size: 18px; line-height: 24px; } .wave-empty p { margin: 0 0 10px; white-space: pre-line; } .wave-empty .btn { margin: 6px 0 10px; } .wave-empty-note { color: #666; } .wave-card .wave-fields { margin-bottom: 18px; } .wave-card .wave-tabs { margin-bottom: 0; } .wave-card .wave-body { margin-top: 10px; } table.grid.wave-grid { width: auto; table-layout: fixed; } table.grid.lg.wave-grid th { height: 31px; padding: 0 6px; vertical-align: middle; text-align: left; color: #333; } table.grid.lg.wave-grid td { padding: 0 6px; } table.grid.lg.wave-grid td.num, table.grid.lg.wave-grid th.num { text-align: right; } table.grid.wave-grid td.wave-none { color: #999; font-style: italic; } .wave-x { color: #999; cursor: pointer; font-size: 14px; } .wave-x:hover { color: #E2453C; } /* (waves_more: «Собрано», «Добавить заказы», the custom fields) */ .wave-card .wave-attrs { margin: -8px 0 18px; } input.inp.wave-pick { width: 70px; height: 20px; padding: 0 4px; text-align: right; box-sizing: border-box; } .wave-orders-tools { margin-bottom: 10px; } .wave-add-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .wave-add-count { color: #666; font-size: 12px; } .wave-add-list { max-height: 360px; overflow: auto; } /* (the list's own scroll: its header sticks to its top, not under the page's toolbar) */ .wave-add-list table.grid.lg:not(.foot) thead th { top: 0; } .sh-card .st-card { padding: 0; } .sh-card .st-body { margin-top: 0; } /* a currency's card (the original's EUR at 1440 px: the classifier's currency at y 160, the fields from 193, «Курс валюты» 317, the rate's row 344, its note 375, «Печать прописью» 402, «Целая часть» 429 and its row 455, «Дробная часть» 488 and its row 514) */ .dir-card.cur .cur-based { margin-top: 53px; height: 23px; margin-bottom: 10px; } /* in the dialog (the pencil at a document's currency) no buttons above it */ .sh-card .dir-card.cur { padding-top: 0; } .sh-card .dir-card.cur .cur-based, .sh-card .dir-card.cur .cur-note { margin-top: 0; } /* its selects are 23 px high (the fields 21) */ .dir-card.cur .ref { height: 23px; } .dir-card.cur .ref input, .dir-card.cur .ref .open, .dir-card.cur .ref .clear { height: 21px; } .dir-card.cur .cur-sec { margin: 10px 0; font-size: 15px; line-height: 17px; color: #CC420C; } .dir-card.cur .cur-rate { display: grid; grid-template-columns: 139px 265px 65px 88px max-content; align-items: start; height: 23px; } .dir-card.cur .cur-rate .cur-lbl { padding: 2px 0 0 2px; line-height: 14px; } .dir-card.cur .cur-rate .inp.num { text-align: right; } .dir-card.cur .cur-pct { display: inline-block; width: 13px; margin-left: 2px; line-height: 17px; vertical-align: top; } .dir-card.cur .cur-eq { padding-left: 20px; color: #909090; line-height: 17px; } .dir-card.cur .cur-hint { margin: 8px 0 13px; line-height: 14px; color: #888; font-style: italic; } .dir-card.cur .cur-hint.hidden { display: none; } .dir-card.cur .cur-sub { margin: 0 0 10px; font-weight: bold; font-size: 14px; line-height: 16px; } .dir-card.cur .cur-unit { display: grid; grid-template-columns: 65px 199px 65px 200px 65px 200px 65px 200px; align-items: start; height: 23px; margin-bottom: 10px; } .dir-card.cur .cur-unit .cur-lbl { text-align: right; padding: 2px 15px 0 0; line-height: 14px; } .dir-card.cur .cur-note { margin-top: 43px; width: 832px; box-sizing: border-box; padding: 10px 20px; border: 1px solid #CFDFEA; background: #F2F7FA; color: #222; } .dir-card.cur .cur-note a { color: var(--link-new); } .dir-card.cur .cur-pick { margin-top: 10px; } /* the catalogs' panel (openCatalogSettings): the weight prefix, «Цены» */ /* the prefix row: its box no taller than a checkbox's, the next head 30 px under the box (the original's) */ .dsp-cb.pref { position: relative; top: -1px; margin-bottom: -9px; } .dsp-cb.pref .help { position: absolute; left: -25px; top: 1px; } .dsp-pref { width: 36px; height: 20px; box-sizing: border-box; margin: -3px 0 -3px 2px; padding: 0 3px; text-align: right; border: 1px solid #BBB; font: inherit; } .dsp-pref:disabled { background: #fff; color: #555; border-color: #DDD; } /* the original's price tables: 15 (handle) + 225 + 255 + 21 px */ table.dsp-prices { border-collapse: collapse; table-layout: fixed; width: 516px; margin: 14px 0 14px; } table.dsp-prices col.drag { width: 15px; } table.dsp-prices col.nm { width: 225px; } table.dsp-prices col.code { width: 255px; } table.dsp-prices col.kill { width: 21px; } table.dsp-prices th { padding: 0 0 6px; text-align: left; font-weight: normal; font-size: 11px; color: #222; border-bottom: 1px solid var(--link); } table.dsp-prices td { height: 30px; padding: 0 0 0 3px; color: #222; border-bottom: 1px solid #BFBFBF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } table.dsp-prices td.drag, table.dsp-prices td.kill { padding: 0; } table.dsp-prices tbody tr:last-child td { border-bottom: 1px solid var(--link); } table.dsp-prices .help { margin-left: 8px; } table.dsp-prices td.kill .help { margin-left: 0; } table.dsp-prices.ed td.ed { cursor: text; } table.dsp-prices.ed td.drag { cursor: move; } table.dsp-prices.ed tr:hover td.drag { background: radial-gradient(circle, #999 1px, transparent 1.5px) 3px 9px / 4px 4px; background-repeat: repeat; background-clip: content-box; padding: 6px 3px; } table.dsp-prices.ed .x { visibility: hidden; display: block; text-align: center; color: #848585; font-size: 15px; cursor: pointer; } table.dsp-prices.ed tr:hover .x { visibility: visible; } .dsp-ptin { width: calc(100% + 3px); height: 24px; box-sizing: border-box; margin-left: -3px; padding: 0 3px; border: 1px solid #BBB; font: inherit; } .btn.dsp-newprice { margin-bottom: 8px; } .dsp-sub { position: relative; margin: 21px 0 15px; font-weight: bold; } .dsp-sub .help { position: absolute; left: -25px; top: -1px; background: var(--link); border-color: var(--link); color: #fff; } .dsp-note { position: relative; width: 362px; padding: 7px 16px 9px 28px; margin-bottom: 26px; background: #ECF8FF; border: 1px solid #E2F4FF; line-height: 16px; color: #222; } .dsp-note .i { position: absolute; left: 8px; top: 9px; width: 11px; height: 11px; border-radius: 50%; background: var(--link); color: #fff; font: bold 8px/11px Arial, sans-serif; text-align: center; } .dsp-note .x { position: absolute; right: 9px; top: 4px; color: #848585; font-size: 13px; line-height: 13px; cursor: pointer; } /* «Учетная запись» (#account, account.js) — the original's at 1440 px (28.10.2026): the employee card's grid on the left; on the right from x 566 the defaults (rows of 31 px) and the settings — a table whose labels wrap at ~145 px and sit 2 px below the row's top, its fields centred in the row */ .acct-card .emp-body { margin-top: 44px; } .acct-card .emp-left { width: 526px; } .acct-card .emp-grid > .ctl.btnrow { min-height: 31px; align-items: flex-start; } .acct-card .emp-grid > .lbl { margin-top: 2px; } .acct-right { width: 470px; } .acct-right .emp-sec.next { margin-top: 35px; } .acct-set { align-items: center; } .acct-set > .lbl { align-self: start; justify-self: end; max-width: 145px; margin-top: 2px; white-space: normal; } .acct-set > .ctl { min-height: 0; } /* the original's lognex-selector: 250 × 23, the text 4 px in, a grey triangle 8 × 4 six px from the right edge */ .acct-sel { width: 250px; height: 23px; appearance: none; padding: 0 18px 0 3px; border: 1px solid #BFBFBF; border-radius: 0; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 0h8L4 4z' fill='%237B7B7B'/%3E%3C/svg%3E") no-repeat right 6px center; } .acct-num { width: 120px; text-align: right; } .acct-ta { width: 252px; height: 44px; margin-bottom: 3px; resize: both; } .acct-set input[type=checkbox] { width: 13px; height: 13px; margin: 0; border-radius: 2px; background-size: 9px; } /* a node that may not be chosen (the moved stores and what is inside them) */ .tree .node.off { color: #AAA; cursor: default; } /* «Звонки» (calls.js): a call's card as the original's at 1440 px (29.10.2026): «Сохранить» 82 and «Закрыть» 68 px, «Изменения» from x 228; its table of 185 + 260 px from y 160 (each cell 10 px of padding over its line: text rows 24 px, selector rows 31 px), the title 14pt bold; the comment box 410 × 83 at y 402 */ .pc-card { padding-top: 20px; } .pc-card .card-tools > .btn { justify-content: center; padding: 0; } .pc-card .card-tools > .btn.primary { width: 82px; } .pc-card .card-tools > .btn:not(.primary) { width: 68px; } .pc-card .card-tools .right { margin-left: 18px; } .pc-card .card-tools .right .n, .pc-card .card-tools .right .go { color: var(--link); cursor: pointer; } .pc-title { margin-top: 23px; height: 22px; line-height: 22px; font-size: 14pt; font-weight: bold; } .pc-grid { display: grid; grid-template-columns: 185px 260px; line-height: 14px; } .pc-grid > div { padding-top: 10px; min-width: 0; } .pc-grid > .lbl { display: flex; align-items: center; } .pc-grid > .val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; } .pc-grid > .val.sel { overflow: visible; max-width: none; } .pc-grid .record { display: inline-block; padding-right: 10px; color: var(--link); text-decoration: none; } .pc-grid .record:last-child { padding-right: 0; } .pc-comment { display: block; margin-top: 28px; width: 410px; height: 83px; padding: 3px; border: 1px solid #ccc; font: inherit; resize: both; } /* a ringing call (the original's .callDialogParent, .phoneCallMain): at the window's bottom right, several one over another */ .call-pops { position: fixed; right: 30px; bottom: 50px; z-index: 950; display: flex; flex-direction: column; gap: 10px; } .callDialogParent { background: #fff; border-radius: 5px 5px 0 0; box-shadow: 0 2px 14px rgba(0, 0, 0, .3); } .phoneCallMain { min-width: 250px; max-width: 300px; min-height: 233px; max-height: 300px; padding-bottom: 15px; } .phoneCallMain > div { box-sizing: content-box; } .phoneCallMain .close-cross-panel { height: 25px; } .phoneCallMain .close-cross { float: right; margin: 7px 7px 0 0; cursor: pointer; font-size: 18px; line-height: 12px; color: #777; } .phoneCallMain .callDirection { text-align: center; font-size: 16px; height: 18px; opacity: .2; color: #000; } .phoneCallMain .customer { padding-top: 13px; text-align: center; height: 18px; font-size: 16px; color: #000; } .phoneCallMain .customerOwner { padding-top: 12px; text-align: center; font-size: 12px; height: 15px; color: #000; } .phoneCallMain .customerNumber { padding-top: 12px; text-align: center; font-size: 16px; height: 18px; color: #000; } .phoneCallMain .customer, .phoneCallMain .customerOwner, .phoneCallMain .customerNumber { padding-left: 10px; padding-right: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .phoneCallMain .callStatus { padding-top: 19px; text-align: center; font-size: 12px; height: 14px; color: #000; opacity: .4; } .phoneCallMain .createCustomerButton { box-sizing: border-box; margin: 28px auto 0; width: 171px; height: 48px; line-height: 48px; border-radius: 5px; background: #00B9E6; text-align: center; font-size: 16px; color: #fff; cursor: pointer; } /* «Позвонить» after a counterparty's phone */ .call-btn { margin-left: 4px; color: var(--link); } .pc-note { font-size: 13px; line-height: 18px; } /* «Настройки телефонии» (#apps): the clone's page of the original's PhoneApiEditor fields */ .pa-card { padding-top: 20px; } .pa-title { margin: 23px 0 8px; font-size: 14pt; font-weight: bold; } .pa-hint { max-width: 640px; margin-bottom: 16px; line-height: 16px; color: #777; } .pa-grid { display: grid; grid-template-columns: 185px auto; row-gap: 10px; align-items: center; } .pa-url { width: 400px; } .pa-api, .pa-key { font: 12px/14px Menlo, Consolas, monospace; user-select: all; } .pa-keyrow { display: flex; align-items: center; gap: 10px; } .pa-act { color: var(--link); cursor: pointer; } .pa-none { color: #E2453C; } .pa-sub { margin: 26px 0 8px; font-size: 13px; font-weight: bold; } .pa-table { border-collapse: collapse; } .pa-table th { padding: 4px 30px 4px 0; border-bottom: 1px solid #DDD; text-align: left; font-weight: normal; color: #777; } .pa-table td { padding: 4px 30px 4px 0; } .pa-ext { width: 90px; } /* «Уведомления» (notifications.js, 29.10.2026). The top bar's bell and «?» as the original's at 1440 px: circles 38 × 38, 4 px apart, before the user's panel; hover 8 % dark, pressed 15 %; the icon 7 px in; the count 23 × 14 at 15, 20 of the bell (#EE644A, white 12 px, a dark shadow) */ .tb-circle { position: relative; width: 38px; height: 38px; margin: -2px 4px 0 0; border-radius: 20px; flex: none; cursor: pointer; outline: none; } .tb-circle:hover, .tb-circle:focus-visible { background: rgba(0, 0, 0, .08); } .tb-circle:active { background: rgba(0, 0, 0, .15); } .tb-circle > svg { position: absolute; left: 7px; top: 7px; } /* the user's names 9 px after «?» (its user panel: 4 px margin, 5 px padding) */ .tb-help { margin-right: 9px; } .nt-count { position: absolute; left: 15px; top: 20px; min-width: 23px; height: 14px; box-sizing: border-box; padding: 0 4px; border-radius: 29px; background: #EE644A; box-shadow: 0 1px 2px rgba(0, 0, 0, .7); color: #fff; font: 12px/14px Arial, sans-serif; text-align: center; white-space: nowrap; } .nt-count.hidden { display: none; } /* the feed: a side page in the task drawer's frame (made up, see notifications.js) */ .nt-ov { position: fixed; inset: 0; z-index: 60; background: rgba(1, 4, 11, .36); } .nt-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 480px; background: #F1F4F9; box-shadow: 0 2px 7px rgba(9, 23, 57, .2); font: 14px/20px var(--font-new); color: #091739; } .nt-content { height: 100%; overflow: auto; padding: 24px 24px 24px 32px; box-sizing: border-box; } .nt-head { display: flex; align-items: center; justify-content: space-between; } .nt-head h2 { margin: 0; font: 600 20px/28px var(--font-new); } .nt-gear { display: flex; padding: 4px; border-radius: 6px; } .nt-gear:hover { background: #E1E6EE; } .nt-tabs { display: flex; gap: 16px; margin-top: 14px; border-bottom: 1px solid #D1D6DF; } .nt-tab { padding: 0 0 8px; border-bottom: 2px solid transparent; margin-bottom: -1px; } .nt-tab.active { border-color: var(--tab-blue); font-weight: 600; } .nt-tab.off { color: #9FA7AF; cursor: default; } .nt-tools { display: flex; justify-content: flex-end; margin: 10px 0 8px; } .nt-readall { border: 0; background: none; padding: 0; font: 14px var(--font-new); color: var(--link-new); cursor: pointer; } .nt-readall:disabled { color: #9FA7AF; cursor: default; } .nt-item { position: relative; display: flex; gap: 10px; padding: 12px 16px 12px 12px; margin-bottom: 8px; background: #fff; border-radius: 8px; cursor: pointer; } .nt-item:hover { box-shadow: 0 1px 4px rgba(9, 23, 57, .16); } .nt-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; flex: none; } .nt-item.unread .nt-dot { background: var(--tab-blue); } .nt-body { min-width: 0; flex: 1; } .nt-title { overflow-wrap: anywhere; } .nt-item.unread .nt-title { font-weight: 600; } .nt-desc, .nt-diff { margin-top: 2px; color: #3B4A5F; white-space: pre-wrap; overflow-wrap: anywhere; } .nt-when { margin-top: 4px; font-size: 12px; color: #7E8A99; } .nt-empty { padding: 40px 0; text-align: center; color: #7E8A99; } .nt-more { display: block; margin: 8px auto 0; border: 1px solid #D1D6DF; border-radius: 8px; background: #fff; padding: 6px 16px; font: 14px var(--font-new); color: #091739; cursor: pointer; } .nt-more.hidden { display: none; } /* «Уведомления» on #account (account.js): the original's notify-settings table — 532 px (250, 87, 80, 115) 25 px under the settings, the title's «?» 25 px left of it; rows of 40 px with a #DDD line, the head's a 2 px #186998 one and grey labels; the group's «?», name and switch to the right, 35 px before the first column's end; the flags centred; the switch 30 × 14 (off: a #DDD frame and a whitesmoke knob on the left, on: #3B98FB with the knob on the right) */ .acct-nt { width: 532px; margin-top: 25px; } .acct-nt > .emp-sec { position: relative; margin-bottom: 10px; line-height: 18px; } .acct-nt > .emp-sec > .help { position: absolute; left: -25px; top: 3px; width: 15px; height: 15px; box-sizing: border-box; font-size: 10px; } .nt-set { width: 532px; border-collapse: collapse; table-layout: fixed; font-size: 12px; } .nt-set tr { height: 40px; border-bottom: 1px solid #DDD; } .nt-set tr.hd { border-bottom: 2px solid #186998; color: #979797; } .nt-set tr:last-child { border-bottom: 0; } .nt-set td { padding: 0; text-align: center; vertical-align: middle; } .nt-set td.last { padding-right: 35px; } .nt-set td:first-child { text-align: right; } .nt-set input[type=checkbox] { width: 13px; height: 13px; margin: 0; vertical-align: middle; border-radius: 2px; background-size: 9px; } /* a group turned off: its flags grey (the original's gwt-CheckBox-disabled) */ .nt-set input[type=checkbox]:disabled { cursor: default; border-color: #C5CBD3; background-color: #F2F2F2; } .nt-set input[type=checkbox]:disabled:checked { border-color: #ABABAB; background-color: #ABABAB; } .nt-left { display: inline-flex; align-items: center; margin-right: 35px; } .nt-left > .help { width: 15px; height: 15px; box-sizing: border-box; margin-right: 10px; font-size: 10px; } .nt-sw { position: relative; width: 30px; height: 14px; margin-left: 10px; flex: none; cursor: pointer; } .nt-sw.fixed { visibility: hidden; } .nt-sw input { position: absolute; opacity: 0; pointer-events: none; } .nt-sw .track { position: absolute; inset: 0; border: 1px solid #DDD; border-radius: 10px; background: whitesmoke; box-sizing: border-box; } .nt-sw .track::after { content: ""; position: absolute; left: 1px; top: 1px; width: 8px; height: 8px; border: 1px solid #DDD; border-radius: 12px; background: whitesmoke; } .nt-sw input:checked + .track { border-color: #3B98FB; background: #3B98FB; } .nt-sw input:checked + .track::after { left: auto; right: 2px; top: 2px; border: 0; } /* ------------------------------------------------------------ «Обмен данными» (exchange.js, 30.10.2026) the task pages as the original's at 1440 px: «?» at x 304, the title at 330, «Начать импорт ▾» 424–542 × 79–106, the dashed link at 553, the table 319–988 (310/120/120/120), its header's text at y 126 and blue line 145–146 */ .dirs-main.xch { padding: 20px 15px; } .xch-head { display: flex; align-items: flex-start; } .xch-head .xch-help { width: 15px; height: 15px; font-size: 10px; margin-top: 4px; border-color: #9CC2D9; background: #ECF8FF; color: #186999; } .xch-head h1 { margin: 0 20px 0 10px; font-size: 20px; line-height: 23px; font-weight: bold; color: #222; } .xch-head .xch-start { height: 28px; padding: 0 11px 0 10px; gap: 6px; } .xch-head .xch-start .caret { border-top-color: #7B7B7B; } .xch-links { margin: 1px 0 0 10px; } .xch-link { color: var(--link); border-bottom: 1px dashed var(--link); cursor: pointer; font-size: 12px; line-height: 13px; white-space: nowrap; } .xch-links .xch-link { display: inline-block; } .xch-note { font-size: 12px; line-height: 13px; font-style: italic; color: #777; white-space: nowrap; } table.xch-table { margin: 8px 0 0 15px; border-collapse: collapse; table-layout: fixed; width: 670px; font: 12px var(--font); } table.xch-table th { text-align: left; padding: 8px 10px 9px; font: bold 11px Arial, sans-serif; color: #000; border-bottom: 2px solid var(--link); } table.xch-table td { padding: 8px 10px; vertical-align: top; border-bottom: 1px solid #DDD; line-height: 15px; overflow-wrap: anywhere; } table.xch-table tr.xch-empty td { height: 31px; padding: 0; } .xch-name .xch-link { font-size: 11px; } .xch-who { color: #999; font-size: 11px; } .xch-stop { color: #E8541E; cursor: pointer; text-decoration: underline; } .xch-file { color: var(--link); } .xch-log { font: 12px/18px Tahoma, Arial, sans-serif; white-space: pre-wrap; max-height: 60vh; overflow: auto; } table.xch-params { border-collapse: collapse; font-size: 12px; } table.xch-params td { padding: 4px 16px 4px 0; vertical-align: top; } table.xch-params td:first-child { color: #777; } /* a counterparties import's «Параметры» (its headings and the line of the original's import-result-line) */ .xch-pbox { max-height: 60vh; overflow: auto; } .xch-ph { font: bold 12px Tahoma, Arial, sans-serif; margin: 0 0 4px; } .xch-pbox .import-result-line { border-top: 1px solid #DADADA; margin: 10px 0; } .xch-msg p { margin: 0 0 8px; font-size: 13px; } /* the goods' import (#importgoods; the original's at 1440 px: «Закрыть» 42–109 × 78–105, «?» 42–56 and «Импорт товаров» from x 68 (y 131–149), the help 42–403 × 177–274, step 1 at y 310–333, the drop zone 42–1399 × 337–625, «XLS и CSV» at y 541, «Загрузить» 679–764 × 564–591) */ .ig { padding: 20px 40px 40px 42px; font-family: var(--font); } .ig-top { display: flex; gap: 10px; } .ig-top .btn { height: 28px; padding: 0 10px; } .ig-title { display: flex; align-items: center; gap: 10px; margin-top: 19px; height: 26px; } .ig-title h1 { margin: 0; position: relative; top: 1px; font-size: 20px; line-height: 24px; font-weight: bold; color: #000; } .ig-help { width: 15px; height: 15px; box-sizing: border-box; border-radius: 50%; border: 1px solid #186999; background: #ECF8FF; color: #186999; font: bold 10px/13px Arial, sans-serif; text-align: center; cursor: pointer; flex: none; } .ig-help.pressed { background: #186999; color: #fff; } .ig-box { position: relative; margin-top: 26px; width: 362px; box-sizing: border-box; padding: 6px 26px 10px 28px; background: #ECF8FF; border: 1px solid #E2F4FF; font-size: 12px; line-height: 16px; color: #222; } .ig-box a { color: var(--link); } .ig-i { position: absolute; left: 8px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: #186999; color: #fff; font: bold 9px/12px Georgia, serif; text-align: center; } .ig-x { position: absolute; right: 8px; top: 6px; width: 7px; height: 7px; cursor: pointer; } .ig-x::before, .ig-x::after { content: ''; position: absolute; left: 2.75px; top: -1px; width: 1.5px; height: 9px; background: #828282; transform: rotate(45deg); } .ig-x::after { transform: rotate(-45deg); } .ig-err { margin-top: 12px; color: #D0021B; font-size: 13px; } .ig-step { display: flex; align-items: center; margin-top: 35px; height: 24px; } .ig-n { width: 24px; height: 24px; box-sizing: border-box; border: 2px solid #CC420C; border-radius: 50%; color: #CC420C; font: 12px/20px Arial, sans-serif; text-align: center; flex: none; } .ig-st { margin-left: 5px; font-size: 15px; color: #CC420C; } .ig-example { margin-left: 10px; font-size: 12px; color: var(--link); } .ig-drop { margin-top: 3px; height: 289px; box-sizing: border-box; border: 1px dashed #D5D5D5; border-radius: 8px; text-align: center; padding-top: 40px; } .ig-drop.over { border-color: var(--link); background: #F5FAFD; } .ig-pic { display: block; margin: 0 auto; } .ig-kinds { margin-top: 26px; font-size: 18px; line-height: 21px; color: #222; } .ig-upload.btn { margin-top: 11px; height: 28px; width: 86px; justify-content: center; color: #fff; border-color: #A1B900; background: linear-gradient(#CBE151, #A5BD08); } .ig-upload.btn:hover { background: linear-gradient(#D3E764, #9AB200); } .ig-file { margin-top: 10px; font-size: 13px; } .ig-fname { font-weight: bold; } .ig-again { margin-left: 14px; color: var(--link); border-bottom: 1px dashed var(--link); cursor: pointer; font-size: 12px; } .ig-step2 .ig-step { margin-top: 30px; } table.ig-opts { margin-top: 12px; border-collapse: collapse; font-size: 12px; } table.ig-opts td { padding: 3px 0; } table.ig-opts td.lbl { width: 90px; color: #555; } .ig-sel { height: 23px; min-width: 200px; font-size: 12px; } .ig-check { margin-top: 8px; font-size: 12px; display: flex; align-items: center; gap: 6px; } .ig-check.off { color: #AAA; } .ig-map { margin-top: 16px; max-width: 100%; overflow-x: auto; border: 1px solid #E3E3E3; } table.ig-grid { border-collapse: collapse; font: 11px var(--font-grid); } table.ig-grid th { padding: 6px; background: #F7F7F7; border-right: 1px solid #E3E3E3; border-bottom: 1px solid #E3E3E3; } table.ig-grid select.ig-col { width: 160px; height: 23px; font-size: 11px; } table.ig-grid select.ig-col.off { color: #999; } table.ig-grid td { padding: 5px 6px; max-width: 172px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid #EEE; border-bottom: 1px solid #EEE; } table.ig-grid tr.ig-head td { font-weight: bold; background: #FBFBFB; } .ig-count { padding: 6px; font-size: 11px; color: #777; } .ig-done { margin-top: 20px; font-size: 13px; } .ig-wait { color: #555; margin-bottom: 4px; } .ig-results { display: inline-block; margin-top: 6px; color: var(--link); } /* step 3 «Укажите, как оприходовать остатки» (the original's block is hidden in its dump: the look is the clone's, its rows as step 2's options) */ .ig-step3 .ig-step { margin-top: 30px; } .ig-note { margin-top: 10px; font-size: 12px; color: #555; } table.ig-stock { margin-top: 10px; border-collapse: collapse; font-size: 12px; } table.ig-stock td { padding: 3px 0; } table.ig-stock td.lbl { width: 90px; color: #555; } table.ig-stock td.lbl.second { width: auto; padding: 0 12px 0 24px; } a.xch-doc { color: var(--link); } /* «Производство» (30.10.2026; production.js, doc.js cfg.prodLists). The processing's card at 1440 px: under the tabs «Продукция» (15 px #CC420C, 15 px down) and the products' grid flush with the form (no handle, no number; 10 px before the ⚙), its search on the bar's line, «Материалы» 30 px under the bar; under them the comment (708 × 64, 3 px in) and the totals 99 px after it — the materials' worth and the work (99 × 21) */ .ogrid-wrap.prod { margin-left: 0; } .ogrid-wrap.prod .obar { align-items: flex-start; height: 41px; padding: 7px 0 0; } .ogrid-wrap.prod .obar .add-input { margin-top: 8px; } .ogrid td.gap { padding: 0; } .card.prod .prod-h { height: 25px; margin-top: 15px; font-size: 15px; line-height: 17px; color: #CC420C; } .card.prod .prod-h.mat { margin-top: 30px; } .card.prod .obottom .comment.old { height: 64px; margin: 0 99px 0 3px; } /* «Задачи» and «Файлы» (31.10.2026; agent19_processing_edit: the bottom panel ends 23 px under the comment, «Задачи» 10 px under it, «Файлы» 24 px under «Нет задач»'s section; the order's — the same, a guess) */ .card.prod .obottom { padding-bottom: 23px; } .card.prod .tk-sec { margin-top: 10px; } .card.prod .tk-sec + .tk-sec { margin-top: 24px; } .ototals .ot-pm { height: 25px; } .ototals .ot-ps { height: 21px; align-items: center; } .ototals .ovh.ps { width: 99px; margin-left: auto; } /* a tech card (the original's at 1440 px): the title 20 px under the toolbar («?» 15 px, the text 10 px on), the fields 20 px under it — labels right-aligned in 180 px (15 px before the field), rows 31 px apart; the old tabs 25 px under the comment, the grids 10 px under them: the header 30 px (11 px #888, the name over the handle's column), rows 30 px, 861 px wide */ .pp-card .pp-title { display: flex; align-items: center; gap: 10px; height: 22px; margin-top: 20px; font: 700 20px/22px var(--font); color: #222; } .pp-card .pp-title .help { width: 15px; height: 15px; font-size: 10px; } .pp-fields { display: grid; grid-template-columns: 180px max-content; row-gap: 10px; align-items: start; margin-top: 20px; } .pp-fields > .lbl { box-sizing: border-box; padding: 2px 15px 0 0; text-align: right; line-height: 14px; white-space: nowrap; } .pp-fields > .lbl.req::before { content: "*"; margin-right: 1px; color: #E2453C; } .pp-fields > .ctl { display: flex; align-items: center; min-height: 21px; } .pp-fields .inp { box-sizing: border-box; height: 21px; padding: 1px; } .pp-fields .ta { box-sizing: border-box; padding: 0; resize: vertical; } .pp-fields .ta:disabled { background: #F0F0F0; } .pp-tabs .tabs-old { margin-top: 25px; width: 861px; } .pp-tabs .tabs-old::after { content: ""; flex: 1; border-bottom: 1px solid #186999; } .pp-tab { padding-top: 10px; } .pp-grid { width: 861px; border-collapse: collapse; table-layout: fixed; font: 12px var(--font); color: #222; } .pp-grid th { height: 30px; box-sizing: border-box; padding: 0 5px 0 0; border-bottom: 1px solid #186999; text-align: left; font-size: 11px; font-weight: 400; color: #888; white-space: nowrap; } .pp-grid td { height: 30px; box-sizing: border-box; padding: 0 5px 0 0; border-bottom: 1px solid #E4E4E4; vertical-align: middle; overflow: hidden; } .pp-grid .r { text-align: right; } .pp-grid td.g { color: #888; } .pp-grid tbody tr:hover td { background: #FFFB8C; } .pp-grid .nmv { line-height: 14px; white-space: normal; word-break: break-word; } .pp-grid .nmv a { color: inherit; text-decoration: none; } .pp-grid tr:hover .nmv a { color: #186999; } .pp-grid .nmv.arch { color: #999; } .pp-grid .nmv .ab { margin-right: 4px; font-weight: 700; } .pp-grid tr:hover .ov.ed { border-color: #BFBFBF; background: #fff; cursor: text; } .pp-grid .inp.num { box-sizing: border-box; height: 21px; padding: 1px 3px; text-align: right; } .pp-grid tfoot td { border-bottom: 0; font-weight: 700; } .pp-grid input[type=checkbox] { width: 13px; height: 13px; margin: 0; } .pp-x { visibility: hidden; color: #186999; font-size: 16px; line-height: 14px; cursor: pointer; } .pp-grid tr:hover .pp-x, .pp-steps tr:hover .pp-x { visibility: visible; } .obar.pp-bar { width: 861px; padding-left: 0; padding-right: 0; } .obar.pp-bar .obtn2:disabled { color: #B5B5B5; cursor: default; } .pp-stage + .pp-stage { margin-top: 20px; } .pp-stage-h { display: flex; align-items: center; gap: 10px; height: 26px; margin-bottom: 4px; } .pp-stage-h .t { margin-right: 10px; font-size: 15px; line-height: 17px; color: #CC420C; } .pp-stage-h .obtn2:disabled { color: #B5B5B5; cursor: default; } .pp-tab .empty-note { padding: 10px 0; color: #888; } /* a production task's and a stage completion's «Главная» (prodtasks.js, 31.10.2026; the original's cards not seen — the processings' look, a guess): the grids of the tech card (861 px), a stage's materials grey under its name, the work per unit under the lines */ .pt-main .pt-grid td { padding-top: 4px; padding-bottom: 4px; } .pt-main .pt-grid td.g, .pt-main .g { color: #888; } .pt-main .pt-grid .ref { vertical-align: middle; } .pt-main .empty-note { padding: 10px 0; color: #888; } .pt-main .prod-h .pt-start { margin-left: 15px; vertical-align: middle; font-size: 12px; color: #222; } .pt-main .obtn2:disabled { color: #B5B5B5; cursor: default; } .pt-main .obtn2:disabled:hover { background: linear-gradient(#FDFDFD, #E6E6E6); } .pt-stage + .pt-stage { margin-top: 15px; } .pt-stage-h { margin: 5px 0; font-weight: 700; } .pt-mats { overflow: hidden; margin-top: 2px; font-size: 11px; line-height: 13px; color: #888; white-space: nowrap; text-overflow: ellipsis; } .pt-costs { display: grid; grid-template-columns: max-content max-content; gap: 8px 15px; align-items: center; margin-top: 20px; } .pt-cost { display: contents; } .pt-ro { display: flex; align-items: center; min-height: 21px; } .pt-links a { color: #186999; } .sg-row .ref { flex: none; } .sg-row.sg-agent .sg-nm { width: 180px; } /* «Статус производства» (prodstate.js, 31.10.2026): the bar after «Прогресс» and «Распределение объема» — the clone's own (the original's cell was not seen with lines) */ .ps-bar { height: 10px; margin: 2px 0; border-radius: 2px; background: #EDEDED; overflow: hidden; } .ps-bar > i { display: block; height: 100%; background: #8DC63F; } /* a process (the original's at 1440 px): «Техпроцесс» 36 px high, the labels in 98 px (15 px before the fields at x 138), «Этапы производства» 13 px under the description («?» at the form's edge, the text 26 px in), the stages 10 px under it: the header 26 px, rows 33 px — a handle 25, the stage 260 (its select 5 px in), the next one 376, × 30 */ .pp-proc .pp-title { height: 36px; align-items: flex-start; } .pp-fields.proc { grid-template-columns: 98px max-content; margin-top: 0; } .pp-sect { position: relative; display: flex; align-items: center; height: 32px; margin-top: 13px; padding-left: 26px; font-size: 15px; color: #CC420C; } .pp-sect .help { position: absolute; left: 1px; top: 11px; width: 15px; height: 15px; font-size: 10px; } .pp-steps { width: 701px; margin: 10px 0 0 1px; border-collapse: collapse; table-layout: fixed; font: 12px var(--font); color: #222; } .pp-steps th { height: 26px; box-sizing: border-box; padding: 0 0 0 6px; border-bottom: 1px solid #186999; text-align: left; font-weight: 400; white-space: nowrap; } .pp-steps th:first-child { border-bottom: 0; } .pp-steps td { height: 33px; box-sizing: border-box; padding: 0 0 0 5px; vertical-align: middle; } .pp-steps td:first-child { padding: 0; } .pp-steps td.g { color: #888; } .pp-steps tbody tr:last-child td { border-bottom: 1px solid #186999; } .pp-steps tbody tr:last-child td:first-child { border-bottom: 0; } .pp-next { display: inline-flex; align-items: center; gap: 5px; } .pp-add { margin: 10px 0 0 30px; font: 12px var(--font); color: var(--link); } /* a stage: the original's drawer (its React form, 30.10.2026 at 1440 px) from x 310 over the list, its close circle on the edge; «Этап» 24 px, the cards 26 px under it — the fields 355 px (labels 20 px, fields 315 × 32 4 px under them, 16 px apart), «Исполнители» 691 px with its tabs, «Все N», the table and the search at the bottom */ .sg-back { position: fixed; inset: 0; z-index: 60; background: rgba(1, 4, 11, .36); } .sg-drawer { position: fixed; top: 0; right: 0; bottom: 0; left: 310px; z-index: 61; border-radius: 2px 0 0 2px; background: #F1F4F9; box-shadow: 0 2px 7px rgba(9, 23, 57, .2); font: 14px/20px var(--font-new); color: #091739; } .sg-close { position: absolute; left: -16px; top: 8px; z-index: 1; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #F1F4F9; cursor: pointer; } .sg-close::before, .sg-close::after { content: ""; position: absolute; left: 10px; top: 15px; width: 12px; height: 1.5px; background: #5F6D79; transform: rotate(45deg); } .sg-close::after { transform: rotate(-45deg); } .sg-scroll { height: 100%; overflow: auto; box-sizing: border-box; padding: 42px 32px 24px; } .sg-top { display: flex; align-items: center; height: 32px; } .sg-title { font: 700 24px/28px var(--font-new); } .sg-tools { display: flex; align-items: center; gap: 20px; margin-left: auto; } .sg-save { height: 32px; padding: 0 16px; border: 0; border-radius: 8px; background: #036CE5; color: #fff; font: 14px var(--font-new); cursor: pointer; } .sg-save:disabled { background: #D1D6DF; color: #fff; cursor: default; } .sg-time { display: inline-flex; align-items: center; gap: 8px; color: #036CE5; } .sg-clock { position: relative; width: 16px; height: 16px; margin: 2px; box-sizing: border-box; border: 1.5px solid #036CE5; border-radius: 50%; } .sg-clock::after { content: ""; position: absolute; left: 5px; top: 2px; width: 3px; height: 4px; border: solid #036CE5; border-width: 0 0 1.5px 1.5px; } .sg-more { width: 32px; height: 32px; padding: 0 0 6px; box-sizing: border-box; border: 1px solid #036CE5; border-radius: 8px; background: none; color: #036CE5; font: 700 16px/16px var(--font-new); letter-spacing: -1px; cursor: pointer; } .sg-body { display: flex; align-items: stretch; gap: 20px; margin-top: 26px; } .sg-panel { box-sizing: border-box; border-radius: 16px; background: #fff; } .sg-left { flex: none; width: 355px; padding: 20px; } .sg-right { position: relative; flex: 1; min-height: 690px; padding: 20px 12px 65px; } .sg-f + .sg-f { margin-top: 16px; } .sg-l { margin-bottom: 4px; } .sg-req { margin-left: 0; color: #E50347; } .sg-inp { display: block; box-sizing: border-box; width: 315px; height: 32px; padding: 0 12px; border: 1px solid #D1D6DF; border-radius: 8px; background: #fff; font: 14px var(--font-new); color: #091739; outline: none; } .sg-inp:focus { border-color: #036CE5; } .sg-inp.err { border-color: #E50347; } .sg-inp.sg-ta { height: 98px; padding: 6px 12px; resize: vertical; } .sg-inp.sg-ta::placeholder, .sg-inp::placeholder { color: #9FA7AF; } .sg-sel.dis { position: relative; background: #F1F4F9; } .sg-chev { position: absolute; right: 16px; top: 10px; width: 6px; height: 6px; border: solid #9FA7AF; border-width: 0 1.2px 1.2px 0; transform: rotate(45deg); } .sg-hint { margin-top: 4px; font: 12px/16px var(--font-new); color: #5F6D79; } .sg-link { color: #036CE5; } .sg-toggle { display: flex; align-items: flex-start; gap: 8px; margin-top: 22px; color: #5F6D79; cursor: pointer; } .sg-tg { position: relative; flex: none; width: 28px; height: 16px; margin-top: 2px; padding: 0; border: 0; border-radius: 12px; background: #9FA7AF; cursor: pointer; } .sg-tg::after { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; box-sizing: border-box; border: 1px solid #9FA7AF; border-radius: 50%; background: #fff; transition: left .15s; } .sg-tg.on { background: #036CE5; } .sg-tg.on::after { left: 12px; border-color: #036CE5; } .sg-tg.dis, .sg-tg.dis.on { background: #D1D6DF; cursor: default; } .sg-tg.dis::after { border-color: #D1D6DF; } .sg-h3 { display: flex; align-items: center; gap: 8px; margin-top: 33px; font: 700 16px/18px var(--font-new); } .sg-h3 + .sg-toggle { margin-top: 21px; } .sg-q { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; box-sizing: border-box; border: 1.5px solid #5F6D79; border-radius: 50%; font: 700 10px/1 var(--font-new); color: #5F6D79; cursor: help; } .sg-text { margin-top: 20px; } .sg-radio { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #5F6D79; } .sg-radio + .sg-radio { margin-top: 12px; } .sg-radio input { width: 16px; height: 16px; margin: 0; } .sg-h2 { padding: 0 8px; font: 700 20px/24px var(--font-new); } .sg-tabs { display: flex; gap: 16px; height: 33px; margin: 12px 8px 0; border-bottom: 1px solid #D1D6DF; } .sg-tabs span { padding-top: 4px; } .sg-tabs .cur { border-bottom: 2px solid #036CE5; } .sg-tabs .dis { color: #9FA7AF; cursor: default; } .sg-chips { margin: 15px 8px 0; } .sg-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; background: #F1F4F9; } .sg-head, .sg-row { display: flex; align-items: center; height: 32px; margin-top: 15px; font: 12px/20px var(--font-new); color: #5F6D79; } .sg-row { height: 40px; margin-top: 0; border-top: 1px solid #F1F4F9; font-size: 14px; color: #091739; } .sg-head > input, .sg-row > input:first-child { width: 16px; height: 16px; margin: 0 8px 0 12px; } .sg-head .sg-nm, .sg-row .sg-nm { width: 332px; padding-left: 8px; } .sg-head .sg-q { margin-left: 8px; } .sg-row > input + .sg-nm + input { width: 16px; height: 16px; margin: 0 0 0 8px; } .sg-row .pp-x { margin-left: auto; margin-right: 16px; } .sg-row:hover .pp-x { visibility: visible; } .sg-empty { width: 342px; margin: 120px auto 0; text-align: center; } .sg-empty b { display: block; font: 700 16px/18px var(--font-new); } .sg-empty div { margin-top: 8px; } .sg-foot { position: absolute; left: 12px; right: 12px; bottom: 0; padding: 8px 0 12px; border-top: 1px solid #D1D6DF; } .sg-foot .sg-inp { width: 100%; } .sg-foot .sg-inp:disabled { background: #F1F4F9; } /* «Сценарии» (scenarios.js): the list — the original's new page, measured at 1440 px 30.10.2026 (docs/ui_dumps/agent21_scenarios; its trial banner left out: the card 16 px under the head is a guess) */ .scn { min-height: calc(100vh - 139px); margin-bottom: -40px; padding: 16px 24px 18px; background: #F1F4F9; font: 14px/20px var(--font-new); color: var(--pos-text); } .scn-head { display: flex; align-items: center; height: 38px; } /* the head's widths as the original's, whatever the font makes of the text */ .scn-head h1 { flex: none; width: 159px; margin: 0; font: 700 32px/38px var(--font-new); color: #091739; white-space: nowrap; } .scn-ic { flex: none; width: 20px; height: 20px; margin: 2px 0 0 12px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; } .scn-head .nb { flex: none; align-self: flex-end; margin-left: 20px; padding: 0 16px; overflow: hidden; white-space: nowrap; } .scn-head .nb.scn-add { width: 123px; } .scn-head .nb.scn-chain { width: 189px; } .scn-seg { flex: none; align-self: flex-end; display: flex; gap: 2px; width: 258px; height: 32px; margin-left: 20px; padding: 4px; border-radius: 8px; background: rgba(201, 211, 221, .4); } .scn-seg button { flex: none; height: 24px; padding: 2px 12px; border: 0; border-radius: 4px; background: none; font: 14px/20px var(--font-new); color: #091739; white-space: nowrap; cursor: pointer; } .scn-seg button:first-child { width: 91px; } .scn-seg button:last-child { width: 157px; } .scn-seg button.on { background: #fff; cursor: default; } .scn-card-l { margin-top: 16px; background: #fff; border: 1px solid #F0F3F8; border-radius: 8px; overflow: hidden; } .scn-panel { display: flex; align-items: center; gap: 8px; height: 45px; padding: 8px 8px 8px 16px; border-bottom: 1px solid #F0F3F8; } .scn-chip { height: 28px; padding: 0 12px; border: 0; border-radius: 8px; background: rgba(201, 211, 221, .4); font: 14px/20px var(--font-new); color: var(--pos-text); cursor: pointer; white-space: nowrap; } .scn-chip.sel { background: rgba(191, 221, 247, .75); } .scn-cols { margin-left: auto; width: 36px; height: 28px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: var(--tab-blue); cursor: pointer; display: flex; } .scn-cols:hover { background: #E3E8F0; } .scn-colpop { width: 200px; } .scn-colrow { display: flex; align-items: center; gap: 8px; height: 32px; cursor: pointer; } .scn-colrow.dis { color: #9FA7AF; cursor: default; } table.scn-t { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font: 14px/20px var(--font-new); color: var(--pos-text); } table.scn-t th { position: relative; height: 32px; padding: 0; text-align: left; font-weight: normal; box-shadow: inset 0 -1px 0 #F0F3F8; } table.scn-t th .rz { position: absolute; top: 0; right: 0; width: 6px; height: 32px; } .scn-th { display: flex; align-items: center; height: 32px; padding: 6px 8px 6px 12px; font: 12px/20px var(--font-new); color: var(--pos-head); } .scn-th .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.scn-t td { height: 32px; padding: 0 8px; box-shadow: inset 0 -1px 0 #F0F3F8; white-space: nowrap; overflow: hidden; vertical-align: middle; } table.scn-t tbody tr:hover td { background: #F1F4F9; } table.scn-t tr.scn-none td { color: #9FA7AF; } a.scn-name { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; color: var(--tab-blue); text-decoration: none; } a.scn-name:hover { text-decoration: underline; } .scn-act { height: 31px; padding-top: 4px; } .scn-mark { display: inline-flex; color: #5F6D79; } .scn-mark.on { color: #30D590; } .scn-mark.go { cursor: pointer; } .scn-pager { border-top: 0; } .scn-hint p + p { margin-top: 8px; } /* the editor — the original's old GWT editor (agent21_scen_edit2, _edit5, _edit15 at 1440 px, 114 px scrolled): without its trial banner everything under the toolbar sits 7 px lower than in the dumps' viewport; the title 13 px under the toolbar is a guess */ .card.scn-card { padding-top: 20px; } .scn-card .card-tools .right { gap: 20px; height: 28px; } /* the owner's second line hangs below: the row is the buttons' 28 px */ .scn-card .card-tools .right .who { width: 97px; } .scn-card .card-tools .right .ava { margin-left: -14px; } .scn-delw { display: inline-block; flex: none; align-self: flex-start; width: 107px; margin-left: 10px; } a.scn-del { display: inline-block; margin-top: 7px; font-size: 12px; line-height: 14px; color: #D04A49; text-decoration: none; border-bottom: 1px dashed #D04A49; } .scn-title { position: relative; height: 22px; margin: 13px 0 0 1px; font: bold 20px/22px var(--font); color: #222; white-space: nowrap; } .scn-q { position: absolute; left: -25px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: #1F75A8; color: #fff; font: bold 11px/15px Arial, sans-serif; text-align: center; cursor: pointer; } .scn-help { position: relative; width: 659px; height: 141px; margin-top: 12px; padding: 6px 0 10px 28px; border: 1px solid #E2F4FF; border-radius: 2px; background: #ECF8FF; font-size: 12px; line-height: 16px; color: #222; } .scn-help-t { width: 309px; } .scn-help p, .scn-alert p { margin: 0; } .scn-help p + p { margin-top: 10px; } .scn-info { position: absolute; left: 8px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: #1F75A8; color: #fff; font: bold 9px/12px Georgia, serif; text-align: center; } .scn-help-x { position: absolute; left: 566px; top: 6px; width: 9px; height: 9px; display: flex; cursor: pointer; } .scn-desc { width: 354px; margin-top: 20px; } .scn-drow { display: flex; align-items: flex-start; } .scn-drow.r1 { height: 31px; } .scn-drow.r2 { height: 77px; } .scn-drow.r3 { height: 25px; margin: 10px 0; } .scn-dl { flex: none; width: 85px; margin-right: 15px; padding-top: 2px; font-size: 12px; line-height: 14px; color: #222; text-align: right; } .scn-drow.r3 .scn-dl { padding-top: 0; } .scn-dl .req { margin-right: 2px; color: #E2453C; } input.scn-name { width: 250px; font-size: 12px; } textarea.scn-desc-ta { width: 254px; height: 74px; min-height: 0; padding: 1px; resize: both; font-size: 12px; } .scn-cb { width: 13px; height: 13px; margin: 1px 0 0; } .scn-sec { min-width: 659px; width: fit-content; } .scn-stitle { height: 18px; margin-bottom: 16px; font: bold 15px/18px var(--font); color: #000; } .scn-trig { margin-top: 40px; padding-bottom: 10px; } .scn-trow { display: flex; } .scn-tcol { width: 202px; height: 51px; } .scn-lbl { height: 20px; padding-bottom: 6px; font-size: 12px; line-height: 14px; color: #767676; } /* the original's lognex-selector: 21 px, a grey triangle 8 × 4 six px from the right */ select.scn-sel { height: 21px; padding: 0 18px 0 2px; border: 1px solid #BFBFBF; border-radius: 0; appearance: none; font: 12px var(--font); color: #222; cursor: pointer; vertical-align: top; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 0h8L4 4z' fill='%237B7B7B'/%3E%3C/svg%3E") no-repeat right 6px center; } select.scn-sel:disabled { color: #999; background-color: #F4F4F4; cursor: default; } select.scn-sel.scn-opsel { width: 31px; padding: 0 0 0 1px; border: 0; background-color: transparent; background-position: right 4px center; } .scn-acts { margin-top: 20px; padding-bottom: 13px; } .scn-comp { position: relative; width: fit-content; min-height: 57px; margin-bottom: 16px; padding: 16px 24px 14px; border: 1px solid rgba(193, 193, 193, .3); font-size: 12px; } .scn-ctitle { height: 18px; margin-bottom: 10px; font: bold 12px/18px var(--font); letter-spacing: .25px; color: #000; } /* the close mark: a grey disc with a white cross (the clone's drawing) */ .scn-x { position: absolute; top: 8px; right: 8px; width: 14px; height: 14px; border-radius: 50%; background: #BDBDBD; cursor: pointer; } .scn-x::before, .scn-x::after { content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 2px; background: #fff; transform: rotate(45deg); } .scn-x::after { transform: rotate(-45deg); } .scn-x:hover { background: #999; } .scn-small .scn-cbody { width: 252px; min-height: 31px; } .scn-clbl { height: 14px; font-size: 12px; line-height: 14px; letter-spacing: .12px; color: #767676; white-space: nowrap; } .scn-clbl.t { height: 18px; padding-bottom: 4px; } .scn-clbl.s { height: 16px; padding-bottom: 2px; } .scn-clbl.c { height: 20px; padding-bottom: 6px; } .scn-clbl.mt { margin-top: 10px; height: 20px; padding-bottom: 6px; } .scn-small .scn-clbl:not(.mt) { height: 20px; padding-bottom: 6px; } .scn-crow { height: 29px; } .scn-crow.w10 { height: 31px; } .scn-crow.n { height: 27px; } .scn-crow.s { height: 37px; } .scn-who { display: flex; gap: 16px; } textarea.scn-text { display: block; width: 392px; height: 65px; min-height: 0; padding: 2px; resize: both; font-size: 12px; } input.scn-subj { width: 390px; font-size: 12px; } input.scn-url { width: 576px; font-size: 12px; } .scn-hook .scn-clbl { height: 22px; padding-bottom: 8px; } .scn-task { padding-bottom: 10px; } .scn-notify { padding-bottom: 30px; } .scn-alert { position: relative; margin: 11px 0 8px; padding: 10px 10px 10px 28px; border: 1px solid #E2F4FF; border-radius: 3px; background: #ECF8FF; font-size: 12px; line-height: 14px; color: #222; } .scn-alert p { width: 352px; } .scn-alert p.k { margin-top: 14px; } .scn-alert p.ex { padding: 8px 0; color: #9B9B9B; font-style: italic; } .scn-alert .scn-info { top: 11px; } .scn-places { max-height: 320px; overflow: auto; } .scn-mass { width: 388px; height: 21px; margin-top: 6px; font-size: 11px; line-height: 14px; white-space: nowrap; } .scn-ri { display: flex; align-items: flex-start; height: 30px; } .scn-rad { display: inline-flex; align-items: center; height: 16px; margin-top: 2px; font-size: 12px; white-space: nowrap; cursor: pointer; } .scn-rad input { width: 13px; height: 13px; margin: 0 3px 0 0; } .scn-rad .lb.w33 { display: inline-block; width: 33px; } .scn-rad .lb.w27 { display: inline-block; width: 27px; } .scn-ri input.scn-num { width: 46px; margin: 2px 0 0 10px; text-align: right; font-size: 12px; } .scn-ri select.scn-sel { margin: 2px 0 0 8px; } .scn-ri .date { margin: 2px 0 0 10px; } .scn-delay { margin-top: 30px; } .scn-delay .scn-stitle { margin-bottom: 14px; } .scn-ri.d1 { height: 18px; } .scn-ri.d2 { height: 21px; margin-top: 6px; } .scn-ri.d2 input.scn-num { margin: 0 0 0 16px; } .scn-ri.d2 select.scn-sel { margin: 0 0 0 8px; } .scn-conds { margin-top: 40px; padding-bottom: 13px; } .scn-cond { background: #F7F7F7; } .scn-cbody.h { display: flex; gap: 16px; padding-right: 16px; margin-bottom: 6px; } .scn-ccol { height: 51px; } .scn-ccol .scn-cbw input { margin-top: 4px; } .scn-vsel { display: flex; gap: 16px; margin-right: 3px; } .scn-op { height: 24px; margin-bottom: 10px; } .scn-op.in { margin-left: 20px; } .scn-cgroup { margin: 0 0 24px; border: 1px dashed #BFBFBF; } .scn-cgroup .scn-comp { margin: 16px 20px; } .scn-gfoot { display: flex; justify-content: space-between; margin: 15px 20px 19px; } .scn-gfoot a { color: var(--link); text-decoration: none; border-bottom: 1px dashed; } .scn-cbtns { display: flex; gap: 10px; } .scn-change .scn-cbody { min-width: 0; } .scn-sub { position: relative; margin-bottom: 16px; padding: 12px 12px 0 16px; border: 1px solid rgba(193, 193, 193, .3); background: #F8F8F8; } .scn-chrow { display: flex; gap: 16px; height: 51px; margin-bottom: 6px; } .scn-addprop { margin-bottom: 13px; } .scn-log { margin-top: 50px; } .scn-ltitle { height: 22px; font: 18px/22px var(--font); color: #222; } table.grid.lg.scn-lt { margin: 10px 0 0 -10px; } table.grid.lg.scn-lt th:first-child, table.grid.lg.scn-lt td.f { padding-left: 10px; } table.grid.lg.scn-lt td.acts { padding-top: 2px; vertical-align: top; } table.grid.lg.scn-lt th.gear { padding-right: 7px; } /* the column 29 px, as the original's */ .scn-la { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 15px; } .scn-la.err { color: #E2453C; } .scn-lpager { margin-top: 5px; } /* «Цепочки» of the list (31.10.2026) and the scenario editor's chains note */ .scn-chns { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.scn-more { color: #5F6D79; text-decoration: none; border-bottom: 1px dashed #5F6D79; } .scn-chnote { position: relative; width: 659px; box-sizing: border-box; margin-top: 12px; padding: 8px 10px 8px 28px; border: 1px solid #FFE3A8; border-radius: 2px; background: #FFF8E5; font-size: 12px; line-height: 16px; color: #222; } .scn-chnote p { margin: 0; } .scn-chnote p.k { margin-top: 6px; } .scn-chnote .scn-info { background: #E0A100; } /* «Цепочки сценариев» (scenariochains.js; 31.10.2026): the empty state — the original's at 1440 px (its dump: the block from x 176, the heading at y 487, the button 366 × 72, the links 24 px under it); the table, the editor drawer — the clone's, in the original's new look (a guess) */ .chn-empty { display: flex; align-items: center; min-height: 524px; padding: 0 0 0 151px; } .chn-empty-c { width: 700px; } .chn-empty h1 { margin: 0 0 40px; font: 700 32px/38px var(--font-new); color: #091739; } .chn-empty p { margin: 0 0 32px; font: 14px/20px var(--font-new); color: #091739; } .chn-empty-add { display: inline-flex; align-items: center; gap: 16px; height: 72px; padding: 0 24px; border: 0; border-radius: 12px; background: #CCE2F8; font: 20px/24px var(--font-new); color: #091739; cursor: pointer; } .chn-empty-add:disabled { opacity: .5; cursor: default; } .chn-empty-plus { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #036CE5; } .chn-empty-links { display: flex; gap: 32px; margin-top: 24px; } .chn-empty-links a { font: 14px/20px var(--font-new); color: #036CE5; text-decoration: none; } .chn-empty-links a:hover { text-decoration: underline; } table.scn-t.chn-t tr.chn-sub td { box-shadow: none; } table.scn-t.chn-t tr.chn-sub:last-child td, table.scn-t.chn-t tr.chn-sub + tr.chn-row td { box-shadow: inset 0 -1px 0 #F0F3F8; } table.scn-t.chn-t tr.chn-sub + tr.chn-row td { box-shadow: inset 0 -1px 0 #F0F3F8, inset 0 1px 0 #F0F3F8; } td.chn-n { padding-left: 12px; color: #5F6D79; } .chn-nm { display: flex; align-items: center; gap: 8px; min-width: 0; } .chn-nm a.chn-name { flex: 0 1 auto; min-width: 0; font-weight: 500; } .chn-badge { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 4px; font-size: 12px; line-height: 20px; } .chn-badge.on { background: #DDF7EA; color: #0B7A4B; } .chn-badge.off { background: #EDF0F4; color: #5F6D79; } .chn-badge.warn { background: #FFF0D6; color: #A85E00; cursor: help; } .chn-step { display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 16px; } .chn-step a.scn-name { flex: 0 1 auto; min-width: 0; } .chn-sn { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #EDF0F4; font-size: 12px; line-height: 20px; text-align: center; color: #5F6D79; } .chn-incomp { flex: none; display: inline-flex; color: #E06C00; cursor: help; } .sg-drawer.chn-drawer { left: auto; width: 920px; } .chn-scroll { padding-bottom: 40px; } .chn-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } input.sg-inp.chn-name { width: 520px; font-size: 18px; font-weight: 700; } .chn-err { margin-top: 6px; font: 12px/16px var(--font-new); color: #E50347; } .chn-actrow { margin-top: 16px; } select.chn-act { height: 32px; padding: 0 28px 0 12px; border: 1px solid #D1D6DF; border-radius: 8px; background-color: #DDF7EA; font: 14px var(--font-new); color: #0B7A4B; } select.chn-act.off { background-color: #EDF0F4; color: #5F6D79; } select.chn-act:disabled { opacity: .7; } .chn-steps { margin-top: 20px; padding: 20px; } .chn-stepw { position: relative; display: flex; gap: 16px; padding-bottom: 20px; } .chn-stepw:not(:last-of-type)::before { content: ""; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; background: #E3E8F0; } .chn-num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #EDF0F4; font: 600 14px/28px var(--font-new); text-align: center; color: #5F6D79; } .chn-num.set { background: #036CE5; color: #fff; } .chn-stepc { flex: 1; min-width: 0; } .chn-hint { margin-bottom: 8px; font: 12px/16px var(--font-new); color: #5F6D79; white-space: pre-line; } .chn-prow { display: flex; align-items: center; gap: 8px; } .chn-pick { position: relative; width: 520px; height: 32px; padding: 0 36px 0 12px; border: 1px solid #D1D6DF; border-radius: 8px; background: #fff; text-align: left; font: 14px var(--font-new); color: #091739; cursor: pointer; } .chn-pick.empty { color: #9FA7AF; } .chn-pick .t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chn-x { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: #5F6D79; cursor: pointer; } .chn-x:hover { background: #EDF0F4; } .chn-info { width: 520px; box-sizing: border-box; margin-top: 8px; padding: 12px; border-radius: 8px; background: #F7F9FB; font: 13px/18px var(--font-new); } .chn-irow { display: flex; gap: 12px; } .chn-irow + .chn-irow { margin-top: 4px; } .chn-irow .l { flex: none; width: 90px; color: #5F6D79; } .chn-irow .v { flex: 1; min-width: 0; } .chn-warn { display: flex; gap: 8px; width: 520px; box-sizing: border-box; margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: #FFF0D6; font: 12px/16px var(--font-new); color: #7A4500; } .chn-warn.bad { background: #FDE2E8; color: #A3002E; } .chn-warn .ic { flex: none; } .chn-more { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-left: 44px; padding: 0 12px; border: 1px solid #036CE5; border-radius: 8px; background: none; font: 14px var(--font-new); color: #036CE5; cursor: pointer; } .chn-more:disabled { border-color: #D1D6DF; color: #9FA7AF; cursor: default; } .chn-pop { position: absolute; z-index: 70; box-sizing: border-box; max-width: 600px; padding: 8px; border-radius: 8px; background: #fff; box-shadow: 0 4px 16px rgba(9, 23, 57, .2); font: 14px/20px var(--font-new); color: #091739; } input.sg-inp.chn-q { width: 100%; } .chn-chips { display: flex; gap: 8px; margin: 8px 0; } .chn-list { max-height: 300px; overflow: auto; } .chn-opt { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: 6px; cursor: pointer; } .chn-opt:hover { background: #F1F4F9; } .chn-opt.sel { background: #E4F1FA; } .chn-opt.dis { color: #9FA7AF; cursor: default; } .chn-opt .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chn-off { flex: none; font-size: 12px; color: #9FA7AF; } .chn-none { padding: 6px 8px; color: #9FA7AF; } .chn-ask { font-size: 13px; white-space: pre-line; } .chn-limit { font-size: 13px; } .chn-limit ul { margin: 0 0 10px; padding-left: 18px; font-weight: bold; } .chn-limit p { margin: 0; } /* ================================================================ «Розница» (retail.js, retailpay.js; the original's cards and lists at 1440 px, 30.10.2026) */ /* what a sale (a return, cash in or out) takes from its shift: grey rows under «Канал продаж» (the original's selectorRow: names 100 px, rows 19) */ .selrows { display: flex; flex-direction: column; margin: -1px 0 0 -1px; font-size: 12px; line-height: 14px; color: #8C8C8C; } .selrow { display: flex; height: 19px; white-space: nowrap; } .selrow .n { flex: none; width: 100px; } .selrow .v { max-width: 300px; overflow: hidden; text-overflow: ellipsis; } /* «Способ оплаты» / «Возврат денег»: a 14 px line 20 px under the subtotal, the way's button 75 × 26 over it (10 px higher), its arrow 9 × 4 */ .ototals .ot-pay { position: relative; height: 14px; margin-top: 20px; line-height: 14px; } .ototals .ot-pay .rp-label { padding-left: 10px; } .rp-way { position: absolute; right: 0; top: -10px; display: inline-flex; align-items: center; box-sizing: border-box; height: 26px; min-width: 75px; padding: 0 11px; border: 1px solid #BFBFBF; border-radius: 2px; background: linear-gradient(#FFF, #F2F2F2); font: 12px var(--font); color: #222; cursor: pointer; } .rp-way { padding: 0 10px; } .rp-way:hover { border-color: #999; } .rp-way .arrow { width: 0; height: 0; margin: 2px 0 0 5px; border-style: solid; border-color: #555 transparent transparent; border-width: 4px 5px 0 4px; } .ototals .rp-mixed { display: block; margin-top: 10px; } .ototals .rp-mixed.hidden { display: none; } .ototals .rp-line { display: flex; align-items: center; height: 21px; padding-left: 10px; } .ototals .rp-line + .rp-line { margin-top: 5px; } .ototals .rp-line .ovh { width: 114px; margin-left: auto; } .ototals .rp-mixed + .ot-vat { margin-top: 18px; } .ototals .ot-total.after-pay { margin-top: 17px; } /* «Кол-во» 40 px under «Прибыль» (a return: no profit line, 40 under «Итого») */ .ototals .ot-pay ~ .ot-gap { height: 40px; } .ototals .ot-pay ~ .ot-profit:empty { display: none; } /* «Точки продаж»: the legal entity's line holds the sums of its points (the group-row of the original, 32 px, its name bold from the first cell) */ table.grid.lg tr.group-row.cells td { height: 32px; background: #EDEDED; font-weight: bold; color: #222; cursor: auto; } table.grid.lg tr.group-row.cells td:first-child { padding-left: 0; } table.grid.lg tr.group-row.cells .gname { position: relative; z-index: 1; padding-left: 10px; overflow: visible; white-space: nowrap; } table.grid.lg tr.group-row.cells .cv { overflow: visible; } /* the shift's card (the original's old form) */ .rs-shift .rs-title { margin: 12px 0 0; } .rs-title .t { flex: none; width: 80px; white-space: nowrap; } .rs-title .date { height: 22px; } .rs-title .date input { height: 19px; margin-top: -1px; } .rs-title .no { box-sizing: border-box; min-width: 62px; margin: 0 5px; text-align: center; } .rs-title .ot { margin: 0 5px 0 0; } .rs-title .rs-dash { width: 10px; margin: 0 5px; text-align: center; } .rs-head { display: flex; align-items: flex-start; } .rs-params { flex: none; width: 454px; } .rs-sec { height: 18px; margin: 25px 0 15px; font-size: 16px; line-height: 18px; color: #CC420C; } .rs-row { display: flex; align-items: flex-start; min-height: 21px; } .rs-row + .rs-row, .rs-sub + .rs-row, .rs-row + .rs-sub { margin-top: 10px; } .rs-lbl { position: relative; flex: none; box-sizing: border-box; width: 154px; padding-right: 10px; margin-top: 3px; line-height: 14px; white-space: nowrap; } .rs-lbl.req::after { content: "*"; color: #FF4444; margin-left: 2px; } .rs-ctl { display: flex; flex-direction: column; align-items: flex-start; } .rs-acc { margin-top: 5px; } .rs-acc.hidden { display: none; } .rs-sub { height: 20px; font-size: 15px; font-weight: 700; line-height: 20px; } .rs-line { display: inline-flex; align-items: flex-start; } .rs-line .rs-unit { margin-top: 4px; } .rs-row:has(.rs-line .btn) { min-height: 28px; } .rs-pct, .rs-com { box-sizing: border-box; width: 114px; height: 21px; } .rs-unit { margin-left: 0; } .rs-line .btn { margin: -3px 0 0 10px; } .rs-proceeds { flex: none; width: 348px; } .rs-proceeds .rs-sec { margin-bottom: 10px; } .rs-p { display: flex; width: 250px; height: 15px; font-size: 13px; line-height: 15px; } .rs-p .l { width: 150px; } .rs-p .v { width: 100px; margin-left: auto; text-align: right; } .rs-p + .rs-p { margin-top: 4px; } .rs-p.sub { box-sizing: border-box; padding-left: 16px; } .rs-p.sub .l { width: 134px; } .rs-p + .rs-p.sub { margin-top: 5px; } .rs-p.sub + .rs-p.sub { margin-top: 9px; } .rs-pline { width: 250px; height: 1px; margin: 10px 0 9px; background: #DDD; } .rs-p.total { font-weight: 700; } .rs-comment { box-sizing: border-box; display: block; width: 338px; height: 64px; margin-top: 19px; } .rs-shift .rs-tabs .tabs-old { margin-top: 0; } .rs-shift .rs-tabs { margin-top: 20px; } .rs-cloud { display: flex; align-items: center; gap: 5px; width: max-content; height: 15px; margin-top: 17px; line-height: 14px; } .rs-cloud input[type=checkbox] { width: 13px; height: 13px; margin: 0; border-radius: 2px; background-size: 9px; } .rs-subtabs { display: flex; margin-top: 15px; } .rs-subtabs .btn { height: 28px; padding: 0 10px; border-radius: 0; } .rs-subtabs .btn + .btn { margin-left: -1px; } .rs-subtabs .btn:first-child { border-radius: 2px 0 0 2px; padding: 0 9px 0 12px; } .rs-subtabs .btn:last-child { border-radius: 0 2px 2px 0; } .rs-subtabs .btn.on { background: #E0E0E0; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); } .rs-docs-table { margin: 13px 0 0 -10px; } table.grid.lg.rs-grid thead th { position: static; } table.grid.lg.rs-grid th:first-child, table.grid.lg.rs-grid td:first-child { padding-left: 10px; } table.grid.lg.rs-foot { position: static; } table.grid.lg.rs-foot th { height: 12px; padding: 7px 0 0; line-height: 12px; font-weight: 700; } table.grid.lg.rs-foot th:first-child { position: relative; overflow: visible; } .rs-pager { position: absolute; left: 10px; top: 6px; margin: 0; font-weight: 400; white-space: nowrap; } .rs-shift .rs-tabs + .tk-sec { margin-top: 9px; } .rs-shift .rs-details { margin-top: 27px; } .rs-reps { display: flex; gap: 0; margin-top: 32px; } .rs-reps.hidden { display: none; } .rs-rep { width: 327px; } .rs-rep-h { height: 24px; font-weight: 700; line-height: 14px; } .rs-rep-l { display: flex; height: 19px; line-height: 14px; } .rs-rep-l .l { box-sizing: border-box; width: 150px; padding-left: 15px; color: #8C8C8C; } /* the point of sale's card (the original's editor: labels end at 221 px, fields from 236; the right column at 566) */ .rs-store .rs-etitle { height: 36px; margin-top: 23px; font-size: 20px; font-weight: 700; line-height: 24px; } .rs-store .rs-body { margin-top: 0; } .rs-left { width: 526px; } /* a label: its «?» 10 px before the text, the text right-aligned, wrapped at 150 px */ .rs-store .emp-grid > .lbl { display: flex; justify-content: flex-end; align-items: flex-start; margin-top: 2px; white-space: normal; text-align: right; } .rs-store .emp-grid > .lbl > span:last-child { max-width: 150px; line-height: 14.4px; } .rs-store .emp-grid > .lbl .help, .rs-store .arch .help { width: 15px; height: 15px; margin: 0 10px 0 0; font-size: 10px; } .rs-store .arch .help { margin: 0; } /* a legal entity's account: 5 px under it */ .rs-grid1 > .lbl:empty { height: 0; } .rs-grid1 > .lbl:empty + .ctl { margin-top: -5px; } .rs-store .emp-left .emp-sec.rs-sec2 { height: 17px; margin: 20px 0 10px; line-height: 17px; } .rs-store .emp-left .emp-sec.rs-sec2 ~ .emp-sec.rs-sec2 { margin-top: 35px; } .rs-store .emp-left .emp-sec.rs-sec2 ~ .emp-sec.rs-sec2.pay { margin-top: 55px; } .rs-sub2 { height: 16px; margin: 0 0 10px; font-size: 14px; font-weight: 700; line-height: 16px; } .rs-w250 { box-sizing: border-box; width: 250px; height: 21px; } .rs-w120 { box-sizing: border-box; width: 120px; height: 21px; } .rs-grid1 > .ctl.pct, .rs-grid1.chk > .ctl { align-self: center; } .rs-grid1.chk > .lbl { margin: 2px 0 0; } .rs-grid1.chk input[type=checkbox] { width: 13px; height: 13px; margin: 0; } .rs-right { width: 460px; } .rs-grid2 > .ctl { min-height: 21px; } .rs-desc { box-sizing: border-box; width: 252px; height: 72px; } .rs-grid2 > .ctl.addr .addr-ta { box-sizing: border-box; width: 228px; height: 30px; } .rs-grid2 > .ctl.addr { margin-top: 3px; } .rs-grid2 > .ctl.fias { margin-top: 3px; } .rs-grid2 > .lbl:has(+ .ctl.fias) { margin-top: 5px; } .rs-grid2 > .lbl:has(+ .ctl.cmt) { margin-top: 0; } /* «Кассовые чеки», «Предоплата и авансы» (retailchecks.js; the clone's sizes) */ .rc-radios { display: flex; flex-direction: column; gap: 8px; width: 290px; } .rc-radio { display: grid; grid-template-columns: 18px 1fr; align-items: start; cursor: pointer; } .rc-radio input { margin: 1px 0 0; } .rc-radio .rc-note { grid-column: 2; margin-top: 2px; color: #8C8C8C; font-size: 11px; line-height: 13px; } .rc-grid > .lbl.hidden, .rc-grid > .ctl.hidden, .rc-chosen.hidden, .rc-gift-note.hidden { display: none; } .rc-chosen { margin: 8px 0 0 18px; } .rc-chip { display: flex; align-items: center; width: 228px; height: 21px; } .rc-chip > span:first-child { overflow: hidden; flex: 1; white-space: nowrap; text-overflow: ellipsis; } .rc-chip .rc-x { padding: 0 4px; color: #8C8C8C; cursor: pointer; } .rc-chip .rc-x:hover { color: #E2453C; } .rc-gift { display: flex; flex-direction: column; gap: 4px; } .rc-gift-note { color: #8C8C8C; font-size: 11px; } /* a sale's «Сертификатом» (retailpay.js): laid out as the mixed way's box */ .ototals .rp-gift { display: block; margin-top: 10px; } .ototals .rp-gift.hidden { display: none; } .ototals .rp-gift + .ot-vat { margin-top: 18px; } .ototals .rp-gift .ref { margin-left: auto; } .ototals .rp-gift .rp-grey { margin-left: auto; color: #8C8C8C; } /* several certificates: a group each, × after the choice, «+ Сертификат» (a guess) */ .ototals .rp-card + .rp-card { margin-top: 10px; padding-top: 10px; border-top: 1px solid #EDEDED; } .ototals .rp-card .rp-line + .rp-line, .ototals .rp-gift > .rp-line { margin-top: 5px; } .ototals .rp-gift .rp-line { position: relative; } .ototals .rp-gift .rp-line > .line { margin-left: auto; } .ototals .rp-gift .field-tools { display: none; } .ototals .rp-gift .rp-x { position: absolute; top: 2px; right: -18px; width: 14px; color: #8C8C8C; text-align: center; cursor: pointer; } .ototals .rp-gift .rp-x:hover { color: #E2453C; } .ototals .rp-addline { display: flex; justify-content: flex-end; margin-top: 8px; } .ototals .rp-addline .rp-add { height: 21px; padding: 0 8px; } /* a gift certificate's card (giftcards.js) */ .gc-card .rs-etitle { height: 36px; margin-top: 23px; font-size: 20px; font-weight: 700; line-height: 24px; } .gc-card .gc-ro { line-height: 21px; } .gc-ops { margin-top: 30px; } .gc-table { width: auto; } .gc-table td.gc-none { color: #8C8C8C; } .rs-grid2 > .ctl.fias .inp { box-sizing: border-box; width: 252px; height: 23px; } .rs-grid2 > .lbl:empty + .ctl { margin-top: -10px; } .rs-fias { color: var(--link); line-height: 14px; } /* «Серии» (consignments.js, 31.10.2026): the positions' «Партия» column (its picker in the cell), the series dialog, the card's barcodes */ table.pgrid2 td.seria, .ogrid td.seria { overflow: visible; } table.pgrid2 th.seria .hd { display: flex; align-items: center; gap: 4px; } .ogrid th.seria .sh { display: inline-flex; align-items: center; gap: 4px; } .cons-help { width: 15px; height: 15px; font-size: 10px; } .cons-pick { white-space: nowrap; } .cons-pick .field-tools { margin-left: 4px; } .cons-dlg .cons-good { margin: 0 0 12px; line-height: 16px; } .cons-dlg .cons-good .k { color: #8C8C8C; margin-right: 10px; } .cons-dlg .emp-grid { grid-template-columns: 90px max-content; } .cons-card .cons-ro, .cons-card .cons-name, .cons-card .cons-goodlink { line-height: 21px; } .cons-bcs { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .cons-bc { display: flex; align-items: center; gap: 6px; } .cons-bc .field-tools { display: none; } .cons-bc-x { cursor: pointer; color: #999; font: bold 14px Arial, sans-serif; } /* «Начисление зарплаты» and «Оплата труда» (payroll.js, 31.10.2026; the original's editor was not seen open: its GWT columns — 270 and 150 px — on the production cards' look, a guess) */ .pr-period .ot { margin: 0 6px; color: #888; } .pr-main .pr-grid, .pr-main .obar.pp-bar { width: 781px; } .pr-main .obar.pp-bar { display: flex; align-items: center; gap: 8px; } .pr-main .pr-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .pr-main .pr-count { color: #888; font-size: 12px; } .pr-main .pr-grid td.cb, .pr-main .pr-grid th.cb { padding-left: 8px; } .pr-main .pr-grid tr.sel td { background: #E4F1FA; } .pr-main .pr-grid .pr-foot td { height: 30px; } .pr-main .g { color: #888; } .pr-pick { display: flex; flex-direction: column; gap: 8px; } .pr-pick-list { max-height: 360px; overflow: auto; border: 1px solid #E4E4E4; } .pr-pay { display: flex; flex-direction: column; gap: 10px; font-size: 13px; } .pr-kinds { display: flex; gap: 16px; } .pr-pay-t, .pr-ops-t { width: 100%; } .pr-pay-sum { text-align: right; } .pr-ops { display: flex; flex-direction: column; gap: 10px; max-height: 520px; overflow: auto; font-size: 13px; } .pr-lnk { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; color: #186999; text-align: left; } /* «Настройка шаблонов» («Настроить...» of the print menus, printsettings.js, 31.10.2026): the original's CSS — the title (b-right-popup-title2), the groups' titles (b-print-template-type), the columns of its TemplateTable (drag 10, «Видим.» 40, name 250, «Скачать» 70, × 16), downloadLink, the upload button; the hint and the rest — the clone's */ .dsp.pts { width: min(670px, 100%); } .pts-head { display: flex; align-items: flex-start; justify-content: space-between; min-height: 37px; } .pts-title { display: inline-block; margin: 15px 0 0; font-size: 20px; line-height: 22px; color: #222; } .pts-who { margin-top: 15px; } .pts-hint { position: relative; margin: 15px 0 0; padding: 7px 26px 9px 28px; background: #ECF8FF; border: 1px solid #E2F4FF; line-height: 16px; color: #222; } .pts-hint .i { position: absolute; left: 8px; top: 9px; width: 11px; height: 11px; border-radius: 50%; background: var(--link); color: #fff; font: bold 8px/11px Arial, sans-serif; text-align: center; } .pts-hint .x { position: absolute; right: 9px; top: 4px; color: #848585; font-size: 13px; line-height: 13px; cursor: pointer; } .pts-group { margin-top: 13px; } .pts .b-print-template-type { font-weight: bold; font-size: 15px; line-height: 18px; margin-top: 13px; color: #222; } table.pts-tbl { border-collapse: collapse; table-layout: fixed; width: 386px; max-width: 100%; margin-top: 8px; } table.pts-tbl col.drag { width: 10px; } table.pts-tbl col.enabled-col { width: 40px; } table.pts-tbl col.name-col { width: 250px; } table.pts-tbl col.download-col { width: 70px; } table.pts-tbl col.kill-col { width: 16px; } table.pts-tbl th { padding: 0 0 6px; text-align: left; font-weight: normal; font-size: 11px; color: #222; border-bottom: 1px solid var(--link); } table.pts-tbl td { height: 30px; padding: 0 0 0 3px; color: #222; border-bottom: 1px solid #BFBFBF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } table.pts-tbl tbody tr:last-child td { border-bottom: 1px solid var(--link); } table.pts-tbl .enabled-col, table.pts-tbl .download-col { text-align: center; padding: 0; } table.pts-tbl td.drag, table.pts-tbl td.kill-col { padding: 0; } table.pts-tbl td.drag[draggable] { cursor: move; } table.pts-tbl tr:hover td.drag[draggable] { background: radial-gradient(circle, #999 1px, transparent 1.5px) 1px 9px / 4px 4px; background-clip: content-box; padding: 6px 1px; } table.pts-tbl td.name-col.ed { cursor: text; } table.pts-tbl td.kill-col .x { visibility: hidden; display: block; text-align: center; color: #848585; font-size: 15px; cursor: pointer; } table.pts-tbl tr:hover td.kill-col .x { visibility: visible; } table.pts-tbl tr.dragging td { opacity: .5; } table.pts-tbl tr.drop td { box-shadow: inset 0 2px 0 var(--link); } table.pts-tbl tr.none td { color: #999; } .pts-in { width: calc(100% + 3px); height: 24px; box-sizing: border-box; margin-left: -3px; padding: 0 3px; border: 1px solid #BBB; font: inherit; } .pts .downloadLink { color: #186999; } .pts .downloadLink:hover { color: #f88001; } .upload-template-btn-container { margin-top: 20px; } .btn.pts-add { padding: 5px 13px; border: 1px solid #ccc; border-radius: 3px; background: linear-gradient(#fff, #e6e6e6); color: #333; } .btn.pts-add:hover { background: linear-gradient(#fff, #f7f7f7); }