@charset "utf-8";
/* In Frame 2019, you can only import one .css file in topic-template-*.html. So media queries for 
the tablet and mobile layouts must be included in this file. */


:root {
	--font-family-headings: BentonSans, "Helvetica Neue", Helvetica, sans-serif;
	--font-family-text: "Helvetica Neue", Helvetica, sans-serif;
	
	--font-weight-light: 300; /* heading 1 and 2 */
	--font-weight-regular: 400; /* text, heading 3 */
	--font-weight-bold: 600; /* bold text, table headers, and heading 4, 5, 6. When applied to Helvetica Neue, it doesn't look any different than normal weight */
	
	--font-size-tip-box: 0.75rem;
	--line-height-tip-box: 1rem;
	--font-size-small: 0.8125rem; /* small text */
	--line-height-small: 1.125rem;
	--font-size-regular: 0.9375rem; /* text, h5 */
	--line-height-regular: 1.375rem;
	--font-size-medium: 1.1rem; /* h4, was 1 rem */
	--line-height-medium: 1.6rem; /* was 1.5 rem */
	--font-size-large: 1.25rem; /* h3 */
	--line-height-large: 1.75rem;
	--font-size-larger: 1.875rem; /* h2 */
	--line-height-larger: 2.375rem;
	--font-size-giant: 2.375rem; /* h1 */
	--line-height-giant: 2.75rem;
	--font-size-title: 3.5rem; /* title */
	--line-height-title: 4.25rem;
	--font-size-bullet: 0.6rem;

	--color-text-default: #333333;
	--color-link: #006fcf;
	--color-box-bkgd:#f3f2f2; /* was #ecedee. Changed for accessibility contrast.*/
	--color-amex-blue: #00175a;
	--color-tbl-head: #c8c9c7; /* Outside table borders */
	--color-tbl-hover: #f7f8f9;
	--color-future: #75797b;
	--color-graphic-text: #01185a;

	--tbl-border-size: 0.0625rem;
	--tbl-border-style: solid;
	--tbl-border-color: #e3e3e3; /* Inside cell/row borders */

	--padding-cell-tb: 0.9375rem;
	--padding-cell-rl: 0.625rem;
	--padding-cell-small: 0.5rem;
}

@font-face {
	font-family: "BentonSans";
	font-weight: 300;
	font-display: swap;
	src: url("https://www.aexp-static.com/nav/ngn/fonts/325e6ad0-38fb-4bad-861c-d965eab101d5-3.woff") format("woff");
}

@font-face {
	font-family: "BentonSans";
	font-weight: 400;
	font-display: swap;
	src: url("https://www.aexp-static.com/nav/ngn/fonts/3be50273-0b2e-4aef-ae68-882eacd611f9-3.woff") format("woff");
}

@font-face {
	font-family: "BentonSans";
	font-weight: 500;
	font-display: swap;
	src: url("https://www.aexp-static.com/nav/ngn/fonts/0fababca-4914-46dd-9b0f-efbd51f67ae8-3.woff") format("woff");
}
/* don't think this is needed if inline styles are cleaned up, but just in case, this will prevent Medium font inline styles from showing up in Times New Roman */
@font-face {
	font-family: "BentonSans Medium";
	src: local("Helvetica Neue"),
		local("HelveticaNeue"),
		local("Helvetica Neue Bold"),
		local("Helvetica"),
		local("Arial");
	font-weight: 600;
}

/* makes the amex dls icons font available */
@font-face {
	font-family: "dls-icons";
	font-weight: 400;
	font-display: swap;
	src: url("https://www.aexp-static.com/cdaas/one/statics/axp-static-assets/2.14.1/package/dist/iconfont/dls-icons.woff") format("woff");
}

html {
	line-height: 1.15;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	max-width: 1240px;
}

body {
	margin: 2em 2em 2em 2em;
}

pre {
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	font-size: var(--font-size-medium);
}

a {
	background-color: transparent;
	-webkit-text-decoration-skip: objects;
}
b {
	font-weight: bolder;
	font-weight: var(--font-weight-bold);
}
strong {
	font-weight: bolder;
	font-weight: var(--font-weight-bold);
}

