/**
 * NB Designer stage visuals (TMA):
 * - Force selection handles (Angriffspunkte) always visible, also for large/edge objects
 * - Keep outer workspace / stage scroll (PerfectScrollbar) intact
 * - Editable transform panel
 * - Product bleed hatch overlay (below handles, pointer-events none)
 */

/* -------------------------------------------------------------------------
 * SCROLL CONTAINERS — do NOT force overflow:visible here.
 * PerfectScrollbar needs overflow:hidden on #stage-container-* / .stage
 * ------------------------------------------------------------------------- */

body.tma-am-overflow-handles .nbd-stages .stage {
	padding: 80px !important;
	box-sizing: border-box !important;
}

/* Blank page: page at 0,0 flush with the 40px rulers. */
body.tma-am-blank-page.tma-am-overflow-handles .nbd-stages .stage,
body.tma-am-blank-page .nbd-stages .stage {
	padding: 40px 24px 24px 40px !important;
	box-sizing: border-box !important;
	text-align: left !important;
}

body.tma-am-blank-page .nbd-workspace .main {
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
	overflow: hidden !important;
}

body.tma-am-blank-page .nbd-workspace .main > .nbd-stages {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	height: auto !important;
	overflow: hidden !important;
	position: relative !important;
}

#tma-am-size-dock,
body.tma-am-blank-page .tma-am-size-dock {
	display: none !important;
}

body.tma-am-blank-page .nbd-stages .stage-main-wrap {
	margin: 0 !important;
	vertical-align: top;
	text-align: left;
}

/* Phone: no leftover left sidebar inset, no 40px ruler gutter. */
@media (max-width: 782px) {
	body.tma-am-blank-page .nbd-workspace,
	body.tma-am-blank-page .nbd-workspace .main,
	body.tma-am-blank-page .nbd-main {
		margin-left: 0 !important;
		margin-right: 0 !important;
		left: 0 !important;
		right: auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body.tma-am-blank-page.tma-am-overflow-handles .nbd-stages .stage,
	body.tma-am-blank-page .nbd-stages .stage {
		padding: 8px !important;
	}

	body.tma-am-blank-page .nbd-stages .stage-main-wrap {
		left: 0 !important;
		top: 0 !important;
		margin-left: 0 !important;
	}

	body.tma-am-blank-page .nbd-stages .nbd-ver-ruler,
	body.tma-am-blank-page .nbd-stages .nbd-hoz-ruler {
		display: none !important;
	}

	#tma-am-stage-scroll-host .tma-am-scroll-y {
		top: 8px !important;
	}

	#tma-am-stage-scroll-host .tma-am-scroll-x {
		left: 8px !important;
	}
}

body.tma-am-blank-page .nbd-stages .nbd-ver-ruler {
	left: 0 !important;
	margin-left: 0 !important;
	width: 40px !important;
	top: 0 !important;
}

body.tma-am-blank-page .nbd-stages .nbd-hoz-ruler {
	top: 0 !important;
	left: 0 !important;
	height: 40px !important;
}

body.tma-am-blank-page .nbd-stages .stage,
body.tma-am-blank-page #stage-container-0 {
	height: 100% !important;
	max-height: 100% !important;
	position: relative !important;
	z-index: 0 !important;
}

body.tma-am-blank-page .design-wrap .ps__scrollbar-x-rail,
body.tma-am-blank-page .canvas-container .ps__scrollbar-x-rail,
body.tma-am-blank-page .stage-main-wrap .ps__scrollbar-x-rail,
body.tma-am-blank-page .design-wrap .ps__scrollbar-y-rail,
body.tma-am-blank-page .canvas-container .ps__scrollbar-y-rail,
body.tma-am-blank-page .stage-main-wrap .ps__scrollbar-y-rail {
	display: none !important;
}

body.tma-am-blank-page .design-wrap,
body.tma-am-blank-page .stage-main-wrap,
body.tma-am-blank-page .canvas-container {
	scrollbar-width: none;
}
body.tma-am-blank-page .design-wrap::-webkit-scrollbar,
body.tma-am-blank-page .stage-main-wrap::-webkit-scrollbar,
body.tma-am-blank-page .canvas-container::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

/* PerfectScrollbar rails on .stage scroll with the page and sit under Fabric. */
body.tma-am-blank-page .nbd-stages .stage .ps__scrollbar-x-rail,
body.tma-am-blank-page .nbd-stages .stage .ps__scrollbar-y-rail {
	display: none !important;
}

