/*
// ------------------------------------
// App-specific settings
// ------------------------------------
*/

:root
{
	--acg-dark-purple:rgb(68,37,128);	/* #442580 */
	--acg-gradient-medium-purple:#874bff;
	--acg-gradient-light-purple:#c1a0ff;
	--acg-hilite-light-purple:rgb(237,228,255);
	--acg-button-border:rgb(135,75,255);
}

/* 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;
}

.acgPanel
{
	joverflow:hidden;
	position:relative !important;
}

/*
.acgPanelGradient0
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index: -1;
    background-image:linear-gradient(to right, #00ff00, #000000);
}
*/

.acgPanelGradient1
{
    position: absolute;
    left: -950px;
    top: -950px;
    width: 1903px;
    height: 1903px;
    z-index: -1;
    background-image: url(../images/glow.png);
    background-size: 1903px;
    background-repeat: no-repeat;	
}

.acgPanelGradient2
{
    position: absolute;
    left: calc(100% - 950px);
    bottom: -950px;
    width: 1903px;
    height: 1903px;
    z-index: -1;
    background-image: url(../images/glow.png);
    background-size: 1903px;
    background-repeat: no-repeat;	
	opacity:50%;
}

.acgPanelGradients
{
}

.acgPanelContent
{
	position:relative;
	max-width:1200px;
	margin:auto;
	padding:2rem 2rem;	
}

.acgRwdNarrow .acgPanelContent
{
	padding:1rem 1rem;	
}

.acgPanelTitle
{
	font-size:1.7rem;
	margin-bottom:1em;
}

.acgPanelSubtitle
{
	padding:10px 0px 5px 0px;
	font-size:1.5rem;
}

.acgDemoReelPanel
{
	background-color:black;
	height:300px;
}

.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;	/* Including overflow hidden will break the ability to use "sticky" content within */

	/* 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;
	
	j-webkit-box-sizing: border-box;
	j-moz-box-sizing: border-box; 
	jbox-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:1200px;
	jmax-width:960px;
	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:black;	
}

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

#scriptContent
{
	color:white;
	overflow:hidden;
	position:relative;
	min-height:100vh;
}

.acgHeaderBand
{
	width: 100%;
	z-index: 999999;
	display:flex;
	flex-direction:column;
	justify-content:center;
	jborder-bottom: 1px solid white;
	height:80px;
}

.acgHeaderBand.acgHomePage
{
	position:absolute;
	top: 0px;
	background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.acgHeaderContent
{
	z-index:100;
	padding:0 2rem;
}

.acgRwdNarrow .acgHeaderContent
{
	padding:0 1rem;
}


.acgHeaderMenu
{
	font-size:1.4rem;	
	text-decoration:none;
}

.acgMainMenu
{
	position:absolute;
	jtop:81px;
	top:80px;
	z-index:99;
	text-align:center;
	right:0px;
	z-index:99;
	jwidth:100%;
	jheight:100vh;
	text-align:right;
	jbackground-color:#d9abe9;
	jpadding-top:80px;
}

.acgFooterBand
{
	jposition:absolute;
	jbottom:0;
}

.acgFooter
{
	font-size:0.7em;
	padding:2rem 2rem;
}

.acgRwdNarrow .acgFooter
{
	padding:1rem 1rem;
}

.acgContactUsSection
{
  --border-width: 2px;
  --border-radius: 10px;
  --color-1: #864AFF;
  --color-2: #C4A6FF;

	jborder:1px solid rgb(196,166,255);
	position:relative;
	padding:1rem;
	
	background: linear-gradient(to right, var(--color-1), var(--color-2)), linear-gradient(to right, var(--color-1), var(--color-2));
	background-position: var(--border-radius) 0, var(--border-radius) 100%;
	background-repeat: no-repeat;
	background-size: calc(100% - var(--border-radius) - var(--border-radius)) var(--border-width);
	padding:19px;
	border-radius: var(--border-radius);
	border: none;
}
 
.acgContactUsSection:before,
.acgContactUsSection:after {
  content: "";
  display: block;
  position: absolute;
  width: var(--border-radius);
  top: 0;
  bottom: 0;
}

.acgContactUsSection:before {
  left: 0;
  border: var(--border-width) solid var(--color-1);
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
  border-right-color: transparent;
}

.acgContactUsSection:after {
  right: 0;
  border: var(--border-width) solid var(--color-2);
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  border-left-color: transparent;
}


.acgMainMenu input
{
	padding:0 10px;
	margin:8px 0;
}

.acgContactUsSection input[type=text], .acgContactUsSection textarea, .acgMainMenu input
{
	border:none;
	outline:none;
	background-color:transparent;
}

.acgContactUsSection input[type=text]:focus, .acgContactUsSection textarea
{
	border:3px solid rgb(255,0,0);
	border:0;
}

.acgContactUsSection input, .acgContactUsSection textarea, .acgMainMenu input
{
	jbackground-color:transparent;
	jborder:1px solid transparent;
	jpadding:0 10px;
	jmargin:8px 0;
	jbox-sizing:border-box;
	joutline:none;
	width:100%;
	jborder-radius:10px;
	color:inherit;
	font-family:robotoregular;
	font-size:1.2rem;
	border:none;
}

/*
.acgContactUsSection input:focus, 
{
	outline: none;
}
*/