sub {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
	bottom: -0.25em;
}

sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
	top: -0.5em;
}

img {
	border-style: none;
	display: block; /* added */
	float: none !important;
	margin: 1.25rem auto;
}

svg:not(:root) {
	overflow: hidden;
}


/*----------------- Above are from dls. Below are fixes by us.---------------------- */

h1.Amex_Cover_Title,
p.Amex_Cover_Title {
	margin-top: 0;
	margin-bottom: 3rem;
	font-family: var(--font-family-headings);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-title);
	line-height: var(--line-height-title);
	color: var(--color-text-default);
}

/* Remove link format from glossary terms on the Glossary page*/
p.Amex_Glossary_Term a {
	cursor: default;
	text-decoration: none;
	color: var(--color-text-default);
}

/* change link color in mini-tocs on chapter start pages */
p[class*="MTOC"] a {
	color: inherit;
}

/* Default fix the left padding Frame adds for autonumbers.	This will not get applied if it's put in the RHstyleMapping.css. Probably because the !important is needed to override the inline padding that Frame inserts for this class */
span.FMAutoNumber_1 { 
	padding-left: 0 !important;
}

/* fix space between number and text in mini-TOC entries on the Appendix page */
p.Amex_Heading_2_NoNumMTOC span {
	margin-right: 0.8rem;
}

/* reduce space between multiple in-body footnotes */
p.Amex_Body_Footnote + p.Amex_Body_Footnote {
	margin-top: -1em;
}

/* Set the space between the bullet and text in a tip box list */
p.Body_Tip_Box_Bullet span.FMAutoNumber_1 {
	padding-left: 0.5em !important;
}

/* let www links in a tip box break in the middle of the link if needed, so the link doesn't run outside the box/page */ 
p.Body_Tip_Box a,
p.Body_Tip_Box_Bullet a {
	word-wrap: break-word;
}

/* I think this is required to collapse the space between a tip paragraph and the first tip bullet under it so there's no white gap */
p.Body_Tip_Box + p.Body_Tip_Box_Bullet,
p.Body_Tip_Box + p.Body_Tip_Box {
	margin-top: -0.2rem;
}

/* This is a box width adjustment if the tip is anchored in a step. Have to add the left padding from the list so that the tip box is the same width as other tip boxes that aren't in steps. Example in 4.5.1.2 Contact Chip Card Charges. These two styles are identical but must be separate. */
ol p.Body_Tip_Box {
	width: calc(20% + 8px);
	}

/* This is a box width adjustment if the tip is anchored in a step. Have to add the left padding from the list so that the tip box is the same width as other tip boxes that aren't in steps. Example in 4.5.1.2 Contact Chip Card Charges. */
ol p.Body_Tip_Box_Bullet {
	width: calc(20% + 8px);
	}

/* Find the divs that Frame outputs to hold images that are inside a tip box. These images are output to a separate centered div immediately after the tip box paragraph. Example in 5.8 Card Identification (CID) Number */
p.Body_Tip_Box + div[align^="center"],
p.Body_Tip_Box_Bullet + div[align^="center"] {
	padding: 0.25em 0.625em 0.5em 0.625em;
	margin: -0.2rem 0 0 1rem;
	background-color: var(--color-box-bkgd);
	width: calc(20% - 0.25em);
	float: right;
	clear: both;
	}

/* Find images inside those divs and remove the default image margin */ 
p.Body_Tip_Box + div[align^="center"] img,
p.Body_Tip_Box_Bullet + div[align^="center"] img {
	margin: 0;
}

/* For tips that are supposed to separate but are positioned in Frame one after the other, they appear as one tip. To prevent this, a "hidden" online-only paragraph has to be inserted in Frame to separate them. It must be formatted in the Amex_Footer style so it is hidden in the web output but I can target it in the css so I can add the space between the tips */

p.Amex_Footer + p.Body_Tip_Box,
p.Amex_Footer + p.Body_Tip_Box_Bullet {
	margin-top: 0.5rem;
}

