/*<meta conditions="Doc.HideFromLingo" />*/

/* Reserve the scrollbar gutter so the table does not shift when rows
   expand/collapse. Do not force overflow-y: scroll here - that paints a
   second, always-visible scrollbar next to the skin's content scrollbar. */

html
{
	scrollbar-gutter: stable;
}

/* The topic paints inside the skin's content frame, which is briefly
   narrower than its final width while the skin lays itself out. The
   mobile media query below matches at that moment, so the table paints
   as mobile and then snaps to desktop - the flicker. Cloak the table
   until icon_glossary.js has seen the frame width hold steady, then
   reveal it. visibility (not display) keeps the layout measurable while
   hidden, so the script's width measurements still work, and the class
   is added by script so a reader without JavaScript never sees a blank
   page. The script always reveals, even if the width never settles. */

html.ig-preload #singleCellLayout
{
	visibility: hidden;
}

.single-cell-layout
{
	display: block;
	margin: 20px 5%;
}

.left-tabs
{
	display: inline-block;
	white-space: nowrap;
	vertical-align: middle;
}

.table-controls
{
	display: block;
	margin-bottom: 8px;
	font-size: 0;
	white-space: nowrap;
}

.table-actions
{
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	font-size: 12px;
}

/* 40px, not 42px, so the centred chevron lands on the same x as the
   row chevrons below: the table's 2px border + the row header's 10px
   padding + half of the 16px row toggle = 20px = half this button. */

.local-toggle-all-button
{
	width: 40px;
	min-width: 40px;
	box-sizing: border-box;
	padding: 6px 0;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	background: #DCF0FC;
	border-color: #1651B0;
	box-shadow: none;
}

.local-toggle-all-button:hover,
.local-toggle-all-button:focus,
.local-toggle-all-button:active,
.local-toggle-all-button.active
{
	background: #DCF0FC;
	border-color: #1651B0;
	box-shadow: none;
	color: #1f3550;
}

.left-tab.local-toggle-all-button.active,
.left-tab.local-toggle-all-button:active,
.left-tab.local-toggle-all-button:hover,
.left-tab.local-toggle-all-button:focus
{
	background: #DCF0FC;
	border-color: #1651B0;
	color: #1f3550;
	box-shadow: none;
}

/* The ::before glyph box below is 1em wide, so this box has to be at
   least 1em too. At the old 8px the glyph overflowed to the right -
   text-align: center does not re-centre overflowing content, it
   left-aligns it - which pushed the chevron 2px right of centre. */

.local-toggle-icon
{
	display: inline-block;
	width: 1em;
	height: 8px;
	line-height: 8px;
	font-size: 12px;
	letter-spacing: normal;
	color: #1f3550;
	text-align: center;
}

.local-toggle-icon::before
{
	display: inline-block;
	width: 1em;
	text-align: center;
	line-height: 1;
}

.local-toggle-all-button.expand-all-button .local-toggle-icon::before
{
	content: "\003E";
}

.local-toggle-all-button.collapse-all-button .local-toggle-icon::before
{
	content: "v";
}

.local-toggle-all-button.active .local-toggle-icon
{
	color: #1f3550;
}

.local-toggle-all-button.active
{
	background: #DCF0FC;
	border-color: #1651B0;
	color: #1f3550;
	box-shadow: none;
}

.left-tab
{
	border: 1px solid #b9c4cf;
	background: #f5f8fc;
	color: #1f3550;
	font-size: 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 6px 12px;
	cursor: pointer;
	white-space: nowrap;
	transform: none;
	width: 84px;
	text-align: center;
	position: relative;
	z-index: 1;
	border-radius: 4px;
	display: inline-block;
	margin-right: 10px;
}

.left-tabs .left-tab:last-child
{
	margin-right: 0;
}

