/*================================================== /* Spire Variables Set - Version 1.00.085 ==================================================*/ /* Table of contents ================================================== - Fonts - Base Settings - Colors - Layout - Graphics - Typography - Headers - Navigation - Buttons - Tables - Modules - Mobile */ /************************************************************************** NEWFONT - 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 use .WOFF as that is the only format recognized by all browsers. **************************************************************************/ @font-face { font-family: 'Source Sans 3'; /* THIS IS YOUR NORMAL FONT */ font-style: normal; font-weight: 400; src: url(/spire/fonts/source-sans-3/source-sans-3-regular.woff) format('woff'); } @font-face { font-family: 'Source Sans 3'; /* THIS IS YOUR BOLD FONT */ font-style: normal; font-weight: 700; src: url(/spire/fonts/source-sans-3/source-sans-3-bold.woff) format('woff'); } /************************************************************************************************************************** *************************************************** BASE SETTINGS ********************************************************* /*************************************************************************************************************************/ /*================================================== // File Paths ==================================================*/ /* This is used to call most of your .SVG icons and should not be changed. */ /*================================================== // Colors ==================================================*/ /* Used on BUTTONS, HIGHLIGHTS, HORIZONTAL RULES, TOP NAV MOUSEOVERS, MOBILE NAV */ /* Used on HOVER, ICONS, CALENDAR BACKGROUNDS */ /* Used on HEADER BACKGROUNDS */ /* Used on MOBILE HEADER BACKGROUNDS */ /*============================================================ // Default Settings (Can Be Overidden In Each Variable Section) ==============================================================*/ /* Controls overall width of the desktop site. */ /*================================================== // General Layout ==================================================*/ /* Changes layout of site columns from right to left. Default is right. */ /* Change this if you change the variable above. 1.5rem for "right" and 0px for "left" */ /*================================================== // Progress Bars ==================================================*/ /*================================================== // Web Connect (To Display The Download Icons And Text) ==================================================*/ /* Change "block" to "none" to hide text */ /* Change "block" to "none" to hide text */ /*================================================== // Footer ==================================================*/ /* Switch to "fdic" for FDIC logo */ /*================================================== // Alerts ==================================================*/ /* TYPICALLY A REDDISH COLOR */ /* TYPICALLY A YELLOWISH COLOR */ /* TYPICALLY A GREENISH COLOR */ /************************************************************************************************************************** ******************************************************** GRAPHICS ********************************************************* /*************************************************************************************************************************/ /*================================================== // Logo ==================================================*/ /*Logos should always be svg - DESKTOP LOGO */ /*Logos for mobile header - MOBILE LOGO */ /* Logos should always be svg - SIGNIN PAGE LOGO */ /*================================================== // Background Images ==================================================*/ /* Background image used on all pages, except the Sign In page */ /* Background image used on the Sign In page */ /*================================================== // Spinner ==================================================*/ /*================================================== // Icons ==================================================*/ /* For VIEW, EDIT, DELETE icons */ /************************************************************************************************************************** ****************************************************** TYPOGRAPHY ********************************************************* /*************************************************************************************************************************/ /*================================================== // Typography (Main Body Fonts) ==================================================*/ /* ALSO AVAILABLE: ApexNew, Brandon, Cabin, Droid Serif, Futura, Georgia, Gotham Book, GothamBold, Lato, Montserrat, Museo, Open Sans, ProximaNova, Raleway, Roboto, Roboto Slab, RobotoCondensed, Rubik, Source Sans Pro */ /*================================================== // Typography (Module Heading Fonts) ==================================================*/ /* ALSO AVAILABLE: ApexNew, Brandon, Cabin, Droid Serif, Futura, Georgia, Gotham Book, GothamBold, Lato, Montserrat, Museo, Open Sans, ProximaNova, Raleway, Roboto, Roboto Slab, RobotoCondensed, Rubik, Source Sans Pro */ /*================================================== // Typography (Primary Navigation Fonts) ==================================================*/ /* ALSO AVAILABLE: ApexNew, Brandon, Cabin, Droid Serif, Futura, Georgia, Gotham Book, GothamBold, Lato, Montserrat, Museo, Open Sans, ProximaNova, Raleway, Roboto, Roboto Slab, RobotoCondensed, Rubik, Source Sans Pro */ /*================================================== // Typography (Other Variables) ==================================================*/ /************************************************************************************************************************** ********************************************************* PAGE HEADERS **************************************************** /*************************************************************************************************************************/ /*================================================== // Page Header (Desktop) - Top Logo Bar on Sign In Page ==================================================*/ /*================================================== // Page Header (Mobile) - Top Logo Bar With Mobile Logo And Hamburger Menu ==================================================*/ /*================================================== // Page Header (Desktop) - Top Navigation With "Logout Button" ==================================================*/ /************************************************************************************************************************** ****************************************************** DESKTOP NAVIGATION ************************************************* /*************************************************************************************************************************/ /*================================================== // Primary Navigation Bar (With The Lefthand Logo) ==================================================*/ /*================================================== // Primary Navigation Submenus (The Dropdown Areas Beneath The Primary Navigation Bar) ==================================================*/ /* "none" only shows on click - "block" shows on mouseover */ /* "nowrap" uses ellipsis for long text - "normal" wraps the text onto multiple lines */ /*================================================== // Links ==================================================*/ /* For linked text inside paragraphs of text */ /* For linked text on the header rows of tables */ /* For linked text which is standalone - e.g. account names */ /*================================================== // Pagination ==================================================*/ /* For pager links if there are multiple pages of information */ /************************************************************************************************************************** ********************************************************* BUTTONS ********************************************************* /*************************************************************************************************************************/ /*================================================== // Buttons ==================================================*/ /*================================================== // Primary Buttons ==================================================*/ /*================================================== // Secondary Buttons ==================================================*/ /************************************************************************************************************************** *********************************************************** FORMS ********************************************************* /*************************************************************************************************************************/ /*================================================== // Forms ==================================================*/ /*================================================== // Dropdown Select Forms ==================================================*/ /*================================================== // Check Boxes and Radio Buttons ==================================================*/ /*================================================== // Datepicker Colors ==================================================*/ /************************************************************************************************************************** ********************************************************** TABLES ********************************************************* /*************************************************************************************************************************/ /*================================================== // Table Headers ==================================================*/ /*================================================== // Table Settings ==================================================*/ /************************************************************************************************************************** ********************************************************* MODULES ********************************************************* /*************************************************************************************************************************/ /*================================================== // Module Headers ==================================================*/ /*defaults to h2 setting*/ /*defaults to headings setting*/ /*================================================== // Module Settings ==================================================*/ /************************************************************************************************************************** ********************************************************* POPUP MODALS **************************************************** /*************************************************************************************************************************/ /*================================================== // Popup Modal Settings ==================================================*/ /************************************************************************************************************************** ********************************************************** MOBILE ********************************************************* /*************************************************************************************************************************/ /*================================================== // Mobile Accounts Module (Kilimanjaro) ==================================================*/ /*================================================== // Mobile Navigation Header (Appears After Clicking The Righthand Hamburger Menu) ==================================================*/ /*================================================== // Mobile Navigation (Appears After Clicking The Righthand Hamburger Menu) ==================================================*/ /* Controls Color of Submenu Items */ /* Controls Color of Selected Item / Parent of Submenu Items */ /*================================================== // Ribbon Navigation (Located In Bottom Footer On Mobile Devices) ==================================================*/ /*================================================== // Mobile Deposit (Change These Variables To Make The Checks Vertical) ==================================================*/ /* Change value from "48%" to "100%" to make vertical */ /* Change value from "left" to "none" to make vertical */ /* Change value from "right" to "none" to make vertical */ /*================================================== // Mobile Account Activity Caret color (if links are active) ==================================================*/ /*================================================== // Secure Forms Category Header ==================================================*/ /************************************************************************************************************************** *************************************************** PAGE NAMES ************************************************************ /*************************************************************************************************************************/ /*================================================== // Page Variable Name - Note you should ONLY change these if you change a base page name. if you change any of these .ASPX page names, change the RIGHTHAND text to reflect the new page name. ==================================================*/ /************************************************************************************************************************** *************************************************** IMPORT FRAMEWORK ****************************************************** /*************************************************************************************************************************/ /*==================================================== /* Import Spire Framework ====================================================*/ /* Browser Resets ====================================================*/ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: 600; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /* Import Icon Sets ====================================================*/ @font-face { font-family: 'fontawesome'; src: url(/spire/fonts/fontawesome/fonts/fa.woff) format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'banking-icons'; src: url(/spire/fonts/Banking-Icons/fonts/banking-icons.woff?b3uy8c) format('woff'); font-weight: normal; font-style: normal; } /* General CSS ====================================================*/ /*==================================================== /* General Imports ==================================================== */ /* Common Settings ==================================================== */ /*==================================================== /* Common Settings ==================================================== */ /* Table of contents ==================================================== - Background Settings - Hidden Elements - List Items - Horizontal line */ /* Background Settings ==================================================== */ /* Need to override architect settings*/ html{ background: none; } body { box-sizing: border-box; background-attachment:fixed; background: #f6f6f6; background-size: cover; background-position: top; } .LoggedOut .portal-view, .AdminHome .portal-view, .SignIn .portal-view { background: #f6f6f6; background-size: cover; } .portal-view { background: #f6f6f6; box-sizing: border-box; background-attachment: fixed; background-size: cover; background-position: top; /* Background for content area*/ } /* For phone devices displaying pages that don't have the Injector, remove the background */ @media screen and (max-width: 495px), screen and (device-width: 480px), screen and (device-width: 360px), screen and (device-width: 320px), screen and (max-device-width : 375px), screen and (max-device-width: 736px) { .phone-device .portal-view, .portal-view { background: none #ffffff; } } /* Remove background image from phone devices - was body.phone-device:not(.pre-signin) */ body.phone-device:not(.SignIn) { background-image: none; background-color: #ffffff; } /* P202 says content should extend all the way to the bottom, so the box shadow for phone-devices is OUT */ .phone-device .module-single-wrapper { box-shadow: none; } /* Hidden Elements ==================================================== */ .hide-element, .hidden { display: none !important; } /* List Items ==================================================== */ ol, ul { list-style: none; } ul, li { margin: 0; padding: 0; } /* modules.css*/ .mainmodule ul { width: 100%; } /* 08/15/2019 BEGIN Added from Jacob's latest Spire Code (LL) */ ul.list { margin-bottom: 1.8rem; margin-left: 2.5rem; } /* Sets bullet to list items*/ ul.list > li { padding: 0; margin: 0 0 .5rem 0; list-style-type: disc; } /* 08/15/2019 END Added from Jacob's latest Spire Code (LL) */ /* modules.css*/ .mainmodule li { padding: .5rem; } .mainmodule li:hover { background: transparent; } /* Horzontal line ==================================================== */ hr { border: none; border-top: 1px solid transparent; /* Changeable Items */ border-top-width: ; /* Defaults */ border-top-color: #e4e4e4; /* Overide Defaults ^ */ border-top-color: ; } /* Link Colors ==================================================== */ a { color: #125EB3; /* Do NOT make this "important" or it will override everything */ } .table_header a { color: #125EB3 !important; /* This is set to "important" just to target items in tables */ } table.table_data .table_header > th.th-link > a { color: #4c4d4f !important; /* This prevents the other "a" color from replacing what is in sortable table columns */ } /* Font Families ==================================================== */ /****************************************** WEBFONT FAMILY PATHS ******************************************/ /* Note: .WOFF files work with all browsers but .WOFF2 does not work with IE */ /* Only the fonts you chose to use on the website will load, so you can add as many fonts in here as you want and it will not bog down the site. */ /************************************************************************** APEX NEW **************************************************************************/ @font-face { font-family: 'ApexNew'; font-style: normal; font-weight: 700; src: url(/spire/fonts/apexnew/apexnew-bold.woff) format('woff'); } /************************************************************************** BRANDON GROTESQUE **************************************************************************/ @font-face { font-family: 'Brandon'; font-style: normal; font-weight: 400; src: url(/spire/fonts/brandongrotesque/brandongrotesque-medium.woff) format('woff'); } @font-face { font-family: 'Brandon'; font-style: normal; font-weight: 700; src: url(/spire/fonts/brandongrotesque/brandongrotesque-black.woff) format('woff'); } /************************************************************************** CABIN **************************************************************************/ @font-face { font-family: 'Cabin'; font-style: normal; font-weight: 400; src: url(/spire/fonts/cabin/cabin.woff) format('woff'), url(/spire/fonts/cabin/cabin.woff2) format('woff2'); } @font-face { font-family: 'Cabin'; font-style: normal; font-weight: 700; src: url(/spire/fonts/cabin/cabin-bold.woff) format('woff'), url(/spire/fonts/cabin/cabin-bold.woff2) format('woff2'); } /************************************************************************** DROID-SERIF **************************************************************************/ @font-face { font-family: 'Droid Serif'; font-style: normal; font-weight: 400; src: url(/spire/fonts/droid-serif/droid-serif.woff) format('woff'), url(/spire/fonts/droid-serif/droid-serif.woff2) format('woff2'); } @font-face { font-family: 'Droid Serif'; font-style: normal; font-weight: 700; src: url(/spire/fonts/droid-serif/droid-serif-bold.woff) format('woff'), url(/spire/fonts/droid-serif/droid-serif-bold.woff2) format('woff2'); } /************************************************************************** FUTURA **************************************************************************/ @font-face { font-family: 'Futura'; font-style: normal; font-weight: 400; src: url(/spire/fonts/futura/futura-lt-book.woff) format('woff'); } @font-face { font-family: 'Futura'; font-style: normal; font-weight: 700; src: url(/spire/fonts/futura/futura-pt-bold.woff) format('woff'); } /************************************************************************** GEORGIA **************************************************************************/ @font-face { font-family: 'Georgia'; font-style: normal; font-weight: 400; src: url(/spire/fonts/georgia/georgia.woff) format('woff'); } /************************************************************************** GOTHAM BOLD **************************************************************************/ @font-face { font-family: 'GothamBold'; font-style: normal; font-weight: 700; src: url(/spire/fonts/gotham/gotham-bold.woff) format('woff'); } /************************************************************************** GOTHAM BOOK **************************************************************************/ @font-face { font-family: 'Gotham Book'; font-style: normal; font-weight: 400; src: url(/spire/fonts/gotham-book/gotham-book.woff) format('woff'), url(/spire/fonts/gotham-book/gotham-book.woff2) format('woff2'); } @font-face { font-family: 'Gotham Book'; font-style: normal; font-weight: 700; src: url(/spire/fonts/gotham-book/gotham-book-bold.woff) format('woff'), url(/spire/fonts/gotham-book/gotham-book-bold.woff2) format('woff2'); } /************************************************************************** LATO **************************************************************************/ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: url(/spire/fonts/lato/lato.woff) format('woff'), url(/spire/fonts/lato/lato.woff2) format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; src: url(/spire/fonts/lato/lato-bold.woff) format('woff'), url(/spire/fonts/lato/lato-bold.woff2) format('woff2'); } /************************************************************************** MONTSERRAT **************************************************************************/ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url(/spire/fonts/montserrat/montserrat-regular.woff) format('woff'), url(/spire/fonts/montserrat/montserrat-regular.woff2) format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: url(/spire/fonts/montserrat/montserrat-bold.woff) format('woff'), url(/spire/fonts/montserrat/montserrat-bold.woff2) format('woff2'); } /************************************************************************** MUSEO **************************************************************************/ @font-face { font-family: 'Museo'; font-style: normal; font-weight: 400; src: url(/spire/fonts/museo/museo-regular.woff) format('woff'); } @font-face { font-family: 'Museo'; font-style: normal; font-weight: 700; src: url(/spire/fonts/museo/museo-bold.woff) format('woff'); } /************************************************************************** OPEN SANS **************************************************************************/ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url(/spire/fonts/OpenSans/opensans-regular.woff) format('woff'), url(/spire/fonts/OpenSans/opensans-regular.woff2) format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url(/spire/fonts/OpenSans/opensans-bold.woff) format('woff'), url(/spire/fonts/OpenSans/opensans-bold.woff2) format('woff2'); } /************************************************************************** PROXIMA NOVA **************************************************************************/ @font-face { font-family: 'ProximaNova'; font-style: normal; font-weight: 400; src: url(/spire/fonts/proxima-nova/proxima-nova-regular.woff) format('woff'); } @font-face { font-family: 'ProximaNova'; font-style: normal; font-weight: 700; src: url(/spire/fonts/proxima-nova/proxima-nova-bold.woff) format('woff'); } /************************************************************************** RALEWAY **************************************************************************/ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; src: url(/spire/fonts/raleway/raleway-normal.woff) format('woff'); } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 700; src: url(/spire/fonts/raleway/raleway-bold.woff) format('woff'); } /************************************************************************** ROBOTO **************************************************************************/ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(/spire/fonts/roboto/roboto.woff) format('woff'), url(/spire/fonts/roboto/roboto.woff2) format('woff2'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url(/spire/fonts/roboto/roboto-bold.woff) format('woff'), url(/spire/fonts/roboto/roboto-bold.woff2) format('woff2'); } /************************************************************************** ROBOTO CONDENSED **************************************************************************/ @font-face { font-family: 'RobotoCondensed'; font-style: normal; font-weight: 400; src: url(/spire/fonts/roboto/robotocondensed.woff) format('woff'); } @font-face { font-family: 'RobotoCondensed'; font-style: normal; font-weight: 700; src: url(/spire/fonts/roboto/robotocondensed_bold.woff) format('woff'); } /************************************************************************** ROBOTO SLAB **************************************************************************/ @font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; src: url(/spire/Fonts/robotoslab/robotoslab-regular.woff) format('woff'), url(/spire/Fonts/robotoslab/robotoslab-regular.woff2) format('woff2'); } @font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 700; src: url(/spire/fonts/robotoslab/robotoslab-bold.woff) format('woff'), url(/spire/fonts/robotoslab/robotoslab-bold.woff2) format('woff2'); } /************************************************************************** RUBIK **************************************************************************/ @font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400; src: url(/spire/fonts/rubik/rubik-regular.woff) format('woff'), url(/spire/fonts/rubik/rubik-regular.woff2) format('woff2'); } @font-face { font-family: 'Rubik'; font-style: normal; font-weight: 700; src: url(/spire/fonts/rubik/rubik-medium.woff) format('woff'), url(/spire/fonts/rubik/rubik-medium.woff2) format('woff2'); } /************************************************************************** SOURCE SANS PRO **************************************************************************/ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: url(/spire/fonts/source-sans-pro/source-sans-pro.woff) format('woff'), url(/spire/fonts/source-sans-pro/source-sans-pro.woff2) format('woff2'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; src: url(/spire/fonts/source-sans-pro/source-sans-pro-bold.woff) format('woff'), url(/spire/fonts/source-sans-pro/source-sans-pro-bold.woff2) format('woff2'); } /* Typography ==================================================== */ /*==================================================== /* Typography ==================================================== */ /* Table of contents ==================================================== - Universal Settings - Headings - Links - Paragraphs - Type Hacks - narrow */ /* Universal Settings ==================================================== */ /* NOTE html is set to 62.5% so that all the REM measurements throughout are based on 10px sizing. So basically 1.5rem = 15px :) */ html { font-size: 62.5% !important; } /* Sets 1rem = 10px */ body { line-height: 1.5; text-size-adjust: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; font: 16px 'Open Sans', Helvetica, Arial, sans-serif; /* default is nothing is set */ font-family: 'Open Sans', Helvetica, Arial, sans-serif; font: 1.5rem 'Source Sans 3', 'Open Sans', sans-serif; font-family:'Source Sans 3', 'Open Sans', sans-serif; color: #000000; } body.ios { -webkit-text-size-adjust: none; } /****************************************** FONT CONTROLS FOR SITE & FORMS ******************************************/ input, select, textarea, button, html body .RadInput_Default .riTextBox, html body .RadInputMgr_Default, .RadComboBox .rcbInputCell .rcbInput, .RadCalendar_Default .rcTitlebar table, .RadCalendar_Default .rcMainTable, input[type=text], input[type="email"], .module-single input[type="text"], .module-single input[type="password"] { font: 1.5rem 'Source Sans 3', 'Open Sans', sans-serif; } .CommandButton { font-family: 'Source Sans 3', 'Open Sans', sans-serif !important; text-transform: uppercase; } /****************************************** FONT CONTROLS FOR HOMEPAGE MODULES/TILES ******************************************/ .laguna-field, .laguna-field-control { font-family: 'Source Sans 3', 'Open Sans', sans-serif; font-size: 14px; } /* Headings ==================================================== */ h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { line-height: 1.4; margin-top: ; margin-bottom: 1.5rem; font-family: 'Source Sans 3', 'Open Sans', sans-serif; font-weight: 600; color: #000000; } h1, .h1 { font-size: 2rem; color: ; } h2, .h2 { font-size: 2rem; color: ; } h3, .h3 { font-size: 1.8rem; color: #000000; } h4, .h4 { font-size: 1.6rem; color: ; } h5, .h5 { font-size: 1.3rem; color: ; } /* Make sure all headers use same color */ .default-dialog h1:first-child, .default-dialog h2:first-child, .default-dialog .module-single .header, .overlay-header { background-color: #ffffff; color: #000000; } label, legend, .field_label, legend span, .label_group label { line-height: 1.4; text-transform: ; font-family: 'Source Sans 3', 'Open Sans', sans-serif; font-weight: 600; font-size: 1.5rem; color: #000000; } .header_inner { line-height: 2; text-transform: uppercase; /* margin-left: 15px; */ margin-left: 0px; } /* Links ==================================================== */ a { line-height: inherit; cursor: pointer; transition: all 0.5s; text-decoration: none; color:#125EB3; } a:hover, a:focus { outline: none; text-decoration: underline; color: rgba(14,75,143,255); } a:active{ text-decoration: underline; } a img { border: 0; } .table_header a, div.message_body_snippet { color: #125EB3; } /* Paragraphs ==================================================== */ p + p { margin-top: auto; } .p-space p { margin-bottom: 1.8rem; } p { margin-bottom: 1.8rem; margin-top: 0; color: #000000; } /* Type Hacks to hide text ==================================================== */ /*Hides text for icon only buttons module.css*/ .screen_reader_only { position: absolute; left: -9999px; } .bold { margin-bottom: 0.5rem; font-weight: 600; } /* narrow-column will never be 13px again ==================================================== */ /* overwrite wizard.css from product */ .phone-device .narrow-column, .phone-device .narrow-column div.smaller > span, .phone-device .narrow-column span.id, .phone-device .narrow-column span.smaller, .phone-device .narrow-column.spaced > div.smaller { font-size: 1.5rem !important; } /* overwrite modules.css from product */ @media (max-width: 359px) { .phone-device .narrow-column.spaced > div > span:not(.collapsed):nth-of-type(1) { font-size: 1.5rem !important; } } /****************************************** SMALL INFO BOXES ******************************************/ .info_box.small { font-size: 14px; line-height: 20px; color: #000000; background: #CF202F; } /* Logo ==================================================== */ /*==================================================== /* Logo Settings ==================================================== */ /****************************************** DESKTOP LOGO ******************************************/ .css-imgLogo { background: url(/spire/images/logos/firstcommand-logo-color.svg) no-repeat; background-size: contain; width:100%; height: 100%; display: flex; align-items: center; margin: 0; padding: 0; background-position: left; position: relative; } /****************************************** SIGNIN LOGO ******************************************/ .Register .css-imgLogo, .SetupProfile .css-imgLogo, .ForgotPassword .css-imgLogo, .RegistrationDisclosure .css-imgLogo, .SignIn .css-imgLogo, .AdminHome .css-imgLogo, .signin .css-imgLogo, .adminhome .css-imgLogo { background: url(/spire/images/logos/firstcommand-logo-color.svg) no-repeat; background-size: contain; background-position: center; } /****************************************** MOBILE LOGO ******************************************/ @media (max-width: 992px) { .css-imgLogo { background: url(/spire/images/logos/firstcommand-logo-color.svg) no-repeat; background-size: contain; background-position: center; } } /* Primary Navigation Logo (default) ====================================================*/ .page-primary-nav .logo { float: none; margin: 0; padding: 1rem 0rem 1rem 0rem; height: 90px; min-width: 220px; width: 220px; display: block; align-items: center; box-sizing: border-box; } @media (max-width: 768px){ .page-primary-nav .logo { height: 50px; width: 200px; } } /* Header Logo (option for desktop default mobile) ====================================================*/ /* Reset logo settings because primary nav logo has the .logo class in the 'a': */ .top-nav-wrapper .logo { margin: 0; width: auto; float: none; display: none; } @media (min-width: 992px) { .top-nav-wrapper .logo{ display: none; } } .top-nav-wrapper .logo a { float: none; margin: 0; padding: 1rem 2rem; height: 70px; min-width: 220px; width: 220px; display: flex; align-items: center; box-sizing: border-box; } /* Mobile Header Logo ====================================================*/ #page-header-container-2 .logo { margin: 0 auto; /* display: block; */ height: 65%; width: 180px; /* order: -5; */ /* flex: 1; */ } /*Change logo for mobile if the header color is dark*/ .PrivacyPolicy #page-header-container-2 .logo .css-imgLogo, .FAQs #page-header-container-2 .logo .css-imgLogo, .Disclaimer #page-header-container-2 .logo .css-imgLogo, .SignIn #page-header-container-2 .logo .css-imgLogo, .phone-device #page-header-container-2 .logo .css-imgLogo { background: url(/spire/images/logos/firstcommand-logo-color.svg) no-repeat; background-size: contain; background-position: center; } .phone-device #page-header-container-2 .logo { pointer-events: none; } /* needed to shrink the link size */ #page-header-container-2 .logo > a { box-sizing: border-box; max-width: 180px; display: flex; height: 100%; } #page-header-container-2 .logo .css-imgLogo { background-position: center; } /* Forms ==================================================== */ /*==================================================== /* Form Settings ==================================================== */ /* Table of contents ==================================================== - Input Form - Select Forms - Upload Forms - Label Settings - Check Boxes and Radio - Dollar Sign In Input Field - Forms with Callouts - Callout Popup - Form Overides - Form Spacing Overides - Default OOB eStatement account Dropdown - Positive Pay > Tolerance Textbox on Tablets */ /* Form Spacing ==================================================== */ .p, .forms>div { margin-bottom: 0; } /* :not added to Fix ach Module container 8/16/2019 LL */ /* .input-field:not(.module-container.mainmodule.input-field), */ .ids_forms .forms p, div.inline { position: relative; padding: 0; margin-bottom: 1.8rem !important; } fieldset.form_group>.p.input-field:last-child { margin-bottom: 0; } .p>span>input:not(:first-child) { margin-left: 1.8rem; } /* Edit variables spacing*/ .grid-row { margin-bottom: 1.8rem; } /* Input Form ==================================================== */ input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { padding: .6rem 1.6rem; /* The 6px vertically centers text on FF, ignored by Webkit */ margin: 0 0 0 0 !important; /* Overide Margins from Module.css */ transition: all 0.5s; box-sizing: border-box; min-width: 350px; max-width: 350px; border: 1px solid transparent; /* Changeable Items */ background: #ffffff; background-color: #ffffff; border-width: ; /* Defaults */ min-height: 45px; font-size: 1.5rem; box-shadow: 0 0 5px rgba(0,0,0,0.3); border-color: #d2d2d2; border-radius: 0px; color: #000000; caret-color: #000000; /* Overide Defaults ^ */ height: ; box-shadow: 0 0 5px transparent; border-color: ; border-radius: 0px; color: ; caret-color: ; } /* Fixes alignment issues by making telephone input boxes smaller */ input[type="tel"] { min-width: 110px; } /* Fixes alignment issues */ .CalendarServices input[type="text"], .CalendarServices select { min-width: 140px; } /* Fixes alignment issues */ .Multiple input[type="text"] { min-width: inherit !important; } /****************************************** BATCH TEMPLATE DETAILS FIXES ******************************************/ /* Fixes alignment issues by shrinking the width of the input boxes*/ .BatchTemplateDetails input[type="text"] { min-width: inherit !important; width: inherit !important; } /* Fixes alignment issues by moving checkboxes onto their own lines - removed per SBOSUPS-196 */ .BatchTemplateDetails span.checkbox { /* margin-left: 131px; */ } /* Fixes alignment issues by moving checkbox back left */ .BatchTemplateDetails [id*="M5ZYOUL"][id*="chkSplitPayments"] > span.has_callout > span.checkbox.input-field, .BatchTemplateDetails [id*="M5ZYOUL"][id*="chkOffsetIndividually"] > span:nth-child(2) > span { margin-left: 0px; } /* Fixes alignment issues by moving checkbox for consumer adding template */ .BatchTemplateDetails [id*="M5ZYOUL"][id*="grpBatchEntries_grdBatchEntries"] > tbody > tr:nth-child(2) > td.wide-screen-only.column-padding.ach-checkbox-column-prenote > span, .BatchTemplateDetails [id*="M5ZYOUL"][id*="grpBatchEntries_grdBatchEntries"] > tbody > tr:nth-child(2) > td.wide-screen-only.column-padding.ach-checkbox-column-hold > span, [id*="M5ZYOUL"][id*="chkIsRestrictedBatchTemplate"] > span:nth-child(2) > span { margin-left: 0px; } /* Moves the dollar sign inside the bottom dollar input field */ .BatchTemplateDetails .text-align-right.narrow-screen-only.dollar::before { left: 79px; } /* Moves the bottom dollar input field */ .BatchTemplateDetails.desktop-device input[id$="txtChildSupportMobileAmount"] { left: 72px; position: relative; } /* Move the Nickname over */ .BatchTemplateDetails .inline-table-list.mobile > div > span { display: inline-block; } .native-app select option { background: white !important; } .native-app select { background: white !important; } /* Left Column Forms */ .left-col input[type="email"], .left-col input[type="number"], .left-col input[type="search"], .left-col input[type="text"], .left-col input[type="tel"], .left-col input[type="url"], .left-col input[type="password"], .left-col textarea, .left-col select { min-width: 100%; width: 100%; } /* Override from Template.css: */ @media (max-width: 1138px) { textarea, input[type="text"]:not(.laguna-field-money), .module-single input[type="text"]:not(.laguna-field-money), .module-single input[type="password"], input[type="number"], input[type="tel"], input[type="email"] { /* The 6px vertically centers text on FF, ignored by Webkit */ padding: .6rem 1.6rem; /* Overide Margins from Module.css */ margin: 0 0 0 0 !important; transition: all 0.5s; box-sizing: border-box; min-width: 350px; max-width: 350px; border: 1px solid transparent; /* Changeable Items */ background: #ffffff; border-width: ; /* Defaults */ min-height: 45px; font-size: 1.5rem; box-shadow: 0 0 5px rgba(0,0,0,0.3); border-color: #d2d2d2; border-radius: 0px; color: #000000; caret-color: #0f4b8f; /* Overide Defaults ^ */ height: ; box-shadow: 0 0 5px transparent; border-color: ; border-radius: 0px; color: ; caret-color: #000000; } } @media (max-width: 768px) { .module-single input[type="text"], .module-single input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { min-width: 100%; max-width: 100% !important; width: 100%; } .phone-device input[type="text"]:not(.laguna-field-money), .phone-device input[type="number"]:not(.laguna-field-money) { min-width: auto; padding-top: 0; } } /* Removed "select" to fix calendars, "text" and "password" to fix login */ @media (max-width: 650px) { .phone-device .module-single input[type="text"], .phone-device .module-single input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], textarea { min-width: 100% !important; max-width: 100% !important; width: 100%; } } /* Removes awkward default styles on some inputs for iOS */ input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; } textarea { min-height: 65px; padding-top: 6px; padding-bottom: 6px; /* Forces textarea to stay within its div: */ width: 100% !important; /* Forces textarea to default height: */ height: inherit; min-width: 100% !important; max-width: 100% !important; } fieldset { padding: 0; border-width: 0; margin: 0 0 0 0; } input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { outline: 0; /* Changeable Items */ background: ; /* Defaults */ border-color: #0f4b8f; box-shadow: 0 0 5px rgba(0,0,0,0.3); /* Overide Defaults ^ */ border-color: #0f4b8f; box-shadow: 0 0 5px transparent; } /* Disabled State: */ input[type="email"]:disabled, input[type="number"]:disabled, input[type="search"]:disabled, input[type="text"]:disabled, input[type="tel"]:disabled, input[type="url"]:disabled, input[type="password"]:disabled, textarea:disabled, select:disabled { color:rgba(0, 0, 0, 0.8) !important; background: rgba(0, 0, 0, 0.1) !important; border-color: transparent !important; cursor: initial; filter: none; } input:disabled + label{ color:rgba(0, 0, 0, 0.8) !important; } /* Overide Margins if these elements are in a table: */ .table_data td input[type="text"], .table_data td input[type="password"], .table_data td input[type=number], .table_data td input[type=tel], .table_data td input[type=email] { display: inline-flex; align-items: center; margin: 0 0 0 0 !important; } /* Select Form ==================================================== */ /* Grandparent of select overide common.css */ .selectmenu-wrapper, .selectmenu-container { display: inline-block; align-items: center; min-height: 45px; min-height: ; width: auto !important; min-width: 350px; max-width: 350px; position: relative; margin: 0; } @media (max-width: 1138px) { .selectmenu-wrapper { width: auto; } } @media (max-width: 650px) { .selectmenu-wrapper, .selectmenu-container { min-width: auto !important; max-width: 100% !important; width: 100%; } .phone-device.ManageAlerts .selectmenu-wrapper, .phone-device.ManageAlerts .selectmenu-container { min-width: 100% !important; max-width: 100% !important; width: 100% !important; } } /* Select form Container */ .old-selectmenu { display: inline-block; width: 100%; position: relative; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; /* Defaults ^ */ min-height: 45px; box-sizing: border-box; /* Overide Defaults ^ */ min-height: ; } /* Select form itself */ .old-selectmenu select { display: inline; width: 100%; height: 100%; cursor: pointer; padding-right: 4rem !important; white-space: normal; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; /* Defaults */ min-height: 45px; /* Overide Defaults ^ */ min-height: ; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Overide invisiable link above selct form common.css */ .new-selectmenu, .new-selectmenu a { position: absolute; top: 0; width: 100%; height: 100%; display: flex; box-sizing: border-box; border: none; } /* Yet anouther container over the select */ .ui-selectmenu { display: none; position: relative; height: 100%; width: 100%; max-width: 100% !important; vertical-align: middle; text-decoration: none !important; overflow: visible; zoom: 0; border: none; box-shadow: none; z-index: 1; /* Defaults */ min-height: 45px; /* Overide Defaults ^ */ min-height: ; } /*No Clue just removing from commmon.css*/ .new-selectmenu a div:nth-of-type(1), .new-selectmenu a div:nth-of-type(2) { display: none; } /*Fake link above the original select*/ .selectmenu-container .new-selectmenu .ui-selectmenu { border: 1px solid transparent; /* Defaults */ min-height: 45px; font-size: 1.5rem; box-shadow: 0 0 5px rgba(0,0,0,0.3); border-color: #d2d2d2; border-radius: 0px; color: #000000; /* Overide Defaults ^ */ height: ; box-shadow: 0 0 5px transparent; border-color: ; border-radius: 0px; color: ; display:flex; align-items:center; } /*Select Down Arrow*/ .ui-selectmenu::after { font-family: 'fontawesome'; position: absolute; display: inline-block; padding: .25rem 0; transition: all 0.5s; right: 1.5rem; height: 1em; width: 1em; box-sizing: border-box; margin-top:-.5rem; font-size: 1.5rem; /* Defaults */ content: '\e908'; color: #000000; /* Overide Defaults ^ */ content: '\e908'; color: rgba(0, 0, 0, 0.6); } /*IE Arrow spacing fix*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ui-selectmenu::after{ margin-top:-1rem; } } /*Select Up Arrow*/ .ui-selectmenu.ui-state-active::after { transform: scaleY(-1); transform-origin: center; margin-top: .5rem; /* Defaults */ color: #0f4b8f; /* Overide Defaults ^ */ color: #0f4b8f; } /*IE Arrow spacing fix*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ui-selectmenu.ui-state-active::after { margin-top:-.25rem; } } /*Hover and focus state of select form*/ .ui-selectmenu.ui-state-active, .selectmenu-container .new-selectmenu .ui-state-hover { z-index: 2; border: 1px solid transparent; /* Defaults */ box-shadow: 0 0 5px rgba(0,0,0,0.3); border-color: #0f4b8f; /* Overide Defaults ^ */ box-shadow: 0 0 5px transparent; border-color: #0f4b8f; } /* Select form drop down ==================================================== */ .ui-selectmenu-menu { padding: 0; margin: 0; position: absolute; top: auto; display: none; z-index: 5; } /*Select when open*/ .ui-selectmenu-open { display: block; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-duration: 400ms; } /*Select UL settings*/ .ui-selectmenu-menu ul { padding: 0; margin: 0; z-index: 5; position: relative; overflow: auto; overflow-y: visible; overflow-x: hidden; width: 100% !important; height: 100%; max-width: 350px; min-width: 250px; border: 1px solid transparent; /* Changeable Items */ border-width: ; /* Defaults */ box-shadow: 0 1px 5px rgba(0,0,0,0.3); border-color: #0f4b8f; border-radius: 0px; background-color: rgba(244,244,244,255); /* Overide Defaults ^ */ box-shadow: 0 1px 5px rgba(0,0,0,0.3); border-color: #0f4b8f; border-radius: 0px; background-color: ; } /*Select li settings*/ .ui-selectmenu-menu li { padding: 0; margin: 0; display: block; width: 100%; border: none; color: inherit; background: transparent; } .ui-selectmenu-menu li:hover, .ui-selectmenu-menu li:focus { border: none; outline: 0; } .ui-selectmenu-menu li:not(:first-child), .ui-selectmenu-menu li:not(:first-child):hover { border-top: 1px solid transparent; /* Defaults */ border-color: #e4e4e4; /* Overide Defaults ^ */ border-color: ; } /* Dropdown link Item */ .ui-selectmenu-menu li a { line-height: 1.5; display: flex; outline: none; border: none; padding: .8rem 1.6rem; /* Defaults */ color: #000000; font-size: 1.5rem; /* Overide Defaults ^ */ color: rgba(0, 0, 0, 0.6); } /* Dropdown hover Item */ .ui-selectmenu-menu li a:hover { text-decoration: none; background-color: rgba(0, 0, 0, 0.1); /* Defaults */ color: rgba(0,0,0,255); /* Overide Defaults ^ */ color: rgba(0,0,0,255), 10); } /* Dropdown Selected Item */ .ui-selectmenu-menu li.ui-selectmenu-item-selected a { text-decoration: none; /* Defaults */ color: #ffffff; background-color: #0f4b8f; /* Overide Defaults ^ */ color: ; background-color: #0f4b8f; } /*Removes old focus states module.css*/ .new-selectmenu a.ui-state-focus, .new-selectmenu a.ui-state-hover, .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: none; box-sizing: border-box; } /*Removes old hover states module.css*/ .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited { color: inherit; text-decoration: none; } /*This is a disable select option*/ .ui-selectmenu-menu li.ui-state-disabled a, .ui-state-disabled { color:rgba(0, 0, 0, 0.9) !important; background: rgba(0, 0, 0, 0.1) !important; border-color: transparent; opacity: .75; cursor: initial; filter: none; -webkit-tap-highlight-color: transparent; } /* Upload Form ==================================================== */ .pushdown { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .pushdown+label { width: 100%; min-width: 300px; font-weight: normal; padding: 0; box-sizing: border-box; display: flex; align-items: center; transition: 0.5s ease-out; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; overflow: hidden; border: 1px solid transparent; /* Changeable Items */ margin-bottom: 1.8rem; min-height: ; background: #ffffff; border-width: ; /* Defaults */ box-shadow: 0 0 5px rgba(0,0,0,0.3); border-color: #d2d2d2; border-radius: 0px; color: #000000; /* Overide Defaults ^ */ box-shadow: 0 0 5px transparent; border-color: ; border-radius: 0px; color: ; } .pushdown+label.active { border-color: #0f4b8f; box-shadow: box-shadow: 0 0 5px transparent; } .pushdown:focus+label, .pushdown.has-focus+label, .pushdown+label:hover { border-color: #0f4b8f; box-shadow: 0 0 5px transparent; } .pushdown+label span { width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .pushdown+label strong { padding: 0 3rem; width: auto; transition: all 0.5s; display: flex; align-items: center; margin-right: 1.5rem; border: 1px solid transparent; /* Changeable Items */ background: #ffffff; border-width: ; /* Defaults */ min-height: 45px; box-shadow: 0 0 5px rgba(0,0,0,0.3); border-color: #d2d2d2; border-radius: 0px; color: #ffffff; background: #0f4b8f; /* Overide Defaults ^ */ min-height: ; box-shadow: 0 0 5px transparent; border-radius: 0px; color: #ffffff; background: #0F4B8F; color: #ffffff; border-color: #0f4b8f; } .pushdown:focus+label strong, .pushdown.has-focus+label strong, .pushdown+label:hover strong { outline: 0; background: rgba(13,67,128,255); border-color: #0f4b8f; box-shadow: 0 0 5px transparent; } .message_editor_container div label { display: flex; } /* Label settings ==================================================== */ /* Overrides Margins field label causing spacing issues Module.css: */ .field_label { margin: .8rem 0; } /* Makes form validation inline: */ body:not(.pre-signin) .field_label + span:first-of-type, [id*=M2SN6LC][id$=calToDate] { display: inline-flex; } /* Overides Margins label causing spacing issues Module.css: */ .label_group label { display: block; margin: 0 0 .8rem 0; } label { display: block; } legend span { padding: 0; color: #000000; } div.p .field_value { display: inline-block; line-height: 1.5; margin-bottom: 0; font-size: 1.5rem; } /* Check Boxes And Radio ==================================================== */ /* Text for check boxs and radio: */ input[type=checkbox]+label, input[type=radio]+label { font-weight: normal; margin-right: 2.5rem; /* resets all text to body settings: */ /* text-transform: capitalize; */ color: inherit; /* Do not remove */ font-size: 1.5rem; font-family: inherit; cursor: pointer; padding-right: 0; padding-left: 0; padding-top: 0; background: none; border: none; display: inline-flex; align-items: center; min-height: 30px; } /* Rests checkbox height and width if in table head */ .th-link input[type=checkbox]+label, .th-link input[type=radio]+label { min-height: 0; margin-right: 0; } /* input[type=radio] + label { font-weight: bold !important; } */ /* Resets checkbox height and width: */ input[type=checkbox]+img { height: inherit; width: inherit; margin: 0; /* to hide the checkbox itself */ display: none !important; } /* Check Icon Settings */ input[type=checkbox]+label::before, input[type=checkbox]+img+label::before, input[type=radio]+label::before { font-family: 'fontawesome'; display: inline-block; letter-spacing: 1rem; font-size: 1.5rem; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /*Unchecked Color*/ input[type=checkbox]+label::before, input[type=checkbox]+img+label::before, input[type=radio]+label::before { /* Defaults */ color: rgba(127,127,127,255); /* Overide Defaults ^ */ color: ; } /*Checked Color*/ input[type=checkbox]:checked+label::before, input[type=checkbox]:checked+img+label::before, input[type=radio]:checked+label::before { animation-name: tick; animation-timing-function: ease-in; animation-duration: 180ms; -webkit-animation-name: tick; -webkit-animation-timing-function: ease-in; -webkit-animation-duration: 180ms; /* Defaults */ color: #0f4b8f; /* Overide Defaults ^ */ color: ; } /* Unchecked icon */ input[type=checkbox]+label::before, input[type=checkbox]+img+label::before { content: "\e935"; } /* Checked icon */ input[type=checkbox]:checked+label::before, input[type=checkbox]:checked+img+label::before { content: "\e939"; } /* Checked disabled icon */ input[type=checkbox]:disabled+label::before { /* content: "\ea08"; */ /* TURN OFF TO FIX ACCOUNT MAPPER PAGE */ } /* Unchecked Radio icon */ input[type=radio]+label::before { content: "\e941"; } /* Checked Radio icon */ input[type=radio]:checked+label::before { content: "\e95e"; } /* Checked Radio disabled icon */ input[type=radio]:disabled+label::before { content: "\e943"; } /* Disabled States */ input[type=checkbox]:disabled+label, input[type=radio]:disabled+label { color: #999; cursor: default; } input[type=checkbox]:disabled+label::before, input[type=radio]:disabled+label::before { /* color: #ccc; */ /* TURN OFF TO FIX ACCOUNT MAPPER PAGE */ } /* Focus States: */ input[type=checkbox]:focus+label::before, input[type=checkbox]:checked:focus+label::before, input[type=checkbox]:focus+label, input[type=radio]:focus+label::before, input[type=radio]:checked:focus+label::before, input[type=radio]:focus+label { outline: 0; color: #0f4b8f; } /* Overide settings found in module.css: */ input[type=checkbox]:checked+label, input[type=checkbox]+label, input[type=radio]:checked+label, input[type=radio]+label { background: none; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } /* Fix checkbox on Nicknames in Profile Section .MobileNicknames input[type=checkbox]:checked+label, .MobileNicknames input[type=checkbox]+label { margin-left: 10px; margin-right: 0; } */ /* Removes extra margin due to repeat input-field class*/ .checkbox, .input-field>span>.checkbox { padding-left: 0; margin-bottom: 0 !important; } div.p .checkbox, span.checkbox { display: inline-flex; align-items: center; margin-top: 0; } /* Removes focus on check containers for IE*/ span:focus, th:focus { outline: 0; } /* Fix NickNames Textbox is too short on Mobile */ .phone-device.MobileNicknames input[id*=txtMobileNickname] { margin-left: 5px; width: 54px !important; min-width: 54px !important; padding-left: 5px; padding-right: 0 !important; } .phone-device.MobileNicknames td:nth-child(2) { padding-left: 0; padding-right: 0; } .phone-device.MobileNicknames td:nth-child(3) { padding-left: 0; } /* End Mobile NickNames Fixes */ /* Clears out checks boxes on laguna and kilimanjaro modules*/ .laguna-field-control input[type=checkbox] + label::before, .laguna-field-control input[type=radio] + label::before, .laguna-field-control input[type=checkbox]:checked + label::before, .laguna-field-control input[type=radio]:checked + label::before, .kilimanjaro-module-template input[type=checkbox] + label::before, .kilimanjaro-module-template input[type=radio] + label::before, .kilimanjaro-module-template input[type=checkbox]:checked + label::before, .kilimanjaro-module-template input[type=radio]:checked + label::before { content:normal; } /* Dollar Sign In Input Field (jquery needed here to add class) ==================================================== */ /*Remove bg image */ .laguna-field-money.laguna-field-control:not[id*="MIEVIK2"]:not[id*="MJ58WBP"], input.input_money { background: #ffffff; background: #ffffff; font-size: inherit; padding-left: 2.8rem !important; } .dollar input.input_money { background-image: none; } .laguna-field-money.laguna-field-control[id*="MIEVIK2"], .laguna-field-money.laguna-field-control[id*="MJ58WBP"] { padding-left: 2.8rem !important; } @media (max-width: 1138px){ .module-single input.input_money { padding-top: 6px; background: #ffffff; font-size: inherit; } } @media (max-width: 768px){ input[id*="MN2CLVN"][id*="txtAmount"] { padding-top: 6px !important; } } /*Control the parent class */ .dollar { display: inline-block; position: relative; } /* THE MONEY SYMBOL */ .dollar::before { position: relative; content: "\0024"; display: flex; align-items: center; /* Defaults */ height: 0px; color: #000000; /* Overide Defaults ^ */ height: ; color: ; z-index: 2; } /* Removes extra dollar sign hardcoded into version 19.4 */ .dollar-sign:before { content: ""; } .StopPayments .dollar::before { top: 50px; left: 15px; } .StopPayments .dollar input { padding-left: 30px !important; } .BatchTemplates .dollar::before, .Budget .dollar::before { top: 22px; left: 5px; } .BatchTemplateDetails .dollar::before { top: 36px; left: 31px; position: absolute; } .Default .dollar::before, .AccountsSummary .dollar::before, .ManageTransfers .dollar::before { position: absolute; top: 23px; left: 13px; } /* Mobile Edit Budgets page */ .Budgets .dollar::before { top: 20px; left: 15px; } /* Input fields in tables - PFM pages*/ .pfm_data.dollar::before, td.dollar::before { /* left: 2.5rem; */ /* top: 20%; */ } /* If input is plain text override create transfer*/ span[id*="txtAmountOption"] .dollar>span { display: inline-flex; align-items: center; border-color: transparent; font-weight: bold; box-sizing: border-box; padding-left: 2.5rem; padding-right: 2rem; cursor: default; /* Defaults */ /* background: rgba(0, 0, 0, 0.1) !important; */ background: transparent; color: #000000 !important; height: 45px; border-radius: 0px; /* Overide Defaults ^ */ color: !important; height: ; border-radius: 0px; } .phone-device.Edit .span[id*="txtAmountOption"] .dollar>span { display: inline !important; } .Multiple .dollar::before { display: inline; } /* Forms with Callouts ==================================================== */ span.callout_indicator, div.callout_indicator { margin-left: 0; padding-right: 0; background: none; cursor: pointer; padding-bottom: inherit; font-size: 1.8rem; margin: 0 1rem 0 1rem; /* Changed from margin: 0 1rem 0 .5rem - UXPIPE-44 */ } span.callout_indicator::before, div.callout_indicator::before { position: relative; display: block; padding: .25rem 0; transition: all 0.5s; font-family: 'fontawesome'; font-size: 1.8rem; content: '\e9f5'; /* default */ color: #0f4b8f; /* override */ color: #0f4b8f; /* Use if using svg icon only ============= ============================================= NOTE:Top many need to be adjusted depending on the svg content: url(content.aspx?theme=Theme4&color1=$color1&image=svg/help.svg); height: 1em; width: 1em; top: .2em; */ } span.callout_indicator:hover::before, div.callout_indicator:hover::before, span.callout_indicator:focus::before, div.callout_indicator:focus::before, div.callout_indicator:focus, span.callout_indicator:focus { outline: none; color: rgba(13,67,128,255); } /* Aligns everything center */ span.has_callout { display: inline-flex; align-items: center; } /* Gives inputs margin for icon spacing: */ span.has_callout>input { margin-right: .5rem !important; } /* Clears put margin issue with check boxes: */ .has_callout input[type=checkbox]+label, .has_callout input[type=radio]+label { margin-right: 0; } /* Overide media Query for width in module.css: */ @media (max-width: 1138px) { span.has_callout textarea, span.has_callout input[type=text], .module-single span.has_callout input[type="text"], .module-single span.has_callout input[type="password"], span.has_callout input[type="email"] { width: auto; max-width: 350px; } } /* Callout Popup ==================================================== */ div.callout { width: 20rem; margin-left: 1.2rem; font-size: 1.5rem; line-height: 1.5; cursor: default; z-index: 2; opacity: 1; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-duration: 400ms; } div.callout div { border: 2px solid #0f4b8f; background: #0f4b8f; color: white; padding: 1rem; box-shadow: 0 1px 5px rgba(0,0,0,0.3); border-radius: .5rem; /* Override */ color: #ffffff; } /****************************************** CALLOUT HEADER ******************************************/ div.callout h3 strong { color: #ffffff; } /****************************************** CALLOUT POSITION ******************************************/ div[id*="M5ZYOUL"][id*="ctl01"].callout.callout_above { left: 6px !important; } div.callout_right, div.callout_left, div.callout_below, div.callout_above { background: none; padding-left: 0px; } div.callout::before { content: ""; position: absolute; border: 1rem solid transparent; } div.callout_left::before { top: .5rem; right: -1rem; border-color: transparent transparent transparent #0f4b8f; } div.callout_right::before { top: .5rem; left: -1.8rem; border-color: transparent #0f4b8f transparent transparent; } div.callout_above::before { bottom: -1.1rem; right: 1rem; border-color: #0f4b8f transparent transparent transparent; } div.callout_below::before { top: -1.8rem; border-color: transparent transparent #0f4b8f transparent; } /* Form Overides ==================================================== */ /* Overides form width for a date picker template.css: */ input.input_date { width: auto; } /****************************************** ADMINISTRATIVE CALENDARS ******************************************/ .MessageCenter input[id*="txtSearchName"] { min-width: 300px !important; } .MessagingReports input.input_date, .MessageCenter input.input_date { min-width: 104px !important; } .MessageCenter img[src*="Resource.axd"] { padding: 19px !important; } @media (max-width: 1138px) { .input_box.input_date { max-width: 170px; } } /*Phone Number entry width fix */ label.screen_reader_only+.input_box, label.screen_reader_only+span+.input_box { min-width: 80px !important; max-width: 80px !important; box-sizing: border-box; } /* Form Spacing Overides ==================================================== */ /* Spacing for Label groups in a p tag: */ .ids_forms>.forms>.label_group>p { margin: 0 0 1.8rem 0; } .ids_forms>.forms>.label_group>p>input, .ids_forms>.forms>.label_group>p>input+label { margin: 0; } .label_group>p>.input_box { margin: 0 0 0 0; } div.mainmodule div.forms { padding-top: 0; display: flex; flex-direction: column; } .module-single input[type="text"], .module-single input[type="password"], .module-single input[type=number], .module-single input[type=tel], .module-single input[type=email] { margin: 0 0 0 0; } /* Spacing after inline label: */ .inline .field_label { margin: 0 1rem 7px 0; display: inline-flex; } /* Pre login spacing issue with labels: */ .vertical_layout .field_label { margin: 0; padding: 0; width: auto; float: none; text-align: left; } label { margin: 0 1rem 0 0; } /* Unecessary br tag: account history */ br.clear { display: none; } /* Spacing overide account summary */ fieldset.webinput_fieldset, div.p fieldset.webinput_fieldset { margin-left: 0; margin-top: 0; width: 100%; position: inherit; padding: 0; } /* Spacing overide radio box account summary */ div.p .left_aligned_checkbox { float: none; display: flex; flex-wrap: wrap; margin-top: 0; margin-bottom: 0!important; } div.p .left_aligned_checkbox td { padding: 1rem; } /* Spacing on ACH batch fix*/ div[id*='DateRange'] .old-selectmenu { margin-bottom: 1.8rem; } /* Fixes width for all devices on Profile > Add Biometric Device */ [id*=txtDeviceName].input_box { max-width: 88vw !important; } .phone-device input.hasDatePicker { max-width: 82vw; } /* UXPIPE-43 Label Font-weight should always be 600 */ label, legend, .field_label { font-weight: 600 !important; } /****************************************** FIX TO MAKE FORM FIELDS SAME WIDTH ******************************************/ form[action^="./ChangeAddressPhoneNumber.aspx"] input.input_box { width: 312px !important; } /****************************************** FIX FOR DEPOSIT CHECK BUTTONS ON MOBILE & DESKTOP DEPOSITS ******************************************/ button.rdc-camera { background-size: 50px; } div#M_layout_content_PCDZ_MB2C30Z_ctl00_ctl00_webInputForm_grpEditor_txtAmount_C { margin-bottom: 23px; } /****************************************** FIX TO REMOVE "SHOW MORE OPTIONS" LINKS ON ACCOUNT ACTIVITY ******************************************/ [id*="M2SN6LC"][id*="pnlSearchOptions"] > p:nth-child(6) > a, [id*="M2SN6LC"][id*="pnlSearchOptions"] > div.toggle-options > p > a { display: none; } [id*="M2SN6LC"][id*="pnlSearchOptions"] > p:nth-child(5) { margin-top: 12px; } /****************************************** FIX FOR "BUDGET" PAGE LAYOUT ******************************************/ .Budget input[type="text"] { min-width: 50px; max-width: 110px; } /* REMOVES EXTRA DOLLAR SIGN */ [id*="MU5RALF"][id*="budgetItemsPanel"] > table:nth-child(2) > tbody > tr.budget_management_table_footer > td.pfm_data.dollar::before { display: none; } /****************************************** FIXES FOR EMPHASIZE BOXES ******************************************/ .RoutingNumberMaintenance .emphasize_box, .AchTransactionChangeStatus .emphasize_box, .AchTransferHistory .emphasize_box, .ChangeProfile .emphasize_box, .SetupProfile .emphasize_box, .UserDetails .emphasize_box, .AchBatchGrid .emphasize_box { background: inherit; border-color: inherit; } .TestUsers span[id*="MWY4ATZ"][id*="webInputForm_btnAdd_C"], .AchTransactionChangeStatus span#M_layout_content_PCDZ_MRPIDB7_ctl00_webInputFilterForm_btnView_C, .AchTransferHistory span#M_layout_content_PCDZ_MSBLJUO_ctl00_webInputFilterForm_btnViewTransaction_C, .AchTransferHistory span#M_layout_content_PCDZ_MSBLJUO_ctl00_webInputFilterForm_btnViewTransfer_C, .AchBatchGrid span#M_layout_content_PCDZ_MM0N4MD_ctl00_webInputFilterForm_btnView_C { margin-left: 10px; margin-top: -18px; } /****************************************** ADDS SPACING ON SECURITY QUESTION FIELDS ******************************************/ .SetupProfile .module-single input[type="text"], .UserDetails .module-single input[type="text"], .ChangeProfile .module-single input[type="text"] { margin-top: 10px !important; margin-bottom: 20px !important; } /****************************************** MOVES BUTTONS ON SECURITY QUESTIONS ******************************************/ .SetupProfile .submit_buttons, .UserDetails .submit_buttons, .ChangeProfile .submit_buttons { justify-content: start; } /****************************************** REMOVE QUESTION MARK ON USER ENTITLEMENTS ******************************************/ .FIEntitlements span.callout_indicator, .UserEntitlements span.callout_indicator { display: none; } /****************************************** ALIGN DATA ON ENTITLEMENTS INCLUDING DOLLAR SIGNS AND MONETARY VALUES ******************************************/ .ServicePackageEntitlements table.feature-set-grid td, .BusinessEntitlements table.feature-set-grid td, .FIEntitlements table.feature-set-grid td, .UserEntitlements table.feature-set-grid td, .SecondaryUserEntitlements table.feature-set-grid td{ vertical-align: middle; } /****************************************** FIX SOME BUTTON HEIGHTS ******************************************/ .MakeMultipleTransfers submit-button#M_layout_content_PCDZ_MJ58WBP_ctl00_reviewSubmitButton, .MakeMultipleTransfers submit-button#M_layout_content_PCDZ_MJ58WBP_ctl00_amountSubmitButton, .ChangeEmail input#M_layout_content_PCDZ_MK6RMMP_ctl00_cmdConfirm, .DepositCheck input#M_layout_content_PCDZ_MB2C30Z_ctl00_ctl00_webInputForm_grpEditor_btnSubmit { height: 45px; } /****************************************** ROUTING NUMBER ON ADD EXTERNAL ACCOUNT PAGE ******************************************/ .EditExternalAccount input#M_layout_content_PCDZ_MJPGL4E_ctl00_webInputForm_grpAch_txtRoutingNumber { min-width: 240px; } /****************************************** DISCLOSURE DETAILS EDITING MODULE FIXES ******************************************/ /* REPAIRS BOTH HORIZONTAL AND VERTICAL SPACING */ div[id*="M3UU5AP"][id*="txtHtmlContent_HtmlEditor"] { width: 99% !important; margin-bottom: 30px; } [id*="M3UU5AP"][id*="txtHtmlContent_HtmlEditorModule"] > div:nth-child(2) { height: 5px !important; } /* REMOVES EXCESS HORIZONTAL LINES */ .Default.RadEditor .reModule { border-top: none; } /* REMOVES EXCESS HORIZONTAL LINES */ .reWrapper_corner, .reWrapper_center, .reLeftVerticalSide, .reRightVerticalSide, td[id*="M3UU5AP"][id*="txtHtmlContent_HtmlEditorModule"] { display: none; } /* MAKES CHECKBOXES FOR MULTIPLE LOCATION PAGES LIST VERTICALLY INSTEAD OF HORIZONTALLY */ span[id*="M3UU5AP"][id*="webInputForm_cblLocationPage"] { display: block; } /****************************************** LOCATION PAGE FIXES ******************************************/ /* MOVES THE TIME POPUP ICON SO IT IS ALIGNED PROPERLY */ .Location tr.table_header td { padding-left: 3px !important; } /* GIVES A NICE WIDTH TO PHONE FIELDS */ form[action*='Location'] span[id*='diPhoneNumberMulti'] input{ width: 89px !important; } /* MOVES THE ADDRESS FIELD TO THE LEFT */ .Location td[colspan]:not([colspan="1"]) { text-align: initial; } /****************************************** FINANCES ADMINISTRATION PAGE FIXES ******************************************/ /* REMOVES EXCESS HORIZONTAL LINES */ .FinancesAdministration table > tbody > tr, .FinancesAdministration .module-single table tr { border-bottom: none; } /* MOVES THE SUBMIT BUTTON */ .FinancesAdministration input[type="submit"] { margin-top: inherit !important; } /****************************************** MULTIPLE TEXT FIELD FIXES ******************************************/ .AddLinkedProfile input[type="text"], .BatchTemplates input[type="text"], .FIEntitlements input[type="text"], .FinancesAdministration input[type="text"], .FinancesOverview input[type="text"], .FinancesOverview select, .Location input[type="text"], .ServicePackageEntitlements input[type="text"], .ServicePackageEntitlements select, .BusinessEntitlements input[type="text"], .BusinessEntitlements select, .UserDetails input[type="text"], .UserEntitlements input[type="text"], .UserEntitlements select, .SecondaryUserEntitlements input[type="text"], .SecondaryUserEntitlements select { min-width: inherit; } /****************************************** PAGINATION ******************************************/ .FinancesOverview a[id*="pager"], .AccountActivity table[id*="transactionsGrid"] td[colspan="6"] a[href*="transactionsGrid"], .AccountActivity table[id*="transactionsGrid"] td[colspan="5"] a[href*="transactionsGrid"], .table_pagination a:link, .table_pagination a:visited { padding: 0px 6px; border: 1px solid #93abd0; /* Default */ background: #C3D9F2; /* Override */ background: ; font-weight: bold; } .AccountActivity [id*="transactionsGrid"] > tbody > tr:nth-child(n) > td > span { padding: 6px 6px; margin: 0; } .FinancesOverview ul.pages_container { margin: 0 auto; text-align: center; display: table; } .FinancesOverview .page_active { background: transparent !important; border: none !important; } .FinancesOverview .pages_container li { padding-right: 10px; } /****************************************** DEPOSIT CHECKS ******************************************/ .DepositCheck button#imgFront, .DepositCheck button#imgBack { background: #ffffff; } button#imgTwoStepBack, button#imgTwoStepFront { height: 64px; } button.rdc-camera { background-image: url(content.aspx?theme=Theme4&color1=%23ffffff&image=svg/camera-solid.svg) !important; background-color: #0f4b8f; background-repeat: no-repeat !important; background-position: center !important; background-size: 53px; border: none; width: 100%; padding-top: 20px; padding-bottom: 20px; } button.rdc-camera:hover { cursor: pointer; } /****************************************** FIXES FORM ALIGNMENT ON PROMOTION DETAIL PAGE ******************************************/ .PromotionDetail .selectmenu-wrapper { vertical-align: middle; } /****************************************** FIXES DISPLAY OF MULTIPLE TRANSFER DELETE TEMPLATE CONFIRMATION ******************************************/ .MakeMultipleTransfers #M_layout_content_PCDZ_MJ58WBP_ctl00_messageOverlay > div > div.overlay-text > p:nth-child(1) { color: #ffffff; } .MakeMultipleTransfers .overlay-header { background-color: transparent; } .MakeMultipleTransfers .laguna-message-overlay .overlay-close-icon { display: none; } /****************************************** REMOVES BOTTOM LINE BORDER ON SPECIFIC TABLES ******************************************/ .Budget [id*="MJIUVBN"][id*="pnlDateSelector"] > table > tbody > tr, .FinancesOverview [id*="MJ2H9GH"][id*="pnlDateSelector"] > table > tbody > tr { border-bottom: none; } /****************************************** WIRE FILE PROCESSING FORM FIXES ******************************************/ .WireFileProcessing table.table_data .table_header > th, .WireFileProcessing .module-single table th { padding: 0px !important; padding-right: 3px !important; } /****************************************** SECONDARY USER FORM SPACING ******************************************/ @media screen(min-width: 876px) { .SecondaryUserDetails div[id*="MKBI81A"][id*="RightZone"] { margin-left: 30px; } } /****************************************** CHANGE USER ID / EMAIL FORM SPACING ******************************************/ span[id*="MK6RMMP"][id*="lblEmailAddress"], span[id*="MGMWUCW"][id*="lblLoginName"] { margin-bottom: 30px; } /****************************************** REMOVES SELECT MENU LIST ARROWS IN IE ******************************************/ select::-ms-expand { display: none; } /****************************************** RESTORE SELECT MENU LIST ARROWS ON SOME PAGES FOR IE ******************************************/ .FinancesOverview .transactions_display_container select::-ms-expand, .FinancesOverview form#transactionSplitEditor select::-ms-expand { display: block; } /****************************************** RESTORE SELECT MENU LIST ARROWS ON SOME PAGES ******************************************/ .FinancesOverview .transactions_display_container select, .FinancesOverview form#transactionSplitEditor select { -webkit-appearance: menulist; -moz-appearance: menulist; -ms-appearance: menulist; appearance: menulist; } /****************************************** RESTORES SELECT MENU LIST ARROWS IN SPECIFIC LOCATIONS ******************************************/ .ui-datepicker .select-container, .ServicePackageEntitlements [id*="featureSetEditor"] .select-container, .UserEntitlements [id*="featureSetEditor"] .select-container { position: relative; display: inline; } .ui-datepicker .select-container:after, .ServicePackageEntitlements td.overridden .select-container:after, .UserEntitlements [id*="featureSetEditor"] .select-container:after { content: ""; width: 0; height: 0; position: absolute; pointer-events: none; border-left: 5px solid transparent; border-right: 5px solid transparent; top: .5em; right: .75em; border-top: 8px solid black; } /****************************************** REMOVES SELECT MENU LIST ARROWS IN SPECIFIC LOCATIONS ******************************************/ .ServicePackageEntitlements [id*="MLVK1FW"][id*="featureSetEditor"] > tbody > tr:nth-child(21) > td:nth-child(n+5) > div, .ServicePackageEntitlements [id*="MLVK1FW"][id*="featureSetEditor"] > tbody > tr:nth-child(23) > td:nth-child(n+5) > div, .ServicePackageEntitlements [id*="MLVK1FW"][id*="featureSetEditor"] > tbody > tr:nth-child(85) > td:nth-child(n+5) > div { display: none; } /****************************************** FIX FOR MONEY FIELD ON "INITIATE MULTIPLE WIRE TRANSFERS" PAGE ******************************************/ .Multiple input.input_money { width: 135px !important; } /****************************************** TEXT FIELD ON QUICK TRANSFER ******************************************/ span[id*="txtAmountOption"] .dollar > span, .left-col input[type="text"] { background-color: #ffffff; } /****************************************** FIX FOR BUSINESS DROPDOWN BOX ******************************************/ .BusinessACHFileProcessing .rcbScroll.rcbWidth.rcbNoWrap { height: 168px !important; } .BusinessACHFileProcessing .RadComboBox .rcbInputCell .rcbInput { border-width: 1px; border-style: solid; } .BusinessACHFileProcessing .RadComboBox table td.rcbArrowCell { display: none; } .BusinessACHFileProcessing table > tbody > tr { border: none; } /****************************************** CENTER SUBMIT BUTTON FOR QUICK TRANSFER ******************************************/ [id*="MSFXYQV"][id*="SubmitButtons"].submit_buttons { justify-content: center; } /****************************************** FIX USER ADMINISTRATION FORM SPACING ******************************************/ .Users div[id*="MFK7WC4"][id*="webInputForm_LC_Right"] { margin-left: 30px; } /****************************************** FILE SELECTOR SIZING ******************************************/ [id*="M5R69S4"][id*="moduleForm"] > span.submit_buttons.input-field > label, [id*="MIXMS0K"][id*="pnlAttachFile"] > div > div > label.label-uploads, [id*="MIXMS0K"][id*="pnlAttachFile"] > div > div > label.label-uploads.active { width: 40%; } /****************************************** FILE UPLOAD LABEL ******************************************/ .MessageDetail [id*="pnlAttachFile"] > div > div > label:nth-child(1) { display: none; } /****************************************** ALIGNMENT FIXES FOR "EDIT SECURE FORM" PAGE ******************************************/ /* MOVE "SUBMIT BUTTONS" BLOCK ON ADD NEW PAGE */ .EditSecureForm [id*="MNBPEW"][id*="pnlFieldsPanel"] > p > div > div.selectmenu-container { left: -69px; } /* MOVE ADD BUTTON ON "EDIT" PAGE NEXT TO FIELDS/CONTROLS */ .EditSecureForm input[id*="MNBPEW"][id*="btnAddField"] { left: -66px; position: relative; } /* REPOSITIONS DROPDOWN BOX ON EDIT PAGE */ .EditSecureForm [id*="MNBPEW"][id*="pnlFieldsPanel"] > p { width: fit-content; flex-direction: unset; } /* MOVE SUBMIT BUTTONS ON "ADD SECURE FORM" PAGE */ .EditSecureForm #secure_form > table > tbody > tr:nth-child(16) > td:nth-child(2) > p { left: -256px; position: relative; } /****************************************** ALIGNMENT FIXES FOR "SELECT MONTH" DROPDOWN ******************************************/ .Budget .selectmenu-container { margin-left: 37px; } .FinancesOverview .selectmenu-container { margin-left: 22px; } /****************************************** ALIGNMENT FIXES FOR "DISCLOSURE PREVIEW" DROPDOWN ******************************************/ .DisclosureViewer .ui-selectmenu-menu ul { margin-left: 8px; } /****************************************** BUTTON SIZE FIXES FOR "REPORT DEFINITION" PAGE ******************************************/ .ReportDefinition span[id*=grpReportDefinition_grpFilter_btnAddFilter_C] { padding-left: 10px; } .ReportDefinition span[id*=grpReportDefinition_grpFilter_btnAddFilter_C] > span > input[type="submit"] { margin: -1px 0px !important; } .ReportDefinition div[id*=grpViewQueryColumns_btnAdd_C] span input[type="submit"], .ReportDefinition div[id*=grpViewQueryColumns_btnRemove_C] span input[type="submit"] { width: 200px !important; } /****************************************** REMOVE EXTRA CHECKBOXES ON "REPORT DEFINITION" PAGE ******************************************/ .ReportDefinition #Module-MBV96BP > div.module-container.mainmodule > table:nth-child(4) > tbody > tr:nth-child(2) > td > table > tbody > tr:nth-child(1) > td:nth-child(3), .ReportDefinition #Module-MBV96BP > div.module-container.mainmodule > table:nth-child(4) > tbody > tr:nth-child(2) > td > table > tbody > tr:nth-child(2) > td:nth-child(1) { display: none; } /****************************************** MOVE CANCEL AND SUBMIT BUTTONS ON "SECURE FORMS CATEGORIES" EDIT PAGE ******************************************/ [id*="MMO63NF"][id*="pnlCategoryEditor"] > table > tbody > tr:nth-child(3) > td:nth-child(2) > p { margin-left: -140px; } /****************************************** MOVE TEXT DESCRIPTIONS ******************************************/ .DomainManagement .form_assistance { padding-top: 3px; padding-left: 0px; } /****************************************** ALIGN DROPDOWNS ON REPORTS FORMS ******************************************/ .TextBankingAdminReports .ui-selectmenu-menu ul, .TextBankingStandardReports .ui-selectmenu-menu ul, .StandardReports .ui-selectmenu-menu ul { margin-left: 8px; } /* SPACES THE "TO" AND "FROM" HORIZONTALLY */ .TextBankingAdminReports span[id*="M3MNK0M"][id*="DateRangeParm_EndDate"], .TextBankingAdminReports span[id*="M3MNK0M"][id*="DateRangeParm_StartDate"], .TextBankingStandardReports span[id*="M3MNK0N"][id*="DateRangeParm_EndDate"], .TextBankingStandardReports span[id*="M3MNK0N"][id*="DateRangeParm_StartDate"], .StandardReports span[id*="MXN9DAD"][id*="DateRangeParm_EndDate"], .StandardReports span[id*="MXN9DAD"][id*="DateRangeParm_StartDate"] { left: -4px; top: 5px; position: relative; } /* SPACES THE "TO" AND "FROM" VERTICALLY */ .TextBankingAdminReports [id*="M3MNK0M"][id*="DateRangeParm"] > span:nth-child(2) > label, .TextBankingAdminReports [id*="M3MNK0M"][id*="DateRangeParm"] > span:nth-child(5) > label, .TextBankingStandardReports [id*="M3MNK0N"][id*="DateRangeParm"] > span:nth-child(2) > label, .TextBankingStandardReports [id*="M3MNK0N"][id*="DateRangeParm"] > span:nth-child(5) > label, .StandardReports [id*="MXN9DAD"][id*="DateRangeParm"] > span:nth-child(2) > label, .StandardReports [id*="MXN9DAD"][id*="DateRangeParm"] > span:nth-child(5) > label { margin-top: 5px } /****************************************** ALIGN DISCLOSURE FORMS ON DISCLOSURE SUMMARY ******************************************/ /* MAKES ALL TABLE CELLS EVEN */ .OneTimePayment .table_data td, .DisclosureSummary .table_data td { vertical-align: baseline; } /* REMOVES TINY BORDER LINES */ .DisclosureSummary .module-single table tr, .DisclosureViewer .module-single table tr { border: none; } /* REMOVES EXTRA BLANK ROW */ .DisclosureViewer #Module-MIBQP3Q > div.module-container.mainmodule > table > tbody > tr:nth-child(2) { display: none; } /****************************************** ALIGNS DOLLAR SIGN ******************************************/ .OneTimePayment .dollar::before, .DepositCheck .dollar::before, .EditUser .dollar::before { top: 21px; left: 15px; } .EditUser [id*="MV1IG4"][id*="txtAch1Day"] > span > span, .EditUser [id*="MV1IG4"][id*="txtAch30Day"] > span > span { top: 11px; right: 29px; position: relative; } .DepositCheck .dollar::before { top: 0px; left: 15px; } .DepositCheck div[id*="_txtAmount_C"] span.dollar { left: -8px; } .mobile-device.DepositCheck div[id*="_txtAmount_C"] span.dollar { left: 0px; } /****************************************** ALIGN DISCLOSURE FORMS ON DISCLOSURE SUMMARY ******************************************/ /* MAKES ALL TABLE CELLS EVEN */ .OneTimePayment .table_data td { vertical-align: middle; } /****************************************** DESCRIPTION ON STANDARD REPORTS PAGE ******************************************/ .StandardReports .message_queue { text-align: left; margin-bottom: 30px; } /****************************************** TABLE ALIGNMENTS ON STANDARD REPORTS PAGE ******************************************/ .StandardReports .table_data td { vertical-align: middle; } /****************************************** FIXES FOR QUICKBOOKS WEB CONNECT FORM ******************************************/ /* TAKES AWAY THE BORDERS */ .WebConnect .module-single table tr { border-bottom: none; } /* FIXES VERTICAL SPACING */ .WebConnect tbody> tr:nth-child(2) > td.FieldLabel, .WebConnect tbody> tr:nth-child(3) > td.FieldLabel { padding-top: 20px !important; } /****************************************** ALIGNS CHECKBOXES ON THE ROLE MANAGEMENT PAGE ******************************************/ .RoleManagement [id*="MSLTXV4"][id*="grdLinkedRoles"] > tbody > tr:nth-child(n+2) > td.input-field { text-align: center; } /****************************************** FIXES SPACING IN ADMINISTRATION PAGES FOR DISCLOSURE DATE FIELDS ******************************************/ .DisclosureDetails [id*="M3UU5AP"][id*="dateRangeControl"] > span:nth-child(4), .DisclosureAcceptance [id*="M18Z9YQ"][id*="dateRangeControl"] > span:nth-child(4) { margin-left: 20px; margin-right: 5px; } .DisclosureDetails [id*="M3UU5AP"][id*="dateRangeControl"] > span:nth-child(1), .DisclosureAcceptance [id*="M18Z9YQ"][id*="dateRangeControl"] > span:nth-child(1) { margin-right: 5px; } /****************************************** FIXES SPACING OF TEXT AND USER COUNT ON USER LIST DETAIL PAGE ******************************************/ .UserListDetail .form_assistance { padding: 3px 0 0 0px; } .UserListDetail span[id*=PCDZ_MKRCPJJ][id$=btnClearList_C] { margin-top: 12px; margin-left: -10px; } /****************************************** "STOP PAYMENTS" AND "EDIT UNLINKED ACCOUNT" FORM SPACING FIX ******************************************/ .phone-device.EditUnlinkedAccount input[id*="M21WXSM"][id*="txtNickName"], .phone-device.StopPayments [id*="MLY4KCZ"][id*="checkAmount"] { margin-bottom: 20px !important; } /****************************************** MAKE SECURITY QUESTIONS BIGGER ******************************************/ .desktop-device.SetupProfile select, .desktop-device.SetupProfile .selectmenu-container, .desktop-device.UserDetails select, .desktop-device.UserDetails .selectmenu-container, .desktop-device.ChangeProfile select, .desktop-device.ChangeProfile .selectmenu-container { min-width: 540px !important; } /****************************************** SHORTEN CALENDAR DATE FIELDS ******************************************/ .SMSMessageHistory input[type="text"], .ViewAlerts input[type="text"], .ViewTransfers input[type="text"] { min-width: 160px; } /****************************************** SMS MESSAGE HISTORY BUTTONS ******************************************/ span[id*="MH79YCA"][id*="btnSubmit"], span[id*="MH79YCA"][id*="btnBack"] { position: relative; top: -15px; left: 30px; } .ExtendedAuditDetails .table_data td { word-break: break-all; } /****************************************** SECONDARY USER SPACING ******************************************/ div[id*="M7N40AN"][id*="RightZone"] { margin-left: 70px; } /****************************************** REMOVES THE ASTERISK FROM "STATUS" ******************************************/ .MessageDetail div[id*="pnlNewMessageSection"] label[id*="lblStatus"]:before { content: "" !important; } /****************************************** SPACING ON CONTENT MANAGER ******************************************/ div[id*="MZI2BVO"] span { margin-left: 5px; } /****************************************** ESTATEMENTS OOB ACCOUNT DROPDOWN MENU Goes with Dropdown partial config ******************************************/ @media screen and (max-width: 495px), screen and (device-width: 480px), screen and (device-width: 360px), screen and (device-width: 320px), screen and (max-device-width : 375px) { .phone-device ul[id*=MM9M05R][id$=_lstAccounts-menu] { left: 5%; } } /**************************************** Positive Pay>Tolerance Textbox on Tablets ******************************************/ .tablet-device input[id*=txtToleranceValue] { max-width: 350px; min-width: 350px; } /****************************************** RADIO BUTTONS ON MOBILE NICKNAMES ******************************************/ .oldie input[type="radio"]::before { font-family: 'fontawesome'; display: block; margin-top: -1px; letter-spacing: 1rem; font-size: 1.5rem; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e941"; } /* Secure Forms category color */ h4.secure_form_cat_underline { /* DEFAULT */ color: #000000; border-bottom: 1px solid #000000; /* OVERRIDE */ color: ; border-bottom: 1px solid ; } /* prevent iPhone 3D touch */ .ui-selectmenu-menu li a{ -webkit-user-select:none; -webkit-touch-callout: none; } /****************************************** FIX FOR NOTIFY LABEL ON TRANSFERS ******************************************/ [id*="chkNotify"] > span:nth-child(n) > span > label { color: #000000; } /* Tables ==================================================== */ /*==================================================== /* Table Setting ==================================================== */ /* Table of contents ==================================================== - General Table - Tables With Links - Table Header - Table Header Sortable - Table Specials - Dollar Sign In Input Field - Forms with Callouts - Callout Popup - Form Overides - Form Spacing Overides - User Activity Page */ /* General Table ==================================================== */ table, th, td { border: none; } table, table.table_data { display: table; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; border:0px solid transparent; background: transparent; /* Changeable Items */ margin: 0 0 1.8rem 0; /* Overide Defaults ^ */ background: ; border-width: ; border-color: ; /*Has to be the same color as row divider*/ } /* Make ever other row a different color: */ body:not(.phone-device) .row_alternating { /* Defaults */ background: rgba(249,249,249,255); /* Overide Defaults ^ */ background: #f5f5f5; } /* Table Row Divider: */ table > tbody > tr, table.table_data > tbody > tr, .module-single table tr { transition: all .25s ease-in-out; border-bottom: 1px solid transparent; /* Defaults */ border-bottom-color: #e4e4e4; /* Overide Defaults ^ */ border-bottom-color: ; } /* Table Column Divider: */ table tbody tr td:not(:last-child) { border-right:1px solid transparent; border-right-color: ; } /* Hover state on tr rows: */ table.table_data > tbody > tr:hover { background: #ffffff; color: ; } /* Left align all text in table: */ table thead tr th, table tbody tr th , table tbody tr td { text-align: left; } td, th, .table_data td { padding: 1.5rem; display: table-cell; text-align: left; vertical-align: top; border-radius: 0px; border: none; word-wrap: break-word; } /* Assures hidden fields remain turned off on Budget page*/ .Budget .pfm_hidden { display: none !important; } /* Right align TD with amounts config file is needed: */ table .push-right, .table_data .push-right, [id*="MJYTR84"] .table_data .pfm_data { text-align: right; } /* Fixes the Transfers History amount Column in the table for tablets */ .tablet-device.TransferActivity table td.align-right-padded, .tablet-device.TransferActivity td.align-right-padded.wide-screen-only, .tablet-device.TransferActivity table[id*=M30P3JI].table_data td:nth-child(5) { text-align: right; padding-right: 15px !important; } /* Tables with links ==================================================== */ table > tbody > tr > td > a { display: inline; align-items: center; } table > tbody > tr > td.td-link, table > tbody > tr > td.td-link > a { transition: all .25s ease-in-out; } /* Highlight a td with a link on hover table > tbody > tr:hover > .td-link { background: $DARKER($white,15); } */ /* Adds icon after link in table ---Lori did not like table > tbody > tr > td.td-link > a::after { margin-left: 1rem; transition: all .25s ease-in-out; position: relative; display: inline-block; font-family: 'fontawesome'; color: transparent; vertical-align: bottom; content: '\e9ef'; } */ /* Hover state of a when tr is hovered: */ table > tbody > tr:hover > td.td-link > a { color: rgba(14,75,143,255); } /* Hover state on the link need underline : */ table > tbody > tr > td.td-link > a:hover{ /* default */ text-decoration: underline; /* override */ text-decoration: underline; } /* Table Header ==================================================== */ table.table_data tr.table_header { padding: 0; border-bottom: 1px solid transparent; background: transparent; /* Defaults */ border-color: #e4e4e4; color: #000000; /* Overide Defaults ^ */ background: ; border-bottom-width: ; border-color: ; color: #000000; } /* Overide tr hover color: */ table.table_data tr.table_header:hover { background: transparent; background: ; } table.table_data .table_header > th, .module-single table th { padding: 1.5rem !important; vertical-align: top; word-break: normal; white-space: normal; /* Defaults */ font-size: 1.5rem; color: #000000; font-weight: 600; /* Overide Defaults ^ */ font-size: ; color: #000000; font-weight: ; font-family: Source Sans 3; text-transform: ; } /* Table Header Column Divider: */ table.table_data .table_header > th:not(:last-child){ border-right:1px solid transparent; border-right-color: ; } /* Overide alignment in module.css */ th.pfm_data { text-align: left; } /* Table Header Sortable ==================================================== */ /* Table header link settings*/ table.table_data .table_header > th.th-link > a { padding-right: 0; text-align: left; text-decoration: none; white-space: nowrap; /* Defaults */ font-size: 1.5rem; color: #000000; font-weight: 600; /* Overide Defaults ^ */ font-size: ; color: #000000; font-weight: ; } .phone-device table.table_data .table_header > th.th-link > a { white-space: normal; } /* Table header link hover to have underline*/ table.table_data .table_header > th.th-link > a:hover{ text-decoration: underline; } /* Sort Icon presort */ table.table_data .table_header > th.th-link > a::after { margin-left: 1rem; transition: all .25s ease-in-out; display: inline-block; font-family: 'fontawesome'; font-weight: normal; font-size: 1rem; /* Defaults */ color: #000000; /* Overide Defaults ^ */ color: #000000; content: '\ea1b'; } /* Icon for Acending sort: */ table.table_data .table_header > th.th-link > a.asend::after { content: '\ea21'; opacity: 1; } /* Icon for Decending sort: */ table.table_data .table_header > th.th-link > a.dsend::after { content: '\ea23'; opacity: 1; } table.table_data .table_header > th.th-link > a:hover::after { text-decoration: none !important; } /* Hides the default image: */ th.th-link img{ display: none !important; } /* Table Specials ==================================================== */ /* Makes any td with a col span more then 1 to center text: */ td[colspan]:not([colspan="1"]) { text-align: center; } /* IF td has a span give it some padding */ td span:first-child{ margin: 0 1rem 0 0; } /* Loose table header */ .module-single table th { padding: 1.5rem; /* Defaults */ font-size: 1.5rem; color: #000000; font-weight: 600; /* Overide Defaults ^ */ font-size: ; color: #000000; font-weight: ; } /* Table Overides ==================================================== */ /* Table width not 100% module.css: */ .table_data.auto_width { width: 100%; } /* Vertical align table data: */ .table_data.td-bottom td { vertical-align: middle; } /* Entitlements Table ==================================================== */ table.feature-set-grid { border-collapse: collapse; margin-left: 0; table-layout: fixed; } /* Remove not working callout icon: */ td.feature-name span.callout_indicator { display: none; } /* Overide headline text module.css: */ table.feature-set-grid td span.root-feature { font-size: 1.3rem; color: #000000; color: ; font-weight: 600; } table.feature-set-grid td.feature-name { min-width: 2rem; width: auto; padding: 1.5rem; text-align: left; white-space: pre-wrap; } /* Overide money symbol module.css: */ table.feature-set-grid td.unit { font-size: 1.5rem; color: #000000; min-width: 1rem; width: 1rem; padding: 0 0 0 1rem; } /* Overide money amount module.css: */ table.feature-set-grid td.limit { border-left: none; min-width: 1rem; width: 1rem; padding-right:1rem; text-align: left; font-size: 1.5rem; color: #000000; } /* Overide border module.css: */ table.feature-set-grid td { box-sizing: border-box; border: 1px solid transparent; /* Defaults */ border-color: #e4e4e4; /* Overide Defaults ^ */ border-color: ; } td.setting, table.feature-set-grid th.limit { min-width: 50px; width: 150px; padding: 1.5rem; text-align: center; word-wrap: break-word; } table.feature-set-grid th.limit{ text-align: left; } /* entitlements header: */ table.feature-set-grid > thead > tr { padding: 1.5rem; border-bottom: 1px solid transparent; background: transparent; vertical-align: bottom; /* Defaults */ border-color: #e4e4e4; /* Overide Defaults ^ */ background: ; border-bottom-width: ; border-color: ; } /* entitlements header first child: */ table.feature-set-grid th.feature-name { min-width: 0; padding-left: 1.5rem; padding: 1.5rem; text-align: left; width: auto; } /* Change the orange to a color: */ table.feature-set-grid .overridden { background: rgba(135,165,199,255); } /*Top Expenses Module AccountSummary.aspx */ #summaryKey { margin: 0; white-space: nowrap; } /*Table in alerts.aspx */ table.form_group { display: table; padding-top: 0; } table.form_group td { padding: .5rem 1.5rem; } /* Overwrite module.css - Makes any th followed by a td in the same row align vertically to middle */ th~td { vertical-align: top !important; } .ManageTransfers th~td, .ManageTransfers table.item_details td { vertical-align: middle !important; } .th-link { white-space: nowrap; } .tile-close-icon-area { display: none } /* Fix large gap at top of user activity page UXPIPE-210 */ .desktop-device table[id*=MFG44PP] { position: relative; } /****************************************** ENTITLEMENTS PAGE FIXES ******************************************/ /* HEIGHT OF THE TOP ROW ANGLED TEXT - EVEN THOUGH IT SAYS "WIDTH" THIS CONTROLS THE HEIGHT BECAUSE OF THE ANGLE */ table.feature-set-grid th.group-name span { width: 240px; } /* SPACING OF THE TOP ROW ANGLED TEXT */ table.feature-set-grid th.group-name { min-width: 50px; width: 62px; height: 124px; letter-spacing: 0rem; } /* SPACING OF THE INDIVIDUAL TABLE CELLS */ td.setting { width: 62px; } /* SPACING OF THE TOP ROW ANGLED TABLE CELLS */ table.feature-set-grid td.feature-name { width: 317px; } /* SPACING OF THE TOP ROW FIRST CELL */ table.feature-set-grid th.feature-name { width: 322px; } /* SPACING OF THE TOP ROW FIRST CELL OF FEATURE MAP */ [id*="MQ8SC1O"][id*="multiFeatureSetViewer_grdMultiFeatureSetHeader"] > thead > tr > th.feature-name , [id*="M949T2I"][id*="multiFeatureSetViewer_grdMultiFeatureSetHeader"] > thead > tr > th.feature-name { width: 363px; height: 200px; } /* SPACING OF THE TOP ROW TEXT */ table.feature-set-grid th.group-name span { left: 6px; } /* SPACING OF THE TOP ROW TEXT ON ROLE ENTITLEMENTS */ .RoleEntitlements table[id*="MYQ2558"][id*="webInputForm_featureSetEditor_grdFeatureSet"] { margin-top: 40px; } /* HORIZONTAL SCROLL ON EDIT ENTITLEMENTS */ .RoleEntitlements div[id*="MYQ2558"][id*="webInputForm_featureSetEditor"]{ overflow-x: auto; } /* HELPS ALIGN TOP ROWS BY ELIMINATING PADDING */ .RoleEntitlements table, .RoleEntitlements table.table_data, .FIEntitlements table, .FIEntitlements table.table_data, .BusinessEntitlements table, .BusinessEntitlements table.table_data, .UserEntitlements table, .UserEntitlements table.table_data { margin: 0px; } /* HELPS ALIGN TOP ROWS BY ELIMINATING PADDING */ .ServicePackageEntitlements .module-single table th, .BusinessEntitlements .module-single table th, .RoleEntitlements .module-single table th, .FIEntitlements .module-single table th, .UserEntitlements .module-single table th { padding: 0px !important; } /* MOVES "ALLOCATIONS" AND "PROFILES" TABLES LOWER SO THE LAST CHECKBOX IN THE TABLE ABOVE FUNCTIONS */ .UserEntitlements table[id*="M949T2I"][id*="webInputForm_featureSetEditor_grdProfiles"], .UserEntitlements table[id*="M949T2I"][id*="webInputForm_featureSetEditor_grdAccounts"] { margin-top: 70px; } /* ADDS SPACING FOR VERY LONG SERVICE PACKAGE NAMES */ .ServicePackageEntitlements table.feature-set-grid th.group-name { height: 210px; left: 46px; } /* MAKES TEXT FIELDS WIDER ON USER AND BUSINESS ENTITLEMENT FORMS */ .BusinessEntitlements table.feature-set-grid input[type=text], .UserEntitlements table.feature-set-grid input[type=text] { width: 150px; min-width: 100px; } /****************************************** REMOVES LINE UNDER CALENDAR TIME ON CALENDAR SERVICES ******************************************/ .RadPicker table.rcTable tr { border-bottom: 0px; border-bottom-color: none; } /****************************************** REPOSITIONS CALENDAR TIME ON CALENDAR SERVICES ******************************************/ div[id*="M3K8KO5"][id*="tod_wrapper"], div[id*="MS99VYU"][id*="tod_wrapper"] { display: -ms-grid !important; margin-left: -9px; } /****************************************** REMOVES LINE UNDER TABLES CELLS ON STANDARD REPORTS ******************************************/ .StandardReports .module-single table tr { border-bottom: 0px; } /****************************************** FIXES TABLE WIDTH ON MESSAGE CENTER ******************************************/ .MessageCenter div#search_options { padding: 0px !important; } .MessageCenter td, .MessageCenter th, .MessageCenter .table_data td { padding: 3px; } .MessageCenter p.submit_buttons { margin-top: -20px !important; } /****************************************** TABLE WIDTH FOR WIRES ******************************************/ .Multiple .table_data.auto_width { width: 97%; } /****************************************** REMOVE EXCESS PADDING ON BANNER TABLE CELLS ******************************************/ #page-top-mcmbanner > div > table > tbody > tr > td { padding: 0px; } /****************************************** MOVES ROWS ON TARGETED PAGES BACK TO THE LEFT ******************************************/ .MessageCenter td[colspan]:not([colspan="1"]), .Multiple td[colspan]:not([colspan="1"]), .PromotionDetail td[colspan]:not([colspan="1"]) { text-align: left; } .MessageCenter #search_options > table > tbody > tr:nth-child(11) > td.td-link { text-align: left !important; } /****************************************** FIX STOP PAYMENTS CONFIRMATION ******************************************/ .StopPayments th~td { vertical-align: middle !important; } /****************************************** PROPERLY ALIGN AMOUNTS ON STOP PAYMENTS HISTORY ******************************************/ .StopPaymentHistory [id*="MWYKNI6"][id*="history"] > tbody > tr.table_header > th:nth-child(3), .StopPaymentHistory [id*="MWYKNI6"][id*="history"] > tbody > tr:nth-child(n) > td:nth-child(3) { text-align: right; } /****************************************** SMALLER CELL ON ACH BACH GRID EDIT TABLE ******************************************/ .AchBatchGrid td.col_align_center.col_actions.col_actions_left { width: 30px; } /****************************************** TABLE WIDTH FIX FOR WIDE TABLES ******************************************/ .WireFileProcessing table.table_data .table_header > th.th-link > a, .ActivitySummaryReport table.table_data .table_header > th.th-link > a, .AchBatchDetails table.table_data .table_header > th.th-link > a { white-space: normal; } /****************************************** TABLE WIDTH FIX ON ADMINISTRATIVE USERS ******************************************/ .Users [id*="MFK7WC4"][id*="searchForm"] label { width: inherit !important; } /****************************************** MESSAGE CENTER BORDER LINES ******************************************/ .MessageCenter table > tbody > tr, .MessageCenter .module-single table tr, .MessageCenter div#search_options { border: none !important; } /****************************************** HORIZONTAL SCROLL ON HUGE STANDARD REPORTS PAGE ******************************************/ .StandardReports .module-container.graphs .module-single > div, .StandardReports .module-container.mainmodule { overflow-x: auto; } /* Fit more of the table on the screen */ .StandardReports .table_data td { font-size: 10pt; max-width: 65px; } /****************************************** SPENDING CHART BORDER LINES ******************************************/ .FinancesOverview table.jqplot-table-legend, .FinancesOverview tr.jqplot-table-legend { border: none; } /****************************************** HORIZONTAL SCROLL ON ENTITLEMENTS ******************************************/ div[id*="MLVK1FW"][id*="Zone0"] { overflow-x: scroll; } /* CS04290310 - column fix for iPad */ .tablet-device.ios table.table_data .table_header > th { min-width: -webkit-min-content; } /****************************************** WRAP ON BUSINESS ACH ******************************************/ .BusinessACHFileProcessing table.table_data .table_header > th.th-link > a { white-space: normal; } /* Buttons ==================================================== */ /*==================================================== /* Button Settings ==================================================== */ /* Table of contents ==================================================== - Primary Buttons - Secondary Buttons - Disable Buttons */ /* Base Button Settings ==================================================== */ .submit_buttons input[type], .button, input.button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-transform: capitalize; text-decoration: none; white-space: nowrap; cursor: pointer; box-sizing: border-box; outline: none; touch-action: manipulation; transition: all 0.5s; padding: 0 30px; min-width: 120px; margin: 0 0 0 0 !important; margin-right:1rem !important; margin-top: 1.8rem !important; /* Changeable Items */ box-shadow: 0 3px 3px 0 transparent; /* Defaults */ font-weight: 700; min-height: 45px; border: 2px solid transparent; border-radius: 0px; font-size: 1.5rem; /* Overide Defaults ^ */ border-radius: 0px; min-height: 45px; border-width: ; font-size: ; font-weight: bold; font-family: Source Sans 3; text-transform: uppercase; } .Categories input[type="submit"] { margin-top: 0px !important; } /* Make buttons 50% in tablet: */ @media (max-width: 768px){ .submit_buttons input[type], .button, input.button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: flex; flex:1 1 47.5%; margin: 0 .25rem 0 .25rem !important; } } /* Make buttons 100% in mobile: @media (max-width: 495px){ .submit_buttons input[type], .button, input.button, button, input[type="submit"], input[type="reset"], input[type="button"] { flex:1 1 100%; margin: 0 0 0 0 !important; } } */ /* Make buttons 100% in mobile: */ .phone-device .submit_buttons input[type], .phone-device .button, .phone-device input.button, .phone-device button, .phone-device input[type="submit"], .phone-device input[type="reset"], .phone-device input[type="button"] { flex:1 1 100%; margin: 0 0 1.8rem 0 !important; } /* Primary Button Settings ==================================================== */ .phone-device.UnlinkedAccountDetails input[id*="MA3PZPQ"][id*="btnEdit"], .submit_buttons input[type], .button, button, input.button, input[type="submit"], input[type="reset"], input[type="button"] { /* Defaults */ color: #ffffff !important; background: #0f4b8f; border-color: transparent; /* Overide Defaults ^ */ color: #ffffff !important; background: #0F4B8F; border-color: ; } .submit_buttons input[type]:hover, .submit_buttons input:not([disabled]):not([type="file"]):hover, .button:hover, button:hover, input.button:hover, input#modal-help-close:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .submit_buttons input[type]:focus, .button:focus, button:focus, input.button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus, .submit_buttons input[type]:active, .button:active, button:active, input.button:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active { outline: 0; /* Changeable Items */ box-shadow: 0 3px 3px transparent; /* Defaults */ color: #ffffff !important; background: rgba(87,129,176,255); border-color: transparent; /* Overide Defaults ^ */ color: #ffffff !important; background: #002E62; border-color: ; } /* Secondary Buttons ==================================================== */ .submit_buttons input.light_button[type], input.light_button[type], .button_clear, input[id*=btnClearReport].button, input[id*=btnCancelReport].button, .laguna-submit-buttons input.light, a.cancel{ /* Defaults */ background: #ffffff; border-color: #0f4b8f; color: #0f4b8f !important; /* Overide Defaults ^ */ background: #ffffff; border-color: #0F4B8F !important; color: #0F4B8F !important; } .submit_buttons input.light_button[type]:hover, input.light_button[type]:hover, input[id*=btnClearReport].button:hover, input[id*=btnCancelReport].button:hover, .submit_buttons input.light_button[type]:focus, input[id*=btnClearReport].button:focus, input[id*=btnCancelReport].button:focus, input.light_button[type]:focus, .submit_buttons input.light_button[type]:active, input[id*=btnClearReport].button:active, input[id*=btnCancelReport].button:active, input.light_button[type]:active { box-shadow: 0 3px 3px transparent; /* Defaults */ background: rgba(249,249,249,255); border-color: rgba(87,129,176,255); color: rgba(87,129,176,255) !important; /* Overide Defaults ^ */ background: ; border-color: !important; color: !important; } /* Disabled Buttons /* LL Changing disabled buttons from .65 to .4 so we can tell the difference ==================================================== */ .submit_buttons input[type]:disabled, .button:disabled, button:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled, input[type="button"]:disabled { color: rgba(0, 0, 0, 0.3) !important; background: rgba(0, 0, 0, 0.1) !important; border-color:transparent; opacity: .4; cursor:initial; pointer-events: none; } /* Laguna (Tile page) Primary Buttons ==================================================== */ /* Primary Laguna button: */ .laguna-submit-buttons input.button { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; box-sizing: border-box; outline: none; touch-action: manipulation; transition: all 0.5s; padding: 0 30px; min-width: 120px; width: 100%; margin: 0 0 0 0 !important; margin-right: 1rem; /* Changeable Items */ box-shadow: 0 3px 3px 0 transparent; /* Defaults */ font-weight: 700; min-height: 45px; border: 2px solid transparent; font-size: 1.5rem; border-radius: 0px; font-size: 1.5rem; color: #ffffff !important; background: #0f4b8f; border-color: transparent; /* Overide Defaults ^ */ border-radius: 0px; min-height: 45px; border-width: ; font-size: ; font-weight: bold; color: #ffffff; -webkit-text-fill-color: #ffffff; background:#0F4B8F; border-color: ; } .laguna-submit-buttons input.button:hover, .laguna-submit-buttons input.button:focus, .laguna-submit-buttons input.button:active, .laguna-submit-buttons input.button:not([disabled]):hover, .laguna-submit-buttons input.button:not([disabled]):focus, .laguna-submit-buttons input.button:not([disabled]):active { outline: 0; /* Changeable Items */ box-shadow: 0 3px 3px transparent; /* Defaults */ color: #ffffff !important; background: rgba(87,129,176,255); border-color: transparent; /* Overide Defaults ^ */ color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: #002E62; border-color: ; } /* Secondary Laguna button: */ .laguna-submit-buttons input.light{ /* Defaults */ background: #ffffff; border-color: #0f4b8f; color: #0f4b8f !important; -webkit-text-fill-color: #0f4b8f !important; /* Overide Defaults ^ */ background: #ffffff; border-color: #0F4B8F; color: #0F4B8F !important; -webkit-text-fill-color: #0F4B8F !important; } .laguna-submit-buttons input.light:hover, .laguna-submit-buttons input.light:focus, .laguna-submit-buttons input.light:active, .laguna-submit-buttons input.light:not([disabled]):hover, .laguna-submit-buttons input.light:not([disabled]):focus .laguna-submit-buttons input.light:not([disabled]):active { box-shadow: 0 3px 3px transparent; /* Defaults */ background: rgba(249,249,249,255); border-color: rgba(87,129,176,255); color: rgba(87,129,176,255) !important; -webkit-text-fill-color: rgba(87,129,176,255) !important; /* Overide Defaults ^ */ background: ; border-color: ; color: !important; -webkit-text-fill-color: #0F4B8F !important; } /* Disabled Laguna button */ .laguna-submit-buttons input.button:disabled { color: rgba(0, 0, 0, 0.3) !important; background: rgba(0, 0, 0, 0.1); border-color:transparent; opacity: .4; /* Changed from .65 like above */ cursor: initial; pointer-events: none; } /* Defines left margin for the last button in a row (which will be the leftmost button if next rule's flex-direction is set to row-reverse) */ .laguna-submit-buttons submit-button:last-child:not(:only-child) input.button, .laguna-submit-buttons > input.button:last-child:not(:only-child) { margin-left: 0 !important; margin-right: 5px !important; } /* Clears out right margin for the first (rightmost) button in a row */ .laguna-submit-buttons submit-button:first-child:not(:only-child) { margin-right: 0; } /* Reverse laguna Button order (Project 202)*/ .laguna-submit-buttons{ display: flex; flex-direction: row-reverse; } .laguna-submit-buttons span { width: 100%; display: flex; } .laguna-submit-buttons span:not(:last-child) { margin: 0 0 0 1rem } /* Reverse Button Order and alignment of Buttons (Project 202) ==================================================== */ /* This was recommended by P202 to align buttons to the right side: NOTE: if you want to reverse effects change the submit_buttons to: @media (max-width: 1400px) { .submit_buttons { justify-content: flex-end; } } */ .submit_buttons { display: inline-flex; /* This aligns buttons to the left if the screen is greater than 1600px: */ justify-content: flex-end; width: 100%; flex-wrap: wrap-reverse; flex-direction: row-reverse; padding: 0 0 !important; margin-bottom: 1.8rem !important; /*All buttons margin bottom*/ margin-top: 1.8rem; } /* UXPIPE-144 reverse previous/next buttons */ .phone-device ul[id$=transactionsListView]+.submit_buttons { flex-wrap: wrap; } .ChangeAddressPhoneNumber p[id*=MU7KWV5][id*=SubmitButtons] { margin-top: 40px !important; } /* Fix Budget Buttons */ div[id*=MU5RALF] p.submit_buttons { flex-direction: row; justify-content: end; } /* This aligns buttons to left align if screen is less than 1600px: */ @media (max-width: 1600px) { .submit_buttons { justify-content: baseline; } } /* Removes styling from modules.css: */ @media (max-width: 1138px) { .submit_buttons { padding: 0 !important; margin: 0; } } /* Centers buttons at 700px or less: */ @media (max-width: 700px) { .submit_buttons { justify-content: center; } } /* When buttons are 100% on mobile give larger margin bottom: */ @media (max-width: 768px) { .submit_buttons > input[type] { margin:0 .5rem 1.8rem .5rem !important; width: 100%; white-space: pre-wrap; } } /* Fix for button spacing on Identity Verification page */ .mobile-device.Challenge .submit_buttons input[type], .mobile-device.Challenge .button, .mobile-device.Challenge input.button, .mobile-device.Challenge button, .mobile-device.Challenge input[type="submit"], .mobile-device.Challenge input[type="reset"], .mobile-device.Challenge input[type="button"], /* margin for buttons on in-session Identity Verification */ .mobile-device input[type="submit"][id*="M5CX082"], .mobile-device input[type="submit"][id*="MEAZYFK"], .mobile-device input[type="submit"][id*="MX3Q2ZU"], .mobile-device input[type="submit"][id*="MXILB6E"], .mobile-device input[type="submit"][id*="MLPPH2O"], .mobile-device input[type="submit"][id*="MA1IOR0"], .mobile-device input[type="submit"][id*="MM1ZV0O"] { flex: 1 1 100%; margin: 15px 0 0 0 !important; } .phone-device .ui-dialog.no-close div[id$="dlgIdentityVerification"] .submit_buttons { padding: 0 15px !important; margin-left: 0; } /* keep security code from being too far to the right */ div[id*="txtSecurityCode"] { margin-right: 20px; } /* Fix for button spacing on Identity Verification page and remove scrollbar */ p[id*="MFUZWNF"][id*="SubmitButtons"].submit_buttons, p[id*="MX3Q2ZU"][id*="SubmitButtons"].submit_buttons { margin-left: 20px !important; width: fit-content; } /* Scroll For more button ==================================================== */ .scroll-more-text.hide { display: none; } .scroll-more-text { position: fixed; width: 100%; padding: 1.5rem 0; font-weight: bolder; text-align: center; z-index: 1; opacity: .9; /* Defaults */ color: #ffffff !important; background: #58595b; font-weight: 700; /* Overide Defaults ^ */ color: #ffffff !important; background: #0F4B8F; font-weight: bold; } /* Margin Spacing for external accounts ^ */ input[id*="btnVerifyRoutingNumber"] { margin-top: 0 !important; margin-left: 1rem !important; } /* Fix Primary Buttons that should be Secondary */ /* input[type="submit"][value="Previous"] added 8/5/2019*/ .Categories.Categories input[onclick*="AddCustomCategory"], .AccountsSummary.AccountsSummary input[onclick*="btnManageExternalAccounts"], .AccountsSummary.AccountsSummary input[onclick*="btnAddAccounts"], .Participants input[id*="btnDelete"], .BatchTemplateDetails p[id$="_submitButtons"] input[type="submit"]:not([id$="_btnAddParticipants"]), .BatchTemplateDetails .pushdown+label strong, .ImportBatches .pushdown+label strong, .ImportParticipants .pushdown+label strong, .BatchTemplates p[id$="_LC_SubmitButtons"] input[type="submit"]:not([id$="_btnAddBatch"]), .ImportParticipants p[id$="_LC_SubmitButtons"] input[type="submit"]:not([id$="_btnSubmit"]), .ImportBatches p[id$="_LC_SubmitButtons"] input[type="submit"]:not([id$="_btnUpload"]), .MessageDetail p[id$="_SubmitButtons"] input[type="submit"]:not([id$="_btnReply"]):not([id$="_btnSend"]), .FinancesOverview p[id$="_editAccountsSubmitButtons"] input[id$="_btnAddExternalDlg"], .RememberDevice input[id$="_btnCancel"], .mobile-device.AccountActivity .submit_buttons input[type="submit"][value="Previous"], .BatchTemplates input[id$="_btnApplyFilter"][value="Search"], body[class*="External"] input[id$="_btnVerifyRoutingNumber"], .mobile-device input.get-more.button, .mobile-device.ManageAlerts input[id$="btnNotificationHistory"] { border: 1px solid #0F4B8F; color: #0F4B8F !important; -webkit-text-fill-color: #0F4B8F !important; background: #ffffff !important; cursor: pointer; } /* Fix Primary Buttons that should be Secondary:hover state */ .Categories.Categories input[onclick*="AddCustomCategory"]:hover, .AccountsSummary.AccountsSummary input[onclick*="btnManageExternalAccounts"]:hover, .AccountsSummary.AccountsSummary input[onclick*="btnAddAccounts"]:hover, .Participants input[id*="btnDelete"]:hover, .BatchTemplateDetails p[id$="_LC_SubmitButtons"] input[type="submit"]:not([id$="_btnSaveAndClose"]):hover, .BatchTemplateDetails p[id$="_submitButtons"] input[type="submit"]:not([id$="_btnAddParticipants"]):hover, .BatchTemplateDetails .pushdown+label strong:hover, .ImportBatches .pushdown+label strong:hover, .ImportParticipants .pushdown+label strong:hover, .BatchTemplates p[id$="_LC_SubmitButtons"] input[type="submit"]:not([id$="_btnAddBatch"]):hover, .ImportParticipants p[id$="_LC_SubmitButtons"] input[type="submit"]:not([id$="_btnSubmit"]):hover, .ImportBatches p[id$="_LC_SubmitButtons"] input[type="submit"]:not([id$="_btnUpload"]):hover, .MessageDetail p[id$="_SubmitButtons"] input[type="submit"]:not([id$="_btnReply"]):hover, .FinancesOverview p[id$="_editAccountsSubmitButtons"] input[id$="_btnAddExternalDlg"]:hover, .RememberDevice input[id$="_btnCancel"]:hover, .mobile-device.AccountActivity .submit_buttons input[type="submit"][value="Previous"]:hover, .BatchTemplates input[id$="_btnApplyFilter"][value="Search"]:hover, body[class*="External"] input[id$="_btnVerifyRoutingNumber"]:hover, .mobile-device.Accounts input.get-more.button:hover, .mobile-device.ManageAlerts input[id$="btnNotificationHistory"]:hover { border: 1px solid #0F4B8F; color: !important; -webkit-text-fill-color: !important; background: !important; } /* Replace Trashcan icons */ .simple-listView-delete-icon li a:nth-of-type(2):after, .laguna-checkbox-list-item div.extended-details-header div.extended-details-delete > button, a.delete_split_link { position: absolute; width: 25px; height: 25px; content: '\ea47'; font-family: fontawesome; background: transparent; color: #3c3c4b; } /*Hides close button*/ .module-single > h2:first-child div.collapse-expand, .module-single.collapsed > h2:first-child div.collapse-expand { display: none; } /*Make nav looking Demo Site*/ .primary-nav ul.menu-items .menu-tree-item1 { bottom: -1rem; } /****************************************** FIX TO REPLACE RED DELETE ICONS ******************************************/ input[src*="icon-delete.png"], input[src*="icons/delete.gif"] { display: inline-block; -moz-box-sizing: border-box; box-sizing: border-box; background: url(content.aspx?theme=Theme4&color1=%233c3c4b&image=svg/trashcan.svg) no-repeat; background-size: contain; width: 18px; height: 18px; padding-left: 18px; margin-left: 7px; } /****************************************** FIX TO REPLACE RED DELETE ICON ON USERS PAGE ******************************************/ .Users input[src*="icon-delete.png"] { margin-left: -14px; } input[src*="icon-delete.png"]:hover, input[src*="icons/delete.gif"]:hover { opacity: .7; } /****************************************** FIX TO REPLACE DELETE ICON ON MULTIPLE TRANSFER TEMPLATE ******************************************/ .MakeMultipleTransfers .laguna-radio-button-list div.laguna-field-control-container ul.laguna-field-control li.laguna-radio-button-list-item label > input[type="button"].deleteButton, .MakeMultipleTransfers .laguna-radio-button-list div.laguna-field-control-container div.laguna-field-control div.laguna-radio-button-list-item label > input[type="button"].deleteButton { background: url(content.aspx?theme=Theme4&color1=%233c3c4b&image=svg/trashcan.svg) no-repeat; background-size: 22px; left: 40px; position: relative; cursor: pointer; float: right; top: 8px; } /****************************************** FIX TO REPLACE ALL INQUIRY ICONS ******************************************/ input[src*="LightBlueCircleQuestionmark.gif"] { display: block; -moz-box-sizing: border-box; box-sizing: border-box; background: url(content.aspx?theme=Theme4&color1=%230f4b8f&image=svg/messages-solid.svg) no-repeat; background-size: contain; width: 35px; height: 20px; padding-left: 35px; } input[src*="LightBlueCircleQuestionmark.gif"]:hover { opacity: .7; } /****************************************** FIX TO REPLACE ALL KEYS ICONS ******************************************/ input[src*="keys.png"] { display: inline; -moz-box-sizing: border-box; box-sizing: border-box; background: url(content.aspx?theme=Theme4&color1=%233c3c4b&image=svg/profile-3.svg) no-repeat; background-size: contain; width: 35px; height: 20px; padding-left: 35px; } input[src*="keys.png"]:hover { opacity: .7; } .UserDetails input[src*="keys.png"] { background-position-x: 11px; } /****************************************** FIX TO REPLACE PENCIL ICONS ******************************************/ input[src*="edit.gif"], input[src*="icon-edit.png"], img[src*="icon-edit.png"] { display: inline-block; -moz-box-sizing: border-box; box-sizing: border-box; background:url(content.aspx?theme=Theme4&color1=%233c3c4b&image=svg/pencil.svg) no-repeat; background-size: contain; width: 18px; height: 18px; padding-left: 18px; margin-left: 7px; } input[src*="edit.gif"]:hover, input[src*="icon-edit.png"]:hover, img[src*="icon-edit.png"]:hover { opacity: .7; } /****************************************** FIX TO REPLACE CLOCK ICONS ******************************************/ .RadPicker_Default .rcCalPopup, .RadPicker_Default .rcTimePopup { display: inline-block; -moz-box-sizing: border-box; box-sizing: border-box; background:url(content.aspx?theme=Theme4&color1=%230f4b8f&image=svg/clock.svg) no-repeat; background-size: contain; width: 20px; height: 20px; top: 2px; } .RadPicker_Default a.rcTimePopup:hover { background-position: unset; opacity: .7; } .ManageAlerts .RadPicker_Default .rcCalPopup { display: inline; position: relative; top: 0; box-sizing: border-box !important; background: transparent; background-size: contain; width: 20px; height: 20px; padding: 2rem; padding-left: 16px; margin-right: 0px; margin-top: 14px; z-index: 1; cursor: pointer; font-size: 0; margin-left: 15px; left: 10px; top: -13px; text-decoration: none; } .ManageAlerts .RadPicker_Default .rcCalPopup:after { display: inline; font-family: 'fontawesome'; font-size: 2rem; color: #0f4b8f; content: '\e92d'; transition: all 0.2s; cursor: pointer; } /****************************************** FIX TO REPLACE DOWNLOAD ICONS ******************************************/ img[src*="GridBullet.gif"] { display: none; } a[id*="M2SN6LC"][id*="DownloadOptions"]::before, a[id*="MGN2WU4"][id*="DownloadOptions"]::before { font-family: 'fontawesome'; content: '\e965'; margin-right: .5rem; /* default */ color: #0f4b8f; /* override */ color: #0f4b8f; } /****************************************** FIX TO REPLACE MAGNIFY ICONS ******************************************/ img[src*="icon-magnifying-glass.png"], input[src*="icon-magnifying-glass.png"], input[src*="magnify.gif"] { display: inline-block; -moz-box-sizing: border-box; box-sizing: border-box; background:url(content.aspx?theme=Theme4&color1=%233c3c4b&image=svg/magnify.svg) no-repeat; background-size: contain; width: 18px; height: 18px; padding-left: 18px; margin-left: 7px; } img[src*="icon-magnifying-glass.png"]:hover, input[src*="icon-magnifying-glass.png"]:hover, input[src*="magnify.gif"]:hover { opacity: .7; } a.savings_goal_details_link_expand, a.savings_goal_details_link_collapse { background: url(content.aspx?theme=Theme4&color1=%233c3c4b&image=svg/magnify.svg) no-repeat; } /****************************************** ATM LOCATOR BACK BUTTON ****************************************** .mobile-device.$pvn-ATMLocator.pre-signin #M_lnkBack:before, .tablet-device.$pvn-ATMLocator.pre-signin #M_lnkBack:before { position: absolute; content: ""; width: 12px; height: 12px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); background: transparent; border-left: 4px solid $color1; border-bottom: 4px solid $color1; cursor: pointer; } */ /* for native app */ .mobile-device.ATMLocator .laguna-back-nav, .mobile-device.ATMLocator .laguna-back-nav:after { display: block !important; } /****************************************** THIS FIXES THE CLOSE BUTTON SO IT SHOWS THE CORRECT COLOR INSTEAD OF THE HOVER/FOCUS COLOR ******************************************/ input#btnTransactionsDone:focus, .ManageTransfers input[id*="btnClose"].button:focus, .TransferActivity input[id*="btnClose"].button:focus, .AddExternalAccounts input[id*="btnAccept"]:focus, #modal-help-close:focus { background: #0F4B8F; color: #ffffff !important; } input#btnTransactionsDone:hover, .ManageTransfers input[id*="btnClose"].button:hover, .TransferActivity input[id*="btnClose"].button:hover, .AddExternalAccounts input[id*="btnAccept"]:hover { background: #002E62; color: #ffffff !important; } /****************************************** FIX TO REPLACE ALL QUICKBOOK ICONS ******************************************/ input[src*="Quicken_Web%20_Connect_Button.gif"], input[src*="QB_Web_Connect.gif"] { display: block; -moz-box-sizing: border-box; box-sizing: border-box; background: url(content.aspx?theme=Theme4&color1=%230f4b8f&image=svg/download.svg) no-repeat; background-size: contain; width: 35px; height: 20px; padding-left: 35px; } input[src*="Quicken_Web%20_Connect_Button.gif"]:hover, input[src*="QB_Web_Connect.gif"]:hover { opacity: .7; } .WebConnect #Table1 > tbody > tr:nth-child(5) > td:nth-child(2):after { content: "Download for Quicken"; display: block; } .WebConnect #Table1 > tbody > tr:nth-child(5) > td:nth-child(3):after { content: "Download for QuickBooks"; display: block; } /* Fix download buttons for eStatements in mobile */ .eStatements .simple-listView-download-icon li span:nth-of-type(2):after { background: none; font-family: 'fontawesome'; content: '\e965'; margin-right: .5rem; /* default */ color: #0f4b8f; /* override */ color: #0f4b8f; } /****************************************** FIX BUTTONS ON SECURITY QUESTIONS CHANGE ******************************************/ .ChangeProfile .submit_buttons { display: block; } /* Alerts ==================================================== */ /*==================================================== /* Alerts Messages ==================================================== */ /* Table of contents ==================================================== - General Alert Settings - Warning Alert - Succes ALert - Info Alert */ /* General Alert Settings ==================================================== */ .message_queue { padding:0; line-height: 1.5; } p.message_queue_content { padding: 2rem 2.5rem; display: flex; align-items: center; justify-content: center; margin-top: 0px; text-align:left; font-weight: normal; border: none; background: transparent; } .message_queue_content > span { display: inline-flex !important; align-items: center; padding: 0; background: none; } /* Default icon settings: */ .message_queue_content > span::before { margin-right: 1rem; position: relative; display: inline-block; font-family: 'fontawesome'; font-size: 3rem; /* Use if using svg icon only ============= ============================================= height: 1em; width: 1em; top: -.1em; */ } /****************************************** ERROR ALERTS (RED) ******************************************/ p.message_queue_content.alert-error { color: #ffffff; background: #CF202F; border: 3px solid #CF202F; } /* Error Icon */ .message_queue_content > span.icon_error::before { color: #ffffff; -webkit-text-fill-color: #ffffff; content: '\ea63'; /* Use if using svg icon only ============= ============================================= NOTE:Top many need to be adjusted depending on the svg content: url(content.aspx?theme=Theme4&color1=$color1&image=svg/alert.svg); height: 1em; width: 1em; top: -.1em; */ } /****************************************** SUCCESS ALERTS (GREEN) ******************************************/ /* Background for success message added via jquery: */ p.message_queue_content.alert-success { color: #ffffff; background: #11593F; border: 3px solid #11593F; } /* Success Icon */ .message_queue_content > span.icon_information::before { color: #ffffff; -webkit-text-fill-color: #ffffff; content: '\e952'; /* Use if using svg icon only ============= ============================================= NOTE:Top many need to be adjusted depending on the svg content: url(content.aspx?theme=Theme4&color1=$color1&image=svg/alert.svg); height: 1em; width: 1em; top: -.1em; */ } /****************************************** WARNING ALERTS (YELLOW) ******************************************/ p.message_queue_content.alert-warning { color: #ffffff; background: #CF202F; border: 3px solid #CF202F; } /* Warning Icon */ .message_queue_content > span.icon_urgent::before { color: #ffffff; -webkit-text-fill-color: #ffffff; content: '\e970'; /* Use if using svg icon only ============= ============================================= NOTE:Top many need to be adjusted depending on the svg content: url(content.aspx?theme=Theme4&color1=$color1&image=svg/alert.svg); height: 1em; width: 1em; top: -.1em; */ } /* Error message inside module ==================================================== */ .error_box { padding: 1.5rem 2rem; color: #ffffff; background: #CF202F; border-radius: .5rem; margin-bottom: 1.8rem; margin-right: 1.8rem; } .error_title { background: none; padding: 0; margin-bottom: 0; font-weight: bold; min-height: 0px; display: block; align-items: center; color: #ffffff; } .error_title::before { margin-right: 1rem; position: relative; display: inline-block; font-family: 'fontawesome'; font-size: 3rem; color: #ffffff; content: '\ea63'; } .error_box ul { padding: 0; text-indent:-5px; margin-left: 0px; line-height:1.3; } .error_box ul li:hover, .error_box ul li { background: none; padding:0 1rem; color: #ffffff; } .error_box ul li::before { content: "\2022"; /*bullet dot for li*/ margin-right:.5rem; position: relative; display: inline-block; color: #ffffff; font-size: 1.8rem; } /* Form Alert Validation (use with jquery) ==================================================== */ .alert-validation input[type], .alert-validation textarea{ border-color: #ffffff; } /* Form Alert with icon ==================================================== */ span.icon_error_small { background: none; padding: 0; height: 45px; height: ; } /*Icon is now an asterisk*/ span.icon_error_small::before { margin: 0 .5rem; position: relative; display: inline-block; font-family: 'fontawesome'; font-size: .8rem; color: #ffffff; content: '\e918'; } [id*="M74KVX5"] > div > div { background: #ffffff; margin-bottom: 20px; padding: 5px; padding-left: 10px; border-radius: 0px; } /****************************************** MANAGE TRANSFERS SUCCESS ******************************************/ .desktop-device .module_confirmation_close_imagebutton { display: none; } .module_h2_header_confirmation { background: url(content.aspx?theme=Theme4&color1=%23ffffff&image=svg/check-circle.svg) 0.5em 0.67em no-repeat; background-size: 30px; color: #000000; background-position-y: 15px; background-position-x: -2px; } .ManageTransfers h2 { margin-bottom: 0px; } h2.module_h2_header_confirmation { margin-left: 20px; } /****************************************** FORM SPACING ******************************************/ .ManageAlerts fieldset.webinput_fieldset { margin-top: 10px; } .ManageAlerts .field_label + span:first-of-type { display: block; } /* Animation Settings ==================================================== */ /*==================================================== /* Animation Keyframes ==================================================== */ /* Table of contents ==================================================== - Opacity Fade In - Select Forms - Upload Forms */ /* Opacity Fade In ==================================================== */ @keyframes fadeInOpacity { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tick { 0% { transform: scale(0); } 90% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes indeterminate { 0% { right: 100%; left: -35%; } 60% { right: -90%; left: 100%; } 100% { right: -90%; left: 100%; } } @-webkit-keyframes spin { 0% {-webkit-transform: rotate(0deg)} 100% {-webkit-transform: rotate(180deg)} } /* Slide down ==================================================== */ @keyframes slide-in-top { 0% { -webkit-transform: translateY(-65px); transform: translateY(-65px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } /* Random ==================================================== */ /*==================================================== /* Fixes ==================================================== */ /*==================================================== /* Operation > BusinessACHFileProcessing.aspx ==================================================== */ div.floating-column { float: none; width: 47%; overflow: visible; margin: 0 1rem 0 0; padding-left: 0; } .chkHeading { vertical-align: middle; margin-top: 0; padding: 0; margin-bottom: 1.8rem; } /*Note there is some weird non select dropdown here that needs further look*/ /*Needed from module.css but what is it is*/ .edit-overlay { background: #000000; filter: alpha(opacity=50); z-index: 2; visibility: hidden; opacity: 0; transition: visibility 0s, opacity .3s ease-in-out; } .edit-overlay.show { opacity: .2; visibility: visible; display: block; } .edit-overlay.move-cursor { cursor: move; } .edit-overlay.not-move-cursor { cursor: pointer; } /*end*/ /* Temporarily hide Settings Link so QA stops complaining */ li.customize-page-li { display: none; } /* Tile Icons ==================================================== */ .payment-and-transfer-activity-tile label span, .payment-and-transfer-activity-tile .thumbnail .h2-content, .view-activity-tile .thumbnail .h2-content { background: url(content.aspx?theme=Theme4&color2=%230f4b8f&image=thumbnail-view-activity.svg); background-repeat: no-repeat; } .laguna-transfer-activity label span, .scheduled-transfers-tile .thumbnail .h2-content { background: url(content.aspx?theme=Theme4&color2=%230f4b8f&image=thumbnail-view-transfer-activity.svg); background-repeat: no-repeat; } .laguna-payment-activity label span, .scheduled-payments-tile .thumbnail .h2-content { background: url(content.aspx?theme=Theme4&color2=%230f4b8f&image=thumbnail-view-payment-activity.svg); background-repeat: no-repeat; } .laguna-left-and-right-arrows label span, .make-a-transfer-tile .thumbnail .h2-content, .mobile-thumbnail-maketransfer .thumbnail .h2-content { background: url(content.aspx?theme=Theme4&color2=%230f4b8f&image=thumbnail-make-a-transfer.svg); background-repeat: no-repeat; } .laguna-one-to-many-transfers label span, .make-multiple-transfers-tile > .thumbnail > .h2-content { background: url(content.aspx?theme=Theme4&color1=%230f4b8f&image=thumbnail-one-to-many-transfers.svg); background-repeat: no-repeat; } .laguna-paybills label span, .make-a-payment-tile .thumbnail .h2-content { background: url(content.aspx?theme=Theme4&color1=%23000000&color2=%230f4b8f&image=thumbnail-make-a-payment.svg); background-repeat: no-repeat; } .laguna-ebills label span { background: url(content.aspx?theme=Theme4&color1=%230f4b8f&image=thumbnail-ebill.svg); background-repeat: no-repeat; } .quick-links-tile .thumbnail .h2-content { background: url(content.aspx?theme=Theme4&color2=%230f4b8f&image=thumbnail-quick-links.svg); background-repeat: no-repeat; } .laguna-person label span { background: url(content.aspx?theme=Theme4&color1=%230f4b8f&image=thumbnail-transfer-to-someone.svg); background-repeat: no-repeat; } .laguna-deposit-check label span, .deposit-a-check-tile .thumbnail .h2-content { background: url(content.aspx?theme=Theme4&color2=%230f4b8f&image=thumbnail-deposit-a-check.svg); background-repeat: no-repeat; } .laguna-card-valet label span, .card-valet-tile > .thumbnail > .h2-content { background: url(content.aspx?theme=Theme4&color1=%23000000&color2=%230f4b8f&image=thumbnail-card-valet.svg); background-repeat: no-repeat; } .laguna-notifi label span, .notifi-tile > .thumbnail > .h2-content { background: url(content.aspx?theme=Theme4&color1=%230f4b8f&color2=%23000000&image=thumbnail-notifi.svg); background-repeat: no-repeat; } .credit-score-tile .thumbnail .h2-content { background: url(content.aspx?theme=Theme4&color1=%23FFFFFF&color2=%230f4b8f&image=thumbnail-credit-score.svg); background-repeat: no-repeat; } /* Loading Spinner ==================================================== */ /*==================================================== /* Spinner ==================================================== */ /* Table of contents ==================================================== - Mixins to convert hex to rgba for opacity - Colors */ /* Spinner colors ==================================================== */ .spinner, #busy-div .spinner, .overlay .spinner { /* Default secondary spinner color */ border: 6px solid #e9e9e9; /* Custom secondary spinner color */ border: 6px solid #0f4b8f; /* Default primary spinner color */ border-top: 6px solid #0f4b8f; /* Custom primary spinner color */ border-top: 6px solid #ffffff; } /* Layout CSS ====================================================*/ /*==================================================== /* Layout Imports ==================================================== */ /*Columns Settings ==================================================== */ /*==================================================== /* Columns and Main Content Container Settings ==================================================== */ /* Table of contents ==================================================== - Left Column to the right - MCM alignment */ /* Universal ==================================================== */ /* Makes every parent a flex */ .page-content-container { display: flex; flex-direction: column; overflow: visible; } /* Left Column to right ==================================================== */ .left-col { /* Default */ float: right; /* Override */ float: right; width: min-content; min-width: 300px; margin-right: 1.5rem; /* Default */ margin-left: 1.5rem; /* Override */ margin-left: 1.5rem; } @media (max-width: 1138px){ .left-col { display: block; } .tablet-device .left-col { display: none; } } @media (max-width: 1137px){ .left-col { display: none; } .tablet-device .left-col { display: none; } } /* Columns in original location in Edit Mode */ .left-col.left.edit-mode { float: left; } /* Make Left Column Items 100%*/ .left-col .input-field { position: relative; padding:0; margin-bottom: 1.8rem !important; display: flex; flex-direction: column; } .left-col span.checkbox { margin-bottom: 0px !important; } span[id*="txtAmountOption"] .dollar > span, .left-col input[type="text"] { width: 100% !important; min-width: auto; } .left-col .selectmenu-wrapper, .left-col .selectmenu-container { min-width: auto !important; max-width: 100% !important; } /* Needed or breaks page template.css*/ .main-content { overflow: hidden; min-width: 240px; line-height: 1.5; } /* Allows all content to fit on Participants page */ form[action="./Participants.aspx"] td span { margin: 0 -30px 0 0; } @media screen and (max-width: 495px){ .main-content { padding: 0; } } .content-wrapper { padding: 0 2rem; outline: 0; box-sizing: border-box; max-width: 100%; max-width: 1280px; margin: 0 auto; } @media (max-width: 600px){ .content-wrapper { padding: 0 1.5rem; } } /* Makes everything 100% on mobile */ @media (max-width: 495px){ .content-wrapper { padding: 0 0; } } /* Single Module ==================================================== */ .main-content-notabs { margin: 0 auto; } .main-content-notabs .main-sortable { margin-top:0; } /****************************************** SPACING FOR SIDE ADVERTISEMENT ******************************************/ div#leftcol-top_mcmbanner:not(:empty) { margin-bottom: 14px; } /* Make sure actual image/text MCM alignment matches user selection */ .IDS-MCMBanner tr[align="right"] td { text-align: right; } .IDS-MCMBanner tr[align="center"] td { text-align: center; } /* Class for responsive MCM images */ .img-responsive { max-width: 100%; height: auto; } /* Header Settings ==================================================== */ /*==================================================== /* Header Settings ==================================================== */ /* Table of contents ==================================================== - General Header Container Settings - Header top nav links - Top Nav Link Settings - Top Nav Icon Settings - Help link - Settings Link - Chat Link - Messages Link - Secure Message dropdown - Log Out Link - Hover and focus States - Last login - Profile Name - Mobile Icon */ /* General Header Container Settings ====================================================*/ /*Main header div 100%*/ .page-header { position: relative; width: 100%; box-sizing: border-box; z-index: 8; margin: 0; padding: 0; /* Defaults */ background: rgba(13,67,128,255); border-top: 0px solid transparent; /* Overide Defaults ^ */ background: #0f4b8f; border-top-width: ; border-top-color: ; } @media (max-width: 992px){ .page-header { height: 6rem; height: 6rem; margin-bottom: 1.8rem; border-top-width: 0; } } @media (max-width: 495px){ .page-header { margin-bottom: 0; } } /*NOTE .page-content-container can fix width every thing*/ /* Fixed header div*/ #page-header-container { height: 100%; width: 100%; z-index: 10; overflow: visible; box-sizing: border-box; max-width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 2rem; } /* Overide template.css*/ @media (max-width: 1138px) { #page-header-container { display: block; } } @media (max-width: 992px){ /*Keeps spacing when mobile nav is fixed*/ #page-header-container { display: none; } } /*Note Logo Setting are in -logo.css in the general folder*/ .top-nav-wrapper { background: transparent; position: relative; display: flex; align-items: center; height: ; } /** /*Note Logo Settings are in _logo.css in the general folder **/ .top-nav-wrapper .logo { } /*Turns off the extra nav in header*/ .top-nav-wrapper .primary-nav { display: none; } /* Hides useless Items in header */ /*page name*/ .top-nav-wrapper .top-nav{ display: none; } /*extra page settings*/ .top-nav-wrapper .customize-page{ display: none; } /*Removes some random link*/ #skipToMainContent { display: none; } /* Header top nav links ====================================================*/ /* Targets both Main container div and UL with same class name */ .top-nav-right { float: none; line-height: 1.5; flex: 1; display: flex; align-items: center; background: none; /* Defaults */ color: #ffffff; font-size: 1.5rem; /* Overide Defaults ^ */ color: ; font-size: 1.3rem; text-transform: capitalize; } /* Aligns UL items to the right */ ul.top-nav-right { justify-content: flex-end; } /* Each Li setting */ .top-nav-right > li { float: none; font-weight: normal; padding: 0; background: none; margin-right: 1rem; } /* Top Nav Link Settings ====================================================*/ ul.top-nav-right li a { text-decoration: none; display: flex; align-items: center; background: none; padding: .5rem !important; border-radius: 0; /* Defaults */ color: #ffffff; /* Overide Defaults ^ */ color: ; } /* Top Nav Icon Settings ====================================================*/ ul.top-nav-right li a::before { text-decoration: none !important; font-family: 'fontawesome'; font-weight: normal; display: inline-block; margin-right: .5rem; font-size: 1.5rem; } /* Help link ====================================================*/ /* Remove Padding*/ .top-nav-right .page-help-link { padding-top: 0; padding-bottom: 0; } /* Help link overides */ ul.top-nav-right .page-help-link a { background: none; font-weight: normal; padding-left: 0; margin-left: 0; /* Defaults */ color: #ffffff; /* Overide Defaults ^ */ color: ; border-radius: 0px; } /* Sets the help Icon image */ ul.top-nav-right .page-help-link a::before { content: '\e9f5'; } /* Hides extra li on the tiles page */ li.sub-menu.page-help-link { display: none; } /* Settings Link ====================================================*/ /* Overide template.css li settings link*/ .top-nav-wrapper .customize-page-li { /* same as .top-nav-right > li margin */ margin-right: 1rem; margin-left: 0; padding-top: 0; } /* Overide template.css a for settings link*/ .top-nav-wrapper .customize-page-li .customize-page-icon.show-settings, .top-nav-wrapper .customize-page-li .customize-page-icon { padding-left: 0; margin-top: auto; text-indent: 0; margin-right: 0; position: relative; top: 0; background: none; /* Defaults */ color: #ffffff; /* Overide Defaults ^ */ color: ; } /* Sets the Settings Icon image with overides */ .top-nav-wrapper .customize-page-li .customize-page-icon::before, .customize-page-icon::before { content: '\e94a'; width: auto; height: auto; background: none; } /* What ever this is text for the setting link*/ .general-settings { display: none; position: relative; right: 0; } .customize-page-li .customize-page-icon.show-settings { padding-left: 0; } /* Chat Link ====================================================*/ .chat-icon-header { background: none; display: block; width: auto; height: auto; text-indent: 0; margin-top: 0; } /* Sets the chat Icon image */ ul.top-nav-right .chat-icon-header::before { content: '\e94c'; } /* Messages Link ====================================================*/ .unreadMessages { background: none; width: auto; height: auto; min-width: auto; min-height: 100%; position: relative; top: 0; cursor: pointer; padding-right: 0; opacity: 1; border: 0px; font-family: inherit; line-height: inherit; font-weight: normal; margin-top: 0 !important; margin-right: 0 !important; border-radius: 0; padding: .5rem !important; transition: all 0.5s; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-duration: 400ms; /* Defaults */ color: #ffffff !important; font-size: 1.5rem; /* Overide Defaults ^ */ color: !important; font-size: 1.3rem; text-transform: capitalize; border-radius: 0px; } button.unreadMessages:hover { color: #ffffff !important; text-transform: capitalize; } @media (max-width: 992px) { .unreadMessages { font-size: 0; color: #0f4b8f !important; } } @media (max-width: 992px) { #page-header-container-2 .secure-unread-messages button { border-radius: 50% !important; padding: 1rem !important; margin: 0 !important; } } .unreadMessages::before { text-decoration: none !important; font-family: 'fontawesome'; font-weight: normal; display: inline-block; margin-right: .5rem; font-size: 1.5rem; content: '\e96b'; } @media (max-width: 495px) { .unreadMessages::before { font-size: 2rem; margin-right: 0; } } /* When no message display none*/ .unreadMessages.noMessages { background: none; opacity: 1; pointer-events: auto; } /* Unread Message count*/ .unreadMessagesCount { position: relative; left: -1rem; top: 0; -moz-border-radius: 1rem; -webkit-border-radius: 1rem; border-radius: 1rem; text-align: center; display: inline-block; padding: .2rem .5rem; line-height: 1.2; font-size: 1.1rem; margin-right: -.5rem; /* Defaults */ color: #ffffff; background: #cf202f; /* Overide Defaults ^ */ color: ; background: #CF202F; } .secure-unread-messages:hover .unreadMessagesCount { color: ; background: ; } @media (max-width: 495px) { .unreadMessagesCount { position: absolute; left: 2rem; top: 1.5rem; } } /* Secure Message dropdown ====================================================*/ /*main container*/ .secure-messages-dialog.ui-draggable.ui-resizable { box-shadow: none; } /*main container*/ .secure-messages-dialog .secure-message-area.ui-dialog-content { width: 27rem !important; min-height: 100% !important; margin-top: 0; overflow-y: visible; overflow: visible; line-height: 1.5; padding-bottom: 0; padding: 0; box-shadow: 0 8px 5px -5px rgba(0,0,0,0.3); /* Defaults */ background:white; border-radius: 0px; border: 2px solid transparent; box-shadow: 0 8px 5px -5px rgba(0,0,0,0.3); /* Overide Defaults ^ */ background: #ffffff; border-radius: ; border-color: ; } @media (max-width: 495px) { .secure-messages-dialog .secure-message-area.ui-dialog-content { width:95% !important; right:0; } } /*Pointer Arrow*/ .secure-messages-dialog .secure-message-area.ui-dialog-content::before { content: ""; position: absolute; border: 1rem solid transparent; top: -2rem; right:1.8rem; /* Defaults */ border-color: transparent; border-bottom-color: white; /* Overide Defaults ^ */ border-bottom-color: #ffffff; /* Super Overide ^ */ border-bottom-color: ; } @media (max-width: 495px) { .secure-messages-dialog .secure-message-area.ui-dialog-content::before { margin-right: 80%; } } /*Message item*/ .secure-message-area .secure-message-content { border-bottom: none; padding: 1rem; display: flex; align-items: center; } .secure-message-area .secure-message-content:last-child { border-bottom: none; padding-bottom: 0; padding: 1rem; } /*Divider border*/ .secure-message-area .secure-message-content:not(:first-child) { border-top: 1px solid transparent; border-color: #e4e4e4; border-width: 1px; } /*Date data*/ .secure-message-area .message-date { float: none; width: 5rem; font-weight: bold; padding-top: 0; padding-bottom: 0; display: flex; background: #0f4b8f; color: white; text-align: center; margin-right: 1rem; border-radius: .5rem; padding: .5rem; line-height: 1.2; } /*Content data*/ .secure-message-area .message-subject { cursor: pointer; padding: 0; overflow: auto; overflow: visible; padding-top: 0; padding-bottom: 0; display: flex; max-width: 100%; flex: 1 1 100%; width: 100%; font-size: 1.5rem; line-height: 1.2; } .secure-message-area .message-subject a { color: #000000 !important; text-decoration: none; } /*Close Icon*/ .secure-message-area .message-mark-unread { float: none; float: none; cursor: pointer; background: none; height: 40px; min-height: 100%; max-width: 2rem; min-width: 2rem; border-radius: 100%; justify-content: center; text-align: center; margin: 0 !important; margin-top: 0 !important; border: 0px; transition: all 0.5s; display: flex; padding: 1rem 2rem; color: #000000 !important; } .secure-message-area .message-mark-unread:hover { background: rgba(12,60,114,255); color: white !important; } /* UNREAD MESSAGE ICON */ .secure-message-area .message-mark-unread::before{ text-decoration: none !important; font-family: 'fontawesome'; font-weight: normal; display: inline-block; font-size: 1.5rem; content: '\e935'; } /* UNREAD MESSAGE ICON ON HOVER */ .secure-message-area .message-mark-unread:hover::before { content: '\e939'; } /* Log Out Link ====================================================*/ .top-nav-right li a.logout { margin-right: 0; padding-left: 0; background: none; font-weight: normal; /* Defaults */ color: #ffffff; /* Overide Defaults ^ */ color: ; border-radius: 0px; } /* Sets the log out Icon image */ .top-nav-right li .logout::before { content: '\ea16'; } /* Hover and focus States ====================================================*/ ul.top-nav-right li a:hover, .top-nav-wrapper .customize-page-li .customize-page-icon:hover, .top-nav-wrapper .customize-page-li .customize-page-icon:focus, ul.top-nav-right .page-help-link a:hover, .unreadMessages:hover, .unreadMessages:focus, .top-nav-right li a.logout:hover, .top-nav-right li a.logout:focus { text-decoration: none; outline: 0; /* Defaults */ color: white; background: #0f4b8f; /* Overide Defaults ^ */ color: #ffffff !important; background: ; } /* Last login ====================================================*/ .top-nav-right .page-last-login { font-weight: normal; padding-top: 0; padding: .5rem; } /* Project 202 say do not show*/ .top-nav-right .page-last-login { display: none; } /* Profile Name ====================================================*/ .top-nav-right #profile-username { display: block; padding-top: 0; padding: .5rem; font-weight: normal; order: -5; /* Defaults */ color: white; /* Overide Defaults ^ */ color: ; } .top-nav-right .sub-menu { position: relative; cursor: default; height: 100%; } /* Hides drop down*/ .sub-menu:hover > * { display: none; } /* Mobile Header ====================================================*/ #page-header-container-2 { position: fixed; top: 0; align-items: center; flex-direction: row; padding: 0 2rem; /* Defaults */ height: 6rem; box-shadow: 0 10px 5px -5px rgba(0, 0, 0, .30); background: rgba(13,67,128,255); border-top: 0px solid transparent; /* Overide Defaults ^ */ height: 6rem; background: #ffffff; border-top-width: ; border-top-color: ; } /* Wrong media to render p202 */ @media (max-width: 1138px) { #page-header-container-2 { display: none; } } /* Recommended media by p202 */ @media (max-width: 992px) { #page-header-container-2 { display: flex; visibility: visible; } } @media (max-width: 495px) { #page-header-container-2{ padding: 0 1rem; } } /* Blank Spacer for Mobile nav since its fixed (Not needed now)*/ @media (max-width: 1138px){ #position-fixed-header-spacer { display: none; } } #page-header-container-2 .hamburger-menu { float: none; margin:0; width: auto; cursor: pointer; margin-left: 1rem; } .hamburger-icon { width: 100%; height: 100%; border-radius: 3rem; position: relative; box-sizing: border-box; margin: 0; padding-left: 0; padding: 1rem; display: flex; align-items: center; justify-content: center; transition: all 0.5s; background: transparent; font-size: 2.4rem; /* Defaults */ color: #ffffff; /* Overide Defaults ^ */ color: #0f4b8f; } .hamburger-icon:hover, .hamburger-icon:focus{ outline: 0; text-decoration: none; /* Defaults */ background: #0f4b8f; color: #ffffff; /* Overide Defaults ^ */ background: ; color: #ffffff; } .hamburger-icon::before{ width: 1em; height: 1em; background: none; position: relative; border-radius: 0px; left: auto; top:0; text-decoration: none !important; font-family: 'fontawesome'; font-weight: normal; display: inline-block; content: '\e9fe'; } .hamburger-icon::after{ display: none; } #page-header-container-2 .hamburger-menu span { display: none; } /* overide messages margins*/ #page-header-container-2 .secure-unread-messages { /* float: none; */ margin: 0px; } #page-header-container-2 .secure-unread-messages button { border-radius: .5rem; } /* Back Arrow*/ #page-header-container-2 .laguna-back-nav { margin: 0; cursor: pointer; position: relative; margin-right: 0; margin-left: .5rem; order: -6; background: transparent; justify-content: center; float: none; width: 2.5rem; height: 2.5rem; text-indent: 4px; user-select: none; margin-top: 0; text-decoration: none; padding: .5rem ; border-radius: 3rem; box-sizing: border-box; /* Defaults */ color: #ffffff; font-size: 1.5rem; /* Overide Defaults ^ */ color: ; font-size: 1.3rem; } #page-header-container-2 .laguna-back-nav:hover::after { border-left: none; border-bottom: none; } #page-header-container-2 .laguna-back-nav:hover, #page-header-container-2 .laguna-back-nav:focus{ text-decoration: none; outline: 0; /* Defaults */ color: white; background: #0f4b8f; /* Overide Defaults ^ */ color: #ffffff; background: ; } .tablet-device .laguna-back-nav { display: none; } /* Back Arrow in Header of Mobile*/ .laguna-back-nav::after { position: relative; top: auto; left: auto; width: 1em; height: 1em; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform:none; transform: none; background: transparent; border-left: none; border-bottom: none; margin-left: -.5rem; text-decoration: none !important; font-family: 'fontawesome'; font-weight: normal; display: none !important; /* THIS WAS REMOVED BY REQUEST FROM BRANDON */ content: '\e90a'; } /* Back Arrow in Header of Mobile*/ .laguna-back-nav { display: none !important; /* THIS WAS REMOVED BY REQUEST FROM BRANDON */ } /* Restores Back Arrow in Header of Mobile, on Pages where User is not Logged In */ .TermsAndConditions .laguna-back-nav, .TermsAndConditions .laguna-back-nav::after, .PrivacyPolicy .laguna-back-nav, .PrivacyPolicy .laguna-back-nav::after, .Disclaimer .laguna-back-nav, .Disclaimer .laguna-back-nav::after, .Register .laguna-back-nav, .Register .laguna-back-nav::after, .RegistrationDisclosure .laguna-back-nav, .RegistrationDisclosure .laguna-back-nav::after, .ForgotPassword .laguna-back-nav, .ForgotPassword .laguna-back-nav::after { display: block !important; /* THIS WAS ADDED BY REQUEST FROM QA */ } /* Modules Settings ==================================================== */ /*==================================================== /* Module Settings ==================================================== */ /* Table of contents ==================================================== - Outside containers - Main Module Settings - Module Header */ /* Outside Containers ==================================================== */ /*Removes background from container around all modules*/ .main-sortable { background: transparent; } /* Main Module Settings ==================================================== */ .module-single-confirmation, .module-single-wrapper { margin-bottom: 1.8rem; /* Defaults */ border-radius: 0px; border: 0px solid transparent; color: rgba(0,0,0,0.3); /*default shadow color*/ box-shadow: 0 8px 5px -5px rgba(0,0,0,0.3); /* Overide Defaults ^ */ border-radius: ; border-color: ; border-width: 0 0 3px 0; box-shadow: 0 8px 5px -5px ; } /* Makes everything 100% on mobile removing corners */ @media (max-width: 495px) { .module-single-wrapper { border-radius: 0; /* Should not see the bottom of the module*/ border-bottom: none; } } .module-single { position: relative !important; line-height: 1.5; margin: 0 0 0 0; box-sizing: border-box; border:none; /* Defaults */ background:white; border-radius: 0px; /* Overide Defaults ^ */ background: #ffffff; border-radius: ; } /* Makes everything 100% on mobile removing corners */ @media (max-width: 495px) { .module-single { border-radius: 0; } } /* Module Header ==================================================== */ /* Removes the move cursor on module header: */ .module-single .module-title.move-cursor, .h2-title-container.move-cursor { cursor: inherit; pointer-events: none; } /* Module Header for h2 styling outer container: */ .module-single > h2:first-child, .module-single > h1:first-child, .overlay-header, .module_header { zoom: 1; cursor: default; position: relative; padding-top: 0; padding-bottom: 0; margin-left: 0; margin-right: 0; border-bottom: none; background: transparent; line-height: 1.2; margin-bottom: 0; /* removes the default margin bottom for headers:*/ /* Super Default */ font-size: 2.4rem; font-weight: 700; /* Default */ font-size: 2rem; font-weight: 600; /* Overide Default ^ */ font-size: 2rem; font-weight: ; } /* Smaller Font size for iphone5 ^ */ @media (max-width: 320px) { .module-single > h2:first-child{ font-size: 1.8rem; } } /* Module Header for h2 styling inner container: */ .module-single > h2 .h2-content { width: 100%; box-sizing: border-box; display: inline-flex; align-items: center; padding:.5rem 1.5rem; /* Default */ background: #0f4b8f; border-radius: 0px 0px 0 0; /*needs to be the same as .module-single */ /* Overide Default ^ */ background: #ffffff; border-top-left-radius: ; border-top-right-radius: ; } @media (max-width: 550px) { .module-single > h2 .h2-content { padding:.5rem; } } /* Makes everything 100% on mobile removing corners */ @media (max-width: 495px) { .module-single > h2 .h2-content { border-radius: 0; } } /* Container where the text is container: */ .module-single > h2 .h2-title-container { display: inline-flex; align-items: center; padding-bottom: 0; flex: 1 1 100%; margin-left: 1rem; margin-top: ; text-transform: uppercase; } @media (max-width: 550px) { .module-single > h2 .h2-title-container { display: block; padding: .5rem; } } .module-single > h2 .h2-title-container::after { content:''; min-height: inherit; font-size: 0; } /* Module header text itself: */ .module-single .module-title { display: flex; align-items: center; flex: 1 1 100%; float: none; min-height: 100%; justify-content: flex-start; min-height: 45px; /*Super Default */ color: #ffffff; /* Default */ color: ; /* Overide Default ^ */ color: #000000; } @media (max-width: 550px) { .module-single .module-title { min-height: 0; } } /* Module header Left Column fix: */ @media screen and (min-width: 1139px) { .left-col .module-single > h2:first-child .module-title { width: 100%; padding-bottom: 0; } } /* Module Header links ==================================================== */ .module-single > h2:first-child ul { float: none; display: flex; align-items: center; height: 100%; width: 100%; justify-content: flex-end; } @media (max-width: 550px) { .module-single > h2 .h2-title-container ul { justify-content: flex-start; margin-left: -1rem; } } .module-single > h2:first-child ul li { display: flex; align-items: center; width:auto; } /* IE Fix for Header links*/ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .module-single > h2:first-child ul li { display: inline-block; margin-left:1rem; } } .module-single > h2:first-child ul li a { float: none; border-left-width: 0px; border-style: none; text-decoration: none; line-height: inherit; margin-top: 0; border-color: transparent; display: flex; align-items: center; transition: all .25s ease-in-out; text-decoration: none; padding: .5rem 1rem; height: 100%; margin-left: .5rem; border-radius:.5rem; width: 100%; white-space: nowrap; font-weight: normal; /* Default */ font-size: 1.4rem; color: #ffffff; /* Overide Default ^ */ color: #0f4b8f; } /* IE Fix for Header links*/ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .module-single > h2:first-child ul li a { padding:.25rem; } } .module-single > h2:first-child ul li a:hover, .module-single > h2:first-child ul li a:focus { text-decoration: none; outline:0; /* Default */ background: rgba(12,60,114,255); color:#ffffff; /* Overide Default ^ */ background: ; color: ; } .module-single > h2:first-child ul li:first-child a { margin-left: 0; border-left-width: 0; } .module-single > h2:first-child ul li:last-child a { margin-right: 0px; } /* Find these and style theme: */ .module-single > h1:first-child, .overlay-header, .module_header{} /*Module Header Icons ==================================================== */ .module-single > h2:first-child ul li a::before { text-decoration:none !important; font-family: 'fontawesome'; font-weight: normal; margin-right: 1rem; display:inline-block; text-decoration:none; /* Default */ font-size: 1.3rem; /* Overide Default ^ */ font-size: 1.8rem; } /* Refresh Icon */ /* PAGES AccountSummary.aspx/portfolio */ .module-single > h2:first-child ul li a[data-bind*="refreshAccounts"]::before { content: '\e9f9'; } /* Plus Sign */ /*PAGES: ContentLocations.aspx + Promotions.aspx, ExtendedAuditDetails.aspx, UserLists.aspx,Messages.aspx*/ .module-single > h2:first-child ul li a[href*="ContentLocationDetail"]::before, .module-single > h2:first-child ul li a[href*="PromotionDetail"]::before, .module-single > h2:first-child ul li a[href*="ExtendedAuditDetails"]::before, .module-single > h2:first-child ul li a[href*="UserListDetail"]::before { content: '\e9ee'; } /* Envelope */ .module-single > h2:first-child ul li a[href*="MessageDetail"]::before { content: '\e96b'; } /* Magnify Glass */ /* PAGES: StopPayments.aspx view history */ .module-single > h2:first-child ul li a[href*="StopPaymentHistory"]::before { content: '\e9c2'; } /* Cog */ /* PAGES: FinancesOverview.aspx AccountSummary.aspx/portfolio */ .module-single > h2:first-child ul li a[href*="PortalActionList"]::before, .module-single > h2:first-child ul li a[data-bind*="isInEditMode"]::before { content: '\e94a'; } /* Pencil */ /* PAGES: FinancesOverview.aspx */ [id*="M9TWDB8"] > h2 > div > div.h2-title-container > ul > li > a[href*="PortalActionList"]::before { content: '\e9e3'; } /* Go To arrow */ /* PAGES: FinancesOverview.aspx*/ .module-single > h2:first-child ul li a[href*="Staging"]::before { content: '\ea0f'; } /*Back Button arrow*/ /* PAGES: FinancesOverview.aspx, PromotionDetail.aspx, StopPaymentshistory.aspx, PromotionPreview.aspx*/ .module-single > h2:first-child ul li a[href*="StopPayments"]::before, .module-single > h2:first-child ul li a[href*="Promotions"]::before, .module-single > h2:first-child ul li a[href*="Production"]::before, .PromotionPreview .module-single > h2:first-child ul li a[href*="PromotionDetail"]::before { content: '\e914'; } /*Module Header Help Link ==================================================== */ .module-single > h2 .h2-help-container { display: flex; width: 100%; max-width: 45px; vertical-align: top; } a.icon_help, a.icon_help:focus { background: transparent; display: flex; justify-content: center; float: none; width: 100%; height: 100%; text-indent: 0; user-select: none; margin-top: 0; text-decoration: none; margin-left: .5rem; padding: 1rem .5rem; border-radius: 30px; /* Default */ font-size: 1.6rem; color: #ffffff; /* Overide Default ^ */ font-size: 1.8rem; color: #0f4b8f; } /* for IE 11: */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { a.icon_help { display:table-cell; padding: 1rem 1.25rem; margin-right:15px; } } a.icon_help:hover { outline: 0; /* Default */ background: rgba(12,60,114,255); background: #0f4b8f; color:#ffffff; /* Overide Default ^ */ background: ; color: ; } a.icon_help::before { text-decoration:none !important; font-family: 'fontawesome'; font-weight: normal; display:inline-block; content: '\e9f6'; } /*Module Header Print Link ==================================================== */ .module-single > h2 .h2-print-container { display: flex; width: 100%; max-width: 45px; vertical-align: top; } a.icon_print { background: transparent; display: flex; justify-content: center; float: none; width: 100%; height: 100%; text-indent: 0; user-select: none; margin-top: 0; text-decoration: none; margin-left: .5rem; padding: 1rem .5rem; border-radius: 30px; /* Default */ font-size: 1.6rem; color: #ffffff; /* Overide Default ^ */ font-size: 1.8rem; color: #0f4b8f; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { a.icon_print { display:table-cell; padding: 1rem 1.25rem; margin-right:15px; } } a.icon_print:hover, a.icon_print:focus { outline: 0; /* Default */ background: rgba(12,60,114,255); color: #ffffff; /* Overide Default ^ */ background: ; color: ; } a.icon_print::before { text-decoration:none !important; font-family: 'fontawesome'; font-weight: normal; display:inline-block; content: '\e9f2'; } /*Module Header Collapse button on desktop ==================================================== */ .module-single > h2:first-child div.collapse-expand, .module-single.collapsed > h2:first-child div.collapse-expand { display: none; /* THIS WAS REMOVED BY REQUEST FROM BRANDON */ align-items: center; justify-content: center; vertical-align: bottom; float: none; height: 1em; width:1em; max-width:100%; cursor: pointer; padding: 2rem; margin-right: -.5rem; box-sizing: border-box; background: transparent; transition: all .25s ease-in-out; border-radius: 30px; /* Default */ font-size: 1.6rem; color: #ffffff; /* Overide Default ^ */ font-size: 1.8rem; color: #0f4b8f; } /* Padding for iphone 5: */ @media (max-width: 320px) { .module-single > h2:first-child div.collapse-expand, .module-single.collapsed > h2:first-child div.collapse-expand { padding:1.5rem; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .module-single > h2:first-child div.collapse-expand, .module-single.collapsed > h2:first-child div.collapse-expand { display: none; padding: 1rem 1.25rem; } } .module-single > h2:first-child div.collapse-expand:hover, .module-single.collapsed > h2:first-child div.collapse-expand:hover, .module-single > h2:first-child div.collapse-expand:focus, .module-single.collapsed > h2:first-child div.collapse-expand:focus{ outline: 0; /* Default */ background: rgba(12,60,114,255); color:#ffffff; /* Overide Default ^ */ background: ; color: ; } /* Open Close Icon */ .module-single.collapsed > h2:first-child div.collapse-expand::after, .module-single > h2:first-child div.collapse-expand::after { border-right: none; border-bottom: none; margin-right: 0; float: none; margin-top: 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); transition: all 0.5s; text-decoration:none !important; font-weight: normal; display: inline-block; height: 1em; width:1em; font-family: 'fontawesome'; content: '\e93a'; /*content: url(content.aspx?theme=Theme4&color1=$white&image=svg/help.svg);*/ } .module-single > h2:first-child div.collapse-expand:hover::after, .module-single.collapsed > h2:first-child div.collapse-expand:hover::after, .module-single > h2:first-child div.collapse-expand:focus::after, .module-single.collapsed > h2:first-child div.collapse-expand:focus::after { border-right: none; border-bottom: none; outline: 0; } .module-single > h2:first-child div.collapse-expand::after { transform: scaleY(1); } .module-single.collapsed > h2:first-child div.collapse-expand::after { transform: scaleY(-1); } /* Module Content ==================================================== */ /* Module content container: */ div.module-container.mainmodule { padding: 1rem 2rem; /*padding-bottom: 0px; cancels out what ever the margin-bottom of last item:*/ overflow-x: visible; overflow-y: visible; color: #000000; } form[action*="./ScheduledTransfers.aspx"] div.module-container.mainmodule { padding: 0rem 2rem; } /* Module Content Divider bar: */ .module-container.graphs .module-single > div, .module-container.mainmodule { /* Defaults */ border-top: 1px solid transparent; /* Overide Defaults ^ */ border-top-width: 1px; border-top-color: #0f4b8f; } /* Make content fill the entire height on phones P202 */ .phone-device .module-single-wrapper:only-of-type { /* height: 97vh !important; */ } /*New Message style need to add class unread to module */ tr.unread td:first-child { border-left: 5px solid #0f4b8f; font-weight: bold; } /* Hides the move resize etc on module module.css: */ .module-toolbar.module-toolbar-vertical { display: none; } /* Needed for laguna modules or it breaks site */ .module-container .mainmodule, .module-container.mainmodule{ position: relative; } /* IE overflow fix */ .select::after, .module-container::after{ display: none; } /* Mobile tap color flash fix UXTEAM-27*/ body.mobile-device .mainmodule li:not(.laguna-carousel-item), body.mobile-device .mainmodule li > a { cursor: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0) !important; } /* prevent peek and Pop for long-touch on nav links on Mobile UXTEAM-28 */ .slider-menu-container .portalmenutree a, .global-quicklinks ul li a { -webkit-user-select: none !important; -webkit-touch-callout: none !important; } .h2-title-container { font-weight: 600; } /* Removes extra space on modal header popups */ .module_header { margin-right: 0px; } /****************************************** BUDGET FIXES FOR DESKTOP ******************************************/ .Budget .overlayText { margin-top: 1px !important; } .FinancesOverview .overlayText { margin-top: 3px !important; } .FinancesOverview .remaining { vertical-align: middle; padding-right: 10px; } /****************************************** CARD VALET FIXES FOR DESKTOP ******************************************/ /* MOVES THE NAME AND CREDIT CARD NUMBER OVER */ span.card-number, span.card-holder-name { margin-left: 73px; } /* RESIZES THE CREDIT CARD IMAGE */ .laguna-carousel.card-valet div.laguna-field-control-container ul.laguna-field-control li.laguna-carousel-item { background-size: 243px 150px !important; } /* REMOVES THE BOTTOM HORIZONTAL SCROLL */ .Cards .wizard-step-content { overflow: hidden; } /* FIXES THE VERTICAL POSITION OF NAVIGATIONAL ARROWS */ .Cards button { margin-top: 0px !important; } /* FIXS THE BACKGROUND OF DISABLED BUTTONS */ .Cards button:disabled { background: rgba(0, 0, 0, 0.0) !important; } /* MOVES THE LEFT NAV ARROW */ .Cards .navigation-left:before { left: 109px; } /* HIDES SWITCH OVAL */ .switch + label:before, .switch:checked + label:before { background-color: transparent; } /* HIDES SWITCH SLIDER */ .switch + label:after { display: none; } /* ELIMINATES THE CLOSE ICON */ .Home .laguna-message-overlay .overlay-close-icon, .Cards .laguna-message-overlay .overlay-close-icon { display: none; } /* FIXES THE ERROR TEXT COLOR */ .Home .laguna-message-overlay .overlay-header { color: initial; } /* ELIMINATES THE BLACK BOX */ .Home .laguna-message-overlay, .Cards .laguna-message-overlay { background: transparent; } /* MOVES THE WHITE BOX DOWN */ .Cards .laguna-message-overlay .overlay-header { margin-top: 2em; } /* MAKES LIST CARATS BLACK */ .laguna-radio-button-list.card-valet input[type="radio"] + label:after { border-left: 3px solid #000000; border-top: 3px solid #000000; } /* MAKES CARD CARATS BLACK */ .navigation-left:before, .navigation-right:before { border: 3px #000000; border-style: none solid solid none; } /****************************************** STANDARD REPORTS TABLES ******************************************/ .StandardReports table td { padding: 5px; } /****************************************** FINANCES OVERVIEW GOALS MARKER ******************************************/ .overlayLine { top: 4px !important; } .overlayLineText { top: 28px !important; } /****************************************** ADMIN EDIT ICON ON USERS PAGE ******************************************/ .Users input[id*="MFK7WC4"][id*="grdUsers"] { padding-right: 17px; } /* Footer Settings ==================================================== */ /*==================================================== /* Footer ==================================================== */ .page-footer { padding: 0; background: white; width: 100%; z-index: 1; } .page-footer-container { background: ; color: ; } /* hide the footer if hide-footer-content class is found on portal-view element */ .portal-view.hide-footer-content > .page-footer, .portal-view.hide-footer-content > .page-footer > .page-footer-container { /* display: none; */ } .portal-view.hide-footer-content > .position-fixed-footer-spacer { display: none; } /* make the footer fixed at bottom of screen is use-fixed-footer class is found on portal-view element also note that the footer spacer has to have some height so footer doesnt cover the scrolling page content */ .portal-view.use-fixed-footer > .page-footer { position: fixed; bottom: 0; } /* if the footer is not fixed, then hide the footer spacer because it is not needed */ .portal-view:not(.use-fixed-footer) > .page-footer { position: initial; } .portal-view:not(.use-fixed-footer) > .position-fixed-footer-spacer { display: none; } .phone-device .equal-housing-icon, .phone-device .fed-insured-icon { background: none; } /****************************************** FOOTER RESIZE ******************************************/ .footer-left { margin-right: 20px; font-weight: normal; } .footer-right { margin-top: 6px; margin-left: 20px; font-weight: normal; } .footer { display: table; } /* color for phone number links on sign-in pages */ .phone-device .footer a { color: ; } /****************************************** FOOTER ICONS ******************************************/ .fed-insured-icon { width: 42px; height: 15px; background: url(content.aspx?theme=Theme4&color1=%230f4b8f&image=svg/ncua.svg); background-repeat: no-repeat; background-size: contain; } .equal-housing-icon { width: 21px; height: 15px; background: url(content.aspx?theme=Theme4&color1=%230f4b8f&image=svg/equal-housing-lender.svg); background-repeat: no-repeat; background-size: contain; } /* Modal Settings ==================================================== */ /*==================================================== /* Modal Settings ==================================================== */ /* Date Picker icon ==================================================== */ /*Inlines form with icon*/ span[id*='calStartDate'], span[id*='calEndDate'] { display:inline-flex; align-items: center; position:relative; } /* Lori commented - no datepicker icon displays */ /*Resets the img to be transparent and above icon so its clickable*/ /*JS is needed to make a span wrap with class icon-date*/ .phone-device button > img[src*="Resource.axd"], img.ui-datepicker-trigger[src*="Resource.axd"] { display: inline; position: relative; top:0; box-sizing: border-box !important; background: transparent; background-size: contain; width: 20px; height: 20px; padding: 2rem; padding-left: 16px; margin-right: -32px; margin-top: 14px; z-index: 1; cursor: pointer; } .Register img[src*="Resource.axd"], .ForgotPassword img[src*="Resource.axd"] { margin-right: -40px; } span.icon-date { position: relative; margin-left: 10px; } .phone-device span.icon-date { margin-left: 0; } .phone-device button > img[src*="Resource.axd"] { margin-top: 3px; } /* .phone-device .icon-date::after { position: absolute; right: 33px; top: 0px; } */ /****************************************** DATE PICKER CALENDAR FIXES ******************************************/ /* REPAIRS WIDTH ON SINGLE-MONTH CALENDARS */ div#ui-datepicker-div { width: 253px; } /* REPAIRS WIDTH ON DOUBLE-MONTH CALENDARS */ .ManageTransfers div#ui-datepicker-div { width: 253px !important; } /* REPAIRS DROPDOWNS ON SINGLE-MONTH CALENDARS */ .Single input[type="text"], .BatchTemplates select, .AccountActivity select, .Register select, .WebConnect select, .ForgotPassword select, .ui-datepicker select { min-width: inherit; } /* REPAIRS ODD OVERSIZED CALENDAR ON STANDARD REPORTS */ .StandardReports div#ui-datepicker-div { width: inherit; } /* REPAIRS OVERSIZED DROPDOWNS AND MAKES THEM SMALLER */ .ui-datepicker select { width: auto !important; min-height: 25px !important; height: 37px; } /* CALENDAR ICONS */ .icon-date::after, .phone-device.MakeTransfer .ui-datepicker-trigger::after, .phone-device.MakeMultipleTransfers .ui-datepicker-trigger::after, [id*="MF73BZ1"][id$="webInputForm_grpEditor_calStartDate"]::after, [id*="MF73BZ1"][id$="grpEditor_grpRecurring_calEndDate"]::after, .mobile-device.AddChecks .ui-datepicker-trigger::after{ display: inline; font-family: 'fontawesome'; font-size: 2rem; color: #0f4b8f; content: '\e92d'; transition: all 0.2s; cursor: pointer; } /* CALENDAR ICON HOVER */ .icon-date:hover::after { color: rgba(13,67,128,255); } /* Fix for Edit page so the extra icon is removed */ .phone-device.Edit .icon-date::after { display: none; } /****************************************** PAIRED DATE FIXES ON CALENDARS ******************************************/ .ui-datepicker-calendar td.paired-date a, .ui-datepicker-calendar td.paired-date span, .calendar-legend.paired-date .date-box { box-shadow: 0px 0px 0px 2px #69c inset; border: none; } .ManageTransfers .calendar-legend > span { background-color: #ffffff; display: table; } .ManageTransfers .calendar-legend .date-label { width: 5.5em; } .ManageTransfers span.date-box { left: 10px; position: relative; } .ManageTransfers span.date-text { height: 20px; } /****************************************** FINANCES OVERVIEW MODAL FIXES ******************************************/ p#M_layout_content_PCDZ_M9TWDB8_ctl00_editAccountsSubmitButtons { margin-left: 15px; } div#dialog2 { overflow: hidden; } /****************************************** ALERTS PAGE CALENDAR FIXES ******************************************/ .ManageAlerts table caption { background: #0f4b8f; } .ManageAlerts tr.table_header td { padding-left: 0px !important; } .ManageAlerts [id*="notificationEditor_dtpOnDateTime_calendar"] > caption { display: none; } .RadCalendar { border: 2px solid #0f4b8f; } .RadCalendarPopupShadows>.rcShadTR, .RadCalendarPopupShadows>.rcShadBL, .RadCalendarPopupShadows>.rcShadBR { display: none; } .RadCalendar .table_header a { text-align: center; } table.RadCalendarTimeView_Default { border-color: #0f4b8f; background: white; font-family: Source Sans 3, Open Sans, Arial,Helvetica,sans-serif; font-size: 12px; } /* REMOVES THE FIRST COLUMN WITH WRONG DATES */ [id*="notificationEditor_dtpOnDateTime_calendar_Top_rs_1"], [id*="notificationEditor_dtpOnDateTime_calendar_Top_rs_2"], [id*="notificationEditor_dtpOnDateTime_calendar_Top_rs_3"], [id*="notificationEditor_dtpOnDateTime_calendar_Top_rs_4"], [id*="notificationEditor_dtpOnDateTime_calendar_Top_rs_5"], [id*="notificationEditor_dtpOnDateTime_calendar_Top_rs_6"], [id*="notificationEditor_dtpOnDateTime_calendar_Top"] > thead > tr > th.rcViewSel { display: none; } /* Date Picker content ==================================================== */ /*main content for datepicker*/ .ui-datepicker{ padding: 0; white-space: nowrap; z-index: 101 !important; overflow: hidden; /* Defaults */ background:white; border-radius: 0px; border: 2px solid #0f4b8f !important; box-shadow: 0 8px 8px -5px rgba(0,0,0,0.3); /* Overide Defaults ^ */ border: 2px solid !important; background: #ffffff; border-radius: ; } /*datepicker header*/ .ui-datepicker-header { position: relative; padding: .5rem; line-height: 1.5; text-align: center; font-size: inherit; font-weight: bold; padding-right: 1.5rem; /* Default */ background: #0f4b8f; color: #ffffff; /* Override */ background: ; color: ; } /*Next arrow*/ .ui-datepicker-header a.ui-datepicker-next, .ui-datepicker-header a.ui-datepicker-prev { right: 1rem; top: .5rem; background: none; height: 1.5rem; width: 1.5rem; position: absolute; padding: 0; } .ui-datepicker-header a.ui-datepicker-prev { left: 1rem; right: 0; } .ui-datepicker-header a.ui-datepicker-next::before, .ui-datepicker-header a.ui-datepicker-prev::before { display: inline-block; font-family: 'fontawesome'; transition: all 0.2s; font-size: 1.5rem; /* Default */ color: #ffffff; /* Override */ color: ; margin-top: 10%; } .ui-datepicker-header a.ui-datepicker-prev::before { content: '\e9ac'; } .ui-datepicker-header a.ui-datepicker-next::before { content: '\e90f'; } /* Date Picker table settings ==================================================== */ .ui-datepicker-calendar { border-spacing: 0; margin-bottom: 0; width: 100%; } .ui-datepicker td, .ui-datepicker th{ padding: 0; text-align: center; } .ui-datepicker td:hover { background: transparent; } .ui-datepicker th{ font-weight: bold; } .ui-datepicker-calendar td span:first-child{ margin:0; } .ui-datepicker-calendar td a, .ui-datepicker-calendar td span { display: block; min-width: 2.5rem; border: none; padding: .5rem; text-align: center; } /* Hover State ^ */ .ui-datepicker-calendar td a.ui-state-hover.ui-state-highlight, .ui-datepicker-calendar td a.ui-state-hover, .calendar-legend.current-date .date-box { border-color:transparent; border-radius: 0; border: none; /* Default */ background: rgba(13,69,131,255); color: #ffffff !important; /* Override */ background: ; color: ; } /* Current Date ^ */ .ui-widget-content .ui-datepicker-today .ui-state-highlight, .ui-widget-content .ui-datepicker-today .ui-state-highlight:hover, .ui-widget-content .ui-datepicker-today .ui-state-highlight.ui-state-active { border: none; border-radius:none; font-weight: bold; text-decoration: none; border-radius: 0; background-color: #0f4b8f; color: #ffffff !important; /* Overrides */ background: ; color: ; } /* Chosen Date ^ */ .ui-widget-content .ui-datepicker-today .ui-state-highlight:hover, .ui-datepicker-calendar td a.ui-state-active, .ui-widget-content .ui-datepicker-today .ui-state-highlight.ui-state-active { border: none; border-radius:none; font-weight: bold; text-decoration: none; border-radius: 0; background-color: #cf202f; color: #ffffff !important; /* Overrides */ background-color: ; color: !important; } /* Holiday Date ^ */ .ui-datepicker-calendar td.weekend-or-holiday { } .ui-datepicker-calendar td.weekend-or-holiday a { color: #0f4b8f; font-weight: bold; /* pointer-events:none; */ /* Override */ color: ; } .ui-datepicker-calendar td:not(:last-child) { border-right: 1px solid transparent; border-right-color: #e4e4e4; /* Overide Defaults ^ */ border-right-color: ; } .ui-datepicker-calendar td.ui-state-disabled { color: rgba(0, 0, 0, 0.6) !important; background: #e9e9e9!important; border-right-color: #e4e4e4; /* Overide Defaults ^ */ border-right-color: ; border-top-color: #e4e4e4; /* Overide Defaults ^ */ border-top-color: ; opacity: 1; cursor: initial; filter: none; -webkit-tap-highlight-color: transparent; } /* Date Picker Multiple ==================================================== */ .ui-datepicker-multi .ui-datepicker-group { display: grid; } .ie11 .ui-datepicker-multi .ui-datepicker-group { display: block; } .ui-datepicker-group.ui-datepicker-group-last { border-left: 1px solid; } .ui-datepicker-multi .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-calendar{ padding-right: 1.5rem; margin-bottom: 0; } /* Generic Pop up Modal ==================================================== */ /*Pop Up Modal*/ div.ui-widget-content, .ui-dialog.no-close { overflow:visible; margin-bottom: 1.8rem; margin-top: 0; /* Defaults */ background: white; border-radius: 0px; border: 0px solid transparent; color: rgba(0,0,0,0.3); /*default shadow color*/ box-shadow: 0 8px 5px -5px rgba(0,0,0,0.3); /* Overide Defaults ^ */ background: #ffffff; border-radius: ; border-color: ; border-width: 0 0 3px 0; box-shadow: 0 8px 5px -5px ; } /*Resets Text color*/ div.ui-widget-content .module-single { color: #000000; } /*Sets the main padding*/ .default-dialog { padding: 0 !important; } /*Resets font size*/ .ui-dialog .ui-dialog-content { border: 0; background: none; overflow: auto; zoom: 1; font-size: 1.5rem; padding: 0 !important; } /*Removes Repeating child class*/ div.ui-widget-content > div.ui-widget-content { border: none; box-shadow:none; } /*Clears out hard coded margins*/ .default-dialog .module-single p { margin: inherit; margin-bottom: 1.8rem; } /*Hides old empty header*/ .ui-dialog .ui-dialog-title { float: none; margin: 0; display: none; } /* Modal Header ==================================================== */ .default-dialog .module-single h1, .default-dialog .module-single .header h1{ margin-bottom: 0px; margin-top: 0px; padding: 0px 15px 15px 15px; padding-top: 15px; width: 100%; box-sizing: border-box; /* Super Default */ font-size: 2.4rem; font-weight: 700; text-transform: uppercase; /* Default */ font-size: 2rem; font-weight: 600; border-bottom:1px solid transparent; background: #0f4b8f; border-radius: 0px 0px 0 0; /*needs to be the same as .module-single */ /* Overide Default ^ */ font-size: 2rem; font-weight: ; border-bottom-width: 1px; border-bottom-color: #0f4b8f; background: #ffffff; border-top-left-radius: ; border-top-right-radius: ; } /*Close Button*/ .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: 1.5rem; top: -3px; height: auto; width: auto; min-width: 3rem; margin: 0 0 0 0; margin-top: .80rem !important; padding: 0rem 1rem; /* was .5rem 1rem */ z-index: 1; border: 0; cursor: pointer; border-radius: 100%; justify-content: center; text-align: center; align-items: center; transition: all 0.5s; font-size:2.4rem; background: transparent; /* Defaults */ color: #ffffff !important; /* Overide Default ^ */ color: #0f4b8f !important; } .ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { outline: 0; padding: 0rem 1rem !important; /* was 0 1rem */ /* Default */ background: rgba(12,60,114,255); color: #ffffff !important; /* Overide Default ^ */ background: ; color: !important; } .ui-dialog .ui-dialog-titlebar-close::before { text-decoration: none !important; font-family: 'fontawesome'; font-weight: normal; display: inline-block; content: '\e9fc'; } /* Help Pop up Modal ==================================================== */ /*Pop Up template pages*/ .help_pop_up { /* Defaults */ border-radius: 0px; border: 0px solid transparent; color: #000000; /* $default-shadow-color default shadow color*/ box-shadow: 0 8px 5px -5px rgba(0,0,0,0.3); /* Overide Defaults ^ */ border-radius: ; border-color: ; border-width: 0 0 3px 0; box-shadow: 0 8px 5px -5px ; } /*Remove hardcoded padding*/ #modal-help-content h2 { padding-top: 0; } /*Hides duplicate h1*/ #modal-help-content h1 { display: none; } .help_pop_up h2 { background: transparent; } .ui-dialog .body{ padding: 1rem 2rem; } .modal-help-submit_button.submit_buttons, .ui-dialog.no-close .submit_buttons { padding: 0rem 2rem !important; box-sizing: border-box; display: flex; justify-content: center; margin-top: 1.4em !important; } /* change close icon to regular fontawesome X */ .select-menu-close-icon { background-image: none; background-size: contain; width: 100%; top: 0; right: 0; z-index: 7; height: 45px; position: relative; color: #0f4b8f; } .select-menu-close-icon:after { text-decoration: none !important; font-family: 'fontawesome'; font-weight: normal; display: block; content: '\e9fc'; right: 10px; top: 10px; position: absolute; height: 45px; width: 45px; font-size: 1.3em; text-align: right; } #welcome-div { display: none; } /* LONG HELP MODALS */ #modal-help-content { max-height: 65vh; /* overflow-y: scroll; */ overflow-y: auto; overflow-x: hidden; border-radius: 4px; padding: 15px; margin-bottom: 30px; } #modal-help-content::-webkit-scrollbar-thumb { -webkit-border-radius: 10px !important; border-radius: 10px !important; background: #0f4b8f !important; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; } #modal-help-content:-webkit-scrollbar-thumb:window-inactive { background: #0f4b8f !important; } /* !important is needed sometimes */ #modal-help-content::-webkit-scrollbar { width: 12px !important; } /* Track */ #modal-help-content::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important; -webkit-border-radius: 10px !important; border-radius: 10px !important; } /* Handle */ #modal-help-content::-webkit-scrollbar-thumb { -webkit-border-radius: 10px !important; border-radius: 10px !important; background: #0f4b8f !important; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; } #modal-help-content::-webkit-scrollbar-thumb:window-inactive { background: #0f4b8f !important; } /* Timeout Modal */ .ui-dialog.no-close { border: 1px solid #d8d8d8; } .ui-dialog.no-close [data-bind="html: options().content"] { padding: 25px; } div[id*=pnlDisclosure] { padding: 20px; } /****************************************** IDENTITY VERIFICATION & BATCH TEMPLATE MODAL FIXES ******************************************/ /* Add Left Padding On Identity Verification Modal */ div[id*="dlgIdentityVerification"].ui-dialog-content > * { margin-left: 20px; } /* Add Padding To Bottom of Modal */ .Register [id*="BottomZone"], div[id*="MFUZWNF"][id*="BottomZone"] { margin-bottom: 20px; } /* Remove Extra Coloring On Identity Verification Modal */ [id*="dlgIdentityVerification"].module-single > div.header { background-color: transparent } /* Fix Height On Identity Verification Modal */ div[aria-describedby*="dlgIdentityVerification"] { height: fit-content !important; } /* Move Buttons On Identity Verification Modal */ p[id*="MFUZWNF"][id*="SubmitButtons"] { justify-content: flex-end !important; } .ForgotPassword .default-dialog .module-single p, .Register .default-dialog .module-single p, .BatchTemplates .default-dialog .module-single p, .Challenge .default-dialog .module-single p, .ChangePassword .default-dialog .module-single p, .ChangeProfile .default-dialog .module-single p, .ChangeUserID .default-dialog .module-single p, .ChangeAddressPhoneNumber .default-dialog .module-single p { margin: 0px; } .skin-grid { margin: 20px; background-color: #ffffff; padding: 10px; } /* Move Submit Buttons Right On Identity Verification Modal */ .Register .ui-dialog.no-close .submit_buttons { left: 20px; position: relative; } /* Remove Horizontal Scroll On Identity Verification Modal */ .Register .ui-dialog .ui-dialog-content { overflow: hidden; } /****************************************** IDENTITY VERIFICATION PAGE FIXES ******************************************/ .UserVerification #main-sortable, .IdentityVerification #main-sortable { padding: 25px; background: #ffffff; } /****************************************** USER ENTITLEMENTS FIXES ******************************************/ div#viewer-info-dialog { margin: 30px; } .UserEntitlements .ui-dialog-buttonset { margin-bottom: 52px; } .FIEntitlements .ui-dialog-buttonset { margin-bottom: 80px; } /****************************************** ADDENDA MODAL FIXES ON BATCH TEMPLATE DETAILS ******************************************/ .BatchTemplateDetails #M_layout_content_PCDZ_M5ZYOUL_ctl00_ctl00_dlgAddenda > div.header > h1 { border-bottom: none; } .BatchTemplateDetails .ui-dialog .ui-dialog-titlebar-close { top: 10px !important; right: 10px; } /****************************************** PRIVACY POLICY CORNERS ******************************************/ .PrivacyPolicy .default-dialog { border-radius: 0px; } /****************************************** TRANSACTION DETAILS ******************************************/ div.ui-widget-content { color: #000000; } .pfm_transaction_details_header, .key_expenses_management_editor_header, .pfm_module_heading { background: #ffffff; font-size: 2rem; font-weight: ; font-family: Source Sans 3; text-transform: uppercase; color: #000000; } .pfm_transaction_details_header, .key_expenses_management_editor_header, .pfm_module_heading { border-bottom: 1px solid #0f4b8f; } tr.transaction_item_container td { padding-top: 13px; } /****************************************** TAKES AWAY UNNECESSARY BORDER ******************************************/ .ui-dialog.no-close { border: none; } /****************************************** STATE TAX ID MODAL POPUP SPACING ******************************************/ .StateTaxIDs [id*="MCBELRL"] h2 { margin-top: 15px; margin-left: 20px !important; } .StateTaxIDs button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close { top: -3px; } /****************************************** BORDERS ON CONTENT MANAGER MODAL ******************************************/ .ContentManager [id*="dlgContentUpload"] { margin: 30px; } .ContentManager [id*="txtContentName"] { margin-bottom: 15px; } /****************************************** MOVES THE QUESTION MARK POPUP ON THE ROLE MANAGEMENT PAGE ******************************************/ #M_layout_content_PCDZ_MSLTXV4_ctl00_webInputForm_LC_ctl01 { left: 73px !important; } .RoleManagement div.callout_above::before { right: 158px; } /****************************************** MOVES THE "I CAN'T BE REACHED" BUTTON TO THE LEFT ******************************************/ p[id*="MXILB6E"][id*="SubmitButtons"], .ui-dialog.no-close .submit_buttons { justify-content: flex-end !important; padding: 0px !important; } /* overrides above rule for timeout message */ #M_messageDialog_D .submit_buttons { padding: 0rem 2rem !important; } /* Fixes header padding on some pop-up modals */ .default-dialog h2.module_header { padding-top: 14px; padding-left: 14px; } /* Navigation CSS ====================================================*/ /*==================================================== /* Navigation Imports ==================================================== */ /* Primary Navigation Settings ==================================================== */ /*==================================================== /* Primary Navigation Settings ==================================================== */ /* Table of contents ==================================================== - Primary Navigation Container - Primary Navigation - Sub Navigation - Sub Navigation Third Teir */ /* Primary Navigation Container ==================================================== */ /*Fluid primary nav Container added jquery*/ .fixed-width-nav{ width: 100%; display: flex; margin-bottom: 1.8rem; height: ; /* color: $default-shadow-color; /*default shadow color - removed as causes issues on iOS */ /* Defaults */ background: #cf202f; box-shadow: 0 10px 5px -5px rgba(0,0,0,0.3); /* Overide Defaults ^ */ background: #ffffff; box-shadow: 0 10px 5px -5px rgba(0,0,0,0.3) ; /* This variable MUST contain a value */ } @media (max-width: 992px) { .fixed-width-nav{ display: none; } } /* Primary Navigation ==================================================== */ /* Div that contains nav and logo*/ div.page-primary-nav { height: 100%; width: 100%; z-index: 10; display: inline-flex; overflow: visible; box-sizing: border-box; background: transparent; padding: 0 2rem; margin: 0 auto; max-width: 100%; max-width: 1280px; align-items: center; } /* Div that contains the div that contains the ul*/ .page-primary-nav .primary-nav { float: none; margin-top: 0; margin-left: 0; margin: 0 0; display: flex; flex-grow: 1; max-width: 100%; width: 100%; align-items: center; justify-content: flex-end; font-family: Source Sans 3; } /* Remove navigation from Check Viewer */ .CheckImageViewer .page-primary-nav .primary-nav, .CheckImageViewer .top-nav-right { display: none; } /* Div that contains the Nav UL*/ .portalmenutree { position: relative; display:block; width: auto; max-width: 99%; /*needed for IE to wrap and justify ^*/ all: unset; /*Clears IE hack ^*/ } /* Main nav ul*/ .page-primary-nav ul.menu-tree-item1 { float: none; padding: 0; width: auto; display: flex; align-items: baseline; flex:1 1 100%; flex-wrap: wrap; } /* Main nav Li*/ .page-primary-nav .primary-nav .menu-items > li { height: 100%; float: none; padding: 0; margin: 0; line-height: 1.5; white-space: nowrap; text-align: center; position: relative; } /* Main nav Li > a */ .page-primary-nav .menu-tree-item1 a { display: flex; justify-content: center; align-items: center; padding-bottom: 0; margin-bottom: 0; padding: 1rem; text-decoration: none; height: 100%; box-sizing: border-box; /* Defaults */ border-bottom: .5rem solid transparent; border-top: .5rem solid transparent; border-radius: 0; /* Overide Defaults ^ */ border-bottom-width: 4px; border-top-width: 4px; border-radius: ; } /* Main nav Li > a hover*/ .page-primary-nav .menu-tree-item1 a:hover, .page-primary-nav .menu-tree-item1 a:focus { text-decoration: none; /* Defaults */ color: #ffffff; background: rgba(0, 0, 0, 0.3); /* Overide Defaults ^ */ color: #0f4b8f; background: transparent; } /* Main nav text */ .page-primary-nav .primary-nav .menu-tree-item1 > a .icon-text { /* Defaults */ color: #ffffff; -webkit-text-fill-color: #ffffff; /* fix for iPad menus */ font-size: 1.6rem; /* Overide Defaults ^ */ color: #000000; -webkit-text-fill-color: #000000; /* fix for iPad menus */ text-transform: uppercase; font-size: 14px; font-weight: 600; } /* Main nav text on hover*/ .page-primary-nav .primary-nav .menu-tree-item1 > a:hover .icon-text, .page-primary-nav .primary-nav .menu-tree-item1 > a:focus .icon-text { /* Defaults */ color: #ffffff; -webkit-text-fill-color: #ffffff; /* fix for iPad menus */ /* Overide Defaults ^ */ color: #0f4b8f; -webkit-text-fill-color: #0f4b8f; /* fix for iPad menus */ } /* Icon if item has a sub nav */ .page-primary-nav .primary-nav .menu-items>li[nodelevel='1'][haschildren='true'] > a > .icon-text:after { content: ''; margin-left: .5rem; font-family: 'fontawesome'; font-size: .9rem; content: '\e93a'; } /* Customize arrow icon colors in Primary Navigation Menu bar ========================================================= */ /* color of arrow icon for HOVER menu item */ .page-primary-nav .primary-nav .menu-tree-item1 > a.current-tab:hover .icon-text:after, .page-primary-nav .primary-nav .menu-tree-item1 > a:hover .icon-text:after { /* Defaults */ color: ; -webkit-text-fill-color: ; /* fix for iPad menus */ } /* color of arrow icon for CLICKED menu item */ .page-primary-nav .primary-nav .menu-tree-item1 > a.current-tab:focus .icon-text:after, .page-primary-nav .primary-nav .menu-tree-item1 > a:focus .icon-text:after { /* Defaults */ color: ; -webkit-text-fill-color: ; /* fix for iPad menus */ } /* color of arrow icon for CURRENTLY SELECTED menu item */ .page-primary-nav .primary-nav .menu-tree-item1 > a.current-tab .icon-text:after { /* Defaults */ color: ; -webkit-text-fill-color: ; /* fix for iPad menus */ } /* color of arrow icon for NORMAL menu item */ .page-primary-nav .primary-nav .menu-tree-item1 > a .icon-text:after { /* Defaults */ color: ; -webkit-text-fill-color: ; /* fix for iPad menus */ } /* Active State ==================================================== */ .page-primary-nav .primary-nav .menu-tree-item1 > a.current-tab { padding-left: 1rem; padding-right: 1rem; margin-bottom: ; /* Defaults */ background: transparent; border-bottom: .5rem solid #0f4b8f; /* Overide Defaults ^ */ background: ; border-bottom-width: 4px; border-bottom-color: #0f4b8f; } .page-primary-nav .primary-nav .menu-tree-item1 > a.current-tab:hover, .page-primary-nav .primary-nav .menu-tree-item1 > a.current-tab:focus { outline:0; /* Defaults */ color: #ffffff; -webkit-text-fill-color: #ffffff; /* fix for iPad menus */ background: rgba(0, 0, 0, 0.3); /* Overide Defaults ^ */ color: #0f4b8f; -webkit-text-fill-color: #0f4b8f; /* fix for iPad menus */ background: transparent; } .page-primary-nav .primary-nav .menu-tree-item1 > a.current-tab .icon-text { /* Defaults */ color:#ffffff; -webkit-text-fill-color:#ffffff; /* fix for iPad menus */ /* Overide Defaults ^ */ color: #000000; -webkit-text-fill-color: #000000; /* fix for iPad menus */ /* Super Overide Defaults ^ */ color: #0f4b8f; -webkit-text-fill-color: #0f4b8f; /* fix for iPad menus */ } .page-primary-nav .primary-nav .menu-tree-item1 > a.current-tab:hover .icon-text, .page-primary-nav .primary-nav .menu-tree-item1 > a.current-tab:focus .icon-text { outline: 0; /* Defaults */ color: #ffffff; -webkit-text-fill-color: #ffffff; /* fix for iPad menus */ /* Overide Defaults ^ */ color: #0f4b8f; -webkit-text-fill-color: #0f4b8f; /* fix for iPad menus */ } /* Sub Navigation ==================================================== */ ul.horizontal .menu-tree-item1 .menu-items { width: 200px; box-sizing: border-box; position: absolute; z-index: 100; margin-left: 0; left: 0; margin-top: 0; box-shadow: 0 2px 3px 0 rgba(0,0,0,0.3); box-shadow: 0 2px 3px 0 rgba(0,0,0,0.3); } /*Optional border to outer UL to display*/ .li-menu-open > .menu-items { border:3px solid transparent; animation-name: fadeInOpacity; animation-timing-function: ease-in-out; animation-duration: 400ms; /* Defaults */ border-radius: 0px; /* Overide Defaults ^ */ border-radius: 0; border-color:; } /*submenu triangle*/ .li-menu-open > .menu-items::before { content: ""; position: absolute; border: 1rem solid transparent; top: -2rem; left: 1rem; border-color: transparent; /* Defaults */ border-bottom-color:#0f4b8f ; /* Overide Defaults ^ */ border-bottom-color: #f6f6f6; /* Super overide^ */ border-bottom-color: ; } .li-menu-open > .menu-items.alignToScreen::before { left: auto; right: 3em; } /*Sub Nav divider*/ .page-primary-nav .menu-tree-item2:not(:last-child), .page-primary-nav .menu-tree-item3:not(:last-child){ border-bottom:0px solid transparent; /* Defaults */ border-bottom-width: 1px; border-bottom-color: #e4e4e4; /* Overide Defaults ^ */ border-bottom-width: 0; border-bottom-color: ; } .page-primary-nav .menu-tree-item2 a { text-align: left; border-bottom: none; border-top: none; font-weight: normal; } ul.menu-items.menuSub{ /* Defaults */ background: #0f4b8f; /* Overide Defaults ^ */ background: #f6f6f6; } /*Sub Nav hover*/ .page-primary-nav .menu-tree-item2 a:hover, .page-primary-nav .menu-tree-item2 a:focus { text-decoration: none; /* Defaults */ color: #ffffff; -webkit-text-fill-color: #ffffff; /* fix for iPad menus */ background: rgba(0, 0, 0, 0.3); /* Overide Defaults ^ */ color: #ffffff; -webkit-text-fill-color: #ffffff; /* fix for iPad menus */ background: #0f4b8f; text-shadow: ; } /*Text setting in sub menu*/ ul.menu-tree-item1 .menu-items .icon-text { width: 100%; text-overflow: ellipsis; overflow: hidden; box-sizing: border-box; padding-left: 5px; font-size: 1.5rem !important; text-transform: uppercase; /* Defaults */ color: #ffffff; -webkit-text-fill-color: #ffffff; /* fix for iPad menus */ /* Overide Defaults ^ */ color: #484848; -webkit-text-fill-color: #484848; /* fix for iPad menus */ text-shadow: ; } .page-primary-nav .primary-nav .menu-tree-item4 > a:hover .icon-text, .page-primary-nav .primary-nav .menu-tree-item4 > a:focus .icon-text, .page-primary-nav .primary-nav .menu-tree-item2 > a:hover .icon-text, .page-primary-nav .primary-nav .menu-tree-item2 > a:focus .icon-text { /* Defaults */ color: #ffffff; -webkit-text-fill-color: #ffffff; /* fix for iPad menus */ /* Overide Defaults ^ */ color: #ffffff; -webkit-text-fill-color: #ffffff; /* fix for iPad menus */ text-shadow: ; } /*Overide menu.css*/ .primary-nav ul.menu-items.menu-tree-item2 .menu-item { line-height: 1.5; height: auto; } /* Hides submenus menu.css*/ ul.hide-menu-item, li.hide-menu-item { display: none; } /* Sub Navigation Third Teir ==================================================== */ ul.menu-tree-item3.menuSub{ margin-left:-.5rem !important; /* Defaults */ background: rgba(13,67,128,255); /* Overide Defaults ^ */ background: rgba(221,221,221,255); } ul.menu-items.menu-tree-item3.menuSub::before { content: ""; border: none; } ul.menu-tree-item3{ left: 200px !important; position: absolute; top: 0; } .page-primary-nav .primary-nav .menu-tree-item3 > a:hover .icon-text, .page-primary-nav .primary-nav .menu-tree-item3 > a:focus .icon-text { /* Defaults */ color: #ffffff; -webkit-text-fill-color: #ffffff; /* fix for iPad menus */ /* Overide Defaults ^ */ color: #ffffff; -webkit-text-fill-color: #ffffff; /* fix for iPad menus */ text-shadow: ; } /* Last Child dropdown ==================================================== */ ul.menu-tree-item2.alignToScreen { position: absolute; margin-top: 0; } ul.menu-tree-item3.alignToScreen{ left: -200px !important; position: absolute; top: auto !important; margin-left: 0 !important; } /* Sub Navigation Arrow ==================================================== */ ul.menu-tree-item2 .hasSubMenu > a .icon-text::after { display: none; } ul.menu-tree-item2 .hasSubMenu > a { /* Defaults */ color: #ffffff; -webkit-text-fill-color: #ffffff; /* fix for iPad menus */ /* Overide Defaults ^ */ color: #484848; -webkit-text-fill-color: #484848; /* fix for iPad menus */ } ul.menu-tree-item2 .hasSubMenu > a::after { transition: all 0.2s; text-decoration: none !important; font-family: 'fontawesome'; font-weight: normal; display: inline-block; content: '\e909'; } ul.menu-tree-item2 .hasSubMenu.li-menu-open > a::after { transform: rotate(90deg) } ul.menu-tree-item2.alignToScreen .hasSubMenu.li-menu-open > a::after { transform: rotate(180deg) } /****************************************** CONTROLS NAVIGATION ELLIPSIS OR LINE BREAK ******************************************/ ul.menuLevel3 > li[nodelevel='4'] > a, ul.menuLevel2 > li[nodelevel='3'] > a, ul.menuLevel1 > li[nodelevel='2'] > a { white-space: nowrap; white-space: normal; } /****************************************** CONTROLS SUBMENU APPEARING ON MOUSEOVER OR CLICK ******************************************/ #M_Menu_ac7f69f4-7651-4ffd-a6cf-580e2d4ea546_a:hover .menu-tree-item2.hide-menu-item, /* PROFILE */ #M_Menu_8abe33c9-9565-475f-964f-251889c16f93_a:hover .menu-tree-item2.hide-menu-item, /* WIRES */ #M_Menu_05c2a55d-2d6c-4ff3-92bd-087580e30780_a:hover .menu-tree-item2.hide-menu-item, /* ACH */ #M_Menu_7cbc51e6-d32b-4ab7-8a58-1082ad1164eb_a:hover .menu-tree-item2.hide-menu-item, /* SPENDING */ #M_Menu_019b6a10-2f6a-4757-b904-eed97c35391a_a:hover .menu-tree-item2.hide-menu-item, /* TRANSFERS */ #M_Menu_e8ef7cf2-e86e-4e50-8ed8-20a4bb418b84_a:hover .menu-tree-item2.hide-menu-item, /* PAYMENTS */ #M_Menu_74cfd8d9-4f31-40e3-a1aa-913deef81287_a:hover .menu-tree-item2.hide-menu-item /* ACCOUNTS */ { display: none; display: block; } /* Secondary Navigation Settings ==================================================== */ /*==================================================== /* Primary Navigation Settings ==================================================== */ /* Table of contents ==================================================== - Disable Second Navigation */ /* Disable Secon Navigation ==================================================== */ .page-secondary-nav-wrapper{ display: none; } /* Mobile Package CSS ====================================================*/ /*==================================================== /* Mobile Imports ==================================================== */ /* Mobile Updated Slider Menu ==================================================== */ /*==================================================== /* Slider Menu Imports ==================================================== */ /* Slider Menu Setting ==================================================== */ /*==================================================== /* Slider Menu (mobile package) ==================================================== */ /* Table of contents ==================================================== - General Mobile Nav - Slider Header - Slider Body - Slider Submenu - Slider Submenu third teir - Show and hide dropdowns - Logout Button - Top Header Links */ /* General Mobile Nav ==================================================== */ /* Hides Slider Navigation */ .slider-menu.display-off { display: none; } /* Main Slider Navigation Settings */ .slider-menu { display: flex; background: transparent; height: 100% !important; bottom: 0 !important; width: 100%; position: absolute; top: 0; right: 0; z-index: 19999; } .slider-menu.accordions { height: initial !important; position: fixed !important; top: 0 !important; bottom: 0 !important; } .slider-menu-container { display: inline-block; margin: 0; width: 80%; min-width: 300px; max-width: 480px; height: 100% !important; position: absolute; right: 0; border-left: none; border-bottom: none; /* Defaults */ background: #e9e9e9; /* color: rgba(0, 0, 0, 0.3); */ /*default shadow color*/ box-shadow: 0 8px 5px 5px rgba(0, 0, 0, 0.3); /* Override Defaults ^ */ background: #f6f6f6; box-shadow: 0 8px 5px 5px rgba(0,0,0,0.3); } /* Slider Header ====================================================*/ .slider-menu-head { padding: 1rem 2rem; display: flex; justify-content: flex-end; align-items: center; width: 100%; box-sizing: border-box; height: auto; /* Defaults */ color: #000000; background: #ffffff; border-bottom: 1px solid transparent; /* Override Defaults ^ */ color: ; background: ; border-bottom-width: ; border-bottom-color: ; box-shadow: 0 2px 3px 0 transparent; } /* After changing JS to first and last name, we are seeing the profile-menu, so hiding it */ .slider-menu-last-login-date, .slider-menu-container .profile-menu { margin-top: 0; font-size: 1.5rem; display: none; } /* close button */ .close-slider-menu-button { order: 5; cursor: pointer; float: none; background: none; height: 3rem; width: 3rem; min-height: 3rem; min-width: 3rem; border-radius: 100%; justify-content: center; text-align: center; align-items: center; margin: 0; margin-top: 0; margin-left: 0; margin-right: -6px; transition: all 0.5s; display: flex; padding: 1rem; /* Defaults */ color: #000000; /* Override Defaults ^ */ color: ; } .close-slider-menu-button:hover, .close-slider-menu-button:focus { outline: 0; /* Defaults */ background: rgba(12,60,114,255); color: #ffffff; /* Override Defaults ^ */ background: transparent; color: #0f4b8f; } .close-slider-menu-button::before { text-decoration: none !important; font-family: 'fontawesome'; font-weight: normal; display: inline-block; font-size: 1.5rem; content: '\e9fc'; } /* Profile Name in slider header */ .slider-profile-name { flex: 1; font-weight: bold; /* Defaults */ color: #000000; /* Override Defaults ^ */ color: ; } /* Chat Icon in slider header*/ .slider-menu .div-chat-icon { float: none; justify-content: flex-end; order: 4; display: flex; font-size: 0; margin-right: 0; } .slider-menu .chat-icon { background: none; display: flex; justify-content: center; align-items: center; width: auto; height: auto; text-indent: 0; margin-right: 1rem; transition: all 0.5s; height: 3rem; width: 3rem; border-radius: 100%; text-decoration: none; /* Defaults */ color: #000000; /* Override Defaults ^ */ color: ; } .slider-menu .chat-icon:hover, .slider-menu .chat-icon:focus { outline: 0; text-decoration: none; /* Defaults */ background: rgba(12,60,114,255); color: #ffffff; /* Override Defaults ^ */ background: transparent; color: #0f4b8f; } /* Sets the chat Icon image */ .slider-menu .chat-icon::before { text-decoration: none !important; font-family: 'fontawesome'; font-weight: normal; display: inline-block; font-size: 1.5rem; content: '\e94c'; } /* Slider Body ====================================================*/ .slider-menu-container .portalmenutree { overflow-x: hidden; overflow-y: auto; width: 100%; height: 100% !important; padding: 0; box-sizing: border-box; display: inline-block; flex: 1; padding-bottom: 10rem !important; /*needed so log off button doesnt cover last items*/ } /*Make Ul 100%*/ .vertical-inline .vertical .menu-items { width: 100%; } /*Shadow divider between drop downs when active*/ .slider-menu ul.menu-items.menuSub { /* Defaults */ box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.3); /* Override Defaults ^ */ box-shadow: 0 5px 5px 0 rgba(0,0,0,0.3); } .slider-menu li.menu-tree-item1, .slider-menu .menu-items > li { padding-bottom: 0; padding-top: 0; display: flex; flex-direction: column; align-items: center; border-bottom: none; box-sizing: border-box; white-space: nowrap; line-height: 1.5; } .slider-menu li.menu-tree-item1:not(:first-child) { /* Defaults */ border-top: 0px solid transparent; /* Override Defaults ^ */ border-top-width: ; border-top-color: ; } /* Link Settings and icon color*/ .slider-menu .menu-items > li > a { width: 100%; display: flex; align-items: center; padding: 1rem 2rem; text-decoration: none; /* Defaults */ color: #000000; -webkit-text-fill-color: #000000; font-size: 1.8rem; /* Override Defaults ^ */ color: ; -webkit-text-fill-color: ; font-size: 1.5rem; } /* When open keep hover state on */ .slider-menu .menu-items > li > a:hover, .slider-menu .menu-items > li > a:focus, .portalmenutree-submenu-overlay ul.menu-tree-item1 .hasSubMenu > a.caret-up, ul.use-overlays.menu-tree-item1 .hasSubMenu > a.caret-up, .portalmenutree-submenu-overlay ul.menu-tree-item1 .hasSubMenu > a.caret-left, ul.use-overlays.menu-tree-item1 .hasSubMenu > a.caret-left { text-decoration: none; outline: 0; /* Defaults */ color: #ffffff; -webkit-text-fill-color: #ffffff; background: #0f4b8f; /* Override Defaults ^ */ color: #000000; -webkit-text-fill-color: #000000; background: #f6f6f6; } /* MONTBTPS-230 - iphones turning background of list item in menu light when focused */ .phone-device.ios .slider-menu .menu-tree-item1 li:focus { background-color:#f6f6f6; } /* When open keep hover state on text */ .portalmenutree-submenu-overlay ul.menu-tree-item1 .hasSubMenu > a.caret-up .icon-text, ul.use-overlays.menu-tree-item1 .hasSubMenu > a.caret-up .icon-text, .portalmenutree-submenu-overlay ul.menu-tree-item1 .hasSubMenu > a.caret-left .icon-text, ul.use-overlays.menu-tree-item1 .hasSubMenu > a.caret-left .icon-text { /* Defaults */ color: #ffffff; -webkit-text-fill-color: #ffffff; /* Override Defaults ^ */ color: #000000; -webkit-text-fill-color: #000000; } /*Text settings*/ .slider-menu .menu-items .icon-text, .slider-menu .menu-items .icon-text.selected { flex: 1; font-size: 1.5rem; /* Defaults */ color: #000000; font-size: 1.8rem; /* Override Defaults ^ */ color: ; font-size: 1.5rem; font-weight: normal; } /*Text color on hover and focus*/ .slider-menu .menu-items a.menu-tree-item-anchor1:focus .icon-text, .slider-menu .menu-items a.menu-tree-item-anchor1:hover .icon-text { /* Defaults */ color: #ffffff; -webkit-text-fill-color: #ffffff; /* Override Defaults ^ */ color: #000000; -webkit-text-fill-color: #000000; } /*Old Link Carot or image*/ .portalmenutree-submenu-overlay ul.menu-tree-item1 .hasSubMenu > a .icon-text::after, ul.use-overlays.menu-tree-item1 .hasSubMenu > a .icon-text::after { display: none; } /*Link Carot or image*/ .portalmenutree-submenu-overlay ul.menu-tree-item1 .hasSubMenu > a::after, ul.use-overlays.menu-tree-item1 .hasSubMenu > a::after { margin: 0; transition: all 0.5s; text-decoration: none !important; font-family: 'fontawesome'; font-weight: normal; display: inline-block; transition: transform 0.5s ease; font-size: 1.5rem; content: '\e909'; } /*Link open image*/ .portalmenutree-submenu-overlay ul.menu-tree-item1 .hasSubMenu > a.caret-up::after, ul.use-overlays.menu-tree-item1 .hasSubMenu > a.caret-up::after, .portalmenutree-submenu-overlay ul.menu-tree-item1 .hasSubMenu > a.caret-left::after, ul.use-overlays.menu-tree-item1 .hasSubMenu > a.caret-left::after { transform: rotate(90deg); color: #000000; -webkit-text-fill-color: #000000; } /*Animation when tab opens up*/ .portalmenutree-submenu-overlay ul.menu-tree-item1 .hasSubMenu > a.caret-up+ul, ul.use-overlays.menu-tree-item1 .hasSubMenu > a.caret-up+ul, .portalmenutree-submenu-overlay ul.menu-tree-item1 .hasSubMenu > a.caret-left+ul, ul.use-overlays.menu-tree-item1 .hasSubMenu > a.caret-left+ul { animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } /* Slider Submenu ====================================================*/ .slider-menu .menu-tree-item1 li { border-bottom: none; padding-bottom: 0; padding-top: 0; } /* reset submenu li padding*/ .slider-menu ul.menu-tree-item2 .menu-item { padding-left: 0; padding: 0; } /* Submenu link padding (on link make the hover 100%)*/ .slider-menu ul.menu-tree-item2 .menu-item a { padding-left: 3.5rem; } /* Submenu Hover bg color*/ .slider-menu ul.menu-tree-item2 .menu-item a:hover, .slider-menu ul.menu-tree-item2 .menu-item a:focus { background: rgba(0, 0, 0, 0.15); outline: 0; } /*Background color when tab is open*/ .slider-menu .vertical-inline ul.menu-items.menuSub { /* Defaults */ background: #0f4b8f; /* Override Defaults ^ */ background: #f6f6f6; } /* Submenu Text color */ .slider-menu ul.menu-tree-item1 .menu-items .icon-text { width: 100%; text-overflow: inherit; overflow: visible; box-sizing: border-box; padding-left: 0; text-transform: uppercase; /* Defaults */ font-size: 1.5rem !important; color: #ffffff; -webkit-text-fill-color: #ffffff; /* for iOS */ /* Override Defaults ^ */ color: #000000; -webkit-text-fill-color: #000000; /* for iOS */ } /* Submenu Hover text*/ .slider-menu ul.menu-tree-item2 .menu-item a:hover .icon-text, .slider-menu ul.menu-tree-item2 .menu-item a:focus .icon-text { /* Defaults */ color: #ffffff; -webkit-text-fill-color: #ffffff; /* for iOS */ /* Override Defaults ^ */ color: #000000; -webkit-text-fill-color: #000000; } /* Remove spacing in admin site due to lack of icons ^ */ .admin-site .slider-menu ul.menu-tree-item2 .menu-item a .nav-icon { display:none; } /* Slider Submenu third teir ====================================================*/ /* Remove extra caret on third nav */ .vertical-inline ul.menu-tree-item2 .hasSubMenu { background: none; } .slider-menu ul.menu-tree-item3 { left: 0 !important; position: relative; top: inherit; } .slider-menu ul.menu-tree-item3.menuSub { margin-left: 0 !important; } /* Third tier padding */ .slider-menu ul.menu-tree-item3 .menu-item a { padding-left: 5.5rem; } /* Third tier truncate long titles */ .slider-menu ul.menu-tree-item2.menu-items .icon-text { text-overflow: ellipsis; overflow: hidden; } /* When open have a slight darker color */ ul.use-overlays.menu-tree-item1 .hasSubMenu > a.caret-left+ul, ul.use-overlays.menu-tree-item1 .hasSubMenu>a.caret-left { background: rgba(0, 0, 0, 0.15); } /*Sets the third tier caret color*/ .portalmenutree-submenu-overlay ul.menu-tree-item1 .hasSubMenu > a.caret-right::after, ul.use-overlays.menu-tree-item1 .hasSubMenu > a.caret-right::after { /* Defaults */ color: #ffffff; -webkit-text-fill-color: #ffffff; /* Override Defaults ^ */ color: #000000; -webkit-text-fill-color: #000000; } /* Slider Submenu fourth teir ====================================================*/ /* Fourth tier padding */ .slider-menu ul.menu-tree-item4 .menu-item a { padding-left: 7.6rem; } /* Show and hide dropdowns ====================================================*/ /* Shows the dropdown */ .slider-menu .hide-menu-item { display: block !important; } /* Hides dropdown */ .slider-menu .hide-accordion-menu { display: none !important; } /* Logout Button ====================================================*/ .accordions .slider-menu-logoff { width: 100%; /* since slider menu width is 80% */ max-width: 480px; /* since slider menu max-width is 480px */ text-align: center; min-height: 45px; box-sizing: border-box; z-index: 100; border: none; padding: 0; display: flex; flex: 1 1 100%; align-items: center; bottom: 0; position: absolute; /* Defaults */ height: 45px; background: #0f4b8f; border-top:2px solid #e9e9e9; /* Override Defaults ^ */ height: 45px; background: ; border-top-color:#f6f6f6; } .accordions .slider-menu-logoff a { width: 100%; text-decoration: none; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; padding: 0 !important; /* Defaults */ height: 45px; color: #ffffff; background:none; /* Override Defaults ^ */ min-height: 45px; color: ; } .accordions .slider-menu-logoff a:hover, .accordions .slider-menu-logoff a:focus { outline: 0; text-decoration: none; /* Defaults */ background: rgba(0, 0, 0, 0.2); color: #ffffff !important; /* Override Defaults ^ */ color: !important; } .accordions .slider-menu-logoff a::before { text-decoration: none !important; font-family: 'fontawesome'; font-weight: normal; display: inline-block; font-size: 1.5rem; margin-right: .5rem; content: '\ea16'; } /* Top Header Links ====================================================*/ /*settings link container*/ .slider-menu-customize-modules { float: none; margin-left: 0; margin-top: 0; } /* Divider if set*/ .slider-menu-link-item { /* Defaults */ border-top: 0px solid transparent; /* Override Defaults ^ */ border-top-width: ; border-top-color: ; } /*settings link*/ .slider-menu-customize-modules a, .slider-menu-locate-atm a, .slider-menu-help a { text-decoration: none; width: 100%; display: flex; align-items: center; padding: 1rem 2rem; background: none; /* Defaults */ color: #000000; -webkit-text-fill-color: #000000; font-size: 1.8rem; /* Override Defaults ^ */ color: ; -webkit-text-fill-color: ; font-size: 1.5rem; font-weight: normal; } .slider-menu-customize-modules a:hover, .slider-menu-locate-atm a:hover, .slider-menu-help a:hover { /* Defaults */ color: #ffffff; -webkit-text-fill-color: #ffffff; background: #0f4b8f; /* Override Defaults ^ */ color: #000000; -webkit-text-fill-color: #000000; background: #f6f6f6; } /*settings icon settings*/ .slider-menu-icon-settings { background: none; width: auto; height: auto; margin: 0; } /*settings icon text*/ .slider-menu-text-settings { margin-top: 0; } /*ATM link container*/ .slider-menu-locate-atm { float: none; margin-top: 0; margin-right: 0; } /*Help link container*/ .slider-menu-help { float: none; margin-top: 0; } /* hide the hamburger menu on these pages */ form[action*="MobileDisclosure"] .hamburger-menu, form[action*="PasswordChangeRequired"] .hamburger-menu, .mobile-device.PrivacyPolicy .hamburger-menu, .mobile-device.Disclaimer .hamburger-menu, .mobile-device.RegistrationDisclosure .hamburger-menu, .mobile-device.TermsAndConditions .hamburger-menu { display: none; } /* hide Settings on Slider menu per P202 */ .phone-device a.slider-menu-settings { display: none; } /* fix for light grey flash when menu items are clicked on iPhone that can cause poor contrast */ .ios .slider-menu .menu-items > li > a, .ios .slider-menu .menu-items > li > a * { -webkit-transition-property: none; transition-property: none; } /* Ribbon Icons ==================================================== */ /*==================================================== /* Slider Menu Icons (mobile package) ==================================================== */ .dark .nav-icon { background-image: none; } .slider-menu .nav-icon { display: flex; width: auto; height: auto; position: unset; margin: 0; padding: 0; line-height: normal; transition: all 0.5s; /* Defaults */ color: #cf202f; -webkit-text-fill-color: #cf202f; -webkit-opacity: 1; /* Overide Defaults ^ */ color: #0f4b8f; -webkit-text-fill-color: #0f4b8f; } /* Hover Icon and active states ^ */ .slider-menu .menu-tree-item-anchor1:hover .nav-icon, .slider-menu .menu-tree-item-anchor1:focus .nav-icon, .slider-menu .caret-up .nav-icon { /* Defaults */ color: #ffffff; -webkit-text-fill-color: #ffffff; -webkit-opacity: 1; /* Overide Defaults ^ */ color: #000000; -webkit-text-fill-color: #000000; -webkit-opacity: 1; } .slider-menu .nav-icon::before, .slider-menu .icon::before { text-decoration: none !important; font-family: 'banking-icons'; font-weight: normal; display: inline-block; margin-right: 1.5rem; /* Defaults */ content: '\e90e';/*default icon when none is set*/ min-width: 3.2rem; font-size: 3.2rem; /* Overide Defaults ^ */ min-width: ; font-size: ; } .nav-icon.icon-home::before{ content: '\e900'; } .nav-icon.icon-accounts::before{ content: '\e901'; } .nav-icon.icon-payments::before{ content: '\e902'; } .nav-icon.icon-pay-person::before{ content: '\e903'; } .nav-icon.icon-transfers::before{ content: '\e904'; } .nav-icon.icon-spending::before{ content: '\e905'; } .nav-icon.icon-ach::before{ content: '\e906'; } .nav-icon.icon-wires::before{ content: '\e907'; } .nav-icon.icon-profile::before{ content: '\e908'; } .nav-icon.icon-alerts::before{ content: '\e909'; } .nav-icon.icon-cards::before{ content: '\e90a'; } .nav-icon.icon-deposits::before{ content: '\e90b'; } .nav-icon.icon-deposit::before{ content: '\e90b'; } .nav-icon.icon-messages::before{ content: '\e90c'; } .nav-icon.icon-more::before{ content: '\e90d'; } .nav-icon.icon-admin::before{ content: '\e90e'; } /*Hides icon in sub navs and force spacing*/ .slider-menu ul.menu-items.menuSub .nav-icon::before, .slider-menu ul.menu-items.menuSub .icon::before { content: '' !important; } /* Top Header links icons ====================================================*/ a.slider-menu-link-item { transition: all 0.5s; } .slider-menu-link-item .icon { left: 0; display: flex; width: auto; height: auto; position: unset; margin: 0; padding: 0; line-height: normal; /* Defaults */ color: #cf202f; -webkit-text-fill-color: #cf202f; -webkit-opacity: 1; /* Overide Defaults ^ */ color: #0f4b8f; -webkit-text-fill-color: #0f4b8f; -webkit-opacity: 1; } /* Icons on hover*/ .slider-menu-link-item:hover .icon, .slider-menu-link-item:focus .icon { /* Defaults */ color: #ffffff; -webkit-text-fill-color: #ffffff; -webkit-opacity: 1; /* Overide Defaults ^ */ color: #000000; -webkit-text-fill-color: #000000; } .slider-menu-link-item .icon::before{ text-decoration: none !important; font-family: 'fontawesome'; font-weight: normal; display: inline-block; margin-right: 1.5rem; content: ''; /* Defaults */ min-width: 3.2rem; font-size: 2.4rem !important; /* Overide Defaults ^ */ min-width: ; font-size: calc( - .8rem) !important; /* Need because font renders bigger than banking-icons ^ */ } .slider-menu-help-link .icon::before{ content: '\e9f5' } .slider-menu-icon-settings.icon::before{ content: '\e94a' } .slider-menu-locate-atm .icon::before{ content: '\e9c4' } td.wide-screen-only img[src*='icon-checkmark.png']{ } td.wide-screen-only img[src*='icon-checkmark.png']::before{ position: relative; display: block; padding: .25rem 0; transition: all 0.5s; font-family: 'fontawesome'; font-size: 1.8rem; color: #cf202f; content: '\e9f5'; } /* Kilimanjaro Account Summary ==================================================== */ /*==================================================== /* Kilimanjaro Settings ==================================================== */ /* Table of contents ==================================================== - Main Kilimanjaro Settings - Kilimanjaro Header - Main Content Settings - Account Data - Account Details Header - Account More Details - Search Transactions - Pending Transactions & Transactions - Labels - Check Viewer Error Layout */ /* Main Kilimanjaro Settings ==================================================== */ /*Makes contents 100% of module*/ .kilimanjaro-module .module-container.mainmodule { padding: 0; } /* Styles kilo like a module on mobile device */ .mobile-device .kilimanjaro-module-template { overflow: hidden; margin-bottom: 1.8rem; /* Defaults */ border-radius: 0px; border: 0px solid transparent; box-shadow: 0 8px 5px -5px rgba(0,0,0,0.3); background: white; /* Overide Defaults ^ */ border-radius: ; border-color: ; border-width: 0 0 3px 0; box-shadow: 0 8px 5px -5px ; background: #ffffff; } /* Makes everything 100% on mobile removing corners */ @media (max-width: 495px) { .mobile-device .kilimanjaro-module-template { border-radius: 0; margin-bottom: 0; } } /* Expands content 100% */ .kilimanjaro-module-template ul { width: 100%; } /* Kilimanjaro Header ==================================================== */ /*Controls the background of header*/ li.kilimanjaro-heading { padding: 1rem 2.5rem; margin-bottom: 0; pointer-events: none; /* Defaults */ background: rgba(0, 0, 0, 0.15); color: #000000; /* Overide Defaults ^ */ color: white; background: #0F4B8F; } /*Changes padding for mobile devices */ .mobile-device li.kilimanjaro-heading { padding: 1rem 1.5rem; } /*Controls the text of header*/ .kilimanjaro-heading input[type=radio]+label { padding: 0; cursor: default; display: block; min-height: 100%; margin: 0; margin-right: 0; /* Super Default */ font-size: 1.8rem; font-weight: 600; /* Default */ font-size: 1.8rem; font-weight: 600; /* Overide Default ^ */ font-size: 1.6rem; font-weight: ; } /* Main Content Settings ==================================================== */ /* Hide Account Summary Page header */ .grouped-account-summary .module-container.graphs .module-single { display: none; } .kilimanjaro-module-template .input-field { margin-bottom: 0px !important; } .kilimanjaro-module-template ul>li:not(.kilimanjaro-heading) { padding: 0; } /*alt coloring for rows*/ .mobile-device .kilimanjaro-module-template ul>li:not(.kilimanjaro-heading):nth-child(even) { background: rgba(0, 0, 0, 0.02); } /*Main Content Container*/ .kilimanjaro-module-template ul>li:not(.kilimanjaro-heading) label { padding: 1rem 2.5rem; width: 100%; box-sizing: border-box; display: flex; margin: 0; transition: all 0.5s; border-top:1px solid transparent; /* Defaults */ color: #000000; border-top-color: #e4e4e4; /* Overide Defaults ^ */ border-top-color: #e9e9e9; } /*Changes padding for mobile devices */ .mobile-device .kilimanjaro-module-template ul>li:not(.kilimanjaro-heading) label { padding: 1rem 1.5rem; } /*The sibling next to header remove border*/ .kilimanjaro-module-template ul>li.kilimanjaro-heading+li label { border-top: none; } /* Default Opacity Hover Color*/ .kilimanjaro-module-template ul>li:not(.kilimanjaro-heading) label:hover { background: rgba(0, 0, 0, 0.09); } /* Account Data ==================================================== */ /* Account name*/ .kilimanjaro-module-template span.account-nickname { margin-right: .5rem; /* Super Default */ text-transform: capitalize; font-weight: 600; /* Default */ font-size: 1.5rem; font-weight: 600; color: #0f4b8f; /* Overide Default ^ */ font-size: ; font-weight: 600; color: ; } /* Account Number smaller font size*/ .kilimanjaro-module-template span.account-nickname+span { font-weight: 600; /* Default */ font-size: calc(1.5rem - .2rem); font-weight: 600; color: #0f4b8f; /* Overide Default ^ */ font-weight: 600; color: ; } /* Controls account amounts */ .account-item { width: 100%; } .account-item>div { display: flex; } .account-item>div>span { flex: 1 1 auto; } /* Current balance*/ span.money.balance.account { flex: 1; text-align: right; font-weight: normal; font-size: inherit; color: #000000; } /* Available Balance */ span.money.account, span.money { flex: 1; text-align: right; /*Super Default*/ font-size: 1.8rem; font-weight: 700; /* Default */ font-size: 1.8rem; color: #000000; /* Overide Default ^ */ font-size: 2rem; color: ; } /* Joint Account optional*/ .account-item>.lighter { color: rgba(38,38,38,255) } .account-item>.lighter span+span { display: flex; justify-content: flex-end; } /* Account Details Header ==================================================== */ .transactions-account { padding: 1rem 2.5rem; display: flex; border-bottom: 1px solid transparent; border-bottom-color: #e4e4e4; border-bottom-width 1px; margin-bottom: 1.8rem; background: rgba(0, 0, 0, 0.05); } /*Changes padding for mobile devices */ .mobile-device .transactions-account { padding: 1rem 1.5rem; } /*Container for account details header */ .kilimanjaro-account { display: inline-flex; flex-wrap: wrap; width: 100%; } /*Availble name*/ span.kilimanjaro-nickname-header { font-size: 1.5rem; width: 100%; } .kilimanjaro-account>div:first-child { display: flex; width: 100%; } /*Availble balance*/ .kilimanjaro-account>div:nth-child(2) { display: flex; align-items: center; width: 100%; } /*Availble Balance amount Header*/ .kilimanjaro-account>div>span.money.balance.account { /*Super Default*/ font-size: 1.8rem; font-weight: 700; /* Default */ font-size: 1.8rem; color: #000000; /* Overide Default ^ */ font-size: 2rem; color: ; } /*Availble balance text*/ .kilimanjaro-account>div:nth-child(3) { order: 0; display: flex; align-items: center; margin-left: 4.5rem; margin-top: -2.5rem; margin-right: .5rem; line-height: 1.2; } /*Iphone 5 wrap long account balaance text string */ @media (max-width: 330px) { .kilimanjaro-account>div:nth-child(3) { font-size: 1.3rem; margin-left: 4.2rem; } } /* Back Button*/ .kilimanjaro-back-div { position: relative; height: 100%; width: 3rem; margin: 1rem 0; margin-right: 2rem; display: block; } .kilimanjaro-back-div input { background: none; color: transparent; border: none; padding: 1rem; margin: -.5rem 0 0 -.5rem !important; border-radius: 0px; position: absolute; min-height: auto; min-width: auto; height: 4rem; width: 4rem; z-index: 1; } .kilimanjaro-back-div input:hover { background: none; } .kilimanjaro-back-div::before { text-decoration: none !important; font-family: 'fontawesome'; font-weight: normal; display: inline-block; position: absolute; transition: all 0.5s; font-size: 2.2rem; margin: -.6rem 0; height: 1em; width: 1em; /* Default */ /* content: "$icon-back-arrow"; */ content: ""; color: #cf202f; /* Overide Default ^ */ color: #000000; } .kilimanjaro-back-div:hover::before { /* Default */ color: rgba(165,25,37,255); /* Overide Default ^ */ color: } .kilimanjaro-detail.kilimanjaro-account { display: flex; width: 100%; flex-wrap: wrap; } /* Account More Details ==================================================== */ .kilimanjaro-label-value-list { padding: 0 2.5rem; } @media (max-width: 767px) { .kilimanjaro-label-value-list { padding: 0rem 1.5rem; } } .kilimanjaro-label-value-list .laguna-submit-buttons { margin-top: 1.8rem; } .kilimanjaro-label-value-list>div { display: flex; flex: 1; line-height: 2; padding: 1rem; justify-content: flex-start; } /* Sets alt color for account information*/ .kilimanjaro-label-value-list>div:nth-child(odd) { background: rgba(0, 0, 0, 0.05); } /* Account info headers */ .kilimanjaro-label-value-list>div>span { display: flex; width: 100%; line-height: 1.5; white-space: normal; justify-content: flex-start; font-weight: 600; font-size: 1.5rem; } /* Account info positions values to the right*/ .kilimanjaro-label-value-list>div>span:nth-child(2) { text-align: right; justify-content: flex-end; font-weight: normal; align-items:flex-start; } /* font size for account name*/ .transactions-area span.account-nickname { font-size: 1.5rem; } /* Edit link and account nickname as a link*/ .account-nickname-editable>span.editable, .account-nickname-editable>.account-nickname { color: #125EB3 !important; cursor: pointer; } /* Add space from edit to name*/ .account-nickname-editable>span.editable { margin-right: 1rem; } /* Edit Nickname form*/ span.accounts-edit-nickname { display: flex !important; flex-wrap: wrap; margin: 0 0 0 0; width: 100% !important; } @media (max-width: 650px) { span.accounts-edit-nickname { margin: 0 -1rem -1rem 0; width: 63% !important; } } .accounts-edit-nickname>input { height: 45px; height: ; box-sizing: border-box; } .accounts-edit-nickname>input:first-of-type { width: 90% !important; padding: .6rem 1.6rem !important; border: 1px solid transparent; background: #ffffff; border-width: ; /* Defaults */ min-height: 45px; font-size: 1.5rem; box-shadow: 0 0 5px rgba(0,0,0,0.3); border-color: #d2d2d2; border-radius: 0px; color: #000000; caret-color: #0f4b8f; /* Overide Defaults ^ */ height: ; box-shadow: 0 0 5px transparent; border-color: ; border-radius: 0px; color: ; caret-color: #0f4b8f; } /* Focus state for form account nickname */ .accounts-edit-nickname>input:first-of-type:focus { outline: 0; /* Changeable Items */ background: ; /* Defaults */ border-color: #0f4b8f; box-shadow: 0 0 5px rgba(0,0,0,0.3); /* Overide Defaults ^ */ border-color: #0f4b8f; box-shadow: 0 0 5px transparent; } /* Buttons for edit nick name*/ .accounts-edit-nickname p.laguna-submit-buttons input { margin: 0 0 0 1rem !important; } /* reverse buttons*/ .accounts-edit-nickname p.laguna-submit-buttons { flex-direction: row-reverse; } /* Search Transactions ==================================================== */ /*initial padding */ .kilimanjaro-accounts-no-transactions-found, .kilimanjaro-accounts-search-area, .kilimanjaro-heading { padding: 0 2.5rem; margin-bottom: 1.8rem; } /*Changes padding for mobile devices */ .mobile-device .kilimanjaro-accounts-no-transactions-found, .mobile-device .kilimanjaro-accounts-search-area, .mobile-device .kilimanjaro-heading { padding: 0rem 1.5rem; } /*Recent Transactions */ .kilimanjaro-heading { display: flex; flex-basis: 50%; flex-wrap: wrap; } @media (max-width: 600px) { .kilimanjaro-heading { display: block; } } /*Search Options */ span.kilimanjaro-plus-minus-button { display: flex; justify-content: flex-end; flex: 1; color: #125EB3; text-decoration: none; cursor: pointer; } span.kilimanjaro-plus-minus-button:hover { text-decoration: underline; color: rgba(14,75,143,255); } /* Plus icon for search options */ span.kilimanjaro-plus-minus-button>span:first-child::before { text-decoration: none !important; font-family: 'fontawesome'; font-weight: normal; display: inline-block; transition: all 0.5s; content: '\e900'; margin-right: .5rem; } /* Minus icon for search options */ span.kilimanjaro-plus-minus-button>.open:first-child::before { content: '\e9cd'; } @media (max-width: 600px) { span.kilimanjaro-plus-minus-button { display: block; } } .kilimanjaro-accounts-search-area input[type="text"] { min-width: 100%; } .kilimanjaro-accounts-search-amounts p { width: 100%; display: inline-flex; align-items: center; } .kilimanjaro-accounts-search-amounts label { margin-bottom: 0; margin-right: 1rem; } .kilimanjaro-accounts-search-amounts label:not(:first-child) { margin-left: .5rem; } .kilimanjaro-accounts-search-amounts { display: inline-flex; flex-wrap: nowrap; width: 100%; } .kilimanjaro-accounts-search-amounts input[type="text"] { min-width: 0rem !important; } /* Pending Transactions & Transactions ==================================================== */ .transaction-item { width: 100%; display: flex; flex-direction: column; } .transaction-item div { width: 100%; display: flex; justify-content: flex-end; } /* If date is present give some space */ .transaction-item div .date { margin-right: 1rem; } /* Transaction amount font size*/ span.money.transaction { font-size: 1.5rem; } /*IE content spacing fix*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .transaction-spacing { max-width: 60%; } } /* Mobile space for description to amount*/ .transaction-item>div:not(.withdate)>span:nth-of-type(1) { white-space: normal; margin-right: .5rem; } /* Check Link and icon ==================================================== */ .transaction-view-check, .transaction-inquiry { color: #125EB3; text-decoration: none; transition: all 0.5s; order: 5; } .transaction-view-check span:hover, .transaction-inquiry span:hover { color: rgba(14,75,143,255); text-decoration: underline; } /* icon settings*/ span.view-check-icon::before, span.inquire-icon::before { text-decoration: none !important; font-family: 'fontawesome'; font-weight: normal; display: inline-block; margin-right: .5rem; } /* Check icon*/ span.view-check-icon::before { content: '\ea75'; } /* Inquire icon*/ span.inquire-icon::before { content: '\e9f5'; } /* Check Image Done button */ .CheckImageViewer .submit_buttons.injected { margin-top: 20px; } /* Close for Tiles */ .tile-close-icon { display: none; } /* Kilimanjaro for Desktop uses these classes */ .desktop-device .kilimanjaro-module-template.kilimanjaro-accounts-module { background: white; } /* .desktop-device .kilimanjaro-module-template span.account-nickname { */ /* color: $color1; */ /* } */ .desktop-device .kilimanjaro-module-template span.account-nickname:hover { color: ; cursor: pointer; } /* @media screen and (max-width: 1138px) { .desktop-device.AccountSummary .left-col .module-single > h2:first-child { padding-bottom: 0 !important; } } */ .desktop-device .kilimanjaro-module-template .money, .desktop-device .kilimanjaro-module-template .account-item { font-weight: normal !important; } /*Stand-in message for Kilimanajro */ div[id*=MN5IU0M] { padding: 10px 15px; } /* This goes into the admin page to make the pagination links easier to tap */ .phone-device div[id="Module-M5QH8YG"] .table_data .table_pagination td a[href*=LinkButtonClick] { padding: 10px 15px; line-height: 55px } /* kilimanjaro updates - the dates should not wrap in monthly grouping */ .phone-device .kilimanjaro-accounts-module .transaction-item span.pending-date { min-width: 50px; padding-right: 3px; White-space: nowrap; } .phone-device .kilimanjaro-accounts-module .transaction-item, .phone-device .kilimanjaro-accounts-module .transaction-item .money.transaction { font-weight: normal; } .no-items-available { padding: 20px; } /* Fix for Check images are currently unavailable. Please try again later Error message */ .mobile-device .graphs span[id*=MRI3BH1][id$=lblError] { margin: 0 auto; padding: 30px 20px; border: 2px solid red; color: red; width: 70%;; min-width: 70%; display: block; margin-top: 20px } .mobile-device .ui-selectmenu-open ul::-webkit-scrollbar-thumb { -webkit-border-radius: 10px !important; border-radius: 10px !important; background: #0f4b8f !important; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; } .mobile-device .ui-selectmenu-open ul::-webkit-scrollbar { width: 12px !important; border-left: .025em #0f4b8f solid; } /* Ribbon Footer ==================================================== */ /*==================================================== /* Ribbon Imports ==================================================== */ /* Primary Ribbon Setting ==================================================== */ /*==================================================== /* Mobile Ribbon Menu ==================================================== */ /*Sets the ribbon footer as a fixed item */ .use-footer-ribbon .page-footer { position: fixed; bottom: 0; width: 100%; z-index: 2; } /*Hides original footer content when ribbon is active*/ .use-footer-ribbon .page-footer-container { display: none; } /*Main Ribbon Container */ .portal-view.use-footer-ribbon .global-quicklinks{ display: block; min-height: 5.6rem; border-top: none; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5); /* Defaults */ background: #e9e9e9; /* Overide Defaults ^ */ background: ; } /* iPhone X, iPhone XS */ @media screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .phone-device.ios .global-quicklinks { position: relative; bottom: 20px; } .phone-device.ios .page-middle-middle .content-wrapper { padding-bottom: 20px; } } /* Handle space above Home Bar on these phones; elevate ribbon menu */ /* iPhone XR - 1792x828px at 326ppi */ @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) { .phone-device.ios .global-quicklinks { position: relative; bottom: 20px; } .phone-device.ios .page-middle-middle .content-wrapper { padding-bottom: 20px; } } /* iPhone XS Max - 2688x1242px at 458ppi */ @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio : 3) { .phone-device.ios .global-quicklinks { position: relative; bottom: 20px; } .phone-device.ios .page-middle-middle .content-wrapper { padding-bottom: 20px; } } /* Ribbon ul */ .global-quicklinks .simple-listView{ width: 100%; display: flex; justify-content: space-between; } /* Ribbon li */ .global-quicklinks .simple-listView li{ padding: 0 !important; padding-bottom: 0; margin: 0; padding: 0; width: 100%; list-style: none; text-align: center; transition: all 0.2s; cursor: pointer; border-bottom: none; } /*Ribbon link */ .global-quicklinks .ribbon-item { display: block; padding: 1rem; line-height: 1.2; font-size: 2.4rem; color: #58595b; text-decoration: none; /* Defaults */ color: #58595b; /* Overide Defaults ^ */ color: ; } /*Iphone 5 spacing */ @media (max-width: 320px) { .global-quicklinks .ribbon-item { padding: 1rem 0; } } /* Ribbon text */ .global-quicklinks .ribbon-item > div.text { line-height: 1.2; font-size: 1.1rem; letter-spacing: .05rem; } /* Fix for long-touch on nav links ios */ .global-quicklinks ul li a { -webkit-user-select: none !important; -webkit-touch-callout: none !important; } /*Active states*/ /*Page Injection must be added to include pagename into body*/ /*Account Summary Tab*/ .Accounts .global-accounts, .AccountActivity .global-accounts, .TransactionInquiry .global-accounts, .eStatements .global-accounts, .Activity .global-accounts, .StopPayments .global-accounts, .StopPaymentHistory .global-accounts, .Default .global-accounts, /*Transfers Tab*/ .MakeTransfer .global-transfers, .MakeMultipleTransfers .global-transfers, .ScheduledTransfers .global-transfers, .History .global-transfers, .Edit .global-transfers, .ExternalAccounts .global-transfers, .UnlinkedAccounts .global-transfers, .EditExternalAccount .global-transfers, .EditUnlinkedAccount .global-transfers, /*Deposit Tab*/ .DepositCheck .global-check-deposit, /* Add History page for Deposits */ .DepositHistory .global-check-deposit, /*Profile Tab*/ .Profile .global-profile, .UserActivity .global-profile, .AcceptedDisclosures .global-profile, /* Combine all "Change" pages in profile into one class */ .ChangeAddressPhoneNumber .global-profile, .ChangeEmail .global-profile, .ChangePassword .global-profile, .ChangeProfile .global-profile, .ChangeUserID .global-profile, .ChangeLanguage .global-profile, /* Add missing profile pages: */ .ManageEmail .global-profile, .AcceptedDisclosures .global-profile, .ManageAlerts .global-profile, .SecureForms .global-profile, .FingerprintAuthentication .global-profile, .Messages .global-profile, .MobileNicknames .global-profile, /* Handle all biometric and messages pages in profile: */ body[class*=Biometric] .global-profile, body[class*=Message] .global-profile, body[class*=Profile] .global-profile, .FastBalances .global-profile, .TextBanking .global-profile, .AuthorizedApps .global-profile, .Register .global-profile, /*More Tab*/ .More .global-more, /*BillPay Tab*/ .Payments .global-billpay, .Enrollment .global-billpay { /* Defaults */ color: #ffffff; background:#0f4b8f; /* Overide Defaults ^ */ color: ; background:; } /* Ribbon Icons ==================================================== */ /*==================================================== /* Ribbon Icons ==================================================== */ /*Icon Setup*/ .global-quicklinks .ribbon-item::before { text-decoration: none !important; font-family: 'banking-icons'; font-weight: normal; display: inline-block; content: '\e90e'; } /*Account Icon*/ .ribbon-item.global-accounts::before{ content:'\e901'; } /*Transfers Icon*/ .ribbon-item.global-transfers::before{ content:'\e904'; } /*Deposit Icon*/ .ribbon-item.global-check-deposit::before{ content:'\e90b'; } /*Profile Icon*/ .ribbon-item.global-profile::before{ content:'\e908'; } /*More Icon*/ .ribbon-item.global-more::before{ content:'\e90d'; } /*Billpay Icon*/ .ribbon-item.global-billpay::before{ content:'\e902' } /* Media Query 1366x1024 ==================================================== */ /************************************************************************************ ************************************************************************************ START smaller than 1138px (test at 1366x1024 screen size - the test size must be slightly smaller than the MAX-WIDTH number) ************************************************************************************ *************************************************************************************/ @media screen and (max-width: 1400px) { /****************************************** CALENDAR ICON POSITION UNDER THE FORM FIELDS ******************************************/ .ForgotPassword #M_layout_content_PCDZ_MBO2IVS_ctl00_validationControl_ctl22::after, .ForgotPassword #M_layout_content_PCDZ_M67QS82_ctl00_validationControl_ctl22::after, .Register #M_layout_content_PCDZ_MBO2IVS_ctl00_validationControl_ctl22::after, .Register #M_layout_content_PCDZ_M67QS82_ctl00_validationControl_ctl22::after { margin-left: -87px; } .ForgotPassword .icon-date::after, .Register .icon-date::after{ margin-left: -62px; } /****************************************** CALENDAR ICON POSITION ON TABLETS ******************************************/ .Register img[src*="Resource.axd"], .ForgotPassword img[src*="Resource.axd"] { margin-right: 34px; } /****************************************** CARD VALET FIXES FOR MOBILE ******************************************/ /* MOVES THE NAME AND CREDIT CARD NUMBER OVER */ span.card-number, span.card-holder-name { margin-left: 23px; } /* SHRINKS BUTTON SIZES */ .Cards button { min-width: 30px; } /* MOVES THE RIGHT NAV ARROW */ .Cards .navigation-right:before { left: 25px; } /* MOVES THE LEFT NAV ARROW */ .Cards .navigation-left:before { left: 30px; } /****************************************** FOOTER RESIZE ******************************************/ .footer-left { margin-right: 0px; } /****************************************** FONT WEIGHTS ******************************************/ .inline-control.text span.account-nickname, .laguna-radio-button-list label .account-nickname, .inline-control.text span.account-nickname, .laguna-checkbox-list label .account-nickname { font-weight: normal; } label, legend, .field_label { font-weight: bold !important; } li.kilimanjaro-heading { text-transform: ; } /****************************************** REMOVES SHADOW FROM BACK BUTTON ARROW ******************************************/ input.button.kilimanjaro-back-button { box-shadow: initial; } /****************************************** FIXS TABLE CELLS ON LAPTOPS FOR "CALENDAR SERVICES" PAGE ******************************************/ .CalendarServices input[type="text"], .CalendarServices select { min-width: 120px; } /****************************************** FIXES MOBILE NICKNAMES ON MOBILE TEXT BANKING PAGE ******************************************/ #M_layout_content_PCDZ_MD5017X_ctl00_ctl00_pnlMobileNicknames > ul > li:nth-child(n+2) > table > tbody > tr > td:nth-child(1) { width: 170px !important; } #M_layout_content_PCDZ_MD5017X_ctl00_ctl00_pnlMobileNicknames > ul > li:nth-child(n+2) > table > tbody > tr > td:nth-child(3) { width: 35% !important; } .phone-device.MobileNicknames td { padding: 0px; } .phone-device.MobileNicknames table { margin: 0px; } #M_layout_content_PCDZ_MD5017X_ctl00_ctl00_pnlMobileNicknames > ul > li:nth-child(n+2) > table > tbody > tr > td:nth-child(2){ display: none; } .phone-device.MobileNicknames input[type="radio"] { position: relative; left: inherit; display: block !important; margin-top: 13px; margin-right: 10px; } /****************************************** REPAIRS DATE FIELD WIDTH ON ACCOUNT ACTIVITY CALENDARS FOR MOBILE ******************************************/ .phone-device.AccountActivity input[type="text"] { min-width: 150px; } /****************************************** REPAIRS FIELD WIDTHS ON MULTIPLE PAGES FOR MOBILE ******************************************/ .phone-device.ATMLocator input[type="text"], .phone-device.Edit input[type="text"], .phone-device.MakeTransfer input[type="text"] { min-width: inherit; } /****************************************** ROUTING NUMBER ON ADD EXTERNAL ACCOUNT PAGE ******************************************/ .EditExternalAccount input#M_layout_content_PCDZ_MJPGL4E_ctl00_webInputForm_grpAch_txtRoutingNumber { min-width: 190px; } /****************************************** ADDS EXTRA PADDING BENEATH BUTTONS SO THE PAGE SCROLLS ALL THE WAY TO THE BOTTOM ******************************************/ .MakeMultipleTransfers .laguna-submit-buttons span, .MakeMultipleTransfers #M_layout_content_PCDZ_MJ58WBP_ctl00_ctl06 > div > radio-button-list-item:last-child > div, .MakeMultipleTransfers #M_layout_content_PCDZ_MJ58WBP_ctl00_ctl08 > ul > checkbox-list-item:last-child, .MakeMultipleTransfers .laguna-submit-buttons submit-button:last-of-type { margin-bottom: 40px; } /****************************************** MOVES "CHECK AMOUNT" FIELD ON DEPOSIT CHECK PAGE ******************************************/ .DepositCheck .dollar::before { top: 0px; left: 15px; } .phone-device.DepositCheck span.dollar { margin-left: -9px; } /****************************************** CONTROLS IF CHECK DEPOSITS ARE VERTICAL OR HORIZONTAL ******************************************/ div[id*="MB2C30Z"][id*="FrontOfCheck"] { width: 48% !important; float: left !important; } div[id*="MB2C30Z"][id*="BackOfCheck"] { width: 48% !important; float: right !important; } /****************************************** RESIZE DATE FIELD ON REGISTER ******************************************/ .Register [id*="M67QS82"][id*="validationControl"] .hasDatepicker, .ForgotPassword [id*="MBO2IVS"][id*="validationControl"] .hasDatepicker { min-width: inherit !important; width: 238px; } /****************************************** WIDEN SPACING ON THE PROFILE LINKS ******************************************/ .phone-device #Module-MQK2M2C div.module-container.mainmodule ul, .phone-device #Module-MQK2M2C div.module-container.mainmodule li, .phone-device #Module-M1BRAHL div.module-container.mainmodule ul, .phone-device #Module-M1BRAHL div.module-container.mainmodule li { margin-bottom: 20px; } /****************************************** WIRE TRANSFERS ******************************************/ .phone-device.android.Multiple .dollar::before { top: 32px; left: 10px; } .phone-device.ios.Multiple .dollar::before { left: 80px; } .phone-device div[id$=webInputForm_LC_FilterLeftZone] { margin-bottom: 15px; } .phone-device div[id$=txtDiscretionaryData_C] { margin-bottom: 20px; } /****************************************** MOVING BUTTON SPACING ******************************************/ .phone-device .submit_buttons>input[type] { margin-top: 1.8rem !important; margin-left: 0px !important; } /****************************************** DATE INPUT SIZING ******************************************/ .phone-device input[type="text"].input_box.input_date { width: 128px; min-width: 128px !important; } .phone-device.Edit input[type="text"].input_box.input_date { width: 131px; min-width: 106px !important; } /****************************************** SPACING FOR ACH ******************************************/ .phone-device td span:first-child { margin: 0px; } /****************************************** REALIGN NICKNAME LABEL ******************************************/ #accountSummaryController_c > div:nth-child(1) > div > div.transactions-area > div.kilimanjaro-detail.kilimanjaro-label-value-list > div:nth-child(2) > span:nth-child(1) { margin-top: 0px !important; } /****************************************** MAKE TRANSFER FIXES FOR LOANS ******************************************/ .phone-device.MakeTransfer .dollar { display: inline-flex; position: relative; top: 5px; left: -15px; } /****************************************** RESETS AMOUNT FIELD ON ORDINARY TRANSFERS ******************************************/ .phone-device.MakeTransfer [id*="MDN8GT0"][id*="txtAmount_C"] > span { left: -3px !important; top: -3px !important; } /****************************************** PAYMENT DUE - ALL ******************************************/ .phone-device.MakeTransfer [id*="MDN8GT0"][id*="txtAmountOption0_C"] > span { position: relative; top: 11px; left: -146px; } /****************************************** PAYMENT DUE - CASH ******************************************/ .phone-device.MakeTransfer span.transfer-amount { position: relative; left: -10px; } /****************************************** PRINCIPAL ONLY PAYMENT - ALL ******************************************/ .phone-device.MakeTransfer [id*="MDN8GT0"][id*="txtAmountOption3_C"] > span { position: relative; top: -11px; left: -12px; } /****************************************** PRINCIPAL ONLY PAYMENT - ALL POSITION ******************************************/ .phone-device.MakeTransfer div[id*="MDN8GT0"][id*="radAmountOption3_C"] { top: 11px; position: relative; } /****************************************** PRINCIPAL ONLY PAYMENT - TEXTBOX ******************************************/ .phone-device.MakeTransfer input[id*="MDN8GT0"][id*="txtAmountOption3"] { position: relative; top: 1px; left: 2px; } /****************************************** PRINCIPAL ONLY PAYMENT - DOLLAR ******************************************/ .phone-device.MakeTransfer [id*="MDN8GT0"][id*="txtAmountOption3_C"] > span:before { left: 20px; } /****************************************** OTHER AMOUNT - ALL ******************************************/ .phone-device.MakeTransfer [id*="MDN8GT0"][id*="txtAmountOption2_C"] > span { position: relative; top: 12px; left: -152px; } /****************************************** OTHER AMOUNT - TEXTBOX ******************************************/ .phone-device.MakeTransfer input[id*="MDN8GT0"][id*="txtAmountOption2"] { position: relative; top: 1px; left: 144px; } /****************************************** FIXES SO WEB CONNECT WORKS ON PHONES ******************************************/ .phone-device.WebConnect .selectmenu-wrapper { min-width: max-content !important; } .phone-device.WebConnect td.FieldLabel { margin-right: -158px; margin-top: -23px; } .phone-device.WebConnect #Table1 > tbody > tr:nth-child(1) > td:nth-child(2) > div > div { max-width: 318px !important; } .phone-device.WebConnect td { padding: 1.5rem 0rem 0rem 0rem; } .phone-device.WebConnect #Table1 > tbody > tr:nth-child(5) > td:nth-child(3):after, .phone-device.WebConnect input[id*="M70CWMM"][id*="quickBooksWebConnectButton"] { left: -111px; position: relative; } /****************************************** FIX SO DATES FIT ON EXTERNAL TRANSFERS ******************************************/ .phone-device.MakeTransfer .calendar-legend span.date-label { width: fit-content; } /****************************************** FIX SO CHOSEN DATES HAVE BACKGROUND COLOR ON EXTERNAL TRANSFERS ******************************************/ .phone-device.MakeTransfer .calendar-legend span.date-text { background-color: #ffffff; } /****************************************** MOVE CHOSEN DATES TO VERTICAL ALIGNMENT ON EXTERNAL TRANSFERS ******************************************/ .phone-device.MakeTransfer .calendar-legend > span { display: flex; width: 45px; } .phone-device.MakeTransfer .calendar-legend span.date-box { margin-left: 12px; } /* ATM Locator button fixes */ .phone-device.ATMLocator .ui-field-contain.ui-body.ui-br.submit_buttons > div { position: relative; } .phone-device.ATMLocator .atmLocatorFloatLeftChevron { left: 10px !important; position: absolute; } .phone-device.ATMLocator input[id$="btnSearchOptions"] { padding-left: 35px; padding-right: 20px; } .phone-device.ATMLocator #searchOptions { margin-bottom: 10px; } } /************************************************************************************ ************************************************************************************ END smaller than 1138px (test at 1366x1024 screen size - the test size must be slightly smaller than the MAX-WIDTH number) ************************************************************************************ *************************************************************************************/ /* Page Fixes ====================================================*/ /*==================================================== /* Page Fixes Imports ==================================================== */ /* Presigin ==================================================== */ /*==================================================== / *==================================================== /* Fixes for Pre Signin Pages ==================================================== */ /* Table of contents ==================================================== - Page Scroll - Background - Prelogin header desktop - Primary navigation - Presign Logo - Presignin Mobile Header - Admin Login Module - Login Module - Pre login Pop Pages - Forgot Password & Register Datepicker - Fast Balances Button */ /* Stops the page scroll when page is too big ==================================================== */ .LoggedOut.pre-signin #content-wrapper, .SignIn.pre-signin #content-wrapper, .AdminHome.pre-signin #content-wrapper { min-height: 50vh !important; } /* Background - overwrite of template.css ==================================================== */ .pre-signin .page-background-image { background: none; /* min-height: auto !important; */ } /* Prelogin header desktop ==================================================== */ .pre-signin .fixed-width-nav { /* Defaults */ background: rgba(13,67,128,255); /* Overide Defaults ^ */ background: #ffffff; } /* Primary navigation ==================================================== */ /*Resets the height in prelogin template.css */ .pre-signin .page-primary-nav { text-align: center; height: auto; justify-content: center; } /*Hides navigation space */ .pre-signin .page-primary-nav .primary-nav { display: none; } /* Presign Logo resets template.css ==================================================== */ .pre-signin .page-primary-nav .logo { margin: 0; display: flex; float: none; } @media (max-width: 992px) { .pre-signin #page-header-container-2 .logo{ flex: inherit; margin: 0 auto; } } @media (max-width: 992px) { .pre-signin #page-header-container-2 .logo .css-imgLogo { background-position: center center; } } /* Presignin Mobile Header ==================================================== */ /* Wrong media to render p202 */ @media (max-width: 1138px) { .pre-signin #page-header-container-2 { display: none; } } /* Recommended media by p202 */ @media (max-width: 992px) { .pre-signin #page-header-container-2 { display: flex; position: relative; } } /* Blank Spacer for Mobile nav since its fixed */ @media (max-width: 1138px){ .pre-signin #position-fixed-header-spacer { display: none; } } @media (max-width: 992px){ .pre-signin #position-fixed-header-spacer { display: none; } } /* Pre login back button */ .pre-signin #page-header-container-2 .laguna-back-nav { display: flex; position: absolute; } /* Admin Login Module ==================================================== */ /* Resets margin top on login module template.css */ @media (max-height: 700px){ .LoginModule { margin-top: 0; transition: none; } } /* Login button Fixes */ .pre-signin .LoginModule > p.submit_buttons { transition: none; margin-top: 0 !important; width: 100%; } .phone-device.pre-signin .LoginModule > p.submit_buttons { margin-left: 0px; width: 100%; } .pre-signin .LoginModule > p.submit_buttons > input[type] { margin: 15px 0 auto !important; } .phone-device.adminhome.pre-signin .LoginModule > p.submit_buttons, .desktop-device.adminhome.pre-signin .LoginModule > p.submit_buttons, .desktop-device.AdminHome.pre-signin .LoginModule > p.submit_buttons { margin-top: 15px !important; } /* Login button Fixes */ .pre-signin .LoginModule > p.submit_buttons > input[type='submit'] { /* margin: auto !important; */ width: 100%; cursor: pointer; box-sizing: border-box; min-height: auto; height: 45px; height: 45px; margin-top: 10px !important; } div[id*=_txtPassword_C] { margin-top: 10px; } @media screen and (max-width: 799px) { .pre-signin [action*="adminhome"] .login-width, .pre-signin [action*="AdminHome"] .login-width { margin-top: 10px; } } @media (max-width: 495px) { .pre-signin [action*="adminhome"] .login-width, .pre-signin [action*="AdminHome"] .login-width { margin-top: 0; } } .pre-signin [action*="adminhome"] .module-single > h2:not(.module_header) .h2-title-container, .pre-signin [action*="AdminHome"] .module-single > h2:not(.module_header) .h2-title-container { padding-bottom: 0; } /* Login Module ==================================================== */ .signin-links { margin-top: 1.8rem; margin-left: -2rem; padding: 2rem; /* background: $lightgrey; */ width: 100%; border-radius: .5rem; box-sizing: content-box; } /* Pre login Pop Pages / (privacy policy disclaimer etc) ==================================================== */ .help_pop_up{ margin-bottom: 1.8rem; /* Defaults */ background:white; border-radius: 0px; border: 0px solid transparent; box-shadow: 0 8px 5px -5px rgba(0,0,0,0.3); /* Overide Defaults ^ */ background: #ffffff; border-radius: ; border-color: ; border-width: 0 0 3px 0; box-shadow: 0 8px 5px -5px ; } .pre-signin .module-single { border: 0; } /* Remove lines under quick links on signin.aspx page */ .pre-signin .simple-listView > li { border-bottom: none; } /* Fix the Fast balances button to be centered */ @media (max-width: 495px) { .phone-device input.fast-balances-button.button { width: 50%; max-width: 50%; height: 44px; border: 1px solid rgba(0,0,0,255); border-radius: 4px; } .phone-device .fast-balances-button-area.show { display: flex; justify-content: center; } } /****************************************** TURN OFF SIGN-IN HEADING ******************************************/ /* Remove the bottom border line on the SignIn page, when "Sign In" heading text is OFF */ .SignIn .module-container.graphs .module-single > div, .SignIn .module-container.mainmodule { border-top: none; } /* Turns OFF "Sign In" heading text of SignIn page */ .SignIn .module-single > h2 .h2-content { display: none; } /* Adds a little padding when "Sign In" heading text is OFF */ .SignIn div.module-container.mainmodule { padding-top: 23px; } /****************************************** TURN ON SIGN-IN HEADING ******************************************/ /* Turns on header for Sign-in .SignIn h2 > div > div.h2-title-container { display: inline-flex !important; }*/ /* Fast Balances Button ==================================================== */ .phone-device .fast-balances-button-area.show { display: flex; justify-content: center; } /* Forgot Password & Register Datepicker ==================================================== */ .phone-device.Register .ui-datepicker-header a.ui-datepicker-next::before, .phone-device.Register .ui-datepicker-header a.ui-datepicker-prev::before, .phone-device.ForgotPassword .ui-datepicker-header a.ui-datepicker-next::before, .phone-device.ForgotPassword .ui-datepicker-header a.ui-datepicker-prev::before { margin-top: 42%; } .tablet-device.ForgotPassword.pre-signin #ui-datepicker-div, .tablet-device.Register.pre-signin #ui-datepicker-div { max-width: 50%; min-width: 50%; } .tablet-device.ForgotPassword.pre-signin .ui-datepicker select, .tablet-device.Register.pre-signin .ui-datepicker select { max-width: 40%; min-width: 40%; margin-left: 10px !important; } /* Download app area */ .pre-signin .download-app { background: rgba(255,255,255, .7); color: black; font-weight: 700; padding: 10px; border-radius: 5px; } .SignIn .portal-view { background: #f6f6f6; background-size: cover; } /* Use same background for phone device signin page */ /* was .phone-device.pre-signin #content-wrapper */ .phone-device.SignIn .page-middle-container { background: #f6f6f6; background-size: cover; } /****************************************** MAKES LOGIN BUTTON FULL WIDTH ******************************************/ .pre-signin .submit_buttons { display: inline-flex; } /****************************************** SIGN IN FAQ HEADER ******************************************/ .FAQs .nav_top.breadcrumb_container { background: #ffffff; position: relative; top: -20px; left: -20px; width: 94vw; height: ; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom: 1px solid #0f4b8f; } /****************************************** SIGN IN FAQ HEADER TEXT ******************************************/ .FAQs [id*="MO1D65T"] > div > div > div > h1 { padding-left: 20px; padding-top: .25rem; text-transform: uppercase; font-size: 2rem; font-weight: ; color: #000000; } /****************************************** DISCLAIMER HEADER ******************************************/ #main-sortable > div > h1 { padding-left: 20px; padding-top: .25rem; text-transform: uppercase; font-size: 2rem; font-weight: ; color: #000000; background: #ffffff; position: relative; top: -20px; left: -20px; width: 100vw; height: ; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom: 1px solid #0f4b8f; } /****************************************** DISCLAIMER POPUP HEADER WIDTHS ******************************************/ @media only screen and (min-width: 1139px) { .Disclaimer.pre-signin #main-sortable > div > h1 { width: 102.3% !important; } } @media only screen and (min-width:961px) and (max-width:1138px) { .Disclaimer.pre-signin#main-sortable > div > h1 { width: 104.5% !important; } } /****************************************** FAQ POPUP HEADER WIDTHS ******************************************/ @media only screen and (min-width: 1139px) { .FAQs.pre-signin .nav_top.breadcrumb_container { width: 104.5% !important; } } @media only screen and (min-width:1000px) and (max-width:1138px) { .FAQs.pre-signin .nav_top.breadcrumb_container { width: 104.5% !important; } } @media only screen and (max-width: 999px) { .FAQs.pre-signin .nav_top.breadcrumb_container { width: 118% !important; } } /* Align links below Sign In module */ .SignIn ul.simple-listView li { padding-left: 0; } /* Account Activity ==================================================== */ /*==================================================== /* Fixes for AccountActivity.aspx ==================================================== */ /* Table of contents ==================================================== - Account Activity Check Image - Account Activity Account Name - Download Spreedsheet - Extra Spacing Issues - Change Account Nickname Modal - Key Epenses Account Summary Page - Please move to Account Summary File - Mobile Disclosure Page Fix - Non Paragraphs - Please Move to appropriate File - Button Fixes - Please Move to ACH File - Form Fixes - Please Move to ACH File - FinancesOverview.aspx - Please Move to Spending File - Accounts/TransactionInquiry - Wires/PayeeDetails - Please create a Wires css File - Stop Payment - This should be moved to _stop-payment.css - Account Activity Nickname - Table Layout - Extra Spacing for Search To Range Fields - Move right column into main column for narrow screens */ /* Account Activity Check Image ==================================================== */ a.check_image_link::after { text-decoration: none !important; font-family: 'fontawesome'; font-weight: normal; display: inline-block; margin-left: .5rem; content: '\ea75'; } /*Hides old check image*/ a.check_image_link img { display: none; } /* Account Activity Account Name ==================================================== */ h4.selected-account { padding: 1rem 2.5rem; width: 100vw; position: relative; left: -1.25em; margin-top: -1rem; margin-bottom: 1.8rem; padding-left: 3.5% !important; /* Defaults */ font-size: 1.8rem; font-weight: 600; background-color: rgba(0, 0, 0, 0.15) !important; color: #000000 !important; /* Overide Defaults ^ */ font-size: 1.6rem; font-weight: ; color: white !important; background-color: #0F4B8F !important; } li.kilimanjaro-heading.h2 > label { font-weight: !important; } /*Fix spacing under account name in pending transactions*/ #Module-MGN2WU4 h4.selected-account+div.forms { display: none; } /* Download Spreedsheet ==================================================== */ /* Fist remove: ~/hlm/IDS.Banking.Retail.Web/GridBullet.gif from module settings */ span.download_prompt { margin-right: 0 !important; } .download_options .download_link { padding: 0; } /*Hides download link on mobile*/ @media only screen and (max-width: 601px) { table.download_options { display: none; } } /*Align table amounts body injectro needed */ /* ALIGNS THINGS ON THE "PENDING TRANSACTIONS" TABLE ON THE ACCOUNT ACTIVITY PAGE */ .AccountActivity table[id*="transactionsGrid"] td:nth-child(n+4):nth-last-child(n+2), .AccountActivity table[id*="transactionsGrid"] th:nth-child(n+4):nth-last-child(n+2) { text-align: right; } /* ALIGNS THINGS ON THE "ACCOUNT ACTIVITY" TABLE ON THE ACCOUNT ACTIVITY PAGE */ .AccountActivity table[id*="M2SN6LC"][id*="transactionsGrid"] td:nth-child(n+3):nth-last-child(n+2), .AccountActivity table[id*="M2SN6LC"][id*="transactionsGrid"] th:nth-child(n+3):nth-last-child(n+2) { text-align: right; } .AccountActivity table[id*="transactionsGrid"] td:last-child { text-align: center; } /*Search radios to column on mobile */ @media (max-width: 600px){ .AccountActivity div.p .left_aligned_checkbox { flex-direction: column; } } /* Icon for show more link */ .toggle-link::before { text-decoration: none !important; font-family: 'fontawesome'; font-weight: normal; display: inline-block; transition: all 0.5s; content: '\e9ef'; margin-right: .5rem; /* default */ color: #0f4b8f; /* override */ color: #0f4b8f; } /*Icon for hide links */ .toggle-close::before { content: '\e9cb'; } /* Extra Spacing Issues ==================================================== */ /*Amount Search had double Margins from parent */ @media (max-width: 1138px) { div[id*="AmountSearchSection"] .input-field { margin-bottom: 0 !important; } } /* Key Epenses Account Summary Page ==================================================== */ .key_expenses_setup_budget_section { padding: 0; text-align: center; margin-bottom: 1.8rem; } /* Mobile Disclosure Page Fix ==================================================== */ /* Disclosure Buttons on mobile */ @media (max-width: 400px) { .submit_buttons > input[id*="btnAgree"], .submit_buttons > input[id*="btnDisagree"] { flex:1 1 100%; white-space: normal; padding: 1rem; } } input[id*="chkAcceptAgreement"]+label { margin-right: 0 !important; } /* Non Paragraphs ==================================================== */ /* Change password*/ div[id*=Instructions] { margin-bottom: 1.8rem; } /* BatchTemplates.aspx*/ div[id*='SameDayUnavailable'] { margin-bottom: 1.8rem; } /* Button Fixes ==================================================== */ /* Button didnt have margin CustomizeParticipantImport.aspx*/ input[id*="btnCreateTemplate"]{ margin-bottom: 1.8rem !important; } /* Upload in submit contain had no margin /BatchTemplateDetails.aspx*/ .submit_buttons label.label-uploads { margin-top: 1.8rem; } .submit_buttons>input[type] { margin-top: 1.8rem; } /* Upload in submit contain had no margin PassThru.aspx */ input[id*="btnUpload"] { margin-top: 0 !important; margin-bottom: 1.8rem !important; } /* Form Fixes ==================================================== */ /* Spacing issue with radios ParticipantDetails.asp */ span[id*="ParticipantType"] { margin-bottom: 0 !important; } span[id*="ParticipantType"] label { width: 100%!important; margin-bottom: 0 !important; } .checkbox [id*="ChangeAccount"]+label { width: 100% !important; } /* FinancesOverview.aspx ==================================================== */ .pfm_income_statement_view_options_label { display: inline-flex; float: none; align-items: center; } /*table amount alignment*/ .FinancesOverview table td:not(:first-child), .FinancesOverview table th:not(:first-child) { text-align:right; } #M_layout_content_PCDZ_MJ2H9GH_ctl00_pnlDateSelector > table td:not(:first-child) { text-align: initial; } /*table amount alignment for column chart */ .FinancesOverview table td.pfm_chart_legend_item_desc_column { text-align:left; } .FinancesOverview table td span:first-child { margin: 0; } /*text nest to the add external button */ span[id*="ExternalAccountsPrompt"] { align-items: center; display: flex; padding: 0; height: 45px; margin-right: 1rem; width:100%; text-align: left; } @media (max-width: 768px) { span[id*="ExternalAccountsPrompt"] { margin-bottom: 1.8rem; } } /* Control positive/neg amount colors */ .pfm_positive_amount { color: #000000; } .pfm_negative_amount { color: #000000; } /* Remove Spacing between tables */ td.pfm_statement_section_padding { display: none; } /* Removes margins that cause spacing issues */ div.pfm_module_large { margin: 0; } /* Accounts/TransactionInquiry.aspx ==================================================== */ .message_editor_container div label { text-align: left; line-height: 1.5; margin: 0 !important; width: 100%; float: none; font-weight: bold; } span.message_readonly_text { line-height: 1.5; } div.message_with_text { clear: left; padding-top: 0; margin-bottom: 1.2rem !important; } div.message_with_text .input-field { margin-bottom: 0 !important; } .TransactionInquiry div[id*="RequestEmailNotification"] { margin-bottom: 1.8rem; margin-top: -40px; /* there is a blank div and space above this that adds way to much space*/ } .TransactionInquiry label[id*=lblCategory]:before, .TransactionInquiry label[id*=lblStatus]:before, .TransactionInquiry label[id*=lblAccountSelection]:before { content: " "; } /*Validation alerts should be red*/ span[id*="fvSubject"], span[id*="rfvBody"] { color: red; } /* Wires/PayeeDetails.aspx ==================================================== */ /*checkbox spacing issue double margin*/ span[id*="Address_Format"] { margin-bottom: 0 !important; } /* Account Activity page UXTEAM-109 */ h4.selected-account { font-size: ; } /* This should be moved to _stop-payment.css*/ /* Stop Payment ==================================================== */ .phone-device.StopPayments .submit_buttons > input[type], .StopPayments fieldset.form_group { margin: 0 0 1.8rem 0 !important; } .StopPayments fieldset.form_group .p.input-field { margin: 0 0 0 0 !important; } /* UXPIPE-44 - Footnotes should have padding all the way around */ .desktop-device .footnotes, .tablet-device div.footnotes { background: whitesmoke; padding: 20px; border-radius: 0px; margin-bottom: 20px; } .phone-device .footnotes { background: white; padding: 15px; } .desktop-device span.x-red { margin-left: 10px; } /* Account Activity Nickname Change modal UXPIPE 216 */ .AccountActivity .ui-dialog .ui-dialog-titlebar-close::before { text-decoration: none !important; font-family: 'fontawesome'; font-weight: normal; display: inline-block; content: '\e9fc'; font-size: 16px; /*margin-right: -10px;*/ padding: .25rem; } /*.AccountActivity .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front */ .AccountActivity [aria-describedby$="NickNameHolder"] { width: 375px !important; max-width: 375px !important; padding: 0; } .AccountActivity .modal-account-nickname-header { background: transparent; Color: #000000; font-size: 2rem; text-align: unset; border-bottom: 1px solid #0f4b8f; font-weight: 600; padding: 20px; } .desktop-device.AccountActivity .modal-account-nickname-header + div { padding: 0 20px; } .desktop-device.AccountActivity input[id$="AccountNickName"] { min-width: 330px; } .AccountActivity label[for*=AccountNickName] { margin-left: 0 !important; margin-bottom: 8px; margin-top: 12px; } .AccountActivity .ui-dialog .submit_buttons{ margin-top: 10px; justify-content: center; } .CheckImageViewer .page-footer.page-row, .desktop-device.CheckImageViewer p.submit_buttons.injected, .tablet-device.CheckImageViewer p.submit_buttons.injected { display: none; } .desktop-device div#Module-MKLLCE4 .module-container.mainmodule { border-top: 1px solid #0f4b8f; } /****************************************** TABLE LAYOUT ******************************************/ .AccountActivity td, .AccountActivity th, .AccountActivity .table_data td { padding: 10px 10px; } .AccountActivity table.table_data .table_header > th, .module-single table th { padding: 10px !important; } /* The above code will break the calendars and this restores their layout */ .AccountActivity .ui-datepicker-calendar td, .AccountActivity .ui-datepicker-calendar th { padding: 0px; } /****************************************** EXTRA SPACING FOR THE SEARCH "TO" RANGE FIELDS ******************************************/ .AccountActivity div[id*="AmountSearchSection"] label[for*="_endAmount"] { margin-top: 20px; margin-bottom: 8px; } /* Sets caret color on Account Activity page if links are active */ .mobile-device.AccountActivity .simple-listView li > a:first-child .item_details:after { /* Defaults */ border-left: 3px solid #0f4b8f; border-top: 3px solid #0f4b8f; /* Override */ border-left: 3px solid ; border-top: 3px solid ; top: 40%; } /* Prevent long descriptions from breaking tables in Pending Transactions */ .desktop-device.AccountActivity #Module-MGN2WU4 .table_data td:nth-child(3) { word-break: break-word; } /* Move right column into main column for narrow screens */ @media (max-width: 1137px) { .AccountActivity .left-col.left { display: block; margin: 0 auto; width: 100%; } } /* Account Summary ==================================================== */ /*==================================================== /* Fixes for AccountActivity.aspx ==================================================== */ /* Table of contents ==================================================== - Manage Accounts - */ /* Manage Accounts ==================================================== */ div[id*='ManageAccountsZone'] { margin-bottom: 20px; } h3[id*='hdgManageAccounts'] { margin-bottom: 0; } /* Fixes the missing scrollbar in IE*/ .main-content-explorer{ -ms-overflow-style: auto; } /* Quick Transfers form validation ==================================================== */ label[id*="SourceAccount"] + span, label[id*="DestinationAccount"] + span, div[id*="_txtAmount_C"] span.dollar{ display: inline-flex; align-items: center; } /* Removes margin on button so it flushed with the end of forms*/ input[id*="btnSubmit"]btnSubmit { margin-right: 0 !important; } /****************************************** ADDS THE "TOTALS" TEXT TO LAST ROW ******************************************/ .Default [id*="MXWGDOM"][id*="Accounts"] > tbody > tr:last-child > td:nth-child(3):before, .Default [id*="M6O62V1"][id*="Accounts"] > tbody > tr:last-child > td:nth-child(3):before, .Default [id*="M702WF4"][id*="Accounts"] > tbody > tr:last-child > td:nth-child(3):before, .AccountsSummary [id*="MXWGDOM"][id*="Accounts"] > tbody > tr:last-child > td:nth-child(3):before, .AccountsSummary [id*="M6O62V1"][id*="Accounts"] > tbody > tr:last-child > td:nth-child(3):before, .AccountsSummary [id*="M702WF4"][id*="Accounts"] > tbody > tr:last-child > td:nth-child(3):before { content: "Totals: "; font-weight: bold; color: #000000; } /****************************************** CONTROLS FONT WEIGHT OF THE "TOTALS" NUMERICAL VALUE IN LAST ROW ******************************************/ .AccountsSummary [id*="MXWGDOM"][id*="Accounts"] > tbody > tr:last-child > td:nth-child(4), .AccountsSummary [id*="M702WF4"][id*="Accounts"] > tbody > tr:last-child > td:nth-child(4), .AccountsSummary [id*="M6O62V1"][id*="Accounts"] > tbody > tr:last-child > td:nth-child(4), .AccountsSummary [id*="MXWGDOM"][id*="Accounts"] > tbody > tr:last-child > td:nth-child(5), .AccountsSummary [id*="M702WF4"][id*="Accounts"] > tbody > tr:last-child > td:nth-child(5), .AccountsSummary [id*="M6O62V1"][id*="Accounts"] > tbody > tr:last-child > td:nth-child(5) { font-weight: bold; color: #000000; } /****************************************** CONTROLS BACKGROUND COLOR IN LAST ROW ******************************************/ .AccountsSummary [id*="MXWGDOM"][id*="Accounts"] > tbody > tr:last-child, .AccountsSummary [id*="M6O62V1"][id*="Accounts"] > tbody > tr:last-child, .AccountsSummary [id*="M702WF4"][id*="Accounts"] > tbody > tr:last-child { background: transparent; background: transparent; } /****************************************** PADDING ON LINKS OF REPORT TABLE ******************************************/ .desktop-device.ActivitySummaryReport table th.th-link { padding: 1.5rem 0 !important; } /****************************************** ADDS MARGIN TO DATE ERROR MESSAGE ******************************************/ span[id*="calToDate_V"], span[id*="calFromDate_V"] { margin-left: 8px; font-weight: bold; color: #ffffff; } /* ACH Batch Templates ==================================================== */ /* BatchTemplateDetails.aspx? ==================================================== */ div[id*="BatchEntryAmount"] { display:inline-flex; justify-content:flex-end; right:0; width:100%; } div[id*="BatchEntryAmount"] span.has_callout { display: inline-flex; align-items: flex-start; } div[id*="BatchEntryAmount"] span.callout_indicator::before, div[id*="BatchEntryAmount"] div.callout_indicator::before{ padding:0; } div[id*="BatchEntryAmount"] .field_value { display: inline-block; line-height: 1.5; margin-bottom: 0; font-size: 1.5rem; } /* Batch Template Modal ==================================================== */ .BatchTemplates div[id*="BatchEntryAmount"] { justify-content: flex-start; } .BatchTemplates .ui-dialog .ui-dialog-content, .BatchTemplates div#Module-MUW4BR3 { overflow: hidden; } .BatchTemplates #M_layout_content_PCDZ_MUW4BR3_ctl00_ctl01_PortalHyperlink1 { display: none; } .BatchTemplates .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.dialog-absolute { top: 14px !important; } .BatchTemplates #Module-MUW4BR3 > h2 { margin-top: 17px; } div#Module-MRSSJK0 table[id*=_grdParticipants] span.checkbox { margin-left: 25px !important; } div#Module-MRSSJK0 h2, div#Module-MSQ6485 h2 { padding-left: 15px; margin-top: 15px !important; } div#Module-MSQ6485 .submit_buttons input[type=submit][value=Save] { color: #ffffff !important; background: #0f4b8f !important; border-color: transparent; /* Overide Defaults ^ */ color: #ffffff !important; background: #0F4B8F; border-color: ; } div#Module-MSQ6485 .submit_buttons input[type=submit][value=Save]:hover { color: #ffffff !important; background: rgba(87,129,176,255); border-color: transparent; /* Overide Defaults ^ */ color: #ffffff !important; background: #002E62 !important; border-color: ; } .BatchTemplateDetails .ui-dialog .ui-dialog-titlebar-close { top: 0px !important; right: 10px; } .BatchTemplateDetails.desktop-device [id*="MVOMBWF"] input.input_money { background: none; margin-left: 0px !important; } /****************************************** MOVES DOLLAR SIGN ON TAX TABLE ******************************************/ .BatchTemplateDetails.desktop-device [id*="MVOMBWF"] .dollar::before { top: 23px; left: 11px; position: absolute; } /****************************************** SPACING FOR HEADER ON "PARTICIPANTS" POPUP MODAL ******************************************/ .OneTimePayment .default-dialog h2:first-child { padding-top: 14px; padding-left: 14px; } /****************************************** ACH HEADER FIXES ******************************************/ .PassThru #Module-MGRMY4A > h1, .ImportBatches #Module-MHZOTG6 > h1, .ImportParticipants #Module-MXSIX64 > h1, .CustomizeParticipantImport #Module-MEA89PX > h1, .BatchActivity #Module-MD19JA5 > h1 { padding: 16px; padding-left: 25px; } .PassThru h2, .ImportBatches h2, .ImportParticipants h2, .CustomizeParticipantImport h2, .BatchActivity h2 { margin-bottom: 0px; border-top: 1px solid #0f4b8f; border-radius: 0; } /****************************************** ADDS HORIZONTAL SCROLL IF THERE IS A SIDE BANNER ******************************************/ .BatchTemplateDetails div.module-container.mainmodule, .Participants div.module-container.mainmodule { overflow-x: auto; } /****************************************** FIXES DATE FIELD ON BATCH TEMPLATES ******************************************/ @media (min-width: 736px) { .BatchTemplates .date-column .smaller-date.narrow-screen input[type="text"].input_box.input_date { width: 105px; } } /* ACH Tables*/ td.wide-screen-only.column-padding.ach-checkbox-column-hold, td.wide-screen-only.column-padding.ach-checkbox-column-prenote { text-align: right; } th.wide-screen-only.column-padding.ach-checkbox-column-hold, th.wide-screen-only.column-padding.ach-checkbox-column-prenote { text-align: center; position: relative; } /* Fix header on Batch Templates page */ .BatchTemplates #Module-MUW4BR3 .header_inner { margin-left: 15px; } /* CS04192393 - ACH batch view misaligned for SBSU */ .BatchTemplateDetails [id*="M5ZYOUL"][id*="grpBatchEntries_grdBatchEntries"] > tbody > tr:nth-child(n+1) > td.wide-screen-only.column-padding.ach-checkbox-column-prenote > span, .BatchTemplateDetails [id*="M5ZYOUL"][id*="grpBatchEntries_grdBatchEntries"] > tbody > tr:nth-child(n+1) > td.wide-screen-only.column-padding.ach-checkbox-column-hold > span, [id*="M5ZYOUL"][id*="chkIsRestrictedBatchTemplate"] > span:nth-child(n+1) > span { margin-left: 0; } /****************************************** FIXES "BATCH ENTRIES" TABLE ALIGNMENTS ON TEMPLATE DETAILS PAGE ******************************************/ .BatchTemplates th.wide-screen-only.column-padding.ach-checkbox-column-hold, .BatchTemplates th.wide-screen-only.column-padding.ach-checkbox-column-prenote, .BatchTemplateDetails th.wide-screen-only.column-padding.ach-checkbox-column-hold, .BatchTemplateDetails th.wide-screen-only.column-padding.ach-checkbox-column-prenote { left: 0px; } .BatchTemplates input[type=checkbox]+label, .BatchTemplateDetails input[type=checkbox]+label { margin-right: 0px; } .BatchTemplateDetails [id*="M5ZYOUL"] .dollar::before { left: 22px; } .BatchTemplates [id*="MUW4BR3"] .dollar::before { left: 27px; } /* Adds padding to Recurring Batch Schedule modal */ .BatchTemplates div[id$="dlgSchedule"] > div:not(.header) { padding: 0 20px 0; } /* Aligns data to the left on Batch Template Details on mobile */ .BatchTemplateDetails.phone-device .inline .field_label { margin: 10px 0 10px 0px; display: block; } .BatchTemplateDetails.phone-device div[id*="BatchEntryAmount"] { display: block; } .BatchTemplateDetails.phone-device .field_label.inline.merged { margin-left: 0; } /* Remove Excess Margins */ .BatchTemplateDetails td span:first-child { margin: 0px; } /****************************************** FIXES "BATCH DETAILS" MODAL ON BATCH ACTIVITY PAGE ******************************************/ .BatchActivity [id*="MGYRVVJ"] h2.module_header { margin-top: 19px; border-top: none; padding-left: 23px; } /****************************************** ALIGNS EMAIL CHECKBOX ON "PARTICIPANT DETAILS" MODAL ******************************************/ .BatchTemplateDetails [id*="MSQ6485"] span.checkbox { margin-left: 0px; padding-bottom: 15px; } /****************************************** ALIGNS DOLLAR SIGN ON "ONE-TIME PAYMENT" PAGE FOR MOBILE ******************************************/ .phone-device.OneTimePayment [id*="MBF6NV7"] .dollar::before { top: 111px; left: 15px; } /****************************************** ALIGNS DOLLAR SIGN ON "ONE-TIME PAYMENT" PAGE FOR "BATCH ENTRIES" DESKTOP ******************************************/ .OneTimePayment [id*="M5LH5IS"] .dollar::before { top: 46px; left: 7px; } .phone-device.OneTimePayment [id*="M5LH5IS"] .dollar::before { top: 92px; left: 9px; } /****************************************** ALIGNS DOLLAR SIGN ON "BATCH TEMPLATE DETAILS" PAGE FOR MOBILE ******************************************/ .phone-device.BatchTemplateDetails [id*="M5ZYOUL"] .dollar::before { top: 46px; left: 15px; } /****************************************** EXTRA SPACE ABOVE BUTTONS ON "ADDENDA" MODAL OF "BATCH TEMPLATE DETAILS" PAGE FOR MOBILE ******************************************/ .phone-device.BatchTemplateDetails [id*="M5ZYOUL"] div.module-container.mainmodule p.submit_buttons { margin-top: 10px; } /****************************************** FIXES CHECKBOXES ON "BATCH TEMPLATE DETAILS" PAGE ******************************************/ .BatchTemplateDetails [id*="M5ZYOUL"] span.checkbox { margin-left: 0px; } /****************************************** FIXES GHOSTED DROPDOWN ON "BATCH TEMPLATE DETAILS" PAGE ******************************************/ .BatchTemplateDetails .ui-state-disabled { opacity: 1.0; color: #000000 !important; } select[id*="M5ZYOUL"][id*="lstTransactionType"] { background-color: #DADADA !important; } /****************************************** FIXES SPACING ON MOBILE FOR ACH TEMPLATE IMPORTS ******************************************/ .phone-device [id*="MEA89PX"] div.p .left_aligned_checkbox td { padding: 0rem; } /****************************************** FIXES CHECKBOX SPACING ON MOBILE FOR ACH TEMPLATE IMPORTS ******************************************/ .phone-device [id*="chkAddNewParticipantIfNotExists"] > span:nth-child(2) > span.checkbox.input-field > label { margin-left: 7px; } /****************************************** ALIGNS TOTALS ON "BATCH ENTRIES" OF "BATCH TEMPLATE DETAILS" FOR PHONES ******************************************/ body:not(.pre-signin).phone-device.BatchTemplateDetails .field_label + span:first-of-type { display: block; } /* Fixes dollar sign on One Time Payment for narrow screens */ @media only screen and (max-width: 735px) { .OneTimePayment .dollar::before { top: 92px; } } /* Fix for ACH - Templates date cut off */ @media (min-width: 736px){ .BatchTemplates .input_box.input_date.hasDatepicker { width: 119px !important; } } /****************************************** PHONE DEVICE FIXES ******************************************/ /* For phone devices we need this checkbox over to the left to line up the UI */ .phone-device.BatchTemplateDetails span.checkbox { margin-left: 10px; } /* Fix for Notes Link to be together on same line */ .phone-device.BatchTemplateDetails span.checkbox.narrow-screen-only.ach-checkbox-column-prenote.input-field + a { margin-left: 200px; white-space: nowrap; } /*TCBPS-464 Align the dollar sign */ .phone-device.BatchTemplateDetails .column-padding.dollar.td-link.dollar::before { top: 42px !important; } /* TCBPS-416 FIX FOR CHECKBOX ALIGNMENT ON MOBILE ACH TEMPLATES */ .phone-device label[for*=MPVNP4V][for$=chkSelectAll] { position: relative; left: -12px; } .phone-device.BatchTemplates [id*=grdBatches] tr.table_header th:nth-child(1) label { position: relative; left: -10px } /* TCBPS-411 ACH Fixes for tablets */ .tablet-device.Participants td.wide-screen-only { padding-left: 1.50rem !important; padding-right: 0 !important; } .tablet-device.Parcipants table.table_data .table_header>th.th-link>a { white-space: normal; } /* Fix for One Time Payment add participants table on phones */ .phone-device.OneTimePayment table.table_data .table_header > th:first-child, .phone-device.OneTimePayment table.table_data .table_header > th:nth-child(2), .phone-device.OneTimePayment table.table_data .table_header > th:nth-child(6), .phone-device.OneTimePayment table.table_data tr td:first-child, .phone-device.OneTimePayment table.table_data tr td:nth-child(2), .phone-device.OneTimePayment table.table_data tr td:nth-child(6) { display: table-cell !important; } .phone-device.OneTimePayment table.table_data tr td.wide-screen-only { display: none !important; } .phone-device.OneTimePayment [id*="MBF6NV7"] .dollar::before { top: 40px; } /* MONTBTPS-232 aligns Active Total, Hold Total and Prenotes – Pending validation*/ .phone-device.BatchTemplateDetails .p.inline.input-field span { display: inline-flex; align-items: baseline; padding-left: 3px; align-content: center; max-width: 120px; } /* SBOSUPS-200 - Align Cancel/Initiate buttons on Batch Templates page */ .BatchTemplates .ui-dialog.no-close .submit_buttons[id*="MPZPZR5"][id$="webInputForm_LC_SubmitButtons"] { padding: 0rem 2rem !important; } .phone-device.OneTimePayment table.table_data tr td:nth-child(6) > div { white-space: nowrap; max-width: 120px; text-overflow: ellipsis; overflow: hidden; } /* TBCUPS-385 - UI issues on Mobile app */ .phone-device.OneTimePayment table.table_data tr td:nth-child(6) > div > span { white-space: normal; display: block; } /* align dollar sign for state tax payments */ .BatchTemplateDetails div[id*="StateTax"] .dollar:before { top: 22px; left: 10px; } @media (max-width: 1138px) { .BatchTemplateDetails.desktop-device div[id*="StateTax"] .dollar:before { top: 0; left: 10px; } } /* fix for Participant Details table offset cells */ .ParticipantDetails td.wide-screen-only.hide { display: none; } /* Fixes for One Time Payment on phones */ @media (max-width: 1138px) { .phone-device.OneTimePayment .align-bottom-left { margin-left: 0em; } } .phone-device.OneTimePayment div[id$="dlgAddenda"] .module-container.mainmodule { border-top-color: transparent; } .phone-device.OneTimePayment div[id$="grdBatchEntries"] .dollar::before { top: 43px; } /* Fixes for Batch Template Details on phones */ .phone-device.BatchTemplateDetails [id*="M5ZYOUL"] table[id*="CspBatchEntries"] td.dollar::before { display: none; } .phone-device.BatchTemplateDetails [id*="M5ZYOUL"] table[id*="CspBatchEntries"] .dollar::before { top: 20px; } .phone-device.BatchTemplateDetails .inline-table-list.mobile > div > span { margin-right: 10px; } .phone-device.BatchTemplateDetails .p.inline.input-field span.callout_indicator { display: none; } /****************************************** FIXES FOR ACH PARTICIPANTS DOLLARS ******************************************/ .ParticipantDetails input[id*="M48BL1L"][id*="txtAmount"] { left: -8px; position: relative; } .ParticipantDetails [id*="M48BL1L"][id*="txtAmount_C"] > span.has_callout.dollar:before { left: 10px; } /****************************************** FIXES FOR ACH PARTICIPANTS SORT ARROWS ******************************************/ .phone-device.ParticipantDetails input[id*="MSY5JL2"][id*="MobileUp"] { position: relative; left: -8px; top: -45px; } .phone-device.ParticipantDetails input[id*="MSY5JL2"][id*="MobileDown"] { position: relative; top: -45px; } /* Admin Pages ==================================================== */ /*==================================================== /* Fixes for Admin Pages ==================================================== */ /* Table of contents ==================================================== - Edit Mode - Skin Editor - User Admin - Message Center Overrides - Skin Editor overrides - Promotions Criteria Dropdown override - ACH Fixes for narrow devices - Content Manager - SPACING ON RETAIL ACH - CHECKBOX ALIGNMENT ON DOMAIN REGISTRATION PAGE - ALIGN ADDRESS FIELD ON LOCATION PAGE - Callout help icons on Report Type Configuration page - Linked Profile module on Business Manager page - right-aligned Language setting to the left side of Disclosure Detail screen - Spacing is less between 'First Name' and 'Last Name' fields - Site Change History - scrollbar for tables that are too wide */ /* Edit Mode (mobile package) ==================================================== */ /* INJECTED by using the "Empty For Edit Mode" module template defined in Fiserv.PS.Internal.ModuleTemplates */ .edit-mode-module-title { padding-left: 20px; font-weight: bold; } form.EditMode .RadDockingZone { table-layout: fixed !important; width: 100% !important; } form.EditMode table { table-layout: fixed !important; width: 100% !important; } .EditMode .RadDockableObjectTitle, .EditMode .RadDockableObjectTitleBarLeft, .EditMode .RadDockableObjectTitleBarRight { white-space: initial !important; word-wrap: break-word; background-size: cover; } .EditMode .RadDockableObjectCommandButton { padding-right: .5em; vertical-align: middle; width: 20px; background-size: cover; } .EditMode .portal-view { max-width: none; } .EditMode .RadDockableObjectTitle { /*width: initial;*/ vertical-align: middle; padding-right: 30px; } .EditMode .fast-balances-drawer { display: none; } /* Skin Editor ==================================================== */ .skin-edit-column input[type="email"], .skin-edit-columm input[type="number"], .skin-edit-column input[type="search"], .skin-edit-column input[type="text"], .skin-edit-column input[type="tel"], .skin-edit-column input[type="url"], .skin-edit-column input[type="password"], .skin-edit-column textarea, .skin-edit-colum select{ min-width: 0% !important; max-width: 100% !important; } /*Fixes skin editor spacing*/ .skin-edit-column.right .field_label + span:first-of-type{ display:inherit; } /* User Admin ==================================================== */ @media only screen and (max-width: 568px) { /* hide in mobile */ [id*=M5QH8YG][id*=resultsGrid] tr th:nth-child(2), [id*=M5QH8YG][id*=resultsGrid] tr th:nth-child(3), [id*=M5QH8YG][id*=resultsGrid] tr th:nth-child(4), [id*=M5QH8YG][id*=resultsGrid] tr td:nth-child(2), [id*=M5QH8YG][id*=resultsGrid] tr td:nth-child(3), [id*=M5QH8YG][id*=resultsGrid] tr td:nth-child(4) { display: none; } } @media only screen and (max-width: 358px) { [id*=M5QH8YG][id*=resultsGrid] tr td:nth-child(1), [id*=M5QH8YG][id*=panelInstitutionUserID] { display: none; } } /* Moved from pre-signin.css to here */ /* For Modern Browsers (not IE 11) */ @supports (display: grid) { div[id="Module-M5QH8YG"] input[type=checkbox]+label { background-position: -35px -80px; } div[id="Module-M5QH8YG"] input[type=checkbox]:checked+label { background-position: -35px -205px; } } div[id="Module-M5QH8YG"] input[type=radio]:checked+label { padding-bottom: 0; } div[id="Module-M5QH8YG"]input[type=radio]:checked+label:before { background: #757575; } div[id="Module-M5QH8YG"] input[type=radio]+label { line-height: normal; font-size: 16px; padding: 0; padding-right: 10px; display: flex; align-items: center; margin: 2px 0px; } div[id="Module-M5QH8YG"] input[type=radio]+label:before { display: inline-block; } div[id="Module-M5QH8YG"] div.p .left_aligned_checkbox { display: flex; flex-wrap: wrap; } div[id="Module-M5QH8YG"] .module-container.mainmodule b { font-size: 18px; } p[id*=M5QH8YG][id*=submitButtons]+b { clear: both; display: block; padding-top: 20px; } /* Message Center Overrides */ input[name$="$btnChangeQueue"], input[name$=btnAssign] { margin-left: 30px !important; } [data-moduletitle="Message Detail"] div.message_thread_container { width: auto; } [data-moduletitle="Message Detail"] div.message_right_side_div { width: auto; min-width: 645px; float: none; } [data-moduletitle="Message Detail"] .message_csr_panel_curve { margin: 0; border-top: 1px solid #c5c5c5; } [data-moduletitle="Message Detail"] .message_csr_panel_curve div { display: none; } [data-moduletitle="Message Detail"] div.message_csr_panel_content { background: transparent; } [data-moduletitle="Message Detail"] div.message_csr_panel { width: auto; min-width: 53vw; } div.message_csr_panel_content, div.thread_info { padding: 25px; } div.thread_info .submit_buttons { text-align: center; } /* Skin Editor overrides */ input[id*="MJZC8X6"] { min-width: 230px; } /* Promotions Criteria Dropdown override */ div[id="Module-MBV96BP"] .selectmenu-wrapper { width: 560px !important; } @media (max-width: 400px) { /* ACH Fixes */ .ach-batch-details-text > div { max-width: initial; } } /* Content Manager*/ body.phone-device [id*="MYTKFUZ"] tr td:first-child { max-width: 120px; } .desktop-device.Administration-Skins-EditSkin span.has_callout input[type=text] { min-width: 190px; } div[id*=MA44GME_ctl00_pnlGridActions] { float: left; } span[id*="MPRII8A"][id*="SubscriptionHeader"], [id="Module-M5QH8YG"] .module-container.mainmodule b { margin-top: 15px; display: block; clear: left; } /* These were moved to this file from another css file, but as they are all admin-related pages, they belong in this file */ /* Remove extra space under header on Users page for Portal Admin */ .phone-device div[id="Module-M5QH8YG"] .module-container.mainmodule b { padding: 0 0 10px 0; } /* Fix User table padding for mobile */ .phone-device div[id="Module-M5QH8YG"] .table_data td {padding: 12px 10px;} /* Admin Users Page */ ==================================================== */ /* For Modern Browsers (not IE 11) */ @supports (display: grid) { div[id="Module-M5QH8YG"] input[type=checkbox]+label { background-position: -35px -80px; } div[id="Module-M5QH8YG"] input[type=checkbox]:checked+label { background-position: -35px -205px; } } div[id="Module-M5QH8YG"] input[type=radio]:checked+label { padding-bottom: 0; } div[id="Module-M5QH8YG"]input[type=radio]:checked+label:before { background: #757575; } div[id="Module-M5QH8YG"] input[type=radio]+label { line-height: normal; font-size: 16px; padding: 0; padding-right: 10px; display: flex; align-items: center; margin: 2px 0px; } div[id="Module-M5QH8YG"] input[type=radio]+label:before { display: inline-block; } div[id="Module-M5QH8YG"] div.p .left_aligned_checkbox { display: flex; flex-wrap: wrap; } div[id="Module-M5QH8YG"] .module-container.mainmodule b { font-size: 18px; } p[id*=M5QH8YG][id*=submitButtons]+b { clear: both; display: block; padding-top: 20px; } /* Admin Message Center Overrides */ input[name$="$btnChangeQueue"], input[name$=btnAssign] { margin-left: 30px !important; } [data-moduletitle="Message Detail"] div.message_thread_container { width: auto; } [data-moduletitle="Message Detail"] div.message_right_side_div { width: auto; min-width: 645px; } [data-moduletitle="Message Detail"] div.message_csr_panel { width: auto; min-width: 53vw; } div.message_csr_panel_content, div.thread_info { padding: 25px; } div.thread_info .submit_buttons { text-align: center; } /* Skin Editor overrides */ input[id*="MJZC8X6"] { min-width: 230px; } /* Promotions Criteria Dropdown override */ div[id="Module-MBV96BP"] .selectmenu-wrapper { width: 560px !important; } @media (max-width: 400px) { /* ACH Fixes */ .ach-batch-details-text > div { max-width: initial; } } /* Content Manager*/ body.phone-device [id*="MYTKFUZ"] tr td:first-child { max-width: 120px; } .desktop-device.Administration-Skins-EditSkin span.has_callout input[type=text] { min-width: 190px; } div[id*=MA44GME_ctl00_pnlGridActions] { float: left; } span[id*="MPRII8A"][id*="SubscriptionHeader"], [id="Module-M5QH8YG"] .module-container.mainmodule b { margin-top: 15px; display: block; clear: left; } /****************************************** SPACING ON RETAIL ACH ******************************************/ .RetailACH [id*="MY1WNH"] > div.module-container.mainmodule > ul > h3:nth-child(5) { margin-top: 20px; } /****************************************** CHECKBOX ALIGNMENT ON DOMAIN REGISTRATION PAGE ******************************************/ .DomainManagement th:nth-child(n+3) { text-align: center; } /******************************************* ALIGN ADDRESS FIELD ON LOCATION PAGE *******************************************/ .Location td[colspan]:not([colspan="1"]), .Location table tbody tr td:first-child { margin-left: 0; padding-left: 0; } /* Align callout help icons on Report Type Configuration page */ .ReportTypeConfiguration span.has_callout>.selectmenu-wrapper { margin-right: .5rem; } /* Manage width of Linked Profile module on Business Manager page */ .BusinessManager input[type="text"]{ min-width: auto; } /* Move right-aligned Language setting to the left side of Disclosure Detail screen */) .DisclosureViewer div[id*="MIBQP3Q"][id$="RightAlignZone"] { float: none !important; word-wrap: normal; } /* SBOSUPS-81 - Spacing is less between 'First Name' and 'Last Name' fields */ label[id*=M5QH8YG][id$=lblLastName] { margin-top: 2rem; } /* Site Change History Page */ div[id*=_searchControls_versionRangeRadioButton_C] { margin-bottom: 15px; } .phone-device input[id*=versionRangeControl].input_box { min-width: 90px !important; } .phone-device span[id$=_searchControls_dateRangeControl_C] { display: block; } .phone-device table[id*=_siteHistoryGrid] th:nth-child(4), .phone-device table[id*=_siteHistoryGrid] td:nth-child(4) { display: none; } /* Add scrollbar for tables that are too wide on Operations/ACH Batch Details and Wire File Processing pages */ .AchBatchDetails .columns_container_inner_2, .WireFileProcessing div.mainmodule .no-pad { overflow-x: auto; } /* Remote Deposit ==================================================== */ /* Spire/css/PageFixes/_remote-deposit.css */ /** RDC Module */ div[id$="Module-MB2C30Z"] { height: auto; } /* Remove border around module */ .phone-device div[id*=MB2C30Z] .module-container.mainmodule { border: none; border-top: 1px solid #0f4b8f; } .rdc_item_header, .rdc_item_info_section { color: #000000; /*color: #4C4D4F;*/ } #imgFrontDiv div:nth-child(2), #imgBackDiv div:nth-child(2), span[id*="btnCaptureFront"], span[id*="btnCaptureBack"] { text-align: center !important; } input[id$=btnCaptureFront], input[id*=btnCaptureBack] { background: none !important; border-color: transparent !important; } /* Mobile Check Deposit */ div[id*=MB2C30Z] span[id*=grpEditor_btnCapture] { text-align: center; } div[id*=MB2C30Z] p[id$=ZoneHistory] { justify-content: center; } div[id*=MB2C30Z] input[id$=btnViewHistory][type=submit] { font-size: 15px !important; line-height: normal; font-weight: 700; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; transition-property: background-color, border-color; background-color: transparent; color: rgba(13,67,128,255) !important; border: none; position: relative; top: -15px; } @media screen and (min-width: 768px) { div[id*=MB2C30Z] input[id$=btnViewHistory][type=submit] { padding-top: 6px; padding-bottom: 8px; } } div[id*=MB2C30Z] input[id$=btnViewHistory][type=submit]:hover, div[id*=MB2C30Z] input[id$=btnViewHistory][type=submit]:active { background-color: transparent !important; border-color: transparent !important; color: #0f4b8f !important; box-shadow: none !important; text-decoration: underline; } div[id*=MB2C30Z] input[id$=btnViewHistory][type=submit]:disabled { background-color: #ffffff !important; border-color: transparent; color: #0f4b8f !important; } /* Button too close to inputs */ .DepositHistory .submit_buttons { margin-top: 1.8rem; } div[id*=MB2C30Z] .module-single input.input_money { font-size: 15px; line-height: normal; padding: 6px 10px; margin: 5px 0; height: 36px; background-color: #ffffff !important; color: #121212 !important; border-radius: 4px !important; border: 1px solid #9e9e9e !important; background: transparent; width: 100%; min-width: 240px !important; /* fixes input changing size when it gets and loses focus */ } @media screen and (min-width: 768px) { div[id*=MB2C30Z] .module-single input.input_money { padding: 5px 10px; line-height: 1.6; } } div[id*=MB2C30Z] .submit_buttons { margin-bottom: 0 !important; } input[id*=btnCapture][type=submit] { background: url(content.aspx?theme=Theme4&color1=%23808080&image=svg/camera-solid.svg) no-repeat !important; background-position: center !important; background-size: contain !important; height: 55px !important; border: 0 !important; max-width: 100%; } .endorsement-text { margin-bottom: 20px; } .mobile-device input[id*=btnCapture][type=submit]:active, .mobile-device input[id*=btnCapture][type=submit]:hover, .mobile-device input[id*=btnCapture][type=submit]:focus, .mobile-device input[id*=btnCapture][type=submit]:visited { border: 0 !important; box-shadow: none !important; background: url(content.aspx?theme=Theme4&color1=%23808080&image=svg/camera-solid.svg) no-repeat !important; background-color: transparent !important; background-position: center !important; background-size: contain !important; } div[id*=MB2C30Z] input[id*=_grpEditor_btnCancel] { margin-top: 30px !important; } /* Fix for TBCUPS-27/CS04399227 - check images not contained in buttons */ button.rdc-check-image { background-repeat: no-repeat !important; background-size: contain !important; background-position: center!important; } /* Messages ==================================================== */ /* Message Details */ /* Hide technical details on Inbox Message List */ .phone-device .Messages .inline-table-list.mobile.initial-color { display: none; } .phone-device.Messages div span.smaller { display: none; } .phone-device.Messages td.narrow-screen-only.column-padding { padding: 15px 0 15px 10px !important; } .phone-device .Messages .inline-table-list.mobile.initial-color { display: none; } /* Message Inbox List */ /* Mobile padding L/R should be 10px according to P202 */ .phone-device.Messages div.module-container.mainmodule { padding: 0 10px 20px 10px; } /* Accounts/TransactionInquiry.aspx ==================================================== */ .message_editor_container div label { text-align: left; line-height: 1.5; width: 100%; float: none; font-weight: bold; margin-bottom: 7px; } span.message_readonly_text { line-height: 1.5; } div.message_with_text { clear: left; padding-top: 0; margin-bottom: 1.2rem !important; } div.message_with_text .input-field { margin-bottom: 0 !important; } .TransactionInquiry div[id*="RequestEmailNotification"]{ margin-bottom: 1.8rem; margin-top: -40px; /* there is a blank div and space above this that adds way to much space*/ } /* Label spacing */ .TransactionInquiry.phone-device label[for*="tbSubject"], .TransactionInquiry.phone-device label[for*="tbBody"] { margin-bottom: 7px !important; } /*Validation alerts should be red*/ span[id*="fvSubject"], span[id*="rfvBody"] { color: red; } /* Align help icon with base of Module Header text */ .phone-device.Messages a.icon_help { position: relative; top: 2px; } /* move trashcan over to right */ .phone-device.Messages td.actions-column.column-padding { text-align: right; } /* add some padding to Trashcan icon */ .phone-device.Messages input[id*=deletethread] { background-repeat: no-repeat; padding-right: 10px; margin-top: 11px; } /* align compose new message link with header text base */ .phone-device.Messages .module-single > h2:first-child ul { position: relative; top: .09em; } body.phone-device.Messages { background-image: none; } /* Desktop */ .desktop-device.Messages a.icon_help { margin-top: -1px; } /* Messages - remove gray background */ div.thread_info { background: white; } .thread_info p label { font-weight: 600; } /* Add space below messages */ div.message_container { margin-bottom: 15px; border: 1px solid #c5c5c5; } /* Add space below email notification option before buttons*/ div[id$="_pnlRequestEmailNotification"] { margin-bottom: 15px; } /******************** .thread_info_curve *********************/ .MessageDetail .thread_info_curve { display: none; } .MessageDetail div.thread_info { border-top: 1px solid #c5c5c5; } /******************** .message_container_curve *********************/ .message_container_curve, .message_container_curve0, .message_container_curve1, .message_container_curve2, .message_container_curve3, .message_container_curve4 { display: none; } /******************** message body padding needed *********************/ div.message_header { padding-left: 10px; padding-right: 10px; } .message_body { padding-left: 10px; padding-bottom: 10px; } .message_recall_link { padding-right: 10px; font-weight: 600 !important; } /****************************************** MOVES THE UNREAD MESSAGES TO THE LEFT ******************************************/ a.message_mark_unread_link { float: left; margin-left: 5px; } /****************************************** MOVES MINOR ALIGNMENT ISSUES ******************************************/ .MessageCenter table.table_data tr.table_header > th:nth-child(n) { padding-left: 3px !important; } .MessageCenter input[id*="btnChangeQueue"] { margin-left: 11px !important; } /****************************************** COMPOSE NEW BUTTON ******************************************/ .Messages #Module-MATVZ4F > h2 > div > ul > li > a { text-transform: uppercase; } /* Profile ==================================================== */ /* Spire/Pages/_ProfilePages.css */ .phone-device textarea[id*='notificationEditor_txtMessage'] { width: 83vw !important; min-width: 83vw !important; } .native-app.ios .spinner { /* display: none !important; */ } label[id*="lblNewEmail"]:before, label[id*="lblConfirm"]:before { content: "* "; margin-right: 3px; } .phone-device label[id*="lblNewEmail"], .phone-device label[id*="lblNewLoginName"] { margin-top: 10px; } .ChangePassword label[for*="Password"]:before, .ChangeEmail p label:before, .ChangeUserID p label:before, .TextBanking label[for*="pncPhoneNumber"]:before, .Alerts .error_box ~ div.bold:before, .ManageAlerts label.field_label, div[id*="pnlNewMessageSection"] label:before, label[id$=lblBody]:before, span.asterisk-prefix:before { content: "* "; margin-right: 3px; } .phone-device.ManageEmail .simple-listView-delete-icon li a:nth-of-type(2) { vertical-align: top; padding-top: 10px; } .phone-device.ManageEmail li a:first-of-type { padding-top: 10px; padding-left: 5px; } /* Mobile Nicknames /* *********************************************/ /* Fix checkbox on Nicknames in Profile Section */ .MobileNicknames input[type=checkbox]:checked+label, .MobileNicknames input[type=checkbox]+label { margin-left: 10px; margin-right: 0; } .phone-device.MobileNicknames td label { white-space: nowrap !important; } /* .phone-device.MobileNicknames table:nth-child(2) td label.input-field:first-child { width: 175px; margin-left: 25px; } */ /* UXPIPE-184 remove this row so we can move the acct input over to the right */ .phone-device.MobileNicknames li table td:nth-child(4) { xdisplay: none; } .phone-device.MobileNicknames table:first-child tr:first-child td:nth-child(2) { width: 80% !important; } .phone-device.MobileNicknames table:nth-child(2) td:nth-child(2) { padding-left: 0; padding-right: 0; } .phone-device.MobileNicknames table:nth-child(2) tr td:nth-child(2) { width: 40% !important; } /* Padding for iphone 5: */ @media (max-width: 320px) { /* Fix checkbox on Nicknames in Profile Section */ .MobileNicknames input[type=checkbox]:checked+label, .MobileNicknames input[type=checkbox]+label { margin-left: 0; margin-right: 0; } .phone-device.MobileNicknames table:nth-child(2) td label.input-field:first-child { width: 155px; margin-left: 0; } } /* Validation asterisk */ .desktop-device span[id*="grpRegister_chkTermCond_RFV"] { margin-left: -25px; } /* Adds space before phone number - UXPIPE-281 */ .text-banking-radio-line2 { margin-left: 0.25em; clear: left; font-weight: 900; color: #000000; } .phone-device input[type="checkbox"] + label[for*="chkTermCond"] { display: block; margin-top: 15px; } /* Phone number radio button */ .phone-device.ios:not(.native-app) label[for*="radUsePhoneNumber"] { letter-spacing: .1em; } /* T&C Error icon */ .phone-device div[id*=chkTermCond] span.icon_error_small { float: right; margin-top: -35px; } .desktop-device input[type="checkbox"] + label[for*="chkTermCond"] a { margin-left: 8px; margin-right: 8px; } /****************************************** MULTIPLE PROFILE FIXES ******************************************/ /* FORMATTING FOR MODULE */ .ChangeEmail div[id*="M77LMDF"], .Payments div[id*="MN6R100"], .PaymentCenter div[id*="M7E4NEC"], .ChangeAddressPhoneNumber div[id*="MUTFWJ8"] { background-color: #ffffff; padding: 2.5px; margin-bottom: 2.5px; border-radius: 0px !important; } /* SPACING FOR SELECT BUTTON */ .PaymentCenter input[type="submit"], .ChangeEmail input[type="submit"], .eStatements input[type="submit"] { margin-top: 0px !important; margin-left: 5px !important; } /* SPACING FOR SELECT BUTTON */ .ChangeAddressPhoneNumber input[type="submit"], .PaymentsBusiness input[type="submit"], .Payments input[type="submit"]{ margin-top: 0px !important; margin-left: 10px !important; } .mobile-device.ChangeAddressPhoneNumber input[id*="MUTFWJ8"][id*="btnSubmit"] { margin-top: 17px !important; } .mobile-device.ChangeAddressPhoneNumber input[type="submit"] { margin-top: -8px !important; margin-left: 5px !important; } /* SPACING FOR VERIFICATION BUTTONS */ .mobile-device.ChangeAddressPhoneNumber .group-box input[type="submit"] { margin-top: 9px!important; margin-left: 0px!important; } /* SPACING FOR TITLE */ .ChangeEmail label[id*="PCDZ_M77LMDF"][id$="lstProfiles_label0"], .ChangeAddressPhoneNumber label[id*="PCDZ_MUTFWJ8"][id$="lstProfiles_label0"], .Payments label[id*="PCDZ_MN6R100"][id$="lstProfiles_label0"] { margin-left: 18px; margin-right: 18px; } @media screen and (max-width: 768px) { /* SPACING FOR SELECT BUTTON ON MOBILE */ .Payments span[id*="PCDZ_MN6R100"][id$="btnSubmit_C"], .Zelle span[id*="PCDZ_58ca1d82-fedb-4903-a8a2-212446a52462"][id$="btnSubmit_C"], .ChangeAddressPhoneNumber span[id*="PCDZ_MUTFWJ8"][id$="btnSubmit_C"] { margin-top: 0px !important; } } /* Spacing for multiple accounts dropdown */ .phone-device .selectmenu-wrapper + span[id*="btnSubmit_C"] > span > input[type="submit"] { margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 10px !important; } .desktop-device div[id*="lstProfiles_C"] { margin-bottom: 10px!important; background: white; padding: 20px; } .phone-device div[id*="lstProfiles_C"] { padding: 20px; } /****************************************** MAKES SECURITY DROPDOWN WIDER ON DESKTOP ******************************************/ .SetupProfile ul[id*="ddQuestions-menu"], .UserDetails ul[id*="ddQuestions-menu"], .ChangeProfile ul[id*="ddQuestions-menu"] { max-width: max-content; } /* Alerts - New page added 7/25/2019 - ll */ ==================================================== */ /* Spire/css/PageFixes/_alerts.css */ body.ManageAlerts td b { font-weight: 600; } body.ManageEmail div[id$="_panelAddDestination"] { font-weight: 600; } /* Expand the Date/Time Alert input so we can see the entire date and time - UXPIPE-90 */ .riSingle .riTextBox[type="text"] { min-width: 145px !important; font-size: 15px !important; } /* highlight every other row in list */ body.mobile-device ul[id*='lstSubscriptions'] li:nth-child(odd), body.mobile-device ul[id*='lstChannelDestinations'] li:nth-child(odd) { background: rgba(243, 243, 243, .7) !important; } /* Buttons container too close to inputs */ .phone-device.ManageAlerts .submit_buttons, .phone-device.ManageEmail p.submit_buttons { margin-top: 20px; } /* Labels too close to inputs */ .phone-device.ManageEmail input[id*=DestinationAddress] { margin-top: 7px !important; } .phone-device.ManageAlerts .module-container.mainmodule * { max-width: 95vw; } .phone-device.ManageAlerts table > tbody > tr:nth-child(odd) { background-color: #fff; } .phone-device.ManageAlerts table > tbody > tr { border-bottom-color: #fff; } .phone-device.ManageAlerts td { padding: 2px !important; } .phone-device.ManageAlerts .dollar::before { top: -.15em; } .span[id*=_txtTransactionAmount_C] { margin-left: 10px; } .phone-device.ManageAlerts input[id$=_balanceThresholdAmount] { width: 60vw !important; } /* make Phone Numbers label bold on alerts page */ .alerts-phone-header { font-weight: 600; } .phone-device.ManageAlerts .dollar input { min-width: 200px !important; width: 200px !important; max-width: 200px !important; } /* Align amount to dollar sign - UXPIPE-22 */ .phone-device.ManageAlerts .dollar input { padding-top: 2px; } .tablet-device.ManageAlerts .dollar::before { top: -.15em; } .phone-device.ManageAlerts span.input-field { display: flex; flex-wrap: wrap; } .phone-device.ManageAlerts label { flex-basis: 100%; } .phone-device.ManageAlerts legend.field_label { padding-top: 15px; } .phone-device.ManageAlerts .field_label + span:first-of-type { display: block; } .phone-device.ManageAlerts p.submit_buttons { margin-top: 10px !important; } .module_container.alerts-information { background: white; opacity: 1; padding: 20px; color: black; border-radius: 5px; margin-bottom: 20px; } /* Moves dollar sign on Card Alert of Alerts */ [id*="MBR2NU8"][id*="txtLessThanAmount"] .dollar:before, [id*="MBR2NU8"][id*="txtMoreThanAmount"] .dollar:before, [id*="MBR2NU8"][id*="txtTransactionAmount"] .dollar:before { top: 22px; left: 5px; } [id*="MBR2NU8"][id*="balanceThresholdAmount"] .dollar:before { top: 22px; left: 13px; } /* Spacing on Alert Subscriptions */ ul.simple-listView-delete-icon { width: 91%; margin-left: 20px; } /* Fix spacing on message alters */ .ManageAlerts fieldset[id*="MBR2NU8"][id*="rdbtnlimits"] { margin-left: 26px; } /* Fix padding on message alerts */ .ManageAlerts td { padding: 0px; padding-bottom: 10px; padding-top: 10px; } /* Fix missing radio button on actual iPhone Devices for Daily Balance alert */ .phone-device.ManageAlerts .module-container .module-single:first-child { clear: none; } /* Fix borders on message alters */ .ManageAlerts #Module-MBR2NU8 > div.module-container.mainmodule > table tr, .ManageAlerts [id*="MBR2NU8"][id*="notificationEditor"] > table tr { border-bottom: none; } /* TBCUPS-260 - Fix textbox alignment on Alert> Cleared Check Alert for iPads */ .desktop-device.ios [id*=MBR2NU8][id*=_txtCheckNumber] { position: relative; top: 15px; left: 10px; } /****************************************** ADDS SPACE BENEATH LAST ELEMENT SO THE SCROLLBAR WORKS ******************************************/ .NotifiAlerts radio-button-list-item:last-child > div { margin-bottom: 50px; } .NotifiAlerts .module-single.notifi-tile .laguna-angular-app { height: 77vh; overflow-y: scroll; } .NotifiAlerts.phone-device .laguna-radio-button-list.vertical input[type="radio"] + label { width: 88vw; } .NotifiAlerts .laguna-angular-app .laguna-message-overlay { background: rgba(0,0,0,0.50); } .NotifiAlerts .p { color: #ffffff; font-weight: 900; } .NotifiAlerts .laguna-message-overlay .overlay-close-icon { top: -15px; } .NotifiAlerts .inline-control.text span.account-number { font-size: 1rem; } /* SEATTLEPS-284 - Notifi-Alerts-Add Alert-Unable to scroll down */ #Module-MGEZMCW .vertical.laguna-radio-button-list { min-height: 150vh; } /****************************************** iPAD FIXES FOR DOLLAR SIGN ALIGNMENT IN VERSIONS OF ARCHITECT ******************************************/ body[class*=v-2019-3].tablet-device.ios [id*="MBR2NU8"][id*="balanceThresholdAmount"] .dollar:before { top: 20px; left: 18px; } body[class*=v-2019-4].tablet-device.ios [id*="MBR2NU8"][id*="balanceThresholdAmount"] .dollar:before { top: -0.3rem; left: 18px; } /*iPad Pro 10.5"*/ /* Landscape */ @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (device-height: 1024px) and (orientation: landscape) { .tablet-device.ios [id*="MBR2NU8"][id*="balanceThresholdAmount"] .dollar:before { top: 2.2rem; } } /* Fix for dollar sign alignment on Balance Alerts on narrow screens */ @media (max-width: 1138px) { .ManageAlerts div.p:not(.inline) label.field_label + span.dollar { align-items: flex-start; } } /* IBPS-166 - Notification slider is misaligned for long email addresses */ .NotifiAlerts .laguna-checkbox-list.vertical input[type="checkbox"] + label span { max-width: 55vw; text-overflow: ellipsis; display: inline-block; overflow-x: hidden; } /* IBPS-232 - Alignment issues in Notifi Delete Alert section */ .NotifiAlerts.phone-device .laguna-submit-buttons { flex-wrap: wrap; } .NotifiAlerts.phone-device li.laguna-checkbox-list-item { display: flex; } .NotifiAlerts.phone-device .laguna-checkbox-list.switch ul.laguna-field-control li.laguna-checkbox-list-item label { width: 100%; margin-right: 0; } .NotifiAlerts.phone-device .wizard-step-title { padding: 0 1em 3em 2em; } .NotifiAlerts input[type=checkbox]+label, .NotifiAlerts input[type=radio]+label { margin-right: 0; margin-bottom: 10px; } /* Mobile Transfers ==================================================== */ /* Spire/css/PageFixes/_transfers.css */ /* hide collapse chevron */ .phone-device.ScheduledTransfers h2 .h2-content .collapse-expand { display: none; } .ScheduledTransfers a:active, .ScheduledTransfers a:hover { text-decoration: none; } /* Mobile Scheduled Transfers List */ .phone-device ul[id$=lvScheduledTransfers] li a div.item_details p span.label, .phone-device ul[id$=lvScheduledTransfers] li a div.item_details p span.value { color: #000000; } .phone-device.ScheduledTransfers ul[id$=lvScheduledTransfers] li a h3 { color: #0f4b8f; } .phone-device.ScheduledTransfers ul.simple-listView-delete-icon li>a>h3 { margin-top: 15px; } .phone-device.ScheduledTransfers .simple-listView-delete-icon li>a { padding-bottom: 1px; } .phone-device.MakeTransfer .laguna-field.inline-label:nth-child(odd) { background: #efefef; } .phone-device.MakeTransfer .laguna-field.inline-label { padding: 6px 10px; } .phone-device.MakeTransfer { background-image: none; } .phone-device .module-single>h2:first-child { border-bottom: none; } .laguna-message.laguna-checked-image { margin-top: 10px; } /*Transfers on iPads */ @media screen and (max-device-width: 1024px) and (orientation: portrait), screen and (max-device-width: 834px) and (min-device-width: 834px) and (orientation: portrait) { .tablet-device.ManageTransfers .selectmenu-wrapper { max-width: 70vw; } .tablet-device.ManageTransfers .input_box.input_money { width: 300px !important; max-width: 30vw; } .tablet-device.ManageTransfers .submit_buttons { margin: 5px 0; } } /* Make Multiple Transfers Page */ /* hide the Close button */ .mobile-device.MakeMultipleTransfers .h2-content .tile-close-icon-area { display: none; } /* move the content UP */ .phone-device.MakeMultipleTransfers .module-container.graphs .module-single>div { /* margin-top: -20px; <- not necessary */ height: 105% !important; } /* Truncate scheduled transfers list items */ .phone-device.ScheduledTransfers .item_details .value { white-space: nowrap; max-width: 36vw; /* was 210 px */ overflow: hidden; text-overflow: ellipsis; } /* Tighten spacing between scheduled transfers list items */ .phone-device.ScheduledTransfers .item_details p+p { margin-top: 1px; margin-bottom: 10px; } /* iPhone 5 SE */ @media (max-width: 320px) { .phone-device.ScheduledTransfers .item_details .value { max-width: 135px; } } /* Fix Cancel/Submit buttons touching each other */ .MakeTransfer .laguna-submit-buttons input.button:not(:last-child), .MakeTransfer .laguna-submit-buttons input.button:first-child { margin-right: 10px !important; } .MakeTransfer .laguna-submit-buttons { margin-left: 10px !important; } /* Added from Custom/Pages/UseButtonFixes.css */ /* Change wizard chevron button to left-arrow */ .kilimanjaro-module .kilimanjaro-account input[type="button"].kilimanjaro-back-button, .wizard-header .wizard-back-icon, .wizard-back-icon { background: url(/App_Themes/Theme4/images/svg/arrow-left.svg) no-repeat; opacity: 1 !important; min-width: 32px; margin-top: 8px; } .kilimanjaro-module input[type="button"].kilimanjaro-back-button { content: "" !important; margin-top: 2px; min-height: 38px; } .circle-around-chevron { border-radius: 0; cursor: pointer; width: auto; height: auto; } .wizard-back-icon:before { display: none; } .wizard-back-icon { border: 0; vertical-align: middle; margin-top: -10px; text-decoration: underline; font-size: 14px; } /* Fixes alignment and color issues on review screen */ button.laguna-field-control { color: #000000 !important; text-align: left; justify-content: space-between; } /* Fixes ALL CAPS for account names */ .inline-control.text span.account-nickname, .laguna-radio-button-list label .account-nickname, .inline-control.text span.account-nickname, .laguna-checkbox-list label .account-nickname { text-transform: none; } /* Fixes alignment issue where delete option was wider than label on Multiple Transfers */ .MakeMultipleTransfers input[type=checkbox]+label, .MakeMultipleTransfers input[type=radio]+label, .MakeTransfer input[type=checkbox]+label, .MakeTransfer input[type=radio]+label { margin-right: 0; } /* Use primary button color instead of default teal color */ li.laguna-radio-button-list-item>input[type="radio"]:checked+label, li.laguna-checkbox-list-item>input[type="checkbox"]:checked+label, div.laguna-radio-button-list-item>input[type="radio"]:checked+label { background-color: #0F4B8F; color: #ffffff; } .phone-device.MakeTransfer .module-container.mainmodule { min-height: 700px; } .phone-device.MakeTransfer div.ui-widget-content, .phone-device.MakeMultipleTransfers div.ui-widget-content { /*border-color: #FFFFFF !important;*/ border-color: inherit; border-width: 0; } .phone-device.Edit input[id*="txtAmount"] { min-width: 240px; width: 240px; padding-top: .2em; } .phone-device.Edit .selectmenu-wrapper, .phone-device.Edit .selectmenu-container { width: 320px !important; } /* The Money Symbol */ .phone-device.edit .dollar::before, .phone-device.Edit .dollar::before { top: -.10em; left: 13px; } /*The Money Symbol on Scheduled Transfers with Principal Payments */ .phone-device.Edit [id*="MF73BZ1"][id*="webInputForm_grpEditor_grpAmountOptions_txtAmountOption"]>span.dollar::before { top: 22px; left: 5px; } .phone-device.Edit [id*="MF73BZ1"][id*="txtAmountOption0"]>span.dollar::before { top: 22px; left: 5px; } .phone-device.Edit [id*="MF73BZ1"][id*="txtAmountOption0"] > span > span { left: -35px; position: relative; } /*The Money Symbol on Initiate Multiple Wire Transfers */ .phone-device.Multiple .dollar::before { top: 32px; left: 5px; } /*The Money symbol on Initiate Multiple Wire Transfers */ .Multiple.pfm_data.dollar::before, .Multiple td.dollar::before { left: 84px; top: 0px; position: relative; } /* iPhone 5 SE - font too big on transfers */ @media (max-width: 320px) { .phone-device .laguna-radio-button-list label .amount { font-size: 1.5rem; } .phone-device.Edit .selectmenu-wrapper, .phone-device.Edit .selectmenu-container { width: 280px !important; } /* Doubled the class for higher specificity on iPhone 5 SE */ .phone-device.EditExternalAccount.EditExternalAccount input[id*=txtAccountNumber], .phone-device.EditExternalAccount.EditExternalAccount input[id*=txtAccountNickname] { width: 280px !important; } } /* Align Date Picker on Edit Transfer screen */ .phone-device.Edit .icon-date::after { position: absolute; right: -4rem; top: -1.375rem; } .phone-device.Edit img[src*="Resource.axd"] { top: 0px; right: 0px; } .phone-device.Edit .ui-datepicker-multi .ui-datepicker-group { display: inline; display: contents; /* <-- May not have support on mobile browsers */ } /* Aligns help icons */ .desktop-device.ManageTransfers span.has_callout>input { margin-right: 0 !important; } /* Transfers/External Accounts LAYOUT fix */ .desktop-device.EditExternalAccount span.has_callout, .desktop-device.EditExternalAccount fieldset[id*=lstAccountType] { margin-bottom: 20px; } .phone-device.EditExternalAccount input[name*=txtRoutingNumber] { max-width: 1em !important; } .phone-device.EditExternalAccount fieldset[id*=lstAccountType_C], .phone-device.EditExternalAccount div[id*=txtAccountNumber_C]+p { margin-top: 15px; } .phone-device.EditExternalAccount input[id*=txtAccountNumber], .phone-device.EditExternalAccount input[id*=txtAccountNickname] { min-width: 87vw; } /* Align textbox with button on Transfers > External accounts Verify Button */ .phone-device.EditExternalAccount input[name*=txtRoutingNumber] { margin-top: -18px !important; } /* ensure left margin between input and button, as it is not getting picked up from _buttons.css */ .phone-device.EditExternalAccount input[id$=grpAch_btnVerifyRoutingNumber] { /* margin-left: 24px !important; */ } /* fix for iPhone 5SE and other very small phones; Verify button off screen because routing number input is too wide */ @media only screen and (max-device-width: 320px) and (orientation: portrait) { .EditExternalAccount input[id*=grpAch_txtRoutingNumber] { min-width: 150px !important; } } .laguna-field.laguna-field-required .laguna-field-label:before, span.asterisk-prefix:before { content: "* "; } /* UXPIPE-279 Remove asterisk on right as added by Product */ .laguna-field.laguna-field-required .laguna-field-label:after { content: " "; display: none; } .wizard-step-title, .account-nickname { font-weight: 600; } .MakeMultipleTransfers .wizard-step-content { overflow-x: hidden; } /* Table Header Column Divider: */ .desktop-device.ManageTransfers table.table_data .table_header>th:not(:last-child) { border-right: 1px solid transparent; padding-left: 1.5rem !important; padding-right: 2px !important; } /* Scheduled Transfer Details Modal */ .TransferActivity .module-single.ui-dialog-content .header h1 { font-weight: 600; } /* Remove scroll bar left-to-right */ .TransferActivity div[id*=M7P6QPD] div, .ManageTransfers div[id*=M76YWDO] div { overflow: hidden; } /* move content away from left edge */ .TransferActivity div[id*=M7P6QPD] div div, .ManageTransfers div[id*=M76YWDO] div div { margin-left: 20px; } /* align with header */ .TransferActivity table[id*=M7P6QPD] th:first-child, .ManageTransfers div[id*=M76YWDO] table.table_data .table_header th:first-child { padding-left: 20px !important; } /* Button Container */ .TransferActivity p[id*=M7P6QPD].submit_buttons, .ManageTransfers div[id*=M76YWDO] .submit_buttons { display: flex; justify-content: center; } /* Close Button */ .TransferActivity p[id*=M7P6QPD].submit_buttons input[type=submit], .ManageTransfers div[id*=M76YWDO] input[type=submit] { position: relative; bottom: -10px; } /* Moves icons */ .ManageTransfers td.actions-column { padding-left: 0px; } /* iPhone 5 SE */ @media (max-width: 320px) { .phone-device.ScheduledTransfers .item_details .value { max-width: 135px; } .phone-device.ScheduledTransfers .simple-listView-delete-icon li a:nth-of-type(2) { width: 30px; } } /* UXPIPE145 - Fix Layout on Tablets for Transfers Tables */ .tablet-device:not(.Messages) th.wide-screen-only, .tablet-device:not(.Messages) td.wide-screen-only, .tablet-device.TransferActivity table th, .tablet-device.TransferActivity table td { padding-left: 0 !important; padding-right: 0 !important; } .tablet-device table[id*=M2KI7MV] th:nth-child(2), .tablet-device table[id*=M2KI7MV] td:nth-child(2), .tablet-device table[id*=M30P3JI] td:nth-child(2), .tablet-device table[id*=M30P3JI] th:nth-child(2) { text-align: center !important; } .tablet-device table[id*=M2KI7MV].table_data .table_header>th:nth-child(7).th-link>a { white-space: normal; } /****************************************** ALIGNS MONETARY VALUES ******************************************/ .TransferActivity td.align-right-padded.wide-screen-only, .TransferActivity [id*="grdPendingTransfers"]>tbody>tr:nth-child(n)>td:nth-child(5), .TransferActivity [id*="grdRejectedAndCanceledTransfers"]>tbody>tr:nth-child(n)>td:nth-child(4), .TransferActivity [id*="dgTransfers"]>tbody>tr:nth-child(n)>td:nth-child(5), .ManageTransfers [id*="MFY7PT2"][id*="dgTransfers"]>tbody>tr:nth-child(n+2)>td:nth-child(5) { text-align: right; } /****************************************** RIGHTHAND MARGIN FOR SCHEDULED TRANSFERS MODULE ******************************************/ .ManageTransfers [id*="MFY7PT2"] td, .ManageTransfers [id*="MFY7PT2"] .table_data td { padding: 1rem; } .desktop-device.ManageTransfers table.table_data .table_header>th:not(:last-child) { padding-left: 10px !important; } /* Soften warning for Regulation D Message */ .laguna-angular-app .laguna-message-overlay { background: rgba(0, 0, 0, 0.35); } /****************************************** ALIGNS DOLLAR SIGN ******************************************/ .AchTransferHistory .dollar::before { top: 21px; left: 15px; } .AchTransferHistory [id*="MSBLJUO"][id*="txtMinAmount"]>span>span { margin-top: 9px; } /****************************************** MANAGE TRANSFER FIXES FOR MORTGAGES ******************************************/ span[id*="M653F1P"][id*="txtAmountOption2"] { margin-left: 68px; } span[id*="M653F1P"][id*="txtAmountOption0"] { margin-left: 77px; } span[id*="M653F1P"][id*="txtAmountOption6"] { margin-left: 91px; } span[id*="M653F1P"][id*="txtAmountOption7"] { margin-left: 51px; } [id*="M653F1P"][id*="txtAmountOption0"]>span>span, [id*="M653F1P"][id*="txtAmountOption2"], [id*="M653F1P"][id*="txtAmountOption3"], [id*="M653F1P"][id*="txtAmountOption6"], [id*="M653F1P"][id*="txtAmountOption7"] { min-width: 156px !important; } /****************************************** MOVES THE CONFIRMATION DOLLAR ON THE EXTERNAL TRANSFER FORMS ******************************************/ [id*="MWFBMMJ"][id*="txtTrialDeposit1"]>span>span:nth-child(1), [id*="MWFBMMJ"][id*="txtTrialDeposit2"]>span>span:nth-child(1) { top: 10px; position: relative; } /****************************************** FIXES THE SIZING OF MAKE MULTIPLE TRANSFERS SAVED TEMPLATE BUTTONS ******************************************/ .MakeMultipleTransfers [id*="MJ58WBP"]>div>radio-button-list-item:nth-child(1)>div>label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /****************************************** FIXES THE FORM SPACING ON MOBILE ******************************************/ .phone-device div[id*="formUnlinkedAccountManager_LC_Zone0"], .phone-device div[id*="_CheckAmountRegion"] { margin-bottom: 15px; } /****************************************** FIXES THE FORM FIELDS WHEN TRANSFERING TO A LOAN OR MORTGAGE ******************************************/ /* HIDES INCORRECT GREYED-OUT FIELDS */ [id*="MSFXYQV"][id*="txtAmountOption0"]>span>span:nth-child(1), [id*="MSFXYQV"][id*="txtAmountOption2"]>span>span:nth-child(1), [id*="MSFXYQV"][id*="txtAmountOption3"]>span>span:nth-child(1), [id*="MSFXYQV"][id*="txtAmountOption6"]>span>span:nth-child(1), [id*="MSFXYQV"][id*="txtAmountOption7"]>span>span:nth-child(1), [id*="M653F1P"][id*="txtAmountOption0"]>span>span:nth-child(1), [id*="M653F1P"][id*="txtAmountOption2"]>span>span:nth-child(1), [id*="M653F1P"][id*="txtAmountOption3"]>span>span:nth-child(1), [id*="M653F1P"][id*="txtAmountOption6"]>span>span:nth-child(1), [id*="M653F1P"][id*="txtAmountOption7"]>span>span:nth-child(1) { display: none; } /* MOVES "PAYMENT DUE" FIELD */ [id*="MSFXYQV"][id*="txtAmountOption0"]>span>span.transfer-amount, [id*="M653F1P"][id*="txtAmountOption0"]>span>span.transfer-amount { left: -29px; position: relative; } /* New Mobile - MakeTransfer */ /* Fix dollar sign */ .phone-device.MakeTransfer .dollar:before { left: 15px; top: -3px } .tablet-device.MakeTransfer .dollar:before { left: 25px; top: -3px } [id*="MDN8GT0"][id*="txtAmountOption2"] > span.dollar:before { left: 163px; } .tablet-device.android.MakeTransfer .dollar:before { top: 0; } /* align textbox with others */ .phone-device.MakeTransfer input[id$=webInputForm_grpEditor_txtAmount] { position: relative; left: -7px; } /* Fix buttons touching description textbox */ .phone-device.MakeTransfer p[id$="LC_SubmitButtons"] { margin-top: 20px; } /* Fix too much spacing below Transfer Date label */ .phone-device.MakeTransfer .field_label[for$=calStartDate_TB] { margin-bottom: 0; } /* Mobile Transfer Review Data alignment fix */ .phone-device.MakeTransfer table.item_details td { padding-top: 10px } /* Fix description textbox for mobile */ .phone-device.MakeTransfer span.has_callout input[type=text] { max-width: 90vw !important; } /****************************************** ALLOWS THE LINE BREAKS FOR SCHEDULED TRANSFER TABLE ******************************************/ .ManageTransfers table.table_data .table_header>th.th-link>a { white-space: inherit; } /*TCBPS-310 Safari Fix for Manage Transfers Checkbox alignment on Desktop Page */ .desktop-device.ios.TransferActivity [id*="grdRejectedAndCanceledTransfers"]>tbody>tr:nth-child(n)>td:nth-child(4) { padding-right: 30px !important; } .desktop-device.ios.ManageTransfers [id*="dgTransfers"]>tbody>tr:nth-child(n)>td:nth-child(5) { padding-right: 20px !important; } /****************************************** SAFARI MACBOOK FIXES TCBPS-310 Safari Fix for Manage Transfers Checkbox alignment on Desktop Page ******************************************/ .desktop-device.ios.TransferActivity [id*="grdRejectedAndCanceledTransfers"]>tbody>tr:nth-child(n)>td:nth-child(4) { padding-right: 30px !important; } .desktop-device.ios.ManageTransfers [id*="dgTransfers"]>tbody>tr:nth-child(n)>td:nth-child(5) { padding-right: 20px !important; } /****************************************** iPAD FIX for REJECTED AND CANCELED TRANSFERS ******************************************/ .tablet-device.ios.TransferActivity [id*="grdRejectedAndCanceledTransfers"]>tbody>tr:nth-child(n)>td:nth-child(4) { padding-right: 15px !important; } /* Fix for height on phones */ .phone-device.MakeTransfer radio-button-list-item:last-of-type > div{ margin-bottom: 220px !important; } .phone-device.MakeTransfer wizard-step[id*="M_layout_content_PCDZ_MIEVIK2"][id$="amountStep"] radio-button-list-item:last-of-type > div, .phone-device.MakeTransfer wizard-step[id*="M_layout_content_PCDZ_MIEVIK2"][id$="reviewStep"] radio-button-list-item:last-of-type > div, .phone-device.MakeTransfer wizard-step[id*="M_layout_content_PCDZ_MIEVIK2"][id$="confirmationStep"] radio-button-list-item:last-of-type > div, .phone-device.MakeMultipleTransfers wizard-step[id*="M_layout_content_PCDZ_MJ58WBP"][id$="amountStep"] radio-button-list-item:last-of-type > div, .phone-device.MakeMultipleTransfers wizard-step[id*="M_layout_content_PCDZ_MJ58WBP"][id$="reviewStep"] radio-button-list-item:last-of-type > div, .phone-device.MakeMultipleTransfers wizard-step[id*="M_layout_content_PCDZ_MJ58WBP"][id$="confirmationStep"] radio-button-list-item:last-of-type > div { margin-bottom: 0px !important; } /****************************************** Fix Missing Dollar sign in Mobile Transfers ******************************************/ .phone-device.MakeTransfer input[id$=webInputForm_grpEditor_txtAmount] { background: transparent; } /****************************************** ADJUSTS THE DATE FIELD ON RECURRING TRANSFERS ******************************************/ input[id*="M653F1P"][id*="calEndDate"] { min-width: 249px; } /****************************************** ADJUSTS THE QUANTITY FIELD ON RECURRING TRANSFERS ******************************************/ input[id*="M653F1P"][id*="txtOccurrences"] { min-width: 141px; } /* Fix dollar alignment in new mobile Transfers module */ .phone-device.MakeTransfer #Module-MDN8GT0 fieldset[id$="AmountOptionsZone"] .dollar:before { top: 22px; } /* IBPS-48 - Fix overlap in transfer confirmation on smaller screens, i.e. tablets */ .module_h2_header_confirmation { font-size: 1.5em; } @media (max-width: 1241px) { .module_h2_header_confirmation { font-size: 1em; padding-top: 1em; padding-bottom: 1em; } } .phone-device.MakeTransfer #Module-MDN8GT0 fieldset[id$="AmountOptionsZone"] span[id*="txtAmountOption"] .dollar > span.transfer-amount { padding-left: 0; } .module-single-confirmation { background: #ffffff; } /* Align text on Edit Transfers review */ .phone-device.Edit div[id*="MF73BZ1"] tr.table_header td:last-child, .phone-device.$pvn-Transfers div[id*="MDN8GT0"] tr.table_header td:last-child { padding: 10px; } /* Add spacing for Scheduling Options and Description on Make a Transfer Mobile*/ .phone-device label[id*=lstSchedulingOption], .phone-device div[id*=grpEditor_txtDescription_C] { margin-top: 20px; } /* Prevent date placeholder from being cut off on phones */ .phone-device #Module-MDN8GT0 input[type="text"].input_box.input_date { width: 135px; margin-right: 10px !important; } /* Prevent text fields from enlarging on click */ @media (max-width: 650px) { .phone-device.MakeTransfer input[type="text"], .phone-device.MakeTransfer input[type="number"] { min-width: 335px !important; max-width: 360px !important; } } /****************************************** FIXES TABLE ALIGNMENT ON MOBILE EDIT PAGE OF TRANSFERS ******************************************/ .Edit.phone-device [id*="MF73BZ1"] table.item_details td { vertical-align: middle !important; } /****************************************** FIXES TABLE ALIGNMENT ON MOBILE EDIT EXTERNAL ACCOUNT ******************************************/ .EditExternalAccount.phone-device span[id*="MJPGL4E"][id*="btnVerifyRoutingNumber"] { /* top: 55px; left: -376px; position: relative; */ margin-top: 10px; } .EditExternalAccount.phone-device div[id*="MJPGL4E"][id*="txtRoutingNumber"] { /* margin-bottom: 46px; */ } .EditExternalAccount.phone-device div[id*="MJPGL4E"][id*="txtRoutingNumber"] > span { flex-wrap: wrap; } /****************************************** FIXES "OTHER AMOUNT" FIELD ON MOBILE MAKE TRANSFERS ******************************************/ .MakeTransfer.phone-device span[id*="MDN8GT0"][id*="txtAmountOption2"] { position: relative; top: -24px; } /****************************************** FIXES "SEMIMONTHLY" FIELDS ******************************************/ .Edit.phone-device [id*="MF73BZ1"][id*="lstTransferDay1"] > span { display: inline; } /****************************************** FIXES MEMBER ACCOUNT TEXT LINKS ******************************************/ .phone-device.UnlinkedAccounts [id*="MJTN45J"][id*="lvUnlinkedAccounts"] > li:nth-child(n) > a > h3 { text-decoration: underline; } /* Spending ==================================================== */ /****************************************** PROGRESS BARS ON BUDGET AND OVERVIEW PAGES ******************************************/ .Budget .withinLimitBar, .FinancesOverview .withinLimitBar { background: #259E01; } .Budget .overflowBar, .FinancesOverview .overflowBar { background: #FDACAC; } .Budget .fullbgBar, .Budget .bgBar, .FinancesOverview .fullbgBar, .FinancesOverview .bgBar { background: #CCCCCC; } /****************************************** TABLE LAYOUT ON BUDGET PAGE ******************************************/ .Budget td, .Budget th, .Budget .table_data td { vertical-align: middle; padding: 3px 0px 3px 9px; } .Budget th.pfm_data.budget_item_header_average, .Budget th.pfm_data.budget_item_header_difference, .Budget th.pfm_data.budget_item_header_actual, .Budget td:not(:first-child), .Budget .table_data td:not(:first-child) { text-align: right; } .Budget [id*="budgetItemsPanel"] > table:nth-child(2) > tbody > tr.budget_management_table_footer > td.pfm_data.dollar, .Budget [id*="budgetRow"] > td:nth-child(4) { text-align: left; } .Budget .budget_item_header { color: #000000; } /****************************************** CATEGORIES & SAVINGS GOALS PAGE FONT SIZES ******************************************/ .SavingsGoals .savings_goals_header, .Categories .pfm_manage_categories_header { font-size: 16px; color: inherit; font-weight: bold; } /****************************************** CATEGORIES & SAVINGS GOALS PAGE FONT SIZE & POSITIONS ******************************************/ .Categories .pfm_dialog_label, .SavingsGoals .savings_goals_footer_section, .SavingsGoals .new_savings_goal_footer_section, .SavingsGoals .new_savings_goal_label_right, .SavingsGoals .new_savings_goal_label_left, .SavingsGoals .new_savings_goal_label { font-size: inherit; } .SavingsGoals .new_savings_goal_label_right, .SavingsGoals td[colspan]:not([colspan="1"]) { text-align: left; vertical-align: middle; } /****************************************** MARGINS ON CATEGORIES ******************************************/ .Categories .pfm_info_panel { padding-left: 0px; } .Categories [id*="pnlManageCategories"] > div:nth-child(1) > div.user_category_management_module_new_category_form > table > tbody > tr:nth-child(1) { border-bottom: none; } .Categories [id*="pnlManageCategories"] > div:nth-child(1) > div.user_category_management_module_new_category_form > table > tbody > tr:nth-child(2) > td:nth-child(n) { padding-top: 10px; padding-bottom: 10px; font-weight: bold; } /****************************************** MARGINS ON BUDGETS ******************************************/ .Budget table.table_data .table_header > th, .module-single table th { padding: 10px !important; } /****************************************** FONT SIZES OF POPUP WINDOWS ******************************************/ .FinancesOverview .transaction_amount, .FinancesOverview .transaction_date { font-size: inherit; } /****************************************** FONT SIZES OF TOTALS ******************************************/ .Budget span.money.account, .Budget span.money { font-size: inherit; } /****************************************** REMOVE BORDER ON MOBILE DROPDOWN ******************************************/ .SpendingMobile .pfm_date_selector { border: none; } /****************************************** REMOVE UNDERLINES ON MOBILE DROPDOWN ******************************************/ .SpendingMobile .module-single table tr { border-bottom: none; } /****************************************** INCREASE WIDTH ON MOBILE DROPDOWN ******************************************/ .SpendingMobile .selectmenu-wrapper { min-width: 120px !important; } /****************************************** MOVE TEXT ON MOBILE "REMAINING" LABEL ******************************************/ .SpendingMobile .remaining { vertical-align: baseline; padding-right: 9px; } /****************************************** INCREASE HEIGHT ON PROGRESS BARS ******************************************/ .SpendingMobile .bgBar, .SpendingMobile .withinLimitBar, .SpendingMobile .fullbgBar { height: 22px; } /****************************************** TEXT SIZE FIX FOR WELCOME TO SPENDING ******************************************/ .Spending .welcome_header_panel { padding-left: 0px; font-size: initial; font-weight: bold; color: #000000; } .Spending .welcome_info_panel { font-size: initial; color: #000000; } /****************************************** ALTERS WIDTH OF FORM FIELDS IN CASE THERE IS A SIDE BANNER ******************************************/ .Categories td { width: fit-content; } .Categories input[type="text"] { min-width: fit-content; } /*Spending Budgets Page for tablet */ .Budget.tablet-device #Module-MJP779T .dollar::before { top: 20px; left: 10px; } /****************************************** MOVE DOLLAR VALUE CLOSER TO DOLLAR SIGN ON BUDGET PAGE ******************************************/ .Budget input.input_money { padding-left: 1.2rem !important; } /* Padding for Transaction Details modals */ .FinancesOverview .ui-dialog.no-close { padding: 0 15px; } /* Stop Payment ==================================================== */ /*======= css/PageFixes/_stop-payment.css */ body.StopPaymentHistory.mobile-device ul[id$="_lvStopPayments"] li { padding: 5px 10px; } body.StopPaymentHistory.mobile-device ul[id$="_lvStopPayments"] li:nth-child(even) { background: #e9e9e9 !important; } body.StopPaymentHistory.mobile-device ul[id$="_lvStopPayments"] li div.item_details p { margin-bottom: 0.5em; } body.StopPaymentHistory.mobile-device ul[id$="_lvStopPayments"] li div.item_details p + p { margin-top: 0.2em; } body.StopPaymentHistory.mobile-device ul[id$="_lvStopPayments"] li:not(:last-child) { border-bottom: 1px solid #58595b; } /* center link and move it up */ @media screen and (max-width: 1138px) { .StopPayments ul.history-link { text-align: center; } .phone-device.StopPayments ul.history-link { position: relative; top: -25px; } } /* Remove hard-coded black font */ [id*=lblStopPaymentType] { color: #000000; top: -2px; position: relative; } /* UXPIPE-71 */ .stop-payment-account:before { content: "* "; } /* Adjusts spacing on form */ .StopPayments div[id*="mvState_CheckAmountRegion"], .StopPayments div[id*="RangeSelectionSection"], .StopPayments span[id*="mvState_range"] div.input-field, .StopPayments label[id*="lblReason"] { margin-top: 10px; } /* Fixes alignment of data on results/confirmation page */ .StopPayments th~td { vertical-align: middle !important; } /****************************************** MOVES BUTTONS DOWN ON MOBILE ******************************************/ .mobile-device.StopPayments p[id*="SubmitButtons"] { margin-top: 20px !important; } /* Fast Balances Setup in Profile Page ==================================================== */ /* Profile Fast Balances Page Checkbox fix */ td.fb-account-checkbox { width: 70px !important; text-align: center; } .FastBalances td.fb-account-checkbox ~ td { padding-left: 5px; vertical-align: middle; } .table_data .table_header th { color: #4c4d4f; } table[id*="grdAccountsList"].table_data.auto_width .table_header th:first-child { text-align: right; } .native-app.FastBalances p[id*=_LC_SubmitButtons] { margin-top: 20px; } .native-app.FastBalances label[for*=_txtDeviceName] { margin-bottom: 8px; } .FastBalances label { display: inline; } /* Disclosures and T&C Pages ==================================================== */ /* hide the hamburger menu on these pages */ form[action*="MobileDisclosure"] .hamburger-menu, form[action*="PasswordChangeRequired"] .hamburger-menu, .mobile-device.PrivacyPolicy .hamburger-menu, .mobile-device.Disclaimer .hamburger-menu, .mobile-device.RegistrationDisclosure .hamburger-menu, .mobile-device.TermsAndConditions .hamburger-menu { display: none; } /* enable the buttons to have the required height they need */ form[action*="MobileDisclosure"] input[id*=btnAgree], form[action*="MobileDisclosure"] input[id*=btnDisagree] { height: auto; } .phone-device.MobileDisclosure .submit_buttons { margin-left: 5px; } /* Use this only if your header is really close to the mobile header bar. There should be some space above the Page title */ /*form[action*="MobileDisclosure"] .module-single > h2:not(.thumbnail):not(.module_header):first-child { padding-top: 25px; }*/ /*Using this section requires you wrap your disclosure content in a
*/ div.disclosures-and-terms { max-height: 55vh; overflow-y: scroll; overflow-x: hidden; max-width: 92vw; border: 1px solid #efefef; border-radius: 4px; white-space: wrap; padding: 10px; margin-bottom: 20px; /* The next 3 lines hopefully fix the "vanishing text" when scrolling too fast in mobile */ min-height: 55vh; height: auto; -webkit-transform: translate3d(0, 0, 0); } div.disclosures-and-terms::-webkit-scrollbar-thumb { -webkit-border-radius: 10px !important; border-radius: 10px !important; background: #0f4b8f !important; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; } div.disclosures-and-terms::-webkit-scrollbar-thumb:window-inactive { background: #0f4b8f !important; } /* !important is needed sometimes */ div.disclosures-and-terms::-webkit-scrollbar { width: 12px !important; } /* Track */ div.disclosures-and-terms::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important; -webkit-border-radius: 10px !important; border-radius: 10px !important; } /* Handle */ div.disclosures-and-terms::-webkit-scrollbar-thumb { -webkit-border-radius: 10px !important; border-radius: 10px !important; background: #0f4b8f !important; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; } div.disclosures-and-terms::-webkit-scrollbar-thumb:window-inactive { background: #0f4b8f !important; } div.disclosures-and-terms .indent-list { padding-left: 20px; } .phone-device .footnotes { margin: 10px; } /* Hides menu on Mobile Disclosure on iPad Pro */ form[action*="MobileDisclosure"] .page-primary-nav .primary-nav { display: none; } /* Report Pages ==================================================== */ /****************************************** MOVES "SCHEDULE" BUTTON ON REPORT DEFINITION PAGE ******************************************/ input[id*="MJQVBNZ"][id*="btnSchedule"] { left: 20px; top: -18px; position: relative; } /****************************************** MOVES HOURS FIELD NEXT TO START DATE ******************************************/ input[id*="MJQVBNZ"][id*="txtStartTime"] { top: 5px; left: 10px; position: relative; } /****************************************** MOVES END DATE FIELD ******************************************/ [id*="MJQVBNZ"][id*="dateRangeControl_EndDate"], [id*="MJQVBNZ"][id*="dateRangeControl"] > span:nth-child(6){ left: 7px; position: relative; } /****************************************** REPORT DEFINITION FORM FIXES TO DELETE AN EXTRA COLUMN ******************************************/ .ReportDefinition td.hiddenColumn { display: none; } /* Checkfree Payments ==================================================== */ /* Spire/Pages/_PaymentsRXP.css */ .PaymentsRXP input[type=submit] { margin: 0 0 20px 20px !important; } .PaymentsRXP label[id*=MN6R100][id$=label0] { margin-left: 18px; margin-right: 18px; } .PaymentsRXP div.inline-select-profile { background: #ffffff; } /* Wires ==================================================== */ /* Spire/Pages/_wires.css */ .tablet-device.Single img.ui-datepicker-trigger[src*="Resource.axd"] { margin-right: -36px; } /* Fix Multiple Wires page on phones - needed because there are no "narrow-screen-only narrow-column" classes on the tag */ .phone-device.Multiple td:not(.wide-screen-only) { width: 100%; } body:not([class*="v-2020"]).phone-device.Multiple .dollar::before { top: 32px; left: 95px; } body:not([class*="v-2020"]).phone-device.Multiple .dollar { margin: 10px 0; left: -14px; } body[class*="v-2020"].phone-device.Multiple .dollar { margin: 10px 0; left:0; } body[class*="v-2020"].phone-device.Multiple .dollar::before { left: 12px; } .phone-device.Multiple .multiwire-template-header { font-size: 1.7rem; } .phone-device.Multiple .narrow-screen-only { margin-bottom: 10px; } /****************************************** ALIGNS DATE PICKER ON "ONE TIME" WIRES PAGE ******************************************/ .OneTime img.ui-datepicker-trigger[src*="Resource.axd"] { padding: 0px; padding-left: 31px; margin-top: 0px; } /****************************************** ALIGNS DATE PICKER ON "ACTIVITY" WIRES PAGE ******************************************/ .phone-device input[id*="M9TYLKM"][id*="drDateRange_StartDate"], .phone-device input[id*="M9TYLKM"][id*="drDateRange_EndDate"] { min-width: 190px; max-width: 190px; } /****************************************** ALIGNS "FORMAT" FIELDSET ON "ACTIVITY" WIRES PAGE ******************************************/ fieldset[id*="MFJ1D8G"][id*="grpAddress_Format"] { margin-top: 10px; } /****************************************** TABLET ALIGNMENT FOR WIRES/PAYESS PAGE ******************************************/ /* TCBPS-380 Tablet Alignment for Wires/Payees */ .tablet-device th.long_text.wide-screen-only, .tablet-device td.long_text.wide-screen-only { padding-left: 1.5rem; } .tablet-device.Activity td.wide-screen-only { padding-left: 1.5rem !important; padding-right: 1.5rem !important;; } /****************************************** PHONE-DEVICE DROPDOWN WIDTHS FOR WIRES/ACTIVITY PAGE ******************************************/ .phone-device ul[role="listbox"][id$=ddlWireStatus-menu] { left:-20px; } .phone-device .ui-selectmenu-menu ul[id$=drDateRange_DateRange-menu] { max-width: 160px; min-width: 160px; } /* SEATTLEPS-162 - Business-Wires-Close button is misaligned on View Wires Transfer Details pop up window */ .Activity.desktop-device .module-single .submit_buttons{ padding-left: 2% !important; width: auto; } /* Prevent modal buttons from being 100% width of phone screen */ @media (max-width: 700px) { .phone-device .ui-dialog-content.ui-widget-content .default-dialog.window .module-single .submit_buttons { width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; } } /* Fixes for Internet Explorer 11 Glitches ==================================================== */ /* IE11 ==================================================== */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { div[id*=chkRememberMe] { margin-top: 8px; } } /****************************************** REMOVES AUTOMATIC PHONE ICON FROM IE BROWSERS ******************************************/ .ie11 img[title*="Call"] { display: none !important; } /****************************************** FIXES THE UPDATE BUTTON ON EMAIL FOR IE ******************************************/ .ChangeEmail.ie11 input[type="submit"] { margin-top: 17px !important; } /****************************************** FIXES THE SUBMIT BUTTON ALIGNMENT ON BUDGET FOR IE ******************************************/ .Budget.ie11 .submit_buttons { justify-content: flex-start; } /****************************************** FIXES UPLOAD BUTTON FOR IE ******************************************/ .MessageDetail.ie11 .pushdown + label strong { display: block; padding-top: 10px; min-height: 35px; } /****************************************** IE11 FIXES FOR "PROMOTION DETAIL" PAGE AND FILE CHOOSER ******************************************/ .ie11 .pushdown+label strong { padding: 16px 32px 0px 11px; width: 190px !important; min-height: 37px !important; } .ie11 input[id*="MBV96BP"][id*="btnAddCriteria"] { width: auto !important; } .ie11 [id*="MBV96BP"][id*="btnSave"], .ie11 [id*="MBV96BP"][id*="btnPreview"], .ie11 [id*="MBV96BP"][id*="btnDeletePromotion"] { display: inline !important; } /****************************************** FOOTER CENTER FOR IE11 ******************************************/ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .page-footer-container.page-content-container { display: block; } } /****************************************** HACK FOR IE11 TO MAKE ALIGNMENT CENTER WORK WITH MIN-HEIGHT ******************************************/ .ie11 .module-single .module-title::after { content:''; min-height: inherit; font-size: 0; display: block; } /****************************************** SHOWS CARD VALET IN IE11 ******************************************/ .wizard-step-content { flex: none; } /******************** MESSAGE BODY PADDING NEEDED *********************/ .Messages.ie11 .module-single > h2 .h2-content { padding-right: 3rem; } /****************************************** MOVES MINOR ALIGNMENT ISSUES ******************************************/ .MessageCenter.ie11 [id*="GridActions"] div.selectmenu-wrapper .old-selectmenu, .MessageCenter.ie11 [id*="GridActions"] div.selectmenu-wrapper .new-selectmenu { margin-top: 18px !important; } /****************************************** STOPS THE PAGE SCROLL WHEN PAGE IS TOO BIG ******************************************/ .LoggedOut.ie11.pre-signin, .AdminHome.ie11.pre-signin, .SignIn.ie11.pre-signin { overflow-y: hidden !important; overflow: hidden !important; -ms-overflow-y: hidden !important; } /****************************************** DATE PICKER ICON ALIGNED IN IE 11 ******************************************/ body[class*=ransfer].ie11 span.icon-date { top: .75rem; } .AchTransferHistory.ie11 span.icon-date { top: auto !important; } /****************************************** ALIGNMENT FIXES FOR "EDIT SECURE FORM" PAGE ******************************************/ /* MOVE ADD BUTTON ON "EDIT" PAGE NEXT TO FIELDS/CONTROLS */ .EditSecureForm.ie11 input[id*="MNBPEW"][id*="btnAddField"] { left: 366px; top: -18px; position: relative; } /* MOVE "SUBMIT BUTTONS" BLOCK ON ADD NEW PAGE */ .EditSecureForm.ie11 [id*="MNBPEW"][id*="pnlFieldsPanel"] > p > div > div.selectmenu-container { left: -140px; position: relative; } /* MOVE ADD BUTTON ON "EDIT" PAGE NEXT TO FIELDS/CONTROLS */ .EditSecureForm.ie11 span[id*="MNBPEW"][id*="lblAddNewFieldLabel"] { left: -487px; top: -22px; position: relative; } /****************************************** MOVES THE SPACING OF THE FORM IN CASE A RIGHT COLUMN IS FORCED TO APPEAR ******************************************/ .Categories.ie11 input[type="text"] { width: 200px !important; min-width: 200px !important; } .Categories.ie11 td { width: 200px !important; } /****************************************** REPAIRS HOVER COLORS ON MAIN NAVIGATION ******************************************/ .ie11 ul.vertical.menu-items li[class*='menu-tree-item'] .icon-text:hover, .ie11 ul.horizontal.menu-items li[class*='menu-tree-item'] .icon-text:hover { color: #0f4b8f !important; } /****************************************** REPAIRS HOVER COLORS ON SUB NAVIGATION ******************************************/ .ie11 ul.vertical.menu-items li[class*='menu-tree-item2'] .icon-text:hover, .ie11 ul.horizontal.menu-items li[class*='menu-tree-item2'] .icon-text:hover { color: #ffffff !important; } /* IE11 icons wrap fix */ .desktop-device.ActivitySummaryReport.ie11 table th.th-link { padding: 1.5rem 0 !important; } /****************************************** POSITIONS CLOSE ICON CORRECTLY ON MODALS ******************************************/ .ie11 .ui-dialog .ui-dialog-titlebar-close { padding: 10px !important; } .ie11 .ui-dialog .ui-dialog-titlebar-close:hover, .ie11 .ui-dialog .ui-dialog-titlebar-close:focus { padding: 10px !important; top: -3px; } /****************************************** FIX ALIGNMENT OF ICONS IN TOP NAVIGATION BAR ******************************************/ .ie11 .unreadMessages { display: flex; } .ie11 ul.top-nav-right a:before, .ie11 .unreadMessages::before { position: relative; top: -2px; } /******************************************* FIX ALIGNMENT OF DATEPICKER HEADER *******************************************/ .ie11 .ui-datepicker th { padding-top: 5px; } /* Fix for User Details screen - table is too wide */ .ie11.UserDetails .table_data td input[type="text"] { max-width: 210px; } /************************************************************************************************************************** *************************************************** 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. */ /*REMOVE MOBILE MENU ICONS */ .slider-menu-link-item .icon::before, .slider-menu .nav-icon::before { display: none; } .Budget .budget_management_table_footer > .pfm_data.dollar::before{ display:none; } .Budget .withinLimitBar,.Budget .noOverflowBar,.Budget .fullbgBar,.Budget .bgBar { height: 18px;!important } .MobileAccountsSummary span.money.balance.account { font-size: 2rem!important; font-weight: bold; } .kilimanjaro-label-value-list>div>span:nth-child(2) { font-weight: bold!important; } .kilimanjaro-label-value-list>div>span{ font-weight: 400!important; } .kilimanjaro-module .kilimanjaro-account input[type="button"].kilimanjaro-back-button{ background: url(/2088/App_Themes/Theme4/images/svg/caret-left.svg) no-repeat!important; } .phone-device.MobileAccountsSummary .money.transaction{ font-weight: bold!important; } .TermsAndConditions div[id*='_MRFVBVZ_'] { padding: 20px!important; } #M_layout_content_PCDZ_M6EHF8L_ctl00_DestinationAddress-mppdiv { margin-left: 6px!important; } .ChangeAddressPhoneNumber input[type="text"]:not(.laguna-field-money){ text-transform: uppercase!important; } .ExternalAccounts div.module-container.mainmodule { padding: 1rem 7px!important; } table.table_data .table_header > th.th-link > a { color: #000000 !important; } .page-footer-container.page-content-container .footer { display: flex; flex-direction: row; } .submit_buttons input[type]:active, input[type="submit"]:active, .submit_buttons input[type]:focus, input[type="submit"]:focus { opacity: .5!important; } .submit_buttons input[type][disabled]{ background-color: #76787A !important; color: #ffffff !important; } .close-slider-menu-button::before { color: #CF202F; -webkit-text-stroke-width: 0px!important; } .portalmenutree-submenu-overlay ul.menu-tree-item1 .hasSubMenu > a.caret-up::after, ul.use-overlays.menu-tree-item1 .hasSubMenu > a.caret-up::after, .portalmenutree-submenu-overlay ul.menu-tree-item1 .hasSubMenu > a.caret-left::after, ul.use-overlays.menu-tree-item1 .hasSubMenu > a.caret-left::after { transform: rotate(90deg); color: #0F4B8F !important; -webkit-text-fill-color: #0F4B8F !important; } .portalmenutree-submenu-overlay ul.menu-tree-item1 .hasSubMenu > a::after, ul.use-overlays.menu-tree-item1 .hasSubMenu > a::after { -webkit-text-stroke-width: 1px !important; } ul.use-overlays.menu-tree-item1 .hasSubMenu > a.caret-up .icon-text{ -webkit-text-fill-color: #0F4B8F; } .slider-menu ul.menu-tree-item2 .menu-item a:hover, .slider-menu ul.menu-tree-item2 .menu-item a:focus { background: #0F4B8F; } .slider-menu ul.menu-tree-item2 .menu-item a:hover .icon-text{ color: #ffffff; -webkit-text-fill-color: #ffffff; } .slider-menu-help-link.modal_page_help_link{ display: none; } .slider-menu .menu-items > li > a { padding: 1.5rem 2rem!important; } .slider-profile-name { display:none !important; } .AccountsSummary #left-fixedtop{ margin-top:44px !important; } .desktop-device.Categories .pfm_info_panel{padding-left: 37px !important;}​​​​​​ .mobile-device.ChangeAddressPhoneNumber .submit_buttons{ margin-top: 31px !important;} .mobile-device.ChangeAddressPhoneNumber input[id*="webInputForm_pncWork_3"]{ margin-left:-14px !important;} .ManageAlerts span.dollar::before { left: 8px !important; top: 20px !important;} .mobile-device.MakeTransfer div[id*="grpEditor_txtAmount_C"] > label[for*="_grpEditor_txtAmount"]{ margin-right:2.0rem !important;} .mobile-device.ChangeAddressPhoneNumber input[type="submit"].button{ margin-top: 15px !important; margin-left: 0px !important; } ul.menu-tree-item1 .menu-items .icon-text { letter-spacing: 1.5px!important; font-size: 14px !important; } .page-primary-nav .primary-nav .menu-tree-item1 > a .icon-text { font-size: 14px; letter-spacing: 1.17px; } .ForgotPassword [id*="_panelValidation"] > i { display:none; } .slider-menu .menu-items .icon-text, .slider-menu .menu-items .icon-text.selected { font-weight: 600!important; } .menuLevel1 > .hide-menu-item > a#M_ctl10_fff15017-6b2f-47d5-9c7f-e9d3efdf6ace_a{ display:none; } .desktop-device.AccountsSummary .left-col .selectmenu-wrapper, .left-col .selectmenu-container { min-width: 100% !important; max-width: 100% !important; } .desktop-device.AccountsSummary div[id*=grpEditor_txtAmount_C] > .dollar::before { left:19px!important; } .mobile-device .slider-menu-container > #M_ctl10_div { background: #ffffff !important; } .ForgotPassword table tbody tr td:not(:last-child) { padding: 0rem!important; } .SubmitSecureForm td[colspan]:not([colspan="1"]) { text-align: left; } #M_sliderMenuATMLnk { font-weight: 600; text-transform: uppercase; } #M_MessageQueue .message_queue > p { font-size:20px; } div[id*=_dlgIdentityVerification] .submit_buttons input[name*="btnCancelOob"]{ margin-left: 25px!important; color: #ffffff !important; background: #0f4b8f!important; } div[id*=_dlgIdentityVerification] .submit_buttons input[name*="btnCancelOob"]:hover{ color: #ffffff !important; } div[id*=_dlgIdentityVerification] { overflow: hidden!important ; } div[id*=_dlgIdentityVerification] .submit_buttons > input[name*="btnCancelOob"]{ color: #ffffff !important; background: #0f4b8f!important; } div[id*=_dlgIdentityVerification] .submit_buttons > input[name*="btnCancelOob"]:hover{ color: #ffffff !important; background: #002E62!important; } div[id*=_dlgIdentityVerification] { overflow: hidden!important; } .ManageTransfers div[id*=_grpEditor_calStartDate_C] > span{ display: block!important; } .ManageTransfers span[id*=_rofNonBusinessDayMessage], span[id*=_rofPastAchCutoffTimeMessage]{ color: black!important; margin-left: -14.7rem!important; } .SubmitSecureForm div.secure_form h2 { font-family: 'Source Sans 3', 'Open Sans', sans-serif!important; text-transform: uppercase; color: #000000; font-weight: 600!important; font-size: 25px!important; } .Messages .table_data td { padding: 1rem!important; } .disclosure h1{ visibility:visible!important; } .desktop-device.ManageTransfers span[id$="txtAmountOption0_C"] > .dollar::before, .desktop-device.ManageTransfers span[id$="txtAmountOption6_C"] > .dollar::before, .desktop-device.ManageTransfers span[id$="txtAmountOption7_C"] > .dollar::before { left: 40px!important; } .desktop-device.ManageTransfers input[id$="txtAmountOption3"]{ padding-left: 34px!important; } .ManageTransfers span[id*=_grpAmountOptions_txtAmountOption6_C]{ margin-left: 32px } /*.ManageTransfers span[id*=_grpAmountOptions_txtAmountOption7_C] { margin-left: 17px; }*/ .ManageTransfers span[id*=_grpAmountOptions_txtAmountOption0_C]{ margin-left: -10px } .phone-device.MakeTransfer input[id$="txtAmountOption3"]{ margin-top: -23px!important; margin-left: 6px!important; min-width: 125px!important; max-width: 125px!important; } .phone-device.MakeTransfer span.transfer-amount { left: -30px !important; top: -27px !important; } .phone-device.MakeTransfer span[id$="txtAmountOption0_C"] > .dollar:before, .phone-device.MakeTransfer span[id$="txtAmountOption6_C"] > .dollar:before { left:22px; top: -5px!important; } .desktop-device.Challenge .submit_buttons { margin-left:25px!important; } .phone-device.ManageAlerts [id*="dtpOnDateTime_dateInput_wrapper"]{ min-width:45vw !important; } .TermsAndConditions div[id*='_MRFVBVZ_'] { padding: 20px!important; } ul.menu-tree-item1 > .li-menu-open > .menu-items::before { display:none; } ul.horizontal .menu-tree-item1 .menu-items { top: 41px; } .phone-device.CreditScore .module-single > div.module-container.mainmodule > div{ height:700px!important; } .MessageDetail div[id*="pnlNewMessageSection"] label[id*=ctl00_lblAccountSelection]:before{ content: " "!important; } div.slider-menu-customize-modules.slider-menu-link-item { display:none; } div.slider-menu-container > .portalmenutree{ background: #ffffff; } .AccountActivity table[id*=_ctl00_transactionsGrid] > tbody > tr > td:nth-child(3) { text-align: center; } #M_Menu_c0328a01-ace9-450a-bf20-0f38e0479ef7_ul{ margin-left:25px; } .phone-device.ManageAlerts [id*=_ctl00_notificationEditor_Panel1] > table > tbody > tr.table_header > td.td-link { display: block; } .slider-menu ul.menu-tree-item2.menu-items .icon-text { font-weight: 400!important; } .MobileAccountsSummary span.item-description{ width:50% } #M_layout_content_PCDZ_MBR2NU9_ctl00_notificationEditor_dtpOnDateTime_wrapper { display: inline-flex!important; } .ios.ManageAlerts .RadPicker_Default .rcCalPopup{ top:0px !important; } .ios.MobileAccountsSummary span.money { text-align: -webkit-right!important; } .tablet-device.ManageAlerts .submit_buttons { padding: 5px 0px 0px 0px !important; } .tablet-device.ChangeEmail .submit_buttons { padding: 10px 0px 0px 0px !important; } /****************************************** FIX FOR BUTTONS ON IDENTITY VERIFICATION ******************************************/ .desktop-device.ForgotPassword p[id*="M45CTE6"][id*="SubmitButtons"] { margin-left: 20px; } div.module-container.mainmodule > div.fiserv-ps-fce-advisoryTile > div > div.image-container > div.advisory-tile{ margin-left: -3px!important; } .fiserv-ps-fce-advisoryTile .advisory-tile.info .name { margin-bottom: 5px!important; line-height: 25px!important; } .module-single.m-advisory-tile > div.module-container.mainmodule{ padding-bottom: 70px!important; } .fiserv-ps-fce-advisoryTile .tile-container { display: flex!important; } .fiserv-ps-fce-advisoryTile .advisory-tile.info .contact p { margin-bottom: 5px!important; } @media(max-width:374px){ .phone-device.MakeTransfer input[type="text"],.phone-device.MakeTransfer input[type="number"]{ min-width: 275px!important; } @media (max-width: 650px) { .phone-device.MakeTransfer input[type="text"],.phone-device.MakeTransfer input[type="number"]{ min-width: 350px!important; max-width: calc(100vw - 40px) !important; } .phone-device.MakeTransfer span.transfer-amount { position: absolute!important; } .phone-device.MakeTransfer span.transfer-amount { left: -21px !important; } } .phone-device.MakeTransfer span.transfer-amount { position: absolute!important; left:-10px!important; } .phone-device.MakeTransfer .dollar:before { left: 26px!important; top: -4px!important; } .phone-device.MakeTransfer .dollar { left: 0px !important; } .phone-device.MakeTransfer span[id$="txtAmountOption0_C"] > .dollar:before, .phone-device.MakeTransfer span[id$="txtAmountOption6_C"] > .dollar:before, .phone-device.MakeTransfer span[id$="txtAmountOption7_C"] > .dollar:before { left: 34px!important; } .phone-device.MakeTransfer span[id*=_rofNonBusinessDayMessage], .phone-device.MakeTransfer span[id*=_rofPastAchCutoffTimeMessage] { margin-left: 0rem !important; } .phone-device.MakeTransfer span[id*=_rofNonBusinessDayMessage] { padding: inherit; } .phone-device.MakeTransfer .form_assistance { padding: 3px 0 0 0px !important; } .phone-device.MakeTransfer span.has_callout input[type=text] { width: 100%; } .phone-device.MakeTransfer div[id*='calStartDate'], .phone-device.MakeTransfer div[id*='calStartDate'] span { display: grid; } .phone-device.MakeTransfer .selectmenu-wrapper, .phone-device.MakeTransfer .selectmenu-container { min-width: calc(100vw - 40px) !important; max-width: 100% !important; width: 100% !important; } .desktop-device.ForgotPassword p[id*="M45CTE6"][id*="SubmitButtons"] { margin-left: 20px; } .desktop-device.ForgotPassword input[id*="M45CTE6"][id*="btnCancelOob"] { margin-left: 0px!important; } .phone-device.ForgotPassword input[id*="M45CTE6"][id*="btnCancelOob"] { margin-left: 0px!important; } .phone-device.Register p[id*="MOXARGR"][id*="SubmitButtons"] { left: 0px; } .desktop-device.Challenge input[id*="MHXC8H1"][id*="btnCancelOob"] { margin-left: 0px!important; } .AccountActivity table.table_data .table_header > th{ font-weight: normal !Important; } .AccountActivity table.table_data .table_header > td { font-weight: bold; min-width:110px; } .creditCardLink{ display: table-row !important; } .AccountActivity table.table_data .table_header > td a{ font-weight: normal; } .transactions-area .account-nickname:not(.editable){ color:black !Important; } .AccountActivity div[id*="Module-MKLLCE5"] table{ font-size:16px; } #M_layout_content_PCDZ_MDSUI6N_ctl00_webInputForm_LC_FooterZone { display: flex; } #M_layout_content_PCDZ_MDSUI6N_ctl00_webInputForm_lnkForgotPassword_C { flex: 1; } /* All ribbon items should be blue */ .global-quicklinks .ribbon-item::before { color: #0f4b8f; } /* Add Zelle Icon*/ .ribbon-item.global-zelle::before{ content: url(content.aspx?theme=Theme5&color1=$color1&color2=$color1&image=zelle.svg); vertical-align: middle; font-size: 24px } /* Fix for hide/reveal password icon */ span.password-visibility { position: absolute; top: 8px; right: -20px; } span.password-visibility input[type="checkbox"] + label:before { visibility: hidden; } .ModuleDefault.LoginModule div { position: relative; } .ModuleDefault.LoginModule br { display: none; } /* BUG 575318 - Android/iOS Formatting issue while testing Make a Transfer "Other Amount" */ .phone-device.MakeTransfer span[id*="txtAmountOption2"] .dollar:before { top: 20px !important; left: 20px !important; } .phone-device.MakeTransfer input[id$="txtAmountOption3"] { margin: initial !important; min-width: 335px !important; /* max-width: 360px !important; */ max-width: calc(100vw - 40px) !important; } .phone-device.MakeTransfer span[id*="txtAmountOption3"] .dollar:before { top: 20px !important; left: 20px !important; } /* IP27057256 - change is also in First Command theme CSS file */ .ManageTransfers span[id*=_grpAmountOptions_txtAmountOption7_C] { margin-left: 17px; }