.acgAlertModal
{
	background-color:rgba(255,255,255,1);
	color:rgb(0,0,0);
	padding:0;
	border-radius:0;
	box-shadow:0px 0px 4px 1px rgba(0,0,0,0.3);
	margin-bottom:20px;
}
.acgAlertModal.acgAlertInfoPopup
{
	border-top:0px;
}

.acgAlertContent
{
	background-color:initial;
	/* Do we need this? Causing the "not implemented" popup to look weird */
	jpadding:0 !important;
}

.acgAlertButton
{
	min-width:100px;
	padding:0.5em 2em;
	jfont-size:1.1em;
	
	cursor:hand;
	cursor:pointer;
	
	text-decoration:none;
	background-color:var(--main-color);
	color:white;
	border-radius:8px;
}

.acgAlertHeader
{
	display:table;
	jwidth:calc(100% + 1px);	/* There is a bug in some browsers where the width of *table* elements aren't rounded properly and this seems to fix it */
	width:100%;
	background-color:var(--main-color);
	color:rgb(255,255,255);
	padding:1em;
}

.acgAlertInfoPopup .acgAlertHeader
{
	display:flex;
	padding:0;
}

.acgAlertFeaturePopup .acgAlertHeader, .acgAlertImageGalleryPopup .acgAlertHeader, .acgAlertSpinnerPopup .acgAlertHeader, .acgAlertInstallationPopup .acgAlertHeader
{
	display:flex;
	padding:0;
	background-color:rgb(127,127,127);
}

.acgAlertInfoPopup .acgAlertContent
{
	padding:0.5em 0;
}

.acgAlertInfoPopup, .acgAlertFeaturePopup, .acgAlertImageGalleryPopup, .acgAlertSpinnerPopup, .acgAlertInstallationPopup
{
	jmax-width:480px;
	max-width:440px;
	width:calc(50% - 60px) !important;
	jleft:20px;
	margin-top:38px;
	position:absolute !important;
}

.acgRwdNarrow .acgAlertInfoPopup, .acgRwdNarrow .acgAlertFeaturePopup, .acgRwdNarrow .acgAlertImageGalleryPopup, .acgRwdNarrow .acgAlertSpinnerPopup, .acgRwdNarrow .acgAlertInstallationPopup
{
	jmax-width:340px;
	width:calc(100% - 40px) !important;
	max-width:none;
}

.acgAlertFeaturePopup, .acgAlertImageGalleryPopup, .acgAlertSpinnerPopup, .acgAlertInstallationPopup
{
	jleft:440px;
}

.acgRwdNarrow .acgAlertFeaturePopup, .acgRwdNarrow .acgAlertImageGalleryPopup, .acgRwdNarrow .acgAlertSpinnerPopup, .acgRwdNarrow .acgAlertInstallationPopup
{
	jleft:20px;
}

.imageGalleryImage
{
	max-height:300px;
	max-width:calc(400px - 2.8em);
}

/*
.acgAlertDefaultPreTransition
{
	opacity:0;
	transform:scale(1) translate(400px, 0px);
	
	transition: opacity .4s cubic-bezier(.25,.8,.25,1), transform .4s cubic-bezier(.25,.8,.25,1);
}

.acgAlertDefaultPostTransition
{
	opacity:1 !important;
	transform:translate(0,0) scale(1) !important;
	
	transition: opacity .4s cubic-bezier(.25,.8,.25,1), transform .4s cubic-bezier(.25,.8,.25,1);
}
*/


.closePopup
{
	cursor:hand;
	cursor:pointer;
	color:rgb(255,255,255);
}

.acgAlertTitle
{
	font-size:1.3rem;
	jfont-weight:bold;
	font-family:'LG Smart Bold';
	color:rgb(255,255,255);
}

.acgAlertDescription
{
	font-size:1.1rem;
}

.acgInfoPopupOverview
{
	jpadding:0.5em 1em;
}

.acgAlertImageGalleryPopup .swiper-slide
{
	text-align:center;
}

.acgAlertNotImplemented .acgAlertContent
{
	padding:1em;
}

.acgAlertFeaturePopup .acgCssButton
{
	background-color:initial;
}

.acgAlertHeaderTitleArea
{
	display:table-cell;
	padding:1em;
	text-align:left;
	width:100%;
	jfont-size:1.2em;
}

.acgAlertHeaderCloseArea
{
	display:table-cell;
	vertical-align:top;
	padding:1em;
}

.acgClose
{
	padding-right:0;
	padding-top:0;
	text-align:right;
}

.acgAlertInfoPopup ul
{
	list-style-type:disc;
	list-style-position:inside;
	margin-top:0;
	margin-bottom:3px;
	padding-left:0;
}
.acgAlertInfoPopup ul.acgFeatures
{
	list-style-type:none;	
}
.acgAlertInfoPopup ul a
{
	text-decoration:none;
}

.acgAlertInfoPopup li:not(:last-child)
{
	margin-bottom:1px;
}

.acgAlertSlot1
{
	left:20px;
}

.acgAlertSlot2
{
	left:min(480px, 50% - 20px);
}
.acgRwdNarrow .acgAlertSlot2
{
	left:20px;
}

.acgAccordianContent li
{
	background-color:rgb(217,217,217);
	jpadding:5px 0 4px 25px;
	text-align:left;
	padding:3px 0px 5px 25px;
	jfont-size:0.8rem;
}

.acgAccordianContent ul.acgFeatures li
{
	padding:0;
}

.acgFeatureDescriptionContent ul, .acgMediaPlayerHotspotDetails ul, .acgInstallationPopupContent ul
{
	jmargin:1em 0 1em 1em;
	list-style:outside;
	padding-left:1.3rem;
}