#tma-am-stage-scroll-host {
	position: absolute !important;
	inset: 0 !important;
	z-index: 10070 !important;
	pointer-events: none !important;
}

#tma-am-stage-scroll-host .tma-am-scroll-y {
	position: absolute !important;
	top: 40px !important;
	right: 2px !important;
	bottom: 16px !important;
	width: 14px !important;
	pointer-events: auto !important;
	background: rgba(226, 232, 240, 0.55) !important;
	border-radius: 8px !important;
}

#tma-am-stage-scroll-host .tma-am-scroll-y-thumb {
	position: absolute !important;
	left: 2px !important;
	width: 10px !important;
	background: #475569 !important;
	border-radius: 6px !important;
	cursor: pointer !important;
}

#tma-am-stage-scroll-host .tma-am-scroll-x {
	position: absolute !important;
	left: 40px !important;
	right: 16px !important;
	bottom: 2px !important;
	height: 14px !important;
	pointer-events: auto !important;
	background: rgba(226, 232, 240, 0.55) !important;
	border-radius: 8px !important;
}

#tma-am-stage-scroll-host .tma-am-scroll-x-thumb {
	position: absolute !important;
	top: 2px !important;
	height: 10px !important;
	background: #475569 !important;
	border-radius: 6px !important;
	cursor: pointer !important;
}

#tma-am-stage-scroll-host .ps__scrollbar-y-rail,
#tma-am-stage-scroll-host .ps__scrollbar-x-rail {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Anfasser: unclip only INNER design clips — never outer scroll parents
 * ------------------------------------------------------------------------- */
body.tma-am-overflow-handles .stage-main-wrap,
body.tma-am-overflow-handles .stage-main,
body.tma-am-overflow-handles .design-wrap,
body.tma-am-overflow-handles .bounding-layers,
body.tma-am-overflow-handles .bounding-layers-inner,
body.tma-am-overflow-handles .stage-snapLines,
body.tma-am-overflow-handles .stage-snapLines-inner,
body.tma-am-overflow-handles .stage-guideline,
body.tma-am-overflow-handles .stage-guideline-inner,
body.tma-am-overflow-handles .stage-overlay,
body.tma-am-overflow-handles .design-zone,
body.tma-am-overflow-handles .canvas-container {
	overflow: visible !important;
	overflow-x: visible !important;
	overflow-y: visible !important;
	clip: auto !important;
	clip-path: none !important;
	-webkit-clip-path: none !important;
	contain: none !important;
}

