/*
// ------------------------------------
// App-specific settings
// ------------------------------------
*/
:root
{
	j--main-color:rgb(165,0,52);
	--main-color:rgb(253,43,44);
	--off-white-color:rgb(240,236,228);
}

/* This style is used by the AcgApp.isEnanced() method to determine if we are using the enhanced stylesheet */
body:after
{
	content:'default';
	display:none;
}

body
{
    max-width: 100%;
    overflow-x: hidden;	/* Causes Chrome to add a vertical scrollbar */
}

#cssCheck
{
	font-weight:800;
}

.outerArea
{
	jbackground-color:rgb(242,242,242);
	padding:0em 0;
	width:100%;
	/* Had to remove overflow-x because it prevents "sticky" position from working */
	joverflow-x:hidden;	/* This is required to fix "position:fixed" issues on iOS */
	joverflow:hidden;

	/* height:100%; */
	jmin-height:100%;	/* Moved to .acg class in global. We want to ensure an app covers browser height, but not necessarily an individual "outerArea" */
	jtext-align:center;
	jcolor:#374850;
	jz-index:1;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}

.innerArea
{
	jbackground-color:rgb(255,255,255);

	jdisplay:inline-block;	/* caused a scrollbar to appear even though content fit */
	position:relative;
	max-width:1600px;
	width:100%;
	jmin-height:100%;	/* Moved to .acg class in global. We want to ensure an app covers browser height, but not necessarily an individual "innerArea" */
	
	margin:auto;
	jpadding:1em;
	joverflow:hidden;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}

.noScript
{
	padding-top:1em;
	width:960px;
	margin:auto;
	color:#000000;	
}

#preloadContent
{
	padding:2em;
	text-align:center;
}

#scriptContent
{
	background-color:#ffffff;
	color:#444444;
	position:relative;
	height:100vh;
}

.headerOuterArea
{
	position:fixed;
	top:0;
	z-index:999999;
}

.acgHeader
{
	jwidth:100%;
	background-color:var(--main-color);
	background-image:url(../images/HeaderBackground2.jpg);
	background-repeat:no-repeat;
	jdisplay:flex;
	jflex-wrap:wrap;
	jalign-items:center;
	jjustify-content:space-evenly;
	color:rgb(255,255,255);
	jgap:16px;
	padding:0.5em 0.5em;
	box-sizing:border-box;
	jheight:70px;
}
.acgMainMenuItem
{
	display:inline-block;
}
.acgSearchContainer
{
	display:inline-block;
}
.acgSearchComponent
{
	background-color:rgb(255,255,255);
}

.acgFooterArea
{
	position:absolute;
	bottom:0;
}
.acgFooter
{
	background-color:rgb(36,31,33);
	color:rgb(255,255,255);
	padding:1px;	/* If you we don't include this, the text in the footer goes 1px outside and causes the browser scrollbar to appear */
}
.acgFooterMenu
{
	position:absolute;
	top:-30px;
	color:black;
	font-size:1.5em;
}

.acgUseCaseNavContainer
{
	background-color:rgb(0,74,134);
	color:rgb(255,255,255);
	padding:10px;
	display:table;
	width:100%;
	box-sizing:border-box;
}
.acgUseCaseNavItem
{
	display:table-cell;
	vertical-align:middle;
}
.acgUseCaseNavText
{
	padding:0 1em;
	font-size:1.1em;
	jmax-height:60px;
	min-height:64px;
}
.acgUseCaseSwiperContainer
{
	border:2px solid rgb(0,74,134);
}
.acgUseCaseImage
{
	width:100%;
	jmax-width:416px;
}
.acgUseCaseData
{
	display:none;
}
.xofy
{
	font-weight:normal;
	font-size:0.8em;
}
.acgPopupSectionTitle
{
	margin-top:1em;
	jfont-weight:500;
	color:rgb(0,199,253);
	font-size:1.2em;
}

.acgResourcesTab .acgPopupSectionTitle, .acgSolutionsTab .acgPopupSectionTitle
{
	jtext-transform:uppercase;
	margin-bottom:0.7em;
}
.acgProductPopupOverviewImage
{
	text-align:center;
	padding:0 50px;
}
.acgProductPopupOverviewImage img
{
	jwidth:100%;
	max-width:100%;
	max-height:200px;
}
.acgProductPopupOverviewText
{
	margin-bottom:0.5em;
}
.acgFeatureDescriptionTitle, .acgFeatureBenefitsTitle
{
	jfont-weight:bold;
	font-family:'LG Smart Bold';
	font-size:1.1rem;
}
.acgFeatureBenefitsTitle
{
	margin-top:1em;
}
.acgFeatureDescriptionContent, .acgFeatureBenefitsContent
{
	font-size:1.1rem;
}
.acgFeaturePopupOverviewImage, .acgInstallationPopupOverviewImage
{
	text-align:center;
	font-size:4em;		/* This forces the FontAwesome text to be appropriately sized. Does it cause other issues? */
	line-height:0;
}
.acgFeaturePopupOverviewImage img, .acgInstallationPopupOverviewImage img
{
	jwidth:100%;
	max-width:100%;
	max-height:275px;
	margin-bottom:1rem;
}

