/*<meta />*/

@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);

@font-face 
{
	font-family: 'Roboto Light';
	src: url(../Fonts/Roboto-Light.ttf);
}

@font-face 
{
	font-family: 'Roboto LightItalic';
	src: url(../Fonts/Roboto-LightItalic.ttf);
}

@font-face 
{
	font-family: 'Roboto Regular';
	src: url(../Fonts/Roboto-Regular.ttf);
}

@font-face 
{
	font-family: 'Roboto Italic';
	src: url(../Fonts/Roboto-Italic.ttf);
}

@font-face 
{
	font-family: 'Roboto SemiBold';
	src: url(../Fonts/Roboto-SemiBold.ttf);
}

@font-face 
{
	font-family: 'Roboto SemiBoldItalic';
	src: url(../Fonts/Roboto-SemiBoldItalic.ttf);
}

@font-face 
{
	font-family: 'Roboto Bold';
	src: url(../Fonts/Roboto-Bold.ttf);
}

@font-face 
{
	font-family: 'Roboto BoldItalic';
	src: url(../Fonts/Roboto-BoldItalic.ttf);
}

:root
{
	--JuvareRed: #ce0e2d;
	--White: #ffffff;
	--LinkBlue: #1c5a97;
	/* Root font size */
	font-size: 16px;
}

body
{
	color: #1a1a1a;
	background-color: #ffffff;
	font-family: 'Roboto Light', 'Open Sans', Arial, sans-serif;
	font-size: 16px;
	letter-spacing: .25px;
}

.body-container
{
	padding: 36px 0 0;
}

#mc-main-content
{
	margin: 0 32px;
}

.title-bar-container
{
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	/*creates the shadow effect in the header*/
}

/* Removes the side navigation from the home topic */

html.home-topic .sidenav-wrapper
{
	display: none;
}

/* Headings */

#title-text
{
	font-weight: 500;
	font-size: 28px;
}

h1
{
	font-family: 'Roboto SemiBold';
	font-size: 2.1rem;
	font-weight: normal;
	margin-top: 12px;
}

h2
{
	font-size: 1.75rem;
}

h3
{
	font-size: 1.35rem;
}

h4
{
	font-size: 1.1rem;
}

p
{
	line-height: 1.4rem;
	margin: 16px 0;
}

/* Links */

a,
a:link,
a:visited,
a:active
{
	color: #1c5a97;
	text-decoration: underline;
}

a:hover
{
	color: #1c5a97;
	text-decoration: none;
}

/* nested unordered list styling */

ul
{
	list-style-type: disc;
}

ul ul
{
	list-style-type: circle;
}

ul ul ul
{
	list-style-type: square;
}

ul ul ul ul
{
	list-style-type: disc;
}

ul ul ul ul ul
{
	list-style-type: circle;
}

/* ordered list nesting */

ol
{
	list-style-type: decimal;
}

ol ol
{
	list-style-type: lower-alpha;
}

ol ol ol
{
	list-style-type: lower-roman;
}

ol ol ol ol
{
	list-style-type: decimal;
}

ol ol ol ol ol
{
	list-style-type: lower-alpha;
}

/*Makes imgages responsive*/

img
{
	max-width: 100%;
	height: auto;
}

/* BREADCRUMBS */

.breadcrumbs
{
	padding-bottom: 0;
	border-bottom: none;
}

span.MCBreadcrumbsSelf:last-of-type
{
	font-weight: bold;
}

/* SEARCH HIGHLIGHT */

span.SearchHighlight
{
	background-color: #ffffc5;
}

/*This is to format the feedback survey*/

.feedback-reason
{
	display: none;
}

.feedback-question i:hover,
.feedback-question i:focus,
.feedback-question i:active
{
	cursor: pointer;
}

/* Feedback details textbox under each checkbox */
/* Base styling */

