/* Дизайнер інтерфейсу (Creatio ClientApp #/PageDesigner): розміри й кольори зняті з udc.creatio.com 25.10.2026 */
.page-tools { position: absolute; top: 0; right: 0; width: 48px; height: 24px; display: flex; justify-content: flex-start; z-index: 5; }
.page-tools .design-button { width: 24px; height: 24px; border: 0; border-radius: 50%; padding: 0 6px; background: transparent; color: #757575; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.page-tools .design-button:hover { background: rgba(0, 0, 0, .04); color: #0d2e4e; }
.page-tools .design-button svg { display: block; width: 12px; height: 12px; }
.freedom-page { position: relative; }
.pd-root { position: fixed; inset: 0; z-index: 100000; background: #ebeeef; font: 14px/19px Montserrat, sans-serif; color: #444; display: flex; flex-direction: column; }
.pd-hdr { height: 56px; flex: none; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .16); display: flex; align-items: center; padding: 0 16px; position: relative; z-index: 3; }
.pd-fav { display: inline-flex; width: 24px; height: 24px; margin-right: 16px; }
.pd-btn { height: 32px; border-radius: 16px; border: 0; padding: 0 16px; font: 500 12px/16px Montserrat, sans-serif; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; box-sizing: border-box; white-space: nowrap; }
.pd-btn-plain { background: #f6f7f8; border: 1px solid rgba(0, 27, 55, .1); color: #001b37; }
.pd-btn-plain:hover { background: #eef0f3; }
.pd-btn-dark { background: #0d2e4e; color: #fff; }
.pd-btn-dark:disabled { opacity: .5; cursor: default; }
.pd-rules { padding: 0 16px; width: 152px; }
.pd-rules svg { display: block; }
.pd-title { flex: 1; text-align: center; font: 500 16px/20px Montserrat, sans-serif; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-cancel { margin-left: 16px; }
.pd-more { margin-left: 16px; width: 34px; padding: 0 8px; }
.pd-more svg { display: block; }
.pd-menu { position: absolute; right: 16px; top: 48px; }
.pd-body { flex: 1; min-height: 0; display: flex; position: relative; }
.pd-left { width: 280px; flex: none; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .16); position: relative; display: flex; flex-direction: column; z-index: 2; }
.pd-exp { position: absolute; top: 0; right: 0; width: 16px; height: 40px; background: #ff4013; color: #fff; border-radius: 8px 0 0 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; }
.pd-exp svg { display: block; color: #fff; }
.pd-exp-l-closed { left: 0; right: auto; border-radius: 0 8px 8px 0; transform: scaleX(-1); }
.pd-exp-r { right: auto; left: -16px; }
.pd-exp-r-closed { right: 0; }
.pd-tabs { height: 43px; flex: none; display: flex; align-items: center; padding: 0 9px; gap: 8px; box-sizing: border-box; }
.pd-tab { height: 24px; padding: 0 12px; border-radius: 6px; font: 500 12px/24px Montserrat, sans-serif; color: #444; cursor: pointer; background: #fff; }
.pd-tab.on { background: #feeae5; color: #ff4013; }
.pd-tools { flex: 1; min-height: 0; overflow: auto; }
.pd-search { display: flex; align-items: center; height: 49px; padding: 0 16px; gap: 8px; color: #0d2e4e; box-sizing: border-box; }
.pd-search svg { display: block; flex: none; }
.pd-search input { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid #dfdfdf; outline: 0; height: 24px; font: 500 13px/20px Montserrat, sans-serif; color: #181818; background: transparent; }
.pd-addds { display: flex; align-items: center; gap: 4px; height: 33px; padding-left: 41.5px; font: 400 14px/18px Montserrat, sans-serif; color: #0d2e4e; cursor: default; }
.pd-addds svg { display: block; }
.pd-group { padding: 0 16px; border-bottom: 1px solid #dfdfdf; background: #fff; }
.pd-gh { display: flex; align-items: center; height: 32px; margin: 8px 0; border-radius: 8px; cursor: pointer; }
.pd-gcap { flex: 1; font: 500 14px/18px Montserrat, sans-serif; color: #0d2e4e; text-transform: uppercase; }
.pd-garrow { display: inline-flex; width: 16px; height: 16px; color: #0d2e4e; transition: transform .15s; }
.pd-garrow.closed { transform: rotate(-90deg); }
.pd-sub { font: 500 12px/17px Montserrat, sans-serif; letter-spacing: .24px; color: #757575; margin: 17px 0 15px; }
.pd-tiles { display: grid; grid-template-columns: repeat(3, 72px); column-gap: 8px; row-gap: 8px; padding-bottom: 8px; }
.pd-tile { width: 72px; height: 60px; cursor: grab; border-radius: 6px; }
.pd-tile:hover { background: #f6f7f8; }
.pd-tile-ic { display: block; width: 72px; height: 40px; color: rgba(0, 0, 0, .87); }
.pd-tile-ic svg { display: block; }
.pd-tile-cap { display: flex; justify-content: safe center; font: 500 12px/17px Montserrat, sans-serif; letter-spacing: .24px; color: #757575; white-space: nowrap; margin-top: 3px; position: relative; z-index: 1; }
.pd-rows { padding-bottom: 8px; }
.pd-row { height: 32px; margin-bottom: 8px; padding: 4px; box-sizing: border-box; display: flex; align-items: center; cursor: grab; border-radius: 6px; }
.pd-row:hover { background: #f6f7f8; }
.pd-row-ic { display: inline-flex; width: 16px; height: 16px; color: #ff4013; margin-right: 12px; flex: none; }
.pd-row-cap { flex: 1; min-width: 0; font: 500 12px/17px Montserrat, sans-serif; letter-spacing: .24px; color: #0d2e4e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-row-chk { display: inline-flex; width: 20px; height: 20px; color: #c4c4c4; margin-right: 1px; }
.pd-empty { font: 500 12px/16px Montserrat, sans-serif; color: #757575; padding: 0 0 16px; }
.pd-struct { flex: 1; min-height: 0; overflow: auto; padding: 8px 0; }
.pd-st { display: flex; align-items: center; height: 32px; padding-right: 8px; cursor: pointer; gap: 4px; }
.pd-st:hover { background: #f6f7f8; }
.pd-st.on { background: #feeae5; }
.pd-st-arrow { display: inline-flex; width: 16px; height: 16px; color: #0d2e4e; transition: transform .15s; }
.pd-st-arrow.closed { transform: rotate(-90deg); }
.pd-st-sp { width: 16px; }
.pd-st-cap { flex: 1; min-width: 0; font: 500 12px/17px Montserrat, sans-serif; color: #0d2e4e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-st-type { font: 400 10px/14px Montserrat, sans-serif; color: #919191; }
.pd-canvas { flex: 1; min-width: 0; position: relative; overflow: auto; padding: 12px 18px; background: #ebeeef; }
.pd-canvas .pd-page.mn { position: relative; inset: auto; top: auto; left: auto; right: auto; bottom: auto; height: 820px; min-height: 820px; overflow: hidden; background: #fff; border-radius: 8px; z-index: 1; padding: 0; }
.pd-canvas .pd-page.mn > div { height: 100%; }
.pd-canvas .freedom-page.design, .pd-canvas .freedom-page.design * { cursor: default !important; }
.pd-canvas .freedom-page.design { background: #fff; border-radius: 8px; }
.pd-cell { position: absolute; background: rgba(0, 108, 224, .05); border: 1px solid rgba(0, 108, 224, .19); border-radius: 8px; box-sizing: border-box; pointer-events: none; z-index: 6; }
.pd-cell.drop { background: rgba(0, 108, 224, .18); border-color: #006ce0; }
.pd-hov { position: absolute; border: 1px dashed #006ce0; border-radius: 4px; pointer-events: none; z-index: 7; }
.pd-sel { position: absolute; border: 2px solid #006ce0; border-radius: 4px; pointer-events: none; z-index: 8; }
.pd-sel-tag { position: absolute; left: -2px; top: -20px; height: 18px; padding: 0 6px; background: #006ce0; color: #fff; font: 500 10px/18px Montserrat, sans-serif; border-radius: 4px 4px 0 0; white-space: nowrap; }
.pd-sel-tb { position: absolute; right: -2px; top: -20px; height: 18px; display: flex; background: #006ce0; border-radius: 4px 4px 0 0; pointer-events: auto; }
.pd-sel-tb span { width: 20px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; }
.pd-sel-drag { cursor: grab !important; }
.pd-sel-tb svg { width: 12px; height: 12px; display: block; }
.pd-right { width: 350px; flex: none; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .16); position: relative; overflow: auto; z-index: 2; }
.pd-ph { height: 40px; background: #ff4013; color: #fff; font: 500 16px/20px Montserrat, sans-serif; padding: 0 16px; display: flex; align-items: center; gap: 8px; }
.pd-ph-name { font: 400 11px/14px Montserrat, sans-serif; opacity: .8; }
.pd-pgroup { padding: 0 16px 8px; }
.pd-pgh { height: 48px; display: flex; align-items: center; font: 500 14px/18px Montserrat, sans-serif; color: #0d2e4e; text-transform: uppercase; }
.pd-pf { margin-bottom: 20px; }
.pd-pf.half { display: inline-block; width: calc(50% - 8px); vertical-align: top; }
.pd-pf.half + .pd-pf.half { margin-left: 16px; }
.pd-pl { font: 500 12px/16px Montserrat, sans-serif; color: #606060; margin-bottom: 4px; }
.pd-pe { position: relative; border-bottom: 1px solid #dfdfdf; height: 24px; display: flex; align-items: center; }
.pd-pe input, .pd-pe select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 13px/20px Montserrat, sans-serif; color: #181818; height: 20px; padding: 0; }
.pd-pe.ro input { color: #606060; }
.pd-pe-ic { display: inline-flex; width: 16px; height: 18px; color: #0d2e4e; flex: none; margin-left: 4px; }
.pd-pcb { display: flex; align-items: center; gap: 8px; height: 32px; font: 500 12px/16px Montserrat, sans-serif; color: #606060; cursor: pointer; }
.pd-cb { width: 16px; height: 16px; box-sizing: border-box; border: 2px solid #606060; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pd-cb.on { background: #004fd6; border-color: #004fd6; }
.pd-cb.on i { width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.pd-cb.dis { background: #c4c4c4; border-color: transparent; }
.pd-toggle { width: 36px; height: 20px; border-radius: 10px; background: #c4c4c4; position: relative; flex: none; cursor: pointer; }
.pd-toggle i { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.pd-toggle.on { background: #004fd6; }
.pd-toggle.on i { left: 18px; }
.pd-info { display: inline-flex; width: 16px; height: 16px; color: #0d2e4e; margin-left: auto; }
.pd-pact { padding: 8px 16px 24px; }
.pd-rules-dlg { width: 520px; }
.pd-rules-list { max-height: 320px; overflow: auto; margin: 12px 0 0; }
.pd-rule { padding: 8px 0; border-bottom: 1px solid #dfdfdf; font: 500 13px/20px Montserrat, sans-serif; }

.pd-rule { padding: 8px 0; border-bottom: 1px solid #e6e6e6; font: 13px/18px Montserrat, sans-serif; color: #444; }
.pd-rule.off { opacity: .55; }
.pd-rule-h { display: flex; align-items: center; gap: 8px; }
.pd-rule-cap { flex: 1; font-weight: 500; color: #0d2e4e; }
.pd-rule-kind { font-size: 11px; color: #757575; border: 1px solid #dbe2ea; border-radius: 10px; padding: 0 8px; }
.pd-rule-on { width: 28px; height: 16px; border-radius: 8px; background: #c4c4c4; position: relative; flex: none; }
.pd-rule-on i { position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .15s; }
.pd-rule-on.on { background: #0d8a2c; } .pd-rule-on.on i { left: 14px; }
.pd-rule-case { margin: 4px 0 0 2px; font-size: 12px; color: #606060; }

/* прихований елемент у дизайнері: напівпрозорий + позначка */
.pd-canvas .pd-hidden { position: relative; opacity: .55; outline: 1px dashed #b4c1d2; }
.pd-canvas .pd-hidden-badge { position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; border-radius: 4px; background: #fff; border: 1px solid #dbe2ea; display: flex; align-items: center; justify-content: center; color: #606060; z-index: 2; pointer-events: none; }
.pd-canvas .pd-hidden-badge svg { width: 14px; height: 14px; }