@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Overpass:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	/* GMF Primary Palette */
	--color-white: #FFF;
	--color-light-brand: #EDF4F9;
	--color-light-gray: #E6E7E8;
	--color-brand: #005DAB;
	--color-dark-brand: #00295B;
	--color-darker-gray: #494949;

	/* GMF Secondary Palette */
	--color-brand-green: #469838;
	--color-bright-blue: #0092D4;
	--color-brand-orange: #EB5D03;

	/* GMF Neutral Palette */
	--color-utility-gray: #F6F7F9;
	--color-medium-gray: #9A9B9C;
	--color-brand-gray: #77787B;
	--color-charcoal: #303132;
	--color-darkest-gray: #303132;
	--color-brand-black: #111;
	--color-disabled: #30313230; /* Charcoal at 30% opacity */

	/* Dealer Dividend Tiers Palette */
	--color-dividends-tier-1: #B9B7B5;
	--color-dividends-tier-2: #EAB729;
	--color-dividends-tier-3: #54697E;
	--color-dividends-tier-4: #0072CE;

	/* GMF Feedback Palette - Text/Icons */
	--color-text-feedback-info: var(--color-brand);
	--color-text-feedback-success: #006933;
	--color-text-feedback-warning: #9F6200;
	--color-text-feedback-error: #A31000;

	/* GMF Feedback Palette - Background */
	--color-background-feedback-info: #E6F9FF;
	--color-background-feedback-success: #F2F9E6;
	--color-background-feedback-warning: #FFF9E7;
	--color-background-feedback-error: #FFE8E5;

	/* GMF Feedback Palette - Borders */
	--color-border-feedback-info: #86DDF8;
	--color-border-feedback-success: #C8E68E;
	--color-border-feedback-warning: #FFE795;
	--color-border-feedback-error: #F7B1A8;

	/* Typography - General Pallete */
	--color-text-header: var(--color-charcoal);
	--color-text-header-alternate: var(--color-brand);
	--color-text-default: var(--color-charcoal);
	--color-text-inverse-1: var(--color-white);

	/* Typography - Input Pallete*/
	--color-text-input: var(--color-brand-gray);
	--color-text-input-placeholder: var(--color-medium-gray);
	--color-text-input-disabled: var(--color-disabled);
	--color-text-input-error: var(--color-text-feedback-error);

	/* Links */
	--color-text-link: var(--color-bright-blue);
	--color-text-link-hover: var(--color-brand);
	--color-text-link-active: var(--color-brand-gray);
	--color-text-link-visited: var(--color-dark-brand);

	--color-text-quote: var(--color-darker-gray);
	--color-text-quote-source: var(--color-darkest-gray);

	/* Font Styles - Headers */
	--font-primary: "Overpass", Arial, sans-serif !important;
	--font-secondary: "Oswald", Arial, sans-serif !important;

	--font-size-neg-2: 0.75rem; /* 11.25px */
	--font-size-neg-1: 0.875rem; /* 13.125px */
	--font-size-base: 15px;
	--font-size-1: 1.125rem; /* 16.875px */
	--font-size-2: 1.25rem; /* 18.75px */
	--font-size-3: 1.5rem; /* 22.5px */
	--font-size-4: 1.75rem; /* 26.25px */
	--font-size-5: 2rem; /* 30 px */
	--font-size-6: 2.25rem; /* 33.75px */
	--font-size-7: 2.5rem; /* 37.5px */
	--font-size-8: 2.75rem; /* 41.25px */
	--font-size-9: 3rem; /* 45px */

	--font-line-height-neg-2: 1;
	--font-line-height-neg-1: 1.3;
	--font-line-height-base: 1.5;
	
    --lwc-colorTextError : var(--color-text-input-error);
    --lwc-fontSizeSmall : var(--font-size-neg-2);
	--lwc-lineHeightButton: var(--font-line-height-base);
}

html, body {
	font-family: var(--font-primary) !important;
	font-size: var(--font-size-base) !important;
	line-height: var(--font-line-height-base);
	color: var(--color-text-default);
}

h1, .slds-scope h1 {
	font-family: var(--font-secondary);
	font-size: var(--font-size-7) !important;
	font-weight: 600 !important;
	line-height: var(--font-line-height-neg-2);
	letter-spacing: 0px;
	text-transform: uppercase;
	margin-bottom: .33rem !important;
}

h1.large, .slds-scope h1.large {
	font-family: var(--font-secondary);
	font-size: var(--font-size-9) !important;
	font-weight: 700 !important;
	line-height: var(--font-line-height-neg-2);
	letter-spacing: 1px;
	margin-bottom: .33rem !important;
}

