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

/* ACF Connect Stylesheet */
:root {
    /* ACF Primary Palette */
    --color-white: #FFF;
	--color-lightGray: #C8C8C8;
    --color-darkGray:#424242;
    --color-brandGold: #FFB21B;
    --color-brand:#D1414D;
	--color-brandBlue: #0078BD;

    --acfLightSlate: var(--color-lightGray);
    --acfSlate: var(--color-darkGray);
    --acfGold: var(--brandGold);
    --acfRed: var(--color-brand);
    --acfBlue: var(--color-brandBlue);

    /* ACF Secondary Palette */
    --color-lightBrand: #FDF5F6;
    --color-lightBlue: #F2F8FC;
    --color-brightBlue: #119AE8;
    --color-brandGreen: #29A82D;
    
    --acfLightRed: var(--color-lightBrand);
    --acfLightBlue: var(--color-lightBlue);
    --acfBrightBlue: var(--color-brightBlue);
    --acfGreen: var(--color-brandGreen);

    /* ACF Neutral Palette */
    --color-utilityGray: #F6F7F9;
	--color-mediumGray: #9A9B9C;
	--color-brandGray: #77787B;
	--color-darkestGray: #303132;
	--color-brandBlack: #111;
	--color-disabled: rgba(48, 49, 50, .30); /* Charcoal (Darkest Gray) at 30% opacity */

    --color-background-modal-overlay: var(--color-disabled);

    --utilityGrey: var(--color-utilityGray);
    --mediumGrey: var(--color-mediumGray);
    --gmfGrey: var(--color-brandGray);
    --charcoal: var(--color-darkestGray);
    --black: var(--color-brandBlack);

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

	/* GMF Feedback Palette - Background */
	--color-background-feedback-info: #E6F9FF;
	--color-background-feedback-success: #F2F9E6;
	--color-background-feedback-warning: #FFF9E7;
	--color-background-feedback-error: #FFE8E5;
    
    --defaultMsgBkgrnd: var(--color-background-feedback-info);
    --successMsgBkgrnd: var(--color-background-feedback-success);
    --warningMsgBkgrnd: var(--color-background-feedback-warning);
    --errorMsgBkgrnd: var(--color-background-feedback-error);

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

    --defaultMsgBorder: var(--color-border-feedback-info);
    --successMsgBorder: var(--color-border-feedback-success);
    --warningMsgBorder: var(--color-border-feedback-warning);
    --errorMsgBorder: var(--color-border-feedback-error);
	
	/* Dealer Dividend Tiers Palette */
	--color-dividends-tier-1: #B9B7B5;
	--color-dividends-tier-2: #EAB729;
	--color-dividends-tier-3: #54697E;
	--color-dividends-tier-4: #0072CE;

	/* Typography - General Pallete */
	--color-text-header: var(--color-charcoal);
	--color-text-header-alternate: var(--color-brandBlue);
	--color-text-default: var(--color-charcoal);
	--color-text-onDark: var(--color-white);

	/* Typography - Input Pallete*/
	--color-text-input: var(--color-brandGray);
	--color-text-input-placeholder: var(--color-mediumGray);
	--color-text-input-disabled: var(--color-disabled);
	--color-text-input-error: var(--color-text-feedback-error);

    --color-background-input: var(--color-lightGray);
    --color-background-input-error: var(--color-background-feedback-error);

    --color-border-input: var(--color-mediumGray);
    --color-border-input-error: var(--color-border-feedback-error);

	/* Links */
	--color-text-link: var(--color-brightBlue);
	--color-text-link-hover: var(--color-brandBlue);
	--color-text-link-active: var(--color-brandGray);
	--color-text-link-visited: var(--color-darkBlue);

    /* Buttons */
    /* Text colors */
    --color-text-button-primary: var(--color-brand);
    --color-text-button-primary-hover: var(--color-text-feedback-error);
    --color-text-button-primary-focus: var(--color-text-feedback-error);
    --color-text-button-primary-active: var(--color-text-feedback-error);
    --color-text-button-primary-disabled: var(--color-disabled);

    --color-text-button-secondary: var(--color-white);
    --color-text-button-secondary-hover: var(--color-white);
    --color-text-button-secondary-focus: var(--color-white);
    --color-text-button-secondary-active: var(--color-white);
    --color-text-button-secondary-disabled: var(--color-white);

    --border: 1px solid var(--color-lightGray);
    --border-on-light-brand: 1px solid var(--color-darkGray);
    --border-on-brand: 1px solid var(--color-white);
    --border-on-lightBlue: 1px solid var(--color-brandBlue); 
    --border-on-darkestGray: 1px solid var(--color-brandGray);

    /* Font Styles - Headers */
	/* |weight| |font-size|/|line-height| |font-style|*/
	--text-heading-1-large: 700 48px/1 "Overpass", Arial, sans-serif;
	--text-heading-1-small: 600 40px/1 "Overpass", Arial, sans-serif;
	--text-heading-2: 500 32px/1.3 "Overpass", Arial, sans-serif;
	--text-heading-3: 500 28px/1.3 "Overpass", Arial, sans-serif;
	--text-heading-4: 500 24px/1.3 "Overpass", Arial, sans-serif;
	--text-heading-5: 500 20px/1.3 "Overpass", Arial, sans-serif;
	--text-heading-6: 500 16px/1.3 "Overpass", Arial, sans-serif;
	--text-heading-tile: 800 20px/1.3 "Overpass", Arial, sans-serif;
	
	/* Font Styles - Body Copy */
	--text-lead-paragraph: 200 20px "Overpass", Arial, sans-serif;
	--text-body: 500 16px "Overpass", Arial, sans-serif;
	--text-label: 700 16px "Overpass", Arial, sans-serif;
	--text-input: 400 16px "Overpass", Arial, sans-serif;
	--text-link: var(--text-body);
	--text-quote: oblique 200 20px "Overpass", Arial, sans-serif;
	--text-quote-source: 700 14px "Overpass", Arial, sans-serif;
	--text-list: var(--text-body);
	--text-feedback: var(--text-body);
	--text-legal: 200 12px "Overpass", Arial, sans-serif;
	--text-nav: 400 16px "Overpass", Arial, sans-serif;
	--text-button: 600 16px "Overpass", Arial, sans-serif;
	--text-button-large: 600 18px "Overpass", Arial, sans-serif;
	--text-table-header: 700 16px "Overpass", Arial, sans-serif;
	--text-table-data: var(--text-body);
	--text-numerical: var(--text-heading-3);
	--text-numerical-large: var(--text-heading-1-small);
	--text-tab-header-1: 600 18px "Overpass", Arial, sans-serif;
	--text-tab-header-2: 450 16px "Overpass", Arial, sans-serif;

}