footer {
	background-color: var(--color-box-bkgd);
	margin-top: 2.5rem;
	padding: 0.5rem 0.5rem 0.25rem;
}

footer p {
	margin-top: 0em;
	margin-bottom: 0.3em;
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
}

/* used to hide anything */
img.hide,
span.hide,
p.hide {
	display: none;
	visibility: hidden;
}

/* hide the extra spaces that Frame inserts into x-refs from the heading in Frame. The spaces in Frame are needed to separate the autonumber from the heading text, but they shouldn't show in the x-refs to the headings. */
span.Blue_Underline span {
	display: none;
}

span.Blue_Underline a,
a span.Blue_Underline
span.Bold a,
a span.Bold,
span.Hyperlink a,
a span.Hyperlink,
span.Bold__Blue__Amex_100_ a,
a span.Bold__Blue__Amex_100_,
span.Emphasis a,
a span.Emphasis,
span.Blue__Amex_100_ a,
a span.Blue__Amex_100_,
p.Footnote a { /* stop the user agent from overriding the color of a links inside these spans or spans inside a links */
	color: var(--color-link);
	text-decoration:underline;
	cursor: pointer;
}

/* add space between the bullet and text for level-2 or 3 bullet lists. Any p class that contains both the word bullet and the number 2 */
p[class*="bullet" i][class*="2"] span[class*="Wingdings"],
p[class*="bullet" i][class*="3"] span[class*="Wingdings"] {
	font-size: 0px;
	line-height: 0rem;
	/* padding-right: 0.6em; This is the old def for when the section mark symbol was showing in the output
	padding-left: 0; */
}

p[class*="bullet" i] span[class*="Wingdings"]::before {
	font-family: "dls-icons";
	font-size: var(--font-size-bullet); 
	content: "■"; /* Unicode character Black Square, ■ or ■ but codes don't work in "content" */
	padding: 0 0.6rem 0 0;
	vertical-align: 0.3em;
	line-height: normal;
}
/* add space between the number and text for numbered lists not output as OL, and bullet and text for nonsquare bullet level 3 not output as UL */
p[class*="letter" i] > span:first-child,
p[class*="number" i] > span:first-child,
p[class*="roman" i] > span:first-child,
p.Amex_Body_Level_3_Bullet > span:first-child {
	padding-right: 0.6em;
	padding-left: 0;
}

/* indent a bullet list inside a lettered list */
p.Amex_Body_Level_1_Lettered + ul,
[class*="table_body_lettered" i] + ul {
	margin-left: 3em;
}

/* should match Amex Body Level 1 Text*/
p.Amex_Body_Level_1_Text_SPAN {
}

 /* should match Amex Heading 2*/
h2.Amex_Heading_2_Appendix {
}

/*– should match Amex Heading 2_Appendix*/
h2.Amex_Heading_3_Appendix {
}

/* – should match Amex Heading 3*/
h3.Amex_Heading_3_Action {
}

/*– should match Amex Heading 4_NoNum*/
h4.Amex_Heading_4_Appendix {
}

/* no bold on headings where a blue character format has been applied. */
h3.Bold__Blue__Amex_100_ {
	font-weight: inherit;
}

/* ---------------------Future chapter style overrides ------------------*/

*[class*="future" i],
*[class*="future" i] span,
*[class*="future" i] a,
*[class*="future" i] a:hover,
*[class*="future" i] a:visited,
*[class*="future" i] a:active,
span.Grey_Underline {
	color: var(--color-future) !important;
}


/* ------------------- Sidebar images and Change icons -------------------*/

/* find divs for sidebar images (graphics) that are being output as divs instead of into a paragraph with the style for their anchor. And p.Anchor__Sidehead should use the same settings. p.Anchor__Sidehead must be listed in RHstyleMapping, but there the definition is blank because we want to use all the same settings as for these divs, and the settings for these divs can only be done in this topic-template.css file. */
div[align^="right"],
p.Anchor__Sidehead {
	float: right;
	margin: 0 0 0.75rem 1rem;
	clear: both;
}