h2, .slds-scope h2, .digits.large, .slds-scope .digits.large {
	font-family: var(--font-secondary);
	font-size: var(--font-size-5) !important;
	font-weight: 500 !important;
	line-height: var(--font-line-height-neg-1);
	letter-spacing: 0.6px;
}

h3, .slds-scope h3, .digits, .slds-scope .digits {
	font-family: var(--font-secondary);
	font-size: var(--font-size-4) !important;
	font-weight: 500 !important;
	line-height: var(--font-line-height-neg-1);
	letter-spacing: 0.4px;
}

h4, .slds-scope h4 {
	font-family: var(--font-secondary);
	font-size: var(--font-size-3) !important;
	font-weight: 500 !important;
	line-height: var(--font-line-height-neg-1);
	letter-spacing: .25px;
}

h5, .slds-scope h5 {
	font-family: var(--font-secondary);
	font-size: var(--font-size-2) !important;
	font-weight: 500 !important;
	line-height: var(--font-line-height-neg-1);
	letter-spacing: 0.3px;
}

h6, .slds-scope h6 {
	font-family: var(--font-secondary);
	font-size: var(--font-size-1) !important;
	font-weight: 500 !important;
	line-height: var(--font-line-height-neg-1);
	letter-spacing: 0px;
}

/* Will need to replace all instances of camel case throughout pages */
.text-lead, .leadParagraph, .slds-scope .text-lead {
	font-size: var(--font-size-2);
	font-weight: 200;
	letter-spacing: 0.5px;
}

.leadParagraph.large {
	font-size: var(--font-size-4);
	font-weight: 300;
	letter-spacing: 0.5px;
}

.tile-header {
	font-size: var(--font-size-2);
	font-weight: 800;
	letter-spacing: .2px;
}

.digits, .slds-scope .digits {
	color: var(--color-brand);
}

/* Will need to replace all instances of onDark with text-inverse-1 throughout pages */
.onDark, .text-inverse-1 {
	color: var(--color-text-inverse-1) !important;
}

.blockquote {
	border-left: 4px solid var(--color-bright-blue);
	color: var(--color-text-quote);
	font-size: var(--font-size-2);
	font-weight: 200;
	padding: 10px;
	margin: 20px;
}

.blockquote > .source {
	color:var(--color-text-quote-source);
	font-family: var(--font-secondary);
	font-size: var(--font-size-neg-1);
	font-weight: 600;
	text-transform: uppercase;
}

/* Accounts for labels in screen flows to be displayed correctly */
.field-label, label, 
.slds-checkbox .slds-checkbox__label .slds-form-element__label, 
.flowruntime-input-label .slds-form-element__label, 
.slds-form-element__label, 
.slds-radio .slds-form-element__label {
	color: var(--color-darker-gray);
	font-weight: 700;
	font-size: var(--font-size-base) !important;
	letter-spacing: 0;
	line-height: 18px;
	padding: 5px;
}

.form-field, .slds-scope input, .slds-scope select, .slds-scope textarea, .slds-input {
	font-weight: 400;
	font-size: var(--font-size-base) !important;
	height: 40px;
	border: 1px solid #AFB7BC;
	border-radius: 2px;
	background: #F0F9FD;
	text-align: center !important;
	vertical-align: middle !important;
}

.flowruntime-inline .slds-checkbox_faux {
	margin-top: .4rem;
}

/*page 19 - FORMS - Form Disabled*/
.form-field:disabled, 
.slds-scope .slds-input:disabled, 
.slds-input:disabled{
	border: 1px solid #DBE2E5;
	background: var(--color-disabled);
}

/*page 19 - FORMS - Form Active*/
.form-field:active,  
.slds-scope .slds-input:active,
.slds-input:active {
	border: 1px solid var(--color-bright-blue);
	background: #F4FAFD;
	color: var(--color-darker-gray);
}

/*page 19 - FORMS - Form Invalid*/
.form-field:invalid ,
.slds-scope .slds-input:invalid,
.slds-input:invalid {
	border: var(--color-border-feedback-error);
	background: var(--color-background-feedback-error);
	color: var(--color-text-feedback-error);
	letter-spacing: 0;
	line-height: 24px;
}

/*page 19 - FORMS - Form Error Text*/
.form-field-errorText {
	font-size: var(--font-size-neg-1);
	font-weight: 200;
	color: var(--color-text-feedback-error);
	letter-spacing: 0.2px;
}

