/*<meta conditions="Default.trmb-only" />*/

@import url('help.css');

@import url('trmb-brand.css');

@import url('zz_text.css');

@import url('fonts-languages.css');

@import url('custom.css');

@import url('responsive.css');

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

/* ============= Image & Icon layout styles=============Laura add_Updated by Tej Includes updates to fix Graphic class images */
/* Target paragraph icons and list icons */

img.Softkey,
li > img
{
	height: 1.7em !important;
	width: auto !important;
	vertical-align: -20% !important;
	display: inline-block !important;
	margin: 0 4px !important;
}

/* Target table icons with specific alignment and spacing */

td img.icon
{
	height: 1.7em !important;
	width: auto !important;
	vertical-align: middle !important;
	display: inline-block !important;
	margin: 0 6px !important;
}

/* Note: img.graphic is intentionally excluded so it remains full-size */
/* Styling for large illustrations and diagrams Tej add */

img.graphic
{
	max-width: 100% !important;
	height: auto !important;
	display: block !important;
	margin: 1em auto !important;
	/* Adds space above/below and centers it */
}

/* ============= App download layout styles=============Laura add */
/* The Grey Box Container */

.assistant-app-box
{
	height: auto !important;
	/* Overrides any fixed height */
	background-color: var(--Grey1);
	/* Light grey background */
	/*border-radius: 15px;       /* Rounded corners */
	padding: 25px;
	text-align: center;
	/* Centers text and inline elements */
	margin: 20px auto;
	font-family: sans-serif;
}

/* Ensure the main image doesn't overflow */

.assistant-main-img
{
	max-width: 100%;
	height: auto;
	margin-bottom: 20px;
	border-radius: 14px;
}

/* Flexbox to put Play Store and App Store next to each other */

.store-buttons
{
	display: flex;
	justify-content: center;
	gap: 25px;
	/* Space between the two buttons */
	margin-bottom: 20px;
	margin-top: 20px;
}

.store-buttons img
{
	width: 100%;
	max-width: 270px;
	height: auto;
}

/* This ensures the QR code scales based on the screen width */

.qr-container
{
	display: block;
	margin: 20px auto;
	width: 50%;
	/* Default width for desktop */
	max-width: 300px;
	/* Prevents it from getting too huge on ultra-wide monitors */
	min-width: 150px;
	/* Keeps it scan-able on very small phones */
}

/* Targets the MadCap generated QR image specifically */

.qr-container img,
.qr-container > *
{
	width: 100% !important;
	height: auto !important;
}

@media only screen and (max-width: 600px)
{
	.qr-container
	{
		width: 70%;
		/* Makes it even larger on mobile devices */
	}
}

/* ============= Image layout styles overlay copy from Default =============Laura add */

.image-overlay
{
	position: relative;
}

.image-overlay img
{
	display: block;
}

/* ====== This part is for the icon adjustment that is overlayed =====Laura add */

.image-overlay .left-corner
{
	position: absolute;
	bottom: -0.40em;
	left: 0.65em;
}

.image-overlay .right-corner
{
	position: absolute;
	bottom: 5px;
	left: 16px;
	width: 10px !important;
}

/* New div Card adjustment for Portal home =====Laura add */
/* Container for the cards */

.resourcescard
{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	align-items: stretch;
	/* Makes all cards the same height */
	margin-bottom: 24px;
}

/* Individual Card Styling */

.resourcescard > div
{
	flex: 1 1 220px;
	max-width: 350px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	border: 1px solid #0071bc;
	/* Matches border */
	border-radius: 4px;
	background-color: #ffffff;
	min-height: 200px;
	/* Adjust based on your preference */
}

/* Header inside the card */

.resourcescard h3.home
{
	margin-top: 0;
	margin-bottom: 15px;
	min-height: 3em;
	/* Reserves space for 2 lines of text */
	display: flex;
	align-items: center;
	text-align: center;
}

/* ADDED: Acts as a spring to push the button perfectly to the bottom */

.resourcescard > div p:last-child
{
	margin-top: auto;
	margin-bottom: 0;
	text-align: center;
	width: 100%;
}

/* Consolidated "Open Help" Buttons ======Tej add */

.resourcescard a
{
	display: inline-block !important;
	background-color: #005f9e !important;
	color: #ffffff !important;
	padding: 10px 24px !important;
	/* Uses your preferred wider button padding */
	font-size: 14px !important;
	border-radius: 4px !important;
	text-decoration: none !important;
	font-weight: bold !important;
	text-align: center;
	margin-top: 10px !important;
}

.resourcescard a:hover
{
	background-color: #004675 !important;
	color: #ffffff !important;
	text-decoration: none !important;
}

/* New image class for centered icons in cards =====Laura add */

img.CardIconHome
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 98px;
	/* Adjust size as needed */
	height: auto;
	padding-top: 5px;
	padding-bottom: 5px;
}

/* ============= Callout Number Styles ============= */
/* Formats numbers as white text inside a solid black circle for documentation tables */

.CalloutNum
{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: #000000;
	color: #ffffff;
	border-radius: 50%;
	width: 18px;
	/* Adjust based on your base font size */
	height: 18px;
	font-size: 12px;
	font-weight: bold;
	font-family: 'Open Sans', sans-serif;
	line-height: 1;
}

/* ============= Overrides needed to get specific styles to appear correctly ============= */

body
{
	background: #ffffff;
}

MadCap|xref,
MadCap|xref.Section,
MadCap|xref:hover,
MadCap|xref.Section:hover
{
	text-decoration: none;
	mc-format: '{paratext}';
}

div.top-bar
{
	background-color: var(--topbar);
	height: 48px;
	margin-top: 0px;
	margin-bottom: 24px;
	padding-top: 4px;
	padding-bottom: 4px;
	width: 100%;
	z-index: 100;
	position: fixed;
	left: 0px;
	top: 50px;
}