.feedback-details
{
	margin: 8px 0 0 24px;
	width: 100%;
	max-width: 520px;
	box-sizing: border-box;
	padding: 8px 10px;
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.4;
	border: 1px solid #ccc;
	border-radius: 6px;
	background-color: #fafafa;
	resize: vertical;
	/* allow vertical resize only */
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Hidden state */

.feedback-details.is-hidden
{
	display: none;
}

/* Focus styling */

.feedback-details:focus
{
	border-color: #4a90e2;
	background-color: #ffffff;
	outline: none;
	box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
}

/* Placeholder styling */

.feedback-details::placeholder
{
	color: #999;
	font-style: italic;
}

/*This is a custom responsive layout row style (div class) in your stylesheet. To provide your own description for this style: (1) Open the stylesheet; (2) Find and select the div class with this name; and (3) In the Comment field, replace this text with your own. For more information on adding comments to styles, see the online Help.*/

.topic-top
{
	mc-grid-row: true;
	margin-left: 32px;
	margin-right: 32px;
	padding-bottom: 20px;
	padding-top: 16px;
}

.topic-top::before
{
	content: ' ';
	display: table;
}

.topic-top::after
{
	content: ' ';
	display: table;
	clear: both;
}

.topic-top > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.topic-top > div:nth-child(1)
{
	width: 66.66667%;
	margin-left: 0%;
}

.topic-top > div:nth-child(2)
{
	width: 33.33333%;
	margin-left: 0%;
}

/*Top Button*/

#myBtn
{
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	font-size: 18px;
	font-weight: bold;
	border: none;
	outline: none;
	color: #555;
	cursor: pointer;
	padding: 15px;
	border-radius: 4px;
	background-position: center;
	background-repeat: no-repeat;
}

#myBtn:hover
{
	background-color: transparent;
}

MadCap|codeSnippetCopyButton
{
	mc-label: 'Copy Code';
}

MadCap|xref
{
	color: #1c5a97;
	text-decoration: underline;
}

MadCap|xref:hover
{
	text-decoration: none;
}

MadCap|breadcrumbsProxy
{
	border-bottom-style: none;
}

/* Dropdown icons */

MadCap|dropDown
{
	mc-closed-image: url('../Images/skin/dropdown-arrow-right.png');
	mc-open-image: url('../Images/skin/dropdown-arrow-down.png');
}

MadCap|dropDownHotspot
{
	color: #1a1a1a;
	font-size: 1.1rem;
	font-weight: bold;
}

.MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage
{
	padding-left: 6px;
}

.MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage
{
	padding-left: 6px;
}

/* Hover (and keyboard focus) state */

MadCap|dropDownHotspot:hover
{
	color: #1c5a97;
}

div.MCDropDown
{
	margin-top: 6px;
	margin-bottom: 6px;
	padding-bottom: 10px;
	padding-top: 10px;
}

td div.MCDropDown
{
	padding-bottom: 4px;
	padding-top: 4px;
}

.dropDown
{
	border-bottom: 1px solid #dddddd;
}

td .dropDown
{
	border-bottom: 0;
}

/*Apply to UI elements that you click. Select the word or words first.*/

.Click-UI-Element
{
	font-weight: bold;
}

/*Apply to the sentence introducing the procedure text. Click anywhere in the line first.*/

.Heading-Procedure
{
	font-weight: bold;
}

/*Used for second level headings in release notes.*/

.Heading-Section-Red
{
	font-weight: 600;
	font-family: 'Roboto SemiBold';
	font-size: 14pt;
	color: #CE0E2D;
}

/*Apply to the p tag to center an image.*/

.img-Center
{
	text-align: center;
	padding-top: 6px;
	padding-bottom: 6px;
}

/* Beginning of note-video p and div styles*/
/* Shrink-wrap both containers */

p.Note-Video-Gen,
p.Note-Video,
div.Video-Multiple-Bullets
{
	display: inline-block;
	margin: 14px 0;
	border-radius: 6px;
	border: 1px solid #8A7BD6;
	background-color: #F8F6FD;
	background-repeat: no-repeat;
	background-image: url('../Images/skin/video-icon.png');
	background-position: 8px 6px;
	padding: 15px 17px 16px 53px;
	box-sizing: border-box;
	overflow: hidden;
	vertical-align: top;
	mc-auto-number-format: 'This video demonstrates the steps below.';
	mc-auto-number-class: VideoAutoNumText;
}

span.VideoAutoNumText
{
	display: block;
	margin-bottom: 10px;
}

p.Note-Video-Gen
{
	mc-auto-number-format: '';
}

/* Video sizing */

p.Note-Video-Gen > iframe,
p.Note-Video > iframe,
div.Video-Multiple-Bullets > iframe
{
	display: block;
	width: 600px;
	/* desktop width */
	max-width: 100%;
	/* responsive smaller */
	aspect-ratio: 16 / 9;
	border: 0;
}

/* Beginning of note p and div styles*/

p.Note
{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-color: #f0f7fb;
	background-repeat: no-repeat;
	border: solid 1px #3498db;
	border-radius: 6px;
	overflow: hidden;
	background-image: url('../Images/skin/note-icon.png');
	padding: 15px 15px 16px 53px;
	background-position: 8px 6px;
}

/*Allows for multiple paragraphs and lists within notes*/

div.Note-Multiple-Bullets
{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-color: #f0f7fb;
	background-repeat: no-repeat;
	border: solid 1px #3498db;
	border-radius: 6px;
	overflow: hidden;
	background-image: url('../Images/skin/note-icon.png');
	padding: 15px 15px 16px 53px;
	background-position: 8px 6px;
	margin: 14px 0;
}

/* End of note styles*/
/* Beginning of "important" note p and div styles */

p.Note-Important
{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-color: #fcf7f3;
	background-repeat: no-repeat;
	border-radius: 6px;
	overflow: hidden;
	padding: 15px 15px 16px 53px;
	border: solid 1px #ffb071;
	background-image: url('../Images/skin/important-icon.png');
	background-position: 8px 6px;
}

div.Important-Multiple-Bullets	/*Allows for multiple paragraphs and lists within notes*/
{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-color: #fcf7f3;
	background-repeat: no-repeat;
	border: solid 1px #ffb071;
	border-radius: 6px;
	overflow: hidden;
	background-image: url('../Images/skin/important-icon.png');
	padding: 15px 15px 16px 53px;
	background-position: 8px 6px;
	margin: 14px 0;
}

/* End of "important" note p and div styles */
/* Beginning of "tip" note p and div styles */

p.Note-Tip
{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-color: #FEFBEA;
	background-repeat: no-repeat;
	border-radius: 6px;
	overflow: hidden;
	padding: 15px 15px 16px 53px;
	background-image: url('../Images/skin/tip-icon.png');
	border: solid 1px #F1C611;
	background-position: 8px 6px;
}

div.Tips-Multiple-Bullets	/*Allows for multiple paragraphs and lists within notes*/
{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-color: #FEFBEA;
	background-repeat: no-repeat;
	border: solid 1px #F1C611;
	border-radius: 6px;
	overflow: hidden;
	background-image: url('../Images/skin/tip-icon.png');
	padding: 15px 15px 16px 53px;
	background-position: 8px 6px;
	margin: 14px 0;
}

/* End of "tip" note p and div styles */
/* Beginning of "example" note p and div styles */

p.Note-Example
{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-color: #E7F6F1;
	background-repeat: no-repeat;
	border-radius: 6px;
	overflow: hidden;
	padding: 15px;
	border: solid 1px #71A68A;
	background-position: 10px 9px;
	mc-auto-number-format: 'Example ';
	mc-auto-number-class: ExampleAutoNumText;
}

div.Example-Multiple-Bullets
{
	mc-auto-number-format: 'Example ';
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border: solid 1px #71A68A;
	background-color: #E7F6F1;
	padding: 15px;
	mc-auto-number-class: ExampleAutoNumText;
	margin: 14px 0;
}

span.ExampleAutoNumText
{
	letter-spacing: 2px;
	font-weight: bold;
	display: block;
	margin-bottom: 10px;
	font-size: 17px;
}

/* End of "example" note p and div styles */
/* Beginning multiple paragraph div styling */

div.Note-Multiple-Bullets > ul,
div.Note-Multiple-Bullets > ol,
div.Important-Multiple-Bullets > ul,
div.Important-Multiple-Bullets > ol,
div.Tips-Multiple-Bullets > ul,
div.Tips-Multiple-Bullets > ol,
div.Example-Multiple-Bullets > ul,
div.Example-Multiple-Bullets > ol,
div.Video-Multiple-Bullets > ul,
div.Video-Multiple-Bullets > ol
{
	margin-left: -15px;
}

div.Note-Multiple-Bullets > p:first-child,
div.Important-Multiple-Bullets > p:first-child,
div.Tips-Multiple-Bullets > p:first-child,
div.Example-Multiple-Bullets > p:first-child,
div.Video-Multiple-Bullets > p:first-child
{
	margin-top: 0;
}

div.Note-Multiple-Bullets > p:last-child,
div.Important-Multiple-Bullets > p:last-child,
div.Tips-Multiple-Bullets > p:last-child,
div.Example-Multiple-Bullets > p:last-child,
div.Video-Multiple-Bullets > p:last-child
{
	margin-bottom: 0;
}

div.Note-Multiple-Bullets li:first-child > p,
div.Important-Multiple-Bullets li:first-child > p,
div.Tips-Multiple-Bullets li:first-child > p,
div.Example-Multiple-Bullets li:first-child > p,
div.Video-Multiple-Bullets li:first-child > p
{
	margin-top: 0;
}

div.Note-Multiple-Bullets li:last-child > p,
div.Important-Multiple-Bullets li:last-child > p,
div.Tips-Multiple-Bullets li:last-child > p,
div.Example-Multiple-Bullets li:last-child > p,
div.Video-Multiple-Bullets li:last-child > p
{
	margin-bottom: 0;
}

div.Note-Multiple-Bullets > ul,
div.Note-Multiple-Bullets > ol,
div.Important-Multiple-Bullets > ul,
div.Important-Multiple-Bullets > ol,
div.Tips-Multiple-Bullets > ul,
div.Tips-Multiple-Bullets > ol,
div.Example-Multiple-Bullets > ul,
div.Example-Multiple-Bullets > ol,
div.Video-Multiple-Bullets > ul,
div.Video-Multiple-Bullets > ol
{
	margin-top: 0;
	margin-bottom: 0;
}

div.Note-Multiple-Bullets ul li ul > li:first-child > p,
div.Note-Multiple-Bullets ul li ol > li:first-child > p,
div.Note-Multiple-Bullets ol li ul > li:first-child > p,
div.Note-Multiple-Bullets ol li ol > li:first-child > p,
div.Important-Multiple-Bullets ul li ul > li:first-child > p,
div.Important-Multiple-Bullets ul li ol > li:first-child > p,
div.Important-Multiple-Bullets ol li ul > li:first-child > p,
div.Important-Multiple-Bullets ol li ol > li:first-child > p,
div.Tips-Multiple-Bullets ul li ul > li:first-child > p,
div.Tips-Multiple-Bullets ul li ol > li:first-child > p,
div.Tips-Multiple-Bullets ol li ul > li:first-child > p,
div.Tips-Multiple-Bullets ol li ol > li:first-child > p,
div.Example-Multiple-Bullets ul li ul > li:first-child > p,
div.Example-Multiple-Bullets ul li ol > li:first-child > p,
div.Example-Multiple-Bullets ol li ul > li:first-child > p,
div.Example-Multiple-Bullets ol li ol > li:first-child > p,
div.Video-Multiple-Bullets ul li ul > li:first-child > p,
div.Video-Multiple-Bullets ul li ol > li:first-child > p,
div.Video-Multiple-Bullets ol li ul > li:first-child > p,
div.Video-Multiple-Bullets ol li ol > li:first-child > p
{
	margin-top: 14px;
}

/* End multiple paragraph div styling */
/*Apply this style to window names. Select the word or words first.*/

.Window
{
	font-style: italic;
}

img.Image-Border	/*Adds border to image*/
{
	border: 1px solid #dddddd;
}

/*Select the image tag and apply this style. Reduces an img to 75% of original size.*/

img.Img-75
{
	width: 75%;
}

/*Select the image tag and apply this style. Reduces an img to 65% of original size.*/

img.Img-65
{
	width: 65%;
}

/*Select the image tag and apply this style. Reduces an img to 50% of original size.*/

img.Img-50
{
	width: 50%;
}

/*Select the image tag and apply this style. Reduces an img to 35% of original size.*/

img.Img-35
{
	width: 35%;
}

/*Select the image tag and apply this style. Reduces an img to 25% of original size.*/

img.Img-25
{
	width: 25%;
}

img.ThumbnailLarge
{
	mc-thumbnail: popup;
	mc-thumbnail-max-height: 250px;
	height: auto;
	border: 1px solid #dddddd;
}

img.ThumbnailMedium
{
	mc-thumbnail: popup;
	mc-thumbnail-max-height: 188px;
	height: auto;
	border: 1px solid #dddddd;
}

img.ThumbnailSmall
{
	mc-thumbnail: popup;
	mc-thumbnail-max-height: 125px;
	height: auto;
	margin-right: 15px;
	border: 1px solid #dddddd;
}

p.Proxy-Snippet-Image-Paragraph
{
	text-align: center;
	margin: 0;
}

img.Proxy-Snippet-Image
{
	max-width: 100%;
	max-height: 100%;
	min-width: 330px;
	min-height: 220px;
	border: 1px solid #dddddd;
}

#search-results
{
	padding-top: 0px;
}

/* TABLES - Standardized table cell margins to ensure consistent spacing regardless of whether a <p> tag is present. */

td
{
	line-height: 1.4rem;
}

/* Default: apply bottom margin to all <p> in <td> */

td > p
{
	margin: 16px 0;
}

/* Remove top margin if <p> or <div> is the first child */

td > :first-child
{
	margin-top: 0;
}

/* Remove bottom margin if <p> or <div> is the last child */

td > :last-child
{
	margin-bottom: 0;
}

td > ol,
td > ul
{
	margin-top: 0;
	margin-bottom: 0;
}

/* First <li> in a UL/OL inside a table cell */

td ul li:first-child p,
td ol li:first-child p
{
	margin-top: 0;
}

/* Last <li> in a UL/OL inside a table cell */

td ul li:last-child p,
td ol li:last-child p
{
	margin-bottom: 0;
}

/* first and last <li> in a UL/OL nested in a UL/OL inside a table cell */

td ul ul li:first-child p,
td ul ol li:first-child p,
td ol ul li:first-child p,
td ol ol li:first-child p
{
	margin-top: 16px;
}

td ul ul li:last-child p,
td ul ol li:last-child p,
td ol ul li:last-child p,
td ol ol li:last-child p
{
	margin-bottom: 16px;
}

/* Reset list indentation inside table cells */

td ul,
td ol
{
	padding-left: 25px;
	/* or 0 if you want no indentation at all */
}

/* Allows for word breaks in tds that have strings with pipes (|) in them. This is a workaround for a Flare bug. */

table td
{
	word-break: break-word;
	overflow-wrap: anywhere;
}

caption
{
	text-align: left;
	padding-bottom: 5px;
	font-size: 1.1rem;
}

/* Renames headings for concept relationship links from default Concept Information to Related Concepts */

MadCap|relationshipsHeading.concept
{
	mc-label: 'Related Concepts';
}

/* Added spacing above the border to make it equal to spacing below the border, also reduced relationship link spacing */

div.MCRelationshipsProxy_0
{
	margin-top: 32px;
	padding-top: 16px;
}

.conceptItem_concept_0
{
	margin: 8px 0;
}

.taskItem_task_0
{
	margin: 8px 0;
}

.video
{
	display: block;
	width: 100%;
	max-width: 600px;
	height: auto;
}

/*This is a custom responsive layout row style (div class) in your stylesheet. To provide your own description for this style: (1) Open the stylesheet; (2) Find and select the div class with this name; and (3) In the Comment field, replace this text with your own. For more information on adding comments to styles, see the online Help.*/

div.Tiles-9-3
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

div.Tiles-9-3::before
{
	content: ' ';
	display: table;
}

div.Tiles-9-3::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.Tiles-9-3 > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.Tiles-9-3 > div:nth-child(1)
{
	width: 75%;
	margin-left: 0%;
}

div.Tiles-9-3 > div:nth-child(2)
{
	width: 25%;
	margin-left: 0%;
}

div.Tiles-8-4	/*This is a custom responsive layout row style (div class) in your stylesheet. To provide your own description for this style: (1) Open the stylesheet; (2) Find and select the div class with this name; and (3) In the Comment field, replace this text with your own. For more information on adding comments to styles, see the online Help.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

div.Tiles-8-4::before
{
	content: ' ';
	display: table;
}

div.Tiles-8-4::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.Tiles-8-4 > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.Tiles-8-4 > div:nth-child(1)
{
	width: 66.66667%;
	margin-left: 0%;
}

div.Tiles-8-4 > div:nth-child(2)
{
	width: 33.33333%;
	margin-left: 0%;
}

/* "What's New" text and box styling */

div.Whats-New-Menu-Box
{
	box-shadow: 1px 1px 4px #cccccc;
	margin-right: 32px;
	margin-top: 20px;
}

.Whats-New
{
	margin: 0;
	font-size: 1.25rem;
	font-weight: bold;
	padding: 15px 0 0 20px;
}

/* =========================
   Feedback survey container
   ========================= */

#feedback-survey
{
	margin: 48px 32px 0;
	padding: 16px 20px;
	background-color: #f9fafb;
	border-left: 4px solid #d0d7de;
	border-radius: 6px;
	font-family: inherit;
}

/* =========================
   Question + thumbs
   ========================= */

.feedback-question
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 18px;
	font-size: 1rem;
	margin-bottom: 8px;
}

