/************** FONTS and COLORS **************************************/
:root {
	
	--primary-color: #242424;
	--primary-text: white;
	--primary-alt: #d72e2c; 
	
	
}

html
{
	height: 100%;
	font-family: Barlow,Quantico,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

body, h1-h6, table, tr, td, input, submit, button, textarea, select  
{
	font-family: Barlow,Quantico,"Helvetica Neue",Helvetica,Arial,sans-serif;
} 

body
{
//	background-color: #1c355e;
	width: 100%;
}

h1 
{
	font-family: Barlow,Quantico,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 26px;
	font-weight: normal;
//	font-style: italic;
	color: #777777;
}

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

/*******************************************************************************************************/
/* Start of Login Form CSS block */
/*******************************************************************************************************/
.LoginForm 
{ 
	width: 40%;
	border-radius: .25em;
	background-color: #fff;
	margin: 20px auto; 
	padding: 14px 30px 15px;
}
	
.LoginForm a
{
	text-decoration:none;
}

.LoginForm a:hover, .LoginForm a:focus
{
	color: var(--primary-alt);
}

.LoginForm label
{
	margin-bottom: 0;
}

.LoginForm button[type=submit] 
{
	border: none;
	box-shadow: none;
	width: 100%;
	min-height: 2em;
	font-size: 1.75em;
	font-weight: 700;
	color: #fff;
	background-color: #979797;
	cursor: pointer;
	outline: none;
	margin-top:12px;
	border-radius: .25em;
}

.LoginForm button[type=submit]:focus, .LoginForm button[type=submit]:hover 
{
	background-color: var(--primary-alt);
	color: #fff;
}

.LoginForm p 
{
	font-size: 1.5em;
	font-weight: 700;
	text-align: center;
}





/*******************************************************************************************************/
/* End of Login Form CSS block */
/*******************************************************************************************************/

/*******************************************************************************************************/
/* Start of Reset Password Form CSS block */
/*******************************************************************************************************/
.ResetPwdForm 
{ 
	width: 40%;
	border-radius: .25em;
	background-color: #fff;
	margin: 20px auto; 
	padding: 14px 30px 15px;
}
	
.ResetPwdForm a
{
	text-decoration:none;
}

.ResetPwdForm a:hover, .ResetPwdForm a:focus
{
	color: #aa0026;
}

.ResetPwdForm label
{
	margin-bottom: 0;
}

.ResetPwdForm button[type=submit] 
{
	border: none;
	box-shadow: none;
	width: 100%;
	min-height: 2em;
	font-size: 1.75em;
	font-weight: 700;
	color: #fff;
	background-color: #979797;
	cursor: pointer;
	outline: none;
	margin-top:12px;
	border-radius: .25em;
}

.ResetPwdForm button[type=submit]:focus, .ResetPwdForm button[type=submit]:hover 
{
	background-color: #aa0026;
	color: #fff;
}

.ResetPwdForm p 
{
	font-size: 1.5em;
	font-weight: 700;
	text-align: center;
}

/*******************************************************************************************************/
/* End of Reset Password Form CSS block */
/*******************************************************************************************************/

/*******************************************************************************************************/
/* Start of Manual Lookup Form Style block */
/*******************************************************************************************************/ 
.ManualForm
{
  	width: 40%;
  	border-radius: 1em;
  	margin: 5em auto;
  	padding: .75em 3em .75em 3em;
  	color: #c4d600;
  	border: .25em solid;
  	background-color: //black;
}
  	
.ManualForm a
{
	text-decoration:none;
}

.ManualForm a:hover, .ManualForm a:focus
{
	color: #aa0026;
}

.ManualForm label
{
	margin-bottom: 0;
}

.ManualForm button[type=submit] 
{
	border: none;
	box-shadow: none;
	width: 5em;
	min-height: 2em;
	font-size: 1.75em;
	font-weight: 700;
	color: #fff;
	background-color: #979797;
	cursor: pointer;
	outline: none;
	border-radius: .25em;
}

.ManualForm button[type=submit]:focus, .ManualForm button[type=submit]:hover 
{
	background-color:; #aa0026;
	color: #fff;
}

/*******************************************************************************************************/
/* End of Manual Lookup Form CSS block */
/*******************************************************************************************************/

.form-title
{
	width:50%;
	font-weight:bold;
	font-size:1.5em;
}

.form-input:focus
{
	box-shadow:inset 0px 0px 5px 1px #c4d600;
}

.form-error
{
	display:none;
	color:red;	
}

.form-input 
{
	border: 1px solid;
	border-color: #c2cfd6;
	border-radius: .25em;
	display: block;
	font-size: 1.5em;
	background-color: #fff;
	min-height: 2.0em;
	margin-left: .1em;
	margin-right:.1em;
	padding-left: .25em;
	padding-right: .25em;
	margin-bottom: .50em;
	width: 100%;
}

.BackGroundImage 
{
	background: url(/dealers/dfl/images/background.png) no-repeat center center fixed; 
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    min-height:100%;
}

.glyphicon 
{
	position: relative;
	top: 1px;
	display: inline-block;
	font-family: "Glyphicons Halflings";
	font-weight: 400;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#content
{
	height: 100%;
    overflow-y: auto;
  	padding-top: 4em;
}

/*******************************************************************************************************/
/* Start of Header Bar CSS block */
/*******************************************************************************************************/

.HeaderWrapper {
    width: 100%;
    display: table;
    table-layout: fixed;   
}

.HeaderChild
{
	display: table-cell;
	vertical-align: middle;
}

#header 
{
  	background:var(--primary-color);
  	height: 5.50em;
  	width: 100%;
  	top: 0px;
  	left: 0px;
  	position: fixed;
	color: #c4d600;
}

#header a
{
	text-decoration:none;
	color: #c4d600;
}

#header a:hover, #header a:focus
{
	color: var(--primary-alt);
}

/*******************************************************************************************************/
/* End of Header Bar CSS block */
/*******************************************************************************************************/

/*******************************************************************************************************/
/* Start of Footer Bar CSS block */
/*******************************************************************************************************/

#main-footer
{
	height: 4.50em;
	width: 100%;
	
	left: 0px;
	
	background: var(--primary-color);
	font-size: 1em;
	margin: 0 auto; 
	color: #c4d600;
}

#main-footer a 
{
	text-decoration:none;
	color: #c4d600;
}

#main-footer a:hover, #main-footer:focus
{
	color: var(--primary);
}

/*******************************************************************************************************/
/* End of Footer Bar CSS block */
/*******************************************************************************************************/

/*******************************************************************************************************/
/* Start of Login Footer CSS block */
/*******************************************************************************************************/
#login-footer, #login-footer a {
    color: #fff;
    font-size: 1em;
    width: 40%;
    margin: 0 auto;
    text-decoration: none;
}

#login-footer a:hover, #login-footer:focus
{
	color: #aa0026;
}

/*******************************************************************************************************/
/* End of Login Footer CSS block */
/*******************************************************************************************************/
.partsearch{
	width:50%;
	border-radius: 1em;
	margin: 1em auto;
	color: #fff;
	background-color: var(--primary-color);
	text-align:center;
	padding: .25em;
}
/* Removes select arrow but only in IE10 and up */
select::-ms-expand 
{
	display: none;
}

/* Removes select arrow in chrome/firefox and centers text */
select 
{
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: .25em;
}

/* redborder class always needs to be last in the CSS to make it take precedence */
.redborder 
{
	border-color: red;
} 


/* CSS specific for mobile devices */
@media only screen and (max-width: 640px) 
{
	body
	{
		font-size: 1em;
		background: #fff;
	}
	
	.BackGroundImage
	{
		background: none;
	}
	
	.LoginForm 
	{
		width: 95%;
	}
   
	.LoginForm p 
	{
		font-size: 1em;
	}
	
	.ManualForm 
	{
		width: 75%;
	}
	
	.ResetPwdForm
	{
		width: 75%;
	}
	
	#content
	{
		padding-top: 2em;
	}
	
	#main-footer
	{
		width: 100%;	
	}
	
	#login-footer
	{
		width: 100%
	}
} 	

/* Dynamic copyright information */
.Copyright:after{ content: " 2012 Hol-Mac Corporation. All Rights Reserved."; }

/* style sheet from dealer page*/
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
  transition: opacity .3s ease;
}
#shipviac{
	display:none;
}
.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  width: 350px;
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
  transition: all .3s ease;
  font-family: Helvetica, Arial, sans-serif;
  margin-top: 10%;
}