/* remove the default margins on sidehead images correctly output in a p.Anchor__Sidehead */
p.Anchor__Sidehead img {
	margin: 0;
}

/* find images inside the incorrectly output divs and remove the default margin */
div[align^="right"] > img {
	margin: 0;
}

/* find divs incorrectly output when it should be a change icon paragraph. These get output immediately after a blank change icon paragraph. So if you insert a blank change icon paragraph above the "normal" change icon paragraph and condition that to online only, then then I can target that specific sequence of styles to find only those div align rights that are wrong and fix them. This style moves the incorrect div align right paragraph to be offset next to the heading that precedes it. I don't know if this will work if the icon is supposed to appear next to a paragraph that's not a heading. */
p.Anchor__ChangeIcon + div[align^="right"] {
	float: left;
	margin: -22px 0 0 -30px;
	clear: none;
}
/* this fixes the empty change icon paragraph, which SHOULD contain the icon but doesn't, so that it doesn't take up extra room on the page. The first change icon paragraph adds an extra 5px or so space above the paragraph that follows the heading, but there's nothing I can do about that without knowing exactly the style that's going to follow the heading. It's not that noticeable. */
p.Anchor__ChangeIcon + div[align^="right"] + p.Anchor__ChangeIcon {
	float: none;
	margin: 0px 0 0px 0px;
	clear: none;
}

/* now find the divs for Change icons where the icon is being output into a right-aligned div instead of inside the Anchor_ChangeIcon paragraph like it should be. Then change it back to left-aligned. */

/* target incorrect divs output by frame for some anchor change icon paragraphs. Where it doesn't output the change icon inside the change icon paragraph, but instead puts it in a right-aligned div above the change icon paragraph, which is empty. To fix this, we input a special online-only paragraph in Frame, above the change icon paragraph, that allows us to target only those divs */

p.Z_ChangeIconFix + div[align="right"] { 
	float: none;
	margin: -51px 0 0 -30px;
	text-align: left;
}
/* and hide the incorrect empty change icon paragraph that follows the div */
p.Z_ChangeIconFix + div[align="right"] + p.Anchor__ChangeIcon {
	display: none;
}

/* In the output, all change icons are set to a max-width of 25px. This is just slightly too big for the column of white space it needs to fit into in the desktop layout. It's a little too close to the heading text it's positioned next to. */
p.Anchor__ChangeIcon object {
	max-width: 22px !important;
}
h3 + p.Anchor__ChangeIcon,
h4 + p.Anchor__ChangeIcon,
h5 + p.Anchor__ChangeIcon,
h3 + p.Z_ChangeIconFix + div[align="right"],
h4 + p.Z_ChangeIconFix + div[align="right"],
h5 + p.Z_ChangeIconFix + div[align="right"]
{ /* the base style in RHstyleMapping works for H1 and H2 but is too high for headings 3 to 5. 45px is adequate to use for all three without defining different, more precise settings for each. Keep in mind that if a heading wraps to two lines, the icon will appear next to the bottom line. There's nothing I can do about that. */
	margin-top: -45px;
}

/* If the anchor change icon is on a chapter head (h1), it's immediately followed by a miniTOC, and the positioning of the icon moves the miniTOC up so it's too close to the heading. So add back the space that's supposed to be below the heading and above the first Mtoc item. */

p.Anchor__ChangeIcon + p.Amex_Heading_2MTOC {
	margin-top: 1.25rem;
}

/* change the change icon position for heading 1 (heading 1 and heading 2 in Frame) */
h1 a[name^="IX"] {
	top: 0.95em;
	margin-top: -0.62em;
}

/* change the change icon position for heading 2 (heading 3 in Frame) */
h2 a[name^="IX"] {
	top: 1em;
	margin-top: -0.62em;
}

/* change the change icon position for heading 3 (heading 4 in Frame) and a glossary term heading */
h3 a[name^="IX"], p.Amex_Glossary_Term a[name^="IX"] {
	top: 1.25em;
	margin-top: -1em;
}