/* Yes / No buttons */

.feedback-question i
{
	font-style: normal;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 6px;
	border: 1px solid #ccc;
	background-color: #fff;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	user-select: none;
	white-space: nowrap;
	/* keep button contents intact */
}

/* Thumbs icons */

.feedback-yes::before
{
	content: "👍";
	font-size: 1.1em;
}

.feedback-no::before
{
	content: "👎";
	font-size: 1.1em;
}

/* Hover states */

.feedback-yes:hover
{
	background-color: #e8f5e9;
	border-color: #66bb6a;
}

.feedback-no:hover
{
	background-color: #fdecea;
	border-color: #ef5350;
}

/* =========================
   Follow-up sections
   ========================= */

.feedback-reason
{
	margin-top: 12px;
}

/* Headings */

.feedback-reason h2
{
	margin: 0 0 6px;
	font-size: 1.25rem;
}

.feedback-reason h4
{
	margin-top: 16px;
	font-size: 1rem;
}

/* =========================
   Checkbox options
   ========================= */

.feedback-option
{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 8px 0;
}

/* Custom checkbox base */

.feedback-option input[type="checkbox"]
{
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border: 2px solid #999;
	border-radius: 3px;
	background-color: #fff;
	cursor: pointer;
	position: relative;
	margin-top: 2px;
}