.acgMediaPlayerHotspotDetailsFeatureTitle
{
	jfont-weight:bold;
	font-family:'LG Smart Bold';
	margin-top:1em;
}

.acgMediaPlayerHotspotDetailsFeatureDescription
{
	margin-top:0.5em;
}
.acgLgLogo
{
	width:100%;
	max-width:100px;
	min-width:60px;
}
.acgHeaderMenuArea
{
	display:table-cell;
	vertical-align:middle;
	font-size:1.1rem;
}
.acgRwdNarrow .acgHeaderMenuArea
{
	width:100%;
}

.acgScrollMenu.ui-menu
{
	max-height:360px;
	overflow-y:auto;
	overflow-x:hidden;
}

.acgAccordianItemWrapper
{
	display:flex;
	justify-content:space-between;
}

.acgAccordianItemLabel
{
	font-size:1.1rem;
	display:inline-block;
	padding:5px 0 3px 25px;
}
.acgAccordianItemIcon
{
	display:flex;
	align-items:center;
	width:30px;
	min-width:30px;
	box-sizing:border-box;
	padding:5px 5px;
	text-align:center;
	background-color:rgb(242,242,242);
	font-size:1.3rem;
}
.availableColorsWrapper
{
	display:flex;
	justify-content:space-evenly;
	padding:15px;
}
.availableColorsSwatch
{
	text-align:center;
}
.availableColorsLabel
{
	text-align:center;
	font-style:italic;
}
.availableColorsSwatch img
{
	width:26px;
	height:26px;
}

/* Ken Burns effect */
.swiper-slide-active img
{
  jwidth: 100%;
  animation: move 10s ease;
  /* Add infinite to loop. */
  
  -ms-animation: move 10s ease;
  -webkit-animation: move 10s ease;
  -0-animation: move 10s ease;
  -moz-animation: move 10s ease;
  jposition: absolute;
  transform-origin:20% 20%;
  
  animation-fill-mode: forwards;
}

@-webkit-keyframes move {
  animation-fill-mode: forwards;
  0% {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
    transform: scale(1.0);
    -ms-transform: scale(1.0);
    /* IE 9 */
    
    -webkit-transform: scale(1.0);
    /* Safari and Chrome */
    
    -o-transform: scale(1.0);
    /* Opera */
    
    -moz-transform: scale(1.0);
    /* Firefox */
  }
  100% {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    /* IE 9 */
    
    -webkit-transform: scale(1.2);
    /* Safari and Chrome */
    
    -o-transform: scale(1.2);
    /* Opera */
    
    -moz-transform: scale(1.2);
    /* Firefox */
  }
}

.acgSimilarModelsWrapper
{
	padding:15px;
}

#welcomeScreen
{
	position:absolute;
	display:table;
	width:100vw;
	height:100vh;
	z-index:9999999;
	background-color:var(--off-white-color);
}

.acgWelcomeTitle
{
	font-size:2.5rem;
	color:rgb(107,105,107);
	padding-bottom:10px;
	padding-top:50px;
	text-align:center;
}
.acgWelcomeSubtitle
{
	border-top:1px solid rgb(107,105,107);
	font-size:1.5rem;
	color:rgb(107,105,107);
	padding-top:10px;
	text-align:center;
}
.acgWelcomeButtonArea
{
	padding-top:80px;
	display:flex;
	flex-direction:row;
	gap:40px;
	justify-content:center;
	padding-bottom:50px;
	flex-wrap:wrap;
}
.acgImageGalleryNavigationArea
{
	font-size:2rem;
	display:flex;
	gap:40px;
	justify-content:space-around;
	padding-top:20px;
}
.acgWelcomeButton
{
	display:flex;
	flex-direction:column;
	align-items:center;
}
.acgWelcomeButtonImage
{
	width:200px;
	height:200px;
	border-radius:50% !important;
	border:2px solid var(--main-color) !important;
	background-size:cover;
}
.acgWelcomeButtonImage:hover
{
	filter:brightness(1.2);
}

.acg-swiper-button-next, .acg-swiper-button-prev
{
	cursor:hand;
	cursor:pointer;
}
.swiper-button-disabled
{
	color:gray !important;
	cursor:default;
}
#headerNavPanel
{
	padding:5px;
	jborder-bottom:1px solid rgb(0,0,0);
	jbox-shadow:0px 0px 10px rgb(128,128,128);
	display:inline-block;
	position:absolute;
	top:100%;
}
.disabledHeader
{
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	z-index:99;
	jbackground-color:rgba(0,0,0,0.5);
	backdrop-filter:blur(5px);
}