/*page 22 - DIVIDERS - Horizontal Rule over White - Solid*/
hr.overWhiteSolid{
	border: 1px solid #595959;
	opacity: 0.14;
}

/*page 22 - DIVIDERS - Horizontal Rule over White - Dashed*/
hr.overWhiteDashed{
	border: 1px dashed #CCD9E0;
}

/*page 22 - DIVIDERS - Horizontal Rule over "Brand Blue" - Solid*/
hr.overBrandBlueSolid{
	border: 1px solid #fff;
	opacity: 0.34;
}

/*page 22 - DIVIDERS - Horizontal Rule over "Brand Blue" - Dashed*/
hr.overBrandBlueDashed{
	border: 1px dashed #CCD9E0;
}

/*page 22 - DIVIDERS - Horizontal Rule over Dark Gray - Solid*/
hr.overDarkGraySolid{
	border: 1px solid #fff;
	opacity: 0.24;
}

/*page 22 - DIVIDERS - Horizontal Rule over Dark Gray - Dashed*/
hr.overDarkGrayDashed{
	border: 1px dashed #63696E;
}

/*page 14 - Notifications - Global*/
.alert{
	letter-spacing: 0px;
	padding: 20px !important;
	border-radius: 0px !important;
}

/*page 14 - Notifications - Error*/
.alert-danger{
	background-color: var(--color-background-feedback-error);
	color: var(--color-text-feedback-error);
	box-shadow: inset 0 0 0 1px
	rgba(163,22,0,0.16);
}

/*page 14 - Notifications - Warning*/
.alert-warning {
	background-color: var(--color-background-feedback-warning);
	color: var(--color-text-feedback-warning);
	box-shadow: inset 0 0 0 1px
	rgba(99,46,0,0.16);
}

/*page 14 - Notifications - Success*/
.alert-success {
	background-color: var(--color-background-feedback-success);
	color: var(--color-text-feedback-success);
	box-shadow: inset 0 0 0 1px
	rgba(0,99,51,0.16);
}

/*page 14 - Notifications - Default*/
.alert-info {
	background-color: var(--color-background-feedback-info);
	color: var(--color-text-feedback-info);
	box-shadow: inset 0 0 0 1px
	rgba(0,62,114,0.16);
}


/* Button Styling -- Need to remove all non-SLDS classes throughout site */
.btn, .btn-sm,
.slds-scope button, 
.slds-scope input[type=button], 
.slds-scope input[type=reset], 
.slds-scope input[type=submit],
.slds-button,
.slds-button.slds-button_brand,
.slds-button.slds-button_outline-brand,
.slds-button.slds-button_neutral {
	font-size: var(--font-size-base);
	font-weight: 600;
	color:var(--color-text-inverse-1);
	width: auto;
	margin: 5px;
	border-radius: 3px;
	cursor: pointer;
	text-transform: uppercase;
	padding: 7px 25px;
	letter-spacing: 1px;
	text-wrap:auto;
	min-height: 2rem;
}

.btn.large, .slds-button.slds-button_brand.large {
	font-size: var(--font-size-1);
	font-weight: 600;
	padding: 15px 25px;
}

/*page 11 - Primary Buttons - Primary Button Over White - Default*/
.btn-primaryOverWhite, 
.btn-primary, 
.btn-default,
.slds-scope button, 
.slds-button.slds-button_brand {
	background: var(--color-brand);
	color:	var(--color-text-inverse-1);
	box-shadow: inset 0 0 0 2px var(--color-brand);
	min-width: 0;
}

/*page 11 - Primary Buttons - Primary Button Over White - Hover*/
/* Will need to replace instances of btn-primaryOverWhite*/
.btn-primaryOverWhite:hover, .btn-primary:hover,
.slds-scope button:hover , .slds-button.slds-button_brand:hover, .slds-scope .slds-button:hover{
	background: var(--color-dark-brand);
	color:	var(--color-text-inverse-1);
	box-shadow: inset 0 0 0 2px var(--color-dark-brand);
	cursor: pointer;
}

/*page 11 - Primary Buttons - Primary Button Over White - Active*/
.btn-primaryOverWhite:active, .btn-primary:active, .btn-default:active:active, 
.slds-button.slds-button_brand:active {
	background: var(--color-dark-brand);
	color: #FFF;
}

/*page 11 - Primary Buttons - Primary Button Over White - Focus*/
.btn-primaryOverWhite:focus, .btn-primary:focus, .btn-default:focus , 
.slds-scope button:focus, .slds-button.slds-button_brand:focus  {
	background: var(--color-dark-brand);
	color:	var(--color-text-inverse-1);
	box-shadow: inset 0 0 0 3px var(--color-bright-blue);
}

