//*================================================== 
//* NextGen Branding Variables - Version 1.90.500
//==================================================*/


//* Table of contents
//================================================== 
//	- Fonts
//	- Typography
//	- Graphics
//	- Base Settings
//	- Desktop Navigation
//	- Buttons
//	- Forms
//	- Modules
//	- Modals
//	- Icons
//	- Miscellaneous
//	- Page Names
//*/


//**************************************************************************
// NEW FONTS - Use the below code as a guideline to install new fonts. 
// Follow this format and file path to add new WOFF fonts to the application. 
// Only the .WOFF format is recognized by all browsers.
// **************************************************************************/
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url(App_Themes/Theme5/branding/fonts/roboto/roboto.woff) format('woff'), 
	url(App_Themes/Theme5/branding/fonts/roboto/roboto.woff2) format('woff2');
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	src: url(App_Themes/Theme5/branding/fonts/roboto/roboto-bold.woff) format('woff'), 
	url(App_Themes/Theme5/branding/fonts/roboto/roboto-bold.woff2) format('woff2');
}

@font-face {
	font-family: 'RobotoCondensed';
	font-style: normal;
	font-weight: 400;
	src: url(App_Themes/Theme5/branding/fonts/roboto/robotocondensed.woff) format('woff'), 
	url(App_Themes/Theme5/branding/fonts/roboto/robotocondensed.woff2) format('woff2');
}

@font-face {
	font-family: 'RobotoCondensed';
	font-style: normal;
	font-weight: 700;
	src: url(App_Themes/Theme5/branding/fonts/roboto/robotocondensed_bold.woff) format('woff'), 
	url(App_Themes/Theme5/branding/fonts/roboto/robotocondensed_bold.woff2) format('woff2');
}




//**************************************************************************************************************************
//****************************************************** TYPOGRAPHY *********************************************************
//*************************************************************************************************************************/
//*==================================================
// Typography (Main Body Fonts)
//==================================================*/
$primary-font-family: "Roboto", sans-serif, arial; 
//* ALSO AVAILABLE: ApexNew, Brandon, Cabin, Noto Serif, Futura, Georgia, Gotham Book, GothamBold, Lato, Montserrat, Museo, OpenSans, Montserrat, Raleway, Roboto, Roboto Slab, RobotoCondensed, Rubik, Source Sans */
$primary-font-weight: normal !default; //* main application font weight */

//*==================================================
// Typography (Module Heading Fonts)
//==================================================*/
$module-title-font-family: "RobotoCondensed", sans-serif, arial; 
//* ALSO AVAILABLE: ApexNew, Brandon, Cabin, Noto Serif, Futura, Georgia, Gotham Book, GothamBold, Lato, Montserrat, Museo, OpenSans, Montserrat, Raleway, Roboto, Roboto Slab, RobotoCondensed, Rubik, Source Sans */
$module-title-font-weight: $primary-font-weight !default; //* font weight for module titles */

//*==================================================
// Typography (Primary Navigation Fonts)
//==================================================*/
$navigation-font-family: "RobotoCondensed", sans-serif, arial; 
//* ALSO AVAILABLE: ApexNew, Brandon, Cabin, Noto Serif, Futura, Georgia, Gotham Book, GothamBold, Lato, Montserrat, Museo, OpenSans, Montserrat, Raleway, Roboto, Roboto Slab, RobotoCondensed, Rubik, Source Sans */
$navigation-font-weight: $primary-font-weight !default; //* font weight for navigation menus */

//*==================================================
// Fonts
//==================================================*/
$font-size-base: 1rem;
$font-size-paragraph: 0.875rem;
$h1-font-size: $font-size-base * 1.875;
$h1-font-size-small: $font-size-base * 1.4375;
$h2-font-size: $font-size-base * 1.5;
$h2-font-size-small: $font-size-base * 1.3125;
$h3-font-size: $font-size-base * 1.25;
$h3-font-size-small: $font-size-base * 1.125;
$h4-font-size: $font-size-base * 1;
$h5-font-size: $font-size-base * 0.875;
$h6-font-size: $font-size-base;
$font-weight-semi-bold: 600;
$font-weight-medium: 400;
$font-weight-normal: 200;
$icon-font-size: 24px;
$inline-icon-font-size: 20px;
$initials-font-size: 0.75rem; //* font size for the users initials */
$initials-font-size-large: 30px; //* font size for user initials in profile picture module */
$page-actions-font-size: 0.875rem; //* font size for the page actions | users name | help | logout */




