/* Color Scheme:https://www.acg.org/sites/files/ACG_VisualIdentityStandards_June2019_0.pdf */
/* Set Colors ------------------- */
:root{
	--black:#000000;
	--blackRGB:0,0,0;
	--blue:#0496FF;
	--blueRGB:4,150,255;
	--blueDark:#025896;
	--blueDarkRGB:2,88,150;
	--gray:#565B5F;
	--grayRGB:86,91,95;
	--grayDark:#3A3E40;
	--grayDarkRGB:58,62,64;
	--grayLight:#DFE1E2;
	--grayLightRGB:223,225,226;
	--grayMed:#A9AFB2;
	--grayMedRGB:169,175,178;
	--green:#66CC33;
	--greenRGB:102,204,51;
	--greenDark:#264d13;
	--greenMedRGB:38,77,19;
	--greenMed:#468c23;
	--greenMedRGB:70,141,35;
	--orange:#FA8334;
	--orangeRGB:250,131,52;
	--pink:#FE938C;
	--pinkRGB:254,147,140;
	--purple:#330066;
	--purpleRGB:51,0,88;
	--red:#C20114;
	--redRGB:194,1,20;
	--white:#ffffff;
	--whiteRGB:255,255,255;
	--yellow:#f2b035;
	--yellowRGB:242,176,53;
	--yellowLight:#f6d679;
	--yellowLightRGB:246,214,121;
}

/* General ---------------------- */
html,body{ font-family:'DM Sans', sans-serif; }
h1,h2,h3,h4,h5,h6{ font-family:'Inter', sans-serif; }

h1.line:after, h2.line:after, h3.line:after, h4.line:after{
	background-color:var(--black);
    clip-path:url(#line);
	-webkit-clip-path:url(#line);
	content:"";
    display:inline-block;
    right:0;
	text-align:right;
}
h1.line:after{
    height:5px;
    margin:0 0 -15px -120px;
    width:120px;
}
h2.line:after{
    height:4px;
	margin:0 0 -10px -100px;
    width:100px;
}
h3.line:after{
    height:3px;
    margin-top:4px;
    width:60px;
}
h4.line:after{
    height:2px;
    margin-top:2px;
    width:60px;
}

.clip{
	height:0;
	position:absolute;
	width:0;
}

/* Text Colors ----------------------- */
.blueDark{ color:var(--blueDark); }
.greenDark{ color:var(--greenDark); }
.greenMed{ color:var(--greenMed); }
.yellowLight{ color:var(--yellowLight); }

/* SVG Fill Colors ------------------- */
svg.blueDark{ fill:var(--blueDark); }
svg.greenDark{ fill:var(--greenDark); }
svg.greenMed{ fill:var(--greenMed); }
svg.yellowLight{ fill:var(--yellowLight); }

/* Alert Color ----------------------- */
#alert.blueDark{ background-color:var(--blueDark); }
#alert.greenDark{ background-color:var(--greenDark); }
#alert.greenMed{ background-color:var(--greenMed); }
#alert.yellowLight{ background-color:var(--yellowLight); }

/* Button Colors --------------------- */
.button.slant.blue:before{ background:var(--blueDark); }
.button.slant.blue:active:before{ background:var(--blue); }

.button.blueDark,body.dark .button.blueDark{
	background-color:var(--blueDark);
	border:solid 2px var(--blueDark);
	color:var(--white);
} .button.blueDark:active,.button.blueDark.loading,body.dark .button.blueDark:active,body.dark .button.blueDark.loading{ color:var(--blueDark) !important; }
.button.blueDark svg,body.dark .button.blueDark svg{ fill:var(--white); }
.button.blueDark:active svg,.button.blueDark.loading svg,body.dark .button.blueDark:active svg,body.dark .button.blueDark.loading svg{ fill:var(--blueDark); }
.button.slant.blueDark:before{ background:var(--blue); }
.button.slant.blueDark:active:before{ background:var(--blueDark); }

.button.slant.green:before{ background:var(--greenMed); }
.button.slant.green:active:before{ background:var(--green); }

.button.slant.greenDark:before{ background:var(--greenMed); }
.button.slant.greenDark:active:before{ background:var(--greenDark); }

.button.yellow,body.dark .button.yellow{ color:var(--white) !important; }
.button.slant.yellow:before{ background:var(--yellowLight); }
.button.slant.yellow:active:before{ background:var(--yellow); }

/* Buttons ---------------------- */
.button.slant{
	border:none !important;
	clip-path:polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
	-webkit-clip-path:polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
}
.button.slant:before{
	clip-path:polygon(46% 0%, 100% 0%, 54% 100%, 0% 100%);
	-webkit-clip-path:polygon(46% 0%, 100% 0%, 54% 100%, 0% 100%);
	content:'';
    height:100%;
    left:0;
    position:absolute;
    top:0; 
    transform-origin:0 0;
    width:10%; 
}

/* Header ----------------------- */
#header{
	background:var(--white);
	border-bottom:solid var(--grayLight) 1px;
	color:var(--gray);
}
body.dark #header{
	background:var(--grayDark);
	border-color:var(--gray);
	color:var(--white);
}

#header .wrap .logoWrap{ display:none; }
body:not(.dark) #header .wrap .logoWrap.master{ display:block; }
body.dark #header .wrap .logoWrap.light{ display:block; }

#header .wrap .logoWrap .logo{
	height:45px;
	width:232px;
}

#header .wrap .info{ text-align:right; }
#header .wrap .info h2,#header .wrap .info h3{ margin:0px; }
#header .wrap .info h3{ font-weight:normal; }

/* Printing --------------------- */
#printHeader .logo{
	height:45px;
	width:350px;
}

/* Footer ----------------------- */
footer{ background:var(--gray); }