/* Expand layers so corners at 0 / max stay inside the layers box */
body.tma-am-overflow-handles .bounding-layers {
	top: -16px !important;
	left: -16px !important;
	width: calc(100% + 32px) !important;
	height: calc(100% + 32px) !important;
	z-index: 10040 !important;
	pointer-events: none !important;
	visibility: visible !important;
	opacity: 1 !important;
	/* Layers box itself must not draw a frame */
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

body.tma-am-overflow-handles .bounding-layers-inner {
	z-index: 10040 !important;
	pointer-events: none !important;
	visibility: visible !important;
	opacity: 1 !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

/*
 * Ghost Doppelrahmen (overflow only): NBD .bounding-rect draws
 * border: 1px dashed #ddd — same gray dashed look as .bounding-holder.
 * With LAYER_PAD the layers box shifts up/left, so the rect looks like an
 * outer ghost frame around Fabric hasBorders. Keep the element for the
 * size HUD (.bounding-rect-real-size); strip only the border.
 */
body.tma-am-overflow-handles .bounding-rect:not(.bounding-rect-upload-zone) {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

body.tma-am-overflow-handles .bounding-rect-real-size {
	visibility: visible !important;
	opacity: 1 !important;
}

/* Fabric hasBorders is the only selection frame — hide NBD HTML dashed holder */
body.tma-am-overflow-handles .bounding-corner.bounding-holder {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	pointer-events: none !important;
}

body.tma-am-overflow-handles .bounding-corner:not(.bounding-holder),
body.tma-am-overflow-handles .bounding-corner.corner-action:not(.bounding-holder) {
	visibility: visible !important;
	opacity: 1 !important;
	display: inline-block !important;
	z-index: 10050 !important;
}

/*
 * Inside the white page Fabric upper-canvas owns resize.
 * Handles in Beschnitt/overflow: .tma-am-overflow-hit receives drags; stage capture
 * also starts Fabric transforms when the click misses upper-canvas entirely.
 */
body.tma-am-overflow-handles .bounding-corner.corner-action {
	pointer-events: none !important;
	min-width: 12px;
	min-height: 12px;
	box-sizing: border-box !important;
	background: #fff !important;
	border: 1px solid #404762 !important;
}

body.tma-am-overflow-handles .bounding-corner.corner-action.tma-am-overflow-hit {
	pointer-events: auto !important;
	z-index: 10055 !important;
	cursor: pointer;
}

body.tma-am-overflow-handles .canvas-container .upper-canvas {
	z-index: 2 !important;
}

/* Floating object toolbar: clicks only — do NOT raise z-index (NBD menus append to body). */
body.tma-am-overflow-handles .geo-object-options,
body.tma-am-overflow-handles .object-options,
body.tma-am-overflow-handles .text-format,
body.tma-am-overflow-handles .typography-options,
body.tma-am-overflow-handles .nbd-text-options,
body.tma-am-overflow-handles .more-design-option {
	pointer-events: auto !important;
}

body.tma-am-overflow-handles .nbd-toolbar,
body.tma-am-overflow-handles .nbd-context-bar,
body.tma-am-overflow-handles .nbd-subtoolbar,
body.tma-am-overflow-handles .nbd-workspace-tools,
body.tma-am-overflow-handles .nbd-main-bar {
	pointer-events: auto !important;
}

/* Font/search menus are often portaled to body — keep them above the stage HUD. */
body.tma-am-overflow-handles .md-select-menu-container,
body.tma-am-overflow-handles .md-select-menu,
body.tma-am-overflow-handles .nbd-dropdown,
body.tma-am-overflow-handles .font-list,
body.tma-am-overflow-handles .search-font {
	pointer-events: auto !important;
	z-index: 100100 !important;
}

/* NB Preflight Check is not used for TMA ads. */
.nbd-header .preflight,
.nbd-header .preflight-check,
.nbd-header [ng-click*="reflight"],
.nbd-header [ng-click*="Preflight"],
.nbd-main-bar [ng-click*="reflight"],
.nbd-main-bar [ng-click*="Preflight"],
.nbd-main-menu [ng-click*="reflight"],
.nbd-main-menu [ng-click*="Preflight"],
.nbd-main-bar [title*="Preflight"],
.nbd-main-bar [aria-label*="Preflight"],
.nbd-main-bar [ng-click*="reflight"],
.nbd-top-bar [ng-click*="reflight"],
.nbd-workspace .preflight-check,
.nbd-preflight,
.preflight-popup,
.nbd-preflight-modal,
.tma-am-hide-preflight {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

/* -------------------------------------------------------------------------
 * Native zoom chip is relocated to the left-nav lupe (designer-sayings.css).
 * Do not park it in the object toolbar.
 * ------------------------------------------------------------------------- */
.nbd-workspace .main > .nbd-toolbar-zoom {
	width: max-content !important;
	max-width: max-content !important;
	height: max-content !important;
	overflow: visible !important;
}

.nbd-workspace .main > .nbd-toolbar-zoom .zoomer,
.nbd-workspace .main > .nbd-toolbar-zoom .zoomer-toolbar {
	width: max-content !important;
	overflow: visible !important;
}

.nbd-toolbar-zoom .zoomer-toolbar .nbd-main-menu .menu-item.zoomer-level .sub-menu,
.nbd-toolbar-zoom .zoomer-popover {
	top: calc(100% + 8px) !important;
	bottom: auto !important;
	left: 50% !important;
	right: auto !important;
	-webkit-transform: translateX(-50%) scale(0.8) !important;
	transform: translateX(-50%) scale(0.8) !important;
}

.nbd-toolbar-zoom .zoomer-toolbar .nbd-main-menu .menu-item.zoomer-level.active .sub-menu,
.nbd-toolbar-zoom .zoomer-toolbar .nbd-main-menu li.active .zoomer-popover {
	-webkit-transform: translateX(-50%) scale(1) !important;
	transform: translateX(-50%) scale(1) !important;
}

.nbd-toolbar-zoom .zoomer-toolbar .nbd-main-menu .menu-item.zoomer-level .sub-menu:after,
.nbd-toolbar-zoom .zoomer-toolbar .nbd-main-menu .menu-item.zoomer-level .sub-menu:before,
.nbd-toolbar-zoom .zoomer-popover:after,
.nbd-toolbar-zoom .zoomer-popover:before {
	top: -8px !important;
	bottom: auto !important;
	-webkit-transform: translateX(-50%) rotate(0deg) !important;
	transform: translateX(-50%) rotate(0deg) !important;
}

/* Native NB appends Print Size / Fit / Fill after ng-repeat. Those are already in the list. */
.nbd-toolbar-zoom .zoomer-popover-list > li[ng-click*="fitScaleIndex"],
.nbd-toolbar-zoom .zoomer-popover-list > li[ng-click*="printScaleIndex"],
.nbd-toolbar-zoom .zoomer-popover-list > li[ng-click*="fillScaleIndex"],
body.tma-am-blank-page .zoomer-popover-list > li.tma-am-zoom-native-dupe {
	display: none !important;
}
body.tma-am-blank-page .nbd-toolbar-zoom .zoomer-in.nbd-disabled,
body.tma-am-blank-page .nbd-toolbar-zoom .zoomer-out.nbd-disabled {
	pointer-events: auto !important;
	opacity: 1 !important;
	cursor: pointer !important;
}

.geo-object-options input.geo-object-stroke,
.object-options input.geo-object-stroke,
.geo-object-options input[ng-model*="strokeWidth"],
.geo-object-options input[ng-model*="strokeDash"] {
	width: 1px !important;
	min-width: 0 !important;
	max-width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	position: absolute !important;
	pointer-events: none !important;
}

.tma-am-mm-select {
	display: inline-block;
	min-width: 6.2em;
	width: auto;
	max-width: 8.5em;
	height: 28px;
	padding: 2px 8px;
	margin: 0 4px 0 0;
	border: 1px solid #c3c4c7;
	border-radius: 3px;
	background: #fff;
	color: #1d2327;
	font-size: 13px;
	line-height: 1.2;
	box-sizing: border-box;
	vertical-align: middle;
}

.tma-am-mm-select--stroke {
	min-width: 6.8em;
}

.tma-am-mm-select--dash {
	min-width: 6.2em;
}

/* Text Kontur keeps the native width slider — no millimetre dropdown. */
.item-stroke .tma-am-mm-select,
.range-stroke .tma-am-mm-select {
	display: none !important;
}
.item-stroke input.slide-input,
.item-stroke input[type="range"],
.range-stroke input.slide-input {
	width: auto !important;
	min-width: 80px !important;
	max-width: none !important;
	height: auto !important;
	opacity: 1 !important;
	position: static !important;
	pointer-events: auto !important;
}

/* Hatch / overlays must never sit above overflow hit handles */
body.tma-am-overflow-handles .tma-am-bleed-frame,
body.tma-am-overflow-handles .stage-grid,
body.tma-am-overflow-handles .stage-overlay,
body.tma-am-overflow-handles .stage-snapLines,
body.tma-am-overflow-handles .stage-guideline {
	pointer-events: none !important;
	z-index: 1 !important;
}

/* -------------------------------------------------------------------------
 * Transform bar — docked beside Cut line / Sicherheitszone (same bottom strip)
 * ------------------------------------------------------------------------- */
body.tma-am-transform-panel-on .nbd-guidelines-notice {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 8px;
	left: 0 !important;
	right: auto !important;
	bottom: 12px !important;
	max-width: calc(100% - 16px);
	overflow-x: auto;
	overflow-y: hidden;
	font-size: 12px !important; /* NBD sets 0 for float pills */
	z-index: 10060;
	pointer-events: none;
}

body.tma-am-transform-panel-on .nbd-guidelines-notice > .nbd-guideline-bleedline,
body.tma-am-transform-panel-on .nbd-guidelines-notice > .nbd-guideline-safezone,
body.tma-am-transform-panel-on .nbd-guidelines-notice > .nbd-guideline-warning {
	float: none !important;
	flex: 0 0 auto;
	margin-left: 0 !important;
	pointer-events: auto;
}

.tma-am-transform-panel {
	position: relative;
	left: auto;
	bottom: auto;
	transform: none;
	z-index: 10060;
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 5px 6px;
	height: 32px;
	padding: 0 10px;
	margin: 0;
	background: rgb(224, 224, 224);
	border: none;
	border-radius: 16px;
	box-shadow: none;
	font: 12px/1 Consolas, "Courier New", monospace;
	color: #2b3142;
	pointer-events: auto;
	flex: 0 0 auto;
	white-space: nowrap;
	box-sizing: border-box;
}

.tma-am-transform-panel[hidden] {
	display: none !important;
}

.tma-am-transform-panel .tma-am-transform-title {
	font-weight: 700;
	margin-right: 1px;
}

.tma-am-transform-panel label {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin: 0;
	font-weight: 600;
	white-space: nowrap;
}

.tma-am-transform-panel .tma-am-transform-input {
	width: 6.2em;
	min-width: 6.2em;
	max-width: 8em;
	height: 22px;
	padding: 2px 5px;
	border: 1px solid #9aa3b5;
	border-radius: 3px;
	background: #fff;
	color: #1f2430;
	font: inherit;
	box-sizing: border-box;
	-moz-appearance: textfield;
	appearance: textfield;
}

.tma-am-transform-panel .tma-am-transform-input--angle {
	width: 4.2em;
	min-width: 4.2em;
}

.tma-am-transform-panel .tma-am-transform-input::-webkit-outer-spin-button,
.tma-am-transform-panel .tma-am-transform-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
	display: none;
}

.tma-am-transform-panel .tma-am-transform-input:focus {
	outline: 2px solid #3d7eff;
	outline-offset: 0;
	border-color: #3d7eff;
}

.tma-am-transform-panel .tma-am-transform-proportional {
	gap: 3px;
	font-weight: 600;
	user-select: none;
	cursor: pointer;
}

.tma-am-transform-panel .tma-am-transform-proportional input[type="checkbox"] {
	width: 13px;
	height: 13px;
	margin: 0;
	accent-color: #3d7eff;
	cursor: pointer;
}

.tma-am-transform-panel .tma-am-transform-unit {
	opacity: 0.7;
	font-size: 11px;
}

.tma-am-transform-panel .tma-am-transform-hint {
	display: none;
}

/* -------------------------------------------------------------------------
 * Beschnitt-Fläche: hatch below handles, never blocks clicks or scroll
 * ------------------------------------------------------------------------- */
.tma-am-bleed-frame {
	position: absolute;
	box-sizing: border-box;
	border: 1px solid rgba(40, 40, 40, 0.8);
	background: transparent;
	pointer-events: none !important;
	z-index: 1 !important;
	overflow: visible;
}

.tma-am-bleed-band {
	position: absolute;
	box-sizing: border-box;
	pointer-events: none !important;
	background-color: rgba(255, 176, 56, 0.16);
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(255, 152, 0, 0.28),
		rgba(255, 152, 0, 0.28) 4px,
		rgba(255, 200, 80, 0.1) 4px,
		rgba(255, 200, 80, 0.1) 8px
	);
}

.tma-am-bleed-band--top {
	top: 0;
	left: 0;
	right: 0;
}

.tma-am-bleed-band--bottom {
	bottom: 0;
	left: 0;
	right: 0;
}

.tma-am-bleed-band--left {
	top: 0;
	bottom: 0;
	left: 0;
}

.tma-am-bleed-band--right {
	top: 0;
	bottom: 0;
	right: 0;
}

body.tma-am-bleed-frame-on .stage-main,
body.tma-am-bleed-frame-on .design-wrap,
body.tma-am-bleed-frame-on .stage-main-wrap {
	overflow: visible !important;
}

/* -------------------------------------------------------------------------
 * Layer lock: forceLock disables the whole row (pointer-events:none).
 * Keep the lock/unlock icon clickable so explicit unlock can clear forceLock.
 * ------------------------------------------------------------------------- */
.nbd-sidebar #tab-layer .menu-item.nbd-disable-event .item-right .icon-lock {
	pointer-events: auto !important;
	cursor: pointer;
	position: relative;
	z-index: 2;
}

body.tma-am-blank-page .design-wrap,
body.tma-am-blank-page .canvas-container,
body.tma-am-blank-page .stage-main,
body.tma-am-blank-page .stage-main-wrap,
body.tma-am-blank-page .design-zone {
	min-width: 0 !important;
	min-height: 0 !important;
	flex: 0 0 auto !important;
	max-width: none !important;
	max-height: none !important;
	transform: none !important;
}

body.tma-am-blank-page .design-wrap {
	overflow: visible !important;
	position: relative;
}

.tma-am-size-dock .tma-am-height-handle,
.tma-am-height-handle {
	position: relative;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;
	margin: 0 auto;
	max-width: 760px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	pointer-events: auto;
	user-select: none;
	-webkit-user-select: none;
	background: #fff;
	border: 1px solid #1e3a5f;
	border-radius: 8px;
	padding: 8px 14px 10px;
	box-shadow: none;
	box-sizing: border-box;
}

.tma-am-height-handle__cols {
	display: flex;
	gap: 6px;
}

.tma-am-height-handle__col {
	border: 1px solid #1e3a5f;
	border-radius: 4px;
	background: #fff;
	color: #1e3a5f;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 7px 10px;
	cursor: pointer;
}

.tma-am-height-handle__col.is-active,
.tma-am-height-handle__col:hover {
	background: #1e3a5f;
	color: #fff;
}

.tma-am-height-handle__frame {
	position: relative;
}

.tma-am-height-handle__frame-btn {
	border: 1px solid #1e3a5f;
	border-radius: 4px;
	background: #fff;
	color: #1e3a5f;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 7px 10px;
	cursor: pointer;
}

.tma-am-height-handle__frame-btn:hover,
.tma-am-height-handle__frame-btn[aria-expanded="true"] {
	background: #1e3a5f;
	color: #fff;
}

.tma-am-height-handle__frame-menu,
#tma-am-frame-menu {
	position: absolute;
	left: 0;
	bottom: calc(100% + 6px);
	z-index: 100060;
	min-width: 180px;
	background: #fff;
	border: 1px solid #1e3a5f;
	border-radius: 6px;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tma-am-height-handle__frame-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 0;
	background: transparent;
	color: #1e3a5f;
	font-size: 12px;
	font-weight: 600;
	text-align: left;
	padding: 6px 8px;
	border-radius: 4px;
	cursor: pointer;
}