/* change the change icon position for heading 4 (heading 5 in Frame) */
h4 a[name^="IX"] {
	top: 1.5em;
	margin-top: -1.7em;
}

/* change the change icon position for a p in a table cell */
td p a[name^="IX"] {
	top: 0;
	left: 0;
}

/* But the 100% width causes problems where we want tips to float to the right of a table. The table 
won't resize to fit to the left of the tips .So change the width to auto so the table autosize to the 
left of the tip. You can't use a percentage because as you resize the browser, the width won't calculate 
consistently to make the table small enough to wrap. */
p.Body_Tip_Box + div[align^="left"] table {
	width: auto !important;
}

/* Then set the first column to a minimum width so the browser won't make it too narrow. Can only control 
this a little bit. This is the best I can do for the desktop layout. There are different settings for the
mobile and tablet layouts for tip boxes and related tables */
p.Body_Tip_Box + div[align^="left"] table td:first-child {
	min-width: 14rem;
}


/* ----------------TABLES------------------------*/

/* Below is table formatting from the DLS, applied to the table styles used in Frame. Plus customizations
by us for the content in tables.
For testing, Sideheads are in 9 Fraud.
FirstColumn in MR CA Ch. 10 Risk Eval.
Complex in MR CA/US 8.7. 
NoHead in MR Contact Information.
Simple rowspan in MR CA 8.6.1 Enhanced Indemnity Obligation Reduction.
Simple colspans in MR CA 9.10 Fraud Mitigation Tools and MR US 14.2.2 Authorization Fees.
*/ 


/* Don't bother setting a border here because it will be overridden by td borders. */
table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	border: none;
	background-color: transparent;
	margin: 1.25rem 0;
}

/* find all tables and override the inline style for their width. We have to do this because Frame outputs a separate style for each table that hard-codes its width in points. e.g., 384.80pt. Because it's set in a specific style for each table, setting just the table element to be 100% gets overridden by the specificity of the individual style. Can't be auto because fixed layout only works with a set width. Layout is fixed so that even column widths will always be used. Without this, the browser determines the individual column widths and does a terrible job on many tables. E.g., the first column is tiny and wraps after 3-4 words, while the other column or two are 80% of the width. Fixed does cause different weirdness when the column content is wildly uneven, as in 5.5. But it provides more consistency across all tables.*/
table[class^="table"] {
	width: 100% !important;
	table-layout: fixed;
}

/* Make the table layout for Sidehead tables to not be fixed width. Most (all?) sidehead tables have a thinner first column because it's the header column and headers are usually shorter than the content. In this case, letting the browser determine the column width is better. Also change the FirstColumn table to not be fixed so you can set a specific width for the first column in the next style. */
table.Sidehead,
table.FirstColumn {
	table-layout:auto;
}

/* to set the width of the first column, the table has to be in auto layout and you have to set the max and min width as well. Otherwise, the browser's "intelligence" will override your settings. */
table.FirstColumn td:first-child {
	width: 25%;
	max-width: 25%;
	min-width: 20%;
}

/* Backup measure, to prevent double borders, just in case. */
table tr {
	border-collapse: collapse; 
}

/* The default border color is the same as the header shading. */
table td {
	font-family: var(--font-family-text);
	color: var(--color-text-default);
	border: var(--tbl-border-size) var(--tbl-border-style) var(--tbl-border-color);
	border-collapse: collapse; /* must be here to eliminate double borders */
	text-align: left;
	vertical-align: top;
	padding: var(--padding-cell-tb) var(--padding-cell-rl);
	overflow-wrap: break-word;
}

/* Frame 2019 never outputs <thead> and <th> tags for table headers, so none of this will be used.
But these are what they should be according to DLS, which is exactly like td except no break-word. */
table th {
	font-family: var(--font-family-text);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-default);
	border: var(--tbl-border-size) var(--tbl-border-style) var(--tbl-border-color);
	border-collapse: collapse; /* must be here to eliminate double borders */
	background-color: var(--color-tbl-head);
	text-align: left;
	vertical-align: top;
	padding: var(--padding-cell-tb) var(--padding-cell-rl);
	/* text-transform: uppercase; Amex doesn't like this default DLS setting */
}

