:root
{
/********************** COLOR PALETTE **************************/
	/* Core Colors */
	--epicor-teal:		   rgb(2, 80, 100);     /* 025064 */
	--epicor-white:		   white;               /* FFFFFF */
	--epicor-aqua:		   rgb(144, 210, 181);  /* 90D2B5 */
	--epicor-red:		   rgb(255, 33, 2);     /* FF2102 - Use sparingly */
	--epicor-light-gray:    rgb(238, 242, 245);  /* EEF2F5 */
	--epicor-black:         black;               /* 000000 */
	--epicor-aqua-40:       rgb(208, 237, 228);  /* D0EDE4 */
	
	/* Industry color */
	-epicor-industry-lilac:       rgb(163, 184, 216);  /* A3B8D8 */
	
	/* Brand guidelines make a single color of the color palette unique to each 
	 * vertical market segment (manufacturing, distribution, retail, automotive, lumber)
	 * P21 and Eclipse are 'Distribution', but to make a function UI we do still require
	 * more than 7 colors.  We'll use the retail color, but only briefly.  It likely won't
	 * appear in any screenshots.  
	 */
	--epicor-retail-banned:        rgb(228,223,129);    /* Unavailable / do not use */
	
	
	/* Accent colors ("only for use within charts and graphs") */
	/* We can probably get away with using these for brief UI items (button-armed, etc) */
	--epicor-watermelon:	   rgb(255, 136, 115);
	--epicor-jade:		   rgb(4, 158, 138);
	--epicor-peach:		   rgb(254, 190, 159);
	--epicor-mauve:		   rgb(181, 112, 154);
	--epicor-sky-blue:	   rgb(169, 220, 248);  /* A9DCF8 */
	
	/* See solar.css in the client for color roles. */
}	
body {
  font-family: 'Source Sans Pro', sans-serif;
   background: var(--solar-frame-backgroundD);
}

.copyright-blurb::before
{
	content: "\0A9 2004-2025 Epicor Software Corporation. All Rights Reserved";
}

.btn
{
   background-color: #EEF2F5; /*Button normal / light grey */
   color: #000; /*Text-A - Button foreground / black */
}
.btn:hover
{
   background-color: #A9DCF8; /* Button-focused / sky blue */
   color: #000; /*Text-A - Button foreground / black */
}

.btn:active
{
   background-color: #E4DF81; /*Button-armed / retail-banned */
   color: #000; /*Text-A - Button foreground / black */
}

body .hero {
  position: fixed;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url("../images/mountains.png");    
  background-repeat: no-repeat;    
  background-position-x: center;
  background-color: #A3B8D8;  /* Background-C / Lilac */
  height: 170vh;
  width: 100%;
}
body .hero:before {
  content: '';
  height: 100%;
  width: 100%;
  height: 170vh;
  min-height: 300px;  
  width: 100vw;       
  position: absolute;
} 
.tooltip-inner { 
  background-color: #f9edbe; 
  color: black;
} 
.tooltip.left .tooltip-arrow { 
  border-left-color: #f9edbe;
}
.hero-panel {
  text-align: center;    
  box-shadow: 0 6px 20px 0 rgba(0,0,0,.19); 
  background-color: #025064; /* Background-B / Teal */
  border:0; 
  color: white;
}
.hero-panel > .panel-body {   
  height:204px
}
#hero-content {
  position: relative;
  z-index: 1;                 
  margin: 7vh auto 0;   
}  
@media (max-width: 1050px){
  .hero-header {
    font-size: 30px;
  }
}
body .content {
  position: absolute;
  z-index: 1000;
  top: 37vh;
  left: 0;
  right: 0;
  background: #A3B8D8; /* Background-C - Lilac */
  height: 100%;
  width: 100%;
  box-shadow: 0 -2px 1px rgba(0, 0, 0, 0.15);   
}
@media (min-height: 1000px){
  body .content {       
    top: 350px;
  }
}
.row, .footer-bar {   
  padding-right: 10%;
  padding-left: 10%;
  margin-right: 0;
  margin-left: 0;
}   
.content > .row {   
  padding-top: 20px;
  padding-bottom: 20px;    
}
.content > .row:nth-of-type(1) {
  padding-top: 0px;
}
.content > .row:nth-of-type(2n) {
  background-color: #EEF2F5; /* Background-A / light grey */
}
.content > .row:nth-of-type(2n+1) {
  background: #A3B8D8; /* Background-C - Lilac */
}
.content > nav > .container {   
  width: 83%;
}
@media (max-width: 768px){
  .content > nav > .container {   
    width: 97%;
  }
}
.device-wireframe {
  width:auto; 
  height:auto; 
  max-height:200px;
  margin-top: 20px;
}
.footer-bar{
  background-color:#025064; /* Background-B - Teal */
  color: #CCC;
  margin-bottom: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  min-height: 50px;
}
.footer-bar > li > strong {
  color: #fff;
}
#epicor-logo{
  position: absolute;
  top:20px;
  left:20px;
  width:200px;
  z-index: 2;
}