.modal-default-button {
  float: right;
}
.req{
	border-color:red !important;
	border:4px solid;
	}

/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
/*	:root {
		--primary-color: #C1D22F;
	}*/
	* {
		word-wrap        : break-word;
		overflow-wrap    : break-word;
		
		scrollbar-color: var(--primary-alt) #222;
		scrollbar-width: thin;
		//overflow: auto;
	}
	
	::-webkit-scrollbar {
		width: 8px;
		background-color: #222;
	}
	::-webkit-scrollbar-thumb {
	    
	    background: var(--primary-alt);
	}
	a {
		//color: #fff1e8;
		text-decoration: underline;
	}
	.fas {
		font-family: "Font Awesome 5 Free" !important;
		padding: 4px;
		vertical-align: text-bottom;
		text-decoration: none !important;
	}
	.glyphicon {
		overflow: visible;
	}
	
	html {
		font-family: Barlow,Quantico,"Helvetica Neue",Helvetica,Arial,sans-serif;
		overflow: hidden;/*fixing firefox bug*/
		font-size: 16px;
		height           : 100%;
	}
	h1,h2,h3,h4,h5,h6,
	button,div,
	a {
		font-family: Barlow,Quantico,"Helvetica Neue",Helvetica,Arial,sans-serif;
	}
	body {
		height: 100%;
	}
	a {
		cursor: pointer;
	}
	a:hover {
		color: #efefef;
	}
	ul.inline-list,
	ol.inline-list {
		display: inline-block;
		max-height: 2rem;
		vertical-align: bottom;
	}
	.inline-list * {
		display: inline;
		margin: 4px 8px;
	}
	.inline-list input {
		margin: 4px !important;
		vertical-align: middle;
	}
	
	#header {
		color: var(--primary-color);
		height: auto;
		border-bottom: 2px solid currentColor;
		flex: 0 0 auto;
		position: relative;
	//	border-radius: 0 0 24px 24px;
		overflow: hidden;
		/*the absolutely positioned chartjs charts create a stacking context that allows them to overlap the header unless it has its own stacking context*/
		z-index: 100;
	}
	#header a {
		color: #fff1e8;
	}
	.HeaderWrapper {
		
		display: -ms-grid;
		-ms-grid-rows: 1fr;
		-ms-grid-columns: 1fr 1fr 2fr;
		
		display: grid;
		grid-template-rows: auto;
		grid-template-columns: 1fr 1fr 2fr;
		
		height: calc(48px + 1rem);
		transition: height .2s, padding .2s;
	}
	.HeaderWrapper > * {
		display: block;
	}
	.HeaderWrapper__logo {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		
		grid-row: 1;
		grid-column: 1;
		
		text-align: left;
		height: 48px;
	}
	.HeaderWrapper__logo > img {
		height: 48px;
	}
	.HeaderWrapper__welcome {
		-ms-grid-row: 1;
		-ms-grid-column: 3;
		grid-row: 1;
		grid-column: 3;
		
		text-align: right;
	}
	.ManualForm {
		
		text-align: center;
		margin: 0 auto;
		border: none;
	}
	.t-right{
		text-align:right;
	}
	.t-center{
		text-align:center;
	}
	.t-left{
		text-align:left;
	}

	.form-error {
		color: #ffab47;
	}
	#main-footer {
		height: auto;
		position: absolute;
		bottom:0;
	}
	#main-footer > .list-unstyled {
		margin: 0;
	}
	
	ul {
		list-style       : none;
	}
	ul,
	ol {
		padding          : 0;
		margin           : 0;
	}
	button, a {
		transition: color .25s, background .25s;
	}
	.button {
		transition       : all .15s ease-in-out;
		color            : #222;
		font-weight      : bold;
		font-size        : 1rem;
		background       : #87ceeb;
		cursor           : pointer;
		text-align       : center;
		border           : none;
		margin           : 4px;
		padding: 4px 8px;
		border-radius    : .25em;
		min-width        : 44px;
		min-height       : 44px;
		line-height: 36px;
		box-shadow       : 0px 4px 6px -2px rgba(0,0,0,0.5);
	}
	.button:hover,
	.button:focus {
		box-shadow       : 0px 6px 9px -2px rgba(0,0,0,0.4);
		transform        : translateY(-1px);
		filter: saturate(133%);
	}
	.button:hover::before,
	.button:focus::before {
		content: "";
		background: rgba(255,255,255, 0.15);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.button--small {
		min-height: 32px;
		min-width: 32px;
		line-height: 24px;
	}
	.button--action {
	//	background      : #C1D22F;
		background: var(--primary-alt);
	}
	.button--danger {
		background      : #aa0026;
	}
	.button--warning {
		background      : #ef5300;
	}
	.button--success {
		background      : #73c700;
	}
	.button--text {
		font-size: 1.125rem;
		background: none;
		border: none;
		box-shadow: none;
		color: currentColor;
		margin: 0;
		padding: .25em .75em .25em .75em;
		min-height: 0;
		min-width: 0;
	}
	.button--text:hover {
		box-shadow:none;
		transform        : translateY(-1px);
		filter: saturate(133%);
	}
	.button:disabled {
		transition       : all .25s;
		background       : transparent;
		color            : #666;
		border           : 1px solid #666;
		cursor           : default;
		box-shadow       : none;
		text-shadow      : 0 0 0 transparent;
	}
	.button:disabled:hover,
	.button:disabled:focus {
		box-shadow       : none;
		transform        : none;
		filter: none;;
	}
	.button:disabled:hover::before,
	.button:disabled:focus::before {
		content: "";
		background: none;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.top-space{
		margin-top:.5em !important;
		}
	.navigation {
		display: flex;
		flex-direction: column;
		text-align: center;
		width: 100%;
		font-size: 1.125rem;
	//	background-color: #1a1a1a;
		border-top: 1px solid #333;
	}
	.navigation__link {
		display: block;
		padding: 0;
		height: 0;
		width: 100%;
		overflow: hidden;
		transition: height .33333s, padding .33333s;
		display: inline-flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.navigation__link--open {
		border-top: 1px solid #333;
		height: calc(1.42857143em + 17px);/*line height plus padding plus border*/
		padding: 8px 4px;
	}
	.navigation__open {
		width: 100%;
		padding: 4px;
		cursor: pointer;
		overflow: hidden;
	}
	.navigation__sales > i {
		//color: #95D866 !important;
	}
	.navigation__quotes > i {
		//color: #80c9d0 !important;
	}
	.navigation__orders > i {
		//color: #dd6666 !important;
	}
	.navigation__dashboard > i {
	//	color: #E5D636 !important;
	}
	.navigation__maintenance > i {
		//color: #FFAB47 !important;
	}
	.navigation__marketing > i {
		//color: #C1D22F !important;
	}
	.navigation__contact > i {
		color: #dff8fa !important;
	}
	
	.tabber {
		width: 100%;
		background-color: #1a1a1a;
		border-top: 1px solid #333;
		overflow: hidden;
	}
	.tabber__tab {
		padding: 8px 4px;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.searchIcon{
		color: black; 
		position: relative;
		right: 2em; 
		top: .25em; 
		cursor: pointer; 
		
	}
	.searchIcon:hover{
		color: var(--primary-alt);
		
	}
	#top-scroll-target {
		height: 0;
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
		position: absolute;
		top: 0;
	}
	
	#content {
		line-height: 2;
		margin: -1rem 0 0 0;
		overflow: auto;
		padding: 1rem 0 0 0;
		position: relative;
	}
	.content__section {
		padding: 2rem 1rem;
	//	border-bottom: 4px ridge #444;
	//	border-top: 4px groove #444;
		margin-top: 1rem;
		flex: 0 0 auto;
		box-shadow: 0px 6px 9px -2px rgba(0,0,0,0.4);
	}
	.content__section--end {
		border: none;
	//	padding-top: 10%;
		box-shadow: none;
		margin-top: 0;
	}
	.content__wordmark {
		max-height: 13rem;
		max-width: 100%;
	}
	.content__header {
		color: #C1D22F;
		color: var(--primary-color);
		font-size: 3rem;
		margin-top: .125rem;
		margin-bottom: .5rem;
		overflow: visible;
	}
	.content__text {
		color: #C1D22F;
		color: var(--primary-color);
		font-size: 1.5rem;
		margin: 2rem 0 0 0;
	}
	.content__scroll-marker {
		margin: 0 auto 1rem auto;
		overflow: hidden;
		font-size: 2rem;
		color: #C1D22F;
		color: var(--primary-color);
	}
	
	.bg-dark-0 {
		background: #0c0c0c;
	}
	.bg-dark-1 {
		background: #1a1a1a;
	}
	.bg-dark-2 {
		background: #221e1f;
	}
	.bg-neutral {
		background: #888;
	}
	.bg-light-0 {
		background: #efefef;
	}
	.bg-light-1 {
		background: #f4f4f4;
	}
	.bg-light-2 {
		background: #fffffa;
	}
	.bg-blue-0 {
		background: #2e6e9e;
	}
	.bg-blue-1 {
		background: #87ceeb;
	}
	.bg-blue-2 {
		background: #dfeffc;
	}
	.bg-connectwork {
		background: white;
	}
	.bg-what-the-hex {
		background: white;
	}
	.bg-prism {
		background-image: url("/dealers/dfl/images/bgs/prism/prism.png");
	}
	.bg-escheresque {
		background-image: url("/dealers/dfl/images/bgs/escheresque_ste/escheresque_ste.png");
	}
	
	.text-black {
		color: #050505;
	}
	.text-gray{
		color: #bbb;
	}
	.txt-white {
		color: #fff1e8;
	}
	.text-blue {
		color: #2e6e9e;
	}
	.text-red {
		color: #9e2e33;
	}
	.text-yellow {
		color: #cd7e00;
	}
	.text-green {
		color: #C1D22F;
	}
	
	.font-size-0 {
		font-size: 0.875rem;
	}
	.font-size-1 {
		font-size: 1rem;
	}
	.font-size-2 {
		font-size: 1.125rem
	}
	.font-size-3 {
		font-size: 1.25rem
	}
	.font-size-4 {
		font-size: 1.5rem
	}
	.font-size-5 {
		font-size: 2.5rem
	}
	.font-size-6 {
		font-size: 3rem
	}
	.big-icon {
		font-size: 6rem;
	}
	
	.overflow-v {
		overflow: visible;
	}
	.overflow-h {
		overflow: hidden;
	}
	.overflow-a {
		overflow: auto;
	}

	.round-corners {
		border-radius: 8px;
	}

	.fill-h {
		width: 100%;
	}
	.fill-v {
		height: 100%;
	}
	.block {
		display: block;
	}
	.flex {
		display: -ms-flex;
		display          : -webkit-box;
		display          : -ms-flexbox;
		display          : flex;
		-ms-flex-direction   : row;
		-webkit-box-orient   : horizontal;
		-webkit-box-direction   : normal;
		        flex-direction   : row;
	}
	.flex--inline {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
	}
	.flex--column {
		-ms-flex-direction: column;
		-webkit-box-orient   : vertical;
		-webkit-box-direction   : normal;
		        flex-direction   : column;
	}
	.flex--wrap {
		-ms-flex-wrap: wrap;
		flex-wrap : wrap;
	}
	.flex--center-h {
		-ms-justify-content: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}
	.flex--center-v {
		-msalign-items: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}
	.flex--spaced {
		-ms-flex-pack: distribute;
		    justify-content: space-around;
		-webkit-box-pack: space-evenly;
		    -ms-flex-pack: space-evenly;
		        justify-content: space-evenly;
	}
	.flex__shrink-item {
		-webkit-box-flex             : 0;
		    -ms-flex             : 0 1 auto;
		        flex             : 0 1 auto;
	}
	.flex__fit-item {
		-webkit-box-flex             : 1;
		    -ms-flex             : 1 1 auto;
		        flex             : 1 1 auto;
	}
	.flex__grow-item {
		-webkit-box-flex             : 1;
		    -ms-flex             : 1 0 auto;
		        flex             : 1 0 auto;
	}
	.flex__natural-item {
		-webkit-box-flex             : 0;
		    -ms-flex             : 0 0 auto;
		        flex             : 0 0 auto;
	}
	.flow-root {
		overflow         : auto;
		display          : flow-root;
	}
	.cartcount{
	display:none;	
	background: var(--primary-alt);
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    color: var(--primary-color);
    margin: auto;   
    position: absolute;
    transform: translate(2em);
    top: 1.45em;
    place-items: center;
    z-index: 2;
    font: bold .6rem Barlow; 
    border-style: solid;
    border-width: thin;
    border-color: var(--primary-color);
		
	}
	
	.partcard{
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: auto auto auto auto auto;
		width:100%;
		word-break:break-all;
  	}
	
	.card {
		margin: .5rem;
		padding: .5rem;
		box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.4);
		border-radius: .25rem;
		position: relative;
		color: var(--primary-color);
	}
	.card__buttons {
		text-align: right;
	}
	.card__header {
		margin: 0 0 0.5rem 0;
		padding: 0;
		color: white;
		background: var(--primary-color);
		overflow: visible;
		padding: .3rem;
		border-radius: 5px;
		text-align: center;
	}
	.card__header--list {
		box-shadow: 0px 14px 16px -15px rgba(0,0,0,0.55);
		z-index: 1;
	}
	.card-list {
		overflow: auto;
	}
	
	.dashboard {
		display: -ms-grid;
		display: grid;
		grid-template-rows: 1fr;
		-ms-grid-rows: 100%;
		grid-template-columns: 1fr;
		-ms-grid-columns: 100%;
		width: 100%;
		height: calc(100% - 8px);
		overflow: hidden;
	}
	.dashboard__component {
		flex-direction: column;
		margin: 4px;
		padding: 8px;
		border-radius: 1rem;
		display: none;
		height: auto;
		overflow: hidden;
		background-color: #222;
	}
	.dashboard__component:target {
		display: flex;
		z-index:1;
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		
		grid-row: 1;
		grid-column: 1;
	}
	.dashboard__metrics {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		
		grid-row: 1;
		grid-column: 1;
		/* we want to show the metrics even if nothing has been selected yet*/
		display: flex !important;
	}
	.dashboard__metrics .card__header,
	.dashboard__metrics a {
		color: #C1D22F;
		color: var(--primary-color);
	}
	.dashboard__metrics .button--action {
		//background: #C1D22F;
		background: var(--primary-alt);
	}
	.metrics-charts {
		display: -ms-grid;
		-ms-grid-rows: 1fr 1fr 1fr;
		-ms-grid-columns: 1fr 1fr;
		
		display: grid;
		grid-template-rows: 1fr 1fr 1fr;
		grid-template-columns: 1fr 1fr;
		height: 100%;
	}
	.metrics-charts__quaternary {
		-ms-grid-row: 1;
		-ms-grid-column:1;
		
		grid-row: 1;
		grid-column:1;
	}
	.metrics-charts__secondary {
		-ms-grid-row: 1;
		-ms-grid-column: 2;
		
		grid-row: 1;
		grid-column: 2;
	}
	.metrics-charts__primary {
		-ms-grid-row: 2;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		
		grid-row: 2;
		grid-column: 1/3;
	}
	.metrics-charts__ternary {
		-ms-grid-row: 3;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		
		grid-row: 3;
		grid-column: 1/3;
	}
	
	.dashboard__quotes {
		-ms-grid-row: 1;
		-ms-grid-column: 2;
		
		grid-row: 1;
		grid-column: 2;
	}
	
	.dashboard__orders {
		-ms-grid-row: 1;
		-ms-grid-column: 3;
		
		grid-row: 1;
		grid-column: 3;
	}
		
	.history-search {
		display: flex;
		font-size: 1rem;
	}
	.history-search__bar {
		display: inline-block;
		border: none;
		padding: 0.25em 2em 0.25em 2em;
		flex: 1 1 auto;
	}
	
	.data-table {
		table-layout: auto;
		display: table;
	}
	
	.data-table td,
	.data-table th {
		padding: 8px;
		border: solid .1rem var(--primary-color)
	}
	.data-table th {
		cursor: pointer;
		background: var(--primary-alt);
		border: solid .1rem var(--primary-color)
	}
	.data-table > tbody > tr:nth-child(odd) {
		background-color: white;
		
	}
	.data-table > tbody > tr:nth-child(even) {
		background-color: #dee2e6;
		
	}
	.error{
	//	border-color:red;
		border-width: thick;
		box-shadow: 0px 0px 8px 5px red !important;
		z-index:1;
	}
	[v-cloak] {
  display: none;
}
	.quotes-charts {
		display: -ms-grid;
		-ms-grid-rows: 1fr 1fr 1fr;
		-ms-grid-columns: 1fr 1fr;
		
		display: grid;
		grid-template-rows: 1fr 1fr 1fr;
		grid-template-columns: 1fr 1fr;
		
		width: 100%;
		height: 100%;
	}
	.quotes-charts > * {
		overflow: auto;
	}
	.quotes-charts__primary {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		
		grid-row: 1;
		grid-column: 1/3;
	}
	.quotes-charts__secondary {
		-ms-grid-row: 3;
		-ms-grid-column: 1;
		
		grid-row: 3;
		grid-column: 1;
	}
	.quotes-charts__ternary {
		-ms-grid-row: 3;
		-ms-grid-column: 2;
		
		grid-row: 3;
		grid-column: 2;
	}
	.quotes-charts__quaternary {
		-ms-grid-row: 2;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		
		grid-row: 2;
		grid-column: 1/3;
	}
	
	.metrics-theme .card__header,
	.metrics-theme a,
	a.metrics-theme {
		color: #E5D636;
	}
	.metrics-theme,
	.metrics-theme * {
		scrollbar-color: #E5D636 #222;
	}
	.metrics-theme::-webkit-scrollbar-thumb,
	.metrics-theme ::-webkit-scrollbar-thumb {
	    background: #E5D636;
	}
	.metrics-theme .button--action {
		background: #E5D636;
	}
	
	
	.quotes-theme .card__header,
	a.quotes-theme,
	.quotes-theme a  {
		color: #80c9d0;
	}
	.quotes-theme,
	.quotes-theme * {
		scrollbar-color: #80c9d0 #222;
	}
	.quotes-theme::-webkit-scrollbar-thumb,
	.quotes-theme ::-webkit-scrollbar-thumb {
	    background: #80c9d0;
	}
	.quotes-theme .button--action {
		background: #80c9d0;
	}
	
	.chart {
		overflow: hidden;
		position: relative;
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 100%;
		color: #222;
		background: var(--primary-color);
	}
	.chart * {
		overflow: visible;
	}
	.loadingscreen{
		z-index: 1051;
		width: -webkit-fill-available;
		height: -webkit-fill-available;
		position: absolute;
		background: darkgrey;
		opacity: .6;
		display:none;
		width: 100%;
		height: 100%;
}
		

	}
	.inline-spinner {
		display: inline-block;
		position: relative;
		width: 64px;
		height: 64px;
		font-size: 16px;
		filter: drop-shadow(0px 4px 8px #000000);
		overflow: visible;
	}
	.inline-spinner--small {
		width: 24px;
		height: 24px;
		font-size: 8px;
	}
	.inline-spinner--large {
		width: 96px;
		height: 96px;
		font-size: 24px;		
	}
	.inline-spinner--large-center{
		position: absolute;
		top:45%;
		left:45%;		
	}
	.inline-spinner__outer,
	.inline-spinner__inner {
		position: absolute;
		border: 12px solid transparent;
		border-radius: 50%;
		margin: -50% 0 0 -50%;

	}
	.inline-spinner__outer {
		left: 50%;
		top: 50%;
		border-top: 12px double #C1D22F;
		border-top-color: var(--primary-color);
		border-bottom: 12px double #C1D22F;
		border-bottom-color: var(--primary-color);
		width: 100%;
		height: 100%;
		-webkit-animation: spin 1s linear infinite;
		animation: spin 1s linear infinite;
	}
	.inline-spinner__inner {
		width: 60%;
		height: 60%;
		left: calc(50% + .75em);
		top: calc(50% + .75em);
		border-top: 8px solid #C1D22F;
		border-top-color: var(--primary-color);
		border-bottom: 8px solid #C1D22F;
		border-bottom-color: var(--primary-color);
		animation: spin 3s cubic-bezier(.68,-0.55,.27,1.55) infinite;
	}
	.inline-spinner--small .inline-spinner__inner {
		display: none;
	}
	
	.s-hidden {
		/*saves the trouble of adding a rule just to hide individual elements*/
		display: none !important;
	}
	
	.loading {
		position: relative !important;
		overflow: hidden !important;
	}
	.loading > * {
		filter: blur(.5rem);
	}
	.loading::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 1;
		background: rgba(0,0,0, .8);
	}
	.loading::after {
		content: "Loading...";
		z-index: 2;
		position: absolute;
		top: calc(50% - 1em);
		left: 0;
		width: 100%;
		color: #f4f4f4;
		text-align: center;
		font-size: 1rem;
	}
	
	.fade-enter-active, .fade-leave-active {
	  transition: opacity .5s;
	}
	.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
	  opacity: 0;
	}
	
	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		} 
	}
	
	@media (min-width: 35rem) {
		.partwrapper{  
			width:60%;
			margin: 1em;
			box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.4);
			border-radius: .25rem;
		}
	}
	@media (min-width: 35rem) {
		.partwrapper{  
			width:60%;
			margin: 1em;
			box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.4);
			border-radius: .25rem;
		}
	}
	@media (min-width: 50rem) {
		.partwrapper{  
			width:40%;
			margin: 1em;
			box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.4);
			border-radius: .25rem;
		}
		.HeaderWrapper {
			-ms-grid-columns: 1fr 2fr 1fr;
			grid-template-columns: 1fr 2fr 1fr;
		}
		.HeaderWrapper__logo {
			-ms-grid-row: 1;
			-ms-grid-column: 1;
				
			grid-row: 1;
			grid-column: 1;
			padding: .5em;
		}
		.HeaderWrapper__welcome {
			-ms-grid-row: 1;
			-ms-grid-column: 3;
			
			grid-row: 1;
			grid-column: 3;
		//	padding: .5em;
		}
		.navigation {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: stretch;
		}
		.navigation__link {
			width: 14.285714285714286%;
			height: auto;
			order: 0;
			padding: 8px 4px;
			flex-direction: column;
		}
		.navigation__open {
			display: none;
		}
	}
	@media (max-width: 40rem) {
		.HeaderWrapper{
			-ms-grid-columns: 1fr  2fr;
			grid-template-columns: 1fr  2fr;		
		}
	}
	@media (max-width: 65rem) {
		#mansearchtxt{
			display:none;			
		}
	}
	@media (min-width: 80rem) {
	
		.partwrapper{  
			width:25%;
			margin: 1em;
			box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.4);
			border-radius: .25rem;
		}
		.quotes-charts{
			height: 80%;
		}
		.metrics-charts {
			-ms-grid-rows: 1fr 1fr 1fr;
			-ms-grid-columns: 1fr 1fr;

			grid-template-rows: 1fr 1fr 1fr;
			grid-template-columns: 1fr 1fr;
		}
		
		.quotes-charts {
			-ms-grid-rows: 1fr 1fr;
			-ms-grid-columns: 3fr 1fr 1fr;
			
			grid-template-rows: 1fr 1fr;
			grid-template-columns: 3fr 1fr 1fr;
		}
		.quotes-charts__primary {
			-ms-grid-row: 1;
			-ms-grid-column: 1;
			-ms-grid-column-span: 1;
			
			grid-row: 1;
			grid-column: 1;
		}
		.quotes-charts__secondary {
			-ms-grid-row: 1;
			-ms-grid-column: 2;
			
			grid-row: 1;
			grid-column: 2;
		}
		.quotes-charts__ternary {
			-ms-grid-row: 1;
			-ms-grid-column: 3;
			
			grid-row: 1;
			grid-column: 3;
		}
		.quotes-charts__quaternary {
			-ms-grid-row: 2;
			-ms-grid-column: 1;
			-ms-grid-column-span: 3;
			
			grid-row: 2;
			grid-column: 1/4;
		}
	}
	@media (min-width: 80rem) {
		
			.partwrapper{  
				width:15%;
				margin: 1em;
				box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.4);
				border-radius: .25rem;
			}
			.dashboard__component {
				display: flex;
			}
			.metrics-charts {
				display: -ms-grid;
				display: grid;
			}
			.dashboard {
				padding: 8px;
				grid-template-rows: 1fr 1fr 1fr;
				-ms-grid-rows: 1fr 1fr 1fr;
				grid-template-columns: 1fr 1fr 1fr 1fr;
				-ms-grid-columns: 1fr 1fr 1fr 1fr;
				height: 90%;
			}
			.dashboard__metrics,
			.dashboard__metrics:target {
				-ms-grid-row: 1;
				-ms-grid-row-span: 3;
				-ms-grid-column: 1;
				-ms-grid-column-span: 2;
				
				grid-row: 1/4;
				grid-column: 1/3;
			}
			.dashboard__quotes,
			.dashboard__quotes:target {
				-ms-grid-row: 1;
				-ms-grid-row-span: 3;
				-ms-grid-column: 3;
				
				grid-row: 1/4;
				grid-column: 3;
			}
			.dashboard__orders,
			.dashboard__orders:target {
				-ms-grid-row: 1;
				-ms-grid-row-span: 3;
				-ms-grid-column: 4;
				
				grid-row: 1/4;
				grid-column: 4;
			}
			.dashboard__maintenance,
			.dashboard__maintenance:target {
				-ms-grid-row: 3;
				-ms-grid-column: 1;
				
				grid-row: 3;
				grid-column: 1;
			}
			.dashboard__marketing,
			.dashboard__marketing:target {
				-ms-grid-row: 3;
				-ms-grid-column: 2;
				
				grid-row: 3;
				grid-column: 2;
			}
			.tabber {
				display: none;
			}
		
	}