.acgContactUsSection #submit
{
	font-size:1.2rem;
	cursor:hand;
	cursor:pointer;
}

.acgGradientBorder
{
	--border-width: 2px;
	--border-radius: 10px;
	--color-1:#864AFF;
	--color-2:#C4A6FF;
	--color-3:rgb(0,0,0);

	jborder:1px solid rgb(196,166,255);
	position:relative;
	padding:2px;
	jpadding:0.5rem;
	
	background:linear-gradient(to right, var(--color-1), var(--color-2)), linear-gradient(to right, var(--color-1), var(--color-2));
	background-color:var(--color-3);
	background-position: var(--border-radius) 0, var(--border-radius) 100%;
	background-repeat: no-repeat;
	background-size: calc(100% - var(--border-radius) - var(--border-radius)) var(--border-width);
	jpadding:19px;
	border-radius: var(--border-radius);
	border: none;
}

.acgGradientBorder:before,
.acgGradientBorder:after {
  content: "";
  display: block;
  position: absolute;
  width: var(--border-radius);
  top: 0;
  bottom: 0;
}

.acgGradientBorder:before {
  left: 0;
  border: var(--border-width) solid var(--color-1);
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
  border-right-color: transparent;
}

.acgGradientBorder:after {
  right: 0;
  border: var(--border-width) solid var(--color-2);
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  border-left-color: transparent;
}

.menuPanel.acgGradientBorder:after
{
  border-right:0;
  border-top-right-radius:0;
  border-bottom-right-radius:0;	
}