.tma-am-height-handle__frame-opt:hover {
	background: #eef2f7;
}

.tma-am-frame-preview {
	display: inline-block;
	width: 22px;
	height: 14px;
	box-sizing: border-box;
	border: 2px solid currentColor;
	flex: 0 0 auto;
}

.tma-am-frame-preview--double {
	box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px currentColor;
}

.tma-am-frame-preview--triple {
	box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 3px currentColor, inset 0 0 0 4px #fff, inset 0 0 0 6px currentColor;
}

.tma-am-frame-preview--dashed {
	border-style: dashed;
}

.tma-am-frame-preview--dotted {
	border-style: dotted;
}

.tma-am-frame-preview--dashdot {
	border-style: dashed;
	border-bottom-style: dotted;
}

.tma-am-frame-preview--none {
	border-style: solid;
	opacity: 0.35;
	background: repeating-linear-gradient(-45deg, transparent, transparent 3px, currentColor 3px, currentColor 4px);
}

.tma-am-height-handle__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
}

.tma-am-height-handle__grip {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	cursor: ns-resize;
	padding: 4px 8px 2px;
	min-width: 0;
}

.tma-am-height-handle__bar {
	display: block;
	width: 100%;
	max-width: 220px;
	height: 8px;
	border-radius: 999px;
	background: #1e3a5f;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

.tma-am-height-handle.is-dragging .tma-am-height-handle__bar,
.tma-am-height-handle__grip:hover .tma-am-height-handle__bar {
	background: #c45c16;
}

.tma-am-height-handle__label {
	font-size: 12px;
	line-height: 1.2;
	color: #1e3a5f;
	white-space: nowrap;
	font-weight: 600;
}

.tma-am-height-handle__nudge {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border: 1px solid #1e3a5f;
	border-radius: 4px;
	background: #fff;
	color: #1e3a5f;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.tma-am-height-handle__nudge:hover {
	background: #1e3a5f;
	color: #fff;
}

.tma-am-frame-follow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 8px;
	padding: 8px 10px;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	background: #fff8ee;
	color: #1d2327;
	font-size: 12px;
	line-height: 1.3;
	box-sizing: border-box;
}

.tma-am-frame-follow[hidden] {
	display: none !important;
}

.tma-am-frame-follow__text {
	flex: 1 1 180px;
	font-weight: 600;
}

.tma-am-frame-follow__yes,
.tma-am-frame-follow__no {
	flex: 0 0 auto;
	min-width: 52px;
	height: 28px;
	padding: 0 10px;
	border-radius: 4px;
	border: 1px solid #1e3a5f;
	background: #fff;
	color: #1e3a5f;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.tma-am-frame-follow__yes {
	background: #1e3a5f;
	color: #fff;
}