/* Tag Updates */
html {
    background-color: var(--color-utilityGray);
}

body {
    background-color: var(--color-utilityGray) !important;
    font: var(--text-body);
    min-height: calc(100vh - 150px);
}

h1,
h2,
h3,
h4,
h5,
p, 
.forceCommunityRichText h1,
.forceCommunityRichText h2,
.forceCommunityRichText h3,
.forceCommunityRichText h4,
.forceCommunityRichText h5,
.forceCommunityRichText p {
    color: var(--color-text-default);
}

h1, .forceCommunityRichText h1{
    font:var(--text-heading-1-large);
    text-transform: uppercase;
}

h1.small, .forceCommunityRichText h1.small {
    font: var(--text-heading-1-small);
}

h2, .forceCommunityRichText h2 {
    font: var(--text-heading-2);
}

h2.modalHeader, .forceCommunityRichText h2.modalHeader {
    color: var(--color-white);
    text-align: left;
}

h3, .forceCommunityRichText h3 {
    font: var(--text-heading-3);
}

h4, .forceCommunityRichText h4  {
    font: var(--text-heading-4);
}

h5, .forceCommunityRichText h5 {
    font: var(--text-heading-5);
}

h6, .forceCommunityRichText h6 {
    font: var(--text-heading-6);
}

p, .forceCommunityRichText p {
    font: var(--text-body);
}

.onACFBlue,
.onACFBlue a,
.onACFRed,
.onACFRed a,
.onDark,
.onDark a {
    color: var(--color-white) !important;
}

.leadParagraph {
    font: var(--text-lead-paragraph);
}

.tiny {
    font: var(--text-legal);
}

.slds-button {
	color: var(--color-text-default);
    margin: 5px;
}

.uiButton,
a.uiButton,
.slds-button_brand, 
.forceCommunityRichText .uiButton,
.forceCommunityRichText a.uiButton,
.salesforceIdentityForgotPassword2.uiButton {
    background-color: #D1414D;
    border: none;
    border-radius: 25px;
    color: white;
    font: var(--text-button);
    height: 50px;
    margin: 5px;
    padding: 15px 25px;
    text-transform: capitalize;
    text-decoration: none;
}