/* Set the top border to outside color for the first row. */
table tr:first-child td {
	border-top-color: var(--color-tbl-head);
}
/* Set the left border to outside color for the first column. If the cell is not
in the first column, such as when the cell in the first column has a row span, which
means the first cell in the next row is actually in the second column, this color 
change won't apply because when the td borders are collapsed, the td right border 
on the first column takes precedence over the left border of the second column. */
table tr td:first-child {
	border-left-color: var(--color-tbl-head);
}
/* Set the right border to outside color only on the last cell in each row.*/
table tr td:last-child {
	border-right-color: var(--color-tbl-head);
}
/* Set the bottom border to outside color only on the cells in the last row.*/
table tr:last-child td {
	border-bottom-color: var(--color-tbl-head);
}

/* This will never get output with Frame 2019, and it's not needed
table thead {
	background-color: var(--color-tbl-head);
	padding: var(--padding-cell-tb) var(--padding-cell-rl);
} */

/* In Frame 2019, table headers are output as normal td tags. So for a Main or FirstColumn table, the headers 
will always be the first row. For a Sidehead, the headers will always be the first column. For a Complex table, 
the headers are the first and second rows.
Feb 2023 update: Amex accessibility requires headers to be in <thead> and <th> elements. Because Frame won't output 
these, we need to manually fix the code in the generated HTML. We had previously commented out the th selector below,
but now we need it. If the table code is correct, the remaining selectors should no longer be needed because there will
be no <td> tags in the 1st row anymore (or 1st and 2 for complex). */
table thead th,
table.Main tr.t1st td,
table.FirstColumn tr.t1st td, 
table.Complex tr.t1st td,
table.Complex tr.t2Row td,
table.Sidehead td.t1st { 
	font-weight: var(--font-weight-bold);
	/* text-transform: uppercase; Amex doesn't like this default DLS setting */
	background-color: var(--color-tbl-head);
	text-align: center; /* Requested by Amex; not consistent with the DLS styles */
}

/* set the Sidehead table headers back to left align */
table.Sidehead th {
	text-align: left;
}

/* Remove the top margin on the first element in a cell. */
td > ul:first-child li:first-of-type p:first-of-type, /* first p in first li only in immediate first child ul */
td > p:first-child { /* first p that is the immediate child in a cell; i.e., not in a list. */
	margin-top: 0;
}

/* Remove the bottom margin on the last element in a cell.*/
table ul:last-child li:last-of-type p:last-of-type, /* last p in last li only in ul that is the last element in a cell */
td > p:last-child { /* last p that is the immediate child in a cell; i.e., not in a list. */
	/*DO WE need a selector here for th? */
	margin-bottom: 0;
}

/* reduce the default left indent for numbered lists */
td > ol {
	padding-left: 1em;
}
/* add space after the number */
td ol li {
	padding-left: 0.3em;
}

/* Was used in 9.12.1 American Express SafeKey Fraud Liability Shift, the only place that a 
bullet list inside a table is followed immediately followed by a numbered list, meaning the numbered list 
should be indented under the last bullet. Removed as of Oct 21. */ 
td ul + ol {
	margin-left: 2.3rem;
}

/* add hover for rows in all tables. This will apply to all tables, including invisible ones, which is one reason why 
invisible tables shouldn't be used, or if used, must have a class indicating they are invisible. */
table tbody tr:hover {
	transition: background-color 0.15s ease-out;
	will-change: background-color;
	background-color: var(--color-tbl-hover);
}

/* Undo the borders, shading, and hover for the Graphic tables that have no headers, borders, or shading. 
If you want text centering, it has to all be centered. Or use a different P style on that centered content, 
like you should anyway instead of paragraph overrides. Using !important so that we don't have to specify all the
possible selectors we're using elsewhere to set visible table styles. */
/* table.Graphic thead,     shouldn't be a thead in a graphic table */
table.Graphic tr,
/* table.Graphic th,      shouldn't be a th in a graphic table */
table.Graphic td {
	border: none !important;
	background-color: initial !important;
	text-align: initial !important;
}
table.Graphic tbody tr:hover {
	transition: initial;
	will-change: unset;
	background-color: initial;
}