/* Checked state: black box */

.feedback-option input[type="checkbox"]:checked
{
	background-color: #1a1a1a;
	border-color: #1a1a1a;
}

/* Checkmark */

.feedback-option input[type="checkbox"]:checked::after
{
	content: "";
	position: absolute;
	top: 2px;
	left: 5px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Make label feel interactive */

.feedback-option label
{
	cursor: pointer;
}

/* Optional emphasis when selected */

.feedback-option input[type="checkbox"]:checked + label
{
	font-weight: 500;
}

/* =========================
   Thank-you panels
   ========================= */

.feedback-reason.no-thanks,
.feedback-reason.yes-thanks
{
	border-radius: 8px;
	margin-top: 16px;
}

/* =========================
   Email link
   ========================= */

#feedbackEmailLink
{
	color: #1c5a97;
	text-decoration: none;
	font-weight: 600;
}

#feedbackEmailLink:hover
{
	text-decoration: underline;
}

/* ===============================
   feedback-option and textarea
   =============================== */

/* Replace the flex layout with a 2-column grid */

.feedback-option
{
	display: grid;
	grid-template-columns: 16px 1fr;
	/* checkbox + label */
	column-gap: 8px;
	row-gap: 6px;
	align-items: start;
	margin: 8px 0;
}

/* checkbox */

.feedback-option input[type="checkbox"]
{
	grid-column: 1;
	grid-row: 1;
}

/* label */

.feedback-option label
{
	grid-column: 2;
	grid-row: 1;
}

/* textarea: always on its own row, full width, flush left */

.feedback-option textarea.feedback-details
{
	grid-column: 1 / -1;
	/* span both columns */
	grid-row: 2;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	/* prevents odd default margins */
}

/* =========================
   YouTube proxy embed styling
   ========================= */

.yt-proxy-wrap
{
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	/* 16:9 */
	overflow: hidden;
}

.yt-proxy-wrap iframe
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media only screen and (max-width: 1279px)
{
	#feedback-survey
	{
		margin: 36px 24px 0;
	}

	.off-canvas-wrapper-inner .outer-row
	{
		padding: 0;
	}

	#mc-main-content
	{
		margin: 0 24px;
	}

	.topic-top
	{
		margin: 0 24px;
		padding-bottom: 12px;
		padding-top: 12px;
	}

	.topic-top > div:nth-child(1)
	{
		width: 66.66%;
	}

	.topic-top > div:nth-child(2)
	{
		width: 33.33%;
	}

	div.Tiles-9-3 > div:nth-child(1)
	{
		width: 66.66667%;
		margin-left: 0%;
	}

	div.Tiles-9-3 > div:nth-child(2)
	{
		width: 33.33333%;
		margin-left: 0%;
	}

	div.Whats-New-Menu-Box
	{
		margin-right: 24px;
	}

	div.Tiles-8-4 > div:nth-child(1)
	{
		width: 66.66667%;
		margin-left: 0%;
	}

	div.Tiles-8-4 > div:nth-child(2)
	{
		width: 33.33333%;
		margin-left: 0%;
	}
}

@media only screen and (max-width: 767px)
{
	#feedback-survey
	{
		margin: 24px 16px 0;
	}

	#mc-main-content
	{
		margin: 0 16px;
	}

	.topic-top
	{
		display: block;
		text-align: left;
		margin: 0 16px;
	}

	.topic-top > div:nth-child(1),
	.topic-top > div:nth-child(2)
	{
		width: 100%;
		float: none;
		margin-left: 0%;
	}

	.topic-top > div:nth-child(2)
	{
		display: none;
	}

	div.Tiles-9-3 > div:nth-child(1)
	{
		width: 100%;
		margin-left: 0%;
	}

	div.Tiles-9-3 > div:nth-child(2)
	{
		display: none;
	}

	div.Tiles-8-4 > div:nth-child(1)
	{
		width: 100%;
		margin-left: 0%;
	}

	div.Tiles-8-4 > div:nth-child(2)
	{
		width: 100%;
		margin-left: 0%;
	}

	div.Whats-New-Menu-Box
	{
		display: none;
	}
}

/* =========================
   Mobile fix: force Yes/No to stay together (no wrapping between them)
   NOTE: This re-adds the question text via ::before because the original
   text node can't be targeted reliably in CSS.
   ========================= */

@media (max-width: 480px)
{
	#feedback-survey .feedback-question
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
		row-gap: 10px;
		column-gap: 12px;
		margin-bottom: 8px;
		/* Hide original inline question text node (we re-add it below) */
		font-size: 0;
	}

	#feedback-survey .feedback-question::before
	{
		content: "Did you find this helpful?";
		grid-column: 1 / -1;
		font-size: 1rem;
		color: #555;
	}

	#feedback-survey .feedback-question i
	{
		width: 100%;
		justify-content: center;
		font-size: 1rem;
		/* restore after font-size:0 above */
	}

	#feedback-survey .feedback-yes
	{
		grid-column: 1;
	}

	#feedback-survey .feedback-no
	{
		grid-column: 2;
	}
}