.uiButton:hover,
.uiButton:active,
a.uiButton:hover,
a.uiButton:active,
a.uiButton:focus,
.uiButton:focus,
.forceCommunityRichText a.uiButton:hover,
.forceCommunityRichText a.uiButton:active,
.forceCommunityRichText a.uiButton:focus,
.salesforceIdentityForgotPassword2.uiButton:hover,
.salesforceIdentityForgotPassword2.uiButton:focus,
.salesforceIdentityForgotPassword2.uiButton:active {
    background-color: #A31000;
    color: white;
    text-decoration: none;
}
.slds-button_brand:focus,
.slds-button_brand:active,
.slds-button_brand:hover,
.forceCommunityRichText .slds-button_brand:focus,
.forceCommunityRichText .slds-button_brand:active,
.forceCommunityRichText .slds-button_brand:hover,
.salesforceIdentityForgotPassword2.uiButton:hover {
    background-color: #A31000;
    color: white;
    text-decoration: none;
}

.uiButton:active, .forceCommunityRichText .uiButton:active,
.forceCommunityRichText a.uiButton:active,
a.uiButton:active,
.slds-button_brand:active,
.forceCommunityRichText .slds-button_brand:active,
.salesforceIdentityForgotPassword2.uiButton:active {
    border: 2px solid #119AE8;
}

.uiButton[disabled],
a.uiButton[disabled],
.slds-button_brand[disabled],
.salesforceIdentityForgotPassword2.uiButton[disabled],
.uiButton[disabled]:hover,
a.uiButton[disabled]:hover,
.slds-button_brand[disabled]:hover,
.salesforceIdentityForgotPassword2.uiButton[disabled]:hover {
    background-color: rgba(66, 66, 66, .30) !important;
    color: white !important;
    text-decoration: none !important;
}

.uiButton.smallPrimary,
.uiButton.secondary,
.uiButton.tertiary,
a.uiButton.smallPrimary,
a.uiButton.secondary,
a.uiButton.tertiary,
.slds-button_brand,
.slds-button_neutral,
.slds-button_outline-brand {
    border-radius: 15px;
    color: white;
    height: 30px;
    padding: 5px 20px;
    text-decoration: none;
}

.uiButton.secondary,
a.uiButton.secondary,
.slds-button_neutral,
.slds-button_outline-brand {
    background-color: transparent;
    border: 2px solid #D1414D;
    color: #D1414D;
    text-decoration: none;
}

.uiButton.secondary:hover,
a.uiButton.secondary:hover,
.slds-button_neutral:hover,
.slds-button_outline-brand:hover,
.forceCommunityRichText a.uiButton.secondary:hover {
    background-color: transparent;
    border-color: #A31000;
    color: #A31000;
    text-decoration: none;
}

.uiButton.secondary:active,
a.uiButton.secondary:active,
.uiButton.secondary:focus,
a.uiButton.secondary:focus,
.slds-button_neutral:focus,
.slds-button_neutral:active,
.slds-button_outline-brand:focus,
.slds-button_outline-brand:active,
.forceCommunityRichText a.uiButton.secondary:focus,
.forceCommunityRichText a.uiButton.secondary:active {
    background-color: transparent;
    border-color: #119AE8;
    color: #A31000;
    text-decoration: none;
}

.uiButton.secondary[disabled],
a.uiButton.secondary[disabled],
.slds-button_neutral[disabled],
.slds-button_outline-brand[disabled],
.forceCommunityRichText a.uiButton.secondary[disabled],
.uiButton.secondary[disabled]::before,
a.uiButton.secondary[disabled]:hover,
.slds-button_neutral[disabled]:hover,
.slds-button_outline-brand[disabled]:hover,
.forceCommunityRichText a.uiButton.secondary[disabled]:hover {
    border-color: rgba(66, 66, 66, .30) !important;
    color: rgba(66, 66, 66, .30) !important;
    text-decoration: none !important;
}

.uiButton.tertiary,
a.uiButton.tertiary,
.forceCommunityRichText a.uiButton.tertiary {
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: #D1414D;
    font-size: 13px;
    height: 27px;
    padding: 10px 25px;
    text-decoration: none;
}

.uiButton.tertiary:hover,
a.uiButton.tertiary:hover,
.forceCommunityRichText a.uiButton.tertiary:hover {
    color: #77787B;
    text-decoration: none;
}

.uiButton.tertiary:active,
a.uiButton.tertiary:active,
.uiButton.tertiary:focus,
a.uiButton.tertiary:focus,
.forceCommunityRichText a.uiButton.tertiary:active,
.forceCommunityRichText a.uiButton.tertiary:focus {
    border-bottom: 4px solid #119AE8;
    text-decoration: none;
}

.uiButton.tertiary[disabled],
a.uiButton[disabled],
.forceCommunityRichText a.uiButton.tertiary[disabled] {
    color: var(--color-disabled);
}

button.modalHeader {
    background-color: transparent;
    border: none;
    color: white;
}

label,
.slds-form-element__label {
    font: var(--text-label);
    margin-right: 5px;
    display: inline;
}

input[type="text"],
select,
.form-control {
    text-align: left;
    height: 40px !important;
    padding: 15px 15px 5px;
    width: 100%;
    box-sizing: border-box !important;
    border: 1px solid var(--acfLightSlate);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #FFF;
    font: var(--text-input);
    color: var(--charcoal);
    -webkit-transition: color 0.2s linear, opacity 0.2s linear, border-color 0.2s linear, background-color 0.2s linear !important;
    -moz-transition: color 0.2s linear, opacity 0.2s linear, border-color 0.2s linear, background-color 0.2s linear !important;
    -o-transition: color 0.2s linear, opacity 0.2s linear, border-color 0.2s linear, background-color 0.2s linear !important;
    transition: color 0.2s linear, opacity 0.2s linear, border-color 0.2s linear, background-color 0.2s linear !important;
}

input[type="text"].approval-center,
select.approval-center ,
.form-control.approval-center  {
    text-align: right;
    padding-top: 5px;
    width: 90%;
}

input[type="text"]::placeholder,
select::placeholder,
.form-control::placeholder,
input[type="text"]:active::placeholder,
input[type="text"]:focus::placeholder {
    color: var(--acfLightSlate);
}

input[type="text"]:active,
input[type="text"]:focus,
.slds-input:active,
.slds-input:focus {
    border: 1px solid var(--acfBrightBlue) !important;
    background-color: var(--acfLightBlue) !important;
    color: var(--acfSlate) !important;
}

input[disabled] {
    border: none;
    background: var(--acfLightSlate) !important;
    color: var(--gmfGray);
    cursor: default !important;
}

input[disabled]::placeholder {
    color: var(--mediumGray);
}

input.has-error,
.slds-input.has-error {
    background-color: var(--errorMsgBkgrnd);
    border-color: var(--errorMsgBorder);
    box-shadow: none;
    color: var(--gmfGray);
}

input.has-error::placeholder {
    color: var(--errorMsg);
}

.slds-has-error .slds-input {
    background-color: var(--errorMsgBkgrnd);
    border-color: var(--errorMsgBorder);
    box-shadow: none;
    color: var(--gmfGray);
}

.slds-has-error .slds-input::placeholder {
    color: var(--errorMsg);
}

.acfFooter {
    background-color: white;
    height: 200px;
}

.footer-contents {
    margin: auto;
    padding-top: 50px;
}

.forceListViewSettingsMenu {
    display: none;
}

table>thead>tr>th {
    border: none;
}

tr:hover,
tr:focus,
.slds-table:not(.slds-no-row-hover) tbody tr:hover>td,
.slds-table:not(.slds-no-row-hover) tbody tr:focus>td,
.slds-table:not(.slds-no-row-hover) tbody tr:hover>th,
.slds-table:not(.slds-no-row-hover) tbody tr:focus>th {
    background-color: var(--acfLightRed);
}

.digits {
    font: var(--text-numerical-large);
}

.slds-table_bordered {
    border-collapse: separate;
    border-top: 1px solid #C8C8C8;
    border-bottom: 1px solid #C8C8C8;

}

.slds-table_bordered tbody td,
.slds-table_bordered tbody th {
    border-top: 1px solid #C8C8C8;
}

.slds-card {
    border: none !important;
}

.forceCommunityRecordListDesktop .slds-page-header {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

@media only screen and (min-width: 64.0625em) {
    .forceCommunityRecordHomeTabs .recordHomePrimaryContent {
        width: 100% !important;
    }
}

.ui-widget {
    margin-bottom: 0 !important;
}

.slds-backdrop {
    background: var(--color-background-modal-overlay);
}

.slds-modal__header {
    background-color: var(--acfRed);
    border: none;
    color: white;
    text-align: left;
}

.slds-modal__footer {
    border: none;
}

.slds-header-with-logo {
    background-color: white;
    border: none;
    color: var(--color-text-default);
    text-align: left;
}

.smallModal,
.mediumModal,
.largeModal {
    min-width: none;
    max-width: none;
}

.smallModal {
    width: 500px;
}

.mediumModal {
    width: 700px;
}

.largeModal {
    width: 900px;
}

.slides ul>li {
    list-style: none;
}

.slds-avatar > img {
    height: 6rem;
    width: 6rem;
}

.ui-widget,
.cb-section_column>div,
.forceCommunityHtmlBlock,
.uiOutputRichText,
.actualNode {
    height: 100%;
}

.slds-modal__close,
.slds-modal__close:hover,
.slds-modal__close:focus,
.slds-modal__close:active {
    background-color: var(--color-white);
}