@charset "UTF-8"; .clear { clear: both; } /* IE clearfix patch*/ .clearfix:after { content: "."; clear: both; visibility: hidden; height: 0; display: block; } .left { float: left; display: block; } .left.thirty { width: 30%; } .left.fifty { width: 50%; } @media all and (max-width: 767px) { .left.thirty { width: 40%; } } .right { float: right; display: block; } .right.thirty { width: 30%; } .right.fifty { width: 50%; } @media all and (max-width: 767px) { .right.thirty { width: 40%; } } .white { color: #fff; } .center { text-align: center; } .spacer { margin: 10px 0; } .btnGrp { margin: 10px 0; text-align: center; } .btnGrp button { width: auto; } .hide { display: none; } .show { display: block; } .accessAid { margin-left: -2000px; } .addOverFlow { overflow: auto; } .thirty { width: 30%; } .forty { width: 40%; } .fifty { width: 50%; } .sixty { width: 60%; } .seventy { width: 70%; } .seventySelectRight { padding-left: 15px; margin-top: 25px; width: 70%; } .left { float: left; } .right { float: right; } .equal { width: 49%; } .fullWidthSelect { margin-top: 15px; } .showHideFieldToggle { position: absolute; right: 13px; top: 13px; transition: transform 0.2s ease-in-out; cursor: pointer; z-index: 1900; } .hasError.showHideFieldToggle { transform: translate3d(-27px, 0px, 0); } :focus + .hasError.showHideFieldToggle { transform: translate3d(0, -50%, 0); } @media all and (max-width: 767px) { .thirty { width: 40%; } .seventy { width: 60%; } .seventySelectRight { width: 60%; } .forty { width: 50%; } .sixty { width: 50%; } } /** method responsible for loading the background image set in CSS it differentiated between x or 2x image **/ .splitFields.thirty { width: 30%; } .splitFields.fifty { width: 50%; } @media all and (max-width: 767px) { .splitFields.thirty { width: 40%; } } /* Author: Rupin Khandelwal Paypal sans font will be applied to all regions except few asian countries like China and Japan. NOTE:This file should be included in the base.dust and before base.css because fonts for other asian countries will fall back to the layout in the base.css. */ /*Paypal Sans Big*/ @font-face { font-family: "pp-sans-big-bold"; src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Bold.eot"); src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Bold.eot?#iefix") format("embedded-opentype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Bold.woff") format("woff"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/headlinedark/festivo1.ttf") format("truetype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Bold.svg") format("svg"); } @font-face { font-family: "pp-sans-big-light"; src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Light.eot"); src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Light.eot?#iefix") format("embedded-opentype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Light.woff") format("woff"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/headlinedark/festivo1.ttf") format("truetype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Light.svg") format("svg"); } @font-face { font-family: "pp-sans-big-medium"; src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Medium.eot"); src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Medium.eot?#iefix") format("embedded-opentype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Medium.woff") format("woff"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/headlinedark/festivo1.ttf") format("truetype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Medium.svg") format("svg"); } @font-face { font-family: "pp-sans-big-regular"; src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Regular.eot"); src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Regular.eot?#iefix") format("embedded-opentype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Regular.woff") format("woff"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/headlinedark/festivo1.ttf") format("truetype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Regular.svg") format("svg"); } @font-face { font-family: "pp-sans-big-thin"; src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Thin.eot"); src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Thin.eot?#iefix") format("embedded-opentype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Thin.woff") format("woff"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/headlinedark/festivo1.ttf") format("truetype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansBig-Thin.svg") format("svg"); } /*Paypal Sans Small-------------------------------------*/ @font-face { font-family: "pp-sans-small-bold"; src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Bold.eot"); src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Bold?#iefix") format("embedded-opentype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Bold.woff") format("woff"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/headlinedark/festivo1.ttf") format("truetype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Bold.svg") format("svg"); } @font-face { font-family: "pp-sans-small-light"; src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Light.eot"); src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Light.eot?#iefix") format("embedded-opentype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Light.woff") format("woff"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/headlinedark/festivo1.ttf") format("truetype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Light.svg") format("svg"); } @font-face { font-family: "pp-sans-small-medium"; src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Medium.eot"); src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Medium.eot?#iefix") format("embedded-opentype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Medium.woff") format("woff"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/headlinedark/festivo1.ttf") format("truetype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Medium.svg") format("svg"); } @font-face { font-family: "pp-sans-small-regular"; src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Regular.eot"); src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Regular.eot?#iefix") format("embedded-opentype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Regular.woff") format("woff"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/headlinedark/festivo1.ttf") format("truetype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Regular.svg") format("svg"); } @font-face { font-family: "pp-sans-small-thin"; src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Thin.eot"); src: url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Thin.eot?#iefix") format("embedded-opentype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Thin.woff") format("woff"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/headlinedark/festivo1.ttf") format("truetype"), url("https://www.paypalobjects.com/webstatic/mktg/2014design/font/PP-Sans/PayPalSansSmall-Thin.svg") format("svg"); } /*------------------------*/ .pp-sans-big-bold { font-family: "pp-sans-big-bold", Helvetica Neue, Arial, sans-serif; font-weight: normal; font-variant: normal; } .pp-sans-big-light { font-family: "pp-sans-big-light", Helvetica Neue, Arial, sans-serif; font-weight: normal; font-variant: normal; } .pp-sans-big-medium { font-family: "pp-sans-big-medium", Helvetica Neue, Arial, sans-serif; font-weight: normal; font-variant: normal; } .pp-sans-big-regular { font-family: "pp-sans-big-regular", Helvetica Neue, Arial, sans-serif; font-weight: normal; font-variant: normal; } /*SMALL-------*/ .pp-sans-small-bold { font-family: "pp-sans-small-bold", Helvetica Neue, Arial, sans-serif; font-weight: normal; font-variant: normal; } .pp-sans-small-light { font-family: "pp-sans-small-light", Helvetica Neue, Arial, sans-serif; font-weight: normal; font-variant: normal; } .pp-sans-small-medium { font-family: "pp-sans-small-medium", Helvetica Neue, Arial, sans-serif; font-weight: normal; font-variant: normal; } .pp-sans-small-regular { font-family: "pp-sans-small-regular", Helvetica Neue, Arial, sans-serif; font-weight: normal; font-variant: normal; } .pp-sans-small-thin { font-family: "pp-sans-small-thin", Helvetica Neue, Arial, sans-serif; font-weight: normal; font-variant: normal; } /* Dharma Gothic Fonts */ /** * @license * MyFonts Webfont Build ID 3112442, 2015-10-22T13:07:46-0400 * * The fonts listed in this notice are subject to the End User License * Agreement(s) entered into by the website owner. All other parties are * explicitly restricted from using the Licensed Webfonts(s). */ @font-face { font-family: 'DharmaGothicE-Regular'; src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_0_0.eot'); src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_0_0.eot?#iefix') format('embedded-opentype'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_0_0.woff') format('woff'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_0_0.ttf') format('truetype'); } @font-face { font-family: 'DharmaGothicE-ExLightItalic'; src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_1_0.eot'); src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_1_0.eot?#iefix') format('embedded-opentype'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_1_0.woff') format('woff'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_1_0.ttf') format('truetype'); } @font-face { font-family: 'DharmaGothicE-Heavy'; src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_2_0.eot'); src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_2_0.eot?#iefix') format('embedded-opentype'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_2_0.woff') format('woff'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_2_0.ttf') format('truetype'); } @font-face { font-family: 'DharmaGothicE-Thin'; src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_3_0.eot'); src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_3_0.eot?#iefix') format('embedded-opentype'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_3_0.woff') format('woff'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_3_0.ttf') format('truetype'); } @font-face { font-family: 'DharmaGothicE-ExBoldItalic'; src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_4_0.eot'); src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_4_0.eot?#iefix') format('embedded-opentype'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_4_0.woff') format('woff'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_4_0.ttf') format('truetype'); } @font-face { font-family: 'DharmaGothicE-ThinItalic'; src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_5_0.eot'); src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_5_0.eot?#iefix') format('embedded-opentype'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_5_0.woff') format('woff'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_5_0.ttf') format('truetype'); } @font-face { font-family: 'DharmaGothicE-Bold'; src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_6_0.eot'); src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_6_0.eot?#iefix') format('embedded-opentype'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_6_0.woff') format('woff'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_6_0.ttf') format('truetype'); } @font-face { font-family: 'DharmaGothicE-RegularItalic'; src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_7_0.eot'); src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_7_0.eot?#iefix') format('embedded-opentype'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_7_0.woff') format('woff'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_7_0.ttf') format('truetype'); } @font-face { font-family: 'DharmaGothicE-ExLight'; src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_8_0.eot'); src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_8_0.eot?#iefix') format('embedded-opentype'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_8_0.woff') format('woff'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_8_0.ttf') format('truetype'); } @font-face { font-family: 'DharmaGothicE-LightItalic'; src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_9_0.eot'); src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_9_0.eot?#iefix') format('embedded-opentype'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_9_0.woff') format('woff'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_9_0.ttf') format('truetype'); } @font-face { font-family: 'DharmaGothicE-Light'; src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_A_0.eot'); src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_A_0.eot?#iefix') format('embedded-opentype'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_A_0.woff') format('woff'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_A_0.ttf') format('truetype'); } @font-face { font-family: 'DharmaGothicE-BoldItalic'; src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_B_0.eot'); src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_B_0.eot?#iefix') format('embedded-opentype'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_B_0.woff') format('woff'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_B_0.ttf') format('truetype'); } @font-face { font-family: 'DharmaGothicE-HeavyItalic'; src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_C_0.eot'); src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_C_0.eot?#iefix') format('embedded-opentype'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_C_0.woff') format('woff'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_C_0.ttf') format('truetype'); } @font-face { font-family: 'DharmaGothicE-ExBold'; src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_D_0.eot'); src: url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_D_0.eot?#iefix') format('embedded-opentype'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_D_0.woff') format('woff'), url('https://www.paypalobjects.com/webstatic/mktg/2014design/font/Dharma-Gothic-Expanded/webfonts/2F7DFA_D_0.ttf') format('truetype'); } @font-face { font-family: PayPal-Sans; font-style: normal; font-weight: 300; src: url('https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Light.eot'); /* IE9 Compat Modes */ src: url('https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Light.woff2') format('woff2'), /* Moderner Browsers */ url('https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Light.woff') format('woff'), /* Modern Browsers */ url('https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Light.svg#69ac2c9fc1e0803e59e06e93859bed03') format('svg'); /* Legacy iOS */ } @font-face { font-family: PayPal-Sans; font-style: normal; font-weight: 400; src: url('https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Regular.eot'); /* IE9 Compat Modes */ src: url('https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Regular.woff2') format('woff2'), /* Moderner Browsers */ url('https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Regular.woff') format('woff'), /* Modern Browsers */ url('https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Regular.svg#69ac2c9fc1e0803e59e06e93859bed03') format('svg'); /* Legacy iOS */ } @font-face { font-family: PayPal-Sans; font-style: normal; font-weight: 500; src: url('https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Medium.eot'); /* IE9 Compat Modes */ src: url('https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Medium.woff2') format('woff2'), /* Moderner Browsers */ url('https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Medium.woff') format('woff'), /* Modern Browsers */ url('https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Medium.svg#69ac2c9fc1e0803e59e06e93859bed03') format('svg'); /* Legacy iOS */ } @font-face { font-family: PayPal-Sans; font-style: normal; font-weight: 700; src: url('https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Bold.eot'); /* IE9 Compat Modes */ src: url('https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Bold.woff2') format('woff2'), /* Moderner Browsers */ url('https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Bold.woff') format('woff'), /* Modern Browsers */ url('https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Bold.svg#69ac2c9fc1e0803e59e06e93859bed03') format('svg'); /* Legacy iOS */ } /* ---------------------------------------------------------------------------------------- */ @font-face { font-family: PayPal-Sans-Big; font-style: normal; font-weight: 200; src: url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Thin.eot'); /* IE9 Compat Modes */ src: url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Thin.woff2') format('woff2'), /* Moderner Browsers */ url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Thin.woff') format('woff'), /* Modern Browsers */ url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Thin.svg#69ac2c9fc1e0803e59e06e93859bed03') format('svg'); /* Legacy iOS */ } @font-face { font-family: PayPal-Sans-Big; font-style: normal; font-weight: 300; src: url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Light.eot'); /* IE9 Compat Modes */ src: url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Light.woff2') format('woff2'), /* Moderner Browsers */ url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Light.woff') format('woff'), /* Modern Browsers */ url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Light.svg#69ac2c9fc1e0803e59e06e93859bed03') format('svg'); /* Legacy iOS */ } @font-face { font-family: PayPal-Sans-Big; font-style: normal; font-weight: 400; src: url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Regular.eot'); /* IE9 Compat Modes */ src: url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Regular.woff2') format('woff2'), /* Moderner Browsers */ url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Regular.woff') format('woff'), /* Modern Browsers */ url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Regular.svg#69ac2c9fc1e0803e59e06e93859bed03') format('svg'); /* Legacy iOS */ } @font-face { font-family: PayPal-Sans-Big; font-style: normal; font-weight: 500; src: url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Medium.eot'); /* IE9 Compat Modes */ src: url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Medium.woff2') format('woff2'), /* Moderner Browsers */ url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Medium.woff') format('woff'), /* Modern Browsers */ url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Medium.svg#69ac2c9fc1e0803e59e06e93859bed03') format('svg'); /* Legacy iOS */ } @font-face { font-family: PayPal-Sans-Big; font-style: normal; font-weight: 700; src: url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Bold.eot'); /* IE9 Compat Modes */ src: url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Bold.woff2') format('woff2'), /* Moderner Browsers */ url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Bold.woff') format('woff'), /* Modern Browsers */ url('https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Bold.svg#69ac2c9fc1e0803e59e06e93859bed03') format('svg'); /* Legacy iOS */ } @charset "UTF-8"; /*! vxpattern-lib-paypal | Version: 2.7.4 | Built from github.paypal.com/ConsumerWeb-UI/vxpattern-lib-paypal */ /** * DO NOT EDIT THIS FILE AS IT'S GENERATED CODE. * UED: cgrigson, adustin, nvandewater * UIE: jlowery * Note: If modifications are needed, don't modify this file! Either override or make a PR to: * https://github.paypal.com/jlowery/paypal-vxpattern-lib */ /* Icons */ /* Z-index list */ /* user for a bird's eye view of components based on z-axis */ /* for example, if you want to put a button in header, just assign z-index of that button to @zindexHeader */ /* these will overwrite the bootstrap pre defined variables */ /* TODO: check the clean the non-needed modal styles in bootstrap */ /* the same as bootstrap one, just overwrite */ /* Setting for Sidepanel */ /* This is not used by all side panels, only for the default one */ /* what about larger phones like gs3? what about phablets like the note? /* responsive breakpoints */ /* Navigation */ /* Spinner */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /* Setting these elements to height of 100% ensures that * .vx_foreground-container fully covers the whole viewport */ html, body { height: 100%; } /* This wraps the foreground or main part of the app. * It's purpose is to provide the "front" layer of the app and * allow the "back" layer to exist behind it. */ .vx_foreground-container { position: relative; min-height: 100%; width: 100%; margin: 0 auto; left: 0; right: 0; top: 0; z-index: 800; background: #f5f7fa; -webkit-transition: left 250ms, right 250ms; -o-transition: left 250ms, right 250ms; transition: left 250ms, right 250ms; } .vx_mainContent { max-width: 1024px; margin: 0 auto; padding: 72px 0 9rem; position: relative; } .vx_a11yText, .screenreader-only { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; } @media (max-width: 768px) { .vx_hidden-phone { display: none !important; } .vx_foreground-container { width: 100%; min-height: 100%; } .vx_mainContent { padding-top: 0; } } /** * DO NOT EDIT THIS FILE AS IT'S GENERATED CODE. * UED: cgrigson, adustin, nvandewater * UIE: jlowery * Note: If modifications are needed, don't modify this file! Either override or make a PR to: * https://github.paypal.com/jlowery/paypal-vxpattern-lib */ @keyframes vx_spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes vx_fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes vx_fade-out { from { opacity: 1; } to { opacity: 0; } } .vx_addFlowTransition { opacity: 1; -webkit-transition: opacity 0.25s; -moz-transition: opacity 0.25s; -ms-transition: opacity 0.25s; -o-transition: opacity 0.25s; transition: opacity 0.25s; } .vx_hasFadeTransition { opacity: 0; } .vx_invisiblyRender { position: fixed; z-index: -1000; } .vx_steppedFlow-container { display: block; position: relative; transition: height 0.2s; overflow-x: auto; } .vx_prepForAnimation { overflow-x: hidden; } .vx_steppedFlow-slides { position: relative; white-space: nowrap; font-size: 0; } .vx_prepToSlide { position: relative; transition: left 0.25s; } .vx_slide-right_start { left: 0; } .vx_slide-right_end { left: -100%; } .vx_slide-left_start { left: -100%; } .vx_slide-left_end { left: 0; } .vx_steppedFlow-slide { display: none; vertical-align: top; width: 100%; white-space: normal; font-size: 16px; } .vx_activeSlide { display: inline-block; } /** * @fileOverview Contains type treatment for PayPal's new VX Patterns * @name type-vxPtrn * @author jlowery * @notes The below styles are mobile first */ body { font-size: inherit !important; font-family: 'PayPal-Sans', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; } .vx_text-xl { font-size: 3.75rem; line-height: 1.1; font-weight: 300; text-transform: none; font-family: 'PayPal-Sans-Big', sans-serif; } h1, .vx_text-1 { font-size: 2.5rem; line-height: 1.2; font-weight: 300; text-transform: none; font-family: 'PayPal-Sans-Big', sans-serif; } h2, .vx_text-2 { font-size: 1.875rem; line-height: 1.4; font-weight: 300; text-transform: none; font-family: 'PayPal-Sans-Big', sans-serif; } h3, .vx_text-3 { font-size: 1.25rem; line-height: 1.5; font-weight: 400; text-transform: none; font-family: 'PayPal-Sans-Big', sans-serif; } .vx_text-3_lighter { font-size: 1.25rem; line-height: 1.5; font-weight: 300; text-transform: none; font-family: 'PayPal-Sans-Big', sans-serif; } h4, .vx_text-4 { font-size: 1.125rem; line-height: 1.33333; font-weight: 400; text-transform: none; font-family: 'PayPal-Sans', sans-serif; } h5, .vx_text-5 { font-size: 0.9375rem; line-height: 1.6; font-weight: 500; text-transform: none; font-family: 'PayPal-Sans', sans-serif; } .vx_text-5_lighter { font-size: 0.9375rem; line-height: 1.6; font-weight: 400; text-transform: none; font-family: 'PayPal-Sans', sans-serif; } h6, .vx_text-6 { font-size: 0.8125rem; line-height: 1.84615385; font-weight: 500; text-transform: none; font-family: 'PayPal-Sans', sans-serif; } .vx_text-6_lighter { font-size: 0.8125rem; line-height: 1.84615385; font-weight: 400; text-transform: none; font-family: 'PayPal-Sans', sans-serif; } .vx_text-body, p, li, dd, dt, label, input, textarea, pre, code { font-size: 0.9375rem; line-height: 1.6; font-weight: 400; text-transform: none; font-family: 'PayPal-Sans', sans-serif; } .vx_text-body_secondary { font-size: 0.8125rem; line-height: 1.84615385; font-weight: 400; text-transform: none; font-family: 'PayPal-Sans', sans-serif; } .vx_text-legal { font-size: 0.8125rem; line-height: 1.38461538; font-weight: 400; text-transform: none; font-family: 'PayPal-Sans', sans-serif; color: #6c7378; } .vx_h1, .vx_h2, .vx_h3, .vx_h4 { -webkit-font-smoothing: antialiased; } .vx_h1 { font-size: 2.5rem; line-height: 1.2; font-weight: 300; text-transform: none; font-family: 'PayPal-Sans-Big', sans-serif; } .vx_h2 { /* Yes, the below H3 vars are intended * this is the mobile sizing, so it's this first. * Desktop is below. */ font-size: 1.25rem; line-height: 1.5; font-weight: 300; text-transform: none; font-family: 'PayPal-Sans-Big', sans-serif; /* Mobile First, aka Desktop Later */ } @media (min-width: 768px) { .vx_h2 { font-size: 1.875rem; line-height: 1.4; font-weight: 300; text-transform: none; font-family: 'PayPal-Sans-Big', sans-serif; } } .vx_h3 { font-size: 1.25rem; line-height: 1.5; font-weight: 400; text-transform: none; font-family: 'PayPal-Sans-Big', sans-serif; } .vx_h4 { font-size: 1.125rem; line-height: 1.33333; font-weight: 400; text-transform: none; font-family: 'PayPal-Sans', sans-serif; } .vx_h5 { font-size: 0.9375rem; line-height: 1.6; font-weight: 500; text-transform: none; font-family: 'PayPal-Sans', sans-serif; } .vx_h6 { font-size: 0.8125rem; line-height: 1.84615385; font-weight: 500; text-transform: none; font-family: 'PayPal-Sans', sans-serif; } .vx_h7 { font-size: 0.8125rem; line-height: 1.84615385; font-weight: 400; text-transform: none; font-family: 'PayPal-Sans', sans-serif; } .vx_base-text { font-size: 0.9375rem; line-height: 1.6; font-weight: 400; text-transform: none; font-family: 'PayPal-Sans', sans-serif; } .vx_small-text { font-size: 0.8125rem; line-height: 1.84615385; font-weight: 400; text-transform: none; font-family: 'PayPal-Sans', sans-serif; } .vx_legal-text { font-size: 0.8125rem; line-height: 1.38461538; font-weight: 400; text-transform: none; font-family: 'PayPal-Sans', sans-serif; color: #6c7378; } .vx_secondary-text { color: #9da3a6; } .vx_text-block { padding: 1.6em 1.6em 0.8em; } .vx_reverse-contrast { background: #2c2e2f; color: #ffffff; } .vx_reverse-contrast .vx_secondary-text { color: #cbd2d6; } .vx_reverse-contrast .small-text { font-weight: 500; } ul, ol { padding: 0; margin: 0 0 0.8rem 25px; } ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; } li { line-height: 1.6; } dl { margin-bottom: 1.6rem; } dt, dd { line-height: 1.6; } dt { font-weight: 500; } dd { margin-left: 0.8rem; } .vx_unstyled-list { list-style: none; padding: 0; } a, a:visited { color: #0070ba; text-decoration: none; font-weight: 500; font-family: 'PayPal-Sans', sans-serif; } a:active, a:focus, a:hover { color: #005ea6; text-decoration: underline; } p > a, li > a { font-weight: 500; font-family: 'PayPal-Sans', sans-serif; } @font-face { font-family: 'paypal-vx-icons'; src: url('https://www.paypalobjects.com/ui-web/vx-icons/2-0-1/PayPalVXIcons-Regular.eot'); src: url('https://www.paypalobjects.com/ui-web/vx-icons/2-0-1/PayPalVXIcons-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://www.paypalobjects.com/ui-web/vx-icons/2-0-1/PayPalVXIcons-Regular.woff') format('woff'), /* Modern Browsers */ url('https://www.paypalobjects.com/ui-web/vx-icons/2-0-1/PayPalVXIcons-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://www.paypalobjects.com/ui-web/vx-icons/2-0-1/PayPalVXIcons-Regular.svg#69ac2c9fc1e0803e59e06e93859bed03') format('svg'); font-style: normal; font-weight: 400; /* IE9 Compat Modes */ /* Legacy iOS */ } .vx_alert, .vx_alert_inline { display: table; width: 100%; margin-bottom: 5px; padding: 1rem; border: 1px solid #9da3a6; border-left-width: 0; border-right-width: 0; color: #9da3a6; } .vx_alert_inline { border: none; } .vx_alert-help:before, .vx_alert-success:before, .vx_alert-warning:before, .vx_alert-critical:before { display: inline; width: 3em; padding-right: 12px; font-size: 1.58rem; line-height: 0; font-family: 'paypal-vx-icons'; } .vx_alert-help { border-color: #009cde; color: #009cde; } .vx_alert-help:before { content: "\2139"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vx_alert-success { border-color: #00cf92; color: #00cf92; } .vx_alert-success:before { content: "\2714"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vx_alert-warning { border-color: #ff9600; color: #ff9600; } .vx_alert-warning:before { content: "\2755"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vx_alert-critical { border-color: #d20000; color: #d20000; } .vx_alert-critical:before { content: "\26A0"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vx_alert-icon { display: inline; width: 3em; padding-right: 12px; } .vx_alert-text { margin: 0 0 0 2.5em; color: #2c2e2f; display: table-cell; width: 100%; } @media (min-width: 768px) { .vx_alert { border-left-width: 1px; border-right-width: 1px; border-radius: 5px; } } /* * @name buttons * @description All defined button styles and states belong here, including any helper class button style options, like `vx_btn-secondary` or `vx_btn-medium` etc. * * @group elements */ .vx_btn, .vx_btn-small, .vx_btn-medium { display: inline-block; min-width: 6rem; padding: 0.75rem 1.5rem; margin-bottom: 1.5rem; border: 1px solid #0070ba; border-radius: 1.5rem; font-size: 0.9375rem; line-height: 1.6; font-family: 'PayPal-Sans', sans-serif; font-weight: 500; text-align: center; text-decoration: none; cursor: pointer; color: #ffffff; background-color: #0070ba; transition: all 250ms ease; -webkit-font-smoothing: antialiased; } .vx_btn:visited, .vx_btn-small:visited, .vx_btn-medium:visited, .vx_btn:active, .vx_btn-small:active, .vx_btn-medium:active, .vx_btn:hover, .vx_btn-small:hover, .vx_btn-medium:hover, .vx_btn:focus, .vx_btn-small:focus, .vx_btn-medium:focus { color: #ffffff; } .vx_btn:visited, .vx_btn-small:visited, .vx_btn-medium:visited { text-decoration: none; } .vx_btn:hover, .vx_btn-small:hover, .vx_btn-medium:hover, .vx_btn:focus, .vx_btn-small:focus, .vx_btn-medium:focus { background-color: #003087; border: 1px solid #003087; box-shadow: none; text-decoration: none; } .vx_btn:focus, .vx_btn-small:focus, .vx_btn-medium:focus { outline: none; text-decoration: underline; } .vx_btn[disabled], .vx_btn-small[disabled], .vx_btn-medium[disabled], .vx_btn[disabled]:hover, .vx_btn-small[disabled]:hover, .vx_btn-medium[disabled]:hover, .vx_btn[disabled]:active, .vx_btn-small[disabled]:active, .vx_btn-medium[disabled]:active, .vx_btn.vx_is-disabled, .vx_btn-small.vx_is-disabled, .vx_btn-medium.vx_is-disabled, .vx_btn.vx_is-disabled:hover, .vx_btn-small.vx_is-disabled:hover, .vx_btn-medium.vx_is-disabled:hover, .vx_btn.vx_is-disabled:active, .vx_btn-small.vx_is-disabled:active, .vx_btn-medium.vx_is-disabled:active { color: #cbd2d6; background: #f5f6f8; box-shadow: none; border: 1px solid #cbd2d6; text-decoration: none; cursor: not-allowed; outline: none; -ms-transform: none; -webkit-transform: none; transform: none; } .vx_btn + .vx_btn, .vx_btn + .vx_btn-small, .vx_btn + .vx_btn-medium, .vx_btn-small + .vx_btn, .vx_btn-small + .vx_btn-small, .vx_btn-small + .vx_btn-medium, .vx_btn-medium + .vx_btn, .vx_btn-medium + .vx_btn-small, .vx_btn-medium + .vx_btn-medium { margin-left: 0.75rem; } .vx_btn.vx_btn-block, .vx_btn-small.vx_btn-block, .vx_btn-medium.vx_btn-block { margin-right: 0; margin-left: 0; width: 100%; } .vx_btn-secondary { background-color: transparent; border-color: #0070ba; color: #0070ba; } .vx_btn-secondary:hover, .vx_btn-secondary:focus { color: #003087; background-color: rgba(255, 255, 255, 0.2); border-color: #003087; box-shadow: 0 0 0 1px #003087 inset; } .vx_btn-secondary:visited { text-decoration: none; color: #0070ba; } .vx_btn_reversed { border-color: #ffffff; background-color: #ffffff; color: #0070ba; } .vx_btn_reversed:hover, .vx_btn_reversed:focus { background-color: #f0f0f0; border-color: #f0f0f0; color: #003087; } .vx_btn_reversed:visited { color: #0070ba; } .vx_btn_reversed:visited:hover { color: #003087; } .vx_btn-secondary_reversed { background-color: transparent; color: #ffffff; border-color: #ffffff; } .vx_btn-secondary_reversed:hover, .vx_btn-secondary_reversed:focus { background-color: rgba(0, 0, 0, 0.1); color: #ffffff; border-color: #ffffff; box-shadow: 0 0 0 1px #ffffff inset; } .vx_btn-medium { font-size: 0.8125rem; line-height: 1.38461538; min-width: 4.5rem; padding: 0.5625rem 1.125rem; } .vx_btn-small { font-size: 0.8125rem; line-height: 1.36363636; min-width: 3.75rem; padding: 0.46875rem 0.9375rem; } .vx_btn-icon { display: inline-block; width: 1.5rem; position: relative; margin-right: 0.625rem; } .vx_btn-icon svg { width: 1.5rem; height: 1.5rem; position: absolute; top: -1.125rem; left: 0; } .vx_btn-icon .svg-stroke { stroke: #ffffff; } .vx_btn-icon .svg-fill { fill: #ffffff; } .vx_btn-secondary .vx_btn-icon .svg-stroke { stroke: #0070ba; } .vx_btn-secondary .vx_btn-icon .svg-fill { fill: #0070ba; } .vx_btn-secondary:hover .vx_btn-icon .svg-stroke, .vx_btn-secondary:focus .vx_btn-icon .svg-stroke { stroke: #003087; } .vx_btn-secondary:hover .vx_btn-icon .svg-fill, .vx_btn-secondary:focus .vx_btn-icon .svg-fill { fill: #003087; } [disabled] .vx_btn-icon .svg-stroke, [disabled]:hover .vx_btn-icon .svg-stroke, [disabled]:active .vx_btn-icon .svg-stroke, .vx_is-disabled .vx_btn-icon .svg-stroke, .vx_is-disabled:hover .vx_btn-icon .svg-stroke, .vx_is-disabled:active .vx_btn-icon .svg-stroke { stroke: #cbd2d6; } [disabled] .vx_btn-icon .svg-fill, [disabled]:hover .vx_btn-icon .svg-fill, [disabled]:active .vx_btn-icon .svg-fill, .vx_is-disabled .vx_btn-icon .svg-fill, .vx_is-disabled:hover .vx_btn-icon .svg-fill, .vx_is-disabled:active .vx_btn-icon .svg-fill { fill: #cbd2d6; } .vx_btn-medium .vx_btn-icon { width: 1.125rem; margin-right: 0.5rem; } .vx_btn-medium .vx_btn-icon svg { width: 1.125rem; height: 1.125rem; top: -0.8125rem; } .vx_btn-small .vx_btn-icon { width: 1.10795454rem; margin-right: 0.375rem; } .vx_btn-small .vx_btn-icon svg { width: 1.10795454rem; height: 1.10795454rem; top: -0.75rem; } .vx_btn-group, .vx_btn-group_stacked { text-align: center; } .vx_btn-group_stacked .vx_btn, .vx_btn-group_stacked .vx_btn-small, .vx_btn-group_stacked .vx_btn-medium { display: table; margin-left: auto; margin-right: auto; } .vx_addBtn-primary, .vx_addBtn-secondary { font-weight: 500; font-size: 0.9375rem; line-height: 1.5rem; background: none; border: none; color: #0070ba; padding-left: 0.125rem; } .vx_addBtn-primary:before, .vx_addBtn-secondary:before { content: "\002B"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: 'paypal-vx-icons'; line-height: 0; font-size: 1.25rem; } .vx_addBtn-primary:hover, .vx_addBtn-secondary:hover { color: #005ea6; text-decoration: none; } .vx_addBtn-primary:before { color: #ffffff; background: #0070ba; border-radius: 100%; padding: 0 5px 3px; box-shadow: 0 1px 2px #2c2e2f; margin-right: 12px; } .vx_addBtn-secondary:before { margin-right: 5px; } .vx_backBtn { background: none; border: none; color: #0070ba; font-weight: normal; padding: 0; } .vx_backBtn:focus, .vx_backBtn:active, .vx_backBtn:hover { color: #005ea6; text-decoration: none; } .vx_backBtn:focus span, .vx_backBtn:active span, .vx_backBtn:hover span { text-decoration: underline; } .vx_backBtn:before { font-family: 'paypal-vx-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: '\2190'; display: inline; font-size: 1.5em; vertical-align: -0.1em; padding-right: 0.1em; } .vx_btn-twoUp .vx_btn { display: inline-block; width: 48%; margin-left: 0; margin-right: 0; } .vx_btn-twoUp .vx_btn:first-of-type { margin-right: 1.5%; } .vx_btn-twoUp .vx_btn:last-of-type { margin-left: 1.5%; } @media (max-width: 768px) { .vx_blocks-for-mobile .vx_btn { display: block; width: 100%; } .vx_blocks-for-mobile .vx_btn + .vx_btn { margin: 5px 0 0; } } .vx_btn-link { background: none; border: none; color: #0070ba; font-weight: 500; padding: 0; } .vx_btn-link:hover { color: #005ea6; text-decoration: underline; } /* Mixin for placeholder */ .vx_form-control { width: 100%; height: 50px; padding: 12.5px; border: 1px solid #9da3a6; border-radius: 5px; background: #ffffff; -webkit-transition: border-color 0.15s; -o-transition: border-color 0.15s; transition: border-color 0.15s; } .vx_form-control:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .vx_form-control:hover, .vx_form-control:focus, .vx_form-control:active, .vx_form-control.vx_is-active { border-color: #009cde; } .vx_form-control[disabled], .vx_form-control[disabled]:hover, .vx_form-control[disabled]:active, .vx_form-control.vx_is-disabled, .vx_form-control.vx_is-disabled:hover, .vx_form-control.vx_is-disabled:active { border-color: #cbd2d6; background: #f5f7fa; color: #6c7378; cursor: default; } .vx_form-group, .vx_form-group_hiddenLabel { padding-top: 1em; text-align: left; } .vx_form-group label, .vx_form-group_hiddenLabel label { font-weight: 500; } .vx_form-group_hiddenLabel label, .vx_form-group-nolabel label { position: absolute; left: -999em; } input.vx_has-error { background: #ffffff; border-color: #d20000; } .vx_has-error, .vx_has-error input, .vx_has-error label, input.vx_has-error, label.vx_has-error { color: #d20000; } .vx_has-error input, .vx_has-error select, .vx_has-error input:hover, .vx_has-error input:active, input:focus input.vx_has-error, input.vx_has-error:hover, input.vx_has-error:active, input.vx_has-error:focus { background: #ffffff; border-color: #d20000; } .vx_has-error .vx_form-control_complex { border-color: #d20000; } .vx_has-error .vx_form-control-icon { color: #d20000; } .vx_has-error .vx_selectIcon_error { position: relative; display: block; text-align: right; height: 0; font-family: 'paypal-vx-icons'; font-style: normal; font-weight: normal; text-transform: none; line-height: 0; -webkit-font-smoothing: antialiased; } .vx_has-error .vx_selectIcon_error:before { content: "\26A0"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 1.58rem; position: absolute; right: 1.25em; top: -1.25em; } .vx_selectIcon_error { display: none; } .vx_form-control_complex { padding: 0; display: table; table-layout: fixed; height: auto; } .vx_form-control_complex input { background: none; border: none; display: table-cell; width: 100%; padding: 12px; height: 48px; } .vx_form-control_complex input:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .vx_form-control_complex input:hover { background: none; } .vx_form-control-icon, .vx_form-control-error-icon { display: table-cell; width: 2.5em; min-width: 2.5em; color: #9da3a6; text-align: right; vertical-align: middle; position: relative; top: -2px; } .vx_form-control-error-icon { width: 1px; min-width: 1px; visibility: hidden; } .vx_form-control-icon + input { padding-left: 0.5em; } label.vx_has-error-with-message, input.vx_has-error-with-message, .vx_form-control_complex.vx_has-error-with-message { color: #d20000; } input.vx_has-error-with-message, .vx_form-control_complex.vx_has-error-with-message { background: #ffffff; border-color: #d20000; margin-bottom: 0 !important; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .vx_has-message > input, .vx_has-error-with-message > input, .vx_has-message > .vx_form-control_complex, .vx_has-error-with-message > .vx_form-control_complex { margin-bottom: 0 !important; border: 1px solid #0092d1; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .vx_has-message.hasFocus:after, .vx_has-error-with-message.hasFocus:after { color: #d20000; } .vx_has-error-with-message > label, .vx_has-error-with-message > .vx_form-control_complex { color: #d20000; } .vx_has-error-with-message > input, .vx_has-error-with-message > .vx_form-control_complex { background: #ffffff; border-color: #d20000; margin-bottom: 0 !important; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .vx_has-error-with-message .vx_form-control-message { background: #fefafa; border: 1px solid #d20000; border-top-width: 0; } .vx_has-error-with-message .vx_form-control-icon { color: #d20000; } .vx_has-error-with-message.hasFocus:after { color: #d20000; } .vx_has-error .vx_form-control_complex .vx_form-control-error-icon, .vx_has-error-with-message .vx_form-control_complex .vx_form-control-error-icon { display: table-cell; visibility: visible; width: 2.25em; color: #d20000; text-align: left; } .vx_form-control-message { display: block; background: #fdfeff; padding: 0.5em 1em; border: 1px solid #0092d1; border-top-width: 0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } /********************************* * FLOATING LABEL * *********************************/ .vx_floatingLabel, .vx_floatingLabel_complex, .vx_floatingLabel_active { position: relative; padding: 0; margin-top: 15px; background: white; border-radius: 5px; text-align: left; } .vx_floatingLabel.vx_floatingLabel_complex > .vx_form-control, .vx_floatingLabel_complex.vx_floatingLabel_complex > .vx_form-control, .vx_floatingLabel_active.vx_floatingLabel_complex > .vx_form-control { position: relative; display: table-cell; height: 48px; } .vx_floatingLabel.vx_floatingLabel_complex > .vx_form-control input, .vx_floatingLabel_complex.vx_floatingLabel_complex > .vx_form-control input, .vx_floatingLabel_active.vx_floatingLabel_complex > .vx_form-control input { height: 48px; } .vx_floatingLabel:before, .vx_floatingLabel_complex:before, .vx_floatingLabel_active:before, .vx_floatingLabel:after, .vx_floatingLabel_complex:after, .vx_floatingLabel_active:after, .vx_floatingLabel.vx_floatingLabel_complex > .vx_form-control:before, .vx_floatingLabel_complex.vx_floatingLabel_complex > .vx_form-control:before, .vx_floatingLabel_active.vx_floatingLabel_complex > .vx_form-control:before, .vx_floatingLabel.vx_floatingLabel_complex > .vx_form-control:after, .vx_floatingLabel_complex.vx_floatingLabel_complex > .vx_form-control:after, .vx_floatingLabel_active.vx_floatingLabel_complex > .vx_form-control:after { content: attr(data-label-content); position: absolute; padding: 0 15px; line-height: 48px; margin: 1px; transition: opacity 0.25s ease-out; z-index: 0; white-space: nowrap; overflow: hidden; width: 100%; text-overflow: ellipsis; color: #6c7378; } .vx_floatingLabel.vx_floatingLabel > .vx_form-control:before, .vx_floatingLabel_complex.vx_floatingLabel > .vx_form-control:before, .vx_floatingLabel_active.vx_floatingLabel > .vx_form-control:before { line-height: 50px; } .vx_floatingLabel:after, .vx_floatingLabel_complex:after, .vx_floatingLabel_active:after, .vx_floatingLabel.vx_floatingLabel_complex > .vx_form-control:after, .vx_floatingLabel_complex.vx_floatingLabel_complex > .vx_form-control:after, .vx_floatingLabel_active.vx_floatingLabel_complex > .vx_form-control:after { top: -10px; left: 0; font-size: 12px; color: #6c7378; font-weight: 500; transition: opacity 0.4s ease-in-out, top 0.3s ease-out; } .vx_floatingLabel.hasFocus:after, .vx_floatingLabel_complex.hasFocus:after, .vx_floatingLabel_active.hasFocus:after, .vx_floatingLabel.hasFocus.vx_floatingLabel_complex > .vx_form-control:after, .vx_floatingLabel_complex.hasFocus.vx_floatingLabel_complex > .vx_form-control:after, .vx_floatingLabel_active.hasFocus.vx_floatingLabel_complex > .vx_form-control:after { color: #0070ba; } .vx_floatingLabel label, .vx_floatingLabel_complex label, .vx_floatingLabel_active label { position: absolute; left: -999em; } .vx_floatingLabel input, .vx_floatingLabel_complex input, .vx_floatingLabel_active input { position: relative; z-index: 2; padding: 18px 15px 0; background: transparent; color: #2c2e2f; } .vx_floatingLabel input.vx_form-control, .vx_floatingLabel_complex input.vx_form-control, .vx_floatingLabel_active input.vx_form-control { height: 50px; } .vx_floatingLabel .vx_form-control-icon, .vx_floatingLabel_complex .vx_form-control-icon, .vx_floatingLabel_active .vx_form-control-icon, .vx_floatingLabel .vx_form-control-error-icon, .vx_floatingLabel_complex .vx_form-control-error-icon, .vx_floatingLabel_active .vx_form-control-error-icon { vertical-align: middle; position: relative; top: -2px; } .vx_floatingLabel .vx_form-control-error-icon, .vx_floatingLabel_complex .vx_form-control-error-icon, .vx_floatingLabel_active .vx_form-control-error-icon { top: -3px; } .vx_floatingLabel .vx_form-control-error-icon:before, .vx_floatingLabel_complex .vx_form-control-error-icon:before, .vx_floatingLabel_active .vx_form-control-error-icon:before { display: none; } .vx_floatingLabel .vx_form-control-icon, .vx_floatingLabel_complex .vx_form-control-icon, .vx_floatingLabel_active .vx_form-control-icon { vertical-align: middle; } .vx_floatingLabel.vx_has-error .vx_form-control-error-icon:before, .vx_floatingLabel_complex.vx_has-error .vx_form-control-error-icon:before, .vx_floatingLabel_active.vx_has-error .vx_form-control-error-icon:before, .vx_floatingLabel.vx_has-error-with-message .vx_form-control-error-icon:before, .vx_floatingLabel_complex.vx_has-error-with-message .vx_form-control-error-icon:before, .vx_floatingLabel_active.vx_has-error-with-message .vx_form-control-error-icon:before { display: inline; } .vx_floatingLabel.vx_has-error, .vx_floatingLabel_complex.vx_has-error, .vx_floatingLabel_active.vx_has-error, .vx_floatingLabel.vx_has-error-with-message, .vx_floatingLabel_complex.vx_has-error-with-message, .vx_floatingLabel_active.vx_has-error-with-message { border-color: #d20000; } .vx_floatingLabel.vx_has-error .vx_form-control, .vx_floatingLabel_complex.vx_has-error .vx_form-control, .vx_floatingLabel_active.vx_has-error .vx_form-control, .vx_floatingLabel.vx_has-error-with-message .vx_form-control, .vx_floatingLabel_complex.vx_has-error-with-message .vx_form-control, .vx_floatingLabel_active.vx_has-error-with-message .vx_form-control { border-color: #d20000; } .vx_floatingLabel.vx_has-error .vx_form-control:hover, .vx_floatingLabel_complex.vx_has-error .vx_form-control:hover, .vx_floatingLabel_active.vx_has-error .vx_form-control:hover, .vx_floatingLabel.vx_has-error-with-message .vx_form-control:hover, .vx_floatingLabel_complex.vx_has-error-with-message .vx_form-control:hover, .vx_floatingLabel_active.vx_has-error-with-message .vx_form-control:hover { background: transparent; } .vx_floatingLabel.vx_has-error.hasFocus:after, .vx_floatingLabel_complex.vx_has-error.hasFocus:after, .vx_floatingLabel_active.vx_has-error.hasFocus:after, .vx_floatingLabel.vx_has-error-with-message.hasFocus:after, .vx_floatingLabel_complex.vx_has-error-with-message.hasFocus:after, .vx_floatingLabel_active.vx_has-error-with-message.hasFocus:after, .vx_floatingLabel.vx_has-error.hasFocus.vx_floatingLabel_complex > .vx_form-control:after, .vx_floatingLabel_complex.vx_has-error.hasFocus.vx_floatingLabel_complex > .vx_form-control:after, .vx_floatingLabel_active.vx_has-error.hasFocus.vx_floatingLabel_complex > .vx_form-control:after, .vx_floatingLabel.vx_has-error-with-message.hasFocus.vx_floatingLabel_complex > .vx_form-control:after, .vx_floatingLabel_complex.vx_has-error-with-message.hasFocus.vx_floatingLabel_complex > .vx_form-control:after, .vx_floatingLabel_active.vx_has-error-with-message.hasFocus.vx_floatingLabel_complex > .vx_form-control:after { color: #d20000; } .vx_floatingLabel.vx_has-error .vx_form-control-error-icon, .vx_floatingLabel_complex.vx_has-error .vx_form-control-error-icon, .vx_floatingLabel_active.vx_has-error .vx_form-control-error-icon, .vx_floatingLabel.vx_has-error-with-message .vx_form-control-error-icon, .vx_floatingLabel_complex.vx_has-error-with-message .vx_form-control-error-icon, .vx_floatingLabel_active.vx_has-error-with-message .vx_form-control-error-icon { display: table-cell; visibility: visible; width: inherit; min-width: 2.25em; color: #d20000; text-align: left; } .vx_floatingLabel.vx_has-error:before, .vx_floatingLabel_complex.vx_has-error:before, .vx_floatingLabel_active.vx_has-error:before, .vx_floatingLabel.vx_has-error-with-message:before, .vx_floatingLabel_complex.vx_has-error-with-message:before, .vx_floatingLabel_active.vx_has-error-with-message:before, .vx_floatingLabel.vx_has-error:after, .vx_floatingLabel_complex.vx_has-error:after, .vx_floatingLabel_active.vx_has-error:after, .vx_floatingLabel.vx_has-error-with-message:after, .vx_floatingLabel_complex.vx_has-error-with-message:after, .vx_floatingLabel_active.vx_has-error-with-message:after { color: #d20000; } .vx_floatingLabel.vx_has-error.hasValue input, .vx_floatingLabel_complex.vx_has-error.hasValue input, .vx_floatingLabel_active.vx_has-error.hasValue input, .vx_floatingLabel.vx_has-error-with-message.hasValue input, .vx_floatingLabel_complex.vx_has-error-with-message.hasValue input, .vx_floatingLabel_active.vx_has-error-with-message.hasValue input, .vx_floatingLabel.vx_has-error.hasFocus input, .vx_floatingLabel_complex.vx_has-error.hasFocus input, .vx_floatingLabel_active.vx_has-error.hasFocus input, .vx_floatingLabel.vx_has-error-with-message.hasFocus input, .vx_floatingLabel_complex.vx_has-error-with-message.hasFocus input, .vx_floatingLabel_active.vx_has-error-with-message.hasFocus input { color: #2c2e2f; } .vx_floatingLabel_complex { display: block; padding: 0; height: auto; border: 1px solid #9da3a6; border-radius: 5px; text-align: left; -webkit-transition: border-color 0.15s; -o-transition: border-color 0.15s; transition: border-color 0.15s; } .vx_floatingLabel_complex .vx_form-control { display: table; table-layout: fixed; padding: 0; border: none; border-radius: 0; background: transparent; } .vx_floatingLabel_complex .vx_form-control input { display: block; width: 100%; border: none; background: none; } .vx_floatingLabel_complex .vx_form-control-icon + .vx_form-control input, .vx_floatingLabel_complex .vx_form-control-icon + .vx_form-control:before, .vx_floatingLabel_complex .vx_form-control-icon + .vx_form-control:after { padding-left: 8px; padding-right: 8px; } .vx_floatingLabel_complex label { max-width: 1px; } .vx_floatingLabel_complex:before, .vx_floatingLabel_complex:after { content: ''; display: none; } .vx_floatingLabel_complex.vx_has-message { border-color: #0092d1; } .vx_floatingLabel_complex.vx_has-error .vx_form-control:before, .vx_floatingLabel_complex.vx_has-error-with-message .vx_form-control:before, .vx_floatingLabel_complex.vx_has-error .vx_form-control:after, .vx_floatingLabel_complex.vx_has-error-with-message .vx_form-control:after { color: #d20000; } .vx_floatingLabel_complex .vx_form-control-message { border-width: 0; border-top-width: 1px; } .vx_floatingLabel:before { color: #2c2e2f; opacity: 0; } .vx_floatingLabel input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ opacity: 1; } .vx_floatingLabel input:-moz-placeholder { /* FF 4-18 */ opacity: 1; } .vx_floatingLabel input::-moz-placeholder { /* FF 19+ */ opacity: 1; } .vx_floatingLabel input:-ms-input-placeholder { /* IE 10+ */ opacity: 1; } .vx_floatingLabel input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */ opacity: 1; } .vx_floatingLabel input:focus:-moz-placeholder { /* FF 4-18 */ opacity: 1; } .vx_floatingLabel input:focus::-moz-placeholder { /* FF 19+ */ opacity: 1; } .vx_floatingLabel input:focus:-ms-input-placeholder { /* IE 10+ */ opacity: 1; } .vx_floatingLabel.hasFocus:before, .vx_floatingLabel.hasValue:before { opacity: 0; } .vx_floatingLabel.hasFocus:before input, .vx_floatingLabel.hasValue:before input { color: inherit; } .vx_floatingLabel.hasFocus:after, .vx_floatingLabel.hasValue:after { opacity: 1; top: -10px; } .vx_floatingLabel.hasValue:after { color: #2c2e2f; } .vx_floatingLabel_active input { color: transparent; } .vx_floatingLabel_active input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ opacity: 0; } .vx_floatingLabel_active input:-moz-placeholder { /* FF 4-18 */ opacity: 0; } .vx_floatingLabel_active input::-moz-placeholder { /* FF 19+ */ opacity: 0; } .vx_floatingLabel_active input:-ms-input-placeholder { /* IE 10+ */ opacity: 0; } .vx_floatingLabel_active input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */ opacity: 1; } .vx_floatingLabel_active input:focus:-moz-placeholder { /* FF 4-18 */ opacity: 1; } .vx_floatingLabel_active input:focus::-moz-placeholder { /* FF 19+ */ opacity: 1; } .vx_floatingLabel_active input:focus:-ms-input-placeholder { /* IE 10+ */ opacity: 1; } .vx_floatingLabel_active:before, .vx_floatingLabel_active.vx_floatingLabel_complex > .vx_form-control:before { opacity: 1; } .vx_floatingLabel_active:after, .vx_floatingLabel_active.vx_floatingLabel_complex > .vx_form-control:after { opacity: 0; } .vx_floatingLabel_active.hasFocus input, .vx_floatingLabel_active.hasValue input { color: inherit; } .vx_floatingLabel_active.hasFocus:before, .vx_floatingLabel_active.hasFocus.vx_floatingLabel_complex > .vx_form-control:before, .vx_floatingLabel_active.hasValue:before, .vx_floatingLabel_active.hasValue.vx_floatingLabel_complex > .vx_form-control:before { opacity: 0; } .vx_floatingLabel_active.hasFocus:after, .vx_floatingLabel_active.hasFocus.vx_floatingLabel_complex > .vx_form-control:after, .vx_floatingLabel_active.hasValue:after, .vx_floatingLabel_active.hasValue.vx_floatingLabel_complex > .vx_form-control:after { opacity: 1; } .vx_floatingLabel_active.hasFocus:after, .vx_floatingLabel_active.hasFocus.vx_floatingLabel_complex > .vx_form-control:after { color: #0070ba; } .vx_floatingLabel_active.vx_is-disabled { background: #f5f7fa; } .vx_floatingLabel_active.vx_is-disabled.hasFocus:after, .vx_floatingLabel_active.vx_is-disabled.hasFocus.vx_floatingLabel_complex > .vx_form-control:after { color: #6c7378; } .vx_floatingLabel_active.vx_is-disabled input[disabled], .vx_floatingLabel_active.vx_is-disabled input[disabled]:hover, .vx_floatingLabel_active.vx_is-disabled input[disabled]:active, .vx_floatingLabel_active.vx_is-disabled input.vx_is-disabled, .vx_floatingLabel_active.vx_is-disabled input.vx_is-disabled:hover, .vx_floatingLabel_active.vx_is-disabled input.vx_is-disabled:active { background: transparent; color: #6c7378; } /* Container used for styling the custom select */ .vx_select { position: relative; display: block; } /* This is the native select, we're making everything but the text invisible so * we can see the button styles in the wrapper */ .vx_select select { width: 100%; margin: 0; } .vx_select select:focus { outline: none; } /* Custom arrow sits on top of the select - could be an image, SVG, icon font, * etc. or the arrow could just baked into the bg image on the select. */ .vx_select:after { font-family: 'paypal-vx-icons'; speak: none; font-size: 1.875rem; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 0; /* Better Font Rendering =========== */ content: "\21E3"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 50%; right: 12.5px; z-index: 2; /* These hacks make the select behind the arrow clickable in some browsers */ pointer-events: none; display: none; } @supports ( -webkit-appearance: none ) or ( appearance: none ) /* Firefox <= 34 has a false positive on @supports( -moz-appearance: none ) * @supports ( mask-type: alpha ) is Firefox 35+ */ or ( ( -moz-appearance: none ) and ( mask-type: alpha ) ) { /* Show custom arrow */ .vx_select:after { display: block; } /* Remove select styling */ .vx_select select { padding-right: 2.75rem; /* inside @supports so that iOS <= 8 display the native arrow */ background: #ffffff; /* inside @supports so that Android <= 4.3 display the native arrow */ border: 1px solid #9da3a6; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .vx_select select:focus { border-color: #009cde; } .vx_has-error .vx_selectIcon_error:before { right: 2.2rem; } .vx_has-error select { padding-right: 4.5rem; } /********************************* * FLOATING LABEL * *********************************/ .vx_floatingLabel select { position: relative; z-index: 1; height: 50px; padding: 18px 15px 0; background: transparent; color: #2c2e2f; } .vx_floatingLabel .vx_select:before { position: absolute; top: -10px; left: 0; font-size: 12px; font-weight: 500; content: attr(data-label-content); padding: 0 15px; line-height: 50px; margin: 1px; z-index: 0; white-space: nowrap; overflow: hidden; width: 100%; text-overflow: ellipsis; color: #6c7378; } .vx_floatingLabel.vx_has-error .vx_select:before { color: #d20000; } .vx_floatingLabel.hasFocus .vx_select:before, .vx_floatingLabel.hasFocus .vx_select:after { color: #0070ba; } } /** * Hacks to adjust alignment for Firefox and Edge */ @supports ( ( -moz-appearance: none ) and ( mask-type: alpha ) ) or (-ms-ime-align: auto) { .vx_floatingLabel select { padding-left: 11px; } } /* Styles for checkbox widget */ .vx_checkbox, .vx_radio { width: 100%; position: relative; } .vx_checkbox input, .vx_radio input { opacity: 0; position: absolute; cursor: pointer; } .vx_checkbox input:focus + label:before, .vx_radio input:focus + label:before { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .vx_checkbox input:checked + label:before, .vx_radio input:checked + label:before { content: "\2611"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border-color: #0092d1; color: #ffffff; background-color: #0092d1; } .vx_checkbox label, .vx_radio label { cursor: pointer; display: inline-block; vertical-align: top; line-height: 2em; } .vx_checkbox label:before, .vx_radio label:before { font-family: 'paypal-vx-icons'; display: inline-block; vertical-align: top; height: 1.2em; width: 1.2em; margin: 0 12px 0 0; padding: 0.4em 0.1em; border: 1px solid #2c2e2f; content: ''; font-size: 25px; line-height: 0; border-radius: 2px; overflow: hidden; } .vx_checkbox.vx_has-error input:checked + label:before, .vx_radio.vx_has-error input:checked + label:before { border-color: #d20000; background: #d20000; } .vx_checkbox.vx_has-error label:before, .vx_radio.vx_has-error label:before { border-color: #d20000; } .vx_checkbox.vx_has-error:after, .vx_radio.vx_has-error:after { font-family: 'paypal-vx-icons'; display: inline-block; vertical-align: middle; content: "\26A0"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 1.75em; line-height: 0; position: relative; top: -3px; padding-left: 5px; } .vx_checkbox.vx_is-disabled, .vx_radio.vx_is-disabled { cursor: not-allowed; } .vx_checkbox.vx_is-disabled input:checked + label:before, .vx_radio.vx_is-disabled input:checked + label:before { border-color: #6c7378; background: #6c7378; } .vx_checkbox.vx_is-disabled label:before, .vx_radio.vx_is-disabled label:before { border-color: #6c7378; cursor: not-allowed; } .vx_checkbox.vx_is-disabled label, .vx_radio.vx_is-disabled label { color: #6c7378; cursor: not-allowed; } .vx_radio input:checked + label:before { content: ''; border-color: #0092d1; background-color: #0092d1; box-shadow: inset 0 0 0 5px #ffffff; } .vx_radio label:before { border-radius: 100%; } .vx_hr { border: none; border-top: 1px solid #b7bcbf; margin: 0.75rem 0; } .vx_hr-alt { border: none; border-top: 1px dotted #cbd2d6; margin: 0.75rem 0; } /** * DO NOT EDIT THIS FILE AS IT'S GENERATED CODE. * UED: cgrigson, adustin, nvandewater * UIE: jlowery * Note: If modifications are needed, don't modify this file! Either override or make a PR to: * https://github.paypal.com/jlowery/paypal-vxpattern-lib */ .vx_icon { font-family: 'paypal-vx-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 0; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vx_icon-small:before { font-size: 1.58rem; } .vx_icon-medium:before { font-size: 2.6rem; } .vx_icon-large:before { font-size: 7.8rem; } .vx_icon-slider-small:before { content: "\205D"; } .vx_icon-slider-half-small:before { content: "\205E"; } .vx_icon-close-small:before { content: "\274E"; } .vx_icon-add-small:before { content: "\002B"; } .vx_icon-arrow-down-small:before { content: "\2193"; } .vx_icon-arrow-up-small:before { content: "\2191"; } .vx_icon-arrow-left-small:before { content: "\2190"; } .vx_icon-arrow-right-small:before { content: "\2192"; } .vx_icon-arrow-down-half-small:before { content: "\21E3"; } .vx_icon-arrow-up-half-small:before { content: "\21E1"; } .vx_icon-arrow-left-half-small:before { content: "\21E0"; } .vx_icon-arrow-right-half-small:before { content: "\21E2"; } .vx_icon-arrow-back-small:before { content: "\21E6"; } .vx_icon-clear-half-small:before { content: "\2716"; } .vx_icon-checkmark-small:before { content: "\2705"; } .vx_icon-checkmark-small-bold:before { content: "\2611"; } .vx_icon-circled-checkmark-small:before { content: "\2714"; } .vx_icon-circled-checkmark-large:before { content: "\2713"; } .vx_icon-action-arrow-half-small:before { content: "\25BA"; } .vx_icon-action-arrow-right-half-small:before { content: "\25BA"; } .vx_icon-action-arrow-down-half-small:before { content: "\25BC"; } .vx_icon-action-arrow-up-half-small:before { content: "\25B2"; } .vx_icon-tooltip-small:before { content: "\2753"; } .vx_icon-info-small:before { content: "\2139"; } .vx_icon-positive-small:before { content: "\002B"; } .vx_icon-attention-small:before { content: "\2755"; } .vx_icon-critical-small:before { content: "\26A0"; } .vx_icon-info-large:before { content: "\24D8"; } .vx_icon-positive-large:before { content: "\002B"; } .vx_icon-attention-large:before { content: "\2762"; } .vx_icon-critical-large:before { content: "\2757"; } .vx_icon-pp-logo:before { content: "\E498"; } .vx_icon-pp-logo-half:before { content: "\E499"; } .vx_icon-gear:before { content: "\2699"; } .vx_icon-magnifying-glass:before { content: "\1F50D"; } .vx_icon-bell:before { content: "\1F514"; } .vx_icon-chain-link:before { content: "\1F517"; } .vx_icon-calendar:before { content: "\1F4C5"; } .vx_icon-camera-add:before { content: "\1F4F7"; } .vx_icon-avatar:before { content: "\1F471"; } .vx_spinner-small, .vx_has-spinner-small:after { height: 18px; opacity: 0.56; width: 18px; animation: vx_spin 620ms infinite linear; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D'100%25'%20height%3D'100%25'%20viewBox%3D'0%200%2038%2038'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%0A%09%3Cdefs%3E%0A%09%09%3ClinearGradient%20id%3D'gradient'%20x1%3D'0'%20y1%3D'0'%20x2%3D'1'%20y2%3D'0'%3E%0A%09%09%09%3Cstop%20offset%3D'0'%20stop-color%3D'%23000000'%20stop-opacity%3D'0'%2F%3E%0A%09%09%09%3Cstop%20offset%3D'1'%20stop-color%3D'%23000000'%20stop-opacity%3D'1'%2F%3E%0A%09%09%3C%2FlinearGradient%3E%0A%09%3C%2Fdefs%3E%0A%09%3Cpath%20stroke%3D'url(%23gradient)'%20vector-effect%3D'non-scaling-stroke'%20stroke-width%3D'1px'%20fill%3D'none'%20fill-rule%3D'evenodd'%20d%3D'M2%2C19a17%2C17%200%201%2C1%2034%2C0'%3E%3C%2Fpath%3E%0A%09%3Cpath%20stroke%3D'%23000000'%20vector-effect%3D'non-scaling-stroke'%20stroke-width%3D'1px'%20fill%3D'none'%20fill-rule%3D'evenodd'%20d%3D'M2%2C19a17%2C17%200%201%2C0%2034%2C0'%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A"); content: ''; display: block; } .vx_spinner-medium, .vx_has-spinner-medium:after { height: 24px; opacity: 0.56; width: 24px; animation: vx_spin 620ms infinite linear; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D'100%25'%20height%3D'100%25'%20viewBox%3D'0%200%2038%2038'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%0A%09%3Cdefs%3E%0A%09%09%3ClinearGradient%20id%3D'gradient'%20x1%3D'0'%20y1%3D'0'%20x2%3D'1'%20y2%3D'0'%3E%0A%09%09%09%3Cstop%20offset%3D'0'%20stop-color%3D'%23000000'%20stop-opacity%3D'0'%2F%3E%0A%09%09%09%3Cstop%20offset%3D'1'%20stop-color%3D'%23000000'%20stop-opacity%3D'1'%2F%3E%0A%09%09%3C%2FlinearGradient%3E%0A%09%3C%2Fdefs%3E%0A%09%3Cpath%20stroke%3D'url(%23gradient)'%20vector-effect%3D'non-scaling-stroke'%20stroke-width%3D'2px'%20fill%3D'none'%20fill-rule%3D'evenodd'%20d%3D'M2%2C19a17%2C17%200%201%2C1%2034%2C0'%3E%3C%2Fpath%3E%0A%09%3Cpath%20stroke%3D'%23000000'%20vector-effect%3D'non-scaling-stroke'%20stroke-width%3D'2px'%20fill%3D'none'%20fill-rule%3D'evenodd'%20d%3D'M2%2C19a17%2C17%200%201%2C0%2034%2C0'%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A"); content: ''; display: block; } .vx_spinner-large, .vx_has-spinner-large:after { height: 128px; opacity: 0.56; width: 128px; animation: vx_spin 620ms infinite linear; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D'100%25'%20height%3D'100%25'%20viewBox%3D'0%200%2038%2038'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%0A%09%3Cdefs%3E%0A%09%09%3ClinearGradient%20id%3D'gradient'%20x1%3D'0'%20y1%3D'0'%20x2%3D'1'%20y2%3D'0'%3E%0A%09%09%09%3Cstop%20offset%3D'0'%20stop-color%3D'%2300cf92'%20stop-opacity%3D'0'%2F%3E%0A%09%09%09%3Cstop%20offset%3D'1'%20stop-color%3D'%2300cf92'%20stop-opacity%3D'1'%2F%3E%0A%09%09%3C%2FlinearGradient%3E%0A%09%3C%2Fdefs%3E%0A%09%3Cpath%20stroke%3D'url(%23gradient)'%20vector-effect%3D'non-scaling-stroke'%20stroke-width%3D'2px'%20fill%3D'none'%20fill-rule%3D'evenodd'%20d%3D'M2%2C19a17%2C17%200%201%2C1%2034%2C0'%3E%3C%2Fpath%3E%0A%09%3Cpath%20stroke%3D'%2300cf92'%20vector-effect%3D'non-scaling-stroke'%20stroke-width%3D'2px'%20fill%3D'none'%20fill-rule%3D'evenodd'%20d%3D'M2%2C19a17%2C17%200%201%2C0%2034%2C0'%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A"); content: ''; display: block; } .vx_has-spinner-small, .vx_has-spinner-medium, .vx_has-spinner-large { position: relative; } .vx_has-spinner-small:before, .vx_has-spinner-medium:before, .vx_has-spinner-large:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background-color: rgba(255, 255, 255, 0.6); z-index: 1000; animation: vx_fade-in 0.3s ease-out 0s both; } .vx_has-spinner-small:after, .vx_has-spinner-medium:after, .vx_has-spinner-large:after { margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1001; } .vx_tag, .vx_tag-pending, .vx_tag-warning, .vx_tag-critical, .vx_tag-success { display: inline-block; height: 0.8125rem; line-height: 0.625rem; padding: 0 0.1875rem 0.0625rem 0.1875rem; border-radius: 3px; font-size: 0.625rem; font-weight: 500; text-transform: uppercase; border: 1px solid #2c2e2f; color: #2c2e2f; } .vx_tag-pending { border: 1px solid #640487; color: #640487; } .vx_tag-warning { border: 1px solid #d64003; color: #d64003; } .vx_tag-critical { border: 1px solid #d20000; color: #d20000; } .vx_tag-success { border: 1px solid #018065; color: #018065; } /* * CSS for Panel with optional Action */ .vx_panel, .vx_panel-tile, .vx_panel-well { min-height: 1.5rem; padding: 0.75rem 1.5rem; margin-bottom: 1.5rem; border-radius: 6px; } .vx_panel, .vx_panel-well { display: table; width: 100%; } .vx_panel-tile { background-color: #ffffff; border: 1px solid #cbd2d6; } .vx_panel-well { background-color: #f5f7fa; } .vx_panel-info { display: table-cell; color: #2c2e2f; } .vx_panel-header, .vx_panel-text, .vx_panel-action { color: #2c2e2f; margin: 0; font-family: 'PayPal-Sans', sans-serif; line-height: 1.5rem; font-size: 0.8125rem; font-weight: 600; } .vx_panel-action { display: table-cell; max-width: 7em; color: #0070ba; text-align: right; } .vx_panel-text { font-weight: 400; font-size: 0.9375rem; } /** * @fileOverview Contains default styles for the global nav * @name global-nav * @author jlowery * @tested browsers Chrome 42+ */ /*************** * MIXINS */ /*************** * VARIABLES */ /*************** * STYLES */ /* This acts as the "state" of open and closed menu for mobile */ .vx_globalNav-toggleCheckbox { display: none; } .vx_globalNav-main, .vx_globalNav-main_mobile { padding: 0; min-height: 72px; max-height: 84px; border-bottom: 1px solid #0070ba; background-color: #0070ba; background-image: linear-gradient(100deg, #0070ba, #1546a0); } .vx_globalNav-main { position: fixed; left: 0; right: 0; top: 0; width: 100%; z-index: 1030; -webkit-transition: left 250ms, right 250ms; -o-transition: left 250ms, right 250ms; transition: left 250ms, right 250ms; } .vx_globalNav-main_mobile, .vx_globalNav-secondaryNav_mobile { display: none; } .vx_globalNav-brand_desktop { margin-left: 0; padding: 1.25rem 0.75rem 0 0; display: table-cell; vertical-align: top; } .vx_globalNav-brand_desktop:before { content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzBweCIgaGVpZ2h0PSIzMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHZlcnNpb249IjEuMSI+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iTmF2LUFzc2V0cyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTUwLjAwMDAwMCwgLTUwLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iaWNQUExvZ29UcmFuc3BhcmVudFdoaXRlMzAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwLjAwMDAwMCwgNTAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iU3BlY3MiIGZpbGw9IiNERTAwNjMiIG9wYWNpdHk9IjAiIHg9IjAiIHk9IjAiIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIvPgogICAgICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi45MDQ4MjgsIDEuNzcwMDAwKSIgZmlsbD0iI0ZGRkZGRiI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE5LjUxODEwNjgsMi4yNjUzNzY1OSBDMTguMjY1MDU5OCwwLjgzNzc4Njc0NyAxNi4wMDE0MjAxLDAuMjI2MTk4NjYzIDEzLjEwNTE5NTYsMC4yMjYxOTg2NjMgTDQuNjk3ODIzODcsMC4yMjYxOTg2NjMgQzQuMTA2MDE1NDMsMC4yMjYxOTg2NjMgMy42MDIwOTY2MSwwLjY1Njc4OTczMyAzLjUwOTc5ODc0LDEuMjQxMzc5NzggTDAuMDA5MDkyMDI5MDcsMjMuNDM4NDQ1OSBDLTAuMDYwMDYyNDk1LDIzLjg3NjQ3NTIgMC4yNzg1NDY3MDksMjQuMjcyMzU0NSAwLjcyMTg1MjAwNSwyNC4yNzIzNTQ1IEw1LjkxMjAyMzAyLDI0LjI3MjM1NDUgTDUuNTUzODUyMTgsMjYuNTQzNzcwNiBDNS40OTM1MTQxNywyNi45MjY5Nzc0IDUuNzg5NDE4MzksMjcuMjczNTQ0IDYuMTc3MzQ0OTYsMjcuMjczNTQ0IEwxMC41NTE5ODg1LDI3LjI3MzU0NCBDMTEuMDY5OTU4NywyNy4yNzM1NDQgMTEuNTEwNzg0MywyNi44OTY2NzM1IDExLjU5MTUxMDUsMjYuMzg1MzYzOCBMMTEuNjM0NDkxLDI2LjE2MzA0MzMgTDEyLjQ1ODU1OTUsMjAuOTM3NTQ2NSBMMTIuNTExNzM0MSwyMC42NDg4MzI4IEMxMi41OTI0NjAzLDIwLjEzNzI0NzcgMTMuMDMzMjg1OSwxOS43NjA2NTI3IDEzLjU1MDk4MDUsMTkuNzYwNjUyNyBMMTQuMjA1MzMxMSwxOS43NjA2NTI3IEMxOC40NDM1OTQyLDE5Ljc2MDY1MjcgMjEuNzYyMTg0OCwxOC4wMzg4Mzk0IDIyLjczMTcyNTgsMTMuMDU5NjMwOCBDMjMuMTM3MDA5OCwxMC45NzkxMjkzIDIyLjkyNzYxNzcsOS4yNDI0Mzk1OCAyMS44NTYxMzU4LDguMDIxNDY3MzMgQzIxLjUzMTg1MzQsNy42NTIzMTA1NiAyMS4xMjg3NzM1LDcuMzQ2NzkyMDEgMjAuNjU4NDY3Niw3LjA5Nzc0ODkzIEMyMC45ODg1MzU4LDQuOTkzODMwODIgMjAuNjU2MjYzNSwzLjU2MjEwODYyIDE5LjUxODEwNjgsMi4yNjUzNzY1OSBaIiBpZD0iRmlsbC04IiBmaWxsLW9wYWNpdHk9IjAuNjgiLz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjAuNjU4NDY3Niw3LjA5ODM5NTA2IEMyMC45ODg1MzU4LDQuOTk0Mjc5MTIgMjAuNjU2MjYzNSwzLjU2MjQyMjMgMTkuNTE4MTA2OCwyLjI2NTU2ODMzIEMxOC4yNjUwNTk4LDAuODM3ODQ0MjU0IDE2LjAwMTQyMDEsMC4yMjYxOTg2NjMgMTMuMTA1MTk1NiwwLjIyNjE5ODY2MyBMNC42OTc4MjM4NywwLjIyNjE5ODY2MyBDNC4xMDYwMTU0MywwLjIyNjE5ODY2MyAzLjYwMjA5NjYxLDAuNjU2ODMwMjIxIDMuNTA5Nzk4NzQsMS4yNDE0NzUyNCBMMC4wMDkwOTIwMjkwNywyMy40NDA2Mjg1IEMtMC4wNjAwNjI0OTUsMjMuODc4Njk5IDAuMjc4NTQ2NzA5LDI0LjI3NDYxNTUgMC43MjE4NTIwMDUsMjQuMjc0NjE1NSBMNS45MTIwMjMwMiwyNC4yNzQ2MTU1IEw3LjIxNTc2NDg5LDE2LjAwNzQ4MTUgTDcuMTc1MjY0MDMsMTYuMjY2NzQyMSBDNy4yNjc1NjE5LDE1LjY4MjA5NyA3Ljc2NzM0Nzk4LDE1LjI1MTE5IDguMzU5MTU2NDIsMTUuMjUxMTkgTDEwLjgyNjEyNywxNS4yNTExOSBDMTUuNjcwODAwOSwxNS4yNTExOSAxOS40NjQxMDU2LDEzLjI4MjkwMzQgMjAuNTcyNTA2Niw3LjU5MDc0MjIxIEMyMC42MDUyOTMsNy40MjI0MDE5MSAyMC42MzMzOTU3LDcuMjU5MDIwOSAyMC42NTg0Njc2LDcuMDk4Mzk1MDYiIGlkPSJGaWxsLTkiIGZpbGwtb3BhY2l0eT0iMC43Ii8+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTguNjE2MjEyODgsNy4xMjY0OTc2OSBDOC42NzE4NjcxMiw2Ljc3NDY2MzcyIDguODk3NTE0NzUsNi40ODY3NDk0NiA5LjIwMTQwODkzLDYuMzQxMDAxNDggQzkuMzM5NzE3OTgsNi4yNzQ4Nzc2NCA5LjQ5NDAwNjk2LDYuMjM3OTU4NDkgOS42NTU3MzQ4Nyw2LjIzNzk1ODQ5IEwxNi4yNDU4MDI4LDYuMjM3OTU4NDkgQzE3LjAyNjYxNTMsNi4yMzc5NTg0OSAxNy43NTQ1Mjg2LDYuMjg5MjA0NDcgMTguNDE5ODk5OSw2LjM5NjM4MDIxIEMxOC42MTAyODE0LDYuNDI2OTYyNDkgMTguNzk1MTUyNyw2LjQ2MjIyODU0IDE4Ljk3NTA2NDcsNi41MDIxNzgzNiBDMTkuMTU0NzAxMSw2LjU0MTg1MjY3IDE5LjMyOTM3ODMsNi41ODY0ODYyNyAxOS40OTgyNjk2LDYuNjM2MDc5MTUgQzE5LjU4Mjg1Myw2LjY2MDYwMDA4IDE5LjY2NTc4MzQsNi42ODY0OTg1OSAxOS43NDc2MTE2LDYuNzEzNzc0NjggQzIwLjA3NDM3MzYsNi44MjIwNTI0OCAyMC4zNzg1NDMzLDYuOTUwMTY3NDMgMjAuNjU4NDY3Niw3LjA5ODM5NTA2IEMyMC45ODg1MzU4LDQuOTk0Mjc5MTIgMjAuNjU2MjYzNSwzLjU2MjQyMjMgMTkuNTE4MTA2OCwyLjI2NTU2ODMzIEMxOC4yNjUwNTk4LDAuODM3ODQ0MjU0IDE2LjAwMTQyMDEsMC4yMjYxOTg2NjMgMTMuMTA1MTk1NiwwLjIyNjE5ODY2MyBMNC42OTc4MjM4NywwLjIyNjE5ODY2MyBDNC4xMDYwMTU0MywwLjIyNjE5ODY2MyAzLjYwMjA5NjYxLDAuNjU2ODMwMjIxIDMuNTA5Nzk4NzQsMS4yNDE0NzUyNCBMMC4wMDkwOTIwMjkwNywyMy40NDA2Mjg1IEMtMC4wNjAwNjI0OTUsMjMuODc4Njk5IDAuMjc4NTQ2NzA5LDI0LjI3NDYxNTUgMC43MjE4NTIwMDUsMjQuMjc0NjE1NSBMNS45MTIwMjMwMiwyNC4yNzQ2MTU1IEw4LjYxNjIxMjg4LDcuMTI2NDk3NjkiIGlkPSJGaWxsLTEwIi8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=='); } .vx_globalNav-container { display: table; width: 100%; max-width: 1024px; padding: 0 1em; margin: 0 auto; } .vx_globalNav-navContainer { display: table-cell; vertical-align: top; width: 100%; } .vx_globalNav-nav { display: table; width: 100%; } .vx_globalNav-list, .vx_globalNav-list_secondary { display: table-cell; vertical-align: top; list-style: none; } /*Secondary navigation which includes notification, settings, help, log out and user profile*/ .vx_globalNav-list_secondary { margin: 0; text-align: right; list-style: none; white-space: nowrap; } .vx_globalNav-list li { display: table-cell; vertical-align: top; position: relative; padding: 0 1rem; } .vx_globalNav-list_secondary li { display: inline-block; vertical-align: top; position: relative; text-align: left; } .vx_globalNav-list a, .vx_globalNav-list a:visited { display: block; padding: 2em 0 0.65em; font-family: PayPal-Sans-Big, sans-serif; font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.025rem; text-decoration: none; color: #ffffff; } .vx_globalNav-list a:hover, .vx_globalNav-list a:visited:hover, .vx_globalNav-list a:focus, .vx_globalNav-list a:visited:focus, .vx_globalNav-list a:active, .vx_globalNav-list a:visited:active, .vx_globalNav-list a.vx_isActive, .vx_globalNav-list a:visited.vx_isActive { text-decoration: none; color: #ffffff; } .vx_globalNav-links { border-bottom: 1px solid transparent; -moz-transition: border-bottom-color 0.3s ease-in-out; -webkit-transition: border-bottom-color 0.3s ease-in-out; -ms-transition: border-bottom-color 0.3s ease-in-out; transition: border-bottom-color 0.3s ease-in-out; opacity: 0.85; font-weight: normal; text-transform: uppercase; } .vx_globalNav-links:hover { border-bottom-color: rgba(255, 255, 255, 0.75); } .vx_globalNav-links.vx_isActive { border-bottom: 1px solid #ffffff; opacity: 1; } .vx_globalNav-list_secondary a:hover, .vx_globalNav-list_secondary label:hover { text-decoration: none; } .vx_globalNav-link_settings, .vx_globalNav-link_notifications, .vx_globalNav-link_iconOnly { display: block; position: relative; padding: 2.1rem 0.75rem 0; opacity: 0.85; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -ms-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } .vx_globalNav-link_settings:hover, .vx_globalNav-link_notifications:hover, .vx_globalNav-link_iconOnly:hover { opacity: 1; text-decoration: none; } .vx_globalNav-link_settings.vx_isActive .vx_globalNav-navIcon, .vx_globalNav-link_notifications.vx_isActive .vx_globalNav-navIcon, .vx_globalNav-link_iconOnly.vx_isActive .vx_globalNav-navIcon { font-weight: 600; } .vx_globalNav-navIcon { display: block; height: 1.5rem; font-family: 'paypal-vx-icons'; speak: none; font-size: 2rem; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 0; color: #ffffff; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vx_globalNav-navIcon_linkNotifications:before { content: "\1F514"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vx_globalNav-navIcon_linkSettings:before { content: "\2699"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vx_globalNav-navIcon_linkSearch:before { content: "\1F50D"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Icons for the left nav links */ .vx_globalNav-iconWrapper { display: none; } .vx_globalNav-iconWrapper_secondary { display: block; } /* alerts icon on the header */ .vx_globalNav-link_notifications.vx_isDisabled { background-size: contain; cursor: default; opacity: 0.5; } .vx_globalNav-link_notifications .vx_notificationCount { position: absolute; top: 0.8rem; right: 0.6rem; min-width: 1.65rem; padding: 0.05rem 0.35rem 0.2rem; border: 3px solid #ffffff; border-radius: 0.8572em; background: #009cde; text-indent: 0; text-align: center; line-height: 1rem; text-shadow: none; color: #ffffff; font-weight: 500; } .vx_globalNav-link_notifications.vx_isCritical .vx_notificationCount { background: #d20000; } .vx_globalNav-link_notifications.vx_isDisabled .vx_notificationCount { display: none; } .vx_globalNav-listItem_logout { padding: 1.25rem 0 0 0.75rem; } .vx_globalNav-link_logout, .vx_globalNav-toggleTrigger { display: inline-block; min-width: 6rem; padding: 0.75rem 1.5rem; margin-bottom: 1.5rem; border: 1px solid #0070ba; border-radius: 1.5rem; font-size: 0.9375rem; line-height: 1.6; font-family: 'PayPal-Sans', sans-serif; font-weight: 500; text-align: center; text-decoration: none; cursor: pointer; background-color: #0070ba; transition: all 250ms ease; -webkit-font-smoothing: antialiased; font-size: 0.8125rem; line-height: 1.36363636; min-width: 3.75rem; padding: 0.46875rem 0.9375rem; background-color: transparent; color: #ffffff; border-color: #ffffff; margin: 0; } .vx_globalNav-link_logout:visited, .vx_globalNav-toggleTrigger:visited, .vx_globalNav-link_logout:active, .vx_globalNav-toggleTrigger:active, .vx_globalNav-link_logout:hover, .vx_globalNav-toggleTrigger:hover, .vx_globalNav-link_logout:focus, .vx_globalNav-toggleTrigger:focus { color: #ffffff; } .vx_globalNav-link_logout:visited, .vx_globalNav-toggleTrigger:visited { text-decoration: none; } .vx_globalNav-link_logout:hover, .vx_globalNav-toggleTrigger:hover, .vx_globalNav-link_logout:focus, .vx_globalNav-toggleTrigger:focus { background-color: #003087; border: 1px solid #003087; box-shadow: none; text-decoration: none; } .vx_globalNav-link_logout:focus, .vx_globalNav-toggleTrigger:focus { outline: none; text-decoration: underline; } .vx_globalNav-link_logout[disabled], .vx_globalNav-toggleTrigger[disabled], .vx_globalNav-link_logout[disabled]:hover, .vx_globalNav-toggleTrigger[disabled]:hover, .vx_globalNav-link_logout[disabled]:active, .vx_globalNav-toggleTrigger[disabled]:active, .vx_globalNav-link_logout.vx_is-disabled, .vx_globalNav-toggleTrigger.vx_is-disabled, .vx_globalNav-link_logout.vx_is-disabled:hover, .vx_globalNav-toggleTrigger.vx_is-disabled:hover, .vx_globalNav-link_logout.vx_is-disabled:active, .vx_globalNav-toggleTrigger.vx_is-disabled:active { color: #cbd2d6; background: #f5f6f8; box-shadow: none; border: 1px solid #cbd2d6; text-decoration: none; cursor: not-allowed; outline: none; -ms-transform: none; -webkit-transform: none; transform: none; } .vx_globalNav-link_logout + .vx_globalNav-link_logout, .vx_globalNav-link_logout + .vx_globalNav-toggleTrigger, .vx_globalNav-toggleTrigger + .vx_globalNav-link_logout, .vx_globalNav-toggleTrigger + .vx_globalNav-toggleTrigger { margin-left: 0.75rem; } .vx_globalNav-link_logout.vx_btn-block, .vx_globalNav-toggleTrigger.vx_btn-block { margin-right: 0; margin-left: 0; width: 100%; } .vx_globalNav-link_logout:hover, .vx_globalNav-toggleTrigger:hover, .vx_globalNav-link_logout:focus, .vx_globalNav-toggleTrigger:focus { background-color: rgba(0, 0, 0, 0.1); color: #ffffff; border-color: #ffffff; box-shadow: 0 0 0 1px #ffffff inset; } /* This fixes the in-between states that cause collisions of menu items */ @media (min-width: 768px) and (max-width: 950px) { .vx_globalNav-list li { padding: 0 0.75rem; } .vx_globalNav-list a { font-family: PayPal-Sans, sans-serif; } .vx_globalNav-link_settings, .vx_globalNav-link_notifications, .vx_globalNav-link_iconOnly { padding: 2.1rem 0.25rem 0; } /* alerts icon on the header */ .vx_globalNav-link_notifications .vx_notificationCount { right: 0; } } @media (max-width: 768px) { body { background-color: #0070ba; background-image: linear-gradient(10deg, #0070ba, #1546a0); background-repeat: no-repeat; } .vx_globalNav-main, .vx_globalNav-mobile { padding: 0; height: 0; min-height: 0; } .vx_globalNav-main { border: none; position: static; } .vx_globalNav-main_mobile { display: table; width: 100%; } .vx_globalNav-nav { display: table; position: static; } /* This creates the state for the opening and closing of the nav */ .vx_globalNav-toggleCheckbox { display: block; position: absolute; top: -1000em; } .vx_globalNav-toggleCheckbox:checked ~ .vx_globalNav_main .vx_globalNav-nav { position: absolute; } .vx_globalNav-toggleCheckbox:checked ~ .vx_foreground-container { position: fixed; left: 70%; right: -70%; top: 0; } .vx_globalNav-toggleCheckbox:checked ~ .vx_foreground-container .vx_globalNav_mobile { position: static; } .vx_globalNav-toggleCheckbox:checked ~ .vx_foreground-container > .vx_globalNav-toggleTrigger_overlay { position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: 800; } .vx_globalNav-toggleCheckbox:checked ~ .vx_sidepanel { z-index: -1; right: -70%; } .vx_hasOpenNav .vx_globalNav-nav { position: static; } .vx_hasOpenNav .vx_foreground-container { position: fixed; left: 70%; right: -70%; top: 0; } .vx_hasOpenNav .vx_foreground-container .vx_globalNav_mobile { position: static; } .vx_hasOpenNav .vx_foreground-container .vx_mainContent { padding-top: 0; } .vx_hasOpenNav .vx_foreground-container > .vx_globalNav-toggleTrigger_overlay { position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: 1; } .vx_hasOpenNav .vx_sidepanel { z-index: -1; right: -70%; } .vx_globalNav-main_mobile { display: table; } .vx_globalNav-headerSection_trigger, .vx_globalNav-headerSection_logo, .vx_globalNav-headerSection_actions { display: table-cell; vertical-align: top; } .vx_globalNav-headerSection_trigger, .vx_globalNav-headerSection_actions { width: 30%; } .vx_globalNav-headerSection_logo { text-align: center; } .vx_globalNav-headerSection_actions { text-align: right; list-style: none; margin: 0; padding: 0; } .vx_globalNav-headerSection_actions li { display: inline-block; vertical-align: top; } .vx_globalNav-toggleTrigger { margin: 1.3rem 0 0 1rem; } .vx_globalNav-brand_desktop { display: none; } .vx_globalNav-brand_mobile { display: inline-block; vertical-align: top; padding: 1.4rem 0 1rem; } .vx_globalNav-brand_mobile:before { content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzBweCIgaGVpZ2h0PSIzMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHZlcnNpb249IjEuMSI+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iTmF2LUFzc2V0cyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTUwLjAwMDAwMCwgLTUwLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iaWNQUExvZ29UcmFuc3BhcmVudFdoaXRlMzAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwLjAwMDAwMCwgNTAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iU3BlY3MiIGZpbGw9IiNERTAwNjMiIG9wYWNpdHk9IjAiIHg9IjAiIHk9IjAiIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIvPgogICAgICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi45MDQ4MjgsIDEuNzcwMDAwKSIgZmlsbD0iI0ZGRkZGRiI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE5LjUxODEwNjgsMi4yNjUzNzY1OSBDMTguMjY1MDU5OCwwLjgzNzc4Njc0NyAxNi4wMDE0MjAxLDAuMjI2MTk4NjYzIDEzLjEwNTE5NTYsMC4yMjYxOTg2NjMgTDQuNjk3ODIzODcsMC4yMjYxOTg2NjMgQzQuMTA2MDE1NDMsMC4yMjYxOTg2NjMgMy42MDIwOTY2MSwwLjY1Njc4OTczMyAzLjUwOTc5ODc0LDEuMjQxMzc5NzggTDAuMDA5MDkyMDI5MDcsMjMuNDM4NDQ1OSBDLTAuMDYwMDYyNDk1LDIzLjg3NjQ3NTIgMC4yNzg1NDY3MDksMjQuMjcyMzU0NSAwLjcyMTg1MjAwNSwyNC4yNzIzNTQ1IEw1LjkxMjAyMzAyLDI0LjI3MjM1NDUgTDUuNTUzODUyMTgsMjYuNTQzNzcwNiBDNS40OTM1MTQxNywyNi45MjY5Nzc0IDUuNzg5NDE4MzksMjcuMjczNTQ0IDYuMTc3MzQ0OTYsMjcuMjczNTQ0IEwxMC41NTE5ODg1LDI3LjI3MzU0NCBDMTEuMDY5OTU4NywyNy4yNzM1NDQgMTEuNTEwNzg0MywyNi44OTY2NzM1IDExLjU5MTUxMDUsMjYuMzg1MzYzOCBMMTEuNjM0NDkxLDI2LjE2MzA0MzMgTDEyLjQ1ODU1OTUsMjAuOTM3NTQ2NSBMMTIuNTExNzM0MSwyMC42NDg4MzI4IEMxMi41OTI0NjAzLDIwLjEzNzI0NzcgMTMuMDMzMjg1OSwxOS43NjA2NTI3IDEzLjU1MDk4MDUsMTkuNzYwNjUyNyBMMTQuMjA1MzMxMSwxOS43NjA2NTI3IEMxOC40NDM1OTQyLDE5Ljc2MDY1MjcgMjEuNzYyMTg0OCwxOC4wMzg4Mzk0IDIyLjczMTcyNTgsMTMuMDU5NjMwOCBDMjMuMTM3MDA5OCwxMC45NzkxMjkzIDIyLjkyNzYxNzcsOS4yNDI0Mzk1OCAyMS44NTYxMzU4LDguMDIxNDY3MzMgQzIxLjUzMTg1MzQsNy42NTIzMTA1NiAyMS4xMjg3NzM1LDcuMzQ2NzkyMDEgMjAuNjU4NDY3Niw3LjA5Nzc0ODkzIEMyMC45ODg1MzU4LDQuOTkzODMwODIgMjAuNjU2MjYzNSwzLjU2MjEwODYyIDE5LjUxODEwNjgsMi4yNjUzNzY1OSBaIiBpZD0iRmlsbC04IiBmaWxsLW9wYWNpdHk9IjAuNjgiLz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjAuNjU4NDY3Niw3LjA5ODM5NTA2IEMyMC45ODg1MzU4LDQuOTk0Mjc5MTIgMjAuNjU2MjYzNSwzLjU2MjQyMjMgMTkuNTE4MTA2OCwyLjI2NTU2ODMzIEMxOC4yNjUwNTk4LDAuODM3ODQ0MjU0IDE2LjAwMTQyMDEsMC4yMjYxOTg2NjMgMTMuMTA1MTk1NiwwLjIyNjE5ODY2MyBMNC42OTc4MjM4NywwLjIyNjE5ODY2MyBDNC4xMDYwMTU0MywwLjIyNjE5ODY2MyAzLjYwMjA5NjYxLDAuNjU2ODMwMjIxIDMuNTA5Nzk4NzQsMS4yNDE0NzUyNCBMMC4wMDkwOTIwMjkwNywyMy40NDA2Mjg1IEMtMC4wNjAwNjI0OTUsMjMuODc4Njk5IDAuMjc4NTQ2NzA5LDI0LjI3NDYxNTUgMC43MjE4NTIwMDUsMjQuMjc0NjE1NSBMNS45MTIwMjMwMiwyNC4yNzQ2MTU1IEw3LjIxNTc2NDg5LDE2LjAwNzQ4MTUgTDcuMTc1MjY0MDMsMTYuMjY2NzQyMSBDNy4yNjc1NjE5LDE1LjY4MjA5NyA3Ljc2NzM0Nzk4LDE1LjI1MTE5IDguMzU5MTU2NDIsMTUuMjUxMTkgTDEwLjgyNjEyNywxNS4yNTExOSBDMTUuNjcwODAwOSwxNS4yNTExOSAxOS40NjQxMDU2LDEzLjI4MjkwMzQgMjAuNTcyNTA2Niw3LjU5MDc0MjIxIEMyMC42MDUyOTMsNy40MjI0MDE5MSAyMC42MzMzOTU3LDcuMjU5MDIwOSAyMC42NTg0Njc2LDcuMDk4Mzk1MDYiIGlkPSJGaWxsLTkiIGZpbGwtb3BhY2l0eT0iMC43Ii8+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTguNjE2MjEyODgsNy4xMjY0OTc2OSBDOC42NzE4NjcxMiw2Ljc3NDY2MzcyIDguODk3NTE0NzUsNi40ODY3NDk0NiA5LjIwMTQwODkzLDYuMzQxMDAxNDggQzkuMzM5NzE3OTgsNi4yNzQ4Nzc2NCA5LjQ5NDAwNjk2LDYuMjM3OTU4NDkgOS42NTU3MzQ4Nyw2LjIzNzk1ODQ5IEwxNi4yNDU4MDI4LDYuMjM3OTU4NDkgQzE3LjAyNjYxNTMsNi4yMzc5NTg0OSAxNy43NTQ1Mjg2LDYuMjg5MjA0NDcgMTguNDE5ODk5OSw2LjM5NjM4MDIxIEMxOC42MTAyODE0LDYuNDI2OTYyNDkgMTguNzk1MTUyNyw2LjQ2MjIyODU0IDE4Ljk3NTA2NDcsNi41MDIxNzgzNiBDMTkuMTU0NzAxMSw2LjU0MTg1MjY3IDE5LjMyOTM3ODMsNi41ODY0ODYyNyAxOS40OTgyNjk2LDYuNjM2MDc5MTUgQzE5LjU4Mjg1Myw2LjY2MDYwMDA4IDE5LjY2NTc4MzQsNi42ODY0OTg1OSAxOS43NDc2MTE2LDYuNzEzNzc0NjggQzIwLjA3NDM3MzYsNi44MjIwNTI0OCAyMC4zNzg1NDMzLDYuOTUwMTY3NDMgMjAuNjU4NDY3Niw3LjA5ODM5NTA2IEMyMC45ODg1MzU4LDQuOTk0Mjc5MTIgMjAuNjU2MjYzNSwzLjU2MjQyMjMgMTkuNTE4MTA2OCwyLjI2NTU2ODMzIEMxOC4yNjUwNTk4LDAuODM3ODQ0MjU0IDE2LjAwMTQyMDEsMC4yMjYxOTg2NjMgMTMuMTA1MTk1NiwwLjIyNjE5ODY2MyBMNC42OTc4MjM4NywwLjIyNjE5ODY2MyBDNC4xMDYwMTU0MywwLjIyNjE5ODY2MyAzLjYwMjA5NjYxLDAuNjU2ODMwMjIxIDMuNTA5Nzk4NzQsMS4yNDE0NzUyNCBMMC4wMDkwOTIwMjkwNywyMy40NDA2Mjg1IEMtMC4wNjAwNjI0OTUsMjMuODc4Njk5IDAuMjc4NTQ2NzA5LDI0LjI3NDYxNTUgMC43MjE4NTIwMDUsMjQuMjc0NjE1NSBMNS45MTIwMjMwMiwyNC4yNzQ2MTU1IEw4LjYxNjIxMjg4LDcuMTI2NDk3NjkiIGlkPSJGaWxsLTEwIi8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=='); } .vx_globalNav-container { display: block; width: 70%; max-width: 1024px; padding: 0; margin: 0; } .vx_globalNav-secondaryNav_mobile, .vx_globalNav-navContainer { display: block; } .vx_globalNav-listItem_mobileLogout, .vx_globalNav-listItem_settings { display: inline-block; vertical-align: top; width: 48%; } .vx_globalNav-listItem_settings { text-align: right; } .vx_globalNav-listItem_mobileLogout { padding: 1.75rem 0 0 2rem; } .vx_globalNav-link_settings, .vx_globalNav-link_iconOnly { text-indent: 0; display: inline-block; vertical-align: top; } .vx_globalNav-link_settings:hover, .vx_globalNav-link_iconOnly:hover { text-decoration: none; } .vx_globalNav-list { margin: 1.5rem 0; display: block; } .vx_globalNav-list li { display: block; padding: 0; text-align: center; } .vx_globalNav-list li:before, .vx_globalNav-list li:last-of-type:after { display: block; content: ''; width: 80%; margin: 0 auto; border-bottom: 1px solid rgba(255, 255, 255, 0.12); -webkit-transition: border-bottom-color 0.3s; -moz-transition: border-bottom-color 0.3s; -ms-transition: border-bottom-color 0.3s; -o-transition: border-bottom-color 0.3s; transition: border-bottom-color 0.3s; } .vx_globalNav-list li:hover:before, .vx_globalNav-list li:hover:last-of-type:after, .vx_globalNav-list li:hover + li:before { border-bottom-color: rgba(255, 255, 255, 0.5); } .vx_globalNav-list a, .vx_globalNav-list a:visited { padding: 1rem 0; display: block; border: none; color: #ffffff; text-decoration: none; font-family: PayPal-Sans-Big, sans-serif; } .vx_globalNav-list a:hover, .vx_globalNav-list a:visited:hover, .vx_globalNav-list a:focus, .vx_globalNav-list a:visited:focus { border: none; } .vx_globalNav-list a:active, .vx_globalNav-list a:visited:active, .vx_globalNav-list a.vx_isActive, .vx_globalNav-list a:visited.vx_isActive { /* adding in the extra background color for IE */ background-color: #005ea6; background-color: rgba(0, 0, 0, 0.1); text-decoration: none; border: none; } .vx_globalNav-link_mobileLogout, .vx_globalNav-link_mobileLogout:hover, .vx_globalNav-link_mobileLogout:visited { color: #ffffff; font-weight: normal; } .vx_globalNav-list_secondary { display: none; } .vx_globalNav-displayName { margin-top: 20px; text-align: center; color: #ffffff; } } @media (max-width: 640px) { /* This creates the state for the opening and closing of the nav */ .vx_globalNav-toggleCheckbox:checked ~ .vx_foreground-container { left: 75%; } .vx_globalNav-toggleCheckbox:checked ~ .vx_sidepanel { right: -75%; } .vx_hasOpenNav .vx_foreground-container { left: 75%; } .vx_hasOpenNav ~ .vx_sidepanel { right: -75%; } .vx_globalNav-container { width: 75%; } } @media (max-width: 479px) { /* This creates the state for the opening and closing of the nav */ .vx_globalNav-toggleCheckbox:checked ~ .vx_foreground-container { left: 78%; } .vx_globalNav-toggleCheckbox:checked ~ .vx_sidepanel { right: -78%; } .vx_hasOpenNav .vx_foreground-container { left: 78%; } .vx_hasOpenNav ~ .vx_sidepanel { right: -78%; } .vx_globalNav-container { width: 78%; } } @media (max-width: 320px) { /* This creates the state for the opening and closing of the nav */ .vx_globalNav-toggleCheckbox:checked ~ .vx_foreground-container { left: 80%; } .vx_globalNav-toggleCheckbox:checked ~ .vx_sidepanel { right: -80%; } .vx_hasOpenNav .vx_foreground-container { left: 80%; } .vx_hasOpenNav ~ .vx_sidepanel { right: -80%; } .vx_globalNav-container { width: 80%; } } /** * @fileOverview Contains default styles for the footer * @name Footer * @author jlowery * @tested browsers */ .vx_globalFooter { position: absolute; width: 100%; min-height: 8rem; top: 100%; margin-top: -8rem; border-top: 1px solid #ffffff; background: #ffffff; color: #9da3a6; text-shadow: 0 1px 1px #ffffff; } .vx_globalFooter a:hover, .vx_globalFooter a:focus { text-shadow: none; } .vx_globalFooter-content { max-width: 1024px; margin: 0 auto; padding: 1.5rem 1.5rem 0; } .vx_globalFooter-list, .vx_globalFooter-list_secondary { margin: 0; } .vx_globalFooter-list li, .vx_globalFooter-list_secondary li { display: inline-block; vertical-align: top; } .vx_globalFooter-list a, .vx_globalFooter-list_secondary a { display: block; padding: 1rem 0.75rem 0.75rem; font-weight: 400; } .vx_globalFooter-list a:hover, .vx_globalFooter-list_secondary a:hover, .vx_globalFooter-list a:focus, .vx_globalFooter-list_secondary a:focus, .vx_globalFooter-list a:active, .vx_globalFooter-list_secondary a:active, .vx_globalFooter-list .active, .vx_globalFooter-list_secondary .active { color: #2c2e2f; } .vx_globalFooter-list li:first-child a { padding-left: 0; } .vx_globalFooter-list a { font-family: 'PayPal Sans Big', sans-serif; font-size: 0.8125rem; color: #6c7378; text-decoration: none; text-transform: uppercase; } .vx_globalFooter_secondary { width: 100%; border-top: 1px dotted #9da3a6; text-align: right; } .vx_globalFooter-copyright, .vx_globalFooter-list_secondary { display: inline-block; vertical-align: top; } .vx_globalFooter-list_secondary { margin-left: 0.75rem; } .vx_globalFooter-list_secondary li { display: inline-block; vertical-align: top; } .vx_globalFooter-list_secondary li:last-child { padding-right: 0; } .vx_globalFooter-list_secondary li:last-child a { padding-right: 0; } .vx_globalFooter-list_secondary a { font-size: 0.8125rem; color: #9da3a6; } .vx_globalFooter-copyright, .vx_globalFooter-disclaimer { margin-top: 1rem; padding-left: 0.65rem; font-size: 0.8125rem; } .vx_globalFooter-copyright { color: #9da3a6; font-family: 'PayPal Sans Big', sans-serif; letter-spacing: 0.05rem; } .vx_globalFooter-copyright:after { content: "\7c"; display: inline-block; padding-left: 1.5rem; vertical-align: -0.1rem; font-weight: 300; font-size: 1.2rem; line-height: 1em; } .vx_globalFooter-disclaimer { padding: 0.5em 10px 1em; font-family: 'PayPal Sans Big', sans-serif; letter-spacing: 0.05rem; text-align: left; font-size: 0.8125rem; line-height: 1.5em; } .vx_globalFooter-disclaimer a { color: #2c2e2f; } @media (min-width: 641px) and (max-width: 950px) { .vx_globalFooter-list_secondary li { padding: 0; } } @media (max-width: 641px) { .vx_globalFooter-list_secondary, .vx_globalFooter-copyright { padding-left: 0; margin-left: 0; } .vx_globalFooter-copyright { text-align: left; display: block; margin-top: 1.5rem; } .vx_globalFooter-copyright:after { content: ""; } .vx_globalFooter-list_secondary { display: block; text-align: left; } .vx_globalFooter-list_secondary li:first-child a { padding-left: 0; } } /** * THIS ICONS COMPONENT IS BEING DEPRECATED. USE THE ICONOGRAPHY COMPONENT INSTEAD. * DO NOT EDIT THIS FILE AS IT'S GENERATED CODE. * UED: cgrigson, adustin, nvandewater * UIE: jlowery * Note: If modifications are needed, don't modify this file! Either override or make a PR to: * https://github.paypal.com/jlowery/paypal-vxpattern-lib */ .icon { font-family: 'paypal-vx-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 0; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-small:before { font-size: 1.58rem; } .icon-medium:before { font-size: 2.6rem; } .icon-large:before { font-size: 7.8rem; } .icon-slider-small:before { content: "\205D"; } .icon-slider-half-small:before { content: "\205E"; } .icon-close-small:before { content: "\274E"; } .icon-add-small:before { content: "\002B"; } .icon-arrow-down-small:before { content: "\2193"; } .icon-arrow-up-small:before { content: "\2191"; } .icon-arrow-left-small:before { content: "\2190"; } .icon-arrow-right-small:before { content: "\2192"; } .icon-arrow-down-half-small:before { content: "\21E3"; } .icon-arrow-up-half-small:before { content: "\21E1"; } .icon-arrow-left-half-small:before { content: "\21E0"; } .icon-arrow-right-half-small:before { content: "\21E2"; } .icon-arrow-back-small:before { content: "\21E6"; } .icon-clear-half-small:before { content: "\2716"; } .icon-checkmark-small:before { content: "\2705"; } .icon-checkmark-small-bold:before { content: "\2611"; } .icon-circled-checkmark-small:before { content: "\2714"; } .icon-circled-checkmark-large:before { content: "\2713"; } .icon-action-arrow-half-small:before { content: "\25BA"; } .icon-action-arrow-right-half-small:before { content: "\25BA"; } .icon-action-arrow-down-half-small:before { content: "\25BC"; } .icon-action-arrow-up-half-small:before { content: "\25B2"; } .icon-tooltip-small:before { content: "\2753"; } .icon-info-small:before { content: "\2139"; } .icon-positive-small:before { content: "\002B"; } .icon-attention-small:before { content: "\2755"; } .icon-critical-small:before { content: "\26A0"; } .icon-info-large:before { content: "\24D8"; } .icon-positive-large:before { content: "\002B"; } .icon-attention-large:before { content: "\2762"; } .icon-critical-large:before { content: "\2757"; } .icon-pp-logo:before { content: "\E498"; } .icon-pp-logo-half:before { content: "\E499"; } .icon-gear:before { content: "\2699"; } .icon-magnifying-glass:before { content: "\1F50D"; } .icon-bell:before { content: "\1F514"; } .icon-chain-link:before { content: "\1F517"; } .icon-calendar:before { content: "\1F4C5"; } .icon-camera-add:before { content: "\1F4F7"; } .icon-avatar:before { content: "\1F471"; } /* * CSS for Sidepanel */ .vx_sidepanel-toggleCheckbox { display: none; } /* This creates the state for the opening and closing of the nav */ .vx_sidepanel-toggleCheckbox { display: block; position: absolute; top: -1000em; } .vx_sidepanel-toggleCheckbox:checked ~ .vx_sidepanel { position: absolute; } .vx_sidepanel-toggleCheckbox:checked ~ .vx_foreground-container { position: fixed; right: 320px; left: -320px; top: 0; } .vx_sidepanel-toggleCheckbox:checked ~ .vx_foreground-container > .vx_sidepanel-toggleTrigger_overlay { position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: 800; } .vx_sidepanel-toggleCheckbox:checked ~ .vx_globalNav-main { left: -320px; right: 320px; } .vx_hasOpenSidepanel .vx_sidepanel { position: absolute; } .vx_hasOpenSidepanel .vx_foreground-container { position: fixed; right: 320px; left: -320px; top: 0; } .vx_hasOpenSidepanel .vx_foreground-container > .vx_globalNav-toggleTrigger_overlay { position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: 1; } .vx_hasOpenSidepanel .vx_globalNav-main { left: -320px; right: 320px; } .vx_sidepanel { width: 320px; background: linear-gradient(10deg, #00415c, #02225b); min-height: 100%; -webkit-transition: right 250ms ease; -o-transition: right 250ms ease; transition: right 250ms ease; z-index: 0; position: fixed; top: 0; right: 0; padding-bottom: 5em; } .vx_sidepanel .cellDivider { border-left: 1px solid #111111; padding: 0; } .vx_sidepanel-headerContainer { border-bottom: 1px solid #344F7B; color: #ffffff; min-height: 4em; display: table; table-layout: fixed; width: 100%; } .vx_sidepanel-header { display: table-cell; vertical-align: middle; text-align: left; padding-left: 1.5rem; font-family: 'PayPal-Sans-Big', sans-serif; font-weight: 300; width: 80%; line-height: 2.5em; } .vx_sidepanel-headerIcon_left, .vx_sidepanel-headerIcon_right { display: table-cell; vertical-align: middle; text-align: center; width: 20%; } .vx_sidepanel-headerIcon_left button, .vx_sidepanel-headerIcon_right button { background: none; border: none; padding: 1rem; } .vx_sidepanel-body { height: 85%; } .vx_sidepanel-footer { position: absolute; width: 100%; top: 100%; min-height: 5em; margin-top: -5em; padding: 1.5rem; background-color: inherit; color: white; border-top: 1px solid #344F7B; } /** * Sidepanel Item List Styles */ .vx_sidepanel-list { list-style: none; padding: 0; margin: 0; } .vx_sidepanel-item, .vx_sidepanel-item:visited { display: table; width: 100%; padding: 1.5rem; border-bottom: 1px solid #344F7B; background-color: transparent; font-weight: 400; color: #ffffff; -webkit-transition: background-color 0.25s; -moz-transition: background-color 0.25s; -ms-transition: background-color 0.25s; -o-transition: background-color 0.25s; transition: background-color 0.25s; } .vx_sidepanel-item, .vx_sidepanel-item:visited, .vx_sidepanel-item:hover, .vx_sidepanel-item:visited:hover, .vx_sidepanel-item:focus, .vx_sidepanel-item:visited:focus, .vx_sidepanel-item:active, .vx_sidepanel-item:visited:active { text-decoration: none; } .vx_sidepanel-item:hover, .vx_sidepanel-item:visited:hover, .vx_sidepanel-item:focus, .vx_sidepanel-item:visited:focus, .vx_sidepanel-item:active, .vx_sidepanel-item:visited:active { background-color: #0070ba; color: #ffffff; } .vx_sidepanel-item:visited, .vx_sidepanel-item:visited:visited { color: #ffffff; } .vx_sidepanel-itemIcon, .vx_sidepanel-itemIcon_middle { display: table-cell; vertical-align: top; width: 1rem; border: none; padding: 0; } .vx_sidepanel-itemIcon:before, .vx_sidepanel-itemIcon_middle:before { margin-left: -5px; } .vx_sidepanel-itemIcon_middle { vertical-align: middle; } .vx_sidepanel-itemAction { display: table-cell; padding: 1rem 1rem 0 0; } .vx_sidepanel-itemActionMessage { vertical-align: text-bottom; font-weight: 500; } .vx_sidepanel-itemActionMessage:after { padding-left: 5px; font-family: paypal-vx-icons; font-weight: 800; content: "\2192"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vx_sidepanel-itemDismiss { display: table-cell; vertical-align: top; width: 2.75em; padding: 2.25rem 0; text-align: right; } .vx_sidepanel-message { display: table-cell; vertical-align: top; } .vx_sidepanel-messageButton { display: inline-block; min-width: 6rem; padding: 0.75rem 1.5rem; margin-bottom: 1.5rem; border: 1px solid #0070ba; border-radius: 1.5rem; font-size: 0.9375rem; line-height: 1.6; font-family: 'PayPal-Sans', sans-serif; font-weight: 500; text-decoration: none; cursor: pointer; background-color: #0070ba; transition: all 250ms ease; -webkit-font-smoothing: antialiased; font-size: 0.8125rem; line-height: 1.38461538; min-width: 4.5rem; padding: 0.5625rem 1.125rem; background-color: transparent; color: #ffffff; border-color: #ffffff; display: table-cell; vertical-align: middle; text-align: center; } .vx_sidepanel-messageButton:visited, .vx_sidepanel-messageButton:active, .vx_sidepanel-messageButton:hover, .vx_sidepanel-messageButton:focus { color: #ffffff; } .vx_sidepanel-messageButton:visited { text-decoration: none; } .vx_sidepanel-messageButton:hover, .vx_sidepanel-messageButton:focus { background-color: #003087; border: 1px solid #003087; box-shadow: none; text-decoration: none; } .vx_sidepanel-messageButton:focus { outline: none; text-decoration: underline; } .vx_sidepanel-messageButton[disabled], .vx_sidepanel-messageButton[disabled]:hover, .vx_sidepanel-messageButton[disabled]:active, .vx_sidepanel-messageButton.vx_is-disabled, .vx_sidepanel-messageButton.vx_is-disabled:hover, .vx_sidepanel-messageButton.vx_is-disabled:active { color: #cbd2d6; background: #f5f6f8; box-shadow: none; border: 1px solid #cbd2d6; text-decoration: none; cursor: not-allowed; outline: none; -ms-transform: none; -webkit-transform: none; transform: none; } .vx_sidepanel-messageButton + .vx_sidepanel-messageButton { margin-left: 0.75rem; } .vx_sidepanel-messageButton.vx_btn-block { margin-right: 0; margin-left: 0; width: 100%; } .vx_sidepanel-messageButton:hover, .vx_sidepanel-messageButton:focus { background-color: rgba(0, 0, 0, 0.1); color: #ffffff; border-color: #ffffff; box-shadow: 0 0 0 1px #ffffff inset; } @media (max-width: 768px) { .vx_sidepanel-toggleCheckbox:checked ~ .vx_globalNav_main { position: relative; z-index: -1; } } @media (max-width: 479px) { .vx_sidepanel-toggleCheckbox:checked .vx_hasOpenSidepanel .vx_foreground-container { right: 80%; left: -80%; } .vx_sidepanel-toggleCheckbox:checked .vx_hasOpenSidepanel .vx_globalNav-main { left: -80%; right: 80%; } .vx_hasOpenSidepanel .vx_foreground-container { right: 80%; left: -80%; } .vx_hasOpenSidepanel .vx_globalNav-main { left: -80%; right: 80%; } } @media (max-width: 320px) { .vx_sidepanel-toggleCheckbox:checked .vx_hasOpenSidepanel .vx_foreground-container { right: 85%; left: -85%; } .vx_sidepanel-toggleCheckbox:checked .vx_hasOpenSidepanel .vx_globalNav-main { left: -85%; right: 85%; } .vx_hasOpenSidepanel .vx_foreground-container { right: 85%; left: -85%; } .vx_hasOpenSidepanel .vx_globalNav-main { left: -85%; right: 85%; } } .vx_modal, .vx_modal-glimpse, .vx_modal-flow { display: none; position: fixed; top: 100%; z-index: 1050; width: 100%; height: 100%; background: #ffffff; -webkit-transition: top 0.35s; -moz-transition: top 0.35s; -ms-transition: top 0.35s; -o-transition: top 0.35s; transition: top 0.35s; } .vx_modal-glimpse, .vx_modal-flow { background: transparent; } .vx_modal-glimpse .vx_modal-wrapper, .vx_modal-flow .vx_modal-wrapper { display: table-cell; width: 66.6%; } .vx_modal-glimpse .vx_modal-content, .vx_modal-flow .vx_modal-content { padding: 90px 25% 50px; width: 100%; } .vx_modal-glimpse .vx_steppedFlow-container, .vx_modal-flow .vx_steppedFlow-container { padding: 90px 0 50px; } .vx_modal-glimpse .vx_steppedFlow-slide, .vx_modal-flow .vx_steppedFlow-slide { padding: 0 25%; } .vx_modal-glimpse:before, .vx_modal-flow:before, .vx_modal-glimpse:after, .vx_modal-flow:after { display: table-cell; content: ''; } .vx_modal-flow { background: #f4f6f9; } .vx_modal-background { display: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: #f4f6f9; opacity: 0; z-index: 1049; -webkit-transition: opacity 0.15s; -moz-transition: opacity 0.15s; -ms-transition: opacity 0.15s; -o-transition: opacity 0.15s; transition: opacity 0.15s; } .vx_modal-header { font-size: 1.25rem; line-height: 1.5; font-weight: 400; text-transform: none; font-family: 'PayPal-Sans-Big', sans-serif; -webkit-font-smoothing: antialiased; } .vx_modal-header > h1, .vx_modal-header > h2, .vx_modal-header > h3, .vx_modal-header > h4, .vx_modal-header > h5, .vx_modal-header > h6 { margin-top: 0; } .vx_modal-wrapper { display: block; height: 100%; width: 60%; max-width: 700px; margin: 0 auto; padding: 0 20px; background: #ffffff; } .vx_modal-content { padding-top: 114px; } .vx_modal-body { margin-bottom: 68px; } .vx_backBtn_flow, .vx_modal-dismiss_x, .vx_modal-dismiss_x-trigger { padding: 24px 4px 0; } .vx_backBtn_flow { float: left; } .vx_modal-dismiss_x, .vx_modal-dismiss_x-trigger { float: right; border: none; background: none; } .vx_modal-dismiss_x:before, .vx_modal-dismiss_x-trigger:before { font-family: 'paypal-vx-icons'; font-size: 1.5em; content: "\274E"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c2e2f; } .vx_modalPrepToOpen { display: table; table-layout: fixed; } .vx_modalPrepBg { display: block; } .vx_modalBgIsShown { opacity: 0.9; } .vx_modalIsOpening, .vx_modalIsOpen { display: table; table-layout: fixed; top: 0; } .vx_modalIsOpen { position: relative; } .vx_hasOpenModal .vx_foreground-container { position: fixed; } .vx_modalIsClosing { position: fixed; } @media (min-width: 768px) { .vx_modal-header { font-size: 1.875rem; line-height: 1.4; font-weight: 300; text-transform: none; } } @media (min-width: 1024px) { .vx_modal-glimpse .vx_modal-wrapper, .vx_modal-flow .vx_modal-wrapper { width: 700px; } } @media (max-width: 1024px) { .vx_modal-glimpse .vx_modal-content, .vx_modal-flow .vx_modal-content { padding-left: 12.5%; padding-right: 12.5%; } .vx_modal-glimpse .vx_steppedFlow-container, .vx_modal-flow .vx_steppedFlow-container { padding-left: 0; padding-right: 0; } .vx_modal-glimpse .vx_steppedFlow-slide, .vx_modal-flow .vx_steppedFlow-slide { padding: 0 12.5%; } } @media (max-width: 768px) { .vx_modal-glimpse .vx_modal-wrapper, .vx_modal-flow .vx_modal-wrapper { display: table; table-layout: fixed; } .vx_modal-glimpse:before, .vx_modal-flow:before, .vx_modal-glimpse:after, .vx_modal-flow:after { display: none; } .vx_modal-content { padding-top: 3em; min-width: 0; } } @media (max-width: 640px) { .vx_modal-glimpse .vx_modal-wrapper, .vx_modal-flow .vx_modal-wrapper { width: 100%; } .vx_modal-glimpse .vx_modal-content, .vx_modal-flow .vx_modal-content { padding: 72px 8.33% 50px; } .vx_modal-glimpse .vx_steppedFlow-container, .vx_modal-flow .vx_steppedFlow-container { padding-left: 0; padding-right: 0; } .vx_modal-glimpse .vx_steppedFlow-slide, .vx_modal-flow .vx_steppedFlow-slide { padding: 0 8.33%; } .vx_modal-content { padding-top: 3em; min-width: 0; } } @media (max-width: 480px) { .vx_modal-glimpse .vx_modal-content, .vx_modal-flow .vx_modal-content { padding-left: 0; padding-right: 0; } .vx_modal-glimpse .vx_steppedFlow-slide, .vx_modal-flow .vx_steppedFlow-slide { padding: 0; } } /** * DO NOT EDIT THIS FILE AS IT'S GENERATED CODE. * UED: cgrigson, adustin, nvandewater * UIE: jlowery * Note: If modifications are needed, don't modify this file! Either override or make a PR to: * https://github.paypal.com/jlowery/paypal-vxpattern-lib */ /* Icons */ /* Z-index list */ /* user for a bird's eye view of components based on z-axis */ /* for example, if you want to put a button in header, just assign z-index of that button to @zindexHeader */ /* these will overwrite the bootstrap pre defined variables */ /* TODO: check the clean the non-needed modal styles in bootstrap */ /* the same as bootstrap one, just overwrite */ /* Setting for Sidepanel */ /* This is not used by all side panels, only for the default one */ /* what about larger phones like gs3? what about phablets like the note? /* responsive breakpoints */ /* Navigation */ /* Spinner */ /** * DO NOT EDIT THIS FILE AS IT'S GENERATED CODE. * PLEASE NOTE: If you have specific icon needs, place them in your project's own Less file. */ /* * Use this for local testing * @font-face { font-family: 'consumer-icons'; src: url('fonts/ConsumerIcons-Regular.eot'); src: url('fonts/ConsumerIcons-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/ConsumerIcons-Regular.woff') format('woff'), url('fonts/ConsumerIcons-Regular.ttf') format('truetype'), url('fonts/ConsumerIcons-Regular.svg#69ac2c9fc1e0803e59e06e93859bed03') format('svg'); font-style: normal; font-weight: 400; } */ /* * Use this for production * */ @font-face { font-family: 'consumer-icons'; src: url('https://www.paypalobjects.com/ui-web/iconfont-consumer/3-4-0/fonts/ConsumerIcons-Regular.eot'); src: url('https://www.paypalobjects.com/ui-web/iconfont-consumer/3-4-0/fonts/ConsumerIcons-Regular.eot?#iefix') format('embedded-opentype'), url('https://www.paypalobjects.com/ui-web/iconfont-consumer/3-4-0/fonts/ConsumerIcons-Regular.woff') format('woff'), url('https://www.paypalobjects.com/ui-web/iconfont-consumer/3-4-0/fonts/ConsumerIcons-Regular.ttf') format('truetype'), url('https://www.paypalobjects.com/ui-web/iconfont-consumer/3-4-0/fonts/ConsumerIcons-Regular.svg#69ac2c9fc1e0803e59e06e93859bed03') format('svg'); font-style: normal; font-weight: 400; } .icon { font-family: 'consumer-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 0; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-small:before { font-size: 1.58rem; } .icon-medium:before { font-size: 2.6rem; } .icon-large:before { font-size: 7.8rem; } .icon-burger-small:before { content: "\e000"; } .icon-slider-small:before { content: "\e001"; } .icon-slider-half-small:before { content: "\e002"; } .icon-close-small:before { content: "\e003"; } .icon-add-small:before { content: "\e004"; } .icon-arrow-down-small:before { content: "\e005"; } .icon-arrow-up-small:before { content: "\e006"; } .icon-arrow-left-small:before { content: "\e007"; } .icon-arrow-right-small:before { content: "\e008"; } .icon-arrow-down-half-small:before { content: "\e009"; } .icon-arrow-up-half-small:before { content: "\e010"; } .icon-arrow-left-half-small:before { content: "\e011"; } .icon-arrow-right-half-small:before { content: "\e012"; } .icon-clear-half-small:before { content: "\e013"; } .icon-checkmark-small:before { content: "\e014"; } .icon-checkmark-small-bold:before { content: "\e015"; } .icon-action-arrow-half-small:before { content: "\e016"; } .icon-tooltip-outline-small:before { content: "\e017"; } .icon-tooltip-small:before { content: "\e018"; } .icon-info-small:before { content: "\e019"; } .icon-positive-small:before { content: "\e020"; } .icon-attention-small:before { content: "\e021"; } .icon-critical-small:before { content: "\e022"; } .icon-info-large:before { content: "\e023"; } .icon-positive-large:before { content: "\e024"; } .icon-attention-large:before { content: "\e025"; } .icon-critical-large:before { content: "\e026"; } .icon-pp-logo:before { content: "\e029"; } .icon-visa-logo:before { content: "\e030"; } .icon-mastercard-logo:before { content: "\e031"; } .icon-maestro-logo:before { content: "\e032"; } .icon-amex-logo:before { content: "\e033"; } .icon-discover-logo:before { content: "\e034"; } .icon-card-half-solid:before { content: "\e035"; } .icon-bank-half-solid:before { content: "\e036"; } .icon-profile-large:before { content: "\e037"; } .icon-profile-add-large:before { content: "\e038"; } .icon-notification-small:before { content: "\e039"; } .icon-settings-small:before { content: "\e040"; } .icon-profile-small:before { content: "\e041"; } .icon-funnel-small:before { content: "\e042"; } .icon-delete-small:before { content: "\e043"; } .icon-edit-small:before { content: "\e044"; } .icon-lock-small:before { content: "\e045"; } .icon-pdf-small:before { content: "\e046"; } .icon-contact-small:before { content: "\e047"; } .icon-undo-small:before { content: "\e048"; } .icon-cancel-small:before { content: "\e049"; } .icon-simple-list-small:before { content: "\e050"; } .icon-detailed-list-small:before { content: "\e051"; } .icon-print-small:before { content: "\e052"; } .icon-camera-small:before { content: "\e053"; } .icon-info-outline-small:before { content: "\e054"; } .icon-us-dollar-outline-small:before { content: "\e055"; } .icon-calendar-half-small:before { content: "\e056"; } .icon-hiper-logo:before { content: "\e057"; } .icon-hipercard-logo:before { content: "\e058"; } .icon-elo-logo:before { content: "\e059"; } .icon-star-small:before { content: "\e060"; } .icon-jcb-logo:before { content: "\e061"; } .icon-attention-outline-small:before { content: "\e062"; } .icon-unionpay-logo:before { content: "\e063"; } .icon-search-small:before { content: "\e064"; } .icon-desktop-small:before { content: "\e065"; } .icon-mobile-small:before { content: "\e066"; } .icon-laptop-small:before { content: "\e067"; } .icon-tablet-small:before { content: "\e068"; } .icon-send-money:before { content: "\e500"; } .icon-request-money:before { content: "\e501"; } .icon-photo:before { content: "\e502"; } .icon-gift-cards:before { content: "\e503"; } .icon-credit-card:before { content: "\e504"; } .icon-truck:before { content: "\e505"; } .icon-email:before { content: "\e506"; } .icon-email-solid:before { content: "\e507"; } .icon-bank-check:before { content: "\e508"; } .icon-calendar:before { content: "\e509"; } .icon-holiday:before { content: "\e510"; } .icon-gift:before { content: "\e511"; } .icon-wallet:before { content: "\e512"; } .icon-play-video:before { content: "\e513"; } .icon-heart:before { content: "\e514"; } .icon-shield:before { content: "\e515"; } .icon-tunes:before { content: "\e516"; } .icon-invoice:before { content: "\e517"; } .icon-shopping-bag:before { content: "\e518"; } .icon-phone:before { content: "\e519"; } .icon-phone-solid:before { content: "\e520"; } .icon-tag:before { content: "\e521"; } .icon-delivery:before { content: "\e522"; } .icon-questionmark:before { content: "\e523"; } .icon-cut-coupons:before { content: "\e524"; } .icon-register:before { content: "\e525"; } .icon-house:before { content: "\e526"; } .icon-gift-card:before { content: "\e527"; } .icon-messages:before { content: "\e528"; } .icon-add-money:before { content: "\e529"; } .icon-send-check:before { content: "\e530"; } .icon-paypal-me:before { content: "\e531"; } .icon-pp-logo-outline:before { content: "\e532"; } .icon-money-bag:before { content: "\e533"; } .icon-chip-pin:before { content: "\e534"; } .icon-boleto-ready:before { content: "\e535"; } .icon-boleto-topup:before { content: "\e536"; } .icon-clock-pay:before { content: "\e537"; } .icon-speeding-cart:before { content: "\e538"; } .icon-international-transfer:before { content: "\e539"; } .icon-link-small:before { content: "\e540"; } html { font-size: 14px; } body { background-color: #ffffff; background-image: none; font-size: 15px; font-size: 1.07142857rem; } main { padding-bottom: 30px; } .content { width: 528px; margin: 0 auto; background: #fff; border-radius: 10px; position: relative; overflow: hidden; opacity: 1; } .content .innerContainer { padding: 25px 40px; max-width: 528px; margin-left: auto; margin-right: auto; } .background { background: transparent url("https://www.paypalobjects.com/webstatic/mktg/wright/home/offer-wayfair-fade.jpg") center center no-repeat; background-size: cover; background-attachment: fixed; min-height: 100vh; } .backgroundColor { background-color: #F5F7FA; } .stickyFooter { min-height: 94vh; height: auto; } .hide { display: none; } .show { display: block; } .accessAid { margin-left: -2000px; } .vx_modal-flow { height: 100vh; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 5000s; } @media all and (min-width: 768px) and (max-width: 1024px) { .backgroundColor { background-color: #FFFFFF; } } @media all and (max-width: 767px) { .content { width: 100%; margin: 0; } .content .innerContainer { padding: 0px 20px; } .background { background: none; } .backgroundColor { background-color: #FFFFFF; } } .layout-direction-RTL { direction: rtl; } .signup.app-wrapper { padding: 0px; } header { display: block; max-width: 65%; margin: 0 auto; } header a.headerLogoRegular { background: transparent url("https://www.paypalobjects.com/digitalassets/c/website/logo/full-text/pp_fc_hl.svg") center center no-repeat; background-size: auto 27px; height: 1.9rem; margin: 1rem 0; text-indent: -999px; display: block; float: left; width: 8rem; } header a.headerLogoWhite { background: transparent url("https://www.paypalobjects.com/digitalassets/c/website/logo/full-text/pp_rv_hl.svg") center center no-repeat; background-size: auto 27px; height: 1.9rem; margin: 21px 0; text-indent: -999px; display: block; float: left; width: 8rem; } header div.btnGrp { display: block; float: right; } header div.btnGrp .vx_btn { margin-bottom: 0; } header div.btnGrp a, header div.btnGrp a:hover, header div.btnGrp a:active, header div.btnGrp a:visited, header div.btnGrp a:link { text-decoration: none; } header div.btnGrp .withShieldIcon:before { content: ' '; background-position: 0 -281px; background-image: url(//www.paypalobjects.com/webstatic/i/consumer/onboarding/superbowlAsset.png); background-repeat: no-repeat; height: 20px; width: 20px; display: inline-block; float: left; margin: 2px -25px; } @media all and (max-width: 767px) { header { max-width: 100%; margin: 0 10px; } header a.headerLogoRegular { background: transparent url("https://www.paypalobjects.com/digitalassets/c/website/logo/monogram/pp_fc_mg.svg") center center no-repeat; background-position: 0 50%; background-size: auto 29px; width: 2rem; } header a.headerLogoWhite { background: transparent url("https://www.paypalobjects.com/digitalassets/c/website/logo/monogram/pp_fc_mg.svg") center center no-repeat; background-position: 0 50%; background-size: auto 29px; width: 2rem; } } footer { display: block; max-width: 65%; margin: 0 auto; color: #fff; } footer .country { margin-top: 5px; } footer ul { display: inline-block; margin: 0; } footer ul li { list-style: none; display: inline-block; padding: 1rem; } footer ul li a { color: #fff; } footer ul li a:hover { color: #fff; } footer ul li a:visited { color: #fff; } footer.dark { color: #000000; } footer.dark ul li a { color: #000000; } footer.dark ul li a:hover, footer.dark ul li a:visited { color: #000000; } .country-and-lang-selector { margin-bottom: 10%; } .country-and-lang-selector .country-layout-direction-RTL { float: left; } .country-and-lang-selector .lang-link { float: right; } .country-and-lang-selector .lang-link.lang-layout-direction-RTL { float: left; } @media all and (max-width: 767px) { footer { border-top: 1px solid #CDCDCD; background: #EFEFEF; padding: 10px 5px; max-width: 100%; color: black; } footer .country { margin-top: 3px; } footer span { font-size: .85em; } footer ul li { padding: 0.4rem; } footer ul li a { color: black; font-size: .846em; } footer ul li a:hover, footer ul li a:visited { color: black; } } .onboardingCreditCardNum { position: absolute; top: 26px; width: 37px; height: 30px; right: 8px; background-image: url("//www.paypalobjects.com/webstatic/i/consumer/onboarding/sprites_cc_logos.png"); background-position: 0 82%; transition: transform 0.2s ease-in-out; -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transform: transform 0.2s ease-in-out; -ms-transform: transform 0.2s ease-in-out; -o-transform: transform 0.2s ease-in-out; transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); /* Chrome, Safari, Opera */ -moz-transform: translate3d(0, -50%, 0); /*FireFox*/ -ms-transform: translate3d(0, -50%, 0); /* IE 9 */ -o-transform: translate3d(0, -50%, 0); /* Older version of Opera */ } .onboardingCreditCardNum.credit-card-icon-RTL { left: 8px; right: inherit; } .vx_has-error-with-message :not(.hasFocus) .onboardingCreditCardNum { right: 0px; } .hasError.onboardingCreditCardNum { transform: translate3d(-40px, -50%, 0); -webkit-transform: translate3d(-40px, -50%, 0); -moz-transform: translate3d(-40px, -50%, 0); -ms-transform: translate3d(-40px, -50%, 0); -o-transform: translate3d(-40px, -50%, 0); } :focus + .hasError.onboardingCreditCardNum { transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); } .onboardingCreditCardNum { transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); } .onboardingCreditCardNum.defaultCvv { background-position: 0 88%; } .useFIServ { background-image: url("//www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/sprite/sprites_cc_logos.png"); background-position: 0 145px; } .useFIServ.defaultCvv { background-position: 0 115px; } .onboardingCreditCardNum.AMEXCvv { background-position: 0 94%; } .useFiServ.AMEXCvv { background-position: 0 86px; } .onboardingCreditCardNum.visa { background-position: 0 -0.7%; } .useFIServ.visa { background-position: 0 5px; } .onboardingCreditCardNum.amex { background-position: 0 11%; } .useFIServ.amex { background-position: 0 495px; } .onboardingCreditCardNum.master_card { background-position: 0 5%; } .useFIServ.master_card { background-position: 0 522px; } .onboardingCreditCardNum.discover { background-position: 0 17%; } .useFIServ.discover { background-position: 0 465px; } .onboardingCreditCardNum.switch { background-position: 0 35%; } .useFIServ.switch { background-position: 0 35%; } .onboardingCreditCardNum.DINER { background-position: 0 23%; } .useFIServ.DINER { background-position: 0 435px; } .onboardingCreditCardNum.jcb { background-position: 0 29%; } .useFIServ.jcb { background-position: 0 405px; } .onboardingCreditCardNum.maestro { background-position: 0 35%; } .useFIServ.maestro { background-position: 0 375px; } .onboardingCreditCardNum.cb_nationale { background-position: 0 47%; } .useFIServ.cb_nationale { background-position: 0 320px; } .onboardingCreditCardNum.confinoga { background-position: 0 70%; } .useFIServ.cofinoga { background-position: 0 202px; } .onboardingCreditCardNum.cofidis { background-position: 0 76%; } .onboardingCreditCardNum.cetelem { background-position: 0 52.7%; } .useFIServ.cetelem { background-position: 0 290px; } .onboardingCreditCardNum.generic { background-position: 0 82%; } .useFIServ.generic { background-position: 0 145px; } .useFIServ.elo { background-position: 0 30px; } .IT .onboardingCreditCardNum.cetelem { background-position: 0 58.5%; } .ES .onboardingCreditCardNum.cetelem { background-position: 0 64.5%; } .C2 .onboardingCreditCardNum.cup { background-position: 0 100%; } .onboardingCreditCardNum.iconText { display: none; } .IT .useFIServ.cetelem { background-position: 0 290px; } .ES .useFIServ.cetelem { background-position: 0 290px; } .C2 .useFIServ.cup { background-position: 0 60px; } .ppcAddress { margin-top: 24px; border: 1px solid #d4d4d4; padding: 20px; border-radius: 5px; } .signup .busyOverlay { z-index: 2001; position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); border-radius: 10px; text-align: center; -webkit-transition: opacity 0.3s ease-in; -o-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; opacity: .99; } .signup .busyIcon { z-index: 2002; content: ' '; border-width: 6px; border-style: solid; border-color: #0070ba #0070ba #0070ba #ccc; position: absolute; top: 60%; left: 50%; height: 50px; width: 50px; display: inline-block; border-radius: 50%; animation: rotate .7s linear 0s infinite normal; } @keyframes rotate { from { transform: translate3d(-50%, -200%, 0) rotate(0); } to { transform: translate3d(-50%, -200%, 0) rotate(360deg); } } .app-wrapper .busyOverlay { position: fixed; border-radius: 0px; } .addBank .bankName { font-family: 'PayPal-Sans-Big'; font-weight: normal; font-variant: normal; margin: 20px 10px 10px 10px; } .addBank .routingNumberError { display: block; margin: 10px; } .addBank .routingNumberError p { font-family: "pp-sans-big-medium", Helvetica Neue, Arial, sans-serif; font-weight: normal; font-variant: normal; } .addBank .disclosure { display: block; font-family: 'PayPal-Sans'; margin-bottom: 10px; } .addBank .reminder { position: relative; display: block; margin-top: 10px; margin-bottom: 0px; padding: 10px; background-color: #d2e7fa; font-family: 'PayPal-Sans'; } .addBank .reminder strong { display: block; padding-left: 18px; } .addBank .reminder strong:before { content: ' '; background-image: url("https://www.paypalobjects.com/webstatic/i/consumer/onboarding/sprites_onboarding.png"); background-repeat: no-repeat; width: 20px; height: 20px; display: inline-block; background-size: 45px; background-position: 0 24.5%; left: 10px; position: absolute; top: 13px; } .addBank .bankGroupFields { margin-top: 0px; } .addBank .bankNameSpinner { margin-top: 20px; margin-left: auto; margin-right: auto; } .addBankInfo { background-color: #d2e7fa; padding: 10px; } .addBankInfo h1 { font-weight: bold; text-align: left; } .addBankInfo h5 { font-weight: bold; } .notification .container { padding: 100px 0 0 0; display: inline-block; width: 100%; border: 0; } .notification .box { width: 100%; border-radius: 0; border-left: none; border-right: none; border-top: 1px solid transparent; border-bottom: 1px solid transparent; box-sizing: border-box; display: inline-block; padding-top: 10px; padding-left: 20px; } .notification .message.notification-error-RTL { margin-right: 20px; } .notification .message.notification-error-RTL::before { left: 0; } .notification .message { margin-left: 20px; } .notification .message::before { box-sizing: border-box; content: ''; height: 25px; width: 25px; display: block; background-image: url("https://www.paypalobjects.com/webstatic/i/consumer/onboarding/onboarding_form.png"); background-repeat: no-repeat; float: left; margin-right: 5px; position: absolute; } .notification .msgContainer { padding-left: 30px; display: inline-block; width: 85%; } .notification .box.error { border-color: #c72e2e; background-color: #FFF7F7; } .notification .box.error .message::before { background-position: 0 62%; } .notification .box.success { border-color: #1b9e1b; background-color: transparent; } .notification .box.success .message::before { background-position: 0 30.5%; } .signup .checkGraphics { margin-right: auto; margin-left: auto; background-image: url(//www.paypalobjects.com/webstatic/i/consumer/onboarding/image_check.jpg); background-repeat: no-repeat; height: 100px; background-size: contain; background-position: center center; position: relative; width: 438px; } .signup .checkGraphicsCA { margin-right: auto; margin-left: auto; background-image: url(//www.paypalobjects.com/webstatic/i/consumer/onboarding/image_check_CA_2x.png); background-repeat: no-repeat; height: 100px; background-size: contain; background-position: center center; position: relative; width: 438px; } .signup .checkGraphicsFocus { opacity: 0.01; box-sizing: border-box; position: absolute; border: 1px solid #009BE1; border-radius: 3px; bottom: 12px; height: 18px; width: 27%; left: 4%; box-shadow: 0px 0px 7px 0px #009be1; transition: transform 0.3s ease-in-out, width 0.3s ease-in-out, opacity 0.2s ease-in-out; } .signup .checkGraphicsFocus.account { transform: translate3d(134px, 0, 0); } .signup .checkGraphicsFocusCA { opacity: 0.01; box-sizing: border-box; position: absolute; border: 1px solid #009BE1; border-radius: 3px; bottom: 12px; height: 18px; width: 17%; left: 21%; box-shadow: 0px 0px 7px 0px #009be1; transition: transform 0.3s ease-in-out, width 0.3s ease-in-out, opacity 0.2s ease-in-out; } .signup .checkGraphicsFocusCA.account { left: 55%; } .signup .routing { opacity: .99; } .signup .routing1 { opacity: .99; width: 12%; left: 43%; } .signup .account { opacity: .99; width: 28%; } @media all and (max-width: 767px) { .signup .checkGraphicsFocus { left: 4%; width: 30%; } .signup .account { transform: translate3d(102%, 0, 0); width: 30%; } } @media (max-width: 455px) { .signup .checkGraphics { width: 310px; } .signup .checkGraphicsFocus { bottom: 20px; } } /* Country selector * used in country-worldwide partial (/resources/partials/newdesign/country-worldwide) */ .country-selector .country { display: inline-block; overflow: hidden; height: 24px; text-align: left; min-width: 32px; background: transparent url("https://www.paypalobjects.com/webstatic/mktg/icons/sprite_countries_flag4.png") 5px 100px no-repeat; } .country-selector ul li { display: inline-block; float: left; min-height: 3em; } .country-selector ul li.title { clear: both; display: block; float: none; min-height: 2em; } .country-selector .zambia, .country-selector .ZM { background-position: 5px 1px; } .country-selector .southafrica, .country-selector .ZA { background-position: 5px -34px; } .country-selector .yemen, .country-selector .YE { background-position: 5px -69px; } .country-selector .samoa, .country-selector .WS { background-position: 5px -104px; } .country-selector .vanuatu, .country-selector .VU { background-position: 5px -139px; } .country-selector .unitedstates, .country-selector .US { background-position: 5px -383px; } .country-selector .taiwan, .country-selector .TW { background-position: 5px -524px; } .country-selector .turkey, .country-selector .TR { background-position: 5px -629px; } .country-selector .thailand, .country-selector .TH { background-position: 5px -804px; } .country-selector .switzerland, .country-selector .CH { background-position: 5px -944px; } .country-selector .argentina, .country-selector .AR { background-position: 5px -6055px; } .country-selector .slovakia, .country-selector .SK { background-position: 5px -1224px; } .country-selector .singapore, .country-selector .SG { background-position: 5px -1294px; } .country-selector .sweden, .country-selector .SE { background-position: 5px -1329px; } .country-selector .portugal, .country-selector .PT { background-position: 5px -1679px; } .country-selector .poland, .country-selector .PL { background-position: 5px -1714px; } .country-selector .philippines, .country-selector .PH { background-position: 5px -1749px; } .country-selector .newzealand, .country-selector .NZ { background-position: 5px -1959px; } .country-selector .norway, .country-selector .NO { background-position: 5px -2099px; } .country-selector .netherlands, .country-selector .NL { background-position: 5px -2134px; } .country-selector .malaysia, .country-selector .MY { background-position: 5px -2379px; } .country-selector .mexico, .country-selector .MX { background-position: 5px -2414px; } .country-selector .martinique, .country-selector .MQ { background-position: 5px -2659px; } .country-selector .luxembourg, .country-selector .LU { background-position: 5px -2904px; } .country-selector .southkorea, .country-selector .KR { background-position: 5px -3254px; } .country-selector .japan, .country-selector .JP { background-position: 5px -3499px; } .country-selector .jamaica, .country-selector .JM { background-position: 5px -3569px; } .country-selector .italy, .country-selector .IT { background-position: 5px -3604px; } .country-selector .israel, .country-selector .IL { background-position: 5px -3709px; } .country-selector .ireland, .country-selector .IE { background-position: 5px -3744px; } .country-selector .indonesia, .country-selector .ID { background-position: 5px -3779px; } .country-selector .hungary, .country-selector .HU { background-position: 5px -3814px; } .country-selector .hongkong, .country-selector .HK { background-position: 5px -3919px; } .country-selector .greece, .country-selector .GR { background-position: 5px -4059px; } .country-selector .unitedkingdom, .country-selector .GB { background-position: 5px -4304px; } .country-selector .france, .country-selector .reunion, .country-selector .guadeloupe, .country-selector .FR, .country-selector .RE, .country-selector .GP { background-position: 5px -4374px; } .country-selector .frenchguiana, .country-selector .GF { background-position: 5px -4374px; } .country-selector .finland, .country-selector .FI { background-position: 5px -4549px; } .country-selector .spain, .country-selector .ES { background-position: 5px -4618px; } .country-selector .ecuador, .country-selector .EC { background-position: 5px -4724px; } .country-selector .algeria, .country-selector .DZ { background-position: 5px -4759px; } .country-selector .denmark, .country-selector .DK { background-position: 5px -4864px; } .country-selector .germany, .country-selector .DE { background-position: 5px -4934px; } .country-selector .egypt, .country-selector .EG { background-position: 5px -69px; } .country-selector .czechrepublic, .country-selector .CZ { background-position: 5px -4969px; } .country-selector .china, .country-selector .CN, .country-selector .C2 { background-position: 5px -5144px; } .country-selector .canada, .country-selector .CA { background-position: 5px -5319px; } .country-selector .botswana, .country-selector .BW { background-position: 5px -5389px; } .country-selector .belize, .country-selector .BZ { background-position: 5px -5354px; } .country-selector .bahamas, .country-selector .BS { background-position: 5px -5459px; } .country-selector .brazil, .country-selector .BR { background-position: 5px -5494px; } .country-selector .bermuda, .country-selector .BM { background-position: 5px -5599px; } .country-selector .bahrain, .country-selector .BH { background-position: 5px -5704px; } .country-selector .belgium, .country-selector .BE { background-position: 5px -5809px; } .country-selector .barbados, .country-selector .BB { background-position: 5px -5844px; } .country-selector .bosniaandherzegovina, .country-selector .BA { background-position: 5px -5879px; } .country-selector .burkinafaso, .country-selector .BF { background-position: 5px -5773px; } .country-selector .australia, .country-selector .AU { background-position: 5px -5984px; } .country-selector .austria, .country-selector .AT { background-position: 5px -6019px; } .country-selector .albania, .country-selector .AL { background-position: 5px -6194px; } .country-selector .antiguaandbarbuda, .country-selector .AG { background-position: 5px -6264px; } .country-selector .andorra, .country-selector .AD { background-position: 5px -6334px; } .country-selector .bulgaria, .country-selector .BG { background-position: 5px -5739px; } .country-selector .cambodia, .country-selector .KH { background-position: 5px -3397px; } .country-selector .caymanislands, .country-selector .KY { background-position: 5px -4479px; } .country-selector .colombia, .country-selector .CO { background-position: 5px -5109px; } .country-selector .croatia, .country-selector .HR { background-position: 5px -3849px; } .country-selector .cyprus, .country-selector .CY { background-position: 5px -5004px; } .country-selector .dominica, .country-selector .DM { background-position: 5px -4829px; } .country-selector .dominicanrepublic, .country-selector .DO { background-position: 5px -4794px; } .country-selector .elsalvador, .country-selector .SV { background-position: 5px -979px; } .country-selector .eritrea, .country-selector .ER { background-position: 5px -4655px; } .country-selector .estonia, .country-selector .EE { background-position: 5px -4689px; } .country-selector .ethiopia, .country-selector .ET { background-position: 5px -4587px; } .country-selector .faroeislands, .country-selector .FO { background-position: 5px -4409px; } .country-selector .fiji, .country-selector .FJ { background-position: 5px -4514px; } .country-selector .frenchpolynesia, .country-selector .PF { background-position: 5px -1819px; } .country-selector .gibraltar, .country-selector .GI { background-position: 5px -4199px; } .country-selector .greenland, .country-selector .GL { background-position: 5px -4164px; } .country-selector .grenada, .country-selector .GD { background-position: 5px -4269px; } .country-selector .guatemala, .country-selector .GT { background-position: 5px -4024px; } .country-selector .honduras, .country-selector .HN { background-position: 5px -3884px; } .country-selector .iceland, .country-selector .IS { background-position: 5px -3639px; } .country-selector .jordan, .country-selector .JO { background-position: 5px -3534px; } .country-selector .kenya, .country-selector .KE { background-position: 5px -3464px; } .country-selector .kuwait, .country-selector .KW { background-position: 5px -3219px; } .country-selector .latvia, .country-selector .LV { background-position: 5px -2869px; } .country-selector .lesotho, .country-selector .LS { background-position: 5px -2974px; } .country-selector .liechtenstein, .country-selector .LI { background-position: 5px -3044px; } .country-selector .lithuania, .country-selector .LT { background-position: 5px -2939px; } .country-selector .malawi, .country-selector .MW { background-position: 5px -2449px; } .country-selector .malta, .country-selector .MT { background-position: 5px -2554px; } .country-selector .mongolia, .country-selector .MN { background-position: 5px -6369px; } .country-selector .morocco, .country-selector .MA { background-position: 5px -2834px; } .country-selector .mozambique, .country-selector .MZ { background-position: 5px -2344px; } .country-selector .newcaledonia, .country-selector .NC { background-position: 5px -2274px; } .country-selector .oman, .country-selector .OM { background-position: 5px -1924px; } .country-selector .palau, .country-selector .PW { background-position: 5px -1644px; } .country-selector .panama, .country-selector .PA { background-position: 5px -1889px; } .country-selector .philippines, .country-selector .PH { background-position: 5px -1749px; } .country-selector .pitcairnislands, .country-selector .PN { background-position: 5px -6229px; } .country-selector .qatar, .country-selector .QA { background-position: 5px -5704px; } .country-selector .romania, .country-selector .RO { background-position: 5px -1539px; } .country-selector .russia, .country-selector .RU { background-position: 5px -1503px; } .country-selector .rwanda, .country-selector .RW { background-position: 5px -6439px; } .country-selector .saotomeandprincipe, .country-selector .ST { background-position: 5px -1014px; } .country-selector .saintkittsandnevis, .country-selector .KN { background-position: 5px -3289px; } .country-selector .sainthelena, .country-selector .SH { background-position: 5px -909px; } .country-selector .saintvincentandthegrenadines, .country-selector .VC { background-position: 5px -278px; } .country-selector .saintlucia, .country-selector .LC { background-position: 5px -3079px; } .country-selector .saintpierreandmiquelon, .country-selector .PM { background-position: 5px -6824px; } .country-selector .sanmarino, .country-selector .SM { background-position: 5px -1154px; } .country-selector .saudiarabia, .country-selector .SA { background-position: 5px -1434px; } .country-selector .seychelles, .country-selector .SC { background-position: 5px -1364px; } .country-selector .slovenia, .country-selector .SI { background-position: 5px -1259px; } .country-selector .tajikistan, .country-selector .TJ { background-position: 5px -769px; } .country-selector .trinidadandtobago, .country-selector .TT { background-position: 5px -594px; } .country-selector .unitedarabemirates, .country-selector .AE { background-position: 5px -6299px; } .country-selector .uruguay, .country-selector .UY { background-position: 5px -351px; } .country-selector .venezuela, .country-selector .VE { background-position: 5px -244px; } .country-selector .india, .country-selector .IN { background-position: 5px -3674px; } .country-selector .vietnam, .country-selector .VN { background-position: 5px -174px; } .country-selector .angola, .country-selector .AO { background-position: 5px -6089px; } .country-selector .anguilla, .country-selector .AI { background-position: 5px -6229px; } .country-selector .armenia, .country-selector .AM { background-position: 5px -6159px; } .country-selector .aruba, .country-selector .AW { background-position: 5px -5949px; } .country-selector .azerbaijanrepublic, .country-selector .AZ { background-position: 5px -5914px; } .country-selector .benin, .country-selector .BJ { background-position: 5px -5634px; } .country-selector .bhutan, .country-selector .BT { background-position: 5px -5424px; } .country-selector .bolivia, .country-selector .BO { background-position: 5px -5529px; } .country-selector .brunei, .country-selector .BN { background-position: 5px -5564px; } .country-selector .burundi, .country-selector .BI { background-position: 5px -5669px; } .country-selector .capeverde, .country-selector .CV { background-position: 5px -5039px; } .country-selector .chad, .country-selector .TD { background-position: 5px -1539px; } .country-selector .chile, .country-selector .CL { background-position: 5px -5179px; } .country-selector .comoros, .country-selector .KM { background-position: 5px -3324px; } .country-selector .cookislands, .country-selector .CK { background-position: 5px -5214px; } .country-selector .costarica, .country-selector .CR { background-position: 5px -5074px; } .country-selector .democraticrepublicofthecongo, .country-selector .CD { background-position: 5px -5284px; } .country-selector .djibouti, .country-selector .DJ { background-position: 5px -4899px; } .country-selector .falklandislands, .country-selector .FK { background-position: 5px -6229px; } .country-selector .gabonrepublic, .country-selector .GA { background-position: 5px -4339px; } .country-selector .gambia, .country-selector .GM { background-position: 5px -4129px; } .country-selector .georgia, .country-selector .GE { background-position: 5px -6652px; } .country-selector .guinea, .country-selector .guineabissau, .country-selector .GN, .country-selector .GW { background-position: 5px -3989px; } .country-selector .guyana, .country-selector .GY { background-position: 5px -3954px; } .country-selector .kazakhstan, .country-selector .KZ { background-position: 5px -3149px; } .country-selector .kiribati, .country-selector .KI { background-position: 5px -3359px; } .country-selector .kyrgyzstan, .country-selector .KG { background-position: 5px -3429px; } .country-selector .laos, .country-selector .LA { background-position: 5px -3114px; } .country-selector .madagascar, .country-selector .MG { background-position: 5px -2799px; } .country-selector .maldives, .country-selector .MV { background-position: 5px -2484px; } .country-selector .mali, .country-selector .ML { background-position: 5px -2729px; } .country-selector .marshallislands, .country-selector .MH { background-position: 5px -2764px; } .country-selector .mauritania, .country-selector .MR { background-position: 5px -2624px; } .country-selector .mauritius, .country-selector .MU { background-position: 5px -2519px; } .country-selector .micronesia, .country-selector .FM { background-position: 5px -4444px; } .country-selector .montserrat, .country-selector .MS { background-position: 5px -2589px; } .country-selector .mayotte, .country-selector .YT { background-position: 5px -6544px; } .country-selector .namibia, .country-selector .NA { background-position: 5px -2309px; } .country-selector .nauru, .country-selector .NR { background-position: 5px -2029px; } .country-selector .nepal, .country-selector .NP { background-position: 5px -2064px; } .country-selector .netherlandsantilles, .country-selector .AN { background-position: 5px -6124px; } .country-selector .nicaragua, .country-selector .NI { background-position: 5px -2169px; } .country-selector .niger, .country-selector .NE { background-position: 5px -2239px; } .country-selector .niue, .country-selector .NU { background-position: 5px -1994px; } .country-selector .norfolkisland, .country-selector .NF { background-position: 5px -2204px; } .country-selector .papuanewguinea, .country-selector .PG { background-position: 5px -1784px; } .country-selector .peru, .country-selector .PE { background-position: 5px -1854px; } .country-selector .republicofcongo, .country-selector .CG { background-position: 5px -5284px; } .country-selector .senegal, .country-selector .SN { background-position: 5px -1119px; } .country-selector .serbia, .country-selector .RS { background-position: 5px -6718px; } .country-selector .sierraleone, .country-selector .SL { background-position: 5px -1189px; } .country-selector .solomonislands, .country-selector .SB { background-position: 5px -1399px; } .country-selector .somalia, .country-selector .SO { background-position: 5px -1084px; } .country-selector .srilanka, .country-selector .LK { background-position: 5px -3009px; } .country-selector .sthelena, .country-selector .SH { background-position: 5px -909px; } .country-selector .suriname, .country-selector .SR { background-position: 5px -1049px; } .country-selector .swaziland, .country-selector .SZ { background-position: 5px -6509px; } .country-selector .svalbardandjanmayen, .country-selector .SJ { background-position: 5px -2099px; } .country-selector .tanzania, .country-selector .TZ { background-position: 5px -489px; } .country-selector .togo, .country-selector .TG { background-position: 5px -839px; } .country-selector .tonga, .country-selector .TO { background-position: 5px -664px; } .country-selector .tunisia, .country-selector .TN { background-position: 5px -699px; } .country-selector .turkmenistan, .country-selector .TM { background-position: 5px -734px; } .country-selector .turksandcaicos, .country-selector .TC { background-position: 5px -909px; } .country-selector .tuvalu, .country-selector .TV { background-position: 5px -559px; } .country-selector .uganda, .country-selector .UG { background-position: 5px -419px; } .country-selector .ukraine, .country-selector .UA { background-position: 5px -454px; } .country-selector .vaticancity, .country-selector .VA { background-position: 5px -314px; } .country-selector .virginislands, .country-selector .VG { background-position: 5px -209px; } .country-selector .wallisandfutuna, .country-selector .WF { background-position: 5px -6792px; } .country-selector .montenegro, .country-selector .ME { background-position: 5px -6859px; } .country-selector .macedonia, .country-selector .MK { background-position: 5px -6894px; } .country-selector .moldova, .country-selector .MD { background-position: 5px -6929px; } .country-selector .kosovo, .country-selector .XK { background-position: 5px -6964px; } .country-selector .belarus, .country-selector .BY { background-position: 5px -6999px; } .country-selector .monaco, .country-selector .MC { background-position: 5px -7034px; } .country-selector .nigeria, .country-selector .NG { background-position: 5px -7069px; } .country-selector .ghana, .country-selector .GH { background-position: 5px -7104px; } .country-selector .cotedivoire, .country-selector .CI { background-position: 5px -7139px; } .country-selector .cameroon, .country-selector .CM { background-position: 5px -7174px; } .country-selector .zimbabwe, .country-selector .ZW { background-position: 5px -7209px; } .country-selector .paraguay, .country-selector .PY { background-position: 5px -7244px; } .picker { float: right; cursor: pointer; } .country-selector ul li { list-style: none; width: 20%; } .country-selector ul li a.country { padding: 3px 10px 0 35px; box-sizing: border-box; overflow: visible; line-height: 1.2em; display: block; height: 30px; min-width: 30px; color: #777; font-weight: normal; } .country-selector ul li a.country:hover { color: #777; } .country-selector ul li a.country:visited { color: #777; } @media all and (max-width: 767px) { .country-selector ul li { width: 50%; float: none; } } .modalWindow { position: absolute; top: 0; z-index: 999999; min-height: 100vh; min-width: 100vw; background: #fff; } .modalWindow .modalWrapper { display: block; margin: 0 auto; width: 70%; } .modalWindow .buttonHolder { display: block; min-height: 10rem; } @media all and (max-width: 767px) { .modalWindow .modalWrapper { width: 100%; } .modalWindow .buttonHolder { margin-right: 30px; min-height: 3rem; } } .selectWrapper { position: relative; } .selectWrapper select { -webkit-appearance: none; -moz-appearance: none; height: 52px; } .selectWrapper .vx_has-error select { border-color: #d20000 !important; } .selectWrapper .autoFill { background-color: #FAFFBD; } .selectWrapper .select-RTL { padding-right: 38.5px; } .selectWrapper .select_errorIcon { position: absolute; top: 35px; right: 35px; } .selectWrapper .select_errorIcon.errormark-RTL { left: 0px; } .selectWrapper .selectLabel { padding-left: 14px; height: 50px; border-radius: 5px; border: 1px solid #D4D9DC; } .selectWrapper .selectLabel label { color: #6c7378; line-height: 50px; font-weight: normal; } .selectWrapper .clearLeftBorder { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; } .selectWrapper .clearLeftBorder select { border-top-left-radius: 0; border-bottom-left-radius: 0; } .selectWrapper .clearLeftBorder .vx_floatingLabel_complex { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; } .selectWrapper .clearLeftBorder .vx_has-error-with-message { border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-left: 1px solid #d20000; } .selectWrapper .clearRightBorder { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; } .selectWrapper .clearRightBorder select { border-top-right-radius: 0; border-bottom-right-radius: 0; } .selectWrapper .clearRightBorder .vx_floatingLabel_complex { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; } .selectWrapper .clearRightBorder .vx_has-error-with-message { border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-right: 1px solid #d20000; } .selectWrapper .vx_floatingLabel_complex, .selectWrapper .vx_floatingLabel_active { margin-top: 0; } select::-ms-expand { display: none; } .addressSuggestionBox { background: #fff; position: absolute; z-index: 99; border: solid; box-shadow: 0 1px 14px #CBD2D6; border-radius: 5px; border-width: 1px; border-color: #CBD2D6; overflow-y: scroll; width: 54%; max-height: 33.7%; height: auto; } .addressSuggestionList { list-style: none; margin: 0; } .editAddressLinkStyle { text-align: left; } .addressListStyle { font-weight: normal; border-bottom: 1px dotted #CBD2D6; color: #2C2E2F; padding: 5px 12px 0 15px; cursor: pointer; } .addressListStyle .suggestionDescription { color: #6C7378; } .addressListStyle.selected { background-color: #E4F1FB; } .poweredByGoogle { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/progressive/poweredByGoogle.png"); background-repeat: no-repeat; background-size: contain; background-position: center; background-size: auto; height: 2em; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) { .poweredByGoogle { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/progressive/poweredByGoogle_2x.png"); background-repeat: no-repeat; background-position: center; } } @media all and (max-width: 767px) { .addressSuggestionBox { width: 71%; } .poweredByGoogle { height: 1.7em; margin: 0.7em 0 0.7em 0; } } .intentSelection.intent-RLT .intentRowHeading { text-align: right; margin-right: 21%; margin-left: inherit; } .intentSelection.intent-RLT .intentRowDesc { text-align: right; margin-right: 21%; margin-left: inherit; } .intentSelection.intent-RLT .sendMoneyImage { float: right; width: 61px; } .intentSelection.intent-RLT .shopIntentImage { float: right; width: 61px; } .intentSelection.intent-RLT .intentBtnClass { text-align: right; } .intentSelection { margin-top: 15px; } .intentSelection .intentRowHeading { color: #0070BA; margin-bottom: 5px; text-align: left; margin-left: 21%; } .intentSelection .intentRowDesc { text-align: left; margin-left: 21%; } .intentSelection .intentBtnClass { text-align: left; padding-top: 10px; } .intentSelection .notSure { margin-left: 20%; } .intentSelection .sendMoneyImage { height: 74px; width: 74px; background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/icons/ic-SendMoney.png"); background-repeat: no-repeat; float: left; } .intentSelection .shopIntentImage { height: 74px; width: 81px; background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/icons/ic-Shop.png"); background-repeat: no-repeat; float: left; } .intentSelection .payPalCreditIntentImage { height: 74px; width: 74px; background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/icons/ic-Credit.png"); background-repeat: no-repeat; float: left; } .intentSelection .successImage { height: 82px; width: 82px; background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/icons/ic-Success.png"); background-repeat: no-repeat; margin: auto; } .skipLinkContianer { display: inline-block; width: 100%; text-align: center; } .skipLinkContianer .linkConfirm { margin-top: 35px; padding: 10px; background-color: #d2e7fa; } .skipLinkContianer .linkConfirm p { margin: 0px; text-align: right; } .skipLinkContianer .linkConfirm p:first-of-type { padding-bottom: 10px; border-bottom: 1px solid #fff; } .skipLinkContianer .linkConfirm p:last-of-type { margin: 10px 0; } .skipLinkContianer .linkConfirm .buttonContainer { text-align: right; } .skipLinkContianer .linkConfirm div { padding: 0px; } .skipLinkContianer .linkConfirm div button { text-align: right; margin: 0px; width: 100%; } .dualSkipLink :nth-child(1) { float: left; text-align: left; } .dualSkipLink :nth-child(2) { float: right; text-align: right; } .formLink { width: "50%"; } .formLink input { display: none; } .formLink button { background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: #0070ba; } .rdMethod { counter-reset: item; } .rdMethod .rdSteps::before { content: counter(item); counter-increment: item ; width: 39px; height: 39px; border: 1px solid #0079ad; border-radius: 20px; line-height: 35px; text-align: center; float: left; } .rdMethod .rdDesc, .rdMethod .rdInfo { text-align: left; padding: 0 0 10px 50px; } .rdMethod .randomDepositImage { height: 80px; background-image: url("https://www.paypalobjects.com/webstatic/i/consumer/onboarding/image_RD_statement.png"); background-repeat: no-repeat; margin-left: 50px; } @media all and (max-width: 767px) { .rdMethod .randomDepositImage { background-size: 90%; } } .howPayPalWorks { text-align: center; } .intentActivation { margin-left: -50px; margin-right: -50px; } @media all and (max-width: 767px) { .intentActivation { margin-left: 0px; margin-right: 0px; } } .activation-successIcon { color: #299976; line-height: 40px; } .hrHeader { padding-top: 3%; } .hrFooter { padding-bottom: 5%; } .stepsCarousel { text-align: center; margin-top: 24px; } .stepsCarousel .stepContainer { margin-bottom: 12px; } .stepsCarousel .stepContainer .stepImage { display: inline-block; background-image: url("https://www.paypalobjects.com/webstatic/i/consumer/onboarding/howpaypalWorkNew.png"); background-size: 560px; height: 102px; width: 134px; } .stepsCarousel .stepContainer .stepImage.step2 { background-position: 0 37%; } .stepsCarousel .stepContainer .stepImage.step3 { background-position: 4px 72%; } .stepsCarousel .stepContainer .stepNum { width: 30px; height: 30px; border: 1px solid #9da3a6; border-radius: 20px; line-height: 27px; text-align: center; display: inline-block; } .steps { counter-reset: item; text-align: center; display: block; overflow: hidden; margin-top: 24px; } .steps .activationColumn { float: left; width: 30%; margin-right: 13px; padding-bottom: 24px; } .steps .activationColumn p { margin-bottom: 0; } .steps .activationColumn span { display: block; } .steps .activationColumn span.imageIcon { background-image: url("https://www.paypalobjects.com/webstatic/i/consumer/onboarding/howpaypalWorkNew.png"); background-size: 560px; height: 102px; width: 150px; margin-left: 10px; } .steps .activationColumn span.imageIcon.step2 { background-position: 0 37%; } .steps .activationColumn span.imageIcon.step3 { background-position: 0 72%; } .steps .activationColumn .stepDesc { margin-left: 20px; } .steps .activationColumn .stepDesc::before { content: counter(item); counter-increment: item ; width: 30px; height: 30px; border: 1px solid #9da3a6; border-radius: 20px; line-height: 27px; text-align: center; display: block; margin: 10px 0px 10px 40px; } .offerBanner { margin: 0 -7% 0 -7%; } .offerBanner.singleOffer { margin: 0 8% 0 8%; } .offers .offersHeader { color: #333333; margin: 24px 0; } .offers .merchantLogosImage { background-image: url("https://www.paypalobjects.com/webstatic/i/consumer/onboarding/howpaypalWorkNew.png"); background-repeat: no-repeat; margin-bottom: 24px; display: inline-block; height: 52px; width: 100%; background-size: cover; background-position: 100% 100%; } .offers .merchantLogosImage.merchantLogosImageGB { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/sprite/howPaypalWorkGB.png"); background-repeat: no-repeat; background-size: contain; background-position: center; background-size: cover; background-position: 100% 100%; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) { .offers .merchantLogosImage.merchantLogosImageGB { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/sprite/howPaypalWorkGB_2x.png"); background-repeat: no-repeat; background-position: center; } } .offers .merchantLogosImage.merchantLogosImageDE { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/sprite/howPaypalWorkDE.png"); background-repeat: no-repeat; background-size: contain; background-position: center; background-size: cover; background-position: 100% 100%; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) { .offers .merchantLogosImage.merchantLogosImageDE { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/sprite/howPaypalWorkDE_2x.png"); background-repeat: no-repeat; background-position: center; } } .offers .merchantLogosImage.merchantLogosImageAU { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/sprite/howPaypalWorkAU.png"); background-repeat: no-repeat; background-size: contain; background-position: center; background-size: cover; background-position: 100% 100%; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) { .offers .merchantLogosImage.merchantLogosImageAU { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/sprite/howPaypalWorkAU_2x.png"); background-repeat: no-repeat; background-position: center; } } .offers .exploreOffersBtn { margin: 0; } .offers .exploreOffers { margin-bottom: 12px; } .contactPref { margin-top: 24px; } /** Retian Display Image load **/ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) { .offers .merchantLogosImage { background-image: url("https://www.paypalobjects.com/webstatic/i/consumer/onboarding/howpaypalWorkNew.png"); background-repeat: no-repeat; height: 45px; width: 100%; background-size: cover; } .offers .merchantLogosImage.merchantLogosImageGB { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/sprite/howPaypalWorkGB.png"); background-repeat: no-repeat; background-size: contain; background-position: center; background-size: cover; background-position: 100% 100%; } .offers .merchantLogosImage.merchantLogosImageDE { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/sprite/howPaypalWorkDE.png"); background-repeat: no-repeat; background-size: contain; background-position: center; background-size: cover; background-position: 100% 100%; } .offers .merchantLogosImage.merchantLogosImageAU { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/sprite/howPaypalWorkAU.png"); background-repeat: no-repeat; background-size: contain; background-position: center; background-size: cover; background-position: 100% 100%; } } @media only screen and (-webkit-min-device-pixel-ratio: 2) and only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2) and only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1) and only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) and only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) and only screen and (min--moz-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2) and only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1) and only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) and only screen and (min--moz-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) and only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2) and only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-o-min-device-pixel-ratio: 2/1) and only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) and only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2) and only screen and (min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2) and only screen and (min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1) and only screen and (min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) and only screen and (min-device-pixel-ratio: 2) { .offers .merchantLogosImage.merchantLogosImageGB { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/sprite/howPaypalWorkGB_2x.png"); background-repeat: no-repeat; background-position: center; } } @media only screen and (-webkit-min-device-pixel-ratio: 2) and only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2) and only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1) and only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) and only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) and only screen and (min--moz-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2) and only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1) and only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) and only screen and (min--moz-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) and only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2) and only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-o-min-device-pixel-ratio: 2/1) and only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) and only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2) and only screen and (min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2) and only screen and (min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1) and only screen and (min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) and only screen and (min-device-pixel-ratio: 2) { .offers .merchantLogosImage.merchantLogosImageDE { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/sprite/howPaypalWorkDE_2x.png"); background-repeat: no-repeat; background-position: center; } } @media only screen and (-webkit-min-device-pixel-ratio: 2) and only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2) and only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1) and only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) and only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) and only screen and (min--moz-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2) and only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1) and only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) and only screen and (min--moz-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) and only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2) and only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-o-min-device-pixel-ratio: 2/1) and only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) and only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2) and only screen and (min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2) and only screen and (min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1) and only screen and (min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) and only screen and (min-device-pixel-ratio: 2) { .offers .merchantLogosImage.merchantLogosImageAU { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/sprite/howPaypalWorkAU_2x.png"); background-repeat: no-repeat; background-position: center; } } @media all and (max-width: 767px) { .offers .merchantLogosImage { background-image: url("https://www.paypalobjects.com/webstatic/i/consumer/onboarding/howpaypalWorkNew.png"); background-repeat: no-repeat; height: 45px; width: 100%; background-size: cover; } .offers .merchantLogosImage.merchantLogosImageGB { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/sprite/howPaypalWorkGB.png"); background-repeat: no-repeat; background-size: contain; background-position: center; background-size: cover; background-position: 100% 100%; } .offers .merchantLogosImage.merchantLogosImageDE { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/sprite/howPaypalWorkDE.png"); background-repeat: no-repeat; background-size: contain; background-position: center; background-size: cover; background-position: 100% 100%; } .offers .merchantLogosImage.merchantLogosImageAU { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/sprite/howPaypalWorkAU.png"); background-repeat: no-repeat; background-size: contain; background-position: center; background-size: cover; background-position: 100% 100%; } .steps .activationColumn { float: none; margin: 0px 0px 0px 120px; } } @media all and (max-width: 767px) and only screen and (-webkit-min-device-pixel-ratio: 2), all and (max-width: 767px) and only screen and (min--moz-device-pixel-ratio: 2), all and (max-width: 767px) and only screen and (-o-min-device-pixel-ratio: 2/1), all and (max-width: 767px) and only screen and (min-device-pixel-ratio: 2) { .offers .merchantLogosImage.merchantLogosImageGB { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/sprite/howPaypalWorkGB_2x.png"); background-repeat: no-repeat; background-position: center; } } @media all and (max-width: 767px) and only screen and (-webkit-min-device-pixel-ratio: 2), all and (max-width: 767px) and only screen and (min--moz-device-pixel-ratio: 2), all and (max-width: 767px) and only screen and (-o-min-device-pixel-ratio: 2/1), all and (max-width: 767px) and only screen and (min-device-pixel-ratio: 2) { .offers .merchantLogosImage.merchantLogosImageDE { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/sprite/howPaypalWorkDE_2x.png"); background-repeat: no-repeat; background-position: center; } } @media all and (max-width: 767px) and only screen and (-webkit-min-device-pixel-ratio: 2), all and (max-width: 767px) and only screen and (min--moz-device-pixel-ratio: 2), all and (max-width: 767px) and only screen and (-o-min-device-pixel-ratio: 2/1), all and (max-width: 767px) and only screen and (min-device-pixel-ratio: 2) { .offers .merchantLogosImage.merchantLogosImageAU { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/sprite/howPaypalWorkAU_2x.png"); background-repeat: no-repeat; background-position: center; } } .headerImage { padding-bottom: 11%; background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/promotecredit/PPCreditLogo.png"); background-repeat: no-repeat; background-size: contain; background-position: center; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) { .headerImage { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/promotecredit/PPCreditLogo_2x.png"); background-repeat: no-repeat; background-position: center; } } .imgSteps { padding-bottom: 32%; background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/promotecredit/Illustration.png"); background-repeat: no-repeat; background-size: contain; background-position: center; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) { .imgSteps { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/promotecredit/Illustration_2x.png"); background-repeat: no-repeat; background-position: center; } } .imgBreak { padding-bottom: 10%; background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/promotecredit/horizontal-line-shadow.png"); background-repeat: no-repeat; background-size: contain; background-position: center; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) { .imgBreak { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/promotecredit/horizontal-line-shadow_2x.png"); background-repeat: no-repeat; background-position: center; } } .kvs, .default { background-color: #F7F9FA; border-top: 1px solid #cccccc; margin: 0 -15% 3% -15%; padding: 3% 0% 1% 0%; } .kvs .offerLogo, .default .offerLogo { padding-bottom: 3%; } .kvs .mainHeader, .default .mainHeader { color: #9F0276; margin-bottom: -2%; letter-spacing: 1px; } .kvs .kvsSubHeader, .default .kvsSubHeader { padding-top: 1.5%; } .offerCta { font-weight: 600; font-size: 14px; margin-bottom: 2%; margin-top: 3%; } .offerCta.link { width: auto; } .adBanner { background-color: #F7F9FA; padding: 2% 0 1% 0; margin: -6% -8.8% 0 -8.8%; border-radius: 10px 10px 0 0; } .adBanner .adBannerSubHeader { margin-top: -2%; } .default { padding: 3% 0% 3% 0%; } .displayOfferHeader { color: #9F0276; } @media all and (max-width: 767px) { .adBanner { margin: 0 -10% 0 -10%; } .kvs, .default { margin: 0 -3% 0 -3%; } } .fieldGroupHeading { margin-top: 15px; font-variant: normal; font-weight: 500; } .fieldGroupContainer { margin-bottom: 20px; } .fieldGroupContainer:after { display: block; content: ""; clear: both; } .signupCheckBox { margin-bottom: 20px; } .signupCheckBox .checkBoxContainer:after { padding: 0; } .signupCheckBox .checkBoxContainer.checkbox-container-RTL { float: right; } .signupCheckBox .vx_has-error:after { content: ''; } .signupCheckBox .vx_has-error label { color: #333; } .signupCheckBox label.label-RTL { float: right; } .signupCheckBox label.label-RTL:before { right: 0px; margin: 0 0 18px 0; } .signupCheckBox label { display: block; float: left; position: relative; padding: 6px 0 0 40px; } .signupCheckBox label:before { position: absolute; display: block; margin: 0px 18px 0 0; left: 0px; font-size: 21px; border-radius: 5px; padding: 0.53em 0.1em 0.4em 0.1em; } .signupCheckBox span { display: block; font-size: 15px; line-height: 1.2em; } .signupCheckBox .checkbox-RTL { margin-right: 40px; } .signupCheckBox .showExpandable-RTL { left: 0px; float: left; } .signupCheckBox .expandable-RTL { margin-right: 20px; } @media (max-width: 340px) { .signupCheckBox label { padding: 6px 0 0 25px; } .signupCheckBox label:before { font-size: 17px; } .signupCheckBox label span { line-height: 1.4em; } } .withIcon .checkBoxContainer { width: 90% !important; } .withIcon .vx_checkbox { width: auto; float: left; position: relative; } .withIcon span { display: block; line-height: 1.6em; float: right; } .withIcon span:before { font-size: 1.78rem; color: #006dff; display: block; margin-top: 5px; } @media (max-width: 340px) { .withIcon span:before { margin-top: 0px; } } .dots { display: block; box-sizing: border-box; padding: 0px 10px; width: 100%; text-align: center; font-family: "pp-sans-small-regular", Helvetica Neue, Arial, sans-serif; font-variant: normal; font-weight: normal; } .dot:after { display: block; box-sizing: border-box; content: '○'; margin: 6px; font-size: 28px; color: #90a3a6; font-family: Arial; -webkit-font-smoothing: antialiased; display: inline-block; } .dot.active:after, .dot.done:after { content: '●'; font-family: Arial; } .pageHeading h1, .pageHeading h2, .pageHeading h3, .pageHeading h4, .pageHeading h5 { display: block; font-size: 21px; text-align: center; margin: 10px auto 15px auto; color: #2C2E2F; font-family: 'pp-sans-small-light'; font-weight: normal; font-variant: normal; -webkit-font-smoothing: antialiased; line-height: 1.2; } .pageHeadingIntent h1, .pageHeadingIntent h2, .pageHeadingIntent h3, .pageHeadingIntent h4, .pageHeadingIntent h5 { font-size: 1em; } .formHeading h1, .formHeading h2, .formHeading h3, .formHeading h4, .formHeading h5 { margin-bottom: 0px; } .intentHeading h1, .intentHeading h2, .intentHeading h3, .intentHeading h4, .intentHeading h5 { margin-bottom: 30px; } .subFormHeading h1, .subFormHeading h2, .subFormHeading h3, .subFormHeading h4, .subFormHeading h5 { display: block; font-family: 'pp-sans-small-regular'; font-weight: normal; font-variant: normal; padding: 0 10px 10px 10px; font-size: 13px; -webkit-font-smoothing: antialiased; } .sepaHeading { margin-left: -60px; margin-right: -60px; margin-bottom: 40px; text-align: center; } @media all and (max-width: 767px) { .sepaHeading { margin-left: 10px; margin-right: 10px; } } .splitAccountSubheading { margin-top: -10px; margin-bottom: 25px; } .signupAppContent { min-height: 100vh; padding: 96px 120px; } @media (max-width: 767px) { .signupAppContent { padding: 96px 15px; } } @media all and (max-width: 767px) { .signupAppContent { padding: 96px 10px; } } @media (max-width: 350px) { .signupAppContent { padding: 96px 5px; } } .signup-page-header { position: absolute; top: 0; width: 100%; max-width: 1170px; margin: auto; left: 0; right: 0; z-index: 2; background: -moz-linear-gradient(top, #f5f7fa 0%, rgba(245, 247, 250, 0.92) 8%, rgba(245, 247, 250, 0) 100%); background: -webkit-linear-gradient(top, #f5f7fa 0%, rgba(245, 247, 250, 0.92) 8%, rgba(245, 247, 250, 0) 100%); background: linear-gradient(to bottom, #f5f7fa 0%, rgba(245, 247, 250, 0.92) 8%, rgba(245, 247, 250, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f7fa', endColorstr='#f5f7fa00', GradientType=0); } .signup-page-header-logo { display: inline-block; text-indent: -9999px; width: 124px; height: 33px; background: url(https://www.paypalobjects.com/webstatic/i/logo/rebrand/ppcom.png); background-image: url(https://www.paypalobjects.com/webstatic/i/logo/rebrand/ppcom.svg), none; background-size: 124px 33px; margin: 20px 32px; } .signup-page-header-button { position: absolute; right: 0; top: 0; margin: 20px 32px; } .signup-page-header-button.layout-direction-RTL { left: 0; right: auto; } .signup-page-form { position: relative; margin-left: auto; margin-right: auto; width: 611px; background-color: #FFFFFF; } .signup-page-footer { position: absolute; bottom: 0; width: 80%; max-width: 600px; padding-top: 15px; border-top: 2px dotted #CBD2D6; margin: 30px auto; left: 0; right: 0; } .signup-page-footer-spacer { display: inline-block; width: 1em; } .signup-page-footer-separator { margin: 0 1em; } .signup-page-footer a { color: inherit; font-weight: inherit; } @media (max-width: 767px) { .signup-page-container { background-color: #FFFFFF; } .signup-page-header .vx_btn-medium { font-size: 0.8125rem; line-height: 1.38461538; min-width: 4.5rem; padding: 0.5625rem 1.125rem; } .signup-page-form { width: 100%; max-width: 448px; } .signup-page-footer-separator { font-size: 1px; letter-spacing: -1px; color: transparent; } .signup-page-footer-separator:before { content: "\a "; white-space: pre; } } @media all and (max-width: 767px) { .signup-page-header-logo { display: block; margin-left: auto; margin-top: 60px; margin-right: auto; } .signup-page-form { margin-top: 5px; } } .ibanBbanFieldGroup { text-align: center; margin-top: 30px; } .sepaContainer { margin-left: -60px; margin-right: -60px; margin-bottom: 50px; } .sepaContainer .configurable-table { border: 1px solid; border-radius: 3px; padding: 1em 1.5em; } .sepaContainer .configurable-table-row { margin: 1em; width: 100%; } .sepaContainer .configurable-table-row-col:first-child { color: #666; } .sepaContainer .configurable-table-row-col { display: inline-block; vertical-align: top; width: 50%; } .sepaContainer .configurable-table-row-col span p { margin: 0px; } .sepaContainer .configurable-table-header { display: inline-block; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); overflow: auto; text-align: center; position: relative; } .sepaContainer .configurable-table-header h2 { display: block; width: 100%; float: left; margin-top: 7px; } .sepaContainer .configurable-table-header a { position: absolute; font-size: .75em; right: 0px; } @media all and (max-width: 767px) { .sepaContainer .configurable-table { margin-left: 40px; margin-right: 40px; } .sepaContainer .configurable-table-row-col { display: block; width: 100%; } } @media print { .signup-page-footer { display: none; } .signup-page-form { width: 100vw; padding: 0px; z-index: 9999; } .btnGrp { display: none; } .skipLinkContianer { display: none; } } .intentRandomDeposit { border: 1px solid; border-radius: 3px; padding: 2em 2em; margin-bottom: 20px; } .intentRandomDeposit ol li { padding-bottom: 15px; margin-left: 10px; } .intentRandomDeposit ol li:last-child { padding-bottom: 0px; } .initPhoneConfirm-contentContainer { margin: 30px 0; display: flex; } .initPhoneConfirm-imageContainer { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/icons/ic-Phone.png"); background-repeat: no-repeat; background-size: contain; background-position: center; width: 26%; margin: 2%; height: 78px; background-position: center bottom; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) { .initPhoneConfirm-imageContainer { background-image: url("https://www.paypalobjects.com/digitalassets/c/consumer/consumeronboarding/icons/ic-Phone_2x.png"); background-repeat: no-repeat; background-position: center; } } .initPhoneConfirm-phoneContainer { width: 70%; } .initPhoneConfirm-description { margin: 0 20px; } .confirm3ds-warningIcon { line-height: 113px; color: #FF9600; } .confirm3ds-warningMessageContainer { margin: 30px; } .confirm3ds-spinner { height: 300px; } .flexBox { display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 1% 0 1% 0; } .flexItem { padding: 15px; } /* Slider */ .slick-loading .slick-list { background: #fff url('ajax-loader.gif') center center no-repeat; } /* Arrows */ .slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; color: transparent; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); padding: 0; border: none; outline: none; } .slick-prev:hover, .slick-next:hover, .slick-prev:focus, .slick-next:focus { outline: none; background: transparent; color: transparent; } .slick-prev:hover:before, .slick-next:hover:before, .slick-prev:focus:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; } .slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: white; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Icons */ } @font-face { font-family: 'slick'; font-weight: normal; font-style: normal; src: url('fonts/slick.eot'); src: url('fonts/slick.eot?#iefix') format('embedded-opentype'), url('fonts/slick.woff') format('woff'), url('fonts/slick.ttf') format('truetype'), url('fonts/slick.svg#slick') format('svg'); } .slick-prev { left: -25px; } [dir="rtl"] .slick-prev { left: auto; right: -25px; } .slick-prev:before { content: "←"; } [dir="rtl"] .slick-prev:before { content: "→"; } .slick-next { right: -25px; } [dir="rtl"] .slick-next { left: -25px; right: auto; } .slick-next:before { content: "→"; } [dir="rtl"] .slick-next:before { content: "←"; } /* Dots */ .slick-dotted .slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%; } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { position: absolute; top: 0; left: 0; content: "•"; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { color: black; opacity: 0.75; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slides { /* // disable for proper centering of activation steps // TODO: revisit when offers carousel is going LIVE .slick-slide { padding-right: 1%; } */ } .slides .slick-prev:before, .slides .slick-next:before, .slides .slick-prev:focus, .slides .slick-next:focus { color: #000000; font-family: 'paypal-vx-icons'; font-size: 2.6rem; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; } .slides .slick-prev:before, .slides .slick-prev:focus { content: "\2190"; } .slides .slick-next:before, .slides .slick-next:focus { content: "\2192"; } .slides .slick-prev { left: 0; z-index: 99; } .slides .slick-next { right: 0; z-index: 99; } .slides .slick-dots { position: initial; margin-bottom: 3%; margin-top: -2%; } .slides .slick-dots li, .slides .slick-dots button:before { content: '○'; font-size: 28px; color: #90a3a6; } .slides .slick-dots .slick-active li, .slides .slick-dots .slick-active button:before { content: '●'; font-size: 28px; color: #90a3a6; } .mainHeader { margin: 3%; display: inline-block; } .header { margin-bottom: 6%; } .subHeader { margin-bottom: 13%; } .field-check-mark-icon { display: table-cell; width: 2.5em; min-width: 2.5em; color: #19aa15; text-align: left; vertical-align: middle; position: relative; top: -2px; padding: 10px 10px 0 0px; } .nationalityLabel.nationality-RTL { float: right; border-left: none; border-right: 1px solid #D4D9DC; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .nationalityLabel { float: left; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; padding: 14px; color: #898989; background-color: #fdfdfd; height: 52px; padding-left: 17px !important; font-weight: 400 !important; border: 1px solid #D4D9DC; border-right: none; } .radioBtn { margin: 0 auto; padding: 10px 20px; display: inline-block; } .radioBtn .radioBtn-input { margin-right: 10px; font-size: 2em; margin-left: 10px; } .radioBtn .radioBtn-label { font-size: 1.0em; } .countryPhonePrefix { top: 24px; position: absolute; left: 15px; font-size: 15px; } .no-js .captcha-container .captcha-inputs .refresh.small.light { display: none; } .captcha-overlay { visibility: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background-color: rgba(0, 0, 0, 0.6); } .captcha-container { width: 100%; margin: 0; /** method responsible for loading the background image set in CSS **/ /* light button for header and footer */ } .captcha-container .container { width: 95%; background-image: none; background-color: transparent; } .captcha-container .corral { margin: 0 auto; width: 460px; } .captcha-container .contentContainer { position: relative; margin: 50px auto 0; padding: 5% 10%; background-color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } .captcha-container .contentContainer .modal-overlay { content: ""; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background: #FAFAFA; z-index: 16; opacity: 1; } .captcha-container .contentContainer .modal-animate { z-index: 17; position: absolute; width: 100px; margin: 0 auto; top: 120px; left: 38%; min-height: 100px; overflow: hidden; } .captcha-container .contentContainer .rotate { content: ""; height: 30px; width: 30px; position: absolute; left: 50%; top: 50%; z-index: 6; margin: -15px auto auto -15px; -webkit-animation: rotation .7s infinite linear; -moz-animation: rotation .7s infinite linear; -o-animation: rotation .7s infinite linear; animation: rotation .7s infinite linear; border-left: 8px solid rgba(0, 0, 0, 0.2); border-right: 8px solid rgba(0, 0, 0, 0.2); border-bottom: 8px solid rgba(0, 0, 0, 0.2); border-top: 8px solid #2180c0; border-radius: 100%; } .captcha-container .contentContainer .paypal-logo { margin: 0 auto; background: transparent url("https://www.paypalobjects.com/images/shared/monogram@2x.png") top center no-repeat; -webkit-background-size: 30px 37px; -moz-background-size: 30px 37px; -o-background-size: 30px 37px; background-size: 30px 37px; width: 30px; height: 37px; display: block; text-indent: -999em; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @-moz-keyframes rotation { from { -moz-transform: rotate(0deg); transform: rotate(0deg); } to { -moz-transform: rotate(359deg); transform: rotate(359deg); } } @-o-keyframes rotation { from { -o-transform: rotate(0deg); transform: rotate(0deg); } to { -o-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .captcha-container .headerText { text-align: center; margin: 0 10px 0 0; border-bottom: 1px solid #c1c1c1; padding-bottom: 5px; font-size: 30px; font-weight: normal; } .captcha-container .headerText .notYou { color: #6c7378; font-size: 15px; padding-bottom: 10px; } .captcha-container .captcha-paypal-logo { margin: 0 auto 30px; background: transparent url("https://www.paypalobjects.com/images/shared/paypal-logo-129x32.svg") top center no-repeat; background-size: 129px 32px; width: 129px; height: 32px; display: block; text-indent: -999em; } .lower-than-ie9 .captcha-container .captcha-paypal-logo { background: transparent url("https://www.paypalobjects.com/images/shared/paypal-logo-129x32.png") top center no-repeat; } .captcha-container .captcha-image { height: 85px; width: 100%; text-align: center; border: 1px solid #E6E6E6; border-radius: 4px; margin: 0 0 5px 0; } .captcha-container .captcha-image img { width: 100%; height: 81px; border-radius: 4px; } .captcha-container .captcha-inputs { display: table; width: 100%; height: 50px; } .captcha-container .captcha-inputs .textInput { display: table-cell; min-width: 100px; } .captcha-container .captcha-inputs .refresh, .captcha-container .captcha-inputs .audio { display: table-cell; vertical-align: middle; width: 36px; } .lower-than-ie9 .captcha-container .captcha-inputs .refresh, .lower-than-ie9 .captcha-container .captcha-inputs .audio, .lower-than-ie10 .captcha-container .captcha-inputs .refresh, .lower-than-ie10 .captcha-container .captcha-inputs .audio { vertical-align: bottom; } .captcha-container .captcha-inputs .refresh { padding: 0 8px; } .captcha-container .captcha-inputs .captchaPlay, .captcha-container .captcha-inputs .captchaRefresh { display: block; width: 36px; height: 36px; } .captcha-container .captcha-inputs .captchaPlay:after, .captcha-container .captcha-inputs .captchaRefresh:after { width: 36px; height: 36px; } .captcha-container .captcha-inputs .captchaPlay:after { background-position: -32px -3489px; } .captcha-container .captcha-inputs .captchaRefresh:after { background-position: -33px -3389px; } .captcha-container .captcha-inputs .audio a { background-position: -32px -3489px; } .captcha-container .captcha-inputs .refresh a { background-position: -33px -3389px; } .captcha-container .captcha-inputs .buttonLight { border: 1px solid; border-color: #ddd #d9d9d9 #bdbdbd; background-color: #dedede; text-shadow: 0 1px #efefef; color: #333; -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px #fff inset, 0 1px 0 rgba(255, 255, 255, 0.2); -moz-box-shadow: 0 1px #fff inset, 0 1px 0 rgba(255, 255, 255, 0.2); box-shadow: 0 1px #fff inset, 0 1px 0 rgba(255, 255, 255, 0.2); } .captcha-container .captcha-inputs .buttonLight:hover { background-color: #d1d1d1; text-decoration: none; -webkit-box-shadow: 0 1px #f5f5f5 inset, 0 1px rgba(255, 255, 255, 0.2); -moz-box-shadow: 0 1px #f5f5f5 inset, 0 1px rgba(255, 255, 255, 0.2); box-shadow: 0 1px #f5f5f5 inset, 0 1px rgba(255, 255, 255, 0.2); } .captcha-container .captcha-inputs .buttonLight:active { background-color: #c8c8c8; border-color: #c2c2c2 #bcbcbc #adadad; -webkit-box-shadow: 0 2px 4px #999 inset, 0 1px 0 rgba(255, 255, 255, 0.2); -moz-box-shadow: 0 2px 4px #999 inset, 0 1px 0 rgba(255, 255, 255, 0.2); box-shadow: 0 2px 4px #999 inset, 0 1px 0 rgba(255, 255, 255, 0.2); } .captcha-container .captcha-inputs .onboardingSpritePseudo:after { content: ''; display: block; background-image: url('https://www.paypalobjects.com/webstatic/mktg/consumer/onboarding/ui-sprite.png'); background-repeat: no-repeat; } .captcha-container .light, .captcha-container .light:link, .captcha-container .light:visited { border-color: #dddddd #d9d9d9 #bdbdbd; background-color: #dedede; background: -moz-linear-gradient(center bottom, #dedede 0%, #dedede 20%, #f5f5f5 100%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0%, #dedede), color-stop(20%, #dedede), color-stop(100%, #f5f5f5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(bottom, #dedede 0%, #dedede 20%, #f5f5f5 100%); background: -ms-linear-gradient(bottom, #dedede 0%, #dedede 20%, #f5f5f5 100%); background: -o-linear-gradient(bottom, #dedede 0%, #dedede 20%, #f5f5f5 100%); background: linear-gradient(bottom, #dedede 0%, #dedede 20%, #f5f5f5 100%); -webkit-box-shadow: 0 1px #fff inset, 0 1px 0 rgba(255, 255, 255, 0.2); -moz-box-shadow: 0 1px #fff inset, 0 1px 0 rgba(255, 255, 255, 0.2); box-shadow: 0 1px #fff inset, 0 1px 0 rgba(255, 255, 255, 0.2); text-shadow: 0 1px #efefef; color: #333; } .captcha-container .light:hover { background-color: #d1d1d1; background: -moz-linear-gradient(center bottom, #d1d1d1 0%, #d1d1d1 20%, #ebebeb 100%); background: -webkit-linear-gradient(bottom, #d1d1d1 0%, #d1d1d1 20%, #ebebeb 100%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0%, #d1d1d1), color-stop(20%, #d1d1d1), color-stop(100%, #ebebeb)); /* Chrome,Safari4+ */ background: -ms-linear-gradient(bottom, #d1d1d1 0%, #d1d1d1 20%, #ebebeb 100%); background: -o-linear-gradient(bottom, #d1d1d1 0%, #d1d1d1 20%, #ebebeb 100%); background: linear-gradient(bottom, #d1d1d1 0%, #d1d1d1 20%, #ebebeb 100%); -webkit-box-shadow: 0 1px #f5f5f5 inset, 0 1px rgba(255, 255, 255, 0.2); -moz-box-shadow: 0 1px #f5f5f5 inset, 0 1px rgba(255, 255, 255, 0.2); box-shadow: 0 1px #f5f5f5 inset, 0 1px rgba(255, 255, 255, 0.2); text-decoration: none; } .captcha-container .light:active { background-color: #c8c8c8; border-color: #c2c2c2 #bcbcbc #adadad; background: -moz-linear-gradient(center bottom, #d1d1d1 0%, #d1d1d1 20%, #dedede 100%); background: -webkit-linear-gradient(bottom, #d1d1d1 0%, #d1d1d1 20%, #dedede 100%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0%, #d1d1d1), color-stop(20%, #d1d1d1), color-stop(100%, #dedede)); /* Chrome,Safari4+ */ background: -ms-linear-gradient(bottom, #d1d1d1 0%, #d1d1d1 20%, #dedede 100%); background: -o-linear-gradient(bottom, #d1d1d1 0%, #d1d1d1 20%, #dedede 100%); background: linear-gradient(bottom, #d1d1d1 0%, #d1d1d1 20%, #dedede 100%); -moz-box-shadow: 0 2px 4px #999999 inset, 0 1px 0 rgba(255, 255, 255, 0.2); -webkit-box-shadow: 0 2px 4px #999999 inset, 0 1px 0 rgba(255, 255, 255, 0.2); box-shadow: 0 2px 4px #999999 inset, 0 1px 0 rgba(255, 255, 255, 0.2); } .captcha-container a.button, .captcha-container a.button:link, .captcha-container a.button:visited, .captcha-container .button, .captcha-container button { width: 100%; height: 45px; padding-top: 4px; border: 0; display: block; background: #009CDE; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: pointer; -webkit-appearance: none; -moz-webkit-appearance: none; -ms-webkit-appearance: none; -o-webkit-appearance: none; webkit-appearance: none; -webkit-tap-highlight-color: transparent; color: #fff; background: #0070A7; -webkit-border-radius: 5px; font-size: 1em; text-align: center; font-weight: bold; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow: none; text-decoration: none; -webkit-transition: background-color 0.4s ease-out; -moz-transition: background-color 0.4s ease-out; -o-transition: background-color 0.4s ease-out; -ms-transition: background-color 0.4s ease-out; transition: background-color 0.4s ease-out; } .captcha-container a.button:hover, .captcha-container a.button:link:hover, .captcha-container a.button:visited:hover, .captcha-container .button:hover, .captcha-container button:hover, .captcha-container a.button:focus, .captcha-container a.button:link:focus, .captcha-container a.button:visited:focus, .captcha-container .button:focus, .captcha-container button:focus { background: #008ac5; } .captcha-container a.button.active, .captcha-container a.button:link.active, .captcha-container a.button:visited.active, .captcha-container .button.active, .captcha-container button.active, .captcha-container a.button:active, .captcha-container a.button:link:active, .captcha-container a.button:visited:active, .captcha-container .button:active, .captcha-container button:active { background: #00598e; } .captcha-container a.button.secondary, .captcha-container a.button:link.secondary, .captcha-container a.button:visited.secondary, .captcha-container .button.secondary, .captcha-container button.secondary { background: #E1E7EB; color: #2C2E2F; } .captcha-container a.button.secondary:hover, .captcha-container a.button:link.secondary:hover, .captcha-container a.button:visited.secondary:hover, .captcha-container .button.secondary:hover, .captcha-container button.secondary:hover, .captcha-container a.button.secondary:focus, .captcha-container a.button:link.secondary:focus, .captcha-container a.button:visited.secondary:focus, .captcha-container .button.secondary:focus, .captcha-container button.secondary:focus { background: #d2dbe1; } .captcha-container a.button, .captcha-container a.button:link, .captcha-container a.button:visited { padding-top: 14px; } .captcha-container button.asLink { display: inline; width: auto; padding: 0; background: none; color: #0079c1; font-weight: normal; } .captcha-container .fieldWrapper { position: relative; z-index: 2; width: 100%; } .captcha-container .errorMessage { position: absolute; top: 1px; opacity: 0; z-index: 1; width: 100%; text-align: left; -webkit-border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; -webkit-transition: top 0.3s ease-out; -moz-transition: top 0.3s ease-out; -o-transition: top 0.3s ease-out; -ms-transition: top 0.3s ease-out; transition: top 0.3s ease-out; transition-property: max-height, opacity, top, padding-top, background; } .captcha-container .errorMessage.show { opacity: 1; top: 36px; height: auto; background: #fff7f7; border: 1px solid #e00200; border-top: hidden; } .captcha-container .errorMessage p { margin: 0; color: #2c2e2f; } .captcha-container .z100 { z-index: 100; } .captcha-container .textInput { position: relative; margin: 0 0 10px 0; /* For IE 11: the errorMessage div can be seen from under the input div, so using this to hide it */ } .captcha-container .textInput .fieldWrapper:before { content: ""; display: block; z-index: -1; position: absolute; top: 0; width: 100%; height: 44px; background-color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } .captcha-container .textInput.hasError input { border: 1px solid #e00200; background: url("https://www.paypalobjects.com/webstatic/i/consumer/onboarding/sprite_form.png") no-repeat top -409.9px right 10px; background-size: 25px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) { .captcha-container .textInput.hasError input { background: url("https://www.paypalobjects.com/webstatic/i/consumer/onboarding/sprite_form_2x.png") no-repeat top -409.9px right 10px; background-size: 25px; } } .captcha-container .textInput.hasError input:-moz-placeholder { color: #9d2c36; } .captcha-container .textInput.hasError input::-moz-placeholder { color: #9d2c36; } .captcha-container .textInput.hasError input:-ms-input-placeholder { color: #9d2c36; } .captcha-container .textInput.hasError input::-webkit-input-placeholder { color: #9d2c36; } .captcha-container .textInput.hasError input:focus, .captcha-container .textInput.hasError input:active { border: 1px solid #e00200; } .captcha-container .textInput.hasError input:focus:-moz-placeholder, .captcha-container .textInput.hasError input:active:-moz-placeholder { color: #9B989B; } .captcha-container .textInput.hasError input:focus::-moz-placeholder, .captcha-container .textInput.hasError input:active::-moz-placeholder { color: #9B989B; } .captcha-container .textInput.hasError input:focus:-ms-input-placeholder, .captcha-container .textInput.hasError input:active:-ms-input-placeholder { color: #9B989B; } .captcha-container .textInput.hasError input:focus::-webkit-input-placeholder, .captcha-container .textInput.hasError input:active::-webkit-input-placeholder { color: #9B989B; } .captcha-container .textInput .fieldLabel { width: 100%; position: absolute; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; display: none; } .captcha-container .textInput .fieldLabel .errorMessage { width: inherit; z-index: -1; top: 40px; } .captcha-container .textInput input { height: 44px; width: 100%; padding: 0 10px 0 10px; border: 1px solid #aaa; background: #fff; text-overflow: ellipsis; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: #2c2e2f; font-size: 1em; } .captcha-container .textInput input:focus { outline: 0; border: 1px solid #009CDE; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background-color: #fff; } .captcha-container .textInput input:not([type=submit]):not([type=radio]):not([type=checkbox]) { -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; -webkit-transition: border 0.2s ease-in-out, background-color 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out, background-color 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out, background-color 0.2s ease-in-out; -ms-transition: border 0.2s ease-in-out, background-color 0.2s ease-in-out; transition: border 0.2s ease-in-out, background-color 0.2s ease-in-out; } .captcha-container .combinedFields .textInput { width: 70%; float: left; } .captcha-container .combinedFields .textInput input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .captcha-container .textInput { position: relative; } .captcha-container .textInput .inputAction { position: absolute; z-index: 2; color: #0070ba; font-size: 13px; top: 16px; right: 15px; } .captcha-container .textInput.hasError .inputAction { position: absolute; top: 16px; right: 50px; } .captcha-container .accessAid { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; } .captcha-container footer { display: none; } @media all and (max-width: 440px) { .captcha-container .corral { width: 100%; } } @media all and (max-width: 767px) { .captcha-container .combinedFields .textInput { width: 65%; } } /* Landscape mobile */ @media all and (max-width: 767px) and (orientation: landscape) { .captcha-container .contentContainer { margin: 5px auto 0; padding: 0% 10% 1%; } } .signup { padding: 30px; } @media all and (max-width: 767px) { .signup { padding: 0px; } } .signup input:focus { box-shadow: 0 0px 0px rgba(0, 0, 0, 0.075) inset, 0 0 2px #006dff; outline: 0 none; } .signup select:focus { border-color: #57a9d9 !important; outline: 0 none; box-shadow: none!important; } .signup select:active { border-color: #57a9d9 !important; outline: 0 none; box-shadow: none!important; } .signup .vx_form-control { border-color: #D4D9DC; } .signup .vx_floatingLabel_complex:not(.vx_has-error-with-message):not(.vx_has-error) { border-color: #D4D9DC; }