/* target a table that immediately follows another table. This should only apply when the second table is actually a table that contains footnotes for the first table. Otherwise, you should never have two tables one right after the other with no text between them. */

/* ROB: Removed these because we have section with table after table after table, and this was messing up the spacing*/
/* remove the margin */
/*div[align^="left"] + div[align^="left"] > table {
	margin: 0;
}*/
/* remove the borders and padding */
/*div[align^="left"] + div[align^="left"] > table tr, div[align^="left"] + div[align^="left"] > table td {
	border: none;
	padding: 0;
}*/

/* For a footnote inside a table, remove the top margin on the footnote paragraph. Only in IR Ch. 5
Chargebacks, bottom of 5.6.3, as of Oct. 21. Code should be changed so the footnote is under the 
table rather than inside it. */
div[align^="left"] + div[align^="left"] > table td p[class*="Footnote" i] {
	margin-top: -0.7rem;
	margin-left: 0.7rem;
}


/* The desktop layout is used for => 1025 device width. Max width is 1240. So with the sidebar open, the iframe topic width is between 674 and 890. If the topic html is >= 890, the default topic styles will be used. If the topic html is smaller than 890, the @media for tablet will be used. Until the topic html reaches 450 px or less, then the @media for mobile will be used. */

@media only screen and (max-width: 890px) {
	body {
		margin: 1em 1em 4em 2.5em; /* was 1em 1em 4em 1.5em before change icon*/
	}
	
	h1,
	p.Chapter_Level_Chapter_Title {
		font-size: var(--font-size-larger);
		line-height: var(--line-height-larger);
	}
	
	h2,
	p.Amex_Heading_FrontMatter,
	p.Amex_Heading_FrontMatter_for_TOC {
		font-size: calc(var(--font-size-larger) * .8);
		line-height: calc(var(--line-height-larger) * .8);
	}
	
	/* change the placement of the change icon. These are fine being inherited by the mobile layout (don't need separate mobile settings in topic-template-mobile.css). Keep in mind that if a heading wraps to two lines, the icon will appear next to the bottom line. There's nothing I can do about that. */
	h2 + p.Anchor__ChangeIcon,
	p.Amex_Heading_FrontMatter + p.Anchor__ChangeIcon {
		margin-top: -48px;
	}
	
	h3 + p.Anchor__ChangeIcon,
	h4 + p.Anchor__ChangeIcon,
	h5 + p.Anchor__ChangeIcon { /* 45px is adequate to use for all three heading levels without defining different, more precise settings for each.*/
		margin-top: -45px !important;
	}

	/* make the tip boxes a little wider for the tablet layout. Only the width is different than the default. */
	p.Body_Tip_Box {
		width: 25%;
	}

	p.Body_Tip_Box_Bullet {
		width:calc(25% - 0.975em);
	}

	/* This is a box width adjustment if the tip is anchored in a step. Have to add the left padding from the list so that the tip box is the same width as other tip boxes that aren't in steps. Example in 4.5.1.2 Contact Chip Card Charges. */
	ol p.Body_Tip_Box,
	ol p.Body_Tip_Box_Bullet {
		width: calc(25% + 8px);
	}
	
	/* Find the divs that Frame outputs to hold images that are inside a tip box. These images are output to a separate centered div immediately after the tip box paragraph. Example in 5.8 Card Identification (CID) Number. Change the width for tablet. */
	p.Body_Tip_Box + div[align^="center"],
	p.Body_Tip_Box_Bullet + div[align^="center"] {
		width: calc(25% - 0.25em);
	}
	
	/* For a table that floats to the left of a tip box, set the first column to a minimum width so the browser won't make it too narrow. Can only control this a little bit. This is the best I can do for the tablet layout. There are different settings for the desktop and tablet mobile layouts for tip boxes and related tables */
	p.Body_Tip_Box + div[align^="left"] table td:first-child {
		min-width: 11rem;
	}
	
	/* Reduce the font size in tables */
	td p[class*="body" i],
	td p[class*="table_head" i] {
		font-size: var(--font-size-small);
		line-height: var(--line-height-small);
	}
	
	td ol li::marker {
		font-size: var(--font-size-small);
	}
	
	/* make level 2 bullets in tables less indented */
	p.Amex_Table_Body_Bullet_2_Square {
		padding-left: 4rem;
		margin-left: 0;
	}
}


