/* шрифти класичного інтерфейсу Creatio (Bpmonline Open Sans — вужчий за Google Open Sans; зняті з udc.creatio.com/core/hash/Fonts) */
@font-face { font-family: 'Bpmonline Open Sans'; src: url(/fonts/BpmonlineOpenSans.woff) format('woff'); font-display: swap; }
@font-face { font-family: 'Bpmonline Open Sans Bold'; src: url(/fonts/BpmonlineOpenSans-Bold.woff) format('woff'); font-display: swap; }
@font-face { font-family: 'Bpmonline Open Sans Light'; src: url(/fonts/BpmonlineOpenSans-Light.woff) format('woff'); font-display: swap; }
/* Класичний інтерфейс Creatio 7.x (Дизайнер системи, розділи адміністрування). Шрифт — Open Sans («Bpmonline Open Sans»). */
.cl-intro, .cl-sec, .cl-card { font-family: 'Bpmonline Open Sans', Arial, sans-serif; color: #444; }
.cl-intro { display: flex; background: #fff; min-height: 100%; }
.cl-intro-l { width: 610px; padding: 15px 0 40px 20px; box-sizing: border-box; }
.cl-logo { position: relative; height: 65px; padding-left: 10px; }
.cl-logo-t { font: 600 30px/37px Montserrat, sans-serif; color: #ff4013; }
.cl-logo-t b { font-weight: 400; color: #0d2e4e; font-size: 22px; }
.cl-ver { position: absolute; left: 113px; top: 38px; font: 10px 'Bpmonline Open Sans', sans-serif; color: #999; }
.cl-sdg { position: relative; padding: 3px 0 27.5px 60px; }
.cl-sdg-ic { position: absolute; left: 0; top: 0; width: 42px; height: 39px; object-fit: contain; }
.cl-sdg-t { font: 24px/33px 'Bpmonline Open Sans Light', sans-serif; margin-bottom: 7px; }
.cl-sdg-l { display: flex; align-items: flex-start; gap: 8px; height: 31.5px; padding-left: 1px; }
.cl-new { margin-top: 3px; }
.cl-sdg-l a { font: 16px/22px 'Bpmonline Open Sans', sans-serif; color: #4e7bd8; cursor: pointer; text-decoration: none; }
.cl-sdg-l a:hover { text-decoration: underline; }
.cl-sdg-l a.dis { color: #4e7bd8; opacity: .55; }
.cl-new { width: 37px; height: 18px; }
.cl-intro-r { padding-top: 72px; flex: 1; max-width: 560px; }
/* віджет Marketplace (SystemDesigner: links-iframe-container, iframe 560×350 з marketplace.creatio.com) */
.cl-ir-mp { height: 353px; }
.cl-ir-mp iframe { width: 560px; height: 350px; border: 0; display: inline; }
.cl-ir-cap { font: 13px/18px 'Bpmonline Open Sans Light', sans-serif; color: #999; margin-bottom: 3px; }
.cl-ir-l { display: flex; align-items: center; gap: 12px; height: 39px; margin-bottom: 20px; font: 16px/22px 'Bpmonline Open Sans', sans-serif; color: #4e7bd8; text-decoration: none; }
.cl-ir-l img { width: 36px; height: 36px; }
/* розділ */
.cl-sec { background: #fff; min-height: 100%; }
.cl-hdr { display: flex; align-items: center; height: 64px; padding-left: 20px; background: #fff; }
.cl-cap { font: 26px/51px 'Bpmonline Open Sans Light', sans-serif; color: #444167; margin-right: 23px; align-self: flex-start; }
.cl-hico { width: 39px; height: 39px; margin: 10px 8px 0 0; cursor: pointer; background: no-repeat 0 0; align-self: flex-start; } /* спрайт 38×79: звичайний / активний */
.cl-hico.on, .cl-hico:hover { background-position: 0 -41px; }
.cl-acts { display: flex; align-items: center; height: 30px; padding: 0 20px; gap: 9px; }
.cl-acts .sp { flex: 1; }
.cl-btn { display: inline-flex; align-items: center; height: 30px; box-sizing: border-box; padding: 0 12px 0 11px; border: 1px solid transparent; border-radius: 2px; font: 15px/18px 'Bpmonline Open Sans', sans-serif; letter-spacing: -.2px; text-transform: uppercase; color: #006ce0; cursor: pointer; user-select: none; white-space: nowrap; }
.cl-btn.green { background: #22ac14; color: #fff; padding-right: 0; }
.cl-btn.blue { background: #006ce0; color: #fff; }
.cl-btn:not(.green):not(.blue):hover { background: #f2f6fc; }
.cl-mk { display: inline-block; width: 0; height: 0; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-top: 4.5px solid #4d6a98; margin: 0 7.5px 0 8px; }
.cl-btn:has(.cl-mk) { padding-right: 0; }

.cl-mk.w { border-top-color: #fff; }
.cl-mk.g { border-left-width: 4px; border-right-width: 4px; border-top-width: 4px; margin-left: 9px; }
.cl-utils { display: flex; align-items: center; gap: 16px; height: 43px; padding: 0 20px; }
.cl-filter { display: inline-flex; align-items: center; gap: 7px; font: 14px/15px 'Bpmonline Open Sans', sans-serif; color: #444; cursor: pointer; margin-top: 6px; }
.cl-filter img { width: 16px; height: 16px; }
.cl-search { height: 26px; border: 0; border-bottom: 1px solid #c8c8c8; outline: 0; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; width: 260px; margin-top: 6px; }
.cl-grid { padding: 0 20px 20px; }
.cl-gcap { display: flex; height: 28px; align-items: center; }
.cl-gcap label { box-sizing: border-box; padding-right: 10px; font: 12.992px/22px 'Bpmonline Open Sans', sans-serif; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-row { display: flex; align-items: center; min-height: 30px; margin: 0 -20px; padding: 0 20px; cursor: pointer; }
.cl-row.alt { background: #f7f7f7; }
.cl-row:hover { background: #eef3fb; }
.cl-cell { box-sizing: border-box; padding: 5px 10px 6px 0; font: 14px/19.6px 'Bpmonline Open Sans', sans-serif; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-cell .lnk { color: #4e7bd8; }
.cl-nodata { padding: 20px 0; text-align: center; font: 14px 'Bpmonline Open Sans', sans-serif; color: #999; }
.cl-nodata.l { text-align: left; padding: 10px 0 10px 4px; }
/* сторінка запису */
.cl-card { background: #ebeeef; min-height: 100%; display: flex; flex-direction: column; }
.cl-chdr { background: #ebeeef; padding: 16px 20px 0 20px; height: 106px; box-sizing: border-box; }
.cl-ccap { font: 500 20px/26px 'Bpmonline Open Sans', sans-serif; color: #444; padding-left: 5px; }
.cl-cbtns { display: flex; gap: 9px; margin-top: 14px; }
.cl-cbtns .cl-btn:not(.blue) { padding: 0 20px; }
.cl-cbody { padding: 8px 8px 8px; display: flex; flex-direction: column; gap: 8px; }
.cl-profile { position: relative; display: flex; background: #fff; border-bottom: 1px solid #e6e6e6; padding: 21px 0 25px 78px; min-height: 202px; box-sizing: border-box; }
.cl-photo { position: absolute; left: 41px; top: 41px; width: 72px; height: 72px; overflow: hidden; }
.cl-photo img { width: 72px; height: 72px; }
.cl-pcol { width: 50%; display: flex; flex-direction: column; gap: 4px; }
.cl-pcol + .cl-pcol { padding-left: 18px; }
.cl-field { display: flex; align-items: center; min-height: 28px; }
.cl-flabel { flex: none; box-sizing: border-box; margin-right: 14px; text-align: right; font: 13px/18px 'Bpmonline Open Sans', sans-serif; color: #999; }
.cl-flabel { position: relative; }
.cl-flabel.req::after { content: '*'; color: #e14a4a; position: absolute; right: -8px; top: -2px; }
.cl-edit { flex: none; width: 305px; height: 28px; box-sizing: border-box; border-bottom: 1px dotted #c8c8c8; display: flex; align-items: center; }
.cl-edit input::placeholder { color: #444; opacity: 1; }
.cl-edit input { width: 100%; height: 26px; border: 0; outline: 0; padding: 0 11px 0 1px; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; background: transparent; }
.cl-field.dis .cl-edit input { color: #999; }
.cl-elink { padding-left: 1px; font: 14px/26px 'Bpmonline Open Sans', sans-serif; color: #4e7bd8; text-decoration: none; }
.cl-cb { display: inline-block; width: 16px; height: 16px; box-sizing: border-box; border: 1px solid #b4c1d2; border-radius: 2px; background: #fff; cursor: pointer; flex: none; }
.cl-cb.on { background: #4d7ad7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8l3 3 5-6' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/14px no-repeat; border-color: #4d7ad7; }
.cl-tabbox { background: #fff; min-height: 512px; padding-top: 14px; }
.cl-tabs { display: flex; align-items: stretch; height: 32px; border-bottom: 1px solid #dbdbdb; margin: 0 1px; }
.cl-tscroll { width: 30px; flex: none; }
.cl-tabs ul { display: flex; gap: 20px; margin: 0 0 0 8px; padding: 0; list-style: none; flex: 1; }
.cl-tabs li { padding: 0 5px !important; }
.cl-tabs li { padding: 0 0; height: 32px; box-sizing: border-box; font: 14px/30px 'Bpmonline Open Sans', sans-serif; text-transform: uppercase; color: #4e7bd8; cursor: pointer; white-space: nowrap; }
.cl-tabs li.on { color: #444; border-bottom: 3px solid #ff4013; }
.cl-tabc { padding: 16px 20px 20px 21px; }
.cl-group { margin-bottom: 18px; }
.cl-group-h { display: flex; align-items: center; gap: 9px; height: 24px; cursor: pointer; margin: 0 0 2px -4px; }
.cl-gmark { width: 24px; height: 24px; background: url(/img/sd/arrow_group.svg) 0 -24px no-repeat; } /* спрайт: згорнуто / розгорнуто */
.cl-group.closed .cl-gmark { background-position: 0 0; }
.cl-gtitle { font: 15px/22px 'Bpmonline Open Sans', sans-serif; color: #4e7bd8; }
.cl-ginfo { width: 24px; height: 24px; background: url(/img/sd/InformationButton-DefaultIcon.png) 0 0 no-repeat; margin-left: -9px; }
.cl-ginfo:hover { background-position: 0 -24px; }
.cl-glink { font: 14px 'Bpmonline Open Sans', sans-serif; color: #006ce0; margin-left: 24px; text-transform: none; }
.cl-group-b { padding-left: 0; display: flex; flex-direction: column; gap: 4px; }

.cl-radios { display: flex; align-items: center; gap: 4px; height: 30px; margin: 0 0 2px 33px; font: 14px 'Bpmonline Open Sans', sans-serif; }
.cl-radios label { margin-right: 29px; } .cl-radios label.dis { color: #b3b3b3; }
.cl-radio { width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box; border: 1px solid #b4c1d2; background: #fff; }
.cl-radio.on { border: 5px solid #4d7ad7; }
.cl-radio.dis { background: #f2f2f2; }
.cl-passbar { display: flex; align-items: center; gap: 14px; margin: 4px 0 4px 150px; }
.cl-hint { font: 13px 'Bpmonline Open Sans', sans-serif; color: #999; }
.cl-dgrid { padding: 0 0 0 4px; }
.cl-dgrid .cl-row { margin: 0; padding: 0 4px; cursor: default; }
.cl-lic { display: flex; align-items: center; gap: 10px; height: 51px; border-bottom: 1px solid #f0f0f0; font: 14px 'Bpmonline Open Sans', sans-serif; }
.cl-lic-n { flex: 1; }
.cl-lic-c { width: 520px; color: #444; }
/* ролі: комбінований режим (дерево 511px + картка) */
.cl-roles { font-family: 'Bpmonline Open Sans', Arial, sans-serif; color: #444; background: #ebeeef; min-height: 100%; display: flex; flex-direction: column; }
.cl-rhdr, .cl-racts { display: flex; }
.cl-rhdr { height: 56px; }
.cl-rleft { width: 511px; flex: none; display: flex; align-items: flex-start; padding-left: 20px; box-sizing: border-box; background: #fff; }
.cl-rright { flex: 1; padding-left: 33px; }
.cl-rhdr .cl-rright { padding-top: 16px; }
.cl-racts { height: 30px; }
.cl-racts .cl-rleft { align-items: center; gap: 9px; }
.cl-racts .cl-rright { padding-left: 29px; display: flex; align-items: center; }
.cl-tool { width: 35px; height: 30px; box-sizing: border-box; border: 1px solid #b4c1d2; border-radius: 2px; display: grid; place-items: center; cursor: pointer; background: #fff; }
.cl-rbody { flex: 1; display: flex; min-height: 0; }
.cl-tree { width: 511px; flex: none; background: #fff; border-bottom: 1px solid #e6e6e6; padding-top: 16px; box-sizing: border-box; overflow: auto; }
.cl-trow { display: flex; align-items: center; height: 30px; margin-bottom: 1px; cursor: pointer; }
.cl-trow.alt { background: #f7f7f7; }
.cl-trow.sel { background: #e4ebfa; }
.cl-tgl { width: 16px; height: 16px; flex: none; margin-right: 14px; background: center no-repeat; }
.cl-tgl.minus { background-image: url(/img/sd/minus.svg); } .cl-tgl.plus { background-image: url(/img/sd/plus.svg); }
.cl-tname { font: 14px/19.6px 'Bpmonline Open Sans', sans-serif; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-rcard { flex: 1; min-width: 0; padding: 28px 8px 8px; display: flex; flex-direction: column; gap: 8px; }
.cl-rprof { background: #fff; border-bottom: 1px solid #e6e6e6; padding: 21px 0 25px 21px; }
.cl-tabbox.r { min-height: 640px; }
.cl-dtool { width: 16px; height: 16px; margin-left: 9px; cursor: pointer; }
.cl-dgrid.w { padding: 0 0 0 28px; }
.cl-dgrid.w .cl-gcap { border-bottom: 1px solid #e0e0e0; }
.cl-dgrid.w .cl-gcap label { padding-left: 6px; }
.cl-dgrid.w .cl-cell { padding-left: 6px; }
.cl-dgrid .lnk { color: #4e7bd8; text-decoration: none; }
.cl-sorta { display: inline-block; width: 16px; height: 16px; margin-left: 5px; vertical-align: -4px; background: url(/img/sd/sort-direction.png) 0 -16px no-repeat; }
.cl-lmwrap { padding: 0 0 26px; margin-left: -30px; }
.cl-loadmore { display: inline-block; position: relative; margin-left: 35%; padding: 4.62px 9.8px 5.46px 34.02px; font: 14px/16.8px 'Bpmonline Open Sans', sans-serif; color: #444; cursor: pointer; }
.cl-loadmore img { position: absolute; left: 12px; top: 5px; width: 16px; height: 16px; }

.cl-hicos { margin-left: auto; padding-right: 20px; display: flex; }
.cl-hicos .cl-hico { margin-right: 9px; } .cl-hicos .cl-hico:last-child { margin-right: 0; }
.cl-rhdr .cl-rright { position: relative; }
.cl-tsect { position: absolute; right: 2px; top: 0; width: 24px; height: 24px; display: grid; place-items: center; color: #757575; cursor: pointer; }
.cl-roles.wide .cl-rleft:not(:has(.cl-cap)), .cl-roles.wide .cl-tree { display: none; }
.cl-roles.wide .cl-rhdr .cl-rleft, .cl-roles.wide .cl-racts .cl-rleft { display: none; }
.cl-tabbox.r .cl-tabs li { padding: 0 6px !important; }
.cl-tabbox.r .cl-tscroll.l { background: url(/img/sd/left-arrow-icon-sprite.png) 14px 6px no-repeat; cursor: pointer; }
.cl-tabbox.r .cl-tscroll.r { background: url(/img/sd/right-arrow-icon-sprite.png) 0 6px no-repeat; cursor: pointer; }
.cl-ldap { margin-top: -1px; }
.cl-ldap .cl-field { align-items: flex-start; min-height: 36px; }
.cl-ldap .cl-field + .cl-field { min-height: 18px; margin-top: 5px; }
.cl-ldap .cl-cb { margin-top: 7px; }
.cl-ldap .cl-edit { margin-top: -5px; }
.cl-ldap + .cl-group { margin-top: 33px; }
.cl-tipw { position: relative; display: inline-block; width: 6px; height: 13.5px; vertical-align: top; margin-right: 0; }
.cl-tipm { position: absolute; left: 0; top: 0; width: 0; height: 0; border-top: 7px solid #94de35; border-right: 7px solid transparent; cursor: pointer; }
.cl-tip { position: absolute; z-index: 50; bottom: 14px; left: -146px; padding: 10px; text-align: left; white-space: normal; }
.cl-tipb { display: block; width: 239px; background: #fff; box-shadow: rgba(0,0,0,.3) 0 0 2px 0; padding: 15px 45px 15px 15px; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; position: relative; }
.cl-tipx { position: absolute; right: 15px; top: 15px; width: 10px; height: 11px; background: url(/img/sd/TooltipUtilities-CloseTipButtonImage.png) no-repeat; cursor: pointer; }
.cl-dgrid.w { padding: 15px 0 0 30px; }
.cl-dgrid.w .cl-gcap label, .cl-dgrid.w .cl-cell { padding-left: 0; }
.cl-dgrid.w .cl-row { margin-left: -6px; padding: 0 6px; }
.cl-dgrid.w .cl-cell { padding-top: 4px; padding-bottom: 7px; }
.cl-roles .cl-gtitle { padding: 1.5px 11.25px 0 0; }
.cl-roles .cl-group-h .cl-dtool { margin-left: -3px; }
.cl-roles .cl-group-h .cl-dtool + .cl-dtool { margin-left: 0; }
.cl-dtool img { width: 16px; height: 16px; display: block; }
.cl-tipb { border-bottom: 3px solid #8ecb60; }
.cl-tipb::after { content: ''; position: absolute; top: calc(100% + 3px); left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #8ecb60; border-bottom: 0; }
.cl-mgr { margin-top: 0; }
.cl-mgr .cl-field { min-height: 24px; align-items: flex-start; }
.cl-mgr .cl-flabel { line-height: 21px; }
.cl-mgr .cl-cb { margin-top: 6px; }
.cl-mgr .cl-edit { margin-left: 1px; position: relative; top: -1px; }
.cl-mgr .cl-field + .cl-field { margin-top: 3px; }
.cl-mgr + .cl-group { margin-top: 28px; }
.cl-roles .cl-group + .cl-group { margin-top: 46px; }
.cl-dgrid.w .cl-nodata { padding: 0; line-height: 21px; margin-left: -6px; }
.cl-sess { padding: 3px 0 0 24px; }
.cl-sess .cl-field { align-items: flex-end; }
.cl-sess .cl-flabel { line-height: 19px; margin-right: 15px; }
.cl-btn.green.nomk { padding: 0 10.5px; }
.cl-dgrid.w .cl-gcap { height: 27px; }
.cl-dgrid.w .cl-row { height: 30px; min-height: 30px; margin-bottom: 1px; }
.cl-lmwrap { padding-top: 1px; }
/* спрайти 16×32 BaseGridDetailV2: Creatio зсуває фон на 16px/14px (повтор показує нижню половину) */
.cl-dtool.add { background: url(/img/sd/BaseGridDetailV2-AddButtonImage.svg) 0 16px; }
.cl-dtool.tools { background: url(/img/sd/BaseGridDetailV2-ToolsButtonImage.svg) 0 14px; }
.cl-dtool.add:hover { background-position: 0 0; } .cl-dtool.tools:hover { background-position: 0 -2px; }
/* реєстр із перенесенням тексту (Доступ до операцій) */
.cl-sec.wrap .cl-row { align-items: flex-start; }
.cl-sec.wrap .cl-cell { white-space: normal; overflow: visible; }
.cl-sorta.asc { background-position: 0 0; } .cl-sorta.desc { background-position: 0 -16px; }
/* сторінка операції */
.cl-opprof { display: flex; background: #fff; border-bottom: 1px solid #e6e6e6; padding: 22px 0 21px 21px; }
.cl-opprof .cl-pcol { width: 50%; }
.cl-opdet { background: #fff; padding: 17px 22px 20px 21px; min-height: 400px; }
.cl-opdet .cl-gtitle { padding-right: 11.25px; }
.cl-opdet .cl-gtitle + * { margin-left: -3px; }
.cl-opdet .cl-group + .cl-group { margin-top: 38px; }
.cl-opdet .cl-dtool { margin-left: 0; }
.cl-opdet .cl-group-h > * { position: relative; top: -1px; }
.cl-opdet .cl-group-h > .cl-gmark, .cl-opdet .cl-group-h > .cl-gtitle { top: 0; }
.cl-op .cl-cbody { padding-right: 16px; }
.cl-mvbtn { width: 39px; height: 25px; box-sizing: border-box; border: 1px solid #b4c1d2; border-radius: 2px; display: grid; place-items: center; cursor: pointer; background: #fff; }
.cl-mvbtn img { width: 16px; height: 16px; }
.cl-opdet .cl-group-h { height: 39px; }
.cl-infob { position: relative; width: 24px; height: 24px; background: url(/img/sd/InformationButton-DefaultIcon.png) no-repeat; cursor: pointer; }
.cl-tip.info { left: -122px; bottom: 30px; }
.cl-dg2 { padding: 7px 0 0 30px; }
.cl-dg2-cap { display: flex; height: 28px; align-items: flex-start; padding-top: 4px !important; box-sizing: border-box; border-bottom: 1px solid #e0e0e0; margin-left: -6px; padding: 0 6px; }
.cl-dg2-cap label { box-sizing: border-box; padding-right: 20px; font: 12.992px/18px 'Bpmonline Open Sans', sans-serif; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-dg2-row { display: flex; align-items: center; height: 36px; padding-top: 1px !important; box-sizing: border-box; margin-left: -6px; padding: 0 6px; cursor: pointer; }
.cl-dg2-row.alt { background: #f7f7f7; }
.cl-dg2-row span { box-sizing: border-box; padding-right: 20px; font: 14px/19px 'Bpmonline Open Sans', sans-serif; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-dg2 .r { text-align: right; }
.cl-lmwrap.d { margin-left: -30px; padding-top: 18px; }
.cl-sec.cl-ops .cl-grid { padding-right: 28px; }
.cl-sec.cl-ops .cl-cell { padding: 5px 20px 5px 0; line-height: 20px; }
.cl-sec.cl-ops .cl-row { margin-bottom: 1px; }
.cl-opprof { padding-left: 0; }
.cl-opprof .cl-pcol { padding-left: 21px; box-sizing: border-box; }
.cl-opprof .cl-pcol + .cl-pcol { padding-left: 0; }
.cl-opdet .cl-group-h .cl-gtitle + * { margin-left: -3px; }
.cl-infob:hover, .cl-infob:focus { background-position: 0 -24px; outline: none; }
/* активний рядок реєстру: підсвічування + кнопки дій (Відкрити / Видалити) */
.cl-sec .cl-row { flex-wrap: wrap; }
.cl-sec .cl-row.sel, .cl-sec .cl-row.sel:hover { background: #e4ebfa; }
.cl-racts2 { width: 100%; display: flex; gap: 9px; padding: 15px 0 4px; }
.cl-btn.grey { color: #4e7bd8; padding: 0 10.5px; }
.cl-btn.blue { padding: 0 10.5px; }
.cl-mbcover { position: fixed; inset: 0; z-index: 1000; background: transparent; /* у Creatio ts-messagebox-cover фактично не затемнює сторінку */ display: grid; place-items: center; }
.cl-mbox { width: 410px; box-sizing: border-box; background: #fff; border-top: 3px solid #64b8df; box-shadow: rgba(0,0,0,.25) 0 0 8px 0; padding: 30px; font-family: 'Bpmonline Open Sans', sans-serif; }
.cl-mbcap { font: 16px 'Bpmonline Open Sans Light', sans-serif; color: #444; padding-bottom: 28px; min-height: 22px; }
.cl-mbbtns { display: flex; gap: 9px; }
.cl-mbbtns .cl-btn { min-width: 85px; justify-content: center; box-sizing: border-box; padding: 0 10.5px; }
.cl-mbbtns .cl-btn:not(.blue) { color: #006ce0; }
/* ---------- випадне меню ---------- */
.cl-btn { position: relative; }
.cl-menu { position: absolute; left: 0; top: 33px; z-index: 60; min-width: 100%; background: #fff; box-shadow: rgba(0,0,0,.12) 0 0 2px 0, rgba(0,0,0,.24) 0 2px 4px 0; border: 1px solid transparent; text-transform: none; letter-spacing: 0; }
.cl-menu.right { left: auto; right: 0; }
.cl-mi { height: auto; padding: 0 35px; font: 14px/32.2px 'Bpmonline Open Sans', sans-serif; color: #444; white-space: nowrap; cursor: pointer; }
.cl-mi:hover { background: #f2f6fc; }
.cl-mi.dis { color: #bababa; cursor: default; background: none; }
.cl-msep { height: 1px; background: #ebebeb; margin: 5px 7px; } /* Terrasoft.MenuSeparator: лінія #ebebeb з відступом 7px, по 5px зверху й знизу (звірено 25.10.2026) */
.cl-btn.plain { padding: 0 10.5px; }
/* ---------- довідники ---------- */
.cl-lkbody { display: flex; min-height: calc(100vh - 160px); margin-top: 8px; }
.cl-lkfold { position: relative; width: 400px; flex: none; box-sizing: border-box; padding: 8px 1px 0 0; border-right: 1px solid #e6e6e6; }
.cl-lkclose { position: absolute; left: 372px; top: 14px; width: 16px; height: 16px; background: url(/img/sd/FolderManagerView-ClosePanelImageV2.svg) no-repeat; cursor: pointer; }
.cl-lktree { padding-top: 10px; }
.cl-lktrow { display: flex; align-items: center; height: 30px; margin-bottom: 1px; box-sizing: border-box; padding: 0 6px 0 20px; cursor: pointer; }
.cl-lktrow.sel { background: #e4ebfa; }
.cl-lktrow .cl-tgl { margin-right: 10px; }
.cl-lktrow img { width: 16px; height: 16px; margin-right: 12px; }
.cl-lkmain { flex: 1; min-width: 0; padding-left: 0; }
.cl-qf { display: flex; align-items: flex-start; height: 34px; margin: 1px 0 0 20px; }
.cl-qfbtn { display: inline-flex; align-items: center; height: 30px; width: 39px; box-sizing: border-box; cursor: pointer; }
.cl-qfbtn img { width: 16px; height: 16px; }
.cl-qfbtn .cl-mk { margin: 0 0 0 5px; }
.cl-qf label { font: 14px/19px 'Bpmonline Open Sans', sans-serif; margin: 6px 5px 0 0; }
.cl-qf label.val { margin-right: 2px; }
.cl-qf label.cap { color: #999; }
.cl-qf label.val { color: #444; }
.cl-qfrm { display: inline-grid; place-items: center; width: 26px; height: 25px; cursor: pointer; margin-top: 3px; }
.cl-qfrm img { width: 16px; height: 16px; }
.cl-tiles { padding-top: 2px; }
.cl-tile { padding: 0 6px; cursor: pointer; }
.cl-tile.sel { background: #e4ebfa; }
.cl-tmod { padding: 6px 0 3px 21px; height: 29px; box-sizing: border-box; font: 14px/19px 'Bpmonline Open Sans', sans-serif; }
.cl-tmod .lnk { color: #4e7bd8; cursor: pointer; text-decoration: none; }
.cl-tacts { display: flex; gap: 9px; padding: 10px 0 8px 21px; }
.cl-lk .cl-nodata { padding-top: 20px; }
/* ---------- наповнення довідника ---------- */
.cl-lcname { padding: 4px 20px 0; height: 28px; font: 20px/28px 'Bpmonline Open Sans Light', sans-serif; color: #444; }
.cl-cgrid { padding: 0 20px 20px; }
.cl-cgrow { display: flex; align-items: flex-start; height: 46px; box-sizing: border-box; margin: 0 -12px 0 -20px; padding: 6px 12px 0 21px; position: relative; }
.cl-cgrow.alt { background: #f7f7f7; }
.cl-cgrow.act { border: 1px solid #64b8df; height: 47px; padding: 5px 11px 0 20px; background: #fff; z-index: 2; }
.cl-cgcell { box-sizing: border-box; font: 14px/34.02px 'Bpmonline Open Sans', sans-serif; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; cursor: pointer; }
.cl-cgcell:not(.p) { line-height: 20px; }
.cl-cgcell.e { padding-right: 10px; }
.cl-cgcell .f { display: block; height: 33px; box-sizing: border-box; border-bottom: 1px solid #fff; padding-top: 3px; }
.cl-cgcell .f.foc { border-bottom: 1px dotted #64b8df; }
.cl-cgcell input:not([type=checkbox]), .cl-cgcell select { width: 100%; height: 26px; box-sizing: border-box; border: 0; outline: none; background: #fff; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; padding: 0 5px 0 0; }
.cl-cgacts { position: absolute; right: -1px; top: 46px; width: 112px; height: 26px; background: #64b8df; display: flex; align-items: center; gap: 9px; padding-left: 5px; box-sizing: border-box; }
.cl-cgacts span { width: 18px; height: 18px; cursor: pointer; display: grid; place-items: center; }
.cl-cgacts img { width: 18px; height: 18px; }

/* кнопки класичного інтерфейсу: 15px без трекінгу, відступи 10.5px; з меню — праворуч 24.9px і маркер 9×5 */
.cl-btn { letter-spacing: normal; }
.cl-btn:not(.green):has(.cl-mk) { padding: 0 24.9px 0 10.5px; }
.cl-btn:not(.green) > .cl-mk { position: absolute; right: 10.5px; top: 11.5px; margin: 0; border-left-width: 4.5px; border-right-width: 4.5px; border-top-width: 5px; }
.cl-lc .cl-utils { margin-top: 9px; }
.cl-cgrid .cl-gcap { margin-top: -1px; height: 26px; box-sizing: border-box; border-bottom: 1px solid #e0e0e0; align-items: flex-start; }
.cl-cgrow { margin-right: -19px; padding-right: 20px; }
.cl-cgrow.act { margin-right: -19px; padding-right: 19px; }
.cl-cgcell { height: 34px; }
/* властивості довідника */
.cl-lp .cl-cbody { padding-right: 8px; }
.cl-lpprof { background: #fff; border-bottom: 1px solid #e6e6e6; padding: 22px 0 21px 21px; display: flex; flex-direction: column; gap: 4px; }
.cl-lkedit { position: relative; }
.cl-lkedit input { padding-right: 22px !important; }
.cl-lkbtn { position: absolute; right: 9px; top: 6px; width: 16px; height: 16px; background: url(/img/sd/lookupedit-button.png) -9px -9px no-repeat; cursor: pointer; }
.cl-field.memo { align-items: flex-start; }
.cl-field.memo .cl-flabel { padding-top: 12px; }
.cl-field.memo textarea { width: 100%; height: 52px; box-sizing: border-box; border: 0; outline: none; resize: none; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; padding: 3px 0 0; background: transparent; }
.cl-field.memo .cl-edit { height: 54px; margin-top: -1px; }
.cl-field.memo .cl-flabel { padding-top: 16px; }
.cl-lkbtn { top: 5px; }
/* реєстр (listed) у розділі з панеллю груп */
.cl-lgcap { display: flex; height: 28px; align-items: flex-start; padding: 4px 20px 0; box-sizing: border-box; }
.cl-lgcap label { box-sizing: border-box; padding-right: 20px; font: 12.992px/18px 'Bpmonline Open Sans', sans-serif; color: #999; }
.cl-lgrow { display: flex; flex-wrap: wrap; align-items: flex-start; min-height: 30px; margin-bottom: 1px; padding: 5px 20px; box-sizing: border-box; cursor: pointer; }
.cl-lgrow.alt { background: #f7f7f7; }
.cl-lgrow.sel { background: #e4ebfa; }
.cl-lgcell { box-sizing: border-box; padding-right: 20px; font: 14px/20px 'Bpmonline Open Sans', sans-serif; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-lgacts { width: 100%; display: flex; gap: 9px; padding: 15px 0 4px; }
/* сторінка системного налаштування */
.cl-stprof { background: #fff; padding: 22px 0 20px 21px; display: flex; flex-wrap: wrap; min-height: 722px; box-sizing: border-box; align-content: flex-start; }
.cl-stprof .cl-pcol { width: 646px; gap: 2px; padding: 0; }
.cl-stprof .cl-pcol + .cl-pcol { margin-left: 37px; width: auto; }
.cl-stprof .cl-pcol + .cl-pcol { padding-left: 0; }
.cl-stprof .st-desc { width: 100%; margin-top: 3px; }
.cl-stprof .st-desc textarea { width: 100%; height: 26px; border: 0; outline: none; resize: none; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; padding: 3px 0 0; background: transparent; }
.cl-stprof .st-val .cl-flabel { line-height: 18px; }
.cl-stprof .st-val input.num { color: #000; }
.cl-sel { width: 100%; height: 26px; border: 0; outline: none; background: transparent; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; appearance: none; -webkit-appearance: none; padding: 0 22px 0 0; }
.cl-lkbtn.dd { pointer-events: none; }
.cl-cbx { display: inline-block; width: 16px; height: 16px; background: url(/img/sd/Checkbox_empty.svg) no-repeat; cursor: pointer; flex: none; }
.cl-cbx.on { background-image: url(/img/sd/Checkbox_checked.svg); }
.cl-cbx.dis { opacity: .5; cursor: default; }
.cl-rb { display: inline-block; width: 16px; height: 16px; background: url(/img/sd/Radiobutton_empty.svg) no-repeat; flex: none; }
.cl-rb.on { background-image: url(/img/sd/Radiobutton_checked.svg); }
.st-cb { min-height: 30px; }
.st-cb .cl-flabel { margin-right: 14px; }
.st-cb.two .cl-flabel { line-height: 18px; }
.cl-stdet { width: 100%; padding: 28px 22px 0 0; margin-left: -4px; }
.cl-stdet .st-g + .st-g { margin-top: 36px; }
.cl-stdet .cl-group-h { height: 24px; }
.cl-stdet .cl-group-b { padding: 8px 0 0 33px; }
.st-radio { display: flex; align-items: center; gap: 4px; height: 22px; margin-bottom: 10px; cursor: pointer; }
.st-radio label { font: 14px/22px 'Bpmonline Open Sans', sans-serif; color: #444; cursor: pointer; }
.st-ssp { display: flex; align-items: center; gap: 19px; height: 32px; cursor: pointer; margin-left: -1px; }
.st-ssp label { font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; cursor: pointer; }
.st-op { margin: 0 0 8px -33px; }
.cl-st .cl-cbody { padding-right: 8px; }
.cl-stprof { padding-top: 22px; }
.cl-stprof .st-val { align-items: flex-start; min-height: 28px; max-height: 28px; }
.cl-stprof .st-val .cl-flabel { margin-top: -5px; }
.cl-stprof .cl-pcol + .cl-pcol { gap: 1px; }
.cl-stprof .st-cb { height: 30px; min-height: 30px; align-items: center; overflow: visible; }
.cl-stdet { padding-top: 27px; margin-left: 0; }
.cl-stprof .st-desc { margin-top: 2px; align-items: flex-start; }
.cl-stprof .st-desc .cl-flabel { margin-top: 2px; }
.cl-stdet .cl-gtitle { padding-right: 11.25px; }
.cl-stdet .cl-group-h .cl-infob { margin-left: -9px; }
.cl-stdet .cl-group-b { padding: 6px 0 0 29px; display: block; }
.st-radio { margin-bottom: 10px; line-height: 22px; }
.cl-stdet .st-g + .st-g { margin-top: 39px; }
.st-ssp { margin-top: -6px; }
/* журнал процесів */
.cl-plog .cl-hdr .cl-hico { margin: 10px 8px 0 0; background-position: 0 0; }
.cl-plog .cl-hdr .cl-hico.on { background-position: 0 -41px; }
.cl-ff { display: flex; align-items: center; height: 33px; margin: 9px 20px 0; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; }
.cl-ffarch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin-right: 10px; }
.cl-ffarch label { color: #333; cursor: pointer; }
.cl-ffbtn { display: inline-flex; align-items: center; width: 44px; height: 30px; padding-left: 0; box-sizing: border-box; cursor: pointer; }
.cl-ffbtn img { width: 20px; height: 20px; }
.cl-ffbtn .cl-mk { margin-left: 6px; }
.cl-ff label.v { color: #444; margin-right: 2px; }
.cl-ff label.c { color: #999; margin-right: 2px; }
.cl-ffrm { display: inline-grid; place-items: center; width: 26px; height: 25px; cursor: pointer; margin-right: 18px; }
.cl-ffrm img { width: 16px; height: 16px; }
.cl-ffown { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; margin-right: 15px; }
.cl-ffown img { width: 20px; height: 20px; }
.cl-plog .cl-filter { margin-top: 0; }
.cl-plog .cl-grid { padding-right: 28px; }
.cl-plog .cl-gcap { margin-top: 2px; }
.cl-plog .cl-gcap label.r, .cl-plog .cl-cell.r { text-align: right; }
.cl-plog .cl-cell { padding: 5px 20px 5px 0; line-height: 20px; white-space: normal; }
.cl-plog .cl-gcap label { padding-right: 20px; }
.cl-plog .cl-row { margin-bottom: 1px; align-items: flex-start; flex-wrap: wrap; }
.cl-plog .cl-cell .lnk { color: #4e7bd8; cursor: pointer; }
.cl-plog .cl-cap { margin-right: 34px; }
.cl-ff { margin-top: 8px; }
.cl-ffarch label { line-height: 22px; margin-top: -3px; }
.cl-ff label.c { padding: 0 1.5px; }
.cl-ffrm { margin-right: 21px; }
.cl-ffown { margin-right: 10px; }
.cl-ffown .cl-mk { margin-left: -2px !important; }
.cl-plog .cl-gcap { margin-top: 1px; }
.cl-ffarch .cl-cbx { margin-top: -1px; }
.cl-ffarch label { margin-top: -1px; }
.cl-plog .cl-ff .cl-filter { margin-left: -8px; }
.cl-plog .cl-gcap { margin-top: 2px; }
/* бібліотека процесів */
.cl-plact { display: inline-flex; align-items: center; gap: 10px; margin: 0 10px 0 0; height: 30px; cursor: pointer; }
.cl-plact label { font: 14px/22px 'Bpmonline Open Sans', sans-serif; color: #333 !important; margin: 0 !important; cursor: pointer; }
.cl-qffold { display: inline-flex; align-items: center; gap: 11px; height: 30px; margin-left: 13px; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; }
.cl-qffold img { width: 16px; height: 16px; }
.cl-qffold .cl-qfrm { margin: 0 0 0 -6px; }
.cl-tmod.pl { display: flex; }
.cl-tmod.pl > span { box-sizing: border-box; padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-tmod.pl .c12 { width: 50%; } .cl-tmod.pl .c4 { width: 16.666%; }
.cl-tmod.pl label { color: #999; font-size: .928em; margin-right: 5px; }
.cl-plempty { width: 477px; margin: 2px auto 0; text-align: left; font-family: 'Bpmonline Open Sans Light', sans-serif; color: #999; }
.cl-plempty img { display: block; margin: 0 auto; width: 135px; height: 139px; }
.cl-plempty .t { margin: 52px 0 0 29px; font-size: 24px; padding-right: 5px; }
.cl-plempty .d { margin-top: 29px; padding: 11px 5px 13px 30px; font-size: 28px; box-shadow: rgb(84, 184, 223) -3px 0 0 0; }
.cl-plempty .t, .cl-plempty .d { line-height: normal; }
/* робочі місця */
.cl-mvb { display: inline-grid; place-items: center; width: 40px; height: 28px; margin-top: 2px; background: #006ce0; border-radius: 2px; cursor: pointer; }
.cl-mvb img { width: 16px; height: 16px; }
.cl-wp .cl-gcap { margin-top: 11px; margin-bottom: 1px; }
.cl-wp .cl-row { margin-bottom: 1px; }
.cl-wp .cl-cell { padding: 5px 20px 5px 0; line-height: 20px; }
.cl-wpprof { padding-top: 22px; }
.cl-wpprof .cl-pcol { gap: 4px; }
.wp-cb { min-height: 38px; align-items: center; }
.wp-cb .cl-flabel { line-height: 18px; }
.wp-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: 2px; cursor: pointer; }
.wp-ico img { width: 32px; height: 32px; }
.cl-tabbox.wp { min-height: 600px; }
.wp-list { padding: 8px 0 0 28px; }
.wp-row { height: 31px; box-sizing: border-box; padding: 6px 6px 0; margin-left: -6px; font: 14px/19px 'Bpmonline Open Sans', sans-serif; color: #444; }
.wp-row.alt { background: #f7f7f7; }
.cl-lkbtn { display: none; }
.cl-lkedit:hover .cl-lkbtn { display: block; }
.cl-tabbox.wp .cl-tscroll.l { background: url(/img/sd/left-arrow-icon-sprite.png) 14px 6px no-repeat; cursor: pointer; }
.cl-tabbox.wp .cl-tscroll.r { background: url(/img/sd/right-arrow-icon-sprite.png) 0 6px no-repeat; cursor: pointer; }
.wp-list { padding-top: 15px; }
.cl-wpprof .cl-pcol { gap: 3px; }
.wp-cb { align-items: flex-start; min-height: 38px; }
.wp-cb .cl-cbx { margin-top: 7px; }
.cl-tabbox.wp .cl-tabs li { padding: 0 6px !important; }
.cl-wpp .cl-gtitle { padding-right: 11.25px; }
.cl-wpp .cl-group-h .cl-dtool { margin-left: 0; }
.cl-wpp .cl-group-h .cl-gtitle + .cl-dtool { margin-left: -3px; }
.wp-list { padding-top: 24px; }
.cl-wpp .cl-group + .cl-group { margin-top: 45px; }
/* ---------- «Мови» (LanguageSection / LanguagePage): плитковий реєстр із підписами, поєднаний режим ---------- */
.lg-wrap { min-height: 100%; position: relative; }
.lg-mwrap { position: relative; display: inline-flex; }
.lg-sec { min-height: calc(100vh - 56px); }
.lg-sec .cl-utils { height: 39px; align-items: flex-start; padding-top: 9px; box-sizing: border-box; }
.lg-wrap .cl-filter { height: 30px; margin-top: 0; }
.lg-wrap .cl-filter .cl-mk.g { margin-left: -1.5px; }
.lg-tiled { position: relative; padding-bottom: 20px; }
.lg-tiled::before { content: ''; display: block; height: 1px; box-sizing: border-box; border-top: 1px solid #e0e0e0; position: sticky; top: 0; z-index: 2; }
.lg-pad { padding: 1px 6px 0; cursor: default; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; }
.lg-pad::before { content: ''; display: block; height: 1px; background: #e0e0e0; margin: -1px 14px 0; }
.lg-pad:last-of-type::before { margin-top: -2px; }
.lg-pad:hover { background: rgba(228, 235, 250, .5); }
.lg-pad.sel { background: #e4ebfa; }
.lg-pad.sel::before { margin-left: -6px; margin-right: -6px; }
.lg-mod { display: flex; height: 46px; box-sizing: border-box; padding: 6px 0 3px 21px; }
.lg-col { box-sizing: border-box; padding-right: 20px; min-width: 0; }
.lg-col.e { padding-right: 10px; }
.lg-lab { display: block; height: 18px; margin-right: 5px; font: 12.992px/18px 'Bpmonline Open Sans', sans-serif; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-val { display: block; font: 14px/19px 'Bpmonline Open Sans', sans-serif; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-acts { height: 48px; box-sizing: border-box; }
/* поєднаний режим: ліва колонка 300px (заголовок, кнопка, фільтр, вертикальний реєстр), праворуч картка */
.lg-comb { position: relative; background: #ebeeef; min-height: calc(100vh - 56px); display: flex; font-family: 'Bpmonline Open Sans', sans-serif; color: #444; }
.lg-left { width: 300px; flex: none; display: flex; flex-direction: column; }
.lg-lcap { height: 56px; box-sizing: border-box; background: #fff; border-right: 1px solid #e6e6e6; border-radius: 3px 3px 0 0; padding-left: 20px; font: 26px/51px 'Bpmonline Open Sans Light', sans-serif; color: #444167; white-space: nowrap; }
.lg-lbtn { height: 30px; box-sizing: border-box; background: #fff; border-right: 1px solid #e6e6e6; padding-left: 20px; }
.cl-btn.blue.dis { background: #ccc; cursor: default; }
.lg-lfil { flex: none; background: #fff; border-right: 1px solid #e6e6e6; height: 44px; box-sizing: border-box; padding: 9px 20px 5px; display: flex; align-items: center; gap: 12px; }
.lg-lfil .cl-filter { margin-top: 0; }
.lg-lfil .cl-search { width: 120px; margin-top: 0; }
.lg-vgrid { flex: 1; background: #fff; border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; border-radius: 0 0 5px; overflow-y: auto; }
.lg-vpad { padding: 1px 0 0; border-bottom: 1px solid transparent; cursor: pointer; }
.lg-vpad + .lg-vpad { border-top: 1px solid transparent; }
.lg-vpad:last-child { padding-bottom: 15px; }
.lg-vpad:hover { background: rgba(228, 235, 250, .5); }
.lg-vpad.sel { background: #e4ebfa; border-bottom-color: #e6e6e6; }
.lg-vpad.sel + .lg-vpad, .lg-vpad + .lg-vpad.sel { border-top-color: #e6e6e6; }
.lg-vpad.sel + .lg-vpad { border-top-color: transparent; }
.lg-vmod { display: flex; height: 22px; box-sizing: border-box; padding: 0 20px 1px; line-height: 21px; }
.lg-vmod + .lg-vmod { height: 33px; }
.lg-vlab { width: 37.5%; flex: none; box-sizing: border-box; padding-right: 8px; font-size: 12.992px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-vval { width: 62.5%; flex: none; box-sizing: border-box; padding-right: 10px; font-size: 14px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-toggle { position: absolute; left: 299px; top: 104px; width: 25px; height: 36px; box-sizing: border-box; background: rgba(11, 46, 78, .5); border-left: 2px solid #ff4013; border-radius: 0 3px 3px 0; cursor: pointer; z-index: 5; }
.lg-toggle i { display: block; width: 16px; height: 16px; margin: 10px 0 0 3px; background: url(/img/sd/BaseSectionV2-ToggleSectionButton.svg) no-repeat center; transform: rotate(180deg); }
.lg-comb.col .lg-left { display: none; }
.lg-comb.col .lg-toggle { left: -8px; }
.lg-comb.col .lg-toggle i { transform: none; }
/* картка */
.lg-card { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-left: 8px; }
.lg-chdr { height: 56px; box-sizing: border-box; background: #fff; border-radius: 3px 3px 0 0; padding: 16px 0 0 25px; font: 20px/26px 'Bpmonline Open Sans Light', sans-serif; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-cbtns { height: 51px; box-sizing: border-box; background: #fff; border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; border-radius: 0 0 3px 8px; padding: 0 20px 20px 21px; display: flex; gap: 9px; align-items: flex-start; }
.lg-body { padding: 7px 8px 8px 0; }
.lg-box { background: #fff; border: 1px solid #e6e6e6; border-radius: 8px; padding: 20px; }
.lg-row { display: flex; min-height: 32px; }
.lg-row.two { min-height: 38px; }
.lg-half { width: 50%; display: flex; align-items: flex-start; }
.lg-lbl { width: 150px; flex: none; box-sizing: border-box; padding: 6px 14px 0 0; text-align: right; font: 13px/18px 'Bpmonline Open Sans', sans-serif; color: #999; position: relative; }
.lg-lbl.w { width: 160px; padding-top: 0; }
.lg-lbl.req::after { content: '*'; color: #e14a4a; margin-left: 2px; position: absolute; right: 8px; top: 4px; }
.lg-ctl { flex: 1; position: relative; }
.lg-cb { width: 16px; height: 16px; margin-top: 6.5px; background: url(/img/sd/Checkbox_empty.svg) no-repeat; cursor: pointer; flex: none; }
.lg-cb.on { background-image: url(/img/sd/Checkbox_checked.svg); }
.lg-cb.dis { background-image: url(/img/sd/Checkbox_empty_disabled.svg); cursor: default; }
.lg-cb.dis.on { background-image: url(/img/sd/Checkbox_disabled.svg); }
.lg-err { position: absolute; left: 0; top: 30px; font: 12px 'Bpmonline Open Sans', sans-serif; color: #fff; background: #58aeda; padding: 2px 5px; z-index: 3; }
.cl-cbo { position: relative; height: 28px; box-sizing: border-box; border: 1px solid #fff; border-bottom: 1px dotted #c8c8c8; padding-right: 10px; background: #fff; }
.cl-cbo input { width: 100%; height: 26px; border: 0; outline: 0; padding: 0 22px 0 0; box-sizing: border-box; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; background: #fff; }
.cl-cbo:not(.dis):focus-within { border-bottom: 1px solid #00aeef; }
.cl-cbobtn { position: absolute; right: 0; top: 0; width: 32px; height: 26px; cursor: pointer; display: none; }
.cl-cbobtn::after { content: ''; position: absolute; left: 8px; top: 5px; width: 16px; height: 16px; background: url(/img/sd/comboboxedit-arrow.png) no-repeat 0 0; }
.cl-cbobtn:hover::after { background-position: 0 -16px; }
.cl-cbo:not(.dis):hover .cl-cbobtn, .cl-cbo:not(.dis):focus-within .cl-cbobtn { display: block; }
.cl-cbolist { position: absolute; left: 0; width: calc(100% - 2px); top: 28px; max-height: 560px; overflow-y: auto; background: #fff; z-index: 50; box-shadow: rgba(0,0,0,.12) 0 0 2px 0, rgba(0,0,0,.24) 0 2px 4px 0; }
.cl-cboi { height: 42px; padding: 0 24px 0 8px; font: 14px/38px 'Bpmonline Open Sans', sans-serif; color: #444; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-cboi:hover, .cl-cboi.hi { background: #f2f6fc; }
/* нова мова — на всю ширину */
.lg-card.full { padding-left: 0; background: #ebeeef; min-height: calc(100vh - 56px); }
.lg-card.full .lg-chdr { padding-left: 25px; border-radius: 3px 3px 0 0; }
.lg-card.full .lg-cbtns { border-radius: 0; border-right: 0; border-bottom: 0; }
.lg-card.full .lg-body { padding: 7px 8px 8px; }
.cl-cbo.dis::after { content: ''; position: absolute; top: 4px; right: 0; width: 24px; height: 20px; background: url(/img/sd/baseedit-readonly.png) 50% 50% no-repeat; display: none; }
.cl-cbo.dis:hover::after { display: block; }
.lg-wrap .cl-filter img { margin-top: 1px; }
.lg-wrap .cl-filter .cl-mk.g { position: relative; top: 1px; }
/* ---------- «Переклад» (TranslationSection) ---------- */
.cl-tr { min-height: calc(100vh - 56px); }
.cl-tr .cl-hdr .cl-hico { margin: 10px 8px 0 0; background-position: 0 0; }
.cl-tr .cl-hdr .cl-hico.on { background-position: 0 -41px; }
.tr-aon { font: 13px/32px 'Bpmonline Open Sans', sans-serif; color: #999; white-space: nowrap; margin-top: 2px; }
.tr-utils { display: flex; align-items: flex-start; height: 43px; box-sizing: border-box; padding: 9px 20px 0; font: 14px/30px 'Bpmonline Open Sans', sans-serif; color: #444; }
.tr-fbtn { display: inline-flex; align-items: center; width: 39.2px; height: 30px; cursor: pointer; position: relative; }
.tr-fbtn img { width: 16px; height: 16px; margin-top: 2.7px; }
.tr-fbtn .cl-mk.g { position: absolute; left: 21.4px; top: 14.4px; margin: 0; }
.tr-fmenu { top: 33px; }
.tr-chip { display: inline-flex; align-items: flex-start; height: 30px; margin-right: 15px; }
.tr-chipt { max-width: 240px; overflow: hidden; white-space: nowrap; height: 32px; }
.tr-chipt label { padding-right: 3px; margin-right: 2px; }
.tr-chipt .cap { color: #999; }
.tr-chipt .val { color: #444; padding-right: 0; }
.tr-chipx { width: 25.8px; height: 25px; margin-top: 3px; cursor: pointer; background: url(/img/sd/QuickFilterViewV2-RemoveButtonImage.svg) no-repeat 4.9px 4.9px; flex: none; }
.tr-tag { display: inline-flex; align-items: flex-start; height: 34px; cursor: pointer; }
.tr-tag i { width: 16px; height: 16px; margin: 9px 8px 0 3px; background: url(/img/sd/TagFilterViewGeneratorV2-TagFilterIcon.svg) no-repeat; }
.tr-tag label { padding-right: 3px; margin-right: 2px; cursor: pointer; }
.tr-untrw { margin-top: 4.8px; }
.tr-untr { display: inline-flex; align-items: center; height: 27.4px; box-sizing: border-box; padding-left: 12.04px; cursor: pointer; border-radius: 2px; line-height: 16.8px; }
.tr-untr > span:first-child { display: inline-flex; align-items: center; }
.tr-untr .ic { width: 16px; height: 16px; margin-right: 5.88px; background: url(/img/sd/TranslationSection-UntranslatedRecordsFilterImage.svg) no-repeat; }
.tr-untrm { display: inline-flex; width: 22.4px; height: 27.4px; position: relative; }
.tr-untrm .cl-mk.g { position: absolute; left: 4.6px; top: 11.7px; margin: 0; }
.tr-untr.on { background: #e4ebfa; }
.tr-umenu { top: 30px; }
.cl-mi.sel { background: #e4ebfa; }
/* нова умова: колонка, значення, ✓, ✕ */
.tr-add { display: inline-flex; align-items: flex-start; margin: 1px 0 0 3px; }
.tr-addc { position: relative; width: 150px; height: 28px; box-sizing: border-box; border: 1px solid #c8c8c8; margin: 2px 9px 0 0; }
.tr-addc select { appearance: none; -webkit-appearance: none; width: 100%; height: 26px; border: 0; outline: 0; padding: 0 34px 0 10px; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; background: #fff; cursor: pointer; }
.tr-addc i { position: absolute; right: 7px; top: 5px; width: 16px; height: 16px; background: url(/img/sd/comboboxedit-arrow.png) no-repeat; pointer-events: none; }
.tr-addv { width: 150px; height: 28px; box-sizing: border-box; border: 1px solid #56b4ef; margin: 2px 9px 0 0; }
.tr-addv input { width: 100%; height: 26px; border: 0; outline: 0; padding: 0 10px; box-sizing: border-box; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; }
.tr-addok, .tr-addno { width: 28px; height: 28px; box-sizing: border-box; margin: 2px 9px 0 0; border-radius: 2px; cursor: pointer; background: no-repeat center; }
.tr-addok { background-color: #006ce0; background-image: url(/img/sd/CustomFilterViewV2-ApplyButtonImage.png); }
.tr-addno { background-image: url(/img/sd/CustomFilterViewV2-CancelButtonImage.png); }
/* реєстр (ConfigurationGrid): підписи y193, рядки 46px, зебра */
.tr-grid .cl-gcap { margin-top: 0; height: 28px; border-bottom: 0; align-items: flex-start; padding-top: 4px; }
.tr-grid .cl-gcap label { padding-right: 20px; }
.tr-grid .cl-cgrow { margin: 0 -19px 0 -20px; padding: 6px 21px 0 21px; }
.tr-grid .cl-cgrow.act { height: 46.5px; padding: 5px 20px 0 20px; }
.tr-grid .cl-cgcell { padding-right: 20px; }
.tr-grid .cl-cgcell .f.dis input { color: #444; cursor: default; }
.tr-acts { width: 83.6px; gap: 0; padding-left: 0; }
.tr-acts span { width: 27.9px; height: 26px; }
.tr-acts img { width: 17.9px; height: 17.9px; }
/* маска процесу */
.tr-mask { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: rgba(255,255,255,.4); }
.tr-maskb { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: #fff; box-shadow: rgba(0,0,0,.25) 0 0 8px; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; }
.tr-spin { width: 18px; height: 18px; border: 2px solid #c8d8ec; border-top-color: #006ce0; border-radius: 50%; animation: trspin .8s linear infinite; }
@keyframes trspin { to { transform: rotate(360deg); } }
/* картка перекладу (ts-modalbox 80% × 70%) */
.tr-cover { position: fixed; inset: 0; z-index: 800; background: rgba(115, 124, 161, .3); display: grid; place-items: center; }
.tr-modal { position: relative; width: 80%; height: 70%; box-sizing: border-box; background: #fff; border-top: 3px solid #64b8df; box-shadow: rgba(0,0,0,.25) 0 0 8px; padding: 15px 5px 10px; display: flex; flex-direction: column; font-family: 'Bpmonline Open Sans', sans-serif; }
.tr-mhdr { height: 37px; padding: 4px 0 0 29px; box-sizing: border-box; flex: none; position: relative; }
.tr-mcap { font: 22px/30px 'Bpmonline Open Sans Light', sans-serif; color: #64b8df; }
.tr-mx { position: absolute; right: 10px; top: 0; width: 20px; height: 20px; cursor: pointer; background: url(/img/sd/TranslationPage-CloseButtonImage.svg) no-repeat; }
.tr-mbody { flex: 1; overflow-y: auto; margin-top: 5px; padding: 0 8px 0 27px; }
.tr-mrow { display: flex; align-items: flex-start; margin-bottom: 20px; }
.tr-mlbl { width: 150px; flex: none; box-sizing: border-box; padding: 3px 9px 0 0; text-align: right; font: 14px/19px 'Bpmonline Open Sans', sans-serif; color: #999; position: relative; }
.tr-mrow:first-child .tr-mlbl { margin-top: 1.5px; }
.tr-mlbl.req::after { content: '*'; color: #e14a4a; position: absolute; right: 2px; top: 0; }
.tr-medit { width: calc(100% - 159px - 60px); margin-left: 9px; min-height: 28px; box-sizing: border-box; border-bottom: 1px dotted #c8c8c8; }
.tr-medit input { width: 100%; height: 26px; margin-top: 1px; border: 0; outline: 0; padding: 0 10px 0 1px; box-sizing: border-box; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; background: #fff; }
.tr-medit.memo { min-height: 30px; }
.tr-medit.memo:focus-within { border-bottom: 1px solid #00aeef; }
.tr-medit textarea { display: block; width: 100%; min-height: 26px; height: 26px; margin-top: 1px; border: 0; outline: 0; resize: none; padding: 3px 10px 0 1px; box-sizing: border-box; font: 14px/19px 'Bpmonline Open Sans', sans-serif; color: #444; overflow: hidden; }
.tr-mcb { width: 16px; height: 16px; margin: 1.5px 0 0 10px; flex: none; cursor: pointer; background: url(/img/sd/Checkbox_empty.svg) no-repeat; }
.tr-mcb.on { background-image: url(/img/sd/Checkbox_checked.svg); }
.tr-mfoot { flex: none; display: flex; align-items: center; height: 30px; margin: 0 10px 20px 25px; gap: 15px; }
.tr-mfoot .sp { flex: 1; }
.tr-nav { position: relative; }
.tr-nav i { display: inline-block; width: 17.1px; height: 17.1px; background: url(/img/sd/TranslationPage-NavigationButtonImage.png) no-repeat 0 -16px; background-size: 16px 32px; }
.tr-nav.back { background: #006ce0; color: #fff; padding: 0 10.5px 0 10px; }
.tr-nav.back i { transform: rotate(180deg); margin-right: 10px; }
.tr-nav.next i { margin-left: 7px; }
.tr-nav.off { background: #ccc; color: #bababa; cursor: default; }
.cl-tr .cl-cap { margin-right: 34px; }
.cl-tr .cl-hdr .cl-hico { width: 38.5px; height: 38.5px; margin-right: 9px; }
.tr-grid { padding-right: 28.8px; }
.tr-grid .cl-cgcell, .tr-grid .cl-cgcell:not(.p) { line-height: 34.02px; }
.tr-grid .cl-sorta { vertical-align: -2.5px; }
.tr-chipx { background-size: 16px 16px; }
.tr-grid .cl-cgcell input { text-overflow: ellipsis; }
.tr-mhdr { padding-left: 24px; }
.tr-mbody { margin-top: 10px; }
.tr-mrow { align-items: center; margin-bottom: 13px; }
.tr-mrow:first-child { margin-bottom: 20px; }
.tr-mlbl { margin-top: -3px; padding-top: 3px; }
.tr-mrow:first-child .tr-mlbl { margin-top: -3px; }
.tr-mcb { align-self: center; margin-top: -11px; }
.tr-mfoot { margin-bottom: 13px; }
.tr-nav i { background-size: auto; background-repeat: repeat; }
.tr-nav.next i { background-position: 0 0; }
.tr-nav.back i { transform: none; background-position: 0 16px; margin-right: 10px; }
.tr-nav.back { padding-left: 10px; }
.tr-add { margin-left: 18px; }
.tr-addc select { display: block; }
.tr-addc i { right: auto; left: 124px; top: 5px; }
.cl-mwrap { position: relative; display: inline-flex; }
.cl-tagb { display: inline-flex; align-items: flex-start; height: 34px; cursor: pointer; font: 14px/30px 'Bpmonline Open Sans', sans-serif; color: #444; margin-left: -16px; }
.cl-tagb i { width: 16px; height: 16px; margin: 9px 8px 0 3px; background: url(/img/sd/TagFilterViewGeneratorV2-TagFilterIcon.svg) no-repeat; }
.cl-tagb label { cursor: pointer; padding-right: 3px; }
/* ---------- «Правила пошуку дублів» ---------- */
.cl-dup .cl-row { min-height: 38px; padding-top: 5px; padding-bottom: 5px; box-sizing: border-box; margin-bottom: 1px; align-items: flex-start; }
.cl-dup .cl-cell { padding: 0 20px 0 0; line-height: 19.6px; }
.cl-dup .cl-cell:first-child { font: 20.006px/28.0084px 'Bpmonline Open Sans Light', sans-serif; }
.cl-dup .cl-cell:first-child .lnk { color: #4e7bd8; cursor: pointer; }
.cl-dup .cl-gcap label { padding-right: 20px; }
.lg-comb.col .lg-toggle { left: 0; }
.dp-wrap .lg-lbtn { height: 30px; }
.dp-vname { padding: 0 20px; font: 16px/22px 'Bpmonline Open Sans', sans-serif; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-tagbtn { width: 34px; height: 30px; cursor: pointer; background: url(/img/sd/DuplicatesRuleSectionV2-TagButtonIcon.svg) no-repeat 9px 5.5px; background-size: 16px 16px; }
.dp-box { padding: 20px; }
.dp-attrs { margin-top: 8px; }
.dp-row { display: flex; min-height: 38px; }
.dp-half { width: 50%; display: flex; align-items: flex-start; }
.dp-ctl { width: 533px; flex: none; }
.dp-q { width: 25%; display: flex; align-items: flex-start; }
.dp-q .lg-cb { margin-top: 6.5px; }
.lg-lbl.w2 { width: 151.5px; padding-top: 0; }
.dp-tools { display: flex; align-items: flex-start; height: 27px; }
.dp-gcap { font: 15px/24px 'Bpmonline Open Sans', sans-serif; color: #4e7bd8; }
.dp-add { width: 16px; height: 16px; margin: 5px 0 0 10px; cursor: pointer; background: url(/img/sd/DuplicateRulesSettings-AddButtonImage.svg) no-repeat 0 0; }
.dp-add:hover { background-position: 0 -16px; }
.dp-add.off { cursor: default; }
.dp-more { display: block; width: 16px; height: 16px; margin: 3px 0 0 9.9px; cursor: pointer; background: url(/img/sd/DuplicateRulesSettings-ToolsButtonImage.svg) no-repeat 0 0; }
.dp-more:hover { background-position: 0 -16px; }
.dp-info { position: relative; margin: 0; }
.dp-tip { position: absolute; left: 24px; top: -51px; width: 321.8px; box-sizing: border-box; padding: 15px 20px; background: #fff; border-left: 4px solid #8ecb60; box-shadow: rgba(0,0,0,.25) 0 2px 8px; font: 14px/20px 'Bpmonline Open Sans', sans-serif; color: #444; z-index: 20; cursor: default; }
.dp-grid { margin-top: 20px; }
.dp-gh { height: 28px; box-sizing: border-box; border-bottom: 1px solid #e0e0e0; padding: 2px 6px 0; font: 12.992px/22px 'Bpmonline Open Sans', sans-serif; color: #999; margin-bottom: 6px; }
.dp-gr { height: 30px; box-sizing: border-box; padding: 5px 6px 0; font: 14px/19.6px 'Bpmonline Open Sans', sans-serif; color: #444; cursor: pointer; }
.dp-gr.alt { background: #f7f7f7; }
.dp-gr.sel { background: #e4ebfa; }
.dp-attrs .cl-nodata.l { padding: 5px 6px; }
.dp-pick { width: 460px; }
.dp-plist { max-height: 360px; overflow-y: auto; margin: -12px 0 20px; }
.cl-dup .cl-grid { padding-right: 28px; }
.cl-dup .cl-gcap label { padding-top: 1px; box-sizing: border-box; }
.cl-dup .cl-cell:first-child { white-space: normal; }
.cl-dup .cl-filter .cl-mk.g { margin-left: -1.5px; }
.cl-dup .cl-tagb { margin-left: -13.7px; align-self: flex-start; margin-top: 9px; }
.dp-gcap { padding-right: 11.25px; }
.lg-card.full .lg-cbtns { padding-left: 20px; }
.dp-tagbtn { background-position: 11.5px 5.5px; }
/* вибір колонки (StructureExplorer): 568×420 */
.se-modal { position: relative; width: 568px; height: 420px; box-sizing: border-box; background: #fff; border-top: 3px solid #64b8df; box-shadow: rgba(0,0,0,.25) 0 0 8px; padding: 15px 5px 10px; font-family: 'Bpmonline Open Sans', sans-serif; }
.se-hdr { height: 37px; padding: 5px 0 0 25px; box-sizing: border-box; position: relative; }
.se-cap { font: 22px/30px 'Bpmonline Open Sans Light', sans-serif; color: #64b8df; }
.se-btns { display: flex; gap: 9px; padding: 21px 0 0 25px; }
.se-obj { padding: 31px 0 0 59px; font: 18px/24.5px 'Bpmonline Open Sans Light', sans-serif; color: #0e84cf; }
.se-body { padding: 17px 0 0 60px; }
.se-lbl { display: block; font: 14px/19px 'Bpmonline Open Sans', sans-serif; color: #444; }
.se-cbo { position: relative; width: 447px; height: 28px; margin-top: 9px; box-sizing: border-box; border: 1px solid #c8c8c8; padding: 0 34px 0 10px; cursor: pointer; }
.se-cbo input { width: 100%; height: 26px; border: 0; outline: 0; padding: 0; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; background: #fff; cursor: pointer; }
.se-cbo input::placeholder { color: #444; opacity: 1; }
.se-cbo i { position: absolute; right: 8px; top: 5px; width: 16px; height: 16px; background: url(/img/sd/comboboxedit-arrow.png) no-repeat; }
.se-list { left: 0; width: 445px; top: 28.5px; max-height: 400px; }
.dp-empty { height: 21px; text-align: center; font: 14px/21px 'Bpmonline Open Sans', sans-serif; color: #999; }
/* ---------- пошук дублів (LazyDuplicatesPageV2) ---------- */
.ds-wrap .lg-cbtns { align-items: flex-start; }
.ds-wrap .lg-cbtns .sp { flex: 1; }
.ds-status { font: 15px/30.5px 'Bpmonline Open Sans', sans-serif; color: #006ce0; white-space: nowrap; }
.ds-body { padding: 37px 24px 8px 8px; }
.ds-box { background: #fff; border: 1px solid #e6e6e6; border-radius: 8px; padding: 20px; min-height: 680px; }
.ds-group + .ds-group { margin-top: 27px; }
.ds-ghdr { display: flex; align-items: flex-start; height: 31px; }
.ds-gtitle { font: 17px/23px 'Bpmonline Open Sans', sans-serif; color: #444; }
.ds-selall { margin: 5px 0 0 5px; font: 12px/16.5px 'Bpmonline Open Sans', sans-serif; color: #4e7bd8; cursor: pointer; }
.ds-ghdr .sp { flex: 1; }
.ds-btn { height: 25px; box-sizing: border-box; border: 1px solid #b4c1d2; border-radius: 2px; padding: 4.29px 9.1px 5.07px 10px; font: 13px/15.6px 'Bpmonline Open Sans', sans-serif; color: #4e7bd8; cursor: pointer; white-space: nowrap; }
.ds-btn + .ds-btn { margin-left: 16.7px; }
.ds-btn.dis { color: #aeaeae; cursor: default; pointer-events: none; }
.ds-cap { display: flex; height: 28px; box-sizing: border-box; border-bottom: 1px solid #e0e0e0; padding: 4px 6px 0; margin-bottom: 6px; }
.ds-cap label { box-sizing: border-box; padding-right: 20px; font: 12.992px/18px 'Bpmonline Open Sans', sans-serif; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-row { position: relative; display: flex; height: 30px; box-sizing: border-box; padding: 5px 6px 0; margin-bottom: 1px; cursor: pointer; }
.ds-row.alt { background: #f7f7f7; }
.ds-row.sel { background: #e4ebfa; }
.ds-cb { position: absolute; left: 3px; top: 7px; margin: 0; }
.ds-cell { box-sizing: border-box; padding-right: 20px; font: 14px/19.6px 'Bpmonline Open Sans', sans-serif; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-cell.first { padding-left: 32px; }
.ds-cell a { color: #4e7bd8; text-decoration: none; }
.ds-empty { padding: 40px 0; text-align: center; font: 18px 'Bpmonline Open Sans Light', sans-serif; color: #444; }
.ds-wrap .lg-chdr, .ds-wrap .lg-cbtns { margin-right: 8px; }
.ds-wrap .lg-cbtns { height: 80px; }
.ds-body { padding: 8px 16px 8px 8px; }
.ds-gtitle { padding-right: 20px; }
/* об'єднання дублів */
.dm-modal { width: 640px; height: auto; max-height: 80vh; display: flex; flex-direction: column; }
.dm-desc { padding: 10px 25px 0; font: 14px/20px 'Bpmonline Open Sans', sans-serif; color: #444; }
.dm-body { flex: 1; overflow-y: auto; padding: 10px 25px; }
.dm-field { margin-top: 14px; }
.dm-cap { font: 13px/18px 'Bpmonline Open Sans', sans-serif; color: #999; margin-bottom: 4px; }
.dm-opt { display: flex; align-items: center; gap: 8px; min-height: 26px; font: 14px/19px 'Bpmonline Open Sans', sans-serif; color: #444; cursor: pointer; word-break: break-word; }
.dm-radio { width: 16px; height: 16px; flex: none; background: url(/img/sd/Radiobutton_empty.svg) no-repeat; }
.dm-radio.on { background-image: url(/img/sd/Radiobutton_checked.svg); }
.dm-btns { display: flex; gap: 9px; padding: 20px 25px 10px; }

/* ---- «Умовне форматування записів» (SuColorSettingSectionV2 / SuColorSettingPageV2, пакет _SalesUp_Color) ---- */
.empty-grid-message { font-family: 'Bpmonline Open Sans Light', sans-serif; color: #999; width: 477px; margin: 0 auto; }
.empty-grid-message .image-container { width: 135px; height: 139px; margin: 1px auto 0; }
.empty-grid-message .image-container img { width: 135px; height: 139px; display: block; }
.empty-grid-message .title { font-size: 24px; margin-top: 52px; margin-left: 29px; }
.empty-grid-message label { text-align: left; display: block; }
.empty-grid-message .description { font-size: 28px; margin-top: 29px; padding: 11px 0 13px 30px; box-shadow: rgb(84, 184, 223) -3px 0 0 0; }
.empty-grid-message .description div { padding-top: 11px; }
.empty-grid-message .description div:first-of-type { padding-top: 0; }
.empty-grid-message .description a { color: #4e7bd8; text-decoration: none; }
.cl-supv { position: relative; display: inline-block; width: 24px; height: 24px; margin-left: 12px; vertical-align: middle; }
.cl-supv img { width: 24px; height: 48px; object-fit: none; object-position: 0 0; display: block; clip-path: inset(0 0 24px 0); }
.cl-supv:hover img { transform: translateY(-24px); clip-path: inset(24px 0 0 0); }
.cl-suptip { position: absolute; left: 0; top: 28px; z-index: 70; background: #fff; padding: 10px; box-shadow: rgba(0,0,0,.12) 0 0 2px 0, rgba(0,0,0,.24) 0 2px 4px 0; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; white-space: nowrap; }
.su-color-preview-wrap { display: flex; }
.su-color-preview-wrap .su-color-preview { min-width: 200px; }
.su-color-preview-wrap .su-color-preview .su-color-preview-title { font-weight: bold; padding-left: 13px; padding-bottom: 5px; }
.su-color-preview-wrap .su-color-preview .su-color-preview-item { padding: 5px; margin: 3px; border-left: 10px solid transparent; }

.sc-page { background: #ebeeef; min-height: calc(100vh - 56px); padding: 0 0 8px; box-sizing: border-box; font-family: 'Bpmonline Open Sans', sans-serif; color: #444; }
.sc-title { height: 56px; box-sizing: border-box; padding: 16px 0 0 25px; font: 20px/26px 'Bpmonline Open Sans Light', sans-serif; font-weight: 500; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-btns { height: 50px; display: flex; gap: 9.75px; align-items: flex-start; padding-left: 20px; }
.sc-box { margin: 8px 8px 0; background: #fff; border: 1px solid #e6e6e6; border-radius: 8px; padding: 20px; }
.sc-row { display: flex; height: 32px; }
.sc-half { width: 50%; display: flex; }
.sc-lbl { width: 150px; flex: none; box-sizing: border-box; padding: 6px 14px 0 0; text-align: right; font: 13px/18px 'Bpmonline Open Sans', sans-serif; color: #999; position: relative; }
.sc-lbl.req::after { content: '*'; color: #e14a4a; margin-left: 2px; position: absolute; right: 8px; top: 4px; }
.sc-ctl { flex: 1; position: relative; height: 28px; box-sizing: border-box; border-bottom: 1px dotted #c8c8c8; padding-right: 10px; background: #fff; }
.sc-ctl input { width: 100%; height: 26px; margin-top: 1px; border: 0; outline: 0; padding: 0 0 0 1px; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; background: #fff; -webkit-text-fill-color: #444; opacity: 1; }
.sc-ctl.dis::after { content: ''; position: absolute; top: 4px; right: 0; width: 24px; height: 20px; background: url(/img/sd/baseedit-readonly.png) 50% 50% no-repeat; display: none; }
.sc-ctl.dis:hover::after { display: block; }
.sc-mod { margin: 8px 8px 0; background: #fff; border: 1px solid #e6e6e6; border-radius: 8px; padding: 20px; min-height: calc(100vh - 260px); box-sizing: border-box; }

/* su-color-setting (Angular Material: mat-accordion / mat-expansion-panel, ngx-colors, mat-slide-toggle) */
.su-cs { font: 14px/20px Roboto, sans-serif; color: rgba(0,0,0,.87); }
.su-panel { background: #fff; box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.14), 0 1px 5px rgba(0,0,0,.12); transition: margin 225ms cubic-bezier(.4,0,.2,1); }
.su-panel:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.su-panel:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.su-panel.exp { margin: 16px 0; border-radius: 4px; }
.su-panel.exp:first-child { margin-top: 0; }
.su-panel.dragging { opacity: .4; }
.su-phdr { position: relative; display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 24px; cursor: pointer; font-weight: 500; border-radius: inherit; }
.su-panel.exp .su-phdr { height: 64px; }
.su-panel:not(.exp) .su-phdr:hover { background: rgba(0,0,0,.04); }
.su-prev { padding: 10px; border-left: 10px solid transparent; line-height: 16px; }
.su-del { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: rgba(0,0,0,.54); cursor: pointer; margin-right: 24px; }
.su-del:hover { background: rgba(0,0,0,.04); }
.su-tip { position: absolute; right: 24px; top: calc(100% - 6px); z-index: 20; background: #616161; color: #fff; font: 12px/16px Roboto, sans-serif; padding: 4px 8px; border-radius: 4px; white-space: nowrap; }
.su-pbody { padding: 0 24px 16px; font-weight: 400; letter-spacing: .25px; }
.su-name { position: relative; height: 56px; }
.su-name label { position: absolute; left: 0; top: 23px; font: 500 13px/16px Montserrat, sans-serif; color: #999; pointer-events: none; transition: top 150ms, font-size 150ms; }
.su-name.fl label { top: 4px; font-size: 10px; }
.su-name input { position: absolute; left: 0; right: 0; top: 16px; height: 20px; border: 0; outline: 0; padding: 0; background: transparent; font: 500 13px/20px Montserrat, sans-serif; color: rgba(0,0,0,.87); border-bottom: 1px solid rgba(0,0,0,.42); padding-bottom: 2px; box-sizing: content-box; }
.su-name input:focus { border-bottom: 2px solid #3f51b5; }
.su-fields { display: flex; height: 30px; margin-bottom: 20px; letter-spacing: .25px; }
.su-f { display: flex; align-items: center; }
.su-f + .su-f { margin-left: 40px; }
.su-fl { margin-right: 10px; }
.su-fs { width: 35px; border: 0; border-bottom: 1px solid #a7a7a7; padding: 1px 2px; font: 14px Roboto, sans-serif; color: rgba(0,0,0,.87); outline: 0; }
.su-fs:focus { border-color: #000; }
.su-tg { display: flex; align-items: center; gap: 0; cursor: pointer; user-select: none; }
.su-sw { position: relative; width: 36px; height: 20px; margin-left: 4px; margin-right: 8px; }
.su-sw i { position: absolute; left: 0; top: 3px; width: 36px; height: 14px; border-radius: 7px; background: #e0e0e0; }
.su-sw b { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 10px; background: #616161; box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.12); transition: left 75ms; }
.su-tg.on .su-sw i { background: #7986cb; }
.su-tg.on .su-sw b { left: 16px; background: #3949ab; }
.su-filter { min-height: 150px; }
.su-add button { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 0; border-radius: 2px; background: none; color: #004fd6; font: 500 14px/32px Roboto, sans-serif; letter-spacing: 1.25px; text-transform: uppercase; cursor: pointer; }
.su-add button:hover { background: rgba(0,79,214,.04); }
.su-add button span:first-child { display: inline-flex; width: 18px; height: 18px; }
.su-panel + .su-panel:not(.exp) { border-top: 0; }
.su-items + .su-add { margin-top: 0; }
/* ngx-colors */
.ngx-colors { display: inline-block; }
.app-color-picker { line-height: 1px; font-family: sans-serif; }
.app-color-picker .preview { margin: 2px; display: inline-block; box-sizing: border-box; border-radius: 100%; background: #fff; cursor: pointer; padding: 3px; box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 1px 1px 1px rgba(0,0,0,.14), 0 1px 1px 1px rgba(0,0,0,.12); }
.app-color-picker .preview .preview-background { border-radius: 100%; background-image: linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%); background-size: 8px 8px; background-position: 0 0,0 4px,4px -4px,-4px 0; }
.app-color-picker .preview .circle { height: 20px; width: 20px; box-sizing: border-box; border-radius: 100%; cursor: pointer; }
.app-color-picker .preview .circle.colornull { background: linear-gradient(135deg, rgba(236,236,236,.7) 0%, rgba(236,236,236,.7) 45%, #de0f00 50%, rgba(236,236,236,.7) 55%, rgba(236,236,236,.7) 100%); }
.ngx-colors-overlay { position: fixed; inset: 0; z-index: 2000; }
.ngx-panel { position: fixed; width: 250px; background: #fff; border-radius: 5px; box-shadow: rgba(0,0,0,.2) 0 2px 4px -1px, rgba(0,0,0,.14) 0 4px 5px 0, rgba(0,0,0,.12) 0 1px 10px 0; }
.ngx-colors-grid { display: flex; flex-wrap: wrap; width: 220px; margin: 15px; }
.ngx-c { width: 44px; height: 39px; display: flex; justify-content: center; }
.ngx-cb { width: 34px; height: 34px; box-sizing: border-box; border-radius: 100%; border: 1px solid rgba(0,0,0,.03); cursor: pointer; transition: transform .1s; }
.ngx-cb:hover { transform: scale(1.1); }
.ngx-cb.sel { box-shadow: 0 0 0 2px #fff inset, 0 0 0 1px #444; }
.ngx-more { background: #f5f5f5; display: grid; place-items: center; }
.ngx-back { width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; }
.ngx-manual { display: flex; align-items: center; width: 220px; height: 48px; margin: 15px; }
.ngx-manual p { margin: 0; width: 87px; text-align: center; font: 10px/48px sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #444; cursor: default; }
.ngx-manual .g-input { flex: 1; height: 45px; border: 1px solid #e8ebed; border-radius: 5px; box-sizing: border-box; }
.ngx-manual input { width: 100%; height: 100%; border: 0; border-radius: 5px; outline: 0; text-align: center; font: 10px sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #595b65; background: #fff; }
.ngx-custom { padding: 15px 15px 0; }
.ngx-chdr { display: flex; align-items: center; height: 34px; margin-bottom: 8px; }
.ngx-chdr .sp { flex: 1; }
.ngx-tb { font: 10px/34px sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #444; padding: 0 6px; cursor: pointer; }
.ngx-sv { position: relative; width: 220px; height: 130px; cursor: crosshair; }
.ngx-sv-w { position: absolute; inset: 0; background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.ngx-sv-b { position: absolute; inset: 0; background: linear-gradient(to top, #000, rgba(0,0,0,0)); }
.ngx-sv i { position: absolute; width: 10px; height: 10px; margin: -6px 0 0 -6px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 1px #000; }
.ngx-sl { display: flex; align-items: center; gap: 10px; height: 60px; }
.ngx-prev { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.ngx-bars { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.ngx-hue, .ngx-alpha { position: relative; height: 14px; border-radius: 3px; cursor: pointer; }
.ngx-hue { background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
.ngx-alpha { background: linear-gradient(to right, rgba(255,255,255,0), var(--c)), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0 / 8px 8px; }
.ngx-hue i, .ngx-alpha i { position: absolute; top: -2px; width: 6px; height: 18px; margin-left: -3px; border: 1px solid #444; border-radius: 2px; background: #fff; }
.cl-mi { position: relative; }
.cl-mimg { position: absolute; left: 11px; top: 8.4px; width: 16px; height: 16px; background-repeat: no-repeat; }
.empty-grid-message, .empty-grid-message label, .empty-grid-message .description { line-height: normal; }
.cl-grid .empty-grid-message { padding-top: 0; margin-top: -2px; }
.cl-grid .empty-grid-message .image-container { margin-top: 0; }
.cl-su .cl-filter .cl-mk.g { margin-left: -1.5px; }
.su-panel.exp:last-child { margin-bottom: 0; }

/* ---------- «Налаштування звітів» (ClientApp #/Printables): список ---------- */
.cap.pr-full .pr-table th, .cap.pr-full .pr-table td { width: 33.333%; }
.cap.pr-full .pr-table tr.pr-sel td { background: #eef3fb; }
.cap.pr-full .pr-table tbody tr { cursor: default; }
.cap.pr-full .pr-table td.mat-column-caption a { color: #004fd6; text-decoration: none; }
/* ---------- картка звіту Word (WordPrintablePage у вкладці ClientApp): класична сторінка 7.x ---------- */
.cap.pr-card { background: #ebeeef; font-family: 'Bpmonline Open Sans', Arial, sans-serif; color: #444; }
.pw-page { min-height: 100%; }
.pw-hdr-wrap { padding: 6px 6px 0; }
.pw-hdr { background: #fff; height: 55px; padding: 8px 21px 0; box-sizing: border-box; }
.pw-title { font: 26px/36px 'Bpmonline Open Sans Light', 'Bpmonline Open Sans', sans-serif; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-hbtns { display: flex; gap: 12px; margin-top: 12.5px; }
.pw-hbtns .cl-btn { height: 30px; font-size: 15px; }
.pw-content { display: flex; gap: 5px; padding: 59px 6px 8px; align-items: flex-start; }
.pw-left { width: 338px; flex: none; display: flex; flex-direction: column; gap: 6px; }
.pw-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pw-box { background: #fff; border: 1px solid #e6e6e6; box-sizing: border-box; }
.pw-profile { padding: 20px 20px 21px; height: 275px; }
.pw-f { margin-bottom: 6px; }
.pw-f:first-of-type { margin-bottom: 8px; }
.pw-profile .pw-cb { height: 33.5px; box-sizing: border-box; }
.pw-profile .pw-cb .cl-cb { width: 16px; height: 16px; box-sizing: border-box; }
.pw-f.pw-lkf .pw-l { padding-left: 7px; }
.pw-f.pw-lkf { margin-bottom: 6px; }
.pw-l { font: 13px/18px 'Bpmonline Open Sans', sans-serif; color: #999; padding-left: 1px; margin-bottom: 2px; }
.pw-e { height: 28px; box-sizing: border-box; border-bottom: 1px dotted #c8c8c8; display: flex; align-items: center; position: relative; }
.pw-e input { width: 100%; height: 26px; border: 0; outline: 0; padding: 0 1px 0 2px; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; background: transparent; }
.pw-e.dis input { color: #444; cursor: default; }
.pw-e .pw-lk { position: absolute; right: 0; top: 6px; width: 16px; height: 16px; background: url(/img/sd/arrow_group.svg) 0 -24px / 24px no-repeat; pointer-events: none; }
.pw-dd { position: absolute; left: 0; right: 0; top: 28px; max-height: 300px; overflow: auto; z-index: 10; }
.pw-cb { display: flex; align-items: center; gap: 4px; height: 33.5px; cursor: pointer; }
.pw-e + .pw-cb, .pw-f + .pw-cb { margin-top: 5.5px; }
.pw-cb .cl-cb { border-color: #b4c1d2; width: 16px; height: 16px; }
.pw-cbl { font: 13px/18px 'Bpmonline Open Sans', sans-serif; color: #999; padding-left: 1px; }
.pw-import { padding: 20px 20px 20px; position: relative; }
.pw-desc { font: 14px/19px 'Bpmonline Open Sans', sans-serif; color: #444; }
.pw-word { display: block; width: 72px; height: 69px; margin: 24px 0 9px 108px; }
.pw-file { display: flex; align-items: center; justify-content: center; gap: 8px; height: 19px; }
.pw-fname { font: 14px/19px 'Bpmonline Open Sans', sans-serif; color: #444; cursor: pointer; }
.pw-fname:hover { text-decoration: underline; }
.pw-fdel { width: 16px; height: 16px; margin-top: 6px; background: url(/img/sd/WordPrintablePage-FileImportDeleteTemplateIcon.png) center no-repeat; cursor: pointer; }
.pw-file-btns { display: flex; justify-content: space-between; margin-top: 25px; }
.pw-fbtn { display: inline-flex; flex-direction: column; align-items: center; gap: 4.5px; font: 14px/18px 'Bpmonline Open Sans', sans-serif; color: #444; cursor: pointer; }
.pw-fbtn i { width: 16px; height: 16px; background: center no-repeat; }
.pw-fbtn i.dl { background-image: url(/img/sd/WordPrintablePage-FileImportDownloadTemplateIcon.png); }
.pw-fbtn i.ul { background-image: url(/img/sd/WordPrintablePage-FileImportUploadTemplateIcon.png); }
.pw-fbtn.dis { color: #999; cursor: default; opacity: .6; }
.pw-info { padding: 20px 20px 23px; }
.pw-icap { display: flex; align-items: center; gap: 12px; height: 35px; margin-bottom: 15px; }
.pw-icap img { width: 32px; height: 32px; }
.pw-icap span { font: 19px/26px 'Bpmonline Open Sans', sans-serif; color: #22ac14; }
.pw-isteps-cap { font: 14px/19px 'Bpmonline Open Sans', sans-serif; color: #444; margin-bottom: 3px; }
.pw-isteps { margin: 0 0 15px; padding-left: 15px; font: 14px/19px 'Bpmonline Open Sans', sans-serif; color: #444; }
.pw-isteps a, .pw-ilink { color: #4e7bd8; text-decoration: none; }
.pw-idesc { font: 14px/19px 'Bpmonline Open Sans', sans-serif; color: #444; margin-bottom: 3px; }
.pw-ilink { display: block; font: 14px/19px 'Bpmonline Open Sans', sans-serif; }
.pw-module, .pw-tables { padding: 20px 20px 47px; }
.pw-gcap { display: flex; align-items: center; height: 30px; padding-left: 29px; gap: 0; }
.pw-gt { font: 15px/21px 'Bpmonline Open Sans', sans-serif; color: #4e7bd8; margin-right: 11px; }
.pw-gcap .cl-ginfo { margin-left: 0; margin-top: 2px; }
.pw-add { width: 40px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 2px; }
.pw-add:hover { background: #f2f6fc; }
.pw-add i { width: 16px; height: 16px; background: url(/img/sd/MacrosListDetailModule-AddIcon.png) center no-repeat; }
.pw-add i.table { background-image: url(/img/sd/WordPrintablePage-AddTablePartIcon.png); }
.pw-grid { margin: 6px 0 0 24px; }
.pw-gh { height: 31px; box-sizing: border-box; padding-top: 6.5px; font: 13px/18px 'Bpmonline Open Sans', sans-serif; color: #999; border-bottom: 1px solid #e6e6e6; }
.pw-gr { height: 31px; box-sizing: border-box; padding-top: 7px; font: 14px/19px 'Bpmonline Open Sans', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-gr a { color: #4e7bd8; cursor: pointer; }
.pw-gr:hover { background: #f2f6fc; }
.pw-gempty { padding: 12px 0; font: 12px 'Bpmonline Open Sans', sans-serif; color: #999; text-align: center; }

/* ---------- «Імпорт даних» (FileImportWizard): класичний майстер, зона 1012px ---------- */
.cap.fi-root { background: #fff; font-family: 'Bpmonline Open Sans', Arial, sans-serif; color: #444; }
.fi-title { font: 38px/52px 'Bpmonline Open Sans Light', 'Bpmonline Open Sans', sans-serif; color: #444167; padding: 0 20px; height: 52px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-tools { display: flex; gap: 9px; padding: 19.5px 20px 0; height: 30px; }
.cap.ao-full .fi-tb { display: inline-flex; align-items: center; height: 30px; padding: 0 10.5px; border: 1px solid transparent; border-radius: 2px; font: 15px/21px 'Bpmonline Open Sans', sans-serif; color: #006ce0; text-transform: uppercase; cursor: pointer; box-sizing: border-box; }
.fi-tb:hover { background: #f2f6fc; }
.fi-tb.dis { color: #999; cursor: default; }
.fi-tb.dis:hover { background: transparent; }
.fi-page { width: 1000px; margin: 56px 6px 0; }
.fi-drop { height: 291.5px; border: 1px dashed #999; border-radius: 10px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; padding-top: 30px; }
.fi-drop.over { background: #f2f6fc; border-color: #006ce0; }
.fi-drop-img { width: 135px; height: 139px; }
.fi-drop-cap { margin-top: 26px; font: 16px/21.5px 'Bpmonline Open Sans', sans-serif; color: #6e6e70; }
.cap.ao-full .fi-pick { display: inline-flex; align-items: center; height: 29px; padding: 0 11.5px; margin-top: 16px; border: 1px solid #b4c1d2; font: 14px/19px 'Bpmonline Open Sans', sans-serif; color: #4e7bd8; cursor: pointer; box-sizing: border-box; }
.fi-pick:hover { background: #f2f6fc; }
.fi-where { display: flex; align-items: center; justify-content: center; margin-top: 19px; gap: 16px; }
.fi-where-cap { font: 16px/22px 'Bpmonline Open Sans', sans-serif; color: #6e6e70; }
.cap.ao-full .fi-tpl { display: inline-flex; align-items: center; height: 31.5px; padding: 0 11px; border: 1px solid #b4c1d2; border-radius: 2px; font: 15px/21px 'Bpmonline Open Sans', sans-serif; color: #006ce0; text-transform: uppercase; cursor: pointer; box-sizing: border-box; }
.fi-objs { display: flex; justify-content: center; gap: 10px; margin-top: 26.5px; height: 100px; }
.cap.ao-full .fi-obj { display: inline-flex; align-items: center; height: 100px; padding: 0 24px 0 0; background: #fff; border: 1px solid #b4c1d2; border-radius: 10px; cursor: pointer; box-sizing: border-box; position: relative; }
.fi-obj:hover { background: #f2f6fc; }
.fi-obj.on { border-color: #4e7bd8; box-shadow: inset 0 0 0 1px #4e7bd8; }
.fi-obj img { width: 100px; height: 100px; }
.cap.ao-full .fi-obj.rel { padding-right: 45px; }
.cap.ao-full .fi-obj > span { font: 20px/28px 'Bpmonline Open Sans Light', 'Bpmonline Open Sans', sans-serif; color: #444; text-transform: uppercase; }
.fi-dd { position: absolute; left: 0; top: 102px; width: 280px; max-height: 320px; overflow: auto; z-index: 10; text-transform: none; }
.fi-dd .opt { font: 14px/20px 'Bpmonline Open Sans', sans-serif; }
.fi-next { display: flex; justify-content: center; margin-top: 20px; }
.cap.ao-full .fi-next .cl-btn { text-transform: uppercase; box-sizing: border-box; }
.cap.ao-full .fi-next { margin-top: 50px; }
.cap.ao-full .fi-cols .fi-next, .cap.ao-full .fi-dups .fi-next, .cap.ao-full .fi-result .fi-next { margin-top: 24px; }
.cap.ao-full .fi-objs { margin-top: 25px; }
.cap.ao-full .fi-pick { margin-top: 14px; }
.fi-next .cl-btn.dis { background: #ccc; cursor: default; }
.fi-sub { font: 14px/19px 'Bpmonline Open Sans', sans-serif; color: #444; margin-bottom: 16px; }
.fi-grid { border-top: 1px solid #e6e6e6; }
.fi-gh, .fi-gr { display: grid; grid-template-columns: 300px 320px 1fr; gap: 16px; align-items: center; min-height: 36px; border-bottom: 1px solid #e6e6e6; padding: 0 8px; }
.fi-gh { font: 13px/18px 'Bpmonline Open Sans', sans-serif; color: #999; }
.fi-gr { font: 14px/19px 'Bpmonline Open Sans', sans-serif; }
.fi-oc select { width: 100%; height: 26px; border: 0; border-bottom: 1px dotted #c8c8c8; background: #fff; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; outline: 0; }
.fi-ex { color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-dlist { display: flex; flex-direction: column; gap: 8px; }
.fi-dup { display: flex; align-items: center; gap: 8px; font: 14px/19px 'Bpmonline Open Sans', sans-serif; cursor: pointer; }
.fi-res-cap { font: 19px/26px 'Bpmonline Open Sans', sans-serif; color: #22ac14; margin-bottom: 12px; }
.fi-res-row { font: 14px/22px 'Bpmonline Open Sans', sans-serif; }
.fi-errs { margin-top: 12px; max-height: 360px; overflow: auto; border: 1px solid #e6e6e6; padding: 8px; }
.fi-err { font: 13px/20px 'Bpmonline Open Sans', sans-serif; color: #c0392b; }

/* ---------- «Менеджер ліцензій» (ClientApp #/LicenseManager) ---------- */
.cap.lm-full .lm-table { table-layout: fixed; width: 100%; }
.cap.lm-full .lm-table th, .cap.lm-full .lm-table td { width: 192px !important; flex: none !important; box-sizing: content-box; } /* 202 − 10 (content-box, padding 0 5) */
.cap.lm-full .lm-table th.mat-column-packageName, .cap.lm-full .lm-table td.mat-column-packageName { width: 387.5px !important; }
.cap.lm-full .lm-table th { width: 191px !important; }
.cap.lm-full .lm-table th.mat-column-packageName { width: 386px !important; }
.cap.lm-full .lm-table th.mat-column-count, .cap.lm-full .lm-table td.mat-column-count { width: 192px !important; }
.cap.lm-full .lm-table td.mat-mdc-cell { padding: 0 5px !important; }
.cap.lm-full .lm-table td.mat-column-packageName { padding-left: 20px !important; }
.cap.lm-full .lm-table td.mat-column-count { padding-right: 10px !important; }
.cap.lm-full .lm-table th.mat-mdc-header-cell { padding-left: 5px !important; padding-right: 5px !important; }
.cap.lm-full .lm-table th.mat-column-packageName { padding-left: 20px !important; }
.cap.lm-full .lm-table th { height: 28px !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important; vertical-align: top !important; padding-top: 4px !important; }
.cap.lm-full .lm-table thead { top: 156px !important; }
.cap.lm-full .license-name { color: #004fd6; text-decoration: none; }
.cap.lm-full .filters { display: flex; align-items: flex-end; gap: 0; }
.cap.lm-full ts-select-menu .mat-mdc-form-field { width: 138px; margin-right: 24px; }
.cap.lm-full .select-menu-trigger { display: inline-flex; align-items: center; gap: 0; font: 14px/19px 'Open Sans', sans-serif; color: #444; }
.cap.lm-full .select-menu-trigger-icon { width: 16px !important; height: 16px !important; display: inline-flex !important; flex: none; }
.cap.lm-full .select-menu-trigger-icon svg { width: 16px !important; height: 16px !important; }
.cap.lm-full .lm-table { margin-top: 174px !important; }
.cap.lm-full ts-select-menu .mat-mdc-form-field { margin-top: 2px; }
/* сторінка пакета */
.cap.lm-full .lm-chart-pane { padding: 29px 21px 21px !important; box-sizing: border-box; height: 332px; }
.cap.lm-full .lm-chart-pane .title { font: 22px/19px 'Bpmonline Open Sans Light', serif; color: #444; text-align: center; }
.cap.lm-full .lm-chart { position: relative; width: 256px; height: 160px; margin-top: 44px; }
.cap.lm-full .lm-chart svg { display: block; }
.cap.lm-full .lm-counter { position: absolute; left: 0; right: 0; top: 43.5px; text-align: center; font: 32px/36px 'Open Sans', sans-serif; color: #444; }
.cap.lm-full .lm-chart-pane .total { position: absolute; left: 0; right: 0; top: 83.5px; text-align: center; font: 16px/19px 'Open Sans', sans-serif; color: #999; }
.cap.lm-full .lm-legend { margin-top: 24px; text-align: center; }
.cap.lm-full .lm-dot { display: none; }
.cap.lm-full .counter-label { font: 14px/19px 'Open Sans', sans-serif; color: #444; }
.cap.lm-full .main-content.pane { flex: 1; min-width: 0; padding: 29px 20px 20px !important; box-sizing: border-box; min-height: 771px; }
.cap.lm-full .lm-dcap { display: flex; align-items: center; justify-content: space-between; height: 19px; margin-bottom: 5.5px; }
.cap.lm-full .lm-dcap > span { font: 22px/19px 'Bpmonline Open Sans Light', serif; color: #004fd6; }
.cap.lm-full .lm-dtable { width: 100%; margin-bottom: 44px; table-layout: fixed; }
.cap.lm-full .lm-dtable th, .cap.lm-full .lm-dtable td { height: 40px; }
.cap.lm-full .lm-dtable th.mat-column-packageName, .cap.lm-full .lm-dtable td.mat-column-packageName { width: 273px; padding-left: 10px; }
.cap.lm-full .lm-dtable th.mat-column-type, .cap.lm-full .lm-dtable td.mat-column-type { width: 145.5px; }
.cap.lm-full .lm-dtable th.mat-column-startDate, .cap.lm-full .lm-dtable td.mat-column-startDate { width: 176.5px; }
.cap.lm-full .lm-dtable th.mat-column-dueDate, .cap.lm-full .lm-dtable td.mat-column-dueDate { width: 220px; }
.cap.lm-full .lm-dtable th.mat-column-isActive, .cap.lm-full .lm-dtable td.mat-column-isActive { width: 125px; }
.cap.lm-full .lm-dtable th.mat-column-count, .cap.lm-full .lm-dtable td.mat-column-count { width: 144px; }
.cap.lm-full .lm-dtable tr.mat-mdc-row, .cap.lm-full .lm-utable tr.mat-mdc-row { height: 37px !important; }
.cap.lm-full .lm-utable td.mat-column-jobTitle span { white-space: normal; }
.cap.lm-full .lm-ucap { margin-bottom: 48px; }
.cap.lm-full .lm-usearch ts-search-input { display: block; }
.cap.lm-full .lm-uwrap { max-height: 373px; overflow: auto; }
.cap.lm-full .lm-utable { width: 100%; table-layout: fixed; }
.cap.lm-full .lm-utable th.multi-select-column, .cap.lm-full .lm-utable td.multi-select-column { width: 36px; padding: 0 0 0 4px !important; }
.cap.lm-full .lm-utable td, .cap.lm-full .lm-utable th, .cap.lm-full .lm-dtable td, .cap.lm-full .lm-dtable th { padding-left: 5px !important; padding-right: 5px !important; box-sizing: border-box !important; }
.cap.lm-full .lm-dtable td.mat-column-packageName, .cap.lm-full .lm-dtable th.mat-column-packageName { padding-left: 10px !important; }
.cap.lm-full .lm-utable th.mat-column-sysAdminUnit, .cap.lm-full .lm-utable td.mat-column-sysAdminUnit { width: 300px; padding-left: 5px; }
.cap.lm-full .lm-utable th.mat-column-email, .cap.lm-full .lm-utable td.mat-column-email { width: 292px; }
.cap.lm-full .lm-utable th.mat-column-jobTitle, .cap.lm-full .lm-utable td.mat-column-jobTitle { width: 246px; }
.cap.lm-full .lm-utable th.mat-column-source, .cap.lm-full .lm-utable td.mat-column-source { width: 151px; }
.cap.lm-full .lm-utable .lm-del-col { width: 51px; text-align: right; padding-right: 10px; }
.cap.lm-full .lm-del { width: 24px; height: 24px; border: 0; background: transparent; padding: 0; cursor: pointer; opacity: 0; color: #999; }
.cap.lm-full .lm-utable tr:hover .lm-del { opacity: 1; }
.cap.lm-full .lm-del .mat-icon { width: 16px; height: 16px; display: inline-flex; }
.cap.lm-full .lm-add { height: 26px; padding: 0 10px 0 8px; margin-top: 3px; margin-left: -4px; display: inline-flex; align-items: center; gap: 4px; font: 13px/18px 'Bpmonline Open Sans', sans-serif; color: #004fd6; background: transparent; border: 0; border-radius: 2px; cursor: pointer; }
.cap.lm-full .lm-add .mat-icon { width: 16px; height: 16px; display: inline-flex; }
.cap.lm-full .lm-add:hover { background: #f2f6fc; }
.cap.lm-full .lm-pick { width: 480px; }
.cap.lm-full .lm-cand-mail { color: #999; margin-left: auto; font-size: 12px; }

/* Класичні реєстри дизайнера системи: вирівнювання вправо (числа) та дрібний шрифт (Стан у моделях ML) */
.cl-gcap label.r, .cl-cell.r { text-align: right; }
.cl-cell.sm { font-size: 12px; }
/* «Моделі машинного навчання»: реєстр Creatio з рядками 42px (padding 5px 20px) та відступом колонок 20px */
.cl-ml .cl-row { min-height: 42px; align-items: flex-start; margin-bottom: 1px; }
.cl-ml .cl-cell, .cl-ml .cl-gcap label { padding-right: 20px; }
.cl-ml .cl-cell { padding-top: 5px; padding-bottom: 0; line-height: 19px; height: 25px; }
.cl-ml .cl-cell.sm { line-height: 20px; }
/* «Майстер мобільного додатка»: лише кнопка додавання; місце рядка фільтрів зберігається (заголовок колонок на 211px) */
.cl-mob .cl-grid { padding-top: 58px; }
.cl-ml .cl-tagb { margin-left: -25px; margin-top: 6px; }
/* ролі порталу: без рядка дій — дерево та картка одразу під заголовком (Creatio: перший рядок дерева 128px, «Назва» 147px) */
.cl-roles.portal .cl-tree { padding-top: 16px; }
.cl-roles.portal .cl-rcard { padding-top: 8px; }
.cl-roles .cl-group.closed + .cl-group { margin-top: -3px; } /* згорнуті деталі Creatio стоять впритул (39px кожна) */

/* ---- Налаштування головної сторінки порталу (PortalMainPageModule): білий фон, панель вкладок 28..1412, сітка дашборда ---- */
.cl-pm { font-family: 'Bpmonline Open Sans', Arial, sans-serif; color: #444; background: #fff; min-height: 100%; padding: 0 20px 20px; box-sizing: border-box; }
.cl-pm .cl-hdr { padding-left: 0; }
.cl-pm-tabs { position: relative; display: flex; align-items: flex-start; height: 32px; }
.cl-pm-tabs .cl-tabs { flex: 1; margin: 0 40px 0 0; }
.cl-pm-tabs .cl-tabs ul { margin-left: 8px; }
.cl-pm-tabs .cl-tabs li { padding: 3px 6px 0 !important; line-height: 26px; background: #fff; }
.cl-pm-tools { position: absolute; right: 0; top: 0; width: 59px; padding-left: 8px; box-sizing: border-box; height: 32px; }
.cl-pm-gear { display: flex; height: 27px; cursor: pointer; }
.cl-pm-gear .g { width: 29px; height: 27px; background: url(/img/sd/PortalMainPageBuilder-Settings.png) no-repeat 12px 5px / 16px 16px; }
.cl-pm-gear .m { width: 22px; height: 27px; background: #fff; position: relative; }
.cl-pm-gear .m b { position: absolute; left: 4px; top: 11px; width: 0; height: 0; border-top: 4px solid #4d6a98; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.cl-pm-tools .cl-menu { top: 30px; right: -18px; min-width: 250px; }
.cl-pm-grid { position: relative; margin: 10px 1px 0 0; } /* grid-layout-row: padding-right 1px */
.cl-pm-cell { position: absolute; box-sizing: border-box; padding: 10px; }
.cl-pm-web, .cl-pm-list { width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #e2e2e2; border-top: 0; box-shadow: rgba(0,0,0,.1) 0 0 3px 0; background: #fff; }
.cl-pm-list { margin-top: 5px; } /* portal-dashboard-grid-list: margin 5px */
.cl-pm-iframe { display: block; width: 100%; height: calc(100% - 1px); border: 0; }
.cl-pm-search { position: relative; height: 44px; border: 1px solid #c8c8c8; box-sizing: border-box; padding: 0 42px 0 10px; background: #fff; }
.cl-pm-search input { width: 100%; height: 42px; border: 0; outline: 0; padding: 0; font: 16px 'Bpmonline Open Sans', sans-serif; color: #444; background: #fff; }
.cl-pm-search input::placeholder { color: #999; }
.cl-pm-go { position: absolute; right: 0; top: 0; width: 42px; height: 42px; cursor: pointer; background: url(/img/sd/command-line-go.png) no-repeat 20px 13px / 16px 16px; }
.cl-pm-list { position: relative; color: #00bfa5; }
.cl-pm-lh { height: 35px; box-sizing: border-box; border-top: 3px solid #00bfa5; padding: 6px 0 0 14px; display: flex; align-items: flex-start; background: #fff; }
.cl-pm-lh label { flex: 1; height: 26px; font: 17px/26px 'Bpmonline Open Sans', sans-serif; color: #00bfa5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-pm-goto { margin: 1px 4px 0 0; height: 25px; box-sizing: border-box; border: 1px solid #fff; background: #00bfa5; color: #fff; font: 18px/21.6px 'Bpmonline Open Sans', sans-serif; text-transform: uppercase; padding: 1.8px 12.6px 0; cursor: pointer; }
.cl-pm-rows { padding: 9px 17px 14px; }
.cl-pm-row { height: 32px; overflow: hidden; }
.cl-pm-row a { font: 14px/19px 'Bpmonline Open Sans', sans-serif; color: #4e7bd8; cursor: pointer; white-space: nowrap; }
.cl-pm-other { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #e2e2e2; color: #999; font-size: 14px; }

/* ---- Веб-сервіси (WebServiceV2Section / RestWebServiceV2Page / WebServiceMethodPage) ---- */
.cl-wsp .cl-cbody { padding: 8px 8px 8px 8px; gap: 8px; }
.cl-ws .cl-grid { margin-top: -4px; }
.cl-wsprof { display: flex; background: #fff; border: 1px solid #e6e6e6; border-radius: 8px; padding: 21px 0 23px 0; box-sizing: border-box; }
.cl-wsprof .cl-pcol { width: 50%; padding-left: 21px; box-sizing: border-box; gap: 4px; }
.cl-wsprof .cl-pcol + .cl-pcol { padding-left: 0; }
.cl-wsprof .cl-field.num { align-items: flex-start; margin-bottom: -4px; }
.cl-wsprof .cl-field.num .cl-flabel { width: 146px !important; margin-right: 14px; }
.cl-wsprof .cl-field.memo .cl-edit { height: 54px; margin-top: 3px; }
.cl-wsprof .cl-field.memo .cl-flabel { padding-top: 18px; }
.cl-tabbox.ws { border: 1px solid #e6e6e6; border-radius: 8px; min-height: 540px; padding-top: 14px; box-sizing: border-box; }
.cl-tabbox.ws .cl-tabs { margin: 0 1px 0 0; }
.cl-tabbox.ws .cl-tabs li { padding: 0 6px !important; }
.cl-tabbox.ws .cl-tscroll.l { background: url(/img/sd/left-arrow-icon-sprite.png) 14px 6px no-repeat; }
.cl-tabbox.ws .cl-tscroll.r { background: url(/img/sd/right-arrow-icon-sprite.png) 0 6px no-repeat; }
.cl-tabbox.ws .cl-tabc { padding: 6px 27px 20px 20px; }
.cl-tabbox.ws .cl-group-h { height: 39px; margin-left: -4px; }
.cl-tabbox.ws .cl-gtitle { padding-right: 11.25px; }
.cl-tabbox.ws .cl-btn.test { height: 25px; font: 13px/15.6px 'Bpmonline Open Sans', sans-serif; color: #4e7bd8; padding: 0 10.5px; margin-left: 47px; text-transform: none; }
.cl-tabbox.ws .cl-btn.test.dis { color: #aeaeae; }
.cl-tabbox.ws .cl-dtool { margin-left: 9px; }
.cl-dgrid.w.ws { padding-left: 30px; }
.cl-dgrid.w.ws .cl-gcap { margin-top: -3px; }
.cl-dgrid.w.ws .cl-cell .lnk { cursor: pointer; }
/* повідомлення (ts-messagebox) */
.cl-mbox-wrap { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.15); display: flex; align-items: flex-start; justify-content: center; }
.cl-mbox { margin-top: 325px; width: 410px; box-sizing: border-box; background: #fff; border-top: 3px solid #64b8df; box-shadow: rgba(0,0,0,.25) 0 0 8px 0; padding: 30px 30px 32px; }
.cl-mbox-cap { font: 16px/22.4px 'Bpmonline Open Sans Light', sans-serif; color: #444; padding-bottom: 28px; }
.cl-mbox .cl-btn.blue { padding: 0 10.5px; min-width: 85px; justify-content: center; }
/* сторінка методу */
.cl-wsm-wrap { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.15); overflow: auto; }
.cl-wsm { position: absolute; left: 88px; top: 41px; width: 1294px; min-height: 821px; background: #ebeeef; padding-bottom: 8px; }
.cl-wsm-acts { height: 50px; background: #fff; border: 1px solid #e6e6e6; box-shadow: rgba(0,0,0,.2) 0 1px 5px 0; display: flex; align-items: center; gap: 9px; padding-left: 15px; box-sizing: border-box; }
.cl-wsm-acts .cl-btn.blue { padding: 0 10.5px; }
.cl-wsm-acts .cl-btn.plain:has(.cl-mk) { padding: 0 24.9px 0 34px; margin-left: 0; }
.cl-wsm-acts .cl-btn.plain:has(.cl-mk) + .cl-btn { margin-left: -10px; }
.cl-wsm-head { display: flex; margin: 8px 6px 0; background: #fff; border: 1px solid #e6e6e6; border-radius: 8px; padding: 28px 0 0; box-sizing: border-box; height: 185px; }
.cl-wsm-head .cl-pcol { width: 744px; flex: none; padding-left: 20px; box-sizing: border-box; gap: 4px; }
.cl-wsm-head .cl-pcol:first-child .cl-flabel { width: 136px !important; }
.cl-wsm-head .cl-pcol + .cl-pcol { width: auto; padding-left: 51px; }
.cl-wsm-head .cl-field.num .cl-flabel { width: 136px !important; }
.cl-wsm-body { position: relative; margin: 8px 6px 0; background: #fff; border: 1px solid #e6e6e6; border-radius: 8px; min-height: 570px; padding: 14px 0 20px 0; box-sizing: border-box; }
.cl-wsm-body .cl-tabs li { padding: 0 6px !important; }
.cl-wsm-body .cl-tscroll.l { background: url(/img/sd/left-arrow-icon-sprite.png) 14px 6px no-repeat; }
.cl-wsm-body .cl-tscroll.r { background: url(/img/sd/right-arrow-icon-sprite.png) 0 6px no-repeat; }
.cl-wsm-cols { display: flex; padding: 15px 20px 0 20px; }
.cl-wsm-list { flex: 1; min-width: 0; }
.cl-wsm-list > .cl-btn.blue { padding: 0 10.5px; margin-bottom: 12px; }
.cl-dgrid.w.wsm { padding-left: 35px; width: 722px; box-sizing: content-box; }
.cl-dgrid.w.wsm .cl-gcap { margin-top: -17px; margin-bottom: 4px; }
.cl-dgrid.w.wsm .cl-row { padding-left: 37px; cursor: pointer; }
.cl-dgrid.w.wsm .cl-row.sel { background: #eef3fb; }
.cl-wsm-edit { position: absolute; left: 736px; top: 91px; width: 504px; box-sizing: border-box; border: 1px solid rgba(0,174,239,.4); padding: 10px 10px 10px 10px; display: flex; flex-direction: column; gap: 4px; background: #fff; }
.cl-wsm-edit .cl-flabel { width: 136px !important; }
.cl-wsm-def .cl-btn.kind { height: 26px; width: 148px; box-sizing: border-box; padding: 0 24.9px 0 10.5px; margin-right: 6px; font: 14px/16.8px 'Bpmonline Open Sans', sans-serif; text-transform: none; color: #444; justify-content: center; }
/* картка користувача: випадаючі списки, поле-довідник з пошуком, додавання/видалення ролей */
.cl-edit .cl-sel, .cl-radd .cl-sel { width: 100%; height: 26px; border: 0; outline: 0; padding: 0 4px 0 0; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; background: transparent; cursor: pointer; }
.cl-lkp { position: relative; }
.cl-lkp-go { flex: none; padding: 0 6px; color: #4e7bd8; text-decoration: none; font-size: 13px; }
.cl-lkp-list { position: absolute; left: 0; right: 0; top: 27px; z-index: 50; background: #fff; border: 1px solid #d3d3d3; box-shadow: 0 2px 6px rgba(0,0,0,.15); max-height: 300px; overflow: auto; }
.cl-lkp-it { padding: 5px 10px; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; cursor: pointer; }
.cl-lkp-it:hover { background: #eef3fb; }
.cl-radd { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.cl-radd .cl-sel { width: 360px; border-bottom: 1px dotted #c8c8c8; }
.cl-radd .cl-btn.dis { opacity: .5; cursor: default; }
.cl-rrow { cursor: default; }
.cl-rdel { margin-left: auto; color: #4e7bd8; font-size: 13px; cursor: pointer; visibility: hidden; }
.cl-rrow:hover .cl-rdel { visibility: visible; }
/* діалог запрошень користувачів */

.cl-inv-bgx, .cl-modal-bg { position: fixed; inset: 0; z-index: 1500; background: rgba(0,0,0,.3); display: flex; align-items: flex-start; justify-content: center; padding-top: 60px; }
.cl-modal.cl-inv { width: 720px; max-height: calc(100vh - 120px); overflow: auto; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.25); padding: 16px 20px; font: 14px 'Bpmonline Open Sans', sans-serif; color: #444; }
.cl-inv-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cl-inv-h b { margin-right: auto; font-size: 18px; font-weight: 400; }
.cl-inv-it { margin-bottom: 14px; }
.cl-inv-t { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.cl-inv-t .cl-glink:first-of-type { margin-left: auto; }
.cl-inv-it textarea { width: 100%; box-sizing: border-box; font: 13px/1.4 'Bpmonline Open Sans', sans-serif; color: #444; border: 1px solid #d3d3d3; padding: 6px 8px; resize: vertical; }
.cl-glink { cursor: pointer; }