.acgGradientBorderBackground
{
	background-image:linear-gradient(to right, #221340, #000000 );
	border-radius:8px;
}

#scriptContent:before
{
	content: "";
	display:block;
	jposition:fixed;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	jbackground-color:green;
	background-image:linear-gradient(to right, #221340, #000000 );
	z-index:-2;
}
.acgVideoWrapper
{
	line-height:0;
}

#signInLink
{
	jfont-size:1.4rem;
	white-space:nowrap;
	jpadding-left:0.6em;
	jmargin-left:0.6rem;
	jposition:relative;
	jtop:0.1em;
}

/*
#signInMenu
{
	position:absolute;
	top:81px;
	z-index:99;
	text-align:center;
	right:0px;
}
*/

.menuPanel
{
	display:inline-block;
	jwidth:50%;
	right:0;
	jbackground-color:#d9abe9;
	padding:0 25px;
	jmargin-right:-1em;
	line-height:1.4;
	width:100%;
	jpadding-top:90px !important;
	border-bottom-right-radius:0;
	padding-bottom:10px;
	
	jborder-top-width:0 !important;
	jborder-top-left-radius:0 !important;
	border-right-width:0 !important;
	border-top-right-radius:0 !important;
	border-bottom-right-radius:0 !important;
}

.menuPanel a, .acgHeaderMenu a
{
	text-decoration:none;
}

.cursorHand
{
	cursor:hand;
	cursor:pointer;
}
.cursorDefault
{
	cursor:default;
}

.linkButton
{
	cursor:hand;
	cursor:pointer;
	margin:0 16px;
}
.linkButton:hover
{
	jcolor:#cc0000;
	jcolor:#cb2026;
}
.imageButton
{
	cursor:hand;
	cursor:pointer;
}

.acgWhitePanel
{
	background-color:white;
	color:rgb(144,144,144);
}

.acgPurple
{
	color:var(--acg-dark-purple); /* rgb(68,43,133); */
}

.acgRwdWide .acgContactUsFormFieldArea
{
	width:66%;
}

/*
input[type="text"],
input[type="password"] {
  font-family: Arial, sans-serif;
  jfont-size: 8px;
  line-height: 1.2;
  padding: 4px 8px;
  border: 1px solid #ccc;
  box-sizing: border-box; // ensures padding doesn't change overall width/height
  vertical-align: middle; // keeps them aligned
  background-color:green;
}
*/

/*
input {
  j-webkit-appearance: none !important; // remove Chrome’s default styling
  j-webkit-text-fill-color: #000;
  background-color: green; // your desired color
  color: #000;
  border: 1px solid #ccc;
  padding: 4px 8px;
  box-sizing: border-box;
  position: relative; // or absolute
  jz-index: 0; 
  jtransform: translateZ(0); // forces a new compositing layer
  jwill-change: background-color;
  jbackface-visibility: hidden;
}
*/

/*
TODO: Why are we doing this?
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #f0f0f0 inset; // overrides autofill bg
  -webkit-text-fill-color: #000;
}
*/

/*
Blinking cursor "disapppars" when using autofill in login box and this was needed to fix it.
*/
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"]
{
/*
  jbackground-color: black !important;
  color: white !important;
  caret-color: white !important;
*/
}

/* Chrome autofill override (ALL states) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
/*
  -webkit-text-fill-color: white !important;
  color: white !important;
  caret-color: white !important;

  -webkit-box-shadow: 0 0 0 1000px black inset !important;
  box-shadow: 0 0 0 1000px black inset !important;

  background-color: transparent !important;
*/

  /* Critical: stop Chrome repaint flip */
  transition: background-color 99999s ease-in-out 0s,
              color 99999s ease-in-out 0s;
}

.acgMainMenuLoginArea
{
	display:flex;
	flex-direction:column;
	gap:12px;
}

.acgGradientBorder2
{
	--border-width: 2px;
	--border-radius: 10px;
	--color-1:#864AFF;
	--color-2:#C4A6FF;
	--color-3:rgb(0,0,0);
	--color-4:rgb(34,19,63);
	--color-5:rgb(0,0,0);

	border: var(--border-width) solid transparent;
	border-radius: var(--border-radius);

	background-image: 
	linear-gradient(to right, var(--color-4) 0%, var(--color-5) 100%),
	linear-gradient(to right, var(--color-1) 0%, var(--color-2) 100%);

	background-origin: border-box;
	background-clip: padding-box, border-box;
	
	padding:8px 5px;
}

.acgPasswordBackground
{
	--color-1:black;
	--color-2:white;
	
	background-color: var(--color-1);
	box-shadow:50px 50px 0px var(--color-1) inset !important;
	border-width:0px !important;
	-webkit-text-fill-color:var(--color-2);
}

.g-recaptcha
{
	position:absolute;
	z-index:999999;
}
.grecaptcha-badge
{
	visibility: hidden;
}
.acg-google-recaptcha-disclaimer
{
	font-size:0.7rem;
}

.circleIcon
{
	display:inline-block;
	background-color:var(--acg-dark-purple);
	border-radius:50%;
	color:white;
	width:1.5em;
	height:1.5em;
	text-align:center;
	position:relative;
	top:-5px;
}
.uploadTitle
{
	font-weight:300;
	font-size:1.5em;
	jcolor:#570177;
	color:var(--acg-dark-purple);
	text-transform:uppercase;
}
.uploadStep
{
	jfont-weight:bold;
}
.uploadInstructions
{
	margin-bottom:0.5em;
	margin-left:2.3em;
}
.uploadAction
{
	margin-left:2.3em;
	margin-bottom:1em;
}

.homeStripe
{
	height:2px;
	background: linear-gradient(to right, var(--acg-gradient-medium-purple) 0%, var(--acg-gradient-light-purple) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	margin-top:0.5rem;
	margin-bottom:0.5rem;
}

/* Use by gallery */

.caseparator
{
	jborder-top:1px dotted #a8a8a8;
	jmargin-left:-1.5em;
	jmargin-right:-1.5em;
	margin-top:0px;
	margin-bottom:0px;
	color:#a8a8a8;
	jwidth:100%;
	height: 0;
	line-height: 0;
	/* font-size: 0; causes margins to be ignored */
	border:0;
	border-top:2px solid #d0d0d0;
	padding: 0;
}

.caintelsection
{
	padding:10px 0px 5px 0px;
	jcolor:#cc0000;
	jcolor:#cb2026;
	jcolor:var(--acg-dark-purple);
	font-size:0.8em;
	font-weight:bold;
}

.caintelseparator
{
	border-bottom:2px solid #d0d0d0;
	width:100%;
	margin-top:1em;
	margin-bottom:2em;
}

.caintelseparatortext
{
	text-align:right;
	jfont-size:0.9em;
	jpadding-right:22px;
	jpadding-top:15px;
	jpadding-bottom:50px;
}

.caintelseparatortext a[href]:link, .caintelseparatortext a[href]:visited
{
	jcolor:#999999;
	jborder-bottom: 0px dotted #cc0000;
	border-bottom: 0px dotted #cb2026;
}

.caintelseparatortext a[href]:hover
{
	jcolor:#cc0000;
	color:#cb2026;
	jborder-bottom: 0px dotted #cc0000;
	border-bottom:0px dotted #cb2026;
}

.caitem
{
	padding-top:2px;
	padding-bottom:10px;
	jwidth:600px;
	jbackground-color:#ff0000;
}

.caitemjob
{
	font-size:15px;
	padding-top:2px;
	padding-bottom:10px;
}
.caitemdate
{
	jpadding-top:2px;
	jpadding-bottom:10px;
	text-align:right;
	jfont-size:0.75em;
}
.caGroupTitle
{
	jmargin-top:1.2em;
	jfont-weight:bold;
	font-size:1.4em;
	font-style:italic;
}
.caOldAsset
{
	display:none;
}
.galleryItemBlock
{
	padding-bottom:0.5em;
	position:relative;	/* required to support 'featured item' star */
	jwidth:600px;
}
.groupByTitle
{
	color:inherit;
	jcolor:var(--acg-dark-purple);
	border-bottom:0px solid #00ff00;
}
.groupByTitle:hover
{
	color:inherit;
	border-bottom:inherit;
}
.tocItem
{
	list-style:none;
	margin-left:0;
}
.tocSearchInput
{
	height:2em;
	width:6em;
	margin:0;
	jpadding:0;
	border:0px solid #6e6e6e;
	border-right:0px;
	jbackground-color:#00ff00;
	padding-left:0.5em;
}
.tocClearButton
{
	vertical-align:middle;
	border:1px solid #6e6e6e;
	padding:2px 4px;
	border-left:0px solid #ffffff;
	jcolor:#a0a0a0;
	jheight:2em;	
}
.tocClearButton:hover
{
	jcolor:#cc0000;
	color:#cb2026;
}
.tocSearchOptions
{
	margin-top:0.5em;
}
.acgRwdWide .tocSearchOptions
{
	text-align:right;
}
.tocSearchButtonContainer
{
	vertical-align:middle;
}
.tocSearchButton
{
	margin-left:0.5em;	
}
.tocGroupBySelect
{
	height:2.15em;
	color:#6e6e6e;
	border:1px solid #6e6e6e;
}

.showMore, .showMore:visited
{
	jcolor:inherit;
	jborder-bottom:1px dotted #00ff00;
	jfont-size:0.9em;
	jfont-weight:bold;
	jcolor:#671984;
	text-decoration:none !important;
}
.showMore:hover
{
	jcolor:inherit;
	jborder-bottom:inherit;
}
.showMoreLink, .showMoreLink:visited
{
	jcolor:#671984;
}
.showMoreLink:hover
{
	color:inherit;
}
.showMoreText
{
	position:relative;
	top:-0.25em;
	padding-left:0.2em;
}
.showLessLink, .showLessLink:visited
{
	jcolor:#671984;
}
.showLessLink:hover
{
	color:inherit;
}
.showLessText
{
	position:relative;
	top:-0.25em;
	padding-left:0.2em;
}
.backToTopText
{
	jfont-size:0.9em;
	jfont-weight:bold;
	position:relative;
	top:-0.25em;
	padding-left:0.2em;
	text-decoration:none;
}
.acgLinkButton
{
	text-decoration:none !important;
}
.acgLinkButton:hover
{
	text-decoration:underline solid !important;
	text-underline-offset:0 !important;

	jcolor:var(--acg-dark-purple) !important;
}

video::-moz-media-controls-picture-in-picture-button
{
    display: none !important;
}

.acgCopyBlock
{
	margin-bottom:5rem;
}
.acgRwdNarrow .acgCopyBlock
{
	margin-bottom:3rem;
}