/* 450 is the biggest topic html width that should use the mobile topic layout. */ 
@media only screen and (max-width: 450px) {
	body {
		margin: 0.5rem 0.25rem 4rem 2rem; /* was 0.5rem 0.25rem 4rem 1rem before change icon */
	}
	
	/* make the bullets less indented */
	ul {
		padding-left: 1.2rem;
	}
	
	/* make level 2 bullets less indented */
	p.Amex_Body_Level_2_Bullet_Square,
	p.Amex_Table_Body_Bullet_2_Square {
		padding-left: 2.8rem;
		margin-left: 0;
	}
	
	h1,
	p.Chapter_Level_Chapter_Title {
		font-size: calc(var(--font-size-title) * .5);
		line-height: calc(var(--line-height-title) * .5);
	}
	
	/*make the tip box not float in the mobile layout */
	p.Body_Tip_Box {
		margin: 0 auto 0.2rem auto;
		padding: 0.5em 0.625em 0.5em 0.625em;
		width: 80%;
		float: none;
		clear: both;
	}
	p.Body_Tip_Box_Bullet {
		margin: 0 auto 0 auto;
		padding: 0.25em 0.625em 0.25em 1.6em;
		text-indent: -0.7rem;
		width: calc(80% - 0.975em); /* width minus (left padding - right padding) */
		float: none;
		clear: both;
	}
	/* This is a box width adjustment to override the width inherited from the tablet layout when the tip is anchored in a step. Example in 4.5.1.2 Contact Chip Card Charges. */
	ol p.Body_Tip_Box {
		margin: 0 0 0.2rem 0;
		width: 95%; 
	}
	
	ol p.Body_Tip_Box_Bullet {
		margin: 0;
		width: calc(95% - 0.975em); /* width minus (left padding minus right padding)*/
	}
	
	/* Find the divs that Frame outputs to hold images that are inside a tip box. These images are output to a separate centered div immediately after the tip box paragraph. Example in 5.8 Card Identification (CID) Number. Change the properties for mobile. */
	p.Body_Tip_Box + div[align^="center"], 
	p.Body_Tip_Box_Bullet + div[align^="center"] {
		padding: 0.25em 0.625em 0.25em 0.625em;
		margin: -0.2rem auto 0 auto;
		width: calc(80% - 0.25rem);
		float: none;
	}
	
	/* Reset the first column width from the tablet layout, for a table that floats to the left of a tip box. Since tip boxes don't float in mobile, the first col width shouldn't have a minimum  */
	p.Body_Tip_Box + div[align^="left"] table td:first-child {
		min-width: 0rem;
	}
	
	/* set mobile table width so they don't go off the page. Must have the second selector below to change the tables immediately after a tip so that their width isn't auto and the table layout = fixed will apply to make the columns automatically even. Fixed layout doesn't work with auto table width. */ 
	table[class^="table"], 
	p.Body_Tip_Box + div[align^="left"] table {
		width: 99.8% !important; /* this may need to change, but a set width of 800px is not the answer */
	}
	
	/* reduce the padding in table cells */
	table td,
	table th,
	/* table thead th,      shouldn't need this on top of th */
	table.Main tr.t1st td,
	table.Sidehead td.t1st,
	table.Complex tr.t1st td,
	table.Complex tr.t2Row td,
	table.FirstColumn tr.t1st td {
		padding: var(--padding-cell-small);
	}
}