.left-tab.active
{
	background: #1f73b7;
	border-color: #1f73b7;
	color: #ffffff;
	z-index: 3;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

.left-tab.local-toggle-all-button
{
	background: #DCF0FC;
	border-color: #1651B0;
	color: #1f3550;
	box-shadow: none;
	width: 40px;
	min-width: 40px;
}

.table-wrap
{
	width: 100%;
	max-width: 100%;
}

.single-cell-table
{
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	border: 2px solid #73879b;
	background: #ffffff;
}

.single-cell-table th,
.single-cell-table td
{
	border: 1px solid #c4cfda;
	padding: 8px 10px;
	text-align: left;
}

.single-cell-table thead th
{
	background: #e8eef5;
	font-weight: 700;
	color: #233648;
}

.single-cell-table thead th.active-col
{
	background: #1f73b7;
	color: #ffffff;
}

.single-cell-table tbody th
{
	background: #f3f6fa;
	color: #233648;
	font-weight: 600;
	cursor: pointer;
	width: 148px;
	white-space: nowrap;
	vertical-align: top;
}

.single-cell-table .row-toggle
{
	border: none;
	background: transparent;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	padding: 0;
	cursor: pointer;
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.single-cell-table .row-toggle .local-toggle-icon
{
	color: #1651B0;
}

.local-toggle-all-button.expand-all-button .local-toggle-icon::before,
.single-cell-table .row-toggle.expand-all-button .local-toggle-icon::before
{
	content: "\25B6";
}

.single-cell-table .row-toggle.expand-all-button .local-toggle-icon::before
{
	position: relative;
	top: -4px;
}

.local-toggle-all-button.collapse-all-button .local-toggle-icon::before,
.single-cell-table .row-toggle.collapse-all-button .local-toggle-icon::before
{
	content: "\25BC";
}

.single-cell-table .row-toggle.collapse-all-button .local-toggle-icon::before
{
	position: relative;
	top: -3px;
}

.single-cell-table tbody tr.collapsed th
{
	background: #edf2f7;
}

.single-cell-table tbody tr.collapsed td
{
	display: none;
}

.single-cell-table tbody tr:hover th,
.single-cell-table tbody tr:hover td
{
	background: #e6ebf1;
}

.single-cell-table tbody tr:hover th
{
	color: #000000;
}

.single-cell-table tbody tr:hover .row-toggle .local-toggle-icon
{
	color: #000000;
}

.single-cell-table td
{
	color: #1e2f40;
	background: #f9fbfd;
}

.single-cell-table td.active-cell
{
	background: #e6ebf1;
	color: #1e2f40;
	font-weight: 600;
}

.single-cell-table td .name-sort-button
{
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	font: inherit;
	font-weight: inherit;
	color: inherit;
	cursor: pointer;
	display: inline;
	line-height: inherit;
	text-align: left;
	min-height: 0 !important;
	height: auto;
	appearance: none;
	-webkit-appearance: none;
}

.single-cell-table td .name-sort-button:focus
{
	outline: none;
}

.single-cell-table td .name-sort-glyph
{
	display: inline-block;
	margin-left: 7px;
	min-width: 0.9em;
	text-align: center;
	visibility: hidden;
}

.single-cell-table td .name-sort-button.sorted .name-sort-glyph
{
	visibility: visible;
}

.single-cell-table td .name-sort-header
{
	cursor: pointer;
	vertical-align: middle;
	white-space: nowrap;
}

.single-cell-table td table tbody tr:first-child > td,
.single-cell-table td table tbody tr:first-child > th,
.single-cell-table td .table tbody tr:first-child > td,
.single-cell-table td .table tbody tr:first-child > th,
.single-cell-table td [class*="table"] tbody tr:first-child > td,
.single-cell-table td [class*="table"] tbody tr:first-child > th
{
	box-sizing: border-box;
	height: 28px !important;
	min-height: 28px !important;
	max-height: 28px;
	line-height: 20px !important;
	padding-top: 3px !important;
	padding-bottom: 3px !important;
	vertical-align: middle !important;
	white-space: nowrap !important;
}

.single-cell-layout.col-1-active .single-cell-table thead th[data-col-header="2"],
.single-cell-layout.col-1-active .single-cell-table tbody td[data-col="2"]
{
	display: none;
}

.single-cell-layout.col-2-active .single-cell-table thead th[data-col-header="1"],
.single-cell-layout.col-2-active .single-cell-table tbody td[data-col="1"]
{
	display: none;
}

.single-cell-layout.col-3-active .single-cell-table tbody td[data-col="1"],
.single-cell-layout.col-3-active .single-cell-table tbody td[data-col="2"]
{
	color: #1e2f40;
	font-weight: 400;
	background: #f9fbfd;
}

/* Web only: keep each row heading (General, Sketch, Part Studio, ...)
       pinned to the top of the content frame while its row scrolls past,
       level with the sticky Button/Name/Action header of the inner tables.
       Only the label (.row-heading, added by icon_glossary.js) is sticky:
       a sticky cell is limited to the room left below its row in the
       table, so with a single row expanded it would scroll away early.
       The label slides within the full-height cell, so it stays pinned
       until the end of its own row. Mobile (max-width: 767px) is
       deliberately untouched. */

@media only screen and (min-width: 768px)
{
	/* The expand/collapse and column buttons stay pinned at the top of the
       content frame. Everything else that sticks (table border bar, row
       labels, inner table headers) sits below them, offset by the fixed
       controls height. */

	.table-wrap
	{
		--ig-controls-h: 52px;
	}

	.table-wrap > .table-controls
	{
		position: sticky;
		top: 0;
		z-index: 6;
		box-sizing: border-box;
		height: var(--ig-controls-h);
		margin-bottom: 0;
		padding: 4px 0;
		background: #ffffff;
	}

	.single-cell-table td table tbody tr:first-child > td,
	.single-cell-table td table tbody tr:first-child > th,
	.single-cell-table td .table tbody tr:first-child > td,
	.single-cell-table td .table tbody tr:first-child > th,
	.single-cell-table td [class*="table"] tbody tr:first-child > td,
	.single-cell-table td [class*="table"] tbody tr:first-child > th
	{
		top: var(--ig-controls-h) !important;
	}

	.single-cell-table tbody th
	{
		padding-top: 0;
		padding-bottom: 0;
	}

	.single-cell-table tbody th .row-heading
	{
		position: sticky;
		top: var(--ig-controls-h);
		z-index: 0;
		padding: 8px 0;
		background: inherit;
		box-shadow: 0 1px 0 #c4cfda;
	}

	/* The table's own top border scrolls away under the page's sticky
       header. Re-draw it as a sticky 2px bar that sits exactly over that
       border (same colour, no layout space) and then stays at the top. */

	.table-wrap
	{
		display: flex;
		flex-direction: column;
	}

	.table-wrap::before
	{
		content: "";
		order: 1;
		position: sticky;
		top: var(--ig-controls-h);
		z-index: 5;
		height: 2px;
		margin-bottom: -2px;
		background: #73879b;
	}

	.table-wrap > .table-controls
	{
		order: 0;
	}

	.table-wrap > .single-cell-table
	{
		order: 2;
	}
}

@media only screen and (max-width: 767px)
{
	.single-cell-layout
	{
		margin: 12px 0;
	}

	.table-wrap
	{
		overflow: hidden;
	}

	.single-cell-table
	{
		width: 100%;
		table-layout: fixed;
	}

	/* Stack rows vertically: th header on its own line, td content below */

	.single-cell-table tbody tr
	{
		display: block;
		border-bottom: 1px solid #c4cfda;
	}

	.single-cell-table th,
	.single-cell-table td
	{
		padding: 6px;
	}

	.single-cell-table tbody th
	{
		display: block;
		width: 100%;
		min-width: unset;
		box-sizing: border-box;
		font-size: 12px;
		white-space: normal;
		word-break: break-word;
		border-bottom: none;
	}

	.single-cell-table tbody td
	{
		display: block;
		width: 100%;
		box-sizing: border-box;
		border-top: none;
	}

	/* Keep collapsed rows' cells hidden (specificity must beat external .single-cell-layout rule) */

	.single-cell-layout .single-cell-table tbody tr.collapsed td
	{
		display: none !important;
	}

	/* Re-assert column visibility rules overridden by display:block above */

	.single-cell-layout.col-1-active .single-cell-table tbody td[data-col="2"],
	.single-cell-layout.col-2-active .single-cell-table tbody td[data-col="1"]
	{
		display: none !important;
		margin-top: 0 !important;
	}

	/* Restore column tab buttons on mobile (overrides external stylesheet), but keep All icons hidden */

	.left-tabs .left-tab[data-col="1"],
	.left-tabs .left-tab[data-col="2"]
	{
		display: inline-block !important;
	}

	.single-cell-table tbody th .row-toggle
	{
		float: left;
		margin-right: 6px;
		margin-top: 1px;
		vertical-align: top;
	}

	.single-cell-table td
	{
		font-size: 12px;
		white-space: normal;
		word-break: break-word;
	}

	.single-cell-table td table,
	.single-cell-table td .table,
	.single-cell-table td [class*="table"]
	{
		width: 100% !important;
		max-width: 100% !important;
		table-layout: auto !important;
	}

	.single-cell-table td table col:first-child,
	.single-cell-table td .table col:first-child,
	.single-cell-table td [class*="table"] col:first-child
	{
		width: auto !important;
	}

	.single-cell-table td table th:first-child,
	.single-cell-table td table td:first-child,
	.single-cell-table td .table th:first-child,
	.single-cell-table td .table td:first-child,
	.single-cell-table td [class*="table"] th:first-child,
	.single-cell-table td [class*="table"] td:first-child
	{
		width: 1% !important;
		white-space: nowrap !important;
	}

	.single-cell-table td table th,
	.single-cell-table td table td,
	.single-cell-table td .table th,
	.single-cell-table td .table td,
	.single-cell-table td [class*="table"] th,
	.single-cell-table td [class*="table"] td
	{
		white-space: normal !important;
		word-break: break-word;
		overflow-wrap: anywhere;
	}

	.single-cell-table td table th:nth-child(2),
	.single-cell-table td table td:nth-child(2),
	.single-cell-table td .table th:nth-child(2),
	.single-cell-table td .table td:nth-child(2),
	.single-cell-table td [class*="table"] th:nth-child(2),
	.single-cell-table td [class*="table"] td:nth-child(2)
	{
		width: 24%;
		min-width: 5.5em;
		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
	}

	.single-cell-table td table th:nth-child(3),
	.single-cell-table td table td:nth-child(3),
	.single-cell-table td .table th:nth-child(3),
	.single-cell-table td .table td:nth-child(3),
	.single-cell-table td [class*="table"] th:nth-child(3),
	.single-cell-table td [class*="table"] td:nth-child(3)
	{
		word-break: break-word;
		overflow-wrap: anywhere;
	}

	.single-cell-table td img,
	.single-cell-table td svg
	{
		max-width: 100%;
		height: auto;
	}

	.left-tabs .all-icons-tab
	{
		display: none;
	}
}