div.top-bar-text
{
	max-width: 88vw;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4px;
	v-align: middle;
}

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

/* ============= Footer layout ============= */

.height-container
{
	position: initial;
}

/* Force the footer to break out of constrained parent wrappers safely */

div.footer,
div.footer2
{
	position: relative !important;
	z-index: 9999 !important;
	pointer-events: auto !important;
	/* Full-Width Breakout without horizontal scrollbars */
	width: auto !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
	padding-left: calc(50vw - 50%) !important;
	padding-right: calc(50vw - 50%) !important;
	/* Centers the interior layout contents cleanly */
	display: flex !important;
	justify-content: center !important;
	box-sizing: border-box !important;
}

/* ============= Smaller screen sizes ================== */

@media only screen and (max-width: 1279px)
{
	div.top-bar-text
	{
		max-width: 98vw;
		margin-left: auto;
		margin-right: auto;
		v-align: middle;
	}

	div.top-bar
	{
		z-index: 100;
		position: absolute;
		left: 0;
		top: 48px;
	}
}

@media only screen and (max-width: 767px)
{
	div.top-bar
	{
		z-index: 100;
		position: absolute;
		left: 0;
		top: 48px;
		height: 84px;
		padding-top: 0px;
		padding-bottom: 4px;
	}

	div.top-bar-text
	{
		max-width: 98vw;
	}

	div.top-bar-text > div:nth-child(1)
	{
		width: 100%;
		text-align: center;
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 0;
		padding-bottom: 0;
	}

	div.top-bar-text > div:nth-child(2)
	{
		width: 100%;
		text-align: center;
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 0;
		padding-bottom: 0;
	}

	p.top-bar
	{
		margin-bottom: 0;
		padding-bottom: 0;
	}

	/* Targets the 'What's new' image on small screens ====Tej add*/

	img.HeroLeft
	{
		width: 100% !important;
		/* Allows the image to fill the screen width */
		max-width: 350px !important;
		/* Prevents it from getting absurdly large */
		float: none !important;
		/* Stops the text from wrapping around it */
		display: block !important;
		margin: 0 auto 16px auto !important;
		/* Centers the image and adds space below */
	}
}

/* ============= Styles to improve display when printed ============= */

@media print
{
	html,
	body,
	div.sideContent,
	div.clearfix,
	div.top-bar,
	topic-content,
	bodyProxy,
	breadcrumbsProxy,
	div.ContentRow
	{
		margin-top: 0pt;
		margin-bottom: 0pt;
		padding-top: 0pt;
		padding-bottom: 0pt;
	}

	div.content,
	div.contentBody
	{
		margin-bottom: 60pt;
		padding-bottom: 60pt;
	}

	div.top-bar	/*Contains the product name*/
	{
		display: none;
	}

	div.ContentRow > div:nth-child(1)
	{
		display: none;
	}

	div.ContentRow > div:nth-child(2)
	{
		width: 100%;
		margin-top: 0pt;
		padding-top: 0pt;
	}

	div.ContentRow > div:nth-child(3)
	{
		display: none;
	}

	div.footer,
	div.footer2
	{
		background-color: var(--Footer);
	}

	h1
	{
		margin-top: 0;
		padding-top: 0;
	}

	MadCap|dropDown
	{
		mc-image-spacing: 0px;
	}

	p.footer
	{
		color: #000000;
		margin-top: 60pt;
		padding-top: 60pt;
	}

	MadCap|xref.footer
	{
		color: var(--Link);
	}
}

/* Styling specifically for landscape video cards to add spacing ====Tej add */

.FeatureCards.landscape-vids
{
	display: flex;
	flex-wrap: wrap;
	gap: 5px 30px;
	/* 5px vertical gap fixes the heading, 30px horizontal gap separates videos */
}

/* Keeps the heading and paragraph full width so they stay on top ====Tej add */

.FeatureCards.landscape-vids > h2,
.FeatureCards.landscape-vids > p
{
	flex: 1 1 100%;
	margin: 0;
	/* Ensures default margins don't add unwanted extra space */
}

/* Gives the video columns a safe minimum width ====Tej add */

.FeatureCards.landscape-vids > div
{
	flex: 1 1 300px;
	/* Adjust this width based on your thumbnail size */
	margin-top: 25px;
	/* Manually adds the space back above the video cards */
	margin-bottom: 20px;
}

/* ============= Whole-Card Link Overlay & Hover Framework ============= *add Tej/

/* Preps the structural card container to host absolute overlays and handles movement transitions cleanly */

.resourcescard > div.HoverMachineCard
{
	position: relative;
	/* Contextual boundary required for stretching absolute anchors */
	transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border-color 0.25s ease-in-out;
}

/* Controls visual movement, modern drop shadow depth, and border tint when hovering anywhere inside the card element */

.resourcescard > div.HoverMachineCard:hover
{
	transform: translateY(-4px);
	border-color: #005f9e !important;
	box-shadow: 0 6px 16px rgba(0, 113, 188, 0.15);
	cursor: pointer;
}

/* Forces the accessibility anchor layout to blanket 100% of the host box space while zeroing out baseline global blue button aesthetics */

.resourcescard a.WholeCardLink
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	text-indent: -9999px;
	/* Seamlessly flushes the text anchor strings away from sight, preserving layout aesthetics */
	z-index: 2;
	/* Sits completely forward over text headers and images to guarantee immediate click response */
}

/* Guarantees anchor backgrounds maintain full transparency under persistent hover execution states */

.resourcescard a.WholeCardLink:hover
{
	background: none !important;
	background-color: transparent !important;
}