/*page 11 - Primary Buttons - Primary Button Over White - Disabled*/
.btn-primaryOverWhite[disabled], .btn-primary[disabled], 
.btn-default[disabled], .slds-scope button[disabled],
.slds-button.slds-button_brand[disabled]  {
	background: var(--color-disabled);
	box-shadow: none;
	color: #FFF;
	cursor: not-allowed;
}

/*page 12 - Secondary Buttons - Secondary Button Over White - Default*/
.btn-secondaryOverWhite, .btn-secondary, 
.slds-button.slds-button_outline-brand, .slds-button.slds-button_neutral  {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--color-brand);
	color: var(--color-brand);
	min-width: 0;

}

/*page 12 - Secondary Buttons - Secondary Button Over White - Hover*/
.btn-secondaryOverWhite:hover, .btn-secondary:hover, 
.slds-button.slds-button_outline-brand:hover, .slds-button.slds-button_neutral:hover, .slds-button.flow-button__BACK:hover {
	background: transparent;
	color: var(--color-dark-brand);
	box-shadow: inset 0 0 0 2px var(--color-dark-brand);
	cursor: pointer;
}

/*page 12 - Secondary Buttons - Secondary Button Over White - Active*/
.btn-secondaryOverWhite:active, .btn-secondary:active, 
.slds-button.slds-button_outline-brand:active, .slds-button.slds-button_neutral:active {
	background: transparent;
	color: var(--color-brand-black);
	box-shadow: inset 0 0 0 2px var(--color-brand-black);
	cursor: pointer;
}

/*page 12 - Secondary Buttons - Secondary Button Over White - Focus*/
.btn-secondaryOverWhite:focus, .btn-secondary:focus, 
.slds-button.slds-button_outline-brand:focus, .slds-button.slds-button_neutral:focus {
	background: transparent;
	color: var(--color-dark-brand);
	box-shadow: inset 0 0 0 3px var(--color-bright-blue);
}

/*page 12 - Secondary Buttons - Secondary Button Over White - Disabled*/
.btn-secondaryOverWhite[disabled], .btn-secondary[disabled], 
.slds-button.slds-button_outline-brand[disabled], .slds-button.slds-button_neutral[disabled] {
	color: #696969;
	box-shadow: inset 0 0 0 2px rgba(0,0,0,50);
	cursor: pointer;
}

/*page 21 - Tables - Default*/
table{
	/*border: 1px solid #DBE2E5;*/
	border-radius: 2px;
	padding: 20px;
}

/*page 21 - Tables - Default*/
th, .table-striped th{
	font-weight: 700;
	color: var(--color-darker-gray);
}

/*page 21 - Tables - Default*/
td, .table-striped td{
	color: var(--color-darker-gray);
}

/*page 21 - Tables - Striped*/
.table-striped{
	border: 1px solid #DBE2E5;
	border-radius: 2px;
	padding: 20px;
	background-color: #F6F7F9;
}

/*page 21 - Tables - Striped*/
.table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th {
	background-color: #FFF;
}

/*page 16 - Modals*/
.modal-content{
	border-radius: 0px;
}

/*page 16 - Modals*/
.modal-header{
	padding: 20px 30px;
}

/*page 16 - Modals*/
.modal-body{
	padding: 40px 30px;
}

/*page 16 - Modals*/
.modal-footer{
	margin-top: 0px;
	padding: 20px 30px 20px;
	text-align: right;
}

.slds-modal__close.slds-button{
	align-self: flex-end;
	background-color: transparent;
	width:	50px;
}

.slds-modal__close > .slds-button {
	color: var(--color-brand);
}

legend.slds-form-element__legend.slds-form-element__label {
    font-size: var(--font-size-1);
    font-family: var(--font-secondary);
}

/* Will need to replace all instances of "tiny" with "text-legal" throughout pages */
.tiny, .tiny *, .text-legal, .text-legal *{
	font-size: var(--font-line-height-neg-2);
	font-weight: 200;
	letter-spacing: 0px;
}

.panel-primary > .panel-heading {
	background-color: var(--color-brand);
	border-color: var(--color-brand);
	color: var(--color-text-inverse-1);
}

.flowruntime-inline .slds-checkbox_faux {
	margin-top: .4rem;
}

[kx-type="ripple"],
[kx-type="ripple"]::before,
[kx-type="ripple"]::after {
  animation: none !important;
  transition: none !important;
  background-image: none !important;
}