//**************************************************************************************************************************
//******************************************************** GRAPHICS *********************************************************
//*************************************************************************************************************************/
//*==================================================
// Logos
//==================================================*/
$logo-header-small-height: 41px;
$logo-header-small-width: 81px;
$logo-header-large-height: 65px;
$logo-header-large-width: 129px;
$logo-footer-small-height: 29px;
$logo-footer-small-width: 58px;
$logo-footer-large-height: 33px;
$logo-footer-large-width: 168px;
$logo-signin-height: 70px !default; //* Logo height in Signin module */
$logo-signin-width: 245px !default; //* Logo width in Signin module */
$profile-image-size-small: 100px;
$profile-image-size-medium: 150px;
$profile-image-header-small: 28px;
$profile-image-header-medium: 48px;

//*==================================================
// Background Image (Desktop)
//==================================================*/

$page-background-image: #f5f5f5;

//*==================================================
// Backgrounds
//==================================================*/
$bg-primary-color: #ffffff; //* Module background color */
$bg-secondary-color: #f5f5f5; //* Footer background color | Signin Initials background color */
$bg-panels-color: rgba($fi-primary-color, 0.05); //* Expandable containers background color */
$bg-image-view-color: #424242; //* Image viewer background color */
$bg-supporting-color: #fafafa; //* Background color for Account Overview Module */




//**************************************************************************************************************************
//*************************************************** BASE SETTINGS *********************************************************
//*************************************************************************************************************************/
//*==================================================
// Alerts And Notifications
//==================================================*/
$notification-container-width: 600px;
$fi-success-color: #3b7b32;
$fi-info-color: #3966c3;
$fi-warning-color: #f3b823;
$fi-danger-color: #dd3435;
$fi-disabled-color: #949494;
$shadow-color: #bfbfbf; //* Notification container box shadow color */

//*==================================================
// Line Heights
//==================================================*/
$base-line-height: 1.5rem;
$relative-line-height: 1.8em;
$initials-line-height: $base-line-height;
$label-line-height: 34px;
$legacy-base-line-height: 34px;
$initials-line-height-large: 90px;

//*==================================================
// Text Colors
//==================================================*/
$text-primary-color: #212121; //* Currency | Main Text */
$text-secondary-color: #424242; //* Footer Text Colors | Subtexts | Slider Headers */
$text-disabled-color: $fi-disabled-color; //* Disabled text color */
$body-color: $text-primary-color; //* Header Text Colors | Available Balance Currency | Slider Subtext */
$fi-primary-color: #17874f; //* Account Summary Account Names */
$fi-primary-contrast-color: #ffffff; //* Navigation Font | Page Header Font with "Log Out" Text */
$fi-secondary-color: #4f9c40; //* Desktop footer border top */
$theme-colors: ( "primary": $fi-primary-color, "secondary": $fi-secondary-color, "success": $fi-success-color, "info": $fi-info-color, "warning": $fi-warning-color, "danger": $fi-danger-color );
$high-contrast-outline-color: #bf0fff;
$account-summary-account-nickname: $fi-primary-color;

//*==================================================
// Page
//==================================================*/
$page-content-left-right-padding: 24px;
$page-content-max-width: 1280px; //* Overall Width Of Desktop Site */
$extra-large-media-page-content-max-width: calc(#{$page-content-max-width} - #{$page-content-left-right-padding});

//*==================================================
// Media Query Sizes
//==================================================*/
$media-small: $media-small-px * 1px;
$media-medium: $media-medium-px * 1px;
$media-large: $media-large-px * 1px;
$media-extra-large: $media-extra-large-px * 1px;

//*==================================================
// Links
//==================================================*/
$link-height: 2.125rem; //* Height of links */
$link-font-size: 0.875rem; //* Font size of links */
$link-font-weight: $font-weight-medium; //* Font weight of links */
$link-line-height: 1.5rem; //* Line height of links */
$link-text-color: $fi-primary-color; //* Plain Text Links */
$link-active-text-color: $fi-secondary-color; //* MOBILE Footer Ribbon Border Active Color */

//*==================================================
// Borders
//==================================================*/
$border-primary-color: #757575; //* Outer Border of Calendars | MOBILE Border Under Header | MOBILE Border Under Module Titles | MOBILE Border Above Footer Ribbon */
$border-secondary-color: #e0e0e0; //* DESKTOP Border Under Module Titles | Border On Top Of Account Details Modules | Border On Admin Modules */
$border-supporting-color: #bdbdbd; //* DESKTOP Border Around Submenu Navigation | MOBILE Line Beneath Navigation Header | MOBILE Line Above Logout Footer */
$border-radius: 2px;

//*==================================================
// Web Connect (To Display The Download Icons And Text) 
//==================================================*/
$webconnect-show-money: block; //* Change "block" to "none" to hide text */
$webconnect-show-quickbooks: block; //* Change "block" to "none" to hide text */
$webconnect-show-quicken: block; //* Change "block" to "none" to hide text */

//*==================================================
// Footer Controls
//==================================================*/
$footer-background-color: #E6E6E6; //* Background color of the page footer */
$footer-font-size: 0.75rem; //* Font size for footer text */
$footer-icon-primary-color: #666666;
$footer-icon-secondary-color: $footer-background-color;
$footer-text-color: #666666; //* color of the footer text */
$footer-top-border: 2px solid #E6E6E6; //* color and style of the footer top border */

//*==================================================
// Avatar
//==================================================*/
$avatar-background-color: #17874f;
$avatar-text-color: #ffffff;
$mobile-avatar-text-color: #212121 !default;
$mobile-avatar-background-color: #ffffff !default;




//**************************************************************************************************************************
//****************************************************** DESKTOP NAVIGATION *************************************************
//*************************************************************************************************************************/
//*==================================================
// Primary Navigation Bar (Beneath The Lefthand Logo)
//==================================================*/
$navigation-header-background-color: #ffffff; //* Background color of the main navigation bar */
$desktop-navigation-active-color: $fi-primary-color; //* Background Hover color of dropdowns on the main navigation bar */
$desktop-navigation-active-text-color: #ffffff; //* Text color on the main navigation bar for active page */
$desktop-navigation-active-item-bottom-border: 3px solid $desktop-navigation-active-text-color;
$desktop-navigation-background-color: #f5f5f5; //* Background color of dropdowns on the main navigation bar */
$desktop-navigation-border-color: $border-supporting-color;
$desktop-navigation-border: 1px solid #bdbdbd;
$desktop-navigation-font-size: 0.875rem;
$desktop-navigation-header-line-height: 2.65rem;
$desktop-navigation-line-height: $base-line-height;
$desktop-navigation-text-case: none;
$desktop-navigation-text-color: #212121; //* Text color on dropdowns on the main navigation bar */
$desktop-navigation-header-text-color: #ffffff; //* Text color on the main navigation bar */
$desktop-navigation-transition: max-height 50ms ease-in-out, opacity 50ms linear;

//*==================================================
// Profile Navigation Bar (Beneath The Username)
//==================================================*/
$expandable-navigation-active-color: $fi-primary-color; //* Hover background color of dropdowns on the profile navigation bar */
$expandable-navigation-active-text-color: $fi-primary-contrast-color; //* Hover text color of dropdowns on the profile navigation bar */
$expandable-navigation-background-color: #f5f5f5; //* Background color of dropdowns on the profile navigation bar */
$expandable-navigation-border: 1px solid $border-supporting-color;
$expandable-navigation-expanded-background-color: #e0e0e0;
$expandable-navigation-expanded-border: 1px solid #949494;
$expandable-navigation-expanded-text-color: $text-primary-color; //* Text color on second-level submenu items */
$expandable-navigation-icon-color: $text-secondary-color; //* Icon color on submenu items and also mobile icon color */
$expandable-navigation-font-size: 0.875rem;
$expandable-navigation-mobile-font-size: 1rem;
$expandable-navigation-line-height: $base-line-height;
$expandable-navigation-text-case: none;
$expandable-navigation-text-color: $text-primary-color; //* Text color on first-level submenu items */
$expandable-navigation-transition: max-height 250ms ease-in-out, opacity 300ms linear;

//*==================================================
// Ribbon Menu
//==================================================*/
//   Example 1
//   This will hide the fifth menu item when the page width is less than 330px.
//   $ribbon-auto-hide-items: (("item-number": 5, "media-min-width-px": 330),)
//   Example 2
//   This will hide the 5th menu item when the page width is less than 330px
//   and will hide the 4th menu item when the page width is less than 270px.
//   $ribbon-auto-hide-items: (("item-number": 5, "media-min-width-px": 330), ("item-number": 4, "media-min-width-px": 270),)
//   Example 3
//   This does nothing. All the menu item will be visible.
//   $ribbon-auto-hide-items: null;
$ribbon-auto-hide-items: null;




//**************************************************************************************************************************
//********************************************************* BUTTONS *********************************************************
//*************************************************************************************************************************/
//*==================================================
// Buttons
//==================================================*/
$btn-min-width: 136px;
$btn-min-height: 2.5rem;
$btn-font-size: 0.875rem;
$btn-font-weight: $font-weight-medium;
$btn-border-radius: 22px;
$btn-container-spacing: 24px;
$btn-touch-size: 44px;
$btn-line-height: $base-line-height;

//*==================================================
// Primary Buttons
//==================================================*/
$btn-primary-color: $fi-primary-color; //* Background color of Primary Buttons */
$btn-primary-text-color: #ffffff; //* Text color of Primary Buttons */
$btn-primary-border-color: $btn-primary-color; //* Border color of Primary Buttons */
$btn-primary-disabled-color: $fi-disabled-color; //* Background color of disabled Primary Buttons */
$btn-primary-disabled-text-color: #f5f5f5; //* Text color of disabled Primary Buttons */
$btn-primary-disabled-border-color: $btn-primary-disabled-color; //* Border color of disabled Primary Buttons */
$btn-primary-hover-color: darken($fi-primary-color, 20); //* Background color of Primary Buttons on hover */
$btn-primary-active-color: lighten($fi-primary-color, 20); //* Background color of Primary Buttons when active */

//*==================================================
//  Secondary Buttons
//==================================================*/
$btn-secondary-color: $fi-primary-contrast-color; //* Background color of Secondary Buttons */
$btn-secondary-text-color: $fi-primary-color; //* Text color of Secondary Buttons */
$btn-secondary-border-color: $btn-secondary-text-color; //* Border color of Secondary Buttons */
$btn-secondary-disabled-color: #f5f5f5; //* Background color of disabled Secondary Buttons */
$btn-secondary-disabled-text-color: $fi-disabled-color; //* Text color of disabled Secondary Buttons */
$btn-secondary-disabled-border-color: $btn-secondary-disabled-text-color; //* Border color of disabled Secondary Buttons */
$btn-secondary-hover-color: darken($fi-primary-contrast-color, 20); //* Background color of Secondary Buttons on hover */
$btn-secondary-hover-text-color: darken($fi-primary-color, 20); //* Text color of Secondary Buttons on hover */
$btn-secondary-active-color: lighten($fi-primary-color, 20); //* Background color of Secondary Buttons when active */
$btn-secondary-active-text-color: $fi-primary-contrast-color; //* Text color of Secondary Buttons when active */
$btn-secondary-active-border-color: lighten($fi-primary-color, 20); //* Border color of Secondary Buttons when active */




//**************************************************************************************************************************
//*********************************************************** FORMS *********************************************************
//*************************************************************************************************************************/
//*==================================================
// Form Fields
//==================================================*/
$field-height: 2.5rem;
$field-border-color: #949494; //* Border Lines On Form Fields */
$field-bg-color: #ffffff; //* Fields On Forms */
$field-disabled-bg-color: #f5f5f5;
$field-disabled-border-color: $fi-disabled-color;
$field-max-width: 395px;
$field-height: 40px;
$field-border-radius: $border-radius;
$field-font-size: 0.875rem;
$field-element-spacing: 12px;
$field-validation-message-icon-size: 1rem;
$field-validation-message-font-size: $field-font-size;

//*==================================================
// Messagebox Textarea
//==================================================*/
$field-textarea-max-width: 600px;

//*==================================================
// Inputs
//==================================================*/
$input-color: #212121; //* Randomly Changes Some Dropdown Text, But Not All */
$input-placeholder-text-color: #757575;

//*==================================================
// Dropdowns
//==================================================*/
$dropdown-hover-color: $fi-primary-color; //* Color Of Background On Dropdown Hovers */
$dropdown-hover-text-color: $fi-primary-contrast-color; //* Color Of Text On Dropdown Hovers */
$dropdown-selected-color: $fi-primary-color; //* Color Of Background On Dropdown Selected */
$dropdown-selected-text-color: $fi-primary-contrast-color; //* Color Of Text On Dropdown Selected */




//**************************************************************************************************************************
//********************************************************* MODULES *********************************************************
//*************************************************************************************************************************/
//*==================================================
// Module Settings
//==================================================*/
$module-container-shadow: 0 0 8px 0 #9e9e9e7d; //* Drop Shadows On Modules */
$module-border: none; //* Border style and color for modules */
$module-border-radius: 6px; //* Border radius for modules */
$module-title-color: #212121; //* Color for module titles */
$padding-extra-large: 36px;
$padding-large: 24px;
$padding-medium: 16px;
$padding-small: 12px;




//**************************************************************************************************************************
//********************************************************* MODALS *********************************************************
//*************************************************************************************************************************/
//*==================================================
// Modal Headers (e.g. Help Popup)
//==================================================*/
$modal-title-bg-color: $fi-primary-color; //* Title bar background color */
$modal-title-border-color: $fi-primary-color; //* Title bar border color */
$modal-title-text-color: $fi-primary-contrast-color; //* Title bar text color */

//*==================================================
// Modal Settings
//==================================================*/
$modal-width: 400px; //* Width for modal-dialog and modal-prompt-dialog in medium and wide views  */
$modal-transition: opacity 0.15s linear; //* Fades in when it opens and fades out when it closes */
$modal-dialog-transition: all 350ms ease-in-out; //* Slides down when modal opens and slides up when modal closes */
$container-transition: 350ms ease-in-out;
$expandable-container-transition: max-height $container-transition;
$expandable-container-transition-fast: max-height 150ms ease-in-out;




//**************************************************************************************************************************
//*********************************************************** ICONS *********************************************************
//*************************************************************************************************************************/
//*==================================================
// Icon Colors (Desktop)
//==================================================*/
$icon-primary-color: #424242; //* Open Carats On Accounts | Dollar Signs | Close "X" On Expandable Containers */
$icon-disabled-color: $fi-disabled-color;
$icon-download-color: $link-text-color;
$dropdown-icon-color: $icon-primary-color;
$square-icon-dimensions: 24px;

//*==================================================
// Icon Expand/Collapse
//==================================================*/
$icon-expand-collapse-height: $square-icon-dimensions;
$icon-expand-collapse-width: $square-icon-dimensions;

//*==================================================
// Material Icons
//==================================================*/
$icon-accounts: "account_balance_wallet";
$icon-ach: "account_balance";
$icon-admin: "supervisor_account";
$icon-alerts: "notifications";
$icon-arrow-back: "arrow_back_ios";
$icon-block: "block";
$icon-calendar: "event";
$icon-camera: "camera";
$icon-camera-alt: "camera_alt";
$icon-cards: "credit_card";
$icon-chat: "forum";
$icon-check: "Check.svg";
$icon-chevron-left: "chevron_left";
$icon-chevron-right: "chevron_right";
$icon-chevron-up: "expand_less";
$icon-close: "close";
$icon-collapse: "expand_more";
$icon-expand: "chevron_right";
$icon-danger: "warning";
$icon-deposits: "camera_alt";
$icon-dollar-sign: "attach_money";
$icon-double-chevron-left: "DoubleChevronLeft.svg"; 
$icon-double-chevron-right: "DoubleChevronRight.svg"; 
$icon-download: "get_app";
$icon-edit: "edit";
$icon-equal-housing: "equal-housing-lender.svg";
$icon-extract: "import_export";
$icon-federally-insured: "ncua-logo-variable.svg";
$icon-file-download: "file_download";
$icon-help: "help";
$icon-implementation: "build";
$icon-info: "info";
$icon-logo: "Logo.svg";
$icon-messages: "email";
$icon-navbar-menu: "menu";
$icon-operations: "account_balance";
$icon-pay-a-person: "people";
$icon-payments: "local_atm";
$icon-pending: "access_time";
$icon-profile: "account_circle";
$icon-radio-button-checked: "radio_button_checked";
$icon-radio-button-unchecked: "radio_button_unchecked";
$icon-report: "description";
$icon-search: "search";
$icon-services: "headset_mic";
$icon-settings: "settings";
$icon-spending: "face";
$icon-statements: "receipt";
$icon-success: "check_circle";
$icon-transfers: "swap_horiz";
$icon-trash: "delete_forever";
$icon-warning: "info";
$icon-wires: "Wires.svg";
$icon-zelle: "zelle.svg";
$icon-zoom-in: "zoom_in";
$icon-zoom-out: "zoom_out";




//**************************************************************************************************************************
//********************************************************** MISCELLANEOUS **************************************************
//*************************************************************************************************************************/
//*==================================================
// Expandable Containers (e.g. Search Boxes)
//==================================================*/
$expandable-container-title-color: #000000; //* Title Text On Expandable Containers */
$expandable-container-default-padding: $padding-large;

//*==================================================
// Calendar
//==================================================*/
$calendar-today-color: $fi-primary-color; //* Color of todays date */
$calendar-active-date-color: $fi-primary-color; //* Selected Date Background Color */
$calendar-active-date-text-color: $fi-primary-contrast-color; //* Selected Date Text Color */
$calendar-paired-date-color: #ffffff; //* Estimated Delivery Date Background Color */
$calendar-paired-date-text-color: #212121; //* Estimated Delivery Date Text Color */
$calendar-paired-date-border-color: $fi-primary-color; //* Estimated Delivery Date Border Color */
$calendar-date-hover-color: #9e9e9e; //* Background Color On Hover */
$calendar-date-hover-text-color: #212121; //* Text Color On Hover */
$calendar-date-text-color: #212121; //* Text color of calendar dates */
$calendar-selected-date-color: $fi-primary-color; //* Selected Date Background Color When Hovering Other Dates */
$calendar-selected-date-text-color: $fi-primary-contrast-color; //* Selected Date Text Color When Hovering Other Dates */
$calendar-disabled-date-color: #bdbdbd; //* Text Color Of Days Before Today */
$calendar-icon-color: #757575; //* Color Of Icon In Date Picker Field */
$calendar-chevrons-color: #424242; //* Color Of Selectable Chevrons But Not Of Past Chevrons */
$calendar-disabled-chevrons-color: $fi-disabled-color; //* Color of disabled chevrons */
$calendar-border-color: #9e9e9e; //* Border color of calendar popover */
$calendar-width: 395px;

//*==================================================
// Tables
//==================================================*/
$table-pagination-active-color: $fi-primary-color; //* Active pagination color */
$table-pagination-disabled-color: $text-disabled-color; //* Disabled pagination color */
$table-border-color: $border-secondary-color; //* Borders around the titles of Account Types and Tables */
$table-amount-field-width: 325px;
$table-date-field-width: 140px;

//*==================================================
// Scrollbar (e.g. Changing Account Details)
//==================================================*/
$scrollbar-thumb-color: #e0e0e0; //* Scrollbar thumb color */
$scrollbar-thumb-hover-color: #212121; //* Scrollbar thumb hover color */
$scrollbar-thumb-active-color: #69c; //* Scrollbar thumb active color */
$scrollbar-track-color: #f2f2f2; //* Scrollbar track color */
$scrollbar-track-active-color: #e0e0e0; //* Scrollbar track color when active */

//*==================================================
// Mobile Footer Ribbon
//==================================================*/
$ribbon-background-color: #f5f5f5; //* Background color for ribbon */
$ribbon-border: 1px solid $border-secondary-color; //* Top border for the ribbon */
$ribbon-icon-color: #000000; //* Inactive Footer Ribbon Icons On Mobile */
$ribbon-icon-active-color: #000000; //* Active Footer Ribbon Icon On Mobile */
$ribbon-height: 67px;

//*==================================================
// Header
//==================================================*/
$header-height-narrow: 67px; //* Top Navbar With Logout (Mobile) */
$header-height-wide: 94px; //* Top Navbar With Logout (Desktop) */


//*==================================================
// POSSIBLY UNUSED
//==================================================*/
//* Tooltip / Callout */
$tooltip-bg-color: #424242; //* Background color of tooltip popover container */
$tooltip-font-family: $primary-font-family; //* Font family of tooltips */
$tooltip-font-size: 0.75rem; //* font size for tooltip text */
$tooltip-icon-color: $icon-primary-color; //* Color of tooltip icon */
$tooltip-text-color: #ffffff; //* Text color of tooltip popover container */
$tooltip-width: 248px; //* Width of tooltip popover container */

//* Overlays */
$overlay-color: #000000; //* Color of overlay background on page loader */
$overlay-color-translucent: rgba(0,0,0,0.5); //* Color of background overlay on legacy Notifi */
$page-loader-color: #e0e0e0; //* Color of page loader cube */

//* Lists */
$list-item-border: 1px solid $border-secondary-color;
$list-item-color: #424242; //* Color for secondary list item shared by expandable and non-expandable lists */
$list-item-font-size: 0.875rem; //* Font size for secondary list item shared by expandable and non-expandable lists */

$list-item-primary-color: $text-primary-color; //* Font size for primary list item in expandable lists */
$list-item-primary-font-size: 0.875rem; //* Font size for primary list item in expandable lists */
$list-item-secondary-font-size: 1rem; //* Font size for secondary list items in expandable lists */
$list-item-secondary-color: $text-secondary-color; //* Color of secondary list item text */

//* Notifications */
$notification-bubble-border-color: $navigation-header-background-color;
$notification-bubble-bg-color: #dd3435;
$notification-bubble-text-color: #ffffff;
$notification-container-width: 600px;

//* Datagrid (datagrid-block can be tr, th, td) */
$datagrid-block-font-size: 0.875rem;
$datagrid-block-line-height: 24px;
$datagrid-block-default-padding: 12px;
$datagrid-block-padding: 6px 12px 6px 12px;
$expand-collapse-icon-cell-width: 42px;

//* Slider */
$slider-bg-color: #d8d8d8; //* Slider background color */
$slider-thumb-color: #f6f6f6; //* Slider thumb color */
$slider-thumb-hover-color: #e9e9e9; //* Slider thumb color on hover */
$slider-border-color: #979797; //* Slider border color */

//* Switch */
$switch-checked-color: $fi-primary-color;
$switch-unchecked-color: #9e9e9e;

//* Tabs */
$tab-active-color: $fi-primary-color;
$tab-inactive-color: $text-secondary-color;

//* Focus Outline */
$focus-outline-color: darken($fi-primary-color, 20);

//* MCM Columns Order */
$column-order-mlr: middle, left, right;
$column-order-lmr: left, middle, right;
$small-column-spacing: 36px; //* Spacing between MCM and modules */
$large-column-spacing: 36px; //* Spacing between MCM and modules */

//* Group Headers */
$group-header-background-color: $bg-secondary-color; //* Color of Account Category Headers on Account Summary Page */
$group-header-border: 1px solid $border-secondary-color;
$group-header-font-size: 1rem;

//* Drawer */
$drawer-nav-header-height: 85px;
$drawer-nav-footer-height: 89px;
$drawer-default-width: 300px;

//* Selectors */
$page-background-visible-selector: "#page-background-image + #page-top-container";







//**************************************************************************************************************************
//*************************************************** CUSTOMIZATIONS ********************************************************
//*************************************************************************************************************************/
//* Place all your custom CSS in the area below. Do not add any CSS to the code above. In the code above, you should only be changing the parameters of variables. */


//*==================================================
// Logos
//==================================================*/
$width-of-logo: 370px; 
$height-of-logo: 70px; 
$mobile-header-logo-width: 190px;
$main-logo: url('App_Themes/Theme5/branding/5391/first-national-russell-springs-logo.png'); 
$mobile-logo: url('App_Themes/Theme5/branding/5391/first-national-russell-springs-logo.png'); 
$footer-logo: url('App_Themes/Theme5/branding/5391/first-national-russell-springs-logo.png'); 
$signin-logo: url('App_Themes/Theme5/branding/5391/first-national-russell-springs-logo.png'); 


//*==================================================
// Mobile Backgrounds
//==================================================*/
$mobile-background-image: none;


//*==================================================
// Calendar Backgrounds
//==================================================*/
$calendar-background-color: #ffffff;


//*==================================================
// Mobile Hamburger Menu
//==================================================*/
$mobile-hamburger-menu-color: #17874f;


//*==================================================
// Colored Bar Under Primary Navigation
//==================================================*/
$primary-nav-background: #3d3d3d;
$primary-nav-background-for-mobile: #ffffff;


//*==================================================
// Position of Text in Primary Navigation
//==================================================*/
$primary-nav-position: flex-start; //* Use "flex-end" to right-align the navigation | Use "flex-start" to left-align the navigation | Use "center" to center the navigation */
$subnavigation-position: auto; //* Use "0%" to right-align the subnavigation | Use "auto" to left-align the subnavigation */


//*==================================================
// Case And Color of Text in Primary SubNavigation
//==================================================*/
$desktop-subnavigation-text-case: $desktop-navigation-text-case;
$desktop-subnavigation-text-hover-color: #ffffff;


//*==================================================
// Dropdowns
//==================================================*/
$dropdown-text-weight: normal;


//*==================================================
// Buttons
//==================================================*/
$btn-primary-text-hover-color: $btn-primary-text-color;
$btn-secondary-hover-border-color: $btn-primary-color; 
$btn-border-width: 1px; 
$btn-text-case: capitalize;
$btn-primary-hover-border-color: $btn-primary-hover-color;


//*==================================================
// Account Details Spacing
//==================================================*/
$account-detail-tab-spacing: 0px; 


//*==================================================
// Modules
//==================================================*/
$modules-text-case: capitalize; 


//*==================================================
// Profile Menu Items
//==================================================*/
$profile-menu-text-color: #000000;
$mobile-profile-menu-text-color: #ffffff;


//*==================================================
// Text Colors
//==================================================*/
$forms-text-color: #000000;
$tertiary-text-color: $text-primary-color;


//*==================================================
// Spinner Options
//==================================================*/
$first-color-for-spinner: urlEncodeColor($fi-primary-color); //* YOU DO NOT NEED TO CHANGE THIS LINE */
$second-color-for-spinner: urlEncodeColor($fi-secondary-color); //* YOU DO NOT NEED TO CHANGE THIS LINE */
$icon-spinner: url(content.aspx?theme=Theme5&color1=#{$first-color-for-spinner}&color2=#{$second-color-for-spinner}&image=spinners/spinner-cube.svg) no-repeat;
//* OPTIONAL SPINNERS AVAILABLE: spinner-arrow.svg | spinner-cresent.svg | spinner-cube.svg | spinner-dots.svg | spinner-dual.svg | spinner-gear.svg | spinner-levels.svg */


//*==================================================
// NCUA Logo Fix
//==================================================*/
$main-color-for-footer-logos: urlEncodeColor($footer-icon-primary-color); //* YOU DO NOT NEED TO CHANGE THIS LINE */
.footer-content .icon-fed-insured,
.footer-content .footer-text .icon-fed-insured,
img[src*="FederallyInsured.svg"].icon-fed-insured {
    width: 27px !important;
    height: 16px;
    background: url(content.aspx?theme=Theme5&color1=#{$main-color-for-footer-logos}&image=svg/#{$icon-federally-insured}) no-repeat;
    padding-left: 27px;
    background-size: contain;
}


//******************************************
// REMOVES DOTTED LINES AND BOX SHADOWS ON LINKS
// ******************************************/
a:focus, 
li:focus, 
button:focus, 
input:focus,
input[type="checkbox"]:focus + label,
.tab-list:focus,
.navbar-content a:focus, 
.navbar-content button:focus, 
.navbar-content input:focus, 
.skip-nav a:focus, 
.ui-selectmenu-menu-dropdown:focus,
.tree-view.desktop-navigation > li li > a:focus, 
.tree-view.desktop-navigation > li li > button:focus, 
.tree-view.user-info-navigation li > a:focus, 
.tree-view.user-info-navigation li > button:focus, 
.desktop-navigation a:focus, 
.navbar-container *:not(div):not(html):not(.navigation-item):not(.modal-close):focus,
*:not(div):not(html):focus,
.ui-selectmenu-menu-dropdown:focus {
    outline: none !important;
	box-shadow: none !important;
}

// FONT FIXES IF NEEDED
$font-size-paragraph: 1rem;
$page-actions-font-size: 1rem; //* font size for the page actions | users name | help | logout */
$link-font-size: 1rem; //* Font size of links */
$desktop-navigation-font-size: 1rem;
$expandable-navigation-font-size: 1rem;
$btn-font-size: 1rem;
$field-font-size: 1rem;
$list-item-font-size: 1rem; //* Font size for secondary list item shared by expandable and non-expandable lists */
$list-item-primary-font-size: 1rem; //* Font size for primary list item in expandable lists */
$datagrid-block-font-size: 1rem;


// TOP FDIC LOGO FOR §328.5 ON DESKTOP
.navbar-container .navbar-content > .navbar-header > .navbar-header-content {
    background: url(content.aspx?theme=Theme5&image=svg/2024-fdic-logo-white.svg) no-repeat;
    background-size: 470px 24px;
	background-position: right bottom; //* Allows position to be quickly changed top to bottom and left to right */
}

#Module-MMCA7G7 .module-header-container {
    background: url(content.aspx?theme=Theme5&image=svg/2024-fdic-logo-navy.svg) no-repeat;
    background-size: 88% 32px;
    background-position: center top; //* Allows position to be quickly changed top to bottom and left to right */
}

// TOP FDIC LOGO FOR §328.5 ON MOBILE
@media (max-width: 767px){
	.navbar-container .navbar-content > .navbar-header > .navbar-header-content {
		background: url(content.aspx?theme=Theme5&image=svg/2024-fdic-logo-white.svg) no-repeat;
		background-size: 88% 25px;;
		background-position: center top; //* Allows position to be quickly changed top to bottom and left to right */
	}
	.navbar-container .navbar-content > .navbar-header > .navbar-header-content .navbar-header-brand-container,
	.navbar-container .navbar-content > .navbar-header > .navbar-header-content .navbar-header-actions-container {
		margin-top: 9px;
	}
}


// FIFTH REPLACEMENT CODE FOR BASE
// PORTAL ADMINISTRATION > TEMPLATES > THEME 5 > SETTINGS > FOOTER HTML
// REVERSES LOGO AND TEXT | PUTS PHONE ON ROUTING LINE

/*.footer-content .icon-equal-housing {
    display: inline-block;
    height: 30px !important;
    margin-left: 8px !important;
    width: 44px !important;
	margin-bottom: 10px !important;
}*/
.icon-equal-housing {
    background: url(content.aspx?theme=Theme5&color1=#{$main-color-for-footer-logos}&image=svg/#{$icon-equal-housing}) no-repeat !important;
	width: 40px !important;
    height: 40px !important;
    background-size: contain !important;
}
.icon-equal-housing {
    background-size: contain;
}

.footer-content .icon-fed-insured,
.footer-content .footer-text .icon-fed-insured,
img[src*="FederallyInsured.svg"].icon-fed-insured  {
    width: 50px !important;
    height: 25px;
    background: url(content.aspx?theme=Theme5&color1=#{$main-color-for-footer-logos}&image=svg/#{$icon-federally-insured}) no-repeat;
    padding-left: 50px;
    background-size: contain;
}