@media only screen and (max-width: 320px) {
	.localnav-menu .localnav-actions-center .localnav-action-menucta {
		margin-left: 0;
	}
}

.bg-alt {
	background-color: #f5f5f7;
}


/* ===== Images ===== */
.icon-xcode {
	margin-bottom: 1.5em;
	width: 96px;
	height: 96px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/assets/elements/icons/xcode-12/xcode-12-96x96.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
	.icon-xcode {
		background-image: url("/assets/elements/icons/xcode-12/xcode-12-96x96_2x.png");
	}
}

.hero-lockup {
	margin: 2em auto 4em;
	width: 830px;
	height: 484px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center 0;
	background-image: url("/app-extensions/images/lockup-hero-large.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
	.hero-lockup {
		background-image: url("/app-extensions/images/lockup-hero-large_2x.png");
	}
}

@media only screen and (max-width: 1068px) {
	.hero-lockup {
		width: 692px;
		height: 404px;
		background-image: url("/app-extensions/images/lockup-hero-medium.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
		.hero-lockup {
			background-image: url("/app-extensions/images/lockup-hero-medium_2x.png");
		}
	}
}

@media only screen and (max-width: 735px) {
	.hero-lockup {
		width: 310px;
		height: 181px;
		background-image: url("/app-extensions/images/lockup-hero-small.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
		.hero-lockup {
			background-image: url("/app-extensions/images/lockup-hero-small_2x.png");
		}
	}
}

@media only screen and (max-width: 320px) {
	.hero-lockup {
		width: 280px;
		height: 163px;
	}
}


/* ========== Tables ========== */
table {
	width: 100%;
	margin: 0;
}
table thead th {
	height: 77px;
	padding: 0 0 10px;
	line-height: 1.16667;
	font-weight: 600;
	text-align: left;
	vertical-align: bottom;
	border-bottom: 1px solid #ccc;
	background-color: #fff;
}
table .fixed-width {
	text-align: center;
}
table td {
	padding: 1em 0;
	border-bottom: 1px solid #ccc;
	line-height: 1.16667;
	text-align: center;
}
table td:nth-of-type(1) {
	padding: 1em 10px;
	text-align: left;
	font-size: 17px;
	font-weight: 500;
}
table td:nth-of-type(2) {
	color: #666;
	text-align: left;
}

/* ========== Sticky Header ========== */
table .table-header.sticky-table-header {
	position: fixed;
	visibility: hidden;
	top: 0;
}
table .table-header.sticky-table-header th {
	height: 77px;
}
table .table-header th.typography-label, 
table.table-content.typography-subbody {
	font-size: 15px;
}
table.table-content th,
table.table-content td,
table.table-content .table-header.sticky-table-header th {
	padding-right: 5px;
	padding-left: 5px;
}
table.table-content th:nth-of-type(1),
table.table-content td:nth-of-type(1),
table.table-content .table-header.sticky-table-header th:nth-of-type(1) {
	width: 186px;
	padding-right: 5px;
	padding-left: 10px;
	font-size: 15px;
}
:lang(zh-CN) table.table-content th:nth-of-type(1),
:lang(zh-CN) table.table-content td:nth-of-type(1),
:lang(zh-CN) table.table-content .table-header.sticky-table-header th:nth-of-type(1) {
	width: 183px;
}
table.table-content th:nth-of-type(2),
table.table-content td:nth-of-type(2),
table.table-content .table-header.sticky-table-header th:nth-of-type(2) {
	width: 448px;
}
:lang(zh-CN) table.table-content th:nth-of-type(2),
:lang(zh-CN) table.table-content td:nth-of-type(2),
:lang(zh-CN) table.table-content .table-header.sticky-table-header th:nth-of-type(2) {
	width: 435px;
}
:lang(zh-CN) table.table-content th:nth-of-type(3),
:lang(zh-CN) table.table-content td:nth-of-type(3),
:lang(zh-CN) table.table-content .table-header.sticky-table-header th:nth-of-type(3) {
	width: 95px;
}
:lang(zh-CN) table.table-content th:nth-of-type(4),
:lang(zh-CN) table.table-content td:nth-of-type(4),
:lang(zh-CN) table.table-content .table-header.sticky-table-header th:nth-of-type(4) {
	width: 63px;
}
:lang(zh-CN) table.table-content th:nth-of-type(5),
:lang(zh-CN) table.table-content td:nth-of-type(5),
:lang(zh-CN) table.table-content .table-header.sticky-table-header th:nth-of-type(5) {
	width: 53px;
}
:lang(zh-CN) table.table-content th:nth-of-type(6),
:lang(zh-CN) table.table-content td:nth-of-type(6),
:lang(zh-CN) table.table-content .table-header.sticky-table-header th:nth-of-type(6) {
	width: 75px;
}
:lang(zh-CN) table.table-content th:nth-of-type(7),
:lang(zh-CN) table.table-content td:nth-of-type(7),
:lang(zh-CN) table.table-content .table-header.sticky-table-header th:nth-of-type(7) {
	width: 76px;
}
@media only screen and (max-width: 1068px) {
	table.table-content th,
	table.table-content td,
	table.table-content .table-header.sticky-table-header th {
		width: 47px;
	}
	table.table-content th:nth-of-type(1),
	table.table-content td:nth-of-type(1),
	table.table-content .table-header.sticky-table-header th:nth-of-type(1) {
		width: 156px;
	}
	:lang(zh-CN) table.table-content th:nth-of-type(1),
	:lang(zh-CN) table.table-content td:nth-of-type(1),
	:lang(zh-CN) table.table-content .table-header.sticky-table-header th:nth-of-type(1) {
		width: 125px;
	}
	table.table-content th:nth-of-type(2),
	table.table-content td:nth-of-type(2),
	table.table-content .table-header.sticky-table-header th:nth-of-type(2) {
		width: 188px;
	}
	:lang(zh-CN) table.table-content th:nth-of-type(2),
	:lang(zh-CN) table.table-content td:nth-of-type(2),
	:lang(zh-CN) table.table-content .table-header.sticky-table-header th:nth-of-type(2) {
		width: 205px;
	}
}

@media only screen and (max-width: 735px) {
	table.table-content {
		background-color: #fff;
	}
	table .table-header {
		width: 100%;
	}
	table thead th,
	table .table-header.sticky-table-header th {
		height: 50px;
	}
	table .table-header th.typography-label,
	table.table-content.typography-subbody,
	table.table-content th:nth-of-type(1),
	table.table-content td:nth-of-type(1),
	table.table-content .table-header.sticky-table-header th:nth-of-type(1) {
		font-size: 12px;
	}
	table .table-header.sticky-table-header {
		width: 87.5%;
	}
	table.table-content {
		min-width: unset;
	}
	table.table-content .table-header.sticky-table-header {
		display: none;
	}
	.section-hero .row .column.large-12 {
		overflow-x: auto;
	}
}

@media only screen and (max-width: 375px) {
	table .table-header th.typography-label,
	table.table-content.typography-subbody,
	table.table-content th:nth-of-type(1),
	table.table-content td:nth-of-type(1),
	table.table-content .table-header.sticky-table-header th:nth-of-type(1) {
		font-size: 10px;
	}
}



/* ========== Grid ========== */
#main section.section {
	padding-top: 4em;
	padding-bottom: 4em;
}
#main section.section.section-resources {
	padding-bottom: 0;
}
#main section .section-content .row {
	margin-left: 0;
	margin-right: 0;
}
#main section .section-content .row > .column {
	padding: 0;
}
#main section .section-content .row > .column.large-6:first-of-type {
	padding-right: 2em;
}
#main section .section-content .row > .column.large-6:last-of-type {
	padding-left: 2em;
}

@media only screen and (max-width: 1068px) {
	#main section .section-content .row {
		margin-left: 0;
		margin-right: 0;
	}
	#main section .section-content .row > .column {
		padding: 0;
	}
}

@media only screen and (max-width: 735px) {
	#main section.section {
		padding-top: 4em;
		padding-bottom: 4em;
	}
	#main section .section-content .row {
		margin-left: 0;
		margin-right: 0;
	}
	#main section .section-content .row > .column {
		padding: 0;
	}
	#main section .section-content .row > .column.large-6:first-of-type {
		padding-right: 0;
	}
	#main section .section-content .row > .column.large-6:last-of-type {
		padding-left: 0;
	}
}


/* DARK MODE */
html body.dmf[data-color-scheme="dark"] table thead th {background-color: var(--fill);}

