@charset "UTF-8";html { overflow-y: hidden !important; } #ilmportal-microfrontend-app .corp-session-modal .usb-modal-v2 { z-index: 10000; } #ilmportal-microfrontend-app .dashboard_container { margin-top: 0px; padding: 0px; } #ilmportal-microfrontend-app .form_container { padding: 0px; } #ilmportal-microfrontend-app .rendering-engine { background-color: inherit; }#ilmportal-app { background-color: rgb(241, 245, 251); } #ilmportal-app .spinner-center { display: flex; align-items: center; justify-content: center; min-height: 60vh; width: 100%; } #ilmportal-app .process-tracker-nav { display: flex; justify-content: flex-start; margin-bottom: 16px; margin-left: auto; margin-right: auto; width: 1280px; } #ilmportal-app .process-tracker-btn { text-align: left; } #ilmportal-app html, #ilmportal-app body, #ilmportal-app #ilmportal-app { height: 100%; margin: 0; padding: 0; box-sizing: border-box; overflow-x: hidden; background-color: rgb(241, 245, 251); } #ilmportal-app .layout-container { display: flex; flex-direction: column; width: 100vw; height: 100vh; box-sizing: border-box; margin: 0; padding: 0; overflow-y: auto; } #ilmportal-app .login-container { background-image: url("/assets/login-background-image-895867c1.png"); background-size: cover; background-repeat: no-repeat; background-position: center; flex: 1 0 auto; min-height: 0; display: flex; flex-direction: column; justify-content: stretch; align-items: stretch; } #ilmportal-app .layout-container { display: flex; flex-direction: column; width: 100vw; min-height: 100vh; box-sizing: border-box; margin: 0; padding: 0; /* Allow scroll if content overflows, so footer is never cut off */ } #ilmportal-app * { font-family: "Circular-USB"; } #ilmportal-app .cookie-policy-banner { display: flex; width: 100%; flex-direction: column; align-items: center; padding-top: 32px; } #ilmportal-app .cookie-policy-banner .usb-notification { display: flex; width: 1275px; } #ilmportal-app .cookie-policy-banner .usb-notification .usb-button--close-btn { position: absolute; top: 16px; right: 20px; cursor: pointer; padding: 0; height: 20px; min-height: 0; min-width: 0; width: 20px; background: transparent; } body { /* .login-container styles moved to #ilmportal-app for correct scoping */ } body .footerLayout { display: flex !important; height: 6.25rem; background: rgb(0, 30, 121) !important; padding: 0 !important; flex-shrink: 0; width: 100%; } body .session-modal .usb-modal-v2 { z-index: 10000; } body .session-modal .usb-modal-v2--container .usb-modal-v2--footer .usb-button-group { gap: 16px; display: flex; flex-direction: row; } @media (max-width: 767px) { #ilmportal-app .layout-container { display: block; } body .footerLayout { padding: 16px 32px !important; height: auto !important; } body .login-container { background-image: url("/assets/login-background-image-895867c1.png"); background-size: cover; background-repeat: no-repeat; background-position: center; min-height: calc(100vh - 236px); } } @media (min-width: 768px) and (max-width: 1280px) { #ilmportal-app .cookie-policy-banner .usb-notification { max-width: 100%; } .rendering-engine-app .section-container .button--layout_row { width: auto; } .responsive-tab-toggle { width: auto; } body .login-container { background-image: url("/assets/login-background-image-895867c1.png"); background-size: cover; background-repeat: no-repeat; background-position: center; min-height: calc(100vh - 236px); } #ilmportal-app .layout-container { display: block; } body .footerLayout { padding: 16px 32px !important; height: auto !important; } body .otp-flow-container .custom-container .otp-main { width: 100%; max-width: 448px; } } @media (max-width: 767px) { #ilmportal-app .layout-container { display: block; } #ilmportal-app .layout-container .otp-flow-container .custom-container .otp-main { width: 100%; max-width: 448px; } #ilmportal-app .layout-container .otp-flow-container { padding: 32px; } #ilmportal-app .cookie-policy-banner .usb-notification { display: flex; width: 100%; } body .cookie-policy-banner { padding-left: 32px; padding-right: 32px; } body .footerLayout { padding: 16px 32px !important; height: auto !important; } } @media (max-width: 672px) { #ilmportal-app .layout-container .otp-flow-container { padding: 32px 16px; } body .cookie-policy-banner { padding-left: 16px; padding-right: 16px; } body .footerLayout { padding: 16px !important; } } .error-boundary-container { background-color: rgb(241, 245, 251); min-height: calc(100vh - 170px); align-items: center; justify-content: center; display: flex; padding: 32px; } /* @usb-shield/design-tokens - U.S. Bank Design Tokens - @version v10.45.2 {} */ /* @usb-shield/design-tokens - U.S. Bank Design Tokens - @version v10.28.1 {} */ /* Local variables */ /* Fonts */ html, body { font-family: Circular-USB, Arial, Helvetica, sans-serif; } @supports (font: -apple-system-body) { html { font: -apple-system-body; } body { font-size: 0.94rem; } } /* This CSS resource incorporates links to font software which is the valuable copyrighted property of Monotype Imaging and/or its suppliers. You may not attempt to copy, install, redistribute, convert, modify or reverse engineer this font software. Please contact Monotype Imaging with any questions regarding Web Fonts: http://www.fonts.com */ @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Light.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-LightItalic.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-LightItalic.woff") format("woff"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Regular.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Italic.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Book.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Book.woff") format("woff"); font-weight: 450; font-style: normal; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-BookItalic.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-BookItalic.woff") format("woff"); font-weight: 450; font-style: italic; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Medium.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-MediumItalic.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-MediumItalic.woff") format("woff"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Bold.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-BoldItalic.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-BoldItalic.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Black.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Black.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-BlackItalic.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-BlackItalic.woff") format("woff"); font-weight: 900; font-style: italic; font-display: swap; } /* HTML5 Reset :: style.css ---------------------------------------------------------- We have learned much from/been inspired by/taken code where offered from: Eric Meyer :: http://meyerweb.com HTML5 Doctor :: http://html5doctor.com and the HTML5 Boilerplate :: http://html5boilerplate.com -------------------------------------------------------------------------------*/ /* Let's default this puppy out -------------------------------------------------------------------------------*/ html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary { margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent; } main, article, aside, figure, footer, header, nav, section, details, summary { display: block; } /* Handle box-sizing while better addressing child elements: http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */ /* Responsive images and other embedded objects */ /* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */ img, object, embed { max-width: 100%; } /* Note: keeping IMG here will cause problems if you're using foreground images as sprites. In fact, it *will* cause problems with Google Maps' controls at small size. If this is the case for you, try uncommenting the following: #map img { max-width: none; } */ /* force a vertical scrollbar to prevent a jumpy page */ html { overflow-y: scroll; } /* we use a lot of ULs that aren't bulleted. you'll have to restore the bullets within content, which is fine because they're probably customized anyway */ ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; } /* tables still need cellspacing="0" in the markup */ table { border-collapse: separate; border-spacing: 0; } th { font-weight: bold; vertical-align: bottom; } td { font-weight: normal; vertical-align: top; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } pre { white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } input[type=radio] { vertical-align: text-bottom; } input[type=checkbox] { vertical-align: bottom; } .ie7 input[type=checkbox] { vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } select, input, textarea { font: 99% sans-serif; } table { font-size: inherit; font: 100%; } small { font-size: 85%; } strong { font-weight: bold; } td, td img { vertical-align: top; } /* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */ sub, sup { font-size: 75%; line-height: 0; position: relative; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* standardize any monospaced elements */ pre, code, kbd, samp { font-family: monospace, sans-serif; } /* hand cursor on clickable elements */ .clickable, label, input[type=button], input[type=submit], input[type=file], button { cursor: pointer; } /* Webkit browsers add a 2px margin outside the chrome of form elements */ button, input, select, textarea { margin: 0; } /* make buttons play nice in IE */ button, input[type=button] { width: auto; overflow: visible; } /* scale images in IE7 more attractively */ .ie7 img { -ms-interpolation-mode: bicubic; } /* prevent BG image flicker upon hover (commented out as usage is rare, and the filter syntax messes with some pre-processors) .ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} */ /* let's clear some floats */ .clearfix:after { content: " "; display: block; clear: both; } /* Screen reader to hide */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .otp-flow-header { display: flex; width: 100%; flex-direction: column; align-items: flex-start; } .otp-flow-header .header-container { background-color: rgb(255, 255, 255); box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; align-items: center; gap: 10px; align-self: stretch; height: 69px; } .otp-flow-header .header-container .header-box { height: 69px; display: flex; align-items: center; width: 1280px; } .otp-flow-header .header-container .header-box .header-logo { width: 123px; height: 34.1px; margin-top: 0px; } .otp-flow-custom-header { font-size: 1.25rem; font-weight: 500; margin: 26px 0; } .otp-flow-subheader { margin: 16px 0; } .otp-flow-desc { border: 1px dashed rgb(220, 229, 249); padding: 1rem; color: #555555; background: #eff3fc; margin: 16px 0; } .otp-flow-container { background-color: var(--color-global); margin: 0 auto; padding: 52px; } .otp-flow-container .root-loader { display: flex; justify-content: center; align-items: center; } .otp-flow-container .custom-container { margin: 0px auto; max-width: 1160px; } .otp-flow-container .custom-container .custom-box { background-color: var(--color-global); width: 440px; margin: 0 auto; background: #fff; padding: 52px; } .otp-flow-container .custom-container .custom-box .custom-msg { font-weight: 400; font-size: 16px; } .otp-flow-container .custom-container .custom-box .custom-msg .footer { display: flex; justify-content: end; align-items: center; height: 32px; } .otp-flow-container .custom-container .custom-box .custom-msg .footer .usb-loading-spinner-container.default { max-width: 35px; margin-top: 0px; margin-right: 16px; height: fit-content; } .otp-flow-container .custom-container .custom-box .custom-msg .footer .usb-loading-spinner-container.default .usb-loading-spinner__label { display: none; } .otp-flow-container .custom-container .custom-box .custom-msg p:first-child { margin-top: 0px; margin-bottom: 32px; } .otp-flow-container .custom-container .custom-box .custom-msg p:nth-child(2) { margin-top: 0px; } .otp-flow-container .custom-container .otp-main { background-color: var(--color-global); width: 470px; margin: 0 auto; background: #fff; padding: 52px; } .otp-flow-container .custom-container .otp-main .otp-txt-msg { color: var(--us-bank-grays-gray-90, #2c2c2c); font-weight: 400; font-size: 16px; margin-top: 32px; line-height: 24px; } .otp-flow-container .custom-container .otp-main .footer { display: flex; justify-content: end; align-items: center; } .otp-flow-container .custom-container .otp-main .footer .usb-loading-spinner-container.default { max-width: 35px; padding-top: 17px; margin-top: 0px; } .otp-flow-container .custom-container .otp-main .footer .usb-loading-spinner-container.default .usb-loading-spinner__label { display: none; } @media screen and (min-width: 672px) { .otp-flow-container .custom-container .otp-main .footer .usb-button-group { flex-direction: column; } } .otp-flow-container .custom-container .otp-main .footer .usb-button-group { display: flex; gap: 16px; padding: 1rem 0 1rem 1rem; flex-direction: row; } .otp-flow-container .custom-container .otp-main.email-flow { padding: 40px; border-radius: 8px; } .otp-flow-container .custom-container .otp-main.email-flow .otp-body .otp-flow-custom-header { margin-top: 0px; margin-bottom: 1rem; } .otp-flow-container .custom-container .otp-main.email-flow .otp-body .otp-flow-subheader { margin-bottom: 1.1875rem; } .otp-flow-container .custom-container .otp-main.email-flow .otp-body .otp-txt-msg { margin-top: 0px; margin-bottom: 1.1875rem; } .otp-flow-container .custom-container .otp-main.email-flow .otp-body .usb-notification { margin-bottom: 1rem; } .otp-flow-container .custom-container .otp-main.email-flow .otp-flow-desc { margin-top: 2.375rem; margin-bottom: 0px; font-size: 0.75rem; } .otp-flow-container .custom-container .otp-main.email-flow .footer { margin-top: 1.75rem; } .otp-flow-container .custom-container .otp-main.email-flow .footer .usb-button-group { padding: 0px; gap: 0.75rem; } .otp-flow-container .custom-container .otp-main.email-flow .email-flow-otp-footer { margin-top: 3.125rem; } .otp-flow-container .custom-container .otp-main.email-flow .email-flow-otp-footer .loader { margin-right: 2rem; } .otp-flow-footer-layout { display: flex !important; height: 6.25rem; background: rgb(0, 30, 121) !important; padding: 0 !important; width: 100%; justify-content: space-between; align-items: center; position: absolute; bottom: 0; } .otp-flow-footer-layout .footer-container-client { display: flex; width: 1280px; margin: 0 auto; justify-content: space-between; align-items: center; } .otp-flow-footer-layout .footer-container-client-terms-link { display: flex; align-items: flex-end; gap: 0.25rem; color: rgb(255, 255, 255); font-size: 16px; font-weight: 400; line-height: 1.25; text-decoration: none; } .otp-flow-footer-layout .footer-container-client-terms-link:focus { outline: none; } .otp-flow-footer-layout .footer-container-client-logo { display: flex; width: 100px; flex-direction: column; justify-content: center; align-items: center; gap: 0.5rem; flex-shrink: 0; } .otp-flow-footer-layout .footer-container-client-logo img { width: 100px; height: 27.72px; content: url("data:image/svg+xml,%0A%3Csvg version='1.1' id='logo' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 167.31253 45.15136' style='enable-background:new 0 0 167.31253 45.15136;' xml:space='preserve'%3E%3Cstyle%3E%0Apath, polygon %7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpolygon style='fill:%23DE162B;' points='2.31812,2.25356 2.3451,33.70156 28.98011,42.76156 55.6161,33.70156 55.6161,2.25356'/%3E%3Cpath d='M28.93842,32.71186h-8.14301v-2.814H20.7104c-1.57797,2.219-3.83698,3.368-7.20599,3.368 c-3.96399,0-7.58798-2.429-7.58798-7.503v-15.177h8.44199v11.595c0,2.559,0.298,4.35,2.771,4.35 c1.44901,0,3.36801-0.726,3.36801-4.264v-11.681h8.44101V32.71186z'/%3E%3Cpath d='M44.67344,17.02266c-0.04401-0.724-0.42603-1.278-0.98102-1.663c-0.51199-0.426-1.194-0.639-1.87601-0.639 c-1.194,0-2.55899,0.257-2.55899,1.705c0,0.639,0.513,0.938,0.98099,1.151c1.40701,0.598,4.60501,0.768,7.42001,1.705 c2.81201,0.897,5.285,2.559,5.285,6.183c0,6.14-5.884,7.801-11.255,7.801c-5.20099,0-10.914-2.089-11.04199-7.801h8.05701 c0.043,0.767,0.38397,1.406,1.02399,1.961c0.427,0.383,1.23499,0.639,2.26001,0.639c1.108,0,2.85599-0.426,2.85599-1.705 c0-1.28-0.72501-1.662-4.647-2.344c-6.43698-1.109-9.03799-3.155-9.03799-6.951c0-5.584,6.01099-7.034,10.44501-7.034 c4.77499,0,10.53,1.323,10.74298,6.99199H44.67344z'/%3E%3Cpath d='M70.46912,16.17066c-3.02701,0-3.70901,2.856-3.70901,5.457c0,2.644,0.68201,5.5,3.70901,5.5 s3.70898-2.856,3.70898-5.5C74.17811,19.02666,73.49613,16.17066,70.46912,16.17066 M58.61713,2.27166h8.44199v10.743h0.08499 c1.27902-1.876,3.53799-2.984,6.05301-2.984c7.418,0,9.423,6.31,9.423,11.511c0,5.542-3.02802,11.724-9.29501,11.724 c-4.13498,0-5.41299-1.577-6.47998-2.984h-0.08502v2.43h-8.14297V2.27166z'/%3E%3Cpath d='M98.055,22.77946c-1.02402,0.511-2.17401,0.81-3.32401,1.065c-1.87701,0.427-2.858,0.895-2.858,2.388 c0,1.023,1.108,2.045,2.64301,2.045c1.91998,0,3.41098-1.15,3.539-3.452V22.77946z M106.15501,27.76646 c0,1.663,0.086,3.54,1.02399,4.945h-8.61301c-0.21201-0.595-0.33899-1.492-0.29898-2.087H98.184 c-1.793,2.045-4.392,2.641-7.121,2.641c-4.26401,0-7.802-2.046-7.802-6.693c0-6.991,8.185-6.736,12.492-7.546 c1.151-0.213,2.302-0.553,2.302-1.962c0-1.492-1.40802-2.045-2.77002-2.045c-2.60199,0-3.11298,1.321-3.15598,2.259h-7.845 c0.25699-6.224,6.13898-7.248,11.38397-7.248c10.57303,0,10.48703,4.392,10.48703,8.656V27.76646z'/%3E%3Cpath d='M109.17985,10.58546h8.14398v2.814h0.08301c1.57898-2.217,3.83698-3.369,7.20496-3.369 c3.96503,0,7.59101,2.42999,7.59101,7.50399v15.177h-8.443v-11.595c0-2.559-0.297-4.35-2.76898-4.35 c-1.45203,0-3.37103,0.726-3.37103,4.264v11.681h-8.43994V10.58546z'/%3E%3Cpolygon points='135.18822,2.27166 143.62816,2.27166 143.62816,16.98066 149.00218,10.58566 158.55119,10.58566 150.66417,18.94166 159.78917,32.71166 149.63921,32.71166 145.1212,24.69766 143.62816,26.31666 143.62816,32.71166 135.18822,32.71166'/%3E%3Cpath d='M161.60429,31.90816h0.37097v-0.829h0.29102c0.19403,0,0.33398,0.023,0.41101,0.069 c0.13202,0.078,0.198,0.239,0.198,0.48v0.168l0.008,0.067l0.00403,0.024l0.00494,0.021h0.34705l-0.01202-0.026l-0.02002-0.11 l-0.005-0.156v-0.154c0-0.105-0.03894-0.214-0.11499-0.326c-0.07599-0.11-0.19696-0.179-0.36096-0.204 c0.13-0.021,0.23199-0.055,0.30597-0.102c0.13599-0.088,0.20404-0.227,0.20404-0.414c0-0.264-0.10803-0.442-0.32501-0.531 c-0.12103-0.05-0.31104-0.075-0.573-0.075h-0.73401V31.90816z M162.65831,30.77617c-0.078,0.03-0.19501,0.046-0.35101,0.046 h-0.33203v-0.76h0.315c0.203,0,0.35199,0.026,0.44604,0.078c0.09198,0.051,0.13898,0.154,0.13898,0.307 C162.87529,30.60816,162.80229,30.71816,162.65831,30.77617 M163.72826,29.51516c-0.37396-0.371-0.823-0.557-1.35394-0.557 c-0.526,0-0.97302,0.186-1.34601,0.557c-0.37305,0.373-0.55902,0.822-0.55902,1.349c0,0.53,0.185,0.983,0.55402,1.355 c0.37097,0.376,0.823,0.563,1.35101,0.563c0.53094,0,0.97998-0.187,1.35394-0.563c0.37402-0.373,0.56104-0.825,0.56104-1.355 C164.28929,30.33616,164.10228,29.88717,163.72826,29.51516 M163.53831,29.69916c0.31995,0.322,0.47998,0.709,0.47998,1.165 c0,0.457-0.16003,0.848-0.47998,1.172c-0.31805,0.322-0.70801,0.483-1.164,0.483c-0.45605,0-0.84406-0.161-1.16302-0.483 c-0.31799-0.324-0.47601-0.715-0.47601-1.172c0-0.456,0.15802-0.843,0.47803-1.165c0.32196-0.322,0.70898-0.484,1.16101-0.484 C162.82927,29.21516,163.21831,29.37716,163.53831,29.69916'/%3E%3C/svg%3E"); } /* div.usb-loading-spinner[--reverse-contrast?] ├── svg.usb-loading-spinner__spinner[--size-{size}][--progress|activity] │ ├── circle.usb-loading-spinner__spinner__track[--progress|activity] │ └── circle.usb-loading-spinner__spinner__segment[--progress|activity][--progress-{progress}?] └── span.usb-loading-spinner__label[--position-{top|bottom|left|right|hidden}] */ /* Themeable tokens (@usb-shield/design-tokens) Spinner Size ├── loading_spinner-size-xs ├── loading_spinner-size-small ├── loading_spinner-size-medium ├── loading_spinner-size-large ├── loading_spinner-size-xl ├── loading_spinner-size-2xl └── loading_spinner-size-scalable Spinner Color ├── loading_spinner-track-fill-color ├── loading_spinner-reverse-contrast-track-fill-color ├── loading_spinner-segment-fill-color └── loading_spinner-reverse-contrast-segment-fill-color Label ├── loading_spinner-font-family ├── loading_spinner-font-size ├── loading_spinner-font-weight ├── loading_spinner-letter-spacing ├── loading_spinner-line-height ├── loading_spinner-text-color └── loading_spinner-reverse-contrast-text-color */ .usb-loading-spinner { --spinner-flex-direction: column; --spinner-size: 4rem; --spinner-track-color: rgb(205, 209, 226); --spinner-segment-color: rgb(35, 90, 228); --spinner-label-color: rgb(72, 72, 97); --spinner-stroke-width: 10%; --spinner-animation-duration: 1760ms; --spinner-animation-stroke-offset-percent: 25; --spinner-animation-stroke-radian: 50; --spinner-animation-gap-radian: 265; display: inline-flex; flex-direction: var(--spinner-flex-direction); justify-content: center; align-items: center; gap: 0.5rem; width: fit-content; position: relative; } .usb-loading-spinner:has(.usb-loading-spinner__spinner--size-xs) { --spinner-size: 1rem; } .usb-loading-spinner:has(.usb-loading-spinner__spinner--size-small) { --spinner-size: 1.5rem; } .usb-loading-spinner:has(.usb-loading-spinner__spinner--size-medium) { --spinner-size: 2rem; } .usb-loading-spinner:has(.usb-loading-spinner__spinner--size-large) { --spinner-size: 2.5rem; } .usb-loading-spinner:has(.usb-loading-spinner__spinner--size-xl) { --spinner-size: 3rem; } .usb-loading-spinner:has(.usb-loading-spinner__spinner--size-2xl) { --spinner-size: 4rem; } .usb-loading-spinner:has(.usb-loading-spinner__spinner--size-scalable) { --spinner-size: 100%; } .usb-loading-spinner:has(.usb-loading-spinner__spinner--size-custom) { --spinner-size: unset; } .usb-loading-spinner:has(.usb-loading-spinner__label--position-left) { --spinner-flex-direction: row-reverse; } .usb-loading-spinner:has(.usb-loading-spinner__label--position-right) { --spinner-flex-direction: row; } .usb-loading-spinner:has(.usb-loading-spinner__label--position-bottom) { --spinner-flex-direction: column; } .usb-loading-spinner:has(.usb-loading-spinner__label--position-top) { --spinner-flex-direction: column-reverse; } .usb-loading-spinner:has(.usb-loading-spinner__label--position-hidden) .usb-loading-spinner__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0); overflow: hidden; white-space: nowrap; } .usb-loading-spinner--reverse-contrast { --spinner-label-color: rgb(255, 255, 255); } .usb-loading-spinner--reverse-contrast:has(.usb-loading-spinner__spinner__track--activity) { --spinner-track-color: rgb(205, 209, 226); --spinner-segment-color: rgb(35, 90, 228); } .usb-loading-spinner--reverse-contrast:has(.usb-loading-spinner__spinner__track--progress) { --spinner-track-color: rgb(205, 209, 226); --spinner-segment-color: rgb(35, 90, 228); } .usb-loading-spinner__spinner { width: var(--spinner-size); max-width: var(--spinner-size); max-height: var(--spinner-size); height: var(--spinner-size); } .usb-loading-spinner__spinner--size-scalable { height: auto; aspect-ratio: 1/1; } .usb-loading-spinner__spinner svg { width: 100%; height: 100%; } .usb-loading-spinner__spinner__track, .usb-loading-spinner__spinner__segment { stroke-width: var(--spinner-stroke-width); transform-origin: top; stroke-linecap: round; stroke-linejoin: round; transition: opacity "0.25s ease"; will-change: opacity; stroke-miterlimit: 8; fill-opacity: 0; opacity: 1; } .usb-loading-spinner__spinner__track { stroke: var(--spinner-track-color); } .usb-loading-spinner__spinner__segment { stroke: var(--spinner-segment-color); } .usb-loading-spinner__spinner__segment--progress { transition: all "0.25s ease"; will-change: opacity, stroke, stroke-dasharray; } .usb-loading-spinner__spinner__segment--progress-0 { opacity: 0; } .usb-loading-spinner__spinner__segment--activity { animation-name: loading-spinner-activity-animation; animation-duration: var(--spinner-animation-duration); animation-fill-mode: forwards; animation-timing-function: linear; animation-direction: normal; animation-iteration-count: infinite; stroke-dashoffset: var(--spinner-animation-stroke-offset-percent); stroke-dasharray: var(--spinner-animation-stroke-radian) var(--spinner-animation-gap-radian); } .usb-loading-spinner__label { color: var(--spinner-label-color); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; text-align: center; min-height: 1.125rem; } @keyframes loading-spinner-activity-animation { 0% { stroke-dashoffset: 0; stroke-dasharray: 1.76, 174.24; } 25% { stroke-dashoffset: -88; stroke-dasharray: 61.6, 114.4; } 50% { stroke-dashoffset: -176; stroke-dasharray: 123.2, 52.8; } 75% { stroke-dashoffset: -264; stroke-dasharray: 61.6, 114.4; } 100% { stroke-dashoffset: -352; stroke-dasharray: 1.76, 174.24; } } .page-section-title { font-size: 1.75rem; font-weight: 700; color: rgb(0, 30, 121); width: 100%; line-height: 2.25rem; white-space: pre-wrap; } .svg-icon { max-width: 100%; display: inline; } .svg-icon svg.single path, .svg-icon svg.single circle, .svg-icon svg.single ellipse, .svg-icon svg.single g { fill: inherit; transition: fill 0.1s ease; } .svg-icon.v-align-middle { display: inline-block; } .svg-icon.v-align-middle svg { vertical-align: middle; } .svg-icon.block { display: block; } .svg-icon.default { color: rgb(122, 122, 149); fill: rgb(72, 72, 97); } .svg-icon.light { color: rgb(255, 255, 255); fill: rgb(255, 255, 255); } .svg-icon.brand-primary { color: rgb(0, 30, 121); fill: rgb(0, 30, 121); } .svg-icon.brand-secondary { color: rgb(122, 122, 149); fill: rgb(122, 122, 149); } .svg-icon.interaction { color: rgb(35, 90, 228); fill: rgb(35, 90, 228); } .svg-icon.error { color: rgb(207, 42, 54); fill: rgb(207, 42, 54); } .svg-icon.warning { color: rgb(235, 94, 1); fill: rgb(235, 94, 1); } .svg-icon.success { color: rgb(0, 125, 30); fill: rgb(0, 125, 30); } .svg-icon.neutral { color: rgb(35, 90, 228); fill: rgb(35, 90, 228); } .svg-icon.grey10 { color: rgb(241, 245, 251); fill: rgb(241, 245, 251); } .svg-icon.grey20 { color: rgb(235, 239, 246); fill: rgb(235, 239, 246); } .svg-icon.grey30 { color: rgb(205, 209, 226); fill: rgb(205, 209, 226); } .svg-icon.grey60 { color: rgb(122, 122, 149); fill: rgb(122, 122, 149); } .svg-icon.grey70 { color: rgb(99, 99, 127); fill: rgb(99, 99, 127); } .svg-icon.grey80 { color: rgb(72, 72, 97); fill: rgb(72, 72, 97); } .svg-icon.grey90 { color: rgb(45, 45, 62); fill: rgb(45, 45, 62); } .usb-button { border-radius: 0.5rem; cursor: pointer; font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 0.875rem; font-weight: 500; height: auto; line-height: 1; max-width: 100%; outline: transparent; position: relative; transition: color 0.1s ease, border 0.1s ease; white-space: nowrap; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; } .usb-button, .usb-button * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; -webkit-focus-ring-color: rgba(0, 0, 0, 0) !important; -webkit-tap-highlight-color: transparent !important; -webkit-focus-ring-color: transparent !important; } .usb-button.button--layout_row { flex-direction: row; } .usb-button.button--layout_column { flex-direction: column; } .usb-button--icon, .usb-button .usb-icon { display: inline-flex; pointer-events: none; vertical-align: bottom; } .usb-button--icon svg, .usb-button .usb-icon svg { fill: currentColor !important; } .usb-button.button--small { min-height: 2rem; max-height: 2rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; } .usb-button.button--small--icon-only { padding: 0.5rem; width: 2rem; } .usb-button.button--small.button--layout_column { gap: 0.25rem; max-height: unset; padding: 0.75rem 0.5rem; } .usb-button.button--small .usb-button--icon, .usb-button.button--small .usb-icon { width: 1rem; height: 1rem; min-width: 1rem; min-height: 1rem; max-width: 1rem; max-height: 1rem; } .usb-button.button--small .usb-button--icon svg, .usb-button.button--small .usb-icon svg { width: 1rem; height: 1rem; min-width: 1rem; min-height: 1rem; max-width: 1rem; max-height: 1rem; } .usb-button.button--medium { min-height: 2.5rem; max-height: 2.5rem; line-height: 1.5; padding: 0.5rem 1.5rem; font-size: 1rem; } .usb-button.button--medium--icon-only { padding: 0.5rem; width: 2.5rem; } .usb-button.button--medium.button--layout_column { gap: 0.25rem; max-height: unset; padding: 0.625rem 1.5rem; } .usb-button.button--medium .usb-button--icon, .usb-button.button--medium .usb-icon { width: 1.25rem; height: 1.25rem; min-width: 1.25rem; min-height: 1.25rem; max-width: 1.25rem; max-height: 1.25rem; } .usb-button.button--medium .usb-button--icon svg, .usb-button.button--medium .usb-icon svg { width: 1.25rem; height: 1.25rem; min-width: 1.25rem; min-height: 1.25rem; max-width: 1.25rem; max-height: 1.25rem; } .usb-button.button--medium::after { content: ""; position: absolute; top: -0.25rem; bottom: -0.25rem; left: 0; right: 0; } .usb-button.button--large { font-size: 1rem; min-height: 3rem; line-height: 1.5; padding: 0.75rem 2rem; } .usb-button.button--large--icon-only { padding: 0.75rem; width: 3rem; } .usb-button.button--large.button--layout_column { gap: 0.25rem; max-height: unset; padding: 0.875rem 2rem; } .usb-button.button--large .usb-button--icon, .usb-button.button--large .usb-icon { width: 1.25rem; height: 1.25rem; min-width: 1.25rem; min-height: 1.25rem; max-width: 1.25rem; max-height: 1.25rem; } .usb-button.button--large .usb-button--icon svg, .usb-button.button--large .usb-icon svg { width: 1.25rem; height: 1.25rem; min-width: 1.25rem; min-height: 1.25rem; max-width: 1.25rem; max-height: 1.25rem; } .usb-button.button--highlight { font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1; } .usb-button.button--highlight--heavy { background: rgb(207, 42, 54); border-color: rgba(0, 0, 0, 0); border-width: 0; border-radius: 0.5rem; color: rgb(255, 255, 255); } .usb-button.button--highlight--heavy .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--highlight--heavy:hover { background: rgb(155, 10, 40); color: rgb(255, 255, 255); border-color: rgba(0, 0, 0, 0); } .usb-button.button--highlight--heavy:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--highlight--heavy:active { background: rgb(111, 3, 3); color: rgba(255, 255, 255, 0.78); border-color: rgba(0, 0, 0, 0); } .usb-button.button--highlight--heavy:active .svg-icon { color: rgba(255, 255, 255, 0.78); } .usb-button.button--highlight--subtle { background: rgba(0, 0, 0, 0); border: rgb(207, 42, 54) solid 1px; border-radius: 0.5rem; color: rgb(207, 42, 54); } .usb-button.button--highlight--subtle .svg-icon { color: rgb(207, 42, 54); } .usb-button.button--highlight--subtle:hover { background: rgb(155, 10, 40); color: rgb(255, 255, 255); } .usb-button.button--highlight--subtle:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--highlight--subtle:active { background: rgb(111, 3, 3); color: rgba(255, 255, 255, 0.78); } .usb-button.button--highlight--subtle:active .svg-icon { color: rgba(255, 255, 255, 0.78); } .usb-button.button--highlight--minimal { background: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0); border-width: 0; border-radius: 0.5rem; color: rgb(207, 42, 54); } .usb-button.button--highlight--minimal .svg-icon { color: rgb(207, 42, 54); } .usb-button.button--highlight--minimal:hover { background: rgb(155, 10, 40); color: rgb(255, 255, 255); } .usb-button.button--highlight--minimal:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--highlight--minimal:active { background: rgb(111, 3, 3); color: rgba(255, 255, 255, 0.78); } .usb-button.button--highlight--minimal:active .svg-icon { color: rgba(255, 255, 255, 0.78); } @media (hover: none) and (pointer: coarse) { .usb-button.button--highlight { background: rgb(207, 42, 54); border: none; color: rgb(255, 255, 255); } .usb-button.button--highlight .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--highlight:hover, .usb-button.button--highlight:focus { background: rgb(207, 42, 54); color: rgb(255, 255, 255); border: none; } .usb-button.button--highlight:hover .svg-icon, .usb-button.button--highlight:focus .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--highlight:hover::before, .usb-button.button--highlight:focus::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.5rem; content: ""; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); } .usb-button.button--highlight:active { background: rgb(111, 3, 3); border: none; color: rgba(255, 255, 255, 0.78); } .usb-button.button--highlight:active .svg-icon { color: rgba(255, 255, 255, 0.78); } } .usb-button.button--standard--heavy { border-radius: 0.5rem; font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1; background: rgb(35, 90, 228); border-color: rgba(0, 0, 0, 0); border-width: 0; color: rgb(255, 255, 255); } .usb-button.button--standard--heavy .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--standard--heavy:hover { border-color: rgba(0, 0, 0, 0); background: rgb(0, 60, 200); } .usb-button.button--standard--heavy:active { border-color: rgba(0, 0, 0, 0); background: rgb(0, 30, 121); } .usb-button.button--standard--subtle { background: rgba(0, 0, 0, 0); border: 1px solid rgb(35, 90, 228); color: rgb(35, 90, 228); } .usb-button.button--standard--subtle .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--standard--subtle:hover { background: rgb(0, 60, 200); color: rgb(255, 255, 255); } .usb-button.button--standard--subtle:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--standard--subtle:active { background: rgb(0, 30, 121); color: rgba(255, 255, 255, 0.78); } .usb-button.button--standard--subtle:active .svg-icon { color: rgba(255, 255, 255, 0.78); } .usb-button.button--standard--minimal { background: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0); border-width: 0; border-radius: 0.5rem; color: rgb(35, 90, 228); } .usb-button.button--standard--minimal .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--standard--minimal:hover { background: rgb(0, 60, 200); color: rgb(255, 255, 255); text-decoration: "none"; } .usb-button.button--standard--minimal:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--standard--minimal:active { background: rgb(0, 30, 121); color: rgba(255, 255, 255, 0.78); } .usb-button.button--standard--minimal:active .svg-icon { color: rgba(255, 255, 255, 0.78); } @media (hover: none) and (pointer: coarse) { .usb-button.button--standard--minimal { background: rgba(0, 0, 0, 0); border: none; color: rgb(35, 90, 228); } .usb-button.button--standard--minimal .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--standard--minimal:hover, .usb-button.button--standard--minimal:focus { background: rgba(0, 0, 0, 0); color: rgb(35, 90, 228); border: none; } .usb-button.button--standard--minimal:hover .svg-icon, .usb-button.button--standard--minimal:focus .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--standard--minimal:hover::before, .usb-button.button--standard--minimal:focus::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.5rem; content: ""; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); } .usb-button.button--standard--minimal:active { background: rgb(0, 30, 121); border: none; color: rgba(255, 255, 255, 0.78); } .usb-button.button--standard--minimal:active .svg-icon { color: rgba(255, 255, 255, 0.78); } } @media (hover: none) and (pointer: coarse) { .usb-button.button--standard { background: rgb(35, 90, 228); border: none; color: rgb(255, 255, 255); } .usb-button.button--standard .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--standard:hover, .usb-button.button--standard:focus { background: rgb(35, 90, 228); color: rgb(255, 255, 255); border: none; } .usb-button.button--standard:hover .svg-icon, .usb-button.button--standard:focus .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--standard:hover::before, .usb-button.button--standard:focus::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.5rem; content: ""; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); } .usb-button.button--standard:active { background: rgb(0, 30, 121); border: none; color: rgba(255, 255, 255, 0.78); } .usb-button.button--standard:active .svg-icon { color: rgba(255, 255, 255, 0.78); } } .usb-button.button--secondary { background: rgba(0, 0, 0, 0); border-width: 1px; border-color: rgb(35, 90, 228); border-radius: 0.5rem; color: rgb(35, 90, 228); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1; transition: margin 0.1s ease; } .usb-button.button--secondary .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--secondary:hover { background: rgb(0, 60, 200); border: 1px solid rgb(0, 30, 121); color: rgb(255, 255, 255); } .usb-button.button--secondary:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--secondary:active { background: rgb(0, 30, 121); color: rgba(255, 255, 255, 0.78); } .usb-button.button--secondary:active .svg-icon { color: rgb(255, 255, 255); } @media (hover: none) and (pointer: coarse) { .usb-button.button--secondary { background: rgba(0, 0, 0, 0); border: 1px solid rgb(35, 90, 228); color: rgb(35, 90, 228); } .usb-button.button--secondary .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--secondary:hover, .usb-button.button--secondary:focus { background: rgba(0, 0, 0, 0); color: rgb(35, 90, 228); border: 1px solid rgb(35, 90, 228); } .usb-button.button--secondary:hover .svg-icon, .usb-button.button--secondary:focus .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--secondary:hover::before, .usb-button.button--secondary:focus::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.5rem; content: ""; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); } .usb-button.button--secondary:active { background: rgb(0, 30, 121); border: 1px solid rgb(35, 90, 228); color: rgba(255, 255, 255, 0.78); } .usb-button.button--secondary:active .svg-icon { color: rgba(255, 255, 255, 0.78); } } .usb-button.button--utility { font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1; transition: margin 0.1s ease; } .usb-button.button--utility--heavy { background: rgb(72, 72, 97); border-color: rgb(72, 72, 97); border-width: 1px; border-radius: 0.5rem; color: rgb(255, 255, 255); } .usb-button.button--utility--heavy .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--utility--heavy:hover { background: rgba(0, 0, 0, 0); border: 1px solid rgb(72, 72, 97); border-radius: 0.5rem; color: rgb(72, 72, 97); } .usb-button.button--utility--heavy:hover .svg-icon { color: rgb(72, 72, 97); } .usb-button.button--utility--heavy:active { background: rgb(72, 72, 97); color: rgba(255, 255, 255, 0.78); } .usb-button.button--utility--heavy:active .svg-icon { color: rgba(255, 255, 255, 0.78); } .usb-button.button--utility--subtle { background: rgba(0, 0, 0, 0); border-width: 1px; border-color: rgb(72, 72, 97); border-radius: 0.5rem; color: rgb(72, 72, 97); } .usb-button.button--utility--subtle .svg-icon { color: rgb(72, 72, 97); } .usb-button.button--utility--subtle:hover { background: rgb(122, 122, 149); color: rgb(255, 255, 255); border: 1px solid rgb(122, 122, 149); } .usb-button.button--utility--subtle:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--utility--subtle:active { background: rgb(72, 72, 97); color: rgba(255, 255, 255, 0.78); } .usb-button.button--utility--subtle:active .svg-icon { color: rgba(255, 255, 255, 0.78); } .usb-button.button--utility--minimal { background: rgba(0, 0, 0, 0); border: rgba(0, 0, 0, 0) solid 1px; border-radius: 0.5rem; color: rgb(72, 72, 97); } .usb-button.button--utility--minimal .svg-icon { color: rgb(72, 72, 97); } .usb-button.button--utility--minimal:hover { background: rgb(122, 122, 149); color: rgb(255, 255, 255); } .usb-button.button--utility--minimal:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--utility--minimal:active { background: rgb(72, 72, 97); color: rgba(255, 255, 255, 0.78); } .usb-button.button--utility--minimal:active .svg-icon { color: rgba(255, 255, 255, 0.78); } .usb-button.button--utility.button--medium--icon-only { border: none; } .usb-button.button--utility.button--small--icon-only { border: none; } .usb-button.button--utility.button--large--icon-only { border: none; } .usb-button.button--utility .svg-icon { color: rgb(72, 72, 97); } .usb-button.button--utility:hover { background: rgb(122, 122, 149); border: none; color: rgb(255, 255, 255); padding: calc(0.75rem + 1px) calc(1.5rem + 1px); } .usb-button.button--utility:hover.button--large { padding: calc(1rem + 1px) calc(2rem + 1px); } .usb-button.button--utility:hover.button--small { padding: calc(0.5rem + 1px) calc(1.25rem + 1px); } .usb-button.button--utility:hover.button--small { padding-left: calc(0.75rem + 1px); padding-right: calc(0.75rem + 1px); } .usb-button.button--utility:hover.button--small.button--small--icon-only { padding: 0.5rem; } .usb-button.button--utility:hover.button--medium { padding-top: calc(0.5rem + 1px); padding-bottom: calc(0.5rem + 1px); } .usb-button.button--utility:hover.button--medium.button--medium--icon-only { padding: 0.5rem; } .usb-button.button--utility:hover.button--large { padding-top: calc(0.75rem + 1px); padding-bottom: calc(0.7rem + 1px); } .usb-button.button--utility:hover.button--large.button--large--icon-only { padding: 0.75rem; } .usb-button.button--utility:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--utility:active { background: rgb(72, 72, 97); color: rgba(255, 255, 255, 0.78); } .usb-button.button--utility:active .svg-icon { color: rgba(255, 255, 255, 0.78); } @media (hover: none) and (pointer: coarse) { .usb-button.button--utility { background: rgb(255, 255, 255); border: 0 solid rgb(122, 122, 149); color: rgb(72, 72, 97); } .usb-button.button--utility .svg-icon { color: rgb(72, 72, 97); } .usb-button.button--utility:hover, .usb-button.button--utility:focus { background: rgb(255, 255, 255); color: rgb(72, 72, 97); border: 0 solid rgb(122, 122, 149); } .usb-button.button--utility:hover .svg-icon, .usb-button.button--utility:focus .svg-icon { color: rgb(72, 72, 97); } .usb-button.button--utility:hover::before, .usb-button.button--utility:focus::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.5rem; content: ""; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); } .usb-button.button--utility:active { background: rgb(72, 72, 97); border: 0 solid rgb(122, 122, 149); color: rgba(255, 255, 255, 0.78); padding: calc(0.75rem + 1px) calc(1.5rem + 1px); } .usb-button.button--utility:active.button--large { padding: calc(1rem + 1px) calc(2rem + 1px); } .usb-button.button--utility:active.button--small { padding: calc(0.5rem + 1px) calc(1.25rem + 1px); } .usb-button.button--utility:active .svg-icon { color: rgba(255, 255, 255, 0.78); } } .usb-button.button--text { background: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0); border-width: 0; border-radius: 0.5rem; color: rgb(35, 90, 228); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1; } .usb-button.button--text .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--text:hover { background: rgb(0, 60, 200); color: rgb(255, 255, 255); text-decoration: "none"; } .usb-button.button--text:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--text:active { background: rgb(0, 30, 121); color: rgba(255, 255, 255, 0.78); } .usb-button.button--text:active .svg-icon { color: rgba(255, 255, 255, 0.78); } @media (hover: none) and (pointer: coarse) { .usb-button.button--text { background: rgba(0, 0, 0, 0); border: none; color: rgb(35, 90, 228); } .usb-button.button--text .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--text:hover, .usb-button.button--text:focus { background: rgba(0, 0, 0, 0); color: rgb(35, 90, 228); border: none; } .usb-button.button--text:hover .svg-icon, .usb-button.button--text:focus .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--text:hover::before, .usb-button.button--text:focus::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.5rem; content: ""; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); } .usb-button.button--text:active { background: rgb(0, 30, 121); border: none; color: rgba(255, 255, 255, 0.78); } .usb-button.button--text:active .svg-icon { color: rgba(255, 255, 255, 0.78); } } .usb-button.button--naked { background: rgba(0, 0, 0, 0); border: 0px none rgba(0, 0, 0, 0); color: inherit; line-height: 1; } .usb-button.button--naked:hover { background: rgba(0, 0, 0, 0); border: 0px none rgba(0, 0, 0, 0); color: inherit; } .usb-button.button--naked .usb-icon { margin-right: 0.25rem; } .usb-button.button--naked .usb-icon svg { fill: currentColor; } @media (hover: none) and (pointer: coarse) { .usb-button.button--naked { background: rgba(0, 0, 0, 0); color: inherit; } .usb-button.button--naked:hover { background: rgba(0, 0, 0, 0); color: inherit; } } .usb-button:focus::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.5rem; content: ""; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); } .usb-button:disabled, .usb-button[aria-disabled=true] { background: rgba(205, 209, 226, 0.4) !important; color: rgb(122, 122, 149) !important; cursor: not-allowed !important; border-color: rgba(0, 0, 0, 0) !important; } .usb-button:disabled .svg-icon, .usb-button[aria-disabled=true] .svg-icon { color: rgb(122, 122, 149) !important; } @media (hover: none) and (pointer: coarse) { .usb-button:disabled, .usb-button[aria-disabled=true] { background: rgba(205, 209, 226, 0.4); color: rgb(122, 122, 149); } .usb-button:disabled:hover, .usb-button:disabled:focus, .usb-button[aria-disabled=true]:hover, .usb-button[aria-disabled=true]:focus { background: rgba(205, 209, 226, 0.4); color: rgb(122, 122, 149); } .usb-button:disabled:hover:before, .usb-button:disabled:focus:before, .usb-button[aria-disabled=true]:hover:before, .usb-button[aria-disabled=true]:focus:before { border-color: rgba(0, 0, 0, 0); } } .usb-notification > .error, .usb-notification > .confirmation, .usb-notification > .information, .usb-notification > .warning { display: flex; align-items: flex-start; width: 100%; padding: 1rem 2.5rem 1rem 1rem; border-radius: 0.25rem; position: relative; outline-offset: -1px; line-height: 1.5; color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 0.875rem; line-height: 1.5; } .usb-notification > .error > div, .usb-notification > .confirmation > div, .usb-notification > .information > div, .usb-notification > .warning > div { margin-right: 0.75rem; } .usb-notification > .error h2, .usb-notification > .confirmation h2, .usb-notification > .information h2, .usb-notification > .warning h2 { position: relative; color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 500; font-size: 0.875rem; line-height: 1.5; display: flex; } .usb-notification > .error ul, .usb-notification > .confirmation ul, .usb-notification > .information ul, .usb-notification > .warning ul { list-style-type: disc; margin: 0.25rem 0 0 3rem; } .usb-notification > .error ul li, .usb-notification > .confirmation ul li, .usb-notification > .information ul li, .usb-notification > .warning ul li { margin: 0.5rem 0 0; vertical-align: middle; font-size: 0.875rem; } .usb-notification > .error ul li .button--naked, .usb-notification > .confirmation ul li .button--naked, .usb-notification > .information ul li .button--naked, .usb-notification > .warning ul li .button--naked { margin: 0; text-decoration: underline; line-height: inherit; vertical-align: baseline; border: none; background: none; padding: 0; display: inline; } .usb-notification > .error a, .usb-notification > .error button:not(.usb-button), .usb-notification > .confirmation a, .usb-notification > .confirmation button:not(.usb-button), .usb-notification > .information a, .usb-notification > .information button:not(.usb-button), .usb-notification > .warning a, .usb-notification > .warning button:not(.usb-button) { text-decoration: none; border: none; background: none; padding: 0; line-height: 1.5; } .usb-notification > .error .notification--content-group, .usb-notification > .confirmation .notification--content-group, .usb-notification > .information .notification--content-group, .usb-notification > .warning .notification--content-group { white-space: normal; } @media only screen and (min-width: 30rem) { .usb-notification > .error .notification--content-group, .usb-notification > .confirmation .notification--content-group, .usb-notification > .information .notification--content-group, .usb-notification > .warning .notification--content-group { white-space: nowrap; } } .usb-notification > .error .multiple-notification--text, .usb-notification > .error .single-notification--text, .usb-notification > .confirmation .multiple-notification--text, .usb-notification > .confirmation .single-notification--text, .usb-notification > .information .multiple-notification--text, .usb-notification > .information .single-notification--text, .usb-notification > .warning .multiple-notification--text, .usb-notification > .warning .single-notification--text { display: inline-flex; flex-direction: row; text-decoration: none; font-family: Circular-USB, Arial, Helvetica, sans-serif; line-height: 1.5; font-size: 0.875rem; font-weight: 400; color: rgb(45, 45, 62); } .usb-notification > .error .multiple-notification--text.single-notification--header, .usb-notification > .error .single-notification--text.single-notification--header, .usb-notification > .confirmation .multiple-notification--text.single-notification--header, .usb-notification > .confirmation .single-notification--text.single-notification--header, .usb-notification > .information .multiple-notification--text.single-notification--header, .usb-notification > .information .single-notification--text.single-notification--header, .usb-notification > .warning .multiple-notification--text.single-notification--header, .usb-notification > .warning .single-notification--text.single-notification--header { outline: none; } .usb-notification > .error .single-notification--text, .usb-notification > .error .single-notification--text + span.notification--content-group, .usb-notification > .confirmation .single-notification--text, .usb-notification > .confirmation .single-notification--text + span.notification--content-group, .usb-notification > .information .single-notification--text, .usb-notification > .information .single-notification--text + span.notification--content-group, .usb-notification > .warning .single-notification--text, .usb-notification > .warning .single-notification--text + span.notification--content-group { vertical-align: middle; } .usb-notification > .error .multiple-notification--link-text, .usb-notification > .error .multiple-notification--btn-text, .usb-notification > .error .single-notification--link-text, .usb-notification > .error .single-notification--link-btn, .usb-notification > .confirmation .multiple-notification--link-text, .usb-notification > .confirmation .multiple-notification--btn-text, .usb-notification > .confirmation .single-notification--link-text, .usb-notification > .confirmation .single-notification--link-btn, .usb-notification > .information .multiple-notification--link-text, .usb-notification > .information .multiple-notification--btn-text, .usb-notification > .information .single-notification--link-text, .usb-notification > .information .single-notification--link-btn, .usb-notification > .warning .multiple-notification--link-text, .usb-notification > .warning .multiple-notification--btn-text, .usb-notification > .warning .single-notification--link-text, .usb-notification > .warning .single-notification--link-btn { color: rgb(35, 90, 228); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; font-size: 0.875rem; font-weight: 400; text-decoration: underline; text-align: left; line-height: 1.5; } .usb-notification > .error .multiple-notification--link-text:hover, .usb-notification > .error .multiple-notification--btn-text:hover, .usb-notification > .error .single-notification--link-text:hover, .usb-notification > .error .single-notification--link-btn:hover, .usb-notification > .confirmation .multiple-notification--link-text:hover, .usb-notification > .confirmation .multiple-notification--btn-text:hover, .usb-notification > .confirmation .single-notification--link-text:hover, .usb-notification > .confirmation .single-notification--link-btn:hover, .usb-notification > .information .multiple-notification--link-text:hover, .usb-notification > .information .multiple-notification--btn-text:hover, .usb-notification > .information .single-notification--link-text:hover, .usb-notification > .information .single-notification--link-btn:hover, .usb-notification > .warning .multiple-notification--link-text:hover, .usb-notification > .warning .multiple-notification--btn-text:hover, .usb-notification > .warning .single-notification--link-text:hover, .usb-notification > .warning .single-notification--link-btn:hover { text-decoration: none; } .usb-notification > .error .multiple-notification--link-text:hover, .usb-notification > .error .multiple-notification--btn-text:hover, .usb-notification > .error .single-notification--link-text:hover, .usb-notification > .error .single-notification--link-btn:hover, .usb-notification > .confirmation .multiple-notification--link-text:hover, .usb-notification > .confirmation .multiple-notification--btn-text:hover, .usb-notification > .confirmation .single-notification--link-text:hover, .usb-notification > .confirmation .single-notification--link-btn:hover, .usb-notification > .information .multiple-notification--link-text:hover, .usb-notification > .information .multiple-notification--btn-text:hover, .usb-notification > .information .single-notification--link-text:hover, .usb-notification > .information .single-notification--link-btn:hover, .usb-notification > .warning .multiple-notification--link-text:hover, .usb-notification > .warning .multiple-notification--btn-text:hover, .usb-notification > .warning .single-notification--link-text:hover, .usb-notification > .warning .single-notification--link-btn:hover { text-decoration: none; } .usb-notification > .error .multiple-notification--link, .usb-notification > .confirmation .multiple-notification--link, .usb-notification > .information .multiple-notification--link, .usb-notification > .warning .multiple-notification--link { margin-left: 0.25rem; } .usb-notification > .error .single-notification--link-text, .usb-notification > .error .single-notification--btn-text, .usb-notification > .confirmation .single-notification--link-text, .usb-notification > .confirmation .single-notification--btn-text, .usb-notification > .information .single-notification--link-text, .usb-notification > .information .single-notification--btn-text, .usb-notification > .warning .single-notification--link-text, .usb-notification > .warning .single-notification--btn-text { color: rgb(35, 90, 228); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; font-size: 0.875rem; font-weight: 400; text-decoration: underline; line-height: 1.5; margin: 0 0.25rem; } .usb-notification > .error .single-notification--link-text:hover, .usb-notification > .error .single-notification--btn-text:hover, .usb-notification > .confirmation .single-notification--link-text:hover, .usb-notification > .confirmation .single-notification--btn-text:hover, .usb-notification > .information .single-notification--link-text:hover, .usb-notification > .information .single-notification--btn-text:hover, .usb-notification > .warning .single-notification--link-text:hover, .usb-notification > .warning .single-notification--btn-text:hover { text-decoration: none; } .usb-notification > .error .single-notification--link-text:hover, .usb-notification > .error .single-notification--btn-text:hover, .usb-notification > .confirmation .single-notification--link-text:hover, .usb-notification > .confirmation .single-notification--btn-text:hover, .usb-notification > .information .single-notification--link-text:hover, .usb-notification > .information .single-notification--btn-text:hover, .usb-notification > .warning .single-notification--link-text:hover, .usb-notification > .warning .single-notification--btn-text:hover { text-decoration: none; } .usb-notification > .error .single-notification--text-end-short, .usb-notification > .confirmation .single-notification--text-end-short, .usb-notification > .information .single-notification--text-end-short, .usb-notification > .warning .single-notification--text-end-short { margin: 0 0 0 0.25rem; } .usb-notification > .error .single-notification--text, .usb-notification > .error .single-notification--link-btn, .usb-notification > .confirmation .single-notification--text, .usb-notification > .confirmation .single-notification--link-btn, .usb-notification > .information .single-notification--text, .usb-notification > .information .single-notification--link-btn, .usb-notification > .warning .single-notification--text, .usb-notification > .warning .single-notification--link-btn { text-decoration: none; color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; font-size: 0.875rem; font-weight: 400; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .usb-notification > .error .single-notification--text, .usb-notification > .error .single-notification--link-btn, .usb-notification > .confirmation .single-notification--text, .usb-notification > .confirmation .single-notification--link-btn, .usb-notification > .information .single-notification--text, .usb-notification > .information .single-notification--link-btn, .usb-notification > .warning .single-notification--text, .usb-notification > .warning .single-notification--link-btn { /* IE10+ CSS styles go here */ margin-left: 12px; } } .usb-notification > .error .single-notification--text:focus, .usb-notification > .error .single-notification--link-btn:focus, .usb-notification > .confirmation .single-notification--text:focus, .usb-notification > .confirmation .single-notification--link-btn:focus, .usb-notification > .information .single-notification--text:focus, .usb-notification > .information .single-notification--link-btn:focus, .usb-notification > .warning .single-notification--text:focus, .usb-notification > .warning .single-notification--link-btn:focus { outline-offset: 0.25rem; outline-color: rgb(35, 90, 228); } .usb-notification > .error .single-notification--btn-wrapper, .usb-notification > .confirmation .single-notification--btn-wrapper, .usb-notification > .information .single-notification--btn-wrapper, .usb-notification > .warning .single-notification--btn-wrapper { display: flex; } .usb-notification > .error #children-notification-children-notification, .usb-notification > .confirmation #children-notification-children-notification, .usb-notification > .information #children-notification-children-notification, .usb-notification > .warning #children-notification-children-notification { padding-top: 0.25rem; } .usb-notification > .error #children-notification-children-notification a, .usb-notification > .confirmation #children-notification-children-notification a, .usb-notification > .information #children-notification-children-notification a, .usb-notification > .warning #children-notification-children-notification a { text-decoration: underline; } .usb-notification .usb-children-notification { margin-left: 2rem; } .usb-notification .usb-children-notification .usb-icon { position: absolute; left: 1rem; } .usb-notification .icon { width: 1.25rem; height: 1.25rem; margin-right: 0.75rem; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .usb-notification .icon { /* IE10+ CSS styles go here */ width: 20px; } } .usb-notification .usb-button.usb-button--close-btn { position: absolute; top: 1rem; right: 1.25rem; cursor: pointer; padding: 0; height: 1.25rem; min-height: 0; min-width: 0; width: 1.25rem; background: transparent; } .usb-notification .usb-button.usb-button--close-btn .svg-icon svg path, .usb-notification .usb-button.usb-button--close-btn .svg-icon svg circle, .usb-notification .usb-button.usb-button--close-btn .svg-icon svg ellipse, .usb-notification .usb-button.usb-button--close-btn .svg-icon svg g { fill: rgb(45, 45, 62); } .usb-notification .usb-button.usb-button--close-btn:hover { background: transparent; } .usb-notification > .error { border: 1px solid rgb(255, 190, 180); border-top: 4px solid rgb(207, 42, 54); background-color: rgb(255, 233, 234); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12); } .usb-notification > .error .usb-button:hover .svg-icon svg g, .usb-notification > .error .usb-button:hover .svg-icon svg path, .usb-notification > .error .usb-button:hover .svg-icon svg circle, .usb-notification > .error .usb-button:hover .svg-icon svg rect { fill: rgb(207, 42, 54); } .usb-notification > .confirmation { border: 1px solid rgb(160, 220, 170); border-top: 4px solid rgb(0, 125, 30); background-color: rgb(229, 248, 232); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12); } .usb-notification > .confirmation .usb-button:hover .svg-icon svg g, .usb-notification > .confirmation .usb-button:hover .svg-icon svg path, .usb-notification > .confirmation .usb-button:hover .svg-icon svg circle, .usb-notification > .confirmation .usb-button:hover .svg-icon svg rect { fill: rgb(0, 125, 30); } .usb-notification > .warning { border: 1px solid rgb(255, 213, 137); border-top: 4px solid rgb(235, 94, 1); background-color: rgb(255, 244, 228); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12); } .usb-notification > .warning .usb-button:hover .svg-icon svg g, .usb-notification > .warning .usb-button:hover .svg-icon svg path, .usb-notification > .warning .usb-button:hover .svg-icon svg circle, .usb-notification > .warning .usb-button:hover .svg-icon svg rect { fill: rgb(235, 94, 1); } .usb-notification > .information { border: 1px solid rgb(170, 210, 255); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12); border-top: 4px solid rgb(35, 90, 228); background-color: rgb(238, 246, 255); } .usb-notification > .information .usb-button:hover .svg-icon svg g, .usb-notification > .information .usb-button:hover .svg-icon svg path, .usb-notification > .information .usb-button:hover .svg-icon svg circle, .usb-notification > .information .usb-button:hover .svg-icon svg rect { fill: rgb(35, 90, 228); } /* Fonts */ html, body { font-family: Circular-USB, Arial, Helvetica, sans-serif; } @supports (font: -apple-system-body) { html { font: -apple-system-body; } body { font-size: 0.94rem; } } /* This CSS resource incorporates links to font software which is the valuable copyrighted property of Monotype Imaging and/or its suppliers. You may not attempt to copy, install, redistribute, convert, modify or reverse engineer this font software. Please contact Monotype Imaging with any questions regarding Web Fonts: http://www.fonts.com */ @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Light.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-LightItalic.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-LightItalic.woff") format("woff"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Regular.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Italic.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Book.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Book.woff") format("woff"); font-weight: 450; font-style: normal; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-BookItalic.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-BookItalic.woff") format("woff"); font-weight: 450; font-style: italic; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Medium.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-MediumItalic.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-MediumItalic.woff") format("woff"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Bold.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-BoldItalic.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-BoldItalic.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Black.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-Black.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Circular-USB"; src: url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-BlackItalic.woff2") format("woff2"), url("https://content.usbank.com/content/dam/onlinebanking/common/static/fonts/U.S.BankCircularWeb-BlackItalic.woff") format("woff"); font-weight: 900; font-style: italic; font-display: swap; } /* HTML5 Reset :: style.css ---------------------------------------------------------- We have learned much from/been inspired by/taken code where offered from: Eric Meyer :: http://meyerweb.com HTML5 Doctor :: http://html5doctor.com and the HTML5 Boilerplate :: http://html5boilerplate.com -------------------------------------------------------------------------------*/ /* Let's default this puppy out -------------------------------------------------------------------------------*/ html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary { margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent; } main, article, aside, figure, footer, header, nav, section, details, summary { display: block; } /* Handle box-sizing while better addressing child elements: http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */ /* Responsive images and other embedded objects */ /* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */ img, object, embed { max-width: 100%; } /* Note: keeping IMG here will cause problems if you're using foreground images as sprites. In fact, it *will* cause problems with Google Maps' controls at small size. If this is the case for you, try uncommenting the following: #map img { max-width: none; } */ /* force a vertical scrollbar to prevent a jumpy page */ html { overflow-y: scroll; } /* we use a lot of ULs that aren't bulleted. you'll have to restore the bullets within content, which is fine because they're probably customized anyway */ ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; } /* tables still need cellspacing="0" in the markup */ table { border-collapse: separate; border-spacing: 0; } th { font-weight: bold; vertical-align: bottom; } td { font-weight: normal; vertical-align: top; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } pre { white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } input[type=radio] { vertical-align: text-bottom; } input[type=checkbox] { vertical-align: bottom; } .ie7 input[type=checkbox] { vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } select, input, textarea { font: 99% sans-serif; } table { font-size: inherit; font: 100%; } small { font-size: 85%; } strong { font-weight: bold; } td, td img { vertical-align: top; } /* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */ sub, sup { font-size: 75%; line-height: 0; position: relative; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* standardize any monospaced elements */ pre, code, kbd, samp { font-family: monospace, sans-serif; } /* hand cursor on clickable elements */ .clickable, label, input[type=button], input[type=submit], input[type=file], button { cursor: pointer; } /* Webkit browsers add a 2px margin outside the chrome of form elements */ button, input, select, textarea { margin: 0; } /* make buttons play nice in IE */ button, input[type=button] { width: auto; overflow: visible; } /* scale images in IE7 more attractively */ .ie7 img { -ms-interpolation-mode: bicubic; } /* prevent BG image flicker upon hover (commented out as usage is rare, and the filter syntax messes with some pre-processors) .ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} */ /* let's clear some floats */ .clearfix:after { content: " "; display: block; clear: both; } /* Screen reader to hide */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .usb--error-message { display: flex; justify-content: flex-start; align-items: flex-start; font-size: 0.75rem; } .usb--error-message svg { color: rgb(207, 42, 54); fill: rgb(207, 42, 54); height: 1rem; margin-right: 0.25rem; width: 0.75rem; } .usb--error-message span { color: rgb(207, 42, 54); line-height: 1.25; margin-top: 0.25rem; } .usb--error-message span.usb-icon { line-height: 1; } .optionalSpan { color: rgb(99, 99, 127); display: flex; font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 0.75rem; font-weight: 400; line-height: 1.5; padding-top: 0.25rem; } .helper_label--wrapper { display: flex; justify-content: flex-start; align-items: flex-start; } .helper_label--wrapper .en_dash { color: rgb(99, 99, 127); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 0.75rem; font-weight: 400; line-height: 1.5; padding: 4px 0.25rem 0; } .shakeWarning { display: block; animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } .icon-container { margin: 0; position: absolute; right: 0; top: 0.25rem; } .usb--wrapper button.show-hide__button { background-color: transparent; border: none; color: rgb(99, 99, 127); font-size: 0.875rem; font-weight: 400; line-height: 1.25rem; min-height: 1.5rem; margin: 0; outline: none; padding: 0; position: absolute; right: 0; top: 1rem; } .usb--wrapper button.show-hide__button::after { content: ""; border: 2px solid transparent; border-radius: 0.25rem; height: calc(100% + 0.5rem); position: absolute; left: -0.25rem; top: -0.25rem; transition: 0.1s ease border; width: calc(100% + 0.5rem); } .usb--wrapper button.show-hide__button:hover { text-decoration: none; } .usb--wrapper button.show-hide__button:focus::after { border-color: rgb(35, 90, 228); } .usb--checkbox--fieldset { border: 0; margin-bottom: -1.25rem; } .usb--checkbox-group--legend { color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.5; position: relative; } .usb--checkbox-group--legend .usb--error-message span { margin-top: 0.25rem; } .usb--checkbox-group--legend .usb-toggletip-container { display: inline-block; position: relative; left: -0.25rem; right: auto; top: 0.25rem; transform: none; } .usb--checkbox-group--legend .usb-toggletip-container + .helper_label--wrapper span { padding-top: 0; } .usb--checkbox-group--legend .usb-toggletip-container + .usb--error-message span { margin-top: 0; } .usb--checkbox-group--legend .helper_label--wrapper span { padding-top: 0.25rem; } .usb--checkbox-wrapper { margin-top: 0; margin-bottom: 1.25rem; min-height: unset; padding-top: 0; flex-basis: 50%; } .usb--checkbox-list { margin-top: 1.5rem; } @media only screen and (min-width: 41.9375rem) { .usb--checkbox-list .checkbox-column { flex-basis: 50%; } .usb--checkbox-list .checkbox-column:not(:first-of-type) { margin-left: 2rem; } .usb--checkbox-list.columns { display: flex; } } .usb--checkbox-indeterminate_parent + ul > li { margin-bottom: 1.25rem; } .usb--checkbox-indeterminate_child { margin-left: 1.25rem; } .usb--checkbox--fieldset.usb--selectable-card { margin-bottom: 0; } .usb--checkbox--fieldset.usb--selectable-card .usb--checkbox-list { margin-top: 0; } .usb--checkbox--fieldset.usb--selectable-card .usb--error-message { margin-bottom: 0.75rem; } .usb--checkbox--fieldset.usb--selectable-card .usb--selectablecard-wrapper { padding-top: 1px; padding-bottom: 1rem; } .usb--checkbox-input { cursor: pointer; height: 2.75rem; opacity: 0; position: absolute; left: -0.75rem; top: -0.75rem; width: 2.75rem; z-index: 10; } .usb--checkbox-input:checked + label .usb--checkbox-svg svg, .usb--checkbox-input[aria-checked=true] + label .usb--checkbox-svg svg, .usb--checkbox-input[aria-checked=mixed] + label .usb--checkbox-svg svg { border-width: 0; background: rgb(35, 90, 228); fill: rgb(255, 255, 255); } .usb--checkbox-input:checked:disabled + label .usb--checkbox-svg svg, .usb--checkbox-input[aria-checked=true]:disabled + label .usb--checkbox-svg svg, .usb--checkbox-input[aria-checked=mixed]:disabled + label .usb--checkbox-svg svg { fill: rgb(72, 72, 97); } .usb--checkbox-input:disabled + label { color: rgb(122, 122, 149); } .usb--checkbox-input[aria-checked=mixed] + label .usb--checkbox-svg svg { stroke: rgb(255, 255, 255); } .usb--checkbox-input[aria-checked=mixed]:disabled + label .usb--checkbox-svg svg { stroke: rgb(72, 72, 97); } .usb--checkbox-input:focus + label::after { border-color: rgb(0, 60, 200); } .usb--checkbox-input:disabled, .usb--checkbox-input:disabled + label, .usb--checkbox-input:disabled + label .usb--checkbox-svg svg { cursor: not-allowed; } .usb--checkbox-input:disabled + label .usb--checkbox-svg svg { background: rgb(204, 204, 210); border-width: 0; } .usb--checkbox-input ~ .helper_label--wrapper { margin-left: 2rem; } .usb--checkbox-input:disabled ~ .helper_label--wrapper span { color: rgb(122, 122, 149); } .usb--checkbox-icon { margin-right: 0.5rem; margin-top: -0.25rem; width: 2rem; min-width: 2rem; text-align: center; height: 2rem !important; } .usb--checkbox-icon-radius { border-radius: 50%; } .usb--checkbox-icon-radius svg { border-radius: 50%; } .usb--checkbox-label { color: rgb(72, 72, 97); cursor: pointer; display: flex; align-items: flex-start; flex-direction: row-reverse; justify-content: flex-end; font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 400; position: relative; width: 100%; } .usb--checkbox-label::after { content: ""; border: 2px solid transparent; border-radius: 0.25rem; height: 2rem; position: absolute; left: -0.375rem; top: -0.375rem; width: 2rem; } .usb--checkbox-label span { display: flex; align-items: center; justify-content: center; } .usb--checkbox-label span.usb--checkbox-svg svg { background: rgb(255, 255, 255); border: 1px solid rgb(122, 122, 149); border-radius: 0.25rem; fill: transparent; stroke: transparent; height: 1.25rem; transition: border-color 0.25s ease; pointer-events: none; min-width: 1.25rem; margin-right: 0.75rem; position: relative; vertical-align: middle; width: 1.25rem; } .usb--checkbox-label span.usb--checkbox-label-text { display: inline; } .usb--checkbox-label + .usb--error-message { margin-left: 2rem; } .usb--checkbox-legend { color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.5; position: relative; } .usb--checkbox-legend .usb--error-message span { margin-top: 0.25rem; } .usb--checkbox-legend .usb-toggletip-container { display: inline-block; position: relative; left: -0.25rem; right: auto; top: 0.25rem; transform: none; } .usb--checkbox-legend .usb-toggletip-container + .helper_label--wrapper span { padding-top: 0; } .usb--checkbox-legend .usb-toggletip-container + .usb--error-message span { margin-top: 0; } .usb--checkbox-legend .helper_label--wrapper span { padding-top: 0.25rem; } .usb--checkbox-wrapper { position: relative; width: fit-content; } .usb--checkbox-wrapper.usb--checkbox--fieldset > .usb--checkbox-label { margin-top: 1.5rem; } .usb--checkbox-wrapper.usb--checkbox--fieldset > .usb--checkbox-input { top: 0.75rem; } .usb--checkbox-wrapper .helper_label--wrapper span { color: rgb(99, 99, 127); } .usb--checkbox-wrapper.is-error .usb--checkbox-input + label .usb--checkbox-svg svg { background: rgb(255, 255, 255); border: 2px solid rgb(207, 42, 54); } .usb--checkbox-wrapper.is-error .usb--checkbox-input:checked + label .usb--checkbox-svg svg, .usb--checkbox-wrapper.is-error .usb--checkbox-input[aria-checked=true] + label svg { fill: rgb(207, 42, 54); } .usb--checkbox-wrapper.is-error .usb--checkbox-input[aria-checked=mixed] + label svg { stroke: rgb(207, 42, 54); } .usb--checkbox-wrapper.is-error:hover .usb--checkbox-input:checked + label .usb--checkbox-svg svg, .usb--checkbox-wrapper.is-error:hover .usb--checkbox-input[aria-checked=true] + label .usb--checkbox-svg svg, .usb--checkbox-wrapper.is-error:hover .usb--checkbox-input[aria-checked=mixed] + label .usb--checkbox-svg svg { background: rgb(255, 255, 255); border: 2px solid rgb(0, 30, 121); fill: rgb(207, 42, 54); } .usb--checkbox-wrapper.is-error:hover .usb--checkbox-input[aria-checked=mixed] + label .usb--checkbox-svg svg { stroke: rgb(207, 42, 54); } .usb--checkbox-wrapper:hover:not(.is-read-only):not(.is-disabled) .usb--checkbox-input + label .usb--checkbox-svg svg { border: 2px solid rgb(0, 60, 200); } .usb--checkbox-wrapper:hover:not(.is-read-only):not(.is-disabled) .usb--checkbox-input:active + label .usb--checkbox-svg svg { border: 2px solid rgb(0, 30, 121); } .usb--checkbox-wrapper:hover:not(.is-read-only):not(.is-disabled) .usb--checkbox-input:checked + label .usb--checkbox-svg svg, .usb--checkbox-wrapper:hover:not(.is-read-only):not(.is-disabled) .usb--checkbox-input[aria-checked=true] + label .usb--checkbox-svg svg, .usb--checkbox-wrapper:hover:not(.is-read-only):not(.is-disabled) .usb--checkbox-input[aria-checked=mixed] + label .usb--checkbox-svg svg { background: rgb(0, 60, 200); border-width: 0; fill: rgb(255, 255, 255); } .usb--checkbox-wrapper:hover:not(.is-read-only):not(.is-disabled) .usb--checkbox-input:checked:active + label .usb--checkbox-svg svg, .usb--checkbox-wrapper:hover:not(.is-read-only):not(.is-disabled) .usb--checkbox-input[aria-checked=true]:active + label .usb--checkbox-svg svg, .usb--checkbox-wrapper:hover:not(.is-read-only):not(.is-disabled) .usb--checkbox-input[aria-checked=mixed]:active + label .usb--checkbox-svg svg { background: rgba(255, 255, 255, 0.78); } .usb--checkbox-wrapper:hover:not(.is-read-only):not(.is-disabled) .usb--checkbox-input[aria-checked=mixed] + label .usb--checkbox-svg svg { stroke: rgb(255, 255, 255); } .usb--checkbox-wrapper.is-read-only { cursor: not-allowed; } .usb--checkbox-wrapper.is-read-only .usb--checkbox-input { pointer-events: none; } .usb--checkbox-wrapper.is-read-only .usb--checkbox-input + label { pointer-events: none; } .usb--checkbox-wrapper.is-read-only .usb--checkbox-input + label::after { content: ""; border: 2px solid transparent; border-radius: 0.25rem; height: 2rem; position: absolute; left: -0.375rem; top: -0.375rem; width: 2rem; } .usb--checkbox-wrapper.is-read-only .usb--checkbox-input + label span { display: flex; align-items: center; justify-content: center; } .usb--checkbox-wrapper.is-read-only .usb--checkbox-input + label span.usb--checkbox-svg svg { background: rgb(255, 255, 255); border: 1px solid rgb(122, 122, 149); border-radius: 0.25rem; fill: transparent; height: 1.25rem; transition: border-color 0.25s ease; pointer-events: none; min-width: 1.25rem; margin-right: 0.75rem; position: relative; vertical-align: middle; width: 1.25rem; } .usb--checkbox-wrapper.is-read-only .usb--checkbox-input + label span.usb--checkbox-label-text { display: inline; } .usb--checkbox-wrapper.is-read-only .usb--checkbox-input + label span:checked + label .usb--checkbox-svg svg, .usb--checkbox-wrapper.is-read-only .usb--checkbox-input + label span[aria-checked=true] + label .usb--checkbox-svg svg { fill: rgb(72, 72, 97); } .usb--checkbox-wrapper.is-read-only .usb--checkbox-input + label span[aria-checked=mixed] + label .usb--checkbox-svg svg { stroke: rgb(72, 72, 97); } .usb--wrapper { background-color: rgba(0, 0, 0, 0); margin-top: 0.5rem; min-height: 3rem; padding-top: 1rem; position: relative; width: 100%; z-index: 0; } .usb--wrapper.is-long-label { margin-top: 1.75rem; } .usb--wrapper .usb--basic-input { background-color: rgba(0, 0, 0, 0); border-radius: 0; border-style: solid; border-color: rgb(122, 122, 149); border-top-width: 0; border-right-width: 0; border-bottom-width: 1px; border-left-width: 0; color: rgb(72, 72, 97); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; margin: 0 auto auto auto; padding: 0 0 0 0; width: 100%; } .usb--wrapper .usb--basic-input.input__show-hide, .usb--wrapper .usb--basic-input.input__date-picker { padding-right: 2.5rem; } .usb--wrapper .usb--basic-input.input__has-toggletip { padding-right: 1.5rem; } .usb--wrapper .usb--basic-input.input__has-toggletip + .show-hide__button { right: 2rem; } .usb--wrapper .usb--basic-input::-ms-clear { display: none; height: 0; width: 0; } .usb--wrapper .usb--floating-label { background-color: rgba(0, 0, 0, 0); color: rgb(99, 99, 127); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; position: absolute; top: 1rem; left: 0; transition: all 0.25s ease; } .usb--wrapper .usb--floating-label_overflow { top: -0.6666666667rem; } .usb--wrapper .usb--error-text-container { height: auto; max-height: 0; opacity: 0; transition: max-height .5s ease-in-out, opacity .5s ease-in-out; overflow: hidden; } .usb--wrapper.is-focused::after { content: ""; border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); z-index: -1; } .usb--wrapper.is-focused.is-long-label::after { height: calc(100% + 1.5rem + 0.375rem); top: -1.5rem; } .usb--wrapper.is-focused.is-value label, .usb--wrapper.is-focused label { color: rgb(99, 99, 127); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 0.75rem; line-height: 1.5; top: 0; } .usb--wrapper.is-focused.is-value label.usb--floating-label_overflow, .usb--wrapper.is-focused label.usb--floating-label_overflow { top: -1.125rem; } .usb--wrapper.is-focused .usb--basic-input { outline: transparent; border-style: solid; border-color: rgb(35, 90, 228); border-top-width: 0; border-right-width: 0; border-bottom-width: 1px; border-left-width: 0; font-family: Circular-USB, Arial, Helvetica, sans-serif; margin-top: auto; margin-right: -1px; margin-bottom: -1px; margin-left: 0; } .usb--wrapper.is-focused.is-value .usb--basic-input { border-top-width: 0; border-right-width: 0; border-bottom-width: 2px; border-left-width: 0; color: rgb(72, 72, 97); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; margin-top: auto; margin-right: -1px; margin-bottom: -1px; margin-left: 0; } .usb--wrapper.is-value .usb--basic-input { font-weight: 400; font-size: 1rem; line-height: 1.5; } .usb--wrapper.is-disabled .show-hide__button, .usb--wrapper.is-read-only .show-hide__button { display: none; } .usb--wrapper.is-disabled .usb--floating-label, .usb--wrapper.is-read-only .usb--floating-label { cursor: default; } .usb--wrapper.is-disabled .usb--basic-input, .usb--wrapper.is-read-only .usb--basic-input { border: none; border-bottom: 1px solid rgba(0, 0, 0, 0); } .usb--wrapper.is-disabled .button__date-picker, .usb--wrapper.is-read-only .button__date-picker { cursor: not-allowed; } .usb--wrapper.is-disabled .usb--floating-label, .usb--wrapper.is-read-only .usb--floating-label { top: 1rem; font-size: 1rem; transition: none; margin-bottom: -1px; } .usb--wrapper.is-disabled .usb--floating-label_overflow, .usb--wrapper.is-read-only .usb--floating-label_overflow { top: auto; } .usb--wrapper.is-disabled { background: rgba(205, 209, 226, 0.4); } .usb--wrapper.is-disabled .usb--floating-label, .usb--wrapper.is-disabled.is-value .usb--floating-label, .usb--wrapper.is-disabled .helper_label--wrapper span, .usb--wrapper.is-disabled .icon-container .usb-icon { cursor: not-allowed; color: rgb(122, 122, 149); } .usb--wrapper.is-disabled .usb--basic-input { cursor: not-allowed; color: rgb(122, 122, 149); border-bottom: 1px solid rgb(205, 209, 226); } .usb--wrapper.is-disabled button.show-hide__button, .usb--wrapper.is-disabled .usb-toggletip-container .usb-icon, .usb--wrapper.is-disabled .button__date-picker .usb-icon { color: rgb(122, 122, 149); } .usb--wrapper.is-disabled .usb-toggletip-container .usb-icon svg, .usb--wrapper.is-disabled .icon-container .usb-icon svg, .usb--wrapper.is-disabled .button__date-picker .usb-icon svg { fill: rgb(122, 122, 149); } .usb--wrapper.is-value .usb--floating-label { color: rgb(99, 99, 127); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 0.75rem; line-height: 1.5; top: 0; } .usb--wrapper.is-value .usb--floating-label_overflow { top: -1.125rem; } .usb--wrapper.is-error .usb--floating-label, .usb--wrapper.is-error.is-value .usb--floating-label, .usb--wrapper.is-error.is-focused .usb--floating-label { color: rgb(207, 42, 54); } .usb--wrapper.is-error .usb--basic-input, .usb--wrapper.is-error.is-value .usb--basic-input, .usb--wrapper.is-error.is-focused .usb--basic-input { border-style: solid; border-color: rgb(207, 42, 54); border-top-width: 0; border-right-width: 0; border-bottom-width: 2px; border-left-width: 0; } .usb--wrapper.is-error .usb--error-text-container, .usb--wrapper.is-error.is-value .usb--error-text-container, .usb--wrapper.is-error.is-focused .usb--error-text-container { max-height: 4rem; opacity: 1; } .usb--wrapper .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .usb--wrapper .button__date-picker { background-color: rgba(0, 0, 0, 0); border: none; position: absolute; right: 0; top: 1rem; } .usb--wrapper.is-card-icon .usb--basic-input.input__show-hide { padding-right: 4.5rem; } .usb--wrapper.is-card-icon button.show-hide__button { right: 2rem !important; transition: all 300ms ease-out; } .usb--wrapper.is-card-icon .icon-container { top: 1.1rem; } .usb--radio-fieldset { border: 0; } .usb--radio-legend { color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.5; position: relative; } .usb--radio-legend + .usb--error-message { margin-bottom: 0.75rem; } .usb--radio-legend + .usb--error-message span { margin-top: 0.25rem; } .usb--radio-wrapper { display: flex; align-items: flex-start; margin-left: -0.75rem; position: relative; z-index: 0; } .usb--radio-wrapper.is-disabled:not(.is-chips), .usb--radio-wrapper.is-read-only:not(.is-chips) { cursor: not-allowed; } .usb--radio-wrapper.is-disabled:not(.is-chips) > *, .usb--radio-wrapper.is-read-only:not(.is-chips) > * { color: rgb(122, 122, 149); pointer-events: none; } .usb--radio-wrapper.is-disabled:not(.is-chips) input[type=radio], .usb--radio-wrapper.is-read-only:not(.is-chips) input[type=radio] { border: none; background-clip: content-box; padding: 0px; } .usb--radio-wrapper.is-disabled:not(.is-chips) input[type=radio]:not(:checked), .usb--radio-wrapper.is-read-only:not(.is-chips) input[type=radio]:not(:checked) { background-color: rgba(205, 209, 226, 0.4); } .usb--radio-wrapper.is-disabled:not(.is-chips) input[type=radio]:not(:checked)::before, .usb--radio-wrapper.is-read-only:not(.is-chips) input[type=radio]:not(:checked)::before { content: none; } .usb--radio-wrapper.is-disabled:not(.is-chips) input[type=radio]:not(:checked)::-ms-check, .usb--radio-wrapper.is-read-only:not(.is-chips) input[type=radio]:not(:checked)::-ms-check { border: none; background-color: rgba(205, 209, 226, 0.4); } .usb--radio-wrapper.is-disabled:not(.is-chips) input[type=radio]:checked, .usb--radio-wrapper.is-read-only:not(.is-chips) input[type=radio]:checked { background-color: rgba(205, 209, 226, 0.4); } .usb--radio-wrapper.is-disabled:not(.is-chips) input[type=radio]:checked::before, .usb--radio-wrapper.is-read-only:not(.is-chips) input[type=radio]:checked::before { background: rgb(122, 122, 149); } .usb--radio-wrapper.is-disabled:not(.is-chips) input[type=radio]:checked::-ms-check, .usb--radio-wrapper.is-read-only:not(.is-chips) input[type=radio]:checked::-ms-check { border: none; background-color: rgba(205, 209, 226, 0.4); } .usb--radio-wrapper.is-focused::after { content: ""; display: block; border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; height: 1.75rem; position: absolute; left: 0.5rem; top: 0.5rem; width: 1.75rem; z-index: -1; } .usb--radio-label { cursor: pointer; margin-top: 0.75rem; } .usb--radio-label + .helper_label--wrapper span { color: rgb(99, 99, 127); } .usb--radio-label_container { color: rgb(72, 72, 97); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 1rem; line-height: 1.25; position: relative; vertical-align: top; width: 100%; margin-top: 0.75rem; } .usb--radio-label_container .helper_label--wrapper { margin-bottom: 0.75rem; } .usb--radio-label_container.has-icon { padding-left: 2.5rem; } .usb--radio-label_container.has-icon .usb--radio-icon { position: absolute; left: 0; } .usb--radio-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: rgb(255, 255, 255); border: 1px solid rgb(122, 122, 149); border-radius: 50%; cursor: pointer; height: 1.25rem; margin: 0.75rem; min-width: 1.25rem; outline: none; padding: 3px; position: relative; width: 1.25rem; } .usb--radio-input::before { background: rgb(255, 255, 255); border-radius: 50%; content: ""; height: calc(0.5rem + 0.125rem); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(0.5rem + 0.125rem); } .usb--radio-input:checked { border: 2px solid rgb(35, 90, 228); } .usb--radio-input:checked::before { background: rgb(35, 90, 228); } .usb--radio-input:checked::-ms-check { border: 2px solid rgb(35, 90, 228); color: rgb(35, 90, 228); } .usb--radio-input:hover:not(:disabled) { border: 2px solid rgb(35, 90, 228); } .usb--radio-input:hover:not(:disabled):checked::before { background: rgb(35, 90, 228); } .usb--radio-input:hover:not(:disabled)::-ms-check { border: 2px solid rgb(35, 90, 228); color: rgb(35, 90, 228); } .is-focused .usb--radio-input:active:not(:disabled) { border: 2px solid rgb(35, 90, 228); } .is-focused .usb--radio-input:active:not(:disabled):checked::before { background: rgb(35, 90, 228); } .is-focused .usb--radio-input:active:not(:disabled)::-ms-check { border: 2px solid rgb(35, 90, 228); color: rgb(0, 30, 121); } .usb--radio-input.is-error { border: 2px solid rgb(207, 42, 54); } .usb--radio-input.is-error:checked::before { background: rgb(207, 42, 54); } .usb--radio-input.is-error::-ms-check { border: 2px solid rgb(207, 42, 54); color: rgb(0, 30, 121); } .usb--radio-icon { margin-right: 0.5rem; text-align: center; height: 2rem; } .usb--radio-icon-radius { border-radius: 50%; } .usb--radio-img { width: 2rem; min-width: 2rem; margin-top: -0.25rem; height: 2rem; vertical-align: top; } .usb--radio-svg svg { margin-top: -0.25rem; width: 2rem; height: 2rem; vertical-align: top; } .usb--radio-fieldset .usb--selectablecard-wrapper { padding-top: 1px; padding-bottom: 1rem; } .usb--select--wrapper { margin-top: 0.5rem; min-height: 3rem; position: relative; width: 100%; z-index: 0; } .usb--select--wrapper.is-focused::after { content: ""; border: 2px solid rgb(35, 90, 228); border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); } .usb--select--wrapper.is-focused .usb--select--container { border-style: solid; border-color: rgb(35, 90, 228); border-top-width: 0; border-right-width: 0; border-bottom-width: 2px; border-left-width: 0; padding-top: 0; } .usb--select--wrapper.is-error .usb--select--label { color: rgb(207, 42, 54); } .usb--select--wrapper.is-error .usb--select--container { border-style: solid; border-color: rgb(207, 42, 54); border-top-width: 0; border-right-width: 0; border-bottom-width: 2px; border-left-width: 0; padding-top: 0; } .usb--select--wrapper.is-error .usb--select--label, .usb--select--wrapper.is-error.is-focused .usb--select--label, .usb--select--wrapper.is-error.is-value .usb--select--label { color: rgb(207, 42, 54); } .usb--select--wrapper.is-error .usb--select--container, .usb--select--wrapper.is-error.is-focused .usb--select--container, .usb--select--wrapper.is-error.is-value .usb--select--container { border-style: solid; border-color: rgb(207, 42, 54); border-top-width: 0; border-right-width: 0; border-bottom-width: 2px; border-left-width: 0; padding-top: 0; } .usb--select--wrapper .usb--select--label { color: rgb(99, 99, 127); display: inline-block; font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 0.75rem; font-weight: 400; line-height: 1.5; position: relative; z-index: 2; top: 0.125rem; } .usb--select--wrapper .usb--select--container { background-color: rgb(255, 255, 255); border-radius: 0; border-style: solid; border-color: rgb(122, 122, 149); border-top-width: 0; border-right-width: 0; border-bottom-width: 1px; border-left-width: 0; padding: 0 0 0 0; position: relative; z-index: 1; } .usb--select--wrapper .usb--select--container .usb--select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: rgb(255, 255, 255); border: none; border-radius: 0; color: rgb(72, 72, 97); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; padding-left: 0; padding-right: 20px; transition: all 0.25s ease; width: 100%; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .usb--select--wrapper .usb--select--container .usb--select { color: rgb(72, 72, 97); } } .usb--select--wrapper .usb--select--container .usb--select::-ms-expand { display: none; } .usb--select--wrapper .usb--select--container .usb--select:focus { margin: 0; outline: none; } .usb--select--wrapper .usb--select--container .usb--select:focus::-ms-value { background-color: rgb(255, 255, 255); color: rgb(72, 72, 97); } .usb--select--wrapper .usb--select--container .usb--select:-moz-focusring { color: rgb(72, 72, 97); -moz-appearance: none; } .usb--select--wrapper .usb--select--container .select--chevron { position: absolute; right: 0; top: 0; pointer-events: none; } .usb--select--wrapper .usb--select--container .select--chevron svg { fill: rgb(72, 72, 97); } .usb--select--wrapper.is-value .usb--select { color: rgb(45, 45, 62); } .usb--select--wrapper.is-value .usb--select:-moz-focusring { color: rgb(45, 45, 62); } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .usb--select--wrapper.is-value .usb--select:focus::-ms-value { background-color: rgb(255, 255, 255); color: rgb(45, 45, 62); } } .usb--select--wrapper.is-read-only { cursor: not-allowed; } .usb--select--wrapper.is-read-only .usb--select--container { background-color: transparent; border: none; border-bottom: 1px solid transparent; pointer-events: none; } .usb--select--wrapper.is-read-only .usb--select--container .usb--select { color: rgb(72, 72, 97); pointer-events: none; } .usb--select--wrapper.is-read-only .usb--select--container .select--chevron { display: none; } .usb--select--wrapper.is-read-only .usb--info-message, .usb--select--wrapper.is-read-only .usb-toggletip-container, .usb--select--wrapper.is-read-only .show-hide__button, .usb--select--wrapper.is-read-only .en_dash { display: none; } .usb--select--wrapper.is-read-only.is-value .optionalSpan { display: none; } .usb--select--wrapper.is-read-only .usb--select--label { pointer-events: none; } .usb--select--wrapper.is-disabled { background-color: rgba(205, 209, 226, 0.4); cursor: not-allowed; } .usb--select--wrapper.is-disabled .usb--select--label { color: rgb(122, 122, 149); pointer-events: none; } .usb--select--wrapper.is-disabled .usb--select--container { border-bottom-color: rgb(205, 209, 226); background-color: transparent; } .usb--select--wrapper.is-disabled .usb--select--container .usb--select { background-color: transparent; color: rgb(122, 122, 149); pointer-events: none; opacity: 1; } .usb--select--wrapper.is-disabled .usb--select--container .select--chevron svg { fill: rgb(122, 122, 149); } .usb--select--wrapper.is-disabled .helper_label--wrapper span { color: rgb(122, 122, 149); } .usb-text_area { display: flex; flex-direction: column; position: relative; width: 100%; z-index: 0; } .usb-text_area.is-focused::after { content: ""; border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); z-index: -1; } .usb-text_area.is-focused .usb-text_area--wrapper { border-color: rgb(35, 90, 228); } .usb-text_area.is-value label, .usb-text_area.is-focused label { color: rgb(99, 99, 127); font-size: 0.75rem; } .usb-text_area.is-disabled .usb-text_area--wrapper, .usb-text_area.is-read-only .usb-text_area--wrapper { border: 1px solid rgb(205, 209, 226); } .usb-text_area.is-disabled .usb-text_area-basic, .usb-text_area.is-read-only .usb-text_area-basic { resize: none; } .usb-text_area.is-disabled .usb--floating-label, .usb-text_area.is-read-only .usb--floating-label { cursor: default; } .usb-text_area.is-disabled .usb-text_area--helpers_counter, .usb-text_area.is-read-only .usb-text_area--helpers_counter { display: none; } .usb-text_area.is-read-only:not(.is-value) .usb--floating-label { color: rgb(72, 72, 97); font-size: 1rem; transition: none; } .usb-text_area.is-disabled .usb-text_area--wrapper { background: rgba(205, 209, 226, 0.4); } .usb-text_area.is-disabled .usb-text_area-basic, .usb-text_area.is-disabled .usb--floating-label, .usb-text_area.is-disabled.is-value .usb--floating-label, .usb-text_area.is-disabled .helper_label--wrapper span { cursor: not-allowed; color: rgb(122, 122, 149); } .usb-text_area.is-error .usb-text_area--wrapper { border: 2px solid rgb(207, 42, 54); } .usb-text_area.is-error .usb-text_area--wrapper label { color: rgb(207, 42, 54); } .usb-text_area.not-resizable textarea { resize: none; } .usb-text_area--wrapper { background-color: rgb(255, 255, 255); border: 1px solid rgb(122, 122, 149); border-radius: 0.25rem; color: rgb(45, 45, 62); display: flex; flex-direction: column; padding: 0.5rem 1rem; position: relative; } .usb-text_area--wrapper label { background-color: transparent; color: rgb(72, 72, 97); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; min-height: 1.5rem; transition: all 0.25s ease; } .usb-text_area--wrapper .usb-text_area-basic { background-color: transparent; border: none; color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 1rem; margin-top: 0; outline: none; overflow-x: hidden; overflow-y: auto; padding: 0; resize: vertical; width: 100%; line-height: 1.5; } .usb-text_area--helpers { display: flex; justify-content: flex-end; width: 100%; } .usb-text_area--helpers_content { display: flex; flex-direction: column; flex-grow: 2; padding-right: 0.5rem; } .usb-text_area--helpers_counter { color: rgb(99, 99, 127); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 0.75rem; font-weight: 400; line-height: 1.5; padding-top: 0.25rem; white-space: nowrap; } .usb-text_area--helpers_counter.max-length-exceeded { color: rgb(207, 42, 54); font-weight: 700; } .usb-toggletip-container { height: 2.75rem; margin: 0; position: absolute; right: -0.75rem; top: 0.25rem; width: 2.75rem; } .usb-toggletip-container button { background-color: transparent; border: none; font-size: 0.75rem; font-weight: 400; height: 2.75rem; line-height: 1.5; outline: none; padding: 0; position: relative; width: 2.75rem; /* Screen reader to hide */ } .usb-toggletip-container button:focus > span::after { content: ""; border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; height: 1.75rem; position: absolute; left: -0.25rem; top: -0.25rem; width: 1.75rem; } .usb-toggletip-container button > span { display: block; height: 1.25rem; margin: 0 auto; position: relative; width: 1.25rem; } .usb-toggletip-container button > span svg:focus { outline: none; } .usb-toggletip-container button.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .usb-toggletip-container .usb-toggletip-flyout { font-size: 0.75rem; outline: none; position: absolute; right: 0.5rem; bottom: calc(100% + 0.5rem); width: 11.25rem; z-index: 1; } .usb-toggletip-container .usb-toggletip-flyout_children { box-shadow: "0 4px 6px -1px rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .12)"; line-height: 1.5; padding: 0.25rem 0.5rem; } .usb-toggletip-container .usb-toggletip-flyout.dark { background-color: rgb(0, 30, 121); color: rgb(255, 255, 255); } .usb-toggletip-container .usb-toggletip-flyout.light { background-color: rgb(255, 255, 255); color: rgb(72, 72, 97); } .usb-toggletip-container .usb-toggletip-flyout:focus::after { content: ""; border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); } .usb--info-message { color: rgb(99, 99, 127); display: flex; font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 0.75rem; font-weight: 400; line-height: 1.5; padding-top: 0.25rem; /* Screen reader to hide */ } .usb--info-message.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .usb--selectablecard { transition: box-shadow 0.25s ease-out; margin: 2px; border-radius: 10px; position: relative; background-color: rgb(255, 255, 255); cursor: pointer; } .usb--selectablecard .usb--checkbox-svg .usb-icon { width: 1.25rem; height: 1.25rem; margin: 1rem; display: block; border: solid 1px rgb(122, 122, 149); border-radius: 4px; overflow: hidden; } .usb--selectablecard .usb--checkbox-svg .usb-icon svg { display: none; } .usb--selectablecard .usb--selectablecard-body { border: solid 1px rgb(205, 209, 226); border-radius: 10px; } .usb--selectablecard .usb--selectablecard-labeltext { font-size: 1.25rem; font-weight: 500; color: rgb(0, 30, 121); } .usb--selectablecard .usb--selectablecard-helper { font-size: 0.875rem; } .usb--selectablecard .usb--radio-input { margin: 1rem; } .usb--selectablecard:hover:not(.is-disabled) { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .12); } .usb--selectablecard:hover:not(.is-disabled) .usb--radio-input, .usb--selectablecard:hover:not(.is-disabled) .usb--checkbox-svg .usb-icon { border: 2px solid rgb(35, 90, 228); } .usb--selectablecard:active:not(.is-disabled) { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12); } .usb--selectablecard:not(.is-disabled) .usb--checkbox-input:checked + .usb--checkbox-svg svg { display: block; border: none; background: rgb(35, 90, 228); fill: rgb(255, 255, 255); } .usb--selectablecard:not(.is-disabled) .usb--checkbox-input:checked + .usb--checkbox-svg .usb-icon { border: none; } .usb--selectablecard:not(.is-disabled).is-error .usb--checkbox-input:checked + .usb--checkbox-svg .usb-icon { border: solid 2px rgb(207, 42, 54); } .usb--selectablecard:not(.is-disabled).is-error:hover .usb--checkbox-input:checked + .usb--checkbox-svg .usb-icon { border: solid 2px rgb(35, 90, 228); } .usb--selectablecard:focus-within:not(.is-disabled), .usb--selectablecard.is-error:not(.is-disabled), .usb--selectablecard:active:not(.is-disabled) { margin: 0; border: solid 2px rgb(35, 90, 228); border-radius: 12px; } .usb--selectablecard:focus-within:not(.is-disabled) .usb--selectablecard-body, .usb--selectablecard.is-error:not(.is-disabled) .usb--selectablecard-body, .usb--selectablecard:active:not(.is-disabled) .usb--selectablecard-body { border-color: transparent; } .usb--selectablecard:focus-within:not(.is-disabled) .usb--checkbox-svg::after, .usb--selectablecard:focus-within:not(.is-disabled) .usb--radio-input::after { content: ""; display: block; position: absolute; top: -0.375rem; left: -0.375rem; width: 1.75rem; height: 1.75rem; border: solid 2px rgb(35, 90, 228); border-radius: 4px; } .usb--selectablecard:focus-within:not(.is-disabled) .usb--checkbox-svg::after { top: 0.75rem; left: 0.75rem; } .usb--selectablecard.is-error:not(.is-disabled) { border-color: rgb(207, 42, 54); } .usb--selectablecard.is-error:not(.is-disabled) .usb--radio-input { border: solid 2px rgb(207, 42, 54); } .usb--selectablecard.is-error:not(.is-disabled) .usb--radio-input:hover { border: solid 2px rgb(35, 90, 228); } .usb--selectablecard.is-error:not(.is-disabled) .usb--radio-input:checked::before { background-color: rgb(207, 42, 54); } .usb--selectablecard.is-error:not(.is-disabled) .usb--checkbox-svg .usb-icon { border: solid 2px rgb(207, 42, 54); } .usb--selectablecard.is-error:not(.is-disabled) .usb--checkbox-svg .usb-icon svg { background: transparent; fill: rgb(207, 42, 54); margin-top: -1px; margin-left: -2px; } .usb--selectablecard.is-disabled .usb--radio-input { border: 0; background-color: rgba(205, 209, 226, 0.4); cursor: not-allowed; } .usb--selectablecard.is-disabled .usb--radio-input:before { display: none; } .usb--selectablecard.is-disabled .usb--radio-input:checked { background-color: rgba(205, 209, 226, 0.4); border: 0; } .usb--selectablecard.is-disabled .usb--radio-input:checked::before { display: block; background-color: rgb(122, 122, 149); } .usb--selectablecard.is-disabled .usb--checkbox-svg { cursor: not-allowed; } .usb--selectablecard.is-disabled .usb--checkbox-svg .usb-icon { background: rgb(204, 204, 210); border: 0; } .usb--selectablecard.is-disabled .usb--checkbox-svg .usb-icon svg { fill: rgb(122, 122, 149); } .usb--selectablecard.is-disabled .usb--selectablecard-body { cursor: not-allowed; border: 1px solid rgb(205, 209, 226); } .usb--selectablecard.is-disabled .usb--selectablecard-body label, .usb--selectablecard.is-disabled .usb--selectablecard-body label .usb--selectablecard-labeltext, .usb--selectablecard.is-disabled .usb--selectablecard-body label .usb--selectablecard-image, .usb--selectablecard.is-disabled .usb--selectablecard-body .usb--selectablecard-helper { cursor: not-allowed; } .usb--selectablecard.is-disabled .usb--selectablecard-body label .usb--selectablecard-labeltext, .usb--selectablecard.is-disabled .usb--selectablecard-body .usb--selectablecard-helper { color: rgb(122, 122, 149); } .usb--selectablecard.is-disabled .usb--checkbox-input:checked + .usb--checkbox-svg .usb-icon svg { display: block; fill: rgb(72, 72, 97); } .usb--selectablecard.is-read-only { pointer-events: none; } .usb--selectablecard.is-read-only .usb--radio-input { border: solid 2px rgb(205, 209, 226); background-color: rgb(205, 209, 226); } .usb--selectablecard.is-read-only .usb--radio-input:before { display: none; } .usb--selectablecard.is-read-only .usb--checkbox-svg .usb-icon { border: solid 1px rgb(205, 209, 226); background-color: rgb(205, 209, 226); } .usb--selectablecard.horizontal-image, .usb--selectablecard.horizontal-illustration { display: flex; flex-direction: column; justify-content: center; } .usb--selectablecard.horizontal-image .usb--selectablecard-body, .usb--selectablecard.horizontal-illustration .usb--selectablecard-body { padding: 1rem 3rem 1rem 6.625rem; min-height: 5.625rem; display: flex; flex-direction: column; justify-content: center; } .usb--selectablecard.horizontal-image input, .usb--selectablecard.horizontal-image .usb--checkbox-svg, .usb--selectablecard.horizontal-illustration input, .usb--selectablecard.horizontal-illustration .usb--checkbox-svg { position: absolute; right: 0; top: 50%; margin-top: -0.65rem; left: unset; } .usb--selectablecard.horizontal-image input[type=checkbox], .usb--selectablecard.horizontal-illustration input[type=checkbox] { margin-top: -1.4rem; } .usb--selectablecard.horizontal-image .usb--checkbox-svg, .usb--selectablecard.horizontal-illustration .usb--checkbox-svg { margin-top: -1.6rem; } .usb--selectablecard.horizontal-image .usb--selectablecard-image, .usb--selectablecard.horizontal-illustration .usb--selectablecard-image { position: absolute; left: 0; top: 0; width: 5.525rem; height: 100%; border-top-left-radius: 10px; border-bottom-left-radius: 10px; overflow: hidden; } .usb--selectablecard.horizontal-image .usb--selectablecard-image img, .usb--selectablecard.horizontal-illustration .usb--selectablecard-image img { width: 100%; height: 100%; object-fit: cover; } .usb--selectablecard.usb--selectablecard.horizontal-image .usb--selectablecard-helper { font-size: 1rem; } .usb--selectablecard.horizontal-illustration .usb--selectablecard-image { padding: 0 0 0 1rem; width: 6.5rem; } .usb--selectablecard.horizontal-illustration .usb--selectablecard-image svg { width: 100%; height: 100%; } .usb--selectablecard.horizontal-illustration .usb--selectablecard-body { padding-left: 7.625rem; } .usb--selectablecard.vertical-image, .usb--selectablecard.vertical-illustration { display: flex; flex-direction: column; } .usb--selectablecard.vertical-image input, .usb--selectablecard.vertical-image .usb--checkbox-svg, .usb--selectablecard.vertical-illustration input, .usb--selectablecard.vertical-illustration .usb--checkbox-svg { position: absolute; top: 12.75rem; left: 0.125rem; } .usb--selectablecard.vertical-image .usb--selectablecard-body, .usb--selectablecard.vertical-illustration .usb--selectablecard-body { padding-bottom: 1.5rem; } .usb--selectablecard.vertical-image .usb--selectablecard-body label, .usb--selectablecard.vertical-illustration .usb--selectablecard-body label { display: flex; flex-direction: column; } .usb--selectablecard.vertical-image .usb--selectablecard-image, .usb--selectablecard.vertical-illustration .usb--selectablecard-image { width: calc(100% + 2px); margin: -1px 0 0 -1px; border-top-left-radius: 10px; border-top-right-radius: 10px; order: -1; height: 12.125rem; overflow: hidden; } .usb--selectablecard.vertical-image .usb--selectablecard-image img, .usb--selectablecard.vertical-illustration .usb--selectablecard-image img { width: 100%; } .usb--selectablecard.vertical-image .usb--selectablecard-labeltext, .usb--selectablecard.vertical-image .usb--selectablecard-helper, .usb--selectablecard.vertical-illustration .usb--selectablecard-labeltext, .usb--selectablecard.vertical-illustration .usb--selectablecard-helper { margin-left: 3.3rem; margin-right: 1rem; } .usb--selectablecard.vertical-image .usb--selectablecard-labeltext, .usb--selectablecard.vertical-illustration .usb--selectablecard-labeltext { margin-top: 1.5rem; } .usb--selectablecard.vertical-image .usb--selectablecard-image { display: flex; flex-direction: column; justify-content: center; } .usb--selectablecard.vertical-illustration input, .usb--selectablecard.vertical-illustration .usb--checkbox-svg { top: 0; right: 0; left: unset; } .usb--selectablecard.vertical-illustration .usb--selectablecard-image { padding: 1rem; height: 6.5rem; text-align: center; } .usb--selectablecard.vertical-illustration .usb--selectablecard-image svg, .usb--selectablecard.vertical-illustration .usb--selectablecard-image img { width: 5.5rem; } .usb--selectablecard.vertical-illustration .usb--selectablecard-labeltext, .usb--selectablecard.vertical-illustration .usb--selectablecard-helper { margin-left: 1rem; text-align: center; display: block; } .usb--selectablecard.vertical-illustration .usb--selectablecard-labeltext { margin-top: 0.5rem; font-size: 1rem; } .usb--wrapper { background-color: rgba(0, 0, 0, 0); margin-top: 0.5rem; min-height: 3rem; padding-top: 1rem; position: relative; width: 100%; z-index: 0; } .usb--wrapper.is-long-label { margin-top: 1.75rem; } .usb--wrapper .usb--basic-input { background-color: rgba(0, 0, 0, 0); border-radius: 0; border-style: solid; border-color: rgb(122, 122, 149); border-top-width: 0; border-right-width: 0; border-bottom-width: 1px; border-left-width: 0; color: rgb(72, 72, 97); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; margin: 0 auto auto auto; padding: 0 0 0 0; width: 100%; } .usb--wrapper .usb--basic-input.input__show-hide, .usb--wrapper .usb--basic-input.input__date-picker { padding-right: 2.5rem; } .usb--wrapper .usb--basic-input.input__has-toggletip { padding-right: 1.5rem; } .usb--wrapper .usb--basic-input.input__has-toggletip + .show-hide__button { right: 2rem; } .usb--wrapper .usb--basic-input::-ms-clear { display: none; height: 0; width: 0; } .usb--wrapper .usb--floating-label { background-color: rgba(0, 0, 0, 0); color: rgb(99, 99, 127); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; position: absolute; top: 1rem; left: 0; transition: all 0.25s ease; } .usb--wrapper .usb--floating-label_overflow { top: -0.6666666667rem; } .usb--wrapper .usb--error-text-container { height: auto; max-height: 0; opacity: 0; transition: max-height .5s ease-in-out, opacity .5s ease-in-out; overflow: hidden; } .usb--wrapper.is-focused::after { content: ""; border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); z-index: -1; } .usb--wrapper.is-focused.is-long-label::after { height: calc(100% + 1.5rem + 0.375rem); top: -1.5rem; } .usb--wrapper.is-focused.is-value label, .usb--wrapper.is-focused label { color: rgb(99, 99, 127); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 0.75rem; line-height: 1.5; top: 0; } .usb--wrapper.is-focused.is-value label.usb--floating-label_overflow, .usb--wrapper.is-focused label.usb--floating-label_overflow { top: -1.125rem; } .usb--wrapper.is-focused .usb--basic-input { outline: transparent; border-style: solid; border-color: rgb(35, 90, 228); border-top-width: 0; border-right-width: 0; border-bottom-width: 1px; border-left-width: 0; font-family: Circular-USB, Arial, Helvetica, sans-serif; margin-top: auto; margin-right: -1px; margin-bottom: -1px; margin-left: 0; } .usb--wrapper.is-focused.is-value .usb--basic-input { border-top-width: 0; border-right-width: 0; border-bottom-width: 2px; border-left-width: 0; color: rgb(72, 72, 97); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; margin-top: auto; margin-right: -1px; margin-bottom: -1px; margin-left: 0; } .usb--wrapper.is-value .usb--basic-input { font-weight: 400; font-size: 1rem; line-height: 1.5; } .usb--wrapper.is-disabled .show-hide__button, .usb--wrapper.is-read-only .show-hide__button { display: none; } .usb--wrapper.is-disabled .usb--floating-label, .usb--wrapper.is-read-only .usb--floating-label { cursor: default; } .usb--wrapper.is-disabled .usb--basic-input, .usb--wrapper.is-read-only .usb--basic-input { border: none; border-bottom: 1px solid rgba(0, 0, 0, 0); } .usb--wrapper.is-disabled .button__date-picker, .usb--wrapper.is-read-only .button__date-picker { cursor: not-allowed; } .usb--wrapper.is-disabled .usb--floating-label, .usb--wrapper.is-read-only .usb--floating-label { top: 1rem; font-size: 1rem; transition: none; margin-bottom: -1px; } .usb--wrapper.is-disabled .usb--floating-label_overflow, .usb--wrapper.is-read-only .usb--floating-label_overflow { top: auto; } .usb--wrapper.is-disabled { background: rgba(205, 209, 226, 0.4); } .usb--wrapper.is-disabled .usb--floating-label, .usb--wrapper.is-disabled.is-value .usb--floating-label, .usb--wrapper.is-disabled .helper_label--wrapper span, .usb--wrapper.is-disabled .icon-container .usb-icon { cursor: not-allowed; color: rgb(122, 122, 149); } .usb--wrapper.is-disabled .usb--basic-input { cursor: not-allowed; color: rgb(122, 122, 149); border-bottom: 1px solid rgb(205, 209, 226); } .usb--wrapper.is-disabled button.show-hide__button, .usb--wrapper.is-disabled .usb-toggletip-container .usb-icon, .usb--wrapper.is-disabled .button__date-picker .usb-icon { color: rgb(122, 122, 149); } .usb--wrapper.is-disabled .usb-toggletip-container .usb-icon svg, .usb--wrapper.is-disabled .icon-container .usb-icon svg, .usb--wrapper.is-disabled .button__date-picker .usb-icon svg { fill: rgb(122, 122, 149); } .usb--wrapper.is-value .usb--floating-label { color: rgb(99, 99, 127); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 0.75rem; line-height: 1.5; top: 0; } .usb--wrapper.is-value .usb--floating-label_overflow { top: -1.125rem; } .usb--wrapper.is-error .usb--floating-label, .usb--wrapper.is-error.is-value .usb--floating-label, .usb--wrapper.is-error.is-focused .usb--floating-label { color: rgb(207, 42, 54); } .usb--wrapper.is-error .usb--basic-input, .usb--wrapper.is-error.is-value .usb--basic-input, .usb--wrapper.is-error.is-focused .usb--basic-input { border-style: solid; border-color: rgb(207, 42, 54); border-top-width: 0; border-right-width: 0; border-bottom-width: 2px; border-left-width: 0; } .usb--wrapper.is-error .usb--error-text-container, .usb--wrapper.is-error.is-value .usb--error-text-container, .usb--wrapper.is-error.is-focused .usb--error-text-container { max-height: 4rem; opacity: 1; } .usb--wrapper .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .usb--wrapper .button__date-picker { background-color: rgba(0, 0, 0, 0); border: none; position: absolute; right: 0; top: 1rem; } .usb--wrapper.is-card-icon .usb--basic-input.input__show-hide { padding-right: 4.5rem; } .usb--wrapper.is-card-icon button.show-hide__button { right: 2rem !important; transition: all 300ms ease-out; } .usb--wrapper.is-card-icon .icon-container { top: 1.1rem; } /* Screen reader to hide */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .usb-table { display: block; position: relative; width: 100%; } .usb-table .usb-table_dataType-currency { text-align: right; } .usb-table .usb-table_accessor-cell-expander, .usb-table .usb-table_accessor-showsubrows { padding-right: 0; padding-left: 0; } .usb-table .usb-table_accessor-cell-expander:focus-within, .usb-table .usb-table_accessor-showsubrows:focus-within { outline: none !important; } .usb-table .usb-table_accessor-cell-expander.isStacked, .usb-table .usb-table_accessor-showsubrows.isStacked { border-top: 1px solid rgb(205, 209, 226); border-radius: 0.25rem; border-top-color: transparent; } .usb-table .usb-table_accessor-header-of-expanded-cell { border-top: 1px solid rgb(205, 209, 226); border-radius: 0.25rem; } .usb-table .usb-dropdown { margin-bottom: 4.5rem; } .usb-table .usb-dropdown [aria-expanded=true] { z-index: 6; } .usb-table_heading { color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 500; font-size: 1.25rem; line-height: 1.25; margin-bottom: 0.75rem; } .usb-table_caption { color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; margin-bottom: 0.75rem; text-align: left; } .usb-table_pagination { display: flex; justify-content: flex-end; } .usb-table_pagination--container { display: flex; flex-direction: row; margin-top: 1rem; } .usb-table_pagination--container.usb-dropdown .dropdown__btn, .usb-table_pagination--container .dropdown__btn-selection { margin-right: 1.25rem; } .usb-table_pagination--container.usb-button, .usb-table_pagination--container .button--standard--minimal { display: flex; flex-direction: row; margin: 0 0.25rem 0 0.25rem; padding-top: 0.75rem; font-size: 1rem; font-weight: 700; background-color: rgb(255, 255, 255); color: rgb(72, 72, 97); } .usb-table_pagination--page_count { display: flex; flex-direction: row; flex-shrink: 0; padding-top: 0.75rem; padding-left: 1rem; padding-right: 0.75rem; } .usb-table_pagination--chevron { width: 0; } @media screen and (max-width: 47.9375rem) { .usb-table_pagination { justify-content: left; max-width: 100%; } .usb-table_pagination--container { flex-direction: column; } .usb-table_pagination--container .usb-dropdown { margin-bottom: 1rem; width: fit-content; } .usb-table_pagination--container nav span { padding-left: 0; } } .usb-table_container::before, .usb-table_container::after { transition: opacity 0.25s ease; content: ""; position: absolute; top: 0; bottom: 0; width: 20px; opacity: 0; } .usb-table_container::before { background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.25)); right: 0; } .usb-table_container::after { background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.25)); left: 0; } .usb-table_container-shadow { position: relative; } .usb-table_container-shadow--right::before { opacity: 1; z-index: 25; } .usb-table_container-shadow--left { opacity: 1; border-left: 1px solid rgb(205, 209, 226); border-radius: 0.5rem; z-index: 25; } .usb-table_container--scroll { overflow: auto; border-radius: 0.5rem; } .usb-table_table { border-collapse: separate; table-layout: auto; border: 1px solid rgb(205, 209, 226); border-radius: 0.5rem; } .usb-table_table.scroll-active { border-left: none; } .usb-table_table th, .usb-table_table td { border-right: 1px solid rgb(205, 209, 226); border-bottom: 1px solid rgb(205, 209, 226); } .usb-table_table th:last-of-type, .usb-table_table td:last-of-type { border-right: none; } .usb-table_table tr th:not(.isStacked):last-of-type { border-top-right-radius: 0.5rem; } .usb-table_table tr th.table-sticky-header-border { border-bottom-color: rgb(122, 122, 149); } .usb-table_table thead tr { border-top-right-radius: 0.5rem; border-top-left-radius: 0.5rem; } .usb-table_table thead tr th:first-of-type { border-top-left-radius: 0.5rem; } .usb-table_table:not(.stackable) tbody tr:last-child { border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } .usb-table_table:not(.stackable) tbody tr:last-child td:first-of-type { border-bottom-left-radius: 0.5rem; } .usb-table_table:not(.stackable) tbody tr:last-child td:last-of-type { border-bottom-right-radius: 0.5rem; } .usb-table_table.cell-size-small th, .usb-table_table.cell-size-small td { padding-top: 0.25rem; padding-bottom: 0.25rem; } .usb-table_table.cell-size-small th.table-editable-cell, .usb-table_table.cell-size-small td.table-editable-cell { padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; vertical-align: middle; } .usb-table_table.cell-size-large th, .usb-table_table.cell-size-large td { padding-top: 1.25rem; padding-bottom: 1.25rem; } .usb-table_table.cell-size-large th.table-editable-cell, .usb-table_table.cell-size-large td.table-editable-cell { padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; vertical-align: middle; } .usb-table_table.cell-size-default th, .usb-table_table.cell-size-default td { padding-top: 0.75rem; padding-bottom: 0.75rem; } .usb-table_table.cell-size-default th.table-editable-cell, .usb-table_table.cell-size-default td.table-editable-cell { padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; vertical-align: middle; } .usb-table_table.zebra-striped.scrollable .usb-table_body--zebra { background-color: rgb(241, 245, 251); } .usb-table_table.zebra-striped.scrollable .usb-table_body--subrow:nth-child(even) { background-color: rgb(241, 245, 251); } .usb-table_table.zebra-striped.scrollable.child-background-match-parent .usb-table_body--subrow { background-color: transparent; } .usb-table_table.zebra-striped.scrollable.child-background-match-parent .usb-table_body--subrowZebra { background-color: rgb(241, 245, 251); } .usb-table_table.alt-header .usb-table_header--row { background-color: rgb(0, 30, 121); } .usb-table_table.alt-header .usb-table_header--cell, .usb-table_table.alt-header .usb-table_header--sort-button { color: rgb(255, 255, 255); border-left: none; border-bottom: none; } .usb-table_table.alt-header .usb-table_header .usb-icon { fill: rgb(255, 255, 255); } .usb-table_table.alt-header.no-data .usb-table_header--row { background-color: rgb(72, 72, 97); } .usb-table_table.alt-header.stackable .usb-table_body--cell { background: linear-gradient(to left, rgb(0, 30, 121) 0%, rgb(0, 30, 121) 100%); background-repeat: no-repeat; background-size: 50%; } .usb-table_table.alt-header.stackable .usb-table_body--cell .stackable-header { padding-top: 0.5rem; color: rgb(255, 255, 255); } .usb-table_table.stackable { border: none; border-spacing: 0 1.5rem; margin-top: calc(-2 * 1.25rem); table-layout: auto; text-align: left; text-overflow: ellipsis; white-space: nowrap; width: 100%; word-wrap: break-word; } .usb-table_table.stackable .usb-table_header { display: none; } .usb-table_table.stackable .usb-table_body--row { font-weight: 400; line-height: 1.5; padding: 0.7em 2vw; border-bottom: 1px solid rgb(205, 209, 226); margin-top: 0.5rem; } .usb-table_table.stackable .usb-table_body--subrow { padding: 0; margin: 0.7em 2vw; } .usb-table_table.stackable .usb-table_body--cell { border-left: 1px solid rgb(205, 209, 226); border-right: 1px solid rgb(205, 209, 226); display: flex; flex-direction: row; justify-content: space-between; } .usb-table_table.stackable .usb-table_body--cell:focus-within { outline: 2px solid rgb(0, 88, 255) !important; outline-offset: -2px; } .usb-table_table.stackable .usb-table_body--cell:first-of-type { border-top: 1px solid rgb(205, 209, 226); border-left: 1px solid rgb(205, 209, 226); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } .usb-table_table.stackable .usb-table_body--cell:last-of-type { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } .usb-table_table.stackable .stackable-header { padding-top: 0.5rem; font-weight: 700; } .usb-table_table.stackable .stackable-header::before { content: attr(data-column-header); } .usb-table_table.stackable .stackable-cell { padding-left: 0.75rem; padding-top: 0.5rem; text-align: left; white-space: normal; width: 50%; } .usb-table_table.stackable .stackable-cell .usb--checkbox-label-text { margin-top: -2px; } .usb-table_table.stackable .remove-cell:nth-last-child(2) { display: flex; flex-direction: row; justify-content: space-between; } .usb-table_table.stackable .remove-cell:nth-last-child(1) { display: none; } .usb-table_table.stackable .stackable-expanded-cell { border-left: 1px solid rgb(205, 209, 226); border-right: 1px solid rgb(205, 209, 226); border-bottom: 1px solid rgb(205, 209, 226); } .usb-table_table.stackable .stackable-expanded-cell:focus { outline: 2px solid rgb(0, 88, 255); } .usb-table_table.stackable .stackable-cell-expander { display: grid; margin-left: auto; margin-right: auto; } .usb-table_table.stackable .stackable-cell-expand-button { margin-left: auto; margin-right: auto; font-size: 1rem; background: transparent; } .usb-table_table.stackable .stackable-cell-expand-button:focus { outline: 2px solid rgb(0, 88, 255); } .usb-table_table.stackable .stackable-cell-expand-text { color: rgb(72, 72, 97); font-weight: 700; vertical-align: top; margin-left: 0.5rem; } .usb-table_table.stackable .table-input-value { padding-left: 0; } .usb-table_table.no-borders:not(.stackable) { border-color: transparent; } .usb-table_table.no-borders:not(.stackable) th { border-left-color: transparent; border-right-color: transparent; } .usb-table_table.no-borders:not(.stackable) tr:first-child th { border-top-color: transparent; } .usb-table_table.no-borders:not(.stackable) td { border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; } .usb-table_table.row-borders-only { border-color: transparent; } .usb-table_table.row-borders-only th { border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; } .usb-table_table.row-borders-only tr:first-child th { border-top-color: transparent; } .usb-table_table.row-borders-only tr:last-child { border-bottom: 1px solid rgb(205, 209, 226); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .usb-table_table.row-borders-only td { border-right-color: transparent; border-left-color: transparent; } .usb-table_table.row-borders-only td:first-of-type { border-top-color: transparent; border-left-color: transparent; } .usb-table_table thead, .usb-table_table tbody, .usb-table_table tr { display: grid; grid-column: 1/-1; grid-template-columns: subgrid; } .usb-table_table td, .usb-table_table th { display: block; } .usb-table_header--cell { color: rgb(72, 72, 97); padding-left: 1.5rem; padding-right: 1.5rem; text-align: left; white-space: normal; word-wrap: normal; } .usb-table_header--cell.expanded-cell:nth-last-child(2) { border-right: none; border-top-right-radius: 0.5rem; } .usb-table_header--cell:focus-within { outline: 2px solid rgb(0, 88, 255); outline-offset: -2.25px; } .usb-table_header--cell:last-child { border-bottom: 1px solid rgb(205, 209, 226); } .usb-table_header--cell:last-child.expanded-cell { position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .no-data .usb-table_header tr { background-color: rgb(205, 209, 226); border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .usb-table_header--sort-button { background-color: transparent; border: none; color: rgb(72, 72, 97); font-family: inherit; font-size: 1rem; font-weight: 700; padding: 0; text-align: left; width: 100%; display: flex; justify-content: space-between; } .usb-table_header--sort-button:focus { outline: none; } .usb-table_header--sort-button .sort-icon { float: right; } .usb-table_header--sort-button .sort-icon--currency { margin-left: 0.75rem; } .usb-table_header--sort-button * { pointer-events: none; } .usb-table_body tr:last-of-type .usb-table_body--cell--expanded-cell:last-of-type { border-bottom: none; } .usb-table_body--cell { padding-right: 1.5rem; padding-left: 1.5rem; text-align: left; white-space: normal; word-wrap: break-word; } .usb-table_body--cell.reduce-cell:not(.isStacked):nth-last-child(2) { border-right: none; } .usb-table_body--cell--expanded-cell { grid-column-start: -1; grid-column-end: 1; padding: 1rem; border-bottom: 1px solid rgb(205, 209, 226); } .usb-table_body--cell--expanded-cell:focus { outline: none; } .usb-table_body--cell--expanded-cell:focus-within { outline: none !important; } .usb-table_body--cell:first-child.toggle-first { padding-left: 0; padding-right: 0; } .usb-table_body--cell:first-child.toggle-first:focus-within { outline: none !important; } .usb-table_body--cell.remove-cell:nth-last-child(2) { display: none; } .usb-table_body--cell.reduce-cell:last-child { display: none; } .usb-table_body--cell.table-row-checkbox-cell { padding-right: 0.75rem; padding-left: 0.75rem; } .usb-table_body--cell.stackable-table-row-checkbox-cell { background-color: rgb(241, 245, 251); } .usb-table .usb-table_header--row, .usb-table .usb-table_body--row { background-color: rgb(255, 255, 255); color: rgb(72, 72, 97); font-size: 1rem; font-weight: 400; line-height: 1.5; } .usb-table .usb-table_header--row:last-child, .usb-table .usb-table_body--row:last-child { border-bottom: none; } .usb-table .usb-table_header--row:last-child .usb-table_body--cell.not-stacked, .usb-table .usb-table_body--row:last-child .usb-table_body--cell.not-stacked { border-bottom: none; } .usb-table .usb-table_header--row:last-child .usb-table_body--cell.remove-cell, .usb-table .usb-table_body--row:last-child .usb-table_body--cell.remove-cell { border-bottom: 1px solid rgb(205, 209, 226); } .usb-table .child-cell-size-small .usb-table_body--subrow .usb-table_body--cell { padding-top: 0.25rem; padding-bottom: 0.25rem; } .usb-table .child-cell-size-large .usb-table_body--subrow .usb-table_body--cell { padding-top: 1.25rem; padding-bottom: 1.25rem; } .usb-table .child-cell-size-default .usb-table_body--subrow .usb-table_body--cell { padding-top: 0.75rem; padding-bottom: 0.75rem; } @media only screen and (min-width: 48rem) { .usb-table .usb-table_body--subrow_first { opacity: 0.999; box-shadow: inset 0 4px 6px -1px rgba(0, 0, 0, 0.12); } .usb-table .usb-table_body--subrow_last { opacity: 0.999; box-shadow: inset 0 -4px 6px -1px rgba(0, 0, 0, 0.12); } .usb-table .usb-table_body--subrow_first.usb-table_body--subrow_last { box-shadow: inset 0 4px 6px -1px rgba(0, 0, 0, 0.12), inset 0 -4px 6px -1px rgba(0, 0, 0, 0.12); } } .usb-table .usb-table_body--subrow_last td:first-of-type { border-bottom: 1px solid rgb(205, 209, 226); } .usb-table .no-data .usb-table_body tr { display: block; } .usb-table .no-data td { padding: 2rem; border-bottom: none; } .usb-table_no-data { display: flex; flex-direction: row; } .usb-table_no-data--container { display: flex; flex-direction: column; margin-top: 0.5rem; } .usb-table_no-data--title { color: rgb(0, 30, 121); font-size: 1.75rem; font-weight: 700; } .usb-table_no-data--text { display: flex; flex-direction: column; font-size: 1.25rem; margin-top: 1rem; white-space: pre-wrap; } .usb-table_no-data--button { margin-top: auto; margin-left: auto; } .usb-table table:focus, .usb-table table:focus-within { outline: none; } .usb-table table:focus td, .usb-table table:focus-within td { transition: outline-offset 0.2s linear; outline: none; } .usb-table table:focus td:focus-within, .usb-table table:focus-within td:focus-within { outline: 2px solid rgb(0, 88, 255); outline-offset: -2.25px; } .usb-table table:focus td[tabindex="0"].roleIsGrid, .usb-table table:focus-within td[tabindex="0"].roleIsGrid { outline: 2px solid rgb(0, 88, 255); outline-offset: -2.25px; } .usb-table table:focus td[tabindex="-1"].roleIsGrid, .usb-table table:focus-within td[tabindex="-1"].roleIsGrid { outline: 2px solid rgb(0, 88, 255); outline-offset: -2.25px; } .usb-table table:focus th, .usb-table table:focus-within th { transition: outline-offset 0.2s linear; } .usb-table table:focus th[tabindex="0"].roleIsGrid, .usb-table table:focus-within th[tabindex="0"].roleIsGrid { outline: 2px solid rgb(0, 88, 255); outline-offset: -2.25px; } .usb-table .usb--checkbox-wrapper.table-checkbox-label { margin-bottom: 0; flex-basis: 0; padding-left: 1.37rem; padding-top: 0.25rem; margin-left: -1.25rem; } .usb-table .usb--checkbox-wrapper.table-header-checkbox-label { margin-bottom: 0; flex-basis: 0; padding-left: 0.7rem; padding-top: 0.25rem; margin-left: 0; } .usb-table .usb--checkbox-label.table-checkbox-label { justify-content: center; } .usb-table .usb--checkbox-label.table-checkbox-label::after { content: ""; border: 2px solid transparent; border-radius: 0.25rem; position: absolute; left: 0.15rem; } .show-label .usb--checkbox-label { z-index: -10; } .table-pagination-nav { display: flex; flex: none; } .table-pagination-nav-list { display: flex; } .table-expander { padding: 0; font-size: 1rem; margin-left: 1rem; margin-right: 1rem; border: none; background-color: transparent; vertical-align: middle; height: 1.25rem; } .table-expander:focus { outline: 2px solid rgb(0, 88, 255); border-radius: 0.25rem; } .table-icon-hover:hover { color: rgb(0, 88, 255); fill: rgb(0, 88, 255); } .demo-action { align-self: flex-end; } .table-actions-row { display: flex; flex-flow: wrap; flex-direction: row; max-width: 100%; } .table-actions-row.toolbar-only { justify-content: start; } .table-actions-row.show-hide-modal-only { justify-content: start; } .table-actions-row.row-size-small { padding-top: 0.25rem; padding-bottom: 0.25rem; } .table-actions-row.row-size-large { padding-top: 1.25rem; padding-bottom: 1.25rem; } .table-actions-row.row-size-default { padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-actions-row.enable-dropdown-menu { justify-content: end; } .responsive-stacked .usb-table_table.zebra-striped tbody tr { background-color: transparent; } .responsive-stacked .table-actions-row { display: block; margin-bottom: 2rem; border: none; } .responsive-stacked .usb-table_table.stackable .usb-table_body--cell.table-row-checkbox-cell .stackable-header { display: none; } .responsive-stacked .usb-table_table.stackable .usb-table_body--cell.table-row-checkbox-cell .usb--checkbox-wrapper { padding-left: 1rem; padding-top: 0; } .responsive-stacked .usb-table_table.stackable .usb-table_body--cell.table-row-checkbox-cell .usb--checkbox-label span.usb--checkbox-label-text { display: inline; } .show-hide-modal.stackable-show-hide-button { width: 100%; } .show-hide-column-modal-text { font-size: 1rem; } .table-modal.usb--modal-v2--dialog, .table-modal .usb-modal-v2--container, .table-modal .usb-modal-v2--body, .table-modal .usb--checkbox--fieldset, .table-modal .usb--checkbox-group--legend { text-align: left; } .table-modal-text { font-size: 1rem; margin-bottom: 1rem; } .table-modal-button { border: transparent; border-radius: 0.25rem; } .table-modal-button.stackable-show-hide-button { width: 100%; } .table-modal-button.stackable-show-hide-button.usb-button.button--small { justify-content: start; border: transparent; border-radius: 0.25rem; z-index: 5; padding: 1.25rem 0.75rem; } .table-modal-button.stackable-show-hide-button.usb-button.button--small:hover { background-color: rgb(245, 245, 250); color: rgb(35, 90, 228); } .table-modal-button.stackable-show-hide-button.usb-button:focus { border-top: 1px solid rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); color: rgb(35, 90, 228); outline: 2px solid rgb(35, 90, 228); background-color: rgb(245, 245, 250); outline-offset: -0.15rem; border-top-left-radius: 0; border-top-right-radius: 0; } .table-modal-button.stackable-show-hide-button.usb-button::before { border: none; border-radius: 0; height: none; position: absolute; left: 0; top: 0; width: none; } .table-modal-button.enable-dropdown-menu.usb-button.button--small { margin: 0 0.75rem 0 0; width: 100%; border: transparent; border-radius: 0.25rem; justify-content: start; z-index: 5; } .table-modal-button-text { vertical-align: top; font-weight: 500; } .table-modal-button-text.stackable-show-hide-button { font-weight: 400; } .table-selected-rows-label { display: flex; font-size: 1rem; flex-direction: column; justify-content: center; margin: 0.75rem 0.75rem 0 0; white-space: nowrap; } .stackable-selected-rows-label { margin-bottom: 1rem; text-align: right; } .table-toolbar { display: block; } .table-toolbar .usb-button-group { display: flex; flex-direction: row; flex-wrap: wrap; } .table-toolbar .usb-button-group.stackable-table-toolbar-button-group { margin-left: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; justify-content: center; } .table-toolbar .usb-button-group .usb-button.button--small { margin: 0.75rem 0.75rem 0 0; } .table-toolbar .usb-button-group .usb-button.button--small.stackable-table-button { width: 100%; margin-top: 0.5rem; margin-right: 0; } .table-row-checkbox { border-bottom: 1px solid rgb(205, 209, 226); } .table-row-checkbox:focus-within { outline: 2px solid rgb(0, 88, 255) !important; outline-offset: -2px; } .table-input-display { display: flex; flex-direction: column; justify-content: center; height: 100%; } .table-input-button { display: flex; justify-content: space-between; width: 100%; background-color: transparent; border: none; outline: none; color: rgb(0, 88, 255); padding-right: 0; padding-left: 0; } .table-input-value { padding-left: 1.5rem; padding-top: 0.15rem; font-size: 1rem; text-align: left; } .table-input-icon { padding-right: 1.5rem; padding-left: 0.5rem; } .table-text-input { margin-top: 0; padding-top: 0; padding-left: 0.5rem; padding-right: 0.5rem; min-height: 0; border: none; } .table-text-input input { padding: 0.5rem 1rem; padding-left: 15px; padding-bottom: 6px; color: rgb(45, 45, 62); border: 1px solid rgb(205, 209, 226); border-radius: 0.25rem; width: 100%; } .table-text-input.is-error { margin: 0.5rem 0; } .table-text-input.is-error input { border: 2px solid rgb(207, 42, 54); } .table-expanded-menu { z-index: 30; } .table-toolbar-button-group { padding-left: 0; } .table-toolbar-menu.usb-action__button-utility:hover, .table-toolbar-menu .usb-action__link-utility:hover { background-color: rgb(76, 76, 80); } .table-toolbar-menu.usb-menu-composable__trigger { min-width: unset !important; max-height: 2rem; font-size: 0.875rem; } .table-toolbar-menu.usb-menu-composable__trigger .usb-action__text .usb-menu-composable__menu-btn__label { font-weight: 500; } .table-toolbar-menu.usb-menu-composable__trigger .usb-action__icon { margin-top: 3px; } .table-toolbar-menu.usb-menu-composable__trigger.stackable-table-button { width: 100%; margin-top: 0; justify-content: start; border: transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .table-toolbar-menu.usb-action:focus::before { outline: 2px solid rgb(0, 88, 255); outline-offset: -2px !important; height: calc(100% + 0.75rem) !important; width: calc(100% + 0.75rem) !important; left: -6px !important; top: -6px !important; } .table-toolbar-menu.usb-action__button-utility-medium { min-height: 2rem; margin: 0.75rem 0.75rem 0 0; } .table-toolbar-row { display: flex; flex-wrap: wrap-reverse; } .stackable-toolbar-row { display: flex; flex-wrap: wrap-reverse; } .stackable-table-menu { display: block; width: 100%; } .stackable-table-menu .usb-menu-composable__container.expanded { width: 100%; } .table-sticky-header { position: sticky; top: 0; z-index: 10; background-color: rgb(255, 255, 255); border-top-right-radius: 0.5rem; border-top-left-radius: 0.5rem; } .table-sticky-first-column { position: sticky; top: 0; left: 0; z-index: 5; background-color: rgb(255, 255, 255); } .table-sticky-first-column.table-sticky-row-header-shadow::after { content: ""; position: absolute; top: 0; right: -20px; width: 20px; height: 100%; background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)); } .table-sticky-row { position: sticky; left: 0; z-index: 5; background-color: rgb(255, 255, 255); } .table-sticky-row.table-sticky-row-header-shadow::after { content: ""; position: absolute; top: 0; right: -20px; width: 20px; height: 100%; background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)); } .batch-actions-mobile-button { width: 100%; background: rgba(0, 0, 0, 0); border: rgb(205, 209, 226) solid 1px; border-radius: 0.25rem; color: rgb(99, 99, 127); padding: 0.5rem 0.75rem; margin-bottom: 0.25rem; text-align: left; } .batch-actions-mobile-button:focus { outline: 3px solid rgb(35, 90, 228); outline-offset: -0.2rem; } .batch-actions-mobile-button-row { display: flex; justify-content: space-between; } .batch-actions-mobile-actions-text { margin: auto 0; color: rgb(45, 45, 62); font-size: 0.875rem; font-family: Circular-USB, Arial, Helvetica, sans-serif; } .table-mobile-button { width: 100%; } .table-mobile-button.usb-button.button--utility--subtle { border: transparent; border-radius: 0.25rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0; color: rgb(72, 72, 97); padding: 1.25rem 0.75rem; justify-content: start; font-weight: 400; border-bottom: 1px solid rgb(205, 209, 226); } .table-mobile-button.usb-button.button--utility--subtle:hover { background-color: rgb(241, 245, 251); color: rgb(35, 90, 228); } .table-mobile-button.usb-button.button--utility--subtle.usb-button:focus { border-top: 1px solid rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); color: rgb(35, 90, 228); outline: 2px solid rgb(35, 90, 228); background-color: rgb(245, 245, 250); outline-offset: -0.15rem; border-top-left-radius: 0; border-top-right-radius: 0; } .table-mobile-button.usb-button.button--utility--subtle.usb-button::before { border: none; border-radius: 0; height: none; position: absolute; left: 0; top: 0; width: none; } .table-mobile-expand-panel { position: absolute; top: 3.75rem; z-index: 50; width: 100%; background-color: rgb(255, 255, 255); border: 1px solid rgb(205, 209, 226); border-radius: 0.25rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.12); } .usb-dropdown { position: relative; width: 100%; } .usb-dropdown, .usb-dropdown * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; -webkit-focus-ring-color: rgba(0, 0, 0, 0) !important; -webkit-tap-highlight-color: transparent !important; -webkit-focus-ring-color: transparent !important; } .usb-dropdown.usb-dropdown .dropdown__btn { white-space: nowrap; } .usb-dropdown.usb-dropdown .dropdown__btn:focus { outline: 3px solid rgb(35, 90, 228); outline-offset: -0.2rem; -moz-outline-radius: 0.25rem; } .usb-dropdown.usb-dropdown__text .dropdown__btn { padding: 0.5rem 1.25rem 0.5rem 0; border: none; } .usb-dropdown.usb-dropdown__text .dropdown__btn:focus { outline-offset: 0; } .usb-dropdown.usb-dropdown__text .dropdown__btn:disabled { cursor: not-allowed; } .usb-dropdown.usb-dropdown__text .dropdown__btn:disabled .dropdown__btn-label, .usb-dropdown.usb-dropdown__text .dropdown__btn:disabled .dropdown__btn-selection, .usb-dropdown.usb-dropdown__text .dropdown__btn:disabled .dropdown__btn-selection.selected { color: rgb(122, 122, 149); } .usb-dropdown.usb-dropdown__text .dropdown__btn:disabled svg.dropdown-icon__arrow { fill: rgb(122, 122, 149); } .usb-dropdown.usb-dropdown__outlined .dropdown__btn { padding: 0.5rem 1.25rem 0.5rem 1rem; border: solid 1px rgb(205, 209, 226); } .usb-dropdown.usb-dropdown__outlined button.dropdown__btn.subtle:disabled { border: 1px solid rgb(205, 209, 226); cursor: not-allowed; } .usb-dropdown.usb-dropdown__outlined button.dropdown__btn.subtle:disabled .dropdown__btn-label, .usb-dropdown.usb-dropdown__outlined button.dropdown__btn.subtle:disabled .dropdown__btn-selection, .usb-dropdown.usb-dropdown__outlined button.dropdown__btn.subtle:disabled .dropdown__btn-selection.selected { color: rgb(122, 122, 149); } .usb-dropdown.usb-dropdown__outlined button.dropdown__btn.subtle:disabled svg.dropdown-icon__arrow { fill: rgb(122, 122, 149); } .usb-dropdown.usb-dropdown__outlined button.dropdown__btn:disabled:not(.subtle) { background: rgba(205, 209, 226, 0.4); border: 1px solid rgb(205, 209, 226); cursor: not-allowed; } .usb-dropdown.usb-dropdown__outlined button.dropdown__btn:disabled:not(.subtle) .dropdown__btn-label, .usb-dropdown.usb-dropdown__outlined button.dropdown__btn:disabled:not(.subtle) .dropdown__btn-selection, .usb-dropdown.usb-dropdown__outlined button.dropdown__btn:disabled:not(.subtle) .dropdown__btn-selection.selected { color: rgb(122, 122, 149); } .usb-dropdown.usb-dropdown__outlined button.dropdown__btn:disabled:not(.subtle) svg.dropdown-icon__arrow { fill: rgb(122, 122, 149); } .usb-dropdown .dropdown__btn { position: relative; display: flex; justify-content: flex-start; align-items: center; border-radius: 0.25rem; background-color: rgb(255, 255, 255); appearance: none; height: 2.5rem; width: 100%; max-width: 100%; } .usb-dropdown .dropdown__btn.has-icon { border: none; height: auto; padding: 0.5rem 0.5rem 0 0.5rem; justify-content: center; align-items: center; appearance: none; } .usb-dropdown .dropdown__btn.subtle { background-color: transparent; } .usb-dropdown .dropdown__btn.expanded { border-color: rgb(122, 122, 149); } .usb-dropdown .dropdown__btn.expanded svg.dropdown-icon__arrow { transform: translateY(-50%) rotate(180deg); } .usb-dropdown .dropdown__btn.expanded svg.dropdown-icon__toggle { fill: rgb(72, 72, 97); } .usb-dropdown .dropdown__btn-label { color: rgb(99, 99, 127); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; letter-spacing: normal; margin-right: 0.75rem; } .usb-dropdown .dropdown__btn-selection { color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; letter-spacing: normal; } .usb-dropdown .dropdown__btn-selection.selected { margin-right: 1.25rem; overflow: hidden; } .usb-dropdown .dropdown__btn-selection, .usb-dropdown .dropdown__btn-label { display: inline-block; pointer-events: none; } .usb-dropdown .dropdown__btn svg.dropdown-icon__toggle { align-self: flex-end; display: block; height: 2rem; width: 2rem; fill: rgb(45, 45, 62); } .usb-dropdown .dropdown__btn svg.dropdown-icon__arrow { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); height: 1rem; width: 1rem; fill: rgb(72, 72, 97); pointer-events: none; } .usb-dropdown .dropdown__list { position: absolute; max-width: 100%; width: 100%; padding: 0; margin: 0; border: none; list-style-type: none; max-height: 0; overflow: hidden; border-radius: 0.25rem; transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease-in-out; display: none; } .usb-dropdown .dropdown__list.expanded { display: block; max-height: 100vh; border: 1px solid rgb(205, 209, 226); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .12); margin-top: 0.25rem; z-index: 1; } .usb-dropdown .dropdown__list.expanded.scroll { overflow-y: scroll; max-height: 12rem; } .usb-dropdown .dropdown__list-item { display: flex; } .usb-dropdown .dropdown__list-item[tabindex="-1"] { background-color: rgb(255, 255, 255); } .usb-dropdown .dropdown__list-item-btn { display: flex; flex: 1; padding: 0.75rem 1rem; background-color: rgb(255, 255, 255); border: none; border-bottom: 1px solid rgb(205, 209, 226); color: rgb(45, 45, 62); font-size: 1rem; font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; letter-spacing: normal; line-height: 1.5; outline-offset: -3px; text-align: left; } .usb-dropdown .dropdown__list-item-btn * { pointer-events: none; } .usb-dropdown .dropdown__list-item-btn-value { font-size: 0.875rem; color: rgb(35, 90, 228); padding-top: 2px; } .usb-dropdown .dropdown__list-item-btn .add-icon { padding-right: 0.5rem; } .usb-dropdown .dropdown__list-item-btn.disabled { background-color: rgba(205, 209, 226, 0.4); } .usb-dropdown .dropdown__list-item-btn.disabled > p { color: rgb(122, 122, 149); } .usb-dropdown .dropdown__list-item-btn:hover:not(.disabled), .usb-dropdown .dropdown__list-item-btn:focus:not(.disabled), .usb-dropdown .dropdown__list-item-btn.selected:not(.disabled), .usb-dropdown .dropdown__list-item-btn-icon:hover:not(.disabled) { background-color: rgb(241, 245, 251); } .usb-dropdown .dropdown__list-item-btn:hover:not(.disabled) > p, .usb-dropdown .dropdown__list-item-btn:focus:not(.disabled) > p, .usb-dropdown .dropdown__list-item-btn.selected:not(.disabled) > p, .usb-dropdown .dropdown__list-item-btn-icon:hover:not(.disabled) > p { color: rgb(35, 90, 228); } .usb-dropdown .dropdown__list-item-btn.selected.toggleable:hover { background-color: rgb(238, 246, 255); color: rgb(35, 90, 228); } .usb-dropdown .dropdown__list-item-btn:focus { outline: 3px solid rgb(35, 90, 228); outline-offset: -0.2rem; -moz-outline-radius: 0.25rem; } .usb-dropdown .dropdown__list-item-btn p { margin: 0; } .usb-dropdown .dropdown__list-item:last-child button { border: none; } .usb-address-autocomplete { background-color: rgb(255, 255, 255); border: none; container: addressCollectionWrapper/inline-size; } .usb-address-autocomplete legend { font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.5; color: rgb(45, 45, 62); } .usb-address-autocomplete div[class^=form-control__] { margin-bottom: 1.25rem; } .usb-address-autocomplete label[class^=form_control__] { margin-bottom: 1.25rem; } .usb-address-autocomplete--state-zip { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 0 1rem; flex-wrap: wrap; } .usb-address-autocomplete--state-zip > .usb-address-autocomplete_field { flex-basis: 100%; } @supports (container: inline-size) { .usb-address-autocomplete--state-zip { flex-wrap: nowrap; } .usb-address-autocomplete--state-zip > .usb-address-autocomplete_field { flex-basis: 50%; } } .usb-address-autocomplete--state-zip .usb--select--container { margin-top: -0.25rem; } .usb-address-autocomplete--city-state-zip-inline { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 0 1rem; flex-wrap: wrap; } .usb-address-autocomplete--city-state-zip-inline > .usb-address-autocomplete_field { flex-basis: 100%; } @supports (container: inline-size) { .usb-address-autocomplete--city-state-zip-inline { flex-wrap: nowrap; } .usb-address-autocomplete--city-state-zip-inline > .usb-address-autocomplete_field { flex-basis: auto; } } @container addressCollectionWrapper (width <= 30rem) { .usb-address-autocomplete--city-state-zip-inline { flex-wrap: wrap; } .usb-address-autocomplete--city-state-zip-inline > .usb-address-autocomplete_field { flex-basis: 100%; } } @container addressCollectionWrapper (width <= 20rem) { .usb-address-autocomplete--state-zip { flex-wrap: wrap; } .usb-address-autocomplete--state-zip > .usb-address-autocomplete_field { flex-basis: 100%; } } div.pac-container.pac-logo.hdpi > .pac-item { height: auto; min-height: 2.75rem; display: flex; flex-wrap: wrap; align-items: center; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-right: 0.5rem; } div.pac-container.pac-logo.hdpi > .pac-item span:not(.pac-icon.pac-icon-marker) { line-height: 1.25rem; font-family: Circular-USB, Arial, Helvetica, sans-serif; } div.pac-container.pac-logo.hdpi > .pac-item > .pac-icon.pac-icon-marker { background-repeat: no-repeat; height: 1.25rem; max-width: 1.25rem; margin-top: 0; } div.pac-container.pac-logo.hdpi > .pac-item > .pac-item-query { white-space: normal; padding-right: 0; flex: 1; width: calc(100% - 1.25rem); } div.pac-container.pac-logo.hdpi > .pac-item > span:not(.pac-icon.pac-icon-marker):not(.pac-item-query) { white-space: normal; margin-left: 1.5rem; } .usb-button { border-radius: 0.5rem; cursor: pointer; font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 0.875rem; font-weight: 500; height: auto; line-height: 1; max-width: 100%; outline: transparent; position: relative; transition: color 0.1s ease, border 0.1s ease; white-space: nowrap; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; } .usb-button, .usb-button * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; -webkit-focus-ring-color: rgba(0, 0, 0, 0) !important; -webkit-tap-highlight-color: transparent !important; -webkit-focus-ring-color: transparent !important; } .usb-button.button--layout_row { flex-direction: row; } .usb-button.button--layout_column { flex-direction: column; } .usb-button--icon, .usb-button .usb-icon { display: inline-flex; pointer-events: none; vertical-align: bottom; } .usb-button--icon svg, .usb-button .usb-icon svg { fill: currentColor !important; } .usb-button.button--small { min-height: 2rem; max-height: 2rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; } .usb-button.button--small--icon-only { padding: 0.5rem; width: 2rem; } .usb-button.button--small.button--layout_column { gap: 0.25rem; max-height: unset; padding: 0.75rem 0.5rem; } .usb-button.button--small .usb-button--icon, .usb-button.button--small .usb-icon { width: 1rem; height: 1rem; min-width: 1rem; min-height: 1rem; max-width: 1rem; max-height: 1rem; } .usb-button.button--small .usb-button--icon svg, .usb-button.button--small .usb-icon svg { width: 1rem; height: 1rem; min-width: 1rem; min-height: 1rem; max-width: 1rem; max-height: 1rem; } .usb-button.button--medium { min-height: 2.5rem; max-height: 2.5rem; line-height: 1.5; padding: 0.5rem 1.5rem; font-size: 1rem; } .usb-button.button--medium--icon-only { padding: 0.5rem; width: 2.5rem; } .usb-button.button--medium.button--layout_column { gap: 0.25rem; max-height: unset; padding: 0.625rem 1.5rem; } .usb-button.button--medium .usb-button--icon, .usb-button.button--medium .usb-icon { width: 1.25rem; height: 1.25rem; min-width: 1.25rem; min-height: 1.25rem; max-width: 1.25rem; max-height: 1.25rem; } .usb-button.button--medium .usb-button--icon svg, .usb-button.button--medium .usb-icon svg { width: 1.25rem; height: 1.25rem; min-width: 1.25rem; min-height: 1.25rem; max-width: 1.25rem; max-height: 1.25rem; } .usb-button.button--medium::after { content: ""; position: absolute; top: -0.25rem; bottom: -0.25rem; left: 0; right: 0; } .usb-button.button--large { font-size: 1rem; min-height: 3rem; line-height: 1.5; padding: 0.75rem 2rem; } .usb-button.button--large--icon-only { padding: 0.75rem; width: 3rem; } .usb-button.button--large.button--layout_column { gap: 0.25rem; max-height: unset; padding: 0.875rem 2rem; } .usb-button.button--large .usb-button--icon, .usb-button.button--large .usb-icon { width: 1.25rem; height: 1.25rem; min-width: 1.25rem; min-height: 1.25rem; max-width: 1.25rem; max-height: 1.25rem; } .usb-button.button--large .usb-button--icon svg, .usb-button.button--large .usb-icon svg { width: 1.25rem; height: 1.25rem; min-width: 1.25rem; min-height: 1.25rem; max-width: 1.25rem; max-height: 1.25rem; } .usb-button.button--highlight { font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1; } .usb-button.button--highlight--heavy { background: rgb(207, 42, 54); border-color: rgba(0, 0, 0, 0); border-width: 0; border-radius: 0.5rem; color: rgb(255, 255, 255); } .usb-button.button--highlight--heavy .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--highlight--heavy:hover { background: rgb(155, 10, 40); color: rgb(255, 255, 255); border-color: rgba(0, 0, 0, 0); } .usb-button.button--highlight--heavy:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--highlight--heavy:active { background: rgb(111, 3, 3); color: rgba(255, 255, 255, 0.78); border-color: rgba(0, 0, 0, 0); } .usb-button.button--highlight--heavy:active .svg-icon { color: rgba(255, 255, 255, 0.78); } .usb-button.button--highlight--subtle { background: rgba(0, 0, 0, 0); border: rgb(207, 42, 54) solid 1px; border-radius: 0.5rem; color: rgb(207, 42, 54); } .usb-button.button--highlight--subtle .svg-icon { color: rgb(207, 42, 54); } .usb-button.button--highlight--subtle:hover { background: rgb(155, 10, 40); color: rgb(255, 255, 255); } .usb-button.button--highlight--subtle:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--highlight--subtle:active { background: rgb(111, 3, 3); color: rgba(255, 255, 255, 0.78); } .usb-button.button--highlight--subtle:active .svg-icon { color: rgba(255, 255, 255, 0.78); } .usb-button.button--highlight--minimal { background: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0); border-width: 0; border-radius: 0.5rem; color: rgb(207, 42, 54); } .usb-button.button--highlight--minimal .svg-icon { color: rgb(207, 42, 54); } .usb-button.button--highlight--minimal:hover { background: rgb(155, 10, 40); color: rgb(255, 255, 255); } .usb-button.button--highlight--minimal:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--highlight--minimal:active { background: rgb(111, 3, 3); color: rgba(255, 255, 255, 0.78); } .usb-button.button--highlight--minimal:active .svg-icon { color: rgba(255, 255, 255, 0.78); } @media (hover: none) and (pointer: coarse) { .usb-button.button--highlight { background: rgb(207, 42, 54); border: none; color: rgb(255, 255, 255); } .usb-button.button--highlight .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--highlight:hover, .usb-button.button--highlight:focus { background: rgb(207, 42, 54); color: rgb(255, 255, 255); border: none; } .usb-button.button--highlight:hover .svg-icon, .usb-button.button--highlight:focus .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--highlight:hover::before, .usb-button.button--highlight:focus::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.5rem; content: ""; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); } .usb-button.button--highlight:active { background: rgb(111, 3, 3); border: none; color: rgba(255, 255, 255, 0.78); } .usb-button.button--highlight:active .svg-icon { color: rgba(255, 255, 255, 0.78); } } .usb-button.button--standard--heavy { border-radius: 0.5rem; font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1; background: rgb(35, 90, 228); border-color: rgba(0, 0, 0, 0); border-width: 0; color: rgb(255, 255, 255); } .usb-button.button--standard--heavy .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--standard--heavy:hover { border-color: rgba(0, 0, 0, 0); background: rgb(0, 60, 200); } .usb-button.button--standard--heavy:active { border-color: rgba(0, 0, 0, 0); background: rgb(0, 30, 121); } .usb-button.button--standard--subtle { background: rgba(0, 0, 0, 0); border: 1px solid rgb(35, 90, 228); color: rgb(35, 90, 228); } .usb-button.button--standard--subtle .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--standard--subtle:hover { background: rgb(0, 60, 200); color: rgb(255, 255, 255); } .usb-button.button--standard--subtle:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--standard--subtle:active { background: rgb(0, 30, 121); color: rgba(255, 255, 255, 0.78); } .usb-button.button--standard--subtle:active .svg-icon { color: rgba(255, 255, 255, 0.78); } .usb-button.button--standard--minimal { background: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0); border-width: 0; border-radius: 0.5rem; color: rgb(35, 90, 228); } .usb-button.button--standard--minimal .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--standard--minimal:hover { background: rgb(0, 60, 200); color: rgb(255, 255, 255); text-decoration: "none"; } .usb-button.button--standard--minimal:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--standard--minimal:active { background: rgb(0, 30, 121); color: rgba(255, 255, 255, 0.78); } .usb-button.button--standard--minimal:active .svg-icon { color: rgba(255, 255, 255, 0.78); } @media (hover: none) and (pointer: coarse) { .usb-button.button--standard--minimal { background: rgba(0, 0, 0, 0); border: none; color: rgb(35, 90, 228); } .usb-button.button--standard--minimal .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--standard--minimal:hover, .usb-button.button--standard--minimal:focus { background: rgba(0, 0, 0, 0); color: rgb(35, 90, 228); border: none; } .usb-button.button--standard--minimal:hover .svg-icon, .usb-button.button--standard--minimal:focus .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--standard--minimal:hover::before, .usb-button.button--standard--minimal:focus::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.5rem; content: ""; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); } .usb-button.button--standard--minimal:active { background: rgb(0, 30, 121); border: none; color: rgba(255, 255, 255, 0.78); } .usb-button.button--standard--minimal:active .svg-icon { color: rgba(255, 255, 255, 0.78); } } @media (hover: none) and (pointer: coarse) { .usb-button.button--standard { background: rgb(35, 90, 228); border: none; color: rgb(255, 255, 255); } .usb-button.button--standard .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--standard:hover, .usb-button.button--standard:focus { background: rgb(35, 90, 228); color: rgb(255, 255, 255); border: none; } .usb-button.button--standard:hover .svg-icon, .usb-button.button--standard:focus .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--standard:hover::before, .usb-button.button--standard:focus::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.5rem; content: ""; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); } .usb-button.button--standard:active { background: rgb(0, 30, 121); border: none; color: rgba(255, 255, 255, 0.78); } .usb-button.button--standard:active .svg-icon { color: rgba(255, 255, 255, 0.78); } } .usb-button.button--secondary { background: rgba(0, 0, 0, 0); border-width: 1px; border-color: rgb(35, 90, 228); border-radius: 0.5rem; color: rgb(35, 90, 228); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1; transition: margin 0.1s ease; } .usb-button.button--secondary .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--secondary:hover { background: rgb(0, 60, 200); border: 1px solid rgb(0, 30, 121); color: rgb(255, 255, 255); } .usb-button.button--secondary:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--secondary:active { background: rgb(0, 30, 121); color: rgba(255, 255, 255, 0.78); } .usb-button.button--secondary:active .svg-icon { color: rgb(255, 255, 255); } @media (hover: none) and (pointer: coarse) { .usb-button.button--secondary { background: rgba(0, 0, 0, 0); border: 1px solid rgb(35, 90, 228); color: rgb(35, 90, 228); } .usb-button.button--secondary .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--secondary:hover, .usb-button.button--secondary:focus { background: rgba(0, 0, 0, 0); color: rgb(35, 90, 228); border: 1px solid rgb(35, 90, 228); } .usb-button.button--secondary:hover .svg-icon, .usb-button.button--secondary:focus .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--secondary:hover::before, .usb-button.button--secondary:focus::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.5rem; content: ""; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); } .usb-button.button--secondary:active { background: rgb(0, 30, 121); border: 1px solid rgb(35, 90, 228); color: rgba(255, 255, 255, 0.78); } .usb-button.button--secondary:active .svg-icon { color: rgba(255, 255, 255, 0.78); } } .usb-button.button--utility { font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1; transition: margin 0.1s ease; } .usb-button.button--utility--heavy { background: rgb(72, 72, 97); border-color: rgb(72, 72, 97); border-width: 1px; border-radius: 0.5rem; color: rgb(255, 255, 255); } .usb-button.button--utility--heavy .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--utility--heavy:hover { background: rgba(0, 0, 0, 0); border: 1px solid rgb(72, 72, 97); border-radius: 0.5rem; color: rgb(72, 72, 97); } .usb-button.button--utility--heavy:hover .svg-icon { color: rgb(72, 72, 97); } .usb-button.button--utility--heavy:active { background: rgb(72, 72, 97); color: rgba(255, 255, 255, 0.78); } .usb-button.button--utility--heavy:active .svg-icon { color: rgba(255, 255, 255, 0.78); } .usb-button.button--utility--subtle { background: rgba(0, 0, 0, 0); border-width: 1px; border-color: rgb(72, 72, 97); border-radius: 0.5rem; color: rgb(72, 72, 97); } .usb-button.button--utility--subtle .svg-icon { color: rgb(72, 72, 97); } .usb-button.button--utility--subtle:hover { background: rgb(122, 122, 149); color: rgb(255, 255, 255); border: 1px solid rgb(122, 122, 149); } .usb-button.button--utility--subtle:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--utility--subtle:active { background: rgb(72, 72, 97); color: rgba(255, 255, 255, 0.78); } .usb-button.button--utility--subtle:active .svg-icon { color: rgba(255, 255, 255, 0.78); } .usb-button.button--utility--minimal { background: rgba(0, 0, 0, 0); border: rgba(0, 0, 0, 0) solid 1px; border-radius: 0.5rem; color: rgb(72, 72, 97); } .usb-button.button--utility--minimal .svg-icon { color: rgb(72, 72, 97); } .usb-button.button--utility--minimal:hover { background: rgb(122, 122, 149); color: rgb(255, 255, 255); } .usb-button.button--utility--minimal:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--utility--minimal:active { background: rgb(72, 72, 97); color: rgba(255, 255, 255, 0.78); } .usb-button.button--utility--minimal:active .svg-icon { color: rgba(255, 255, 255, 0.78); } .usb-button.button--utility.button--medium--icon-only { border: none; } .usb-button.button--utility.button--small--icon-only { border: none; } .usb-button.button--utility.button--large--icon-only { border: none; } .usb-button.button--utility .svg-icon { color: rgb(72, 72, 97); } .usb-button.button--utility:hover { background: rgb(122, 122, 149); border: none; color: rgb(255, 255, 255); padding: calc(0.75rem + 1px) calc(1.5rem + 1px); } .usb-button.button--utility:hover.button--large { padding: calc(1rem + 1px) calc(2rem + 1px); } .usb-button.button--utility:hover.button--small { padding: calc(0.5rem + 1px) calc(1.25rem + 1px); } .usb-button.button--utility:hover.button--small { padding-left: calc(0.75rem + 1px); padding-right: calc(0.75rem + 1px); } .usb-button.button--utility:hover.button--small.button--small--icon-only { padding: 0.5rem; } .usb-button.button--utility:hover.button--medium { padding-top: calc(0.5rem + 1px); padding-bottom: calc(0.5rem + 1px); } .usb-button.button--utility:hover.button--medium.button--medium--icon-only { padding: 0.5rem; } .usb-button.button--utility:hover.button--large { padding-top: calc(0.75rem + 1px); padding-bottom: calc(0.7rem + 1px); } .usb-button.button--utility:hover.button--large.button--large--icon-only { padding: 0.75rem; } .usb-button.button--utility:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--utility:active { background: rgb(72, 72, 97); color: rgba(255, 255, 255, 0.78); } .usb-button.button--utility:active .svg-icon { color: rgba(255, 255, 255, 0.78); } @media (hover: none) and (pointer: coarse) { .usb-button.button--utility { background: rgb(255, 255, 255); border: 0 solid rgb(122, 122, 149); color: rgb(72, 72, 97); } .usb-button.button--utility .svg-icon { color: rgb(72, 72, 97); } .usb-button.button--utility:hover, .usb-button.button--utility:focus { background: rgb(255, 255, 255); color: rgb(72, 72, 97); border: 0 solid rgb(122, 122, 149); } .usb-button.button--utility:hover .svg-icon, .usb-button.button--utility:focus .svg-icon { color: rgb(72, 72, 97); } .usb-button.button--utility:hover::before, .usb-button.button--utility:focus::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.5rem; content: ""; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); } .usb-button.button--utility:active { background: rgb(72, 72, 97); border: 0 solid rgb(122, 122, 149); color: rgba(255, 255, 255, 0.78); padding: calc(0.75rem + 1px) calc(1.5rem + 1px); } .usb-button.button--utility:active.button--large { padding: calc(1rem + 1px) calc(2rem + 1px); } .usb-button.button--utility:active.button--small { padding: calc(0.5rem + 1px) calc(1.25rem + 1px); } .usb-button.button--utility:active .svg-icon { color: rgba(255, 255, 255, 0.78); } } .usb-button.button--text { background: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0); border-width: 0; border-radius: 0.5rem; color: rgb(35, 90, 228); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1; } .usb-button.button--text .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--text:hover { background: rgb(0, 60, 200); color: rgb(255, 255, 255); text-decoration: "none"; } .usb-button.button--text:hover .svg-icon { color: rgb(255, 255, 255); } .usb-button.button--text:active { background: rgb(0, 30, 121); color: rgba(255, 255, 255, 0.78); } .usb-button.button--text:active .svg-icon { color: rgba(255, 255, 255, 0.78); } @media (hover: none) and (pointer: coarse) { .usb-button.button--text { background: rgba(0, 0, 0, 0); border: none; color: rgb(35, 90, 228); } .usb-button.button--text .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--text:hover, .usb-button.button--text:focus { background: rgba(0, 0, 0, 0); color: rgb(35, 90, 228); border: none; } .usb-button.button--text:hover .svg-icon, .usb-button.button--text:focus .svg-icon { color: rgb(35, 90, 228); } .usb-button.button--text:hover::before, .usb-button.button--text:focus::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.5rem; content: ""; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); } .usb-button.button--text:active { background: rgb(0, 30, 121); border: none; color: rgba(255, 255, 255, 0.78); } .usb-button.button--text:active .svg-icon { color: rgba(255, 255, 255, 0.78); } } .usb-button.button--naked { background: rgba(0, 0, 0, 0); border: 0px none rgba(0, 0, 0, 0); color: inherit; line-height: 1; } .usb-button.button--naked:hover { background: rgba(0, 0, 0, 0); border: 0px none rgba(0, 0, 0, 0); color: inherit; } .usb-button.button--naked .usb-icon { margin-right: 0.25rem; } .usb-button.button--naked .usb-icon svg { fill: currentColor; } @media (hover: none) and (pointer: coarse) { .usb-button.button--naked { background: rgba(0, 0, 0, 0); color: inherit; } .usb-button.button--naked:hover { background: rgba(0, 0, 0, 0); color: inherit; } } .usb-button:focus::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.5rem; content: ""; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); } .usb-button:disabled, .usb-button[aria-disabled=true] { background: rgba(205, 209, 226, 0.4) !important; color: rgb(122, 122, 149) !important; cursor: not-allowed !important; border-color: rgba(0, 0, 0, 0) !important; } .usb-button:disabled .svg-icon, .usb-button[aria-disabled=true] .svg-icon { color: rgb(122, 122, 149) !important; } @media (hover: none) and (pointer: coarse) { .usb-button:disabled, .usb-button[aria-disabled=true] { background: rgba(205, 209, 226, 0.4); color: rgb(122, 122, 149); } .usb-button:disabled:hover, .usb-button:disabled:focus, .usb-button[aria-disabled=true]:hover, .usb-button[aria-disabled=true]:focus { background: rgba(205, 209, 226, 0.4); color: rgb(122, 122, 149); } .usb-button:disabled:hover:before, .usb-button:disabled:focus:before, .usb-button[aria-disabled=true]:hover:before, .usb-button[aria-disabled=true]:focus:before { border-color: rgba(0, 0, 0, 0); } } .usb-date_picker { border-radius: 0.25rem; border: 1px solid rgba(0, 0, 0, 0); padding: 1.25rem 0; position: relative; width: 100%; } .usb-date_picker fieldset > legend { color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.5; } .usb-date_picker--range { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; } @media screen and (min-width: 42rem) { .usb-date_picker--range { flex-direction: row; justify-content: space-between; } } .usb-date_picker--range .usb--wrapper { width: 100%; } @media screen and (min-width: 42rem) { .usb-date_picker--range .usb--wrapper { width: calc(50% - 0.75rem); } } .usb-date_picker-hr { background-color: rgb(205, 209, 226); display: none; margin: 0; margin-top: 0.75rem; position: relative; left: -1.5rem; width: calc(100% + 3rem); } .usb-date_picker .usb-calendar { display: none; } .usb-date_picker--expanded { background: rgb(255, 255, 255); border-color: rgb(205, 209, 226); border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.15); padding: 1.25rem 1.5rem 0.75rem; transition: padding 0.25s ease; } .usb-date_picker--expanded .usb-date_picker-hr { display: block; } .usb-date_picker--expanded .usb-calendar { display: block; } .usb-calendar { background-color: rgb(255, 255, 255); padding: 1.25rem 1rem; position: relative; width: 100%; /* Screen reader to hide */ } .usb-calendar.show-border { border: 1px solid rgb(205, 209, 226); border-radius: 0.25rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .12); } .usb-calendar[role=dialog] { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; border: 1px solid rgb(205, 209, 226); border-top: none; box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.15); position: absolute; left: -1px; top: calc(100% + 1px); width: calc(100% + 2px); z-index: 2; } .usb-calendar > * { font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 1rem; } .usb-calendar_header { display: flex; align-items: center; justify-content: space-between; width: 100%; } .usb-calendar .usb-month_year--button { background: transparent; border: none; border-radius: 0.25rem; color: rgb(72, 72, 97); display: flex; align-items: center; justify-content: space-between; font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 1rem; line-height: 1.5; outline: none; padding: 0.5rem; position: relative; } .usb-calendar .usb-month_year--button:focus::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; content: ""; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); } .usb-calendar .usb-month_year--button:hover { background: linear-gradient(-180deg, rgb(0, 88, 255) 0%, rgb(0, 88, 255) 100%); color: rgb(255, 255, 255); } .usb-calendar .usb-month_year--button:hover .usb-icon { fill: rgb(255, 255, 255); } .usb-calendar .usb-month_year--button:active { background: linear-gradient(-180deg, rgb(0, 30, 121) 0%, rgb(0, 30, 121) 100%); color: rgba(255, 255, 255, 0.78); } .usb-calendar .usb-month_year--button:active .usb-icon { fill: rgba(255, 255, 255, 0.78); } .usb-calendar .usb-month_year--button .usb-icon { display: block; height: 1.25rem; margin-left: 0.5rem; width: 1.25rem; } .usb-calendar .usb-month_year--button .usb-icon > svg { transition: transform 0.25s ease-in-out; } .usb-calendar .usb-month_year--button[aria-expanded=true] .usb-icon > svg { transform: rotateX(180deg); } .usb-calendar .usb-month_year--panel { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; } .usb-calendar .usb-month_year--panel fieldset { max-height: calc((6rem + 1rem) * 2); } .usb-calendar .usb-month_year--panel fieldset > div { padding-top: 1rem; position: relative; } .usb-calendar .usb-month_year--panel fieldset > div > div { display: flex; align-items: center; justify-content: center; } .usb-calendar .usb-month_year--panel fieldset > div > div.is-today { position: relative; } .usb-calendar .usb-month_year--panel fieldset > div > div.is-today::after { background-color: rgb(35, 90, 228); border-radius: 50%; border: 2px solid rgb(255, 255, 255); content: ""; height: 0.75rem; width: 0.75rem; position: absolute; bottom: -1rem; left: 50%; transform: translateX(-50%); bottom: -0.25rem; } .usb-calendar .usb-month_year--panel fieldset input { appearance: none; -webkit-appearance: none; background-color: transparent; border-color: transparent; height: 100%; outline: none; position: absolute; left: 0; right: 0; width: 100%; } .usb-calendar .usb-month_year--panel fieldset input::-ms-check { background-color: transparent; border: none; color: transparent; } .usb-calendar .usb-month_year--panel fieldset input:hover:not(:disabled) + label { border-color: rgb(35, 90, 228); } .usb-calendar .usb-month_year--panel fieldset input:checked:not(:disabled) + label { background-color: rgb(35, 90, 228); border-color: rgb(35, 90, 228); color: rgb(255, 255, 255); } .usb-calendar .usb-month_year--panel fieldset input:active:not(:disabled) + label { background-color: rgb(0, 30, 121); border-color: rgb(0, 30, 121); color: rgba(255, 255, 255, 0.78); } .usb-calendar .usb-month_year--panel fieldset input:disabled { cursor: not-allowed; } .usb-calendar .usb-month_year--panel fieldset input:disabled + label { color: rgb(99, 99, 127); cursor: not-allowed; } .usb-calendar .usb-month_year--panel fieldset input + label { color: rgb(45, 45, 62); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 500; line-height: 1.5; position: relative; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; z-index: 1; } .usb-calendar .usb-month_year--panel_months { display: flex; flex-wrap: wrap; position: relative; width: 100%; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .usb-calendar .usb-month_year--panel_months { width: auto; } } .usb-calendar .usb-month_year--panel_months::after { background-color: rgb(205, 209, 226); content: ""; height: calc(100% - 2.5rem); position: absolute; right: 0; top: 1.75rem; width: 1px; } .usb-calendar .usb-month_year--panel_months--container { width: 33.3333333333%; } .usb-calendar .usb-month_year--panel_months--container_content { height: 2.5rem; position: relative; width: 2.5rem; } .usb-calendar .usb-month_year--panel_months--container_content input:not(:disabled) + label { background-color: transparent; border: 1px solid transparent; border-radius: 100%; content: ""; height: 2.5rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: border-color 0.25s ease, background-color unqupte("0.25s ease"); width: 2.5rem; z-index: 0; width: calc(3rem + 0.5rem); border-radius: 1.25rem; } .usb-calendar .usb-month_year--panel_months--container_content.is-focused::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; content: ""; height: 3rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(3rem + 1rem); z-index: 2; } .usb-calendar .usb-month_year--panel_years { padding-left: 1.25rem; padding-right: 0.25rem; } .usb-calendar .usb-month_year--panel_years--container_content { height: 2.5rem; position: relative; width: calc(3rem + 0.5rem); } .usb-calendar .usb-month_year--panel_years--container_content input:not(:disabled) + label { background-color: transparent; border: 1px solid transparent; border-radius: 100%; content: ""; height: 2.5rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: border-color 0.25s ease, background-color unqupte("0.25s ease"); width: calc(3rem + 0.5rem); z-index: 0; border-radius: 1.25rem; } .usb-calendar .usb-month_year--panel_years--container_content.is-focused::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; content: ""; height: 3rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(3rem + 1rem); z-index: 2; } .usb-calendar_pagination .usb-button { margin: 0 0.25rem; padding: 0.25rem; background-color: rgb(255, 255, 255); } .usb-calendar_pagination .usb-button .usb-icon { margin: 0; color: rgb(45, 45, 62); } .usb-calendar_pagination .usb-button:hover { background: linear-gradient(-180deg, rgb(0, 88, 255) 0%, rgb(0, 88, 255) 100%); color: rgb(255, 255, 255); } .usb-calendar_pagination .usb-button:hover span { color: rgb(255, 255, 255); } .usb-calendar_pagination .usb-button:active { background: linear-gradient(-180deg, rgb(0, 30, 121) 0%, rgb(0, 30, 121) 100%); color: rgba(255, 255, 255, 0.78); } .usb-calendar_pagination .usb-button:active .usb-icon { fill: rgba(255, 255, 255, 0.78); } .usb-calendar_pagination .usb-button.button--text { padding: 0; } .usb-calendar_pagination .usb-button.button--text:focus:after { height: calc(100% + 0.5rem); left: -0.25rem; top: -0.25rem; width: calc(100% + 0.5rem); } .usb-calendar_pagination .usb-button.button--text, .usb-calendar_pagination .usb-button.button--text .usb-icon { margin: 0; color: rgb(72, 72, 97); } .usb-calendar_pagination .usb-button.button--text:first-of-type { margin-right: 1.5rem; } .usb-calendar_pagination .usb-button.button--text:not(:hover):not(:active) .usb-icon { color: rgb(72, 72, 97); } .usb-calendar_pagination .usb-button.button--text.sibling-disabled { margin-right: calc(3rem + 0.25rem); } .usb-calendar_pagination .usb-button.button--text.is-disabled { display: none; } .usb-calendar .usb-day_picker { padding-top: 1.5rem; width: 100%; } .usb-calendar .usb-day_picker--header tr > th { color: rgb(72, 72, 97); font-size: 0.75rem; font-weight: 400; line-height: 1.5; padding-bottom: 1rem; width: 14.2857142857%; } .usb-calendar .usb-day_picker--header tr > th.is-disabled { color: rgb(99, 99, 127); } .usb-calendar .usb-day_picker--body_cell { border: 0.5rem solid rgba(0, 0, 0, 0); border-bottom-width: 0.75rem; border-left-width: 0; border-right-width: 0; padding: 0.5rem; position: relative; text-align: center; } .usb-calendar .usb-day_picker--body_cell::after { background-color: transparent; border: 1px solid transparent; border-radius: 100%; content: ""; height: 2.5rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: border-color 0.25s ease, background-color unqupte("0.25s ease"); width: 2.5rem; z-index: 0; } .usb-calendar .usb-day_picker--body_cell.is-selected::after, .usb-calendar .usb-day_picker--body_cell.is-selected.is-disabled::after { background-color: rgb(35, 90, 228); } .usb-calendar .usb-day_picker--body_cell.is-selected span, .usb-calendar .usb-day_picker--body_cell.is-selected.is-disabled span { color: rgb(255, 255, 255); } .usb-calendar .usb-day_picker--body_cell:hover:not(.is-disabled)::after { border-color: rgb(35, 90, 228); } .usb-calendar .usb-day_picker--body_cell:focus { outline: none; } .usb-calendar .usb-day_picker--body_cell:focus::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; content: ""; height: 3rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3rem; z-index: 2; } .usb-calendar .usb-day_picker--body_cell:active:not(.is-disabled)::after { background-color: rgb(0, 30, 121); border-color: rgb(0, 30, 121); } .usb-calendar .usb-day_picker--body_cell:active:not(.is-disabled) span { color: rgba(255, 255, 255, 0.78); } .usb-calendar .usb-day_picker--body_cell span { color: rgb(45, 45, 62); font-size: 1rem; font-weight: 500; line-height: 1.5; letter-spacing: normal; position: relative; transition: color 0.25s ease; z-index: 1; } .usb-calendar .usb-day_picker--body_cell.is-today span { position: relative; } .usb-calendar .usb-day_picker--body_cell.is-today span::after { background-color: rgb(35, 90, 228); border-radius: 50%; border: 2px solid rgb(255, 255, 255); content: ""; height: 0.75rem; width: 0.75rem; position: absolute; bottom: -1rem; left: 50%; transform: translateX(-50%); background-color: rgb(35, 90, 228); } .usb-calendar .usb-day_picker--body_cell.is-disabled { cursor: not-allowed; } .usb-calendar .usb-day_picker--body_cell.is-disabled span { color: rgb(99, 99, 127); } .usb-calendar .usb-day_picker--body_cell.is-in-range { background-color: rgb(238, 246, 255); } .usb-calendar .usb-day_picker--body_cell.range-start { background: linear-gradient(90deg, rgb(255, 255, 255) 50%, rgb(238, 246, 255) 50%); } .usb-calendar .usb-day_picker--body_cell.range-end { background: linear-gradient(90deg, rgb(238, 246, 255) 50%, rgb(255, 255, 255) 50%); } .usb-calendar_toggletip { background-color: rgb(35, 90, 228); border: none; border-radius: 0.25rem; height: 2rem; position: absolute; bottom: 0; right: 0; width: 2rem; z-index: 0; } .usb-calendar_toggletip::after { border-bottom: 2rem solid transparent; border-top: 2rem solid white; border-right: 2rem solid transparent; content: ""; height: 0; width: 0; position: absolute; top: 0; left: 0; } .usb-calendar_toggletip:hover { background: linear-gradient(-180deg, rgb(0, 88, 255) 0%, rgb(0, 88, 255) 100%); color: rgb(255, 255, 255); } .usb-calendar_toggletip:active { background: linear-gradient(-180deg, rgb(0, 30, 121) 0%, rgb(0, 30, 121) 100%); color: rgba(255, 255, 255, 0.78); } .usb-calendar_toggletip:active span { color: rgba(255, 255, 255, 0.78); } .usb-calendar_toggletip--button { background-color: transparent; border: none; border-bottom-right-radius: 0.25rem; color: rgb(255, 255, 255); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 0.875rem; outline: none; padding: 0; position: relative; height: 2rem; width: 2rem; z-index: 1; } .usb-calendar_toggletip--button > span { position: absolute; right: 0.25rem; bottom: 0.125rem; } .usb-calendar_toggletip--button:focus::after { border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; content: ""; height: 2rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2rem; z-index: 2; } .usb-calendar_accessibility-info { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 2rem); z-index: 2; } .usb-calendar_accessibility-info--container { background-color: rgb(255, 255, 255); border: 1px solid rgb(122, 122, 149); border-radius: 0.25rem; padding: 1rem; } .usb-calendar_accessibility-info--container > h2 { color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 500; font-size: 0.875rem; line-height: 1.5; margin-bottom: 0.5rem; } .usb-calendar_accessibility-info--container ul { list-style: none; } .usb-calendar_accessibility-info--container ul > li { display: flex; align-items: center; justify-content: flex-start; } .usb-calendar_accessibility-info--container ul > li:not(:last-of-type) { margin-bottom: 0.5rem; } .usb-calendar_accessibility-info--container ul > li span[role=img], .usb-calendar_accessibility-info--container ul > li .usb-calendar_accessibility-info--key { display: flex; align-items: center; justify-content: center; gap: 2px; } .usb-calendar_accessibility-info--container ul > li span[role=img] kbd, .usb-calendar_accessibility-info--container ul > li .usb-calendar_accessibility-info--key kbd { background-color: rgb(241, 245, 251); color: rgb(45, 45, 62); display: flex; font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 0.875rem; height: 1.25rem; border-radius: 0.25rem; min-width: 1.25rem; padding: 0.25rem; text-align: center; white-space: nowrap; align-items: center; justify-content: center; width: auto; } .usb-calendar_accessibility-info--container ul > li span[role=img] .d-flex_arrows, .usb-calendar_accessibility-info--container ul > li .usb-calendar_accessibility-info--key .d-flex_arrows { display: flex; align-items: center; } .usb-calendar_accessibility-info--container ul > li p { color: rgb(72, 72, 97); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 0.875rem; margin-left: 0.5rem; } .usb-calendar .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .tooltip { display: inline-block; position: relative; } .tooltip__trigger { padding: 2px; color: rgb(99, 99, 127); border: 0; background: transparent; } .tooltip__trigger:focus::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; content: ""; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.415rem; width: calc(100% + 0.75rem); } .tooltip__trigger:focus .usb-icon__title { display: none; } .tooltip__trigger:focus-within, .tooltip__trigger:focus-visible { outline: none; } .tooltip__trigger--light { background: rgb(99, 99, 127); } .tooltip__content { border-radius: 2px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .12); letter-spacing: 0.02em; position: absolute; max-width: 200px; width: 60vw; font-size: 0.75rem; line-height: 1.5; display: none; z-index: 1000; } .tooltip__content--top { top: -10px; left: 50%; transform: translate(-50%, -100%); margin-bottom: 0.5rem; } .tooltip__content--right { left: 100%; top: 50%; transform: translate(0, -50%); margin-left: 0.5rem; } .tooltip__content--bottom { margin-top: 0.5rem; left: 50%; transform: translate(-50%, 0%); } .tooltip__content--left { top: 50%; right: 100%; transform: translate(0, -50%); margin-right: 0.5rem; } .tooltip__content--dark { background-color: rgb(0, 30, 121); color: rgb(255, 255, 255); } .tooltip__content--dark p { color: rgb(255, 255, 255); } .tooltip__content--light { background-color: rgb(255, 255, 255); color: rgb(72, 72, 97); } .tooltip__content--light p { color: rgb(72, 72, 97); } .tooltip__content--children { padding: 0.25rem 0.5rem; } .usb-notification > .error, .usb-notification > .confirmation, .usb-notification > .information, .usb-notification > .warning { display: flex; align-items: flex-start; width: 100%; padding: 1rem 2.5rem 1rem 1rem; border-radius: 0.25rem; position: relative; outline-offset: -1px; line-height: 1.5; color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 0.875rem; line-height: 1.5; } .usb-notification > .error > div, .usb-notification > .confirmation > div, .usb-notification > .information > div, .usb-notification > .warning > div { margin-right: 0.75rem; } .usb-notification > .error h2, .usb-notification > .confirmation h2, .usb-notification > .information h2, .usb-notification > .warning h2 { position: relative; color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 500; font-size: 0.875rem; line-height: 1.5; display: flex; } .usb-notification > .error ul, .usb-notification > .confirmation ul, .usb-notification > .information ul, .usb-notification > .warning ul { list-style-type: disc; margin: 0.25rem 0 0 3rem; } .usb-notification > .error ul li, .usb-notification > .confirmation ul li, .usb-notification > .information ul li, .usb-notification > .warning ul li { margin: 0.5rem 0 0; vertical-align: middle; font-size: 0.875rem; } .usb-notification > .error ul li .button--naked, .usb-notification > .confirmation ul li .button--naked, .usb-notification > .information ul li .button--naked, .usb-notification > .warning ul li .button--naked { margin: 0; text-decoration: underline; line-height: inherit; vertical-align: baseline; border: none; background: none; padding: 0; display: inline; } .usb-notification > .error a, .usb-notification > .error button:not(.usb-button), .usb-notification > .confirmation a, .usb-notification > .confirmation button:not(.usb-button), .usb-notification > .information a, .usb-notification > .information button:not(.usb-button), .usb-notification > .warning a, .usb-notification > .warning button:not(.usb-button) { text-decoration: none; border: none; background: none; padding: 0; line-height: 1.5; } .usb-notification > .error .notification--content-group, .usb-notification > .confirmation .notification--content-group, .usb-notification > .information .notification--content-group, .usb-notification > .warning .notification--content-group { white-space: normal; } @media only screen and (min-width: 30rem) { .usb-notification > .error .notification--content-group, .usb-notification > .confirmation .notification--content-group, .usb-notification > .information .notification--content-group, .usb-notification > .warning .notification--content-group { white-space: nowrap; } } .usb-notification > .error .multiple-notification--text, .usb-notification > .error .single-notification--text, .usb-notification > .confirmation .multiple-notification--text, .usb-notification > .confirmation .single-notification--text, .usb-notification > .information .multiple-notification--text, .usb-notification > .information .single-notification--text, .usb-notification > .warning .multiple-notification--text, .usb-notification > .warning .single-notification--text { display: inline-flex; flex-direction: row; text-decoration: none; font-family: Circular-USB, Arial, Helvetica, sans-serif; line-height: 1.5; font-size: 0.875rem; font-weight: 400; color: rgb(45, 45, 62); } .usb-notification > .error .multiple-notification--text.single-notification--header, .usb-notification > .error .single-notification--text.single-notification--header, .usb-notification > .confirmation .multiple-notification--text.single-notification--header, .usb-notification > .confirmation .single-notification--text.single-notification--header, .usb-notification > .information .multiple-notification--text.single-notification--header, .usb-notification > .information .single-notification--text.single-notification--header, .usb-notification > .warning .multiple-notification--text.single-notification--header, .usb-notification > .warning .single-notification--text.single-notification--header { outline: none; } .usb-notification > .error .single-notification--text, .usb-notification > .error .single-notification--text + span.notification--content-group, .usb-notification > .confirmation .single-notification--text, .usb-notification > .confirmation .single-notification--text + span.notification--content-group, .usb-notification > .information .single-notification--text, .usb-notification > .information .single-notification--text + span.notification--content-group, .usb-notification > .warning .single-notification--text, .usb-notification > .warning .single-notification--text + span.notification--content-group { vertical-align: middle; } .usb-notification > .error .multiple-notification--link-text, .usb-notification > .error .multiple-notification--btn-text, .usb-notification > .error .single-notification--link-text, .usb-notification > .error .single-notification--link-btn, .usb-notification > .confirmation .multiple-notification--link-text, .usb-notification > .confirmation .multiple-notification--btn-text, .usb-notification > .confirmation .single-notification--link-text, .usb-notification > .confirmation .single-notification--link-btn, .usb-notification > .information .multiple-notification--link-text, .usb-notification > .information .multiple-notification--btn-text, .usb-notification > .information .single-notification--link-text, .usb-notification > .information .single-notification--link-btn, .usb-notification > .warning .multiple-notification--link-text, .usb-notification > .warning .multiple-notification--btn-text, .usb-notification > .warning .single-notification--link-text, .usb-notification > .warning .single-notification--link-btn { color: rgb(35, 90, 228); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; font-size: 0.875rem; font-weight: 400; text-decoration: underline; text-align: left; line-height: 1.5; } .usb-notification > .error .multiple-notification--link-text:hover, .usb-notification > .error .multiple-notification--btn-text:hover, .usb-notification > .error .single-notification--link-text:hover, .usb-notification > .error .single-notification--link-btn:hover, .usb-notification > .confirmation .multiple-notification--link-text:hover, .usb-notification > .confirmation .multiple-notification--btn-text:hover, .usb-notification > .confirmation .single-notification--link-text:hover, .usb-notification > .confirmation .single-notification--link-btn:hover, .usb-notification > .information .multiple-notification--link-text:hover, .usb-notification > .information .multiple-notification--btn-text:hover, .usb-notification > .information .single-notification--link-text:hover, .usb-notification > .information .single-notification--link-btn:hover, .usb-notification > .warning .multiple-notification--link-text:hover, .usb-notification > .warning .multiple-notification--btn-text:hover, .usb-notification > .warning .single-notification--link-text:hover, .usb-notification > .warning .single-notification--link-btn:hover { text-decoration: none; } .usb-notification > .error .multiple-notification--link-text:hover, .usb-notification > .error .multiple-notification--btn-text:hover, .usb-notification > .error .single-notification--link-text:hover, .usb-notification > .error .single-notification--link-btn:hover, .usb-notification > .confirmation .multiple-notification--link-text:hover, .usb-notification > .confirmation .multiple-notification--btn-text:hover, .usb-notification > .confirmation .single-notification--link-text:hover, .usb-notification > .confirmation .single-notification--link-btn:hover, .usb-notification > .information .multiple-notification--link-text:hover, .usb-notification > .information .multiple-notification--btn-text:hover, .usb-notification > .information .single-notification--link-text:hover, .usb-notification > .information .single-notification--link-btn:hover, .usb-notification > .warning .multiple-notification--link-text:hover, .usb-notification > .warning .multiple-notification--btn-text:hover, .usb-notification > .warning .single-notification--link-text:hover, .usb-notification > .warning .single-notification--link-btn:hover { text-decoration: none; } .usb-notification > .error .multiple-notification--link, .usb-notification > .confirmation .multiple-notification--link, .usb-notification > .information .multiple-notification--link, .usb-notification > .warning .multiple-notification--link { margin-left: 0.25rem; } .usb-notification > .error .single-notification--link-text, .usb-notification > .error .single-notification--btn-text, .usb-notification > .confirmation .single-notification--link-text, .usb-notification > .confirmation .single-notification--btn-text, .usb-notification > .information .single-notification--link-text, .usb-notification > .information .single-notification--btn-text, .usb-notification > .warning .single-notification--link-text, .usb-notification > .warning .single-notification--btn-text { color: rgb(35, 90, 228); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; font-size: 0.875rem; font-weight: 400; text-decoration: underline; line-height: 1.5; margin: 0 0.25rem; } .usb-notification > .error .single-notification--link-text:hover, .usb-notification > .error .single-notification--btn-text:hover, .usb-notification > .confirmation .single-notification--link-text:hover, .usb-notification > .confirmation .single-notification--btn-text:hover, .usb-notification > .information .single-notification--link-text:hover, .usb-notification > .information .single-notification--btn-text:hover, .usb-notification > .warning .single-notification--link-text:hover, .usb-notification > .warning .single-notification--btn-text:hover { text-decoration: none; } .usb-notification > .error .single-notification--link-text:hover, .usb-notification > .error .single-notification--btn-text:hover, .usb-notification > .confirmation .single-notification--link-text:hover, .usb-notification > .confirmation .single-notification--btn-text:hover, .usb-notification > .information .single-notification--link-text:hover, .usb-notification > .information .single-notification--btn-text:hover, .usb-notification > .warning .single-notification--link-text:hover, .usb-notification > .warning .single-notification--btn-text:hover { text-decoration: none; } .usb-notification > .error .single-notification--text-end-short, .usb-notification > .confirmation .single-notification--text-end-short, .usb-notification > .information .single-notification--text-end-short, .usb-notification > .warning .single-notification--text-end-short { margin: 0 0 0 0.25rem; } .usb-notification > .error .single-notification--text, .usb-notification > .error .single-notification--link-btn, .usb-notification > .confirmation .single-notification--text, .usb-notification > .confirmation .single-notification--link-btn, .usb-notification > .information .single-notification--text, .usb-notification > .information .single-notification--link-btn, .usb-notification > .warning .single-notification--text, .usb-notification > .warning .single-notification--link-btn { text-decoration: none; color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; font-size: 0.875rem; font-weight: 400; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .usb-notification > .error .single-notification--text, .usb-notification > .error .single-notification--link-btn, .usb-notification > .confirmation .single-notification--text, .usb-notification > .confirmation .single-notification--link-btn, .usb-notification > .information .single-notification--text, .usb-notification > .information .single-notification--link-btn, .usb-notification > .warning .single-notification--text, .usb-notification > .warning .single-notification--link-btn { /* IE10+ CSS styles go here */ margin-left: 12px; } } .usb-notification > .error .single-notification--text:focus, .usb-notification > .error .single-notification--link-btn:focus, .usb-notification > .confirmation .single-notification--text:focus, .usb-notification > .confirmation .single-notification--link-btn:focus, .usb-notification > .information .single-notification--text:focus, .usb-notification > .information .single-notification--link-btn:focus, .usb-notification > .warning .single-notification--text:focus, .usb-notification > .warning .single-notification--link-btn:focus { outline-offset: 0.25rem; outline-color: rgb(35, 90, 228); } .usb-notification > .error .single-notification--btn-wrapper, .usb-notification > .confirmation .single-notification--btn-wrapper, .usb-notification > .information .single-notification--btn-wrapper, .usb-notification > .warning .single-notification--btn-wrapper { display: flex; } .usb-notification > .error #children-notification-children-notification, .usb-notification > .confirmation #children-notification-children-notification, .usb-notification > .information #children-notification-children-notification, .usb-notification > .warning #children-notification-children-notification { padding-top: 0.25rem; } .usb-notification > .error #children-notification-children-notification a, .usb-notification > .confirmation #children-notification-children-notification a, .usb-notification > .information #children-notification-children-notification a, .usb-notification > .warning #children-notification-children-notification a { text-decoration: underline; } .usb-notification .usb-children-notification { margin-left: 2rem; } .usb-notification .usb-children-notification .usb-icon { position: absolute; left: 1rem; } .usb-notification .icon { width: 1.25rem; height: 1.25rem; margin-right: 0.75rem; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .usb-notification .icon { /* IE10+ CSS styles go here */ width: 20px; } } .usb-notification .usb-button.usb-button--close-btn { position: absolute; top: 1rem; right: 1.25rem; cursor: pointer; padding: 0; height: 1.25rem; min-height: 0; min-width: 0; width: 1.25rem; background: transparent; } .usb-notification .usb-button.usb-button--close-btn .svg-icon svg path, .usb-notification .usb-button.usb-button--close-btn .svg-icon svg circle, .usb-notification .usb-button.usb-button--close-btn .svg-icon svg ellipse, .usb-notification .usb-button.usb-button--close-btn .svg-icon svg g { fill: rgb(45, 45, 62); } .usb-notification .usb-button.usb-button--close-btn:hover { background: transparent; } .usb-notification > .error { border: 1px solid rgb(255, 190, 180); border-top: 4px solid rgb(207, 42, 54); background-color: rgb(255, 233, 234); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12); } .usb-notification > .error .usb-button:hover .svg-icon svg g, .usb-notification > .error .usb-button:hover .svg-icon svg path, .usb-notification > .error .usb-button:hover .svg-icon svg circle, .usb-notification > .error .usb-button:hover .svg-icon svg rect { fill: rgb(207, 42, 54); } .usb-notification > .confirmation { border: 1px solid rgb(160, 220, 170); border-top: 4px solid rgb(0, 125, 30); background-color: rgb(229, 248, 232); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12); } .usb-notification > .confirmation .usb-button:hover .svg-icon svg g, .usb-notification > .confirmation .usb-button:hover .svg-icon svg path, .usb-notification > .confirmation .usb-button:hover .svg-icon svg circle, .usb-notification > .confirmation .usb-button:hover .svg-icon svg rect { fill: rgb(0, 125, 30); } .usb-notification > .warning { border: 1px solid rgb(255, 213, 137); border-top: 4px solid rgb(235, 94, 1); background-color: rgb(255, 244, 228); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12); } .usb-notification > .warning .usb-button:hover .svg-icon svg g, .usb-notification > .warning .usb-button:hover .svg-icon svg path, .usb-notification > .warning .usb-button:hover .svg-icon svg circle, .usb-notification > .warning .usb-button:hover .svg-icon svg rect { fill: rgb(235, 94, 1); } .usb-notification > .information { border: 1px solid rgb(170, 210, 255); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12); border-top: 4px solid rgb(35, 90, 228); background-color: rgb(238, 246, 255); } .usb-notification > .information .usb-button:hover .svg-icon svg g, .usb-notification > .information .usb-button:hover .svg-icon svg path, .usb-notification > .information .usb-button:hover .svg-icon svg circle, .usb-notification > .information .usb-button:hover .svg-icon svg rect { fill: rgb(35, 90, 228); } .svg-icon { max-width: 100%; display: inline; } .svg-icon svg.single path, .svg-icon svg.single circle, .svg-icon svg.single ellipse, .svg-icon svg.single g { fill: inherit; transition: fill 0.1s ease; } .svg-icon.v-align-middle { display: inline-block; } .svg-icon.v-align-middle svg { vertical-align: middle; } .svg-icon.block { display: block; } .svg-icon.default { color: rgb(122, 122, 149); fill: rgb(72, 72, 97); } .svg-icon.light { color: rgb(255, 255, 255); fill: rgb(255, 255, 255); } .svg-icon.brand-primary { color: rgb(0, 30, 121); fill: rgb(0, 30, 121); } .svg-icon.brand-secondary { color: rgb(122, 122, 149); fill: rgb(122, 122, 149); } .svg-icon.interaction { color: rgb(35, 90, 228); fill: rgb(35, 90, 228); } .svg-icon.error { color: rgb(207, 42, 54); fill: rgb(207, 42, 54); } .svg-icon.warning { color: rgb(235, 94, 1); fill: rgb(235, 94, 1); } .svg-icon.success { color: rgb(0, 125, 30); fill: rgb(0, 125, 30); } .svg-icon.neutral { color: rgb(35, 90, 228); fill: rgb(35, 90, 228); } .svg-icon.grey10 { color: rgb(241, 245, 251); fill: rgb(241, 245, 251); } .svg-icon.grey20 { color: rgb(235, 239, 246); fill: rgb(235, 239, 246); } .svg-icon.grey30 { color: rgb(205, 209, 226); fill: rgb(205, 209, 226); } .svg-icon.grey60 { color: rgb(122, 122, 149); fill: rgb(122, 122, 149); } .svg-icon.grey70 { color: rgb(99, 99, 127); fill: rgb(99, 99, 127); } .svg-icon.grey80 { color: rgb(72, 72, 97); fill: rgb(72, 72, 97); } .svg-icon.grey90 { color: rgb(45, 45, 62); fill: rgb(45, 45, 62); } .usb-tabs .tabs__tab { position: relative; cursor: pointer; border: none; outline: none; background: transparent; color: rgb(99, 99, 127); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 0.875rem; font-weight: 500; line-height: 1.25; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3rem; padding: 0.75rem 0.75rem 0.75rem 1.25rem; border-bottom: 1px solid rgb(205, 209, 226); } .usb-tabs .tabs__tab:hover { color: rgb(35, 90, 228); fill: rgb(35, 90, 228); } .usb-tabs .tabs__tab:focus { color: rgb(35, 90, 228); } .usb-tabs .tabs__tab:focus::before { content: ""; border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; height: 100%; position: absolute; left: 0; top: 0; width: 100%; } .usb-tabs .tabs__tab[aria-selected=true] { color: rgb(35, 90, 228); background-color: rgb(241, 245, 251); } .usb-tabs .tabs__tab[aria-selected=true]::after { content: ""; color: rgb(35, 90, 228); position: absolute; left: 0; top: 0; display: block; height: 100%; } .usb-tabs .tabs__panels { flex: 1; } .usb-tabs .tabs__panel { position: relative; padding: 0.75rem; } .usb-tabs .tabs__panel[aria-hidden=true] { display: none; } .usb-tabs .tabs__panel:focus::before { content: ""; border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; height: 100%; position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; } .usb-tabs .tabs__panel:focus-within { outline: none; } .usb-tabs--vertical { flex-direction: row; } .usb-tabs--vertical .tabs__list { flex: 0 0 19.5rem; display: flex; flex-direction: column; } .usb-tabs--vertical .tabs__tab[aria-selected=true]::after { border-left: 0.25rem solid rgb(35, 90, 228); } .usb-tabs--horizontal { flex-direction: column; } .usb-tabs--horizontal .tabs__list { display: flex; flex-direction: row; } .usb-tabs--horizontal .tabs__tab { justify-content: center; height: fit-content; padding: 0.75rem 0.75rem 0.75rem 0.75rem; } .usb-tabs--horizontal .tabs__tab[aria-selected=true]::after { border-bottom: 0.25rem solid rgb(35, 90, 228); width: 100%; } .usb-tabs--horizontal .tabs__panel { margin: 0; border-left: none; } .usb-combobox-container { margin-bottom: 1rem; position: relative; } .usb-combobox-container .error label input { border: 1px solid rgb(207, 42, 54); } .usb-combobox-container .error label input::placeholder { color: rgb(207, 42, 54); } .usb-combobox-container .error .error-text__container { align-items: center; gap: 0.25rem; } .usb-combobox-container .error .error-text__container span { top: auto; margin-right: 0; display: flex; } .usb-combobox-container .error .error-text__container svg { width: 0.75rem; height: 0.75rem; } .usb-combobox-container .error .error-text__container p { line-height: 1.125rem; } .usb-combobox-container .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .usb-combobox-container .form-control__search:focus-within:has(input:focus)::after { content: ""; border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); z-index: -1; } .usb-combobox-list--list { background: rgb(255, 255, 255); border-radius: 0.25rem; border: 1px solid rgb(205, 209, 226); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .12); position: absolute; width: 100%; overflow-x: hidden; z-index: 3; margin-top: 6px; max-height: 400px; } .usb-combobox-list-item { min-width: auto; } .usb-combobox-list-item:not(:last-of-type) { border-bottom: 1px solid rgb(205, 209, 226); } .usb-combobox-list-item .usb--checkbox-wrapper { margin: 0; padding: 0.75rem 1rem 0.75rem 0.75rem; cursor: pointer; } .usb-combobox-list-item .usb--checkbox-wrapper:hover, .usb-combobox-list-item:has(input:focus), .usb-combobox-list-item:has(input:checked) { background: rgb(241, 245, 251); } .usb-combobox-list-item .usb--checkbox-wrapper:hover label, .usb-combobox-list-item:has(input:focus) label, .usb-combobox-list-item:has(input:checked) label { color: rgb(35, 90, 228); } .usb-combobox-list-item input[type=checkbox]:indeterminate + label.usb--checkbox-label:hover .usb--checkbox-svg svg { background: rgb(0, 60, 200); fill: rgb(255, 255, 255); } .usb-combobox-list-item input[type=checkbox]:indeterminate + label.usb--checkbox-label .usb--checkbox-svg svg { border-width: 0; background: rgb(35, 90, 228); fill: rgb(255, 255, 255); } .usb-combobox-list-item .usb--checkbox-label .usb--checkbox-svg .usb--checkbox-mixed_state svg { stroke: rgb(255, 255, 255); } .usb-combobox-list-item.no-matches { padding: 0.75rem 1rem; color: rgb(45, 45, 62); } .chip { display: flex; max-width: 100%; position: relative; } .chip__button { background: #D5EAFF; border: 1px solid rgb(35, 90, 228); border-radius: calc(1rem + 0.25rem); color: rgb(35, 90, 228); display: flex; align-items: center; justify-content: center; font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 0.875rem; font-weight: 500; line-height: 1; outline: none; padding: 0.5rem 0.75rem; position: relative; transition: color 0.25s ease; max-width: 100%; } .chip__button__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip__button span.usb-icon { margin-left: 0.25rem; height: 1.25rem; width: 1.25rem; } .chip__button span.usb-icon svg { height: 1.25rem; width: 1.25rem; transition: fill 0.25s ease; } .chip__button:hover:not(:disabled) { background: rgb(0, 60, 200); color: rgb(255, 255, 255); } .chip__button:hover:not(:disabled) span.usb-icon svg { fill: rgb(255, 255, 255); } .chip__button:active:not(:disabled) { background: rgb(0, 30, 121); color: rgba(255, 255, 255, 0.78); } .chip__button:active:not(:disabled) span.usb-icon svg { fill: rgba(255, 255, 255, 0.78); } .chip__button:focus::after { border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; content: ""; height: calc(100% + 0.75rem); position: absolute; left: calc(0.75rem / 2 * -1); top: calc(0.75rem / 2 * -1); width: calc(100% + 0.75rem); } .chip__button:disabled { background: rgb(204, 204, 210); border-color: rgb(205, 209, 226); color: rgb(72, 72, 97); cursor: not-allowed; } .chip__toggle-tip { text-align: left; position: absolute; top: 40px; background: rgb(0, 30, 121); color: #fff; font-size: 0.75rem; left: 0; right: 0; padding: 10px 8px; line-height: 1.3; z-index: 3; } .usb-accumulator-chips-removable { display: flex; gap: 12px; flex-wrap: wrap; align-content: flex-start; } .usb-accumulator-chips-removable li { max-width: 100%; min-width: auto; display: flex; align-items: center; } .usb-accumulator-chips-removable.show-more { padding-bottom: 0; position: relative; left: calc(0.75rem / 2 * -1); top: calc(0.75rem / 2 * -1); padding-left: calc(0.75rem / 2); padding-top: calc(0.75rem / 2); } @media (min-width: 1025px) { .usb-accumulator-chips-removable.show-more:not(.limited-rows) { overflow: initial; } } .usb-accumulator-chips-removable.show-more.limited-rows { margin-bottom: 12px; overflow: auto; } @media (min-width: 375px) { .usb-accumulator-chips-removable:not(.multi-row):not(.show-more) { flex-wrap: nowrap; } } .usb-accumulator-helper-text { font-size: 0.875rem; font-weight: 500; color: rgb(72, 72, 97); line-height: 1.313rem; } .usb-form-combobox { position: relative; width: 100%; } .usb-form-combobox_list { background: rgb(255, 255, 255); border-radius: 0.25rem; border: 1px solid rgb(205, 209, 226); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .12); min-width: calc(100% + 0.5rem); position: absolute; left: -0.25rem; z-index: 1; width: max-content; } .usb-form-combobox_list.collapsed { display: none; } .usb-form-combobox_list.expanded { display: flex; flex-direction: column; } .usb-form-combobox_list-item { cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-family: Circular-USB, Arial, Helvetica, sans-serif; padding: 0.75rem 0.5rem; position: relative; white-space: nowrap; } .usb-form-combobox_list-item:not(:last-of-type) { border-bottom: 1px solid rgb(205, 209, 226); } .usb-form-combobox_list-item:hover, .usb-form-combobox_list-item.list-item_selected { background: rgb(241, 245, 251); } .usb-form-combobox_list-item:hover span.usb-form-combobox_list-item_value, .usb-form-combobox_list-item.list-item_selected span.usb-form-combobox_list-item_value { color: rgb(35, 90, 228); } .usb-form-combobox_list-item.list-item_selected { border: 2px solid rgb(35, 90, 228); } .usb-form-combobox_list-item_value { color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 400; letter-spacing: 0; line-height: 1.5; } .usb-form-combobox_list-item_value-secondary { color: rgb(99, 99, 127); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 0.875rem; padding-left: 0.5rem; } .usb-form-combobox .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* default size is "small" */ .usb-naked-button { display: flex; gap: 0.5rem; justify-content: center; align-items: center; background: none; padding: 0; border: 0 none; position: relative; } .usb-naked-button .usb-naked-button-svg span { display: flex; } .usb-naked-button .usb-naked-button-svg span svg { fill: rgb(0, 88, 255); } .usb-naked-button .usb-naked-button-text { font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 0.875rem; font-weight: 500; font-style: normal; width: max-content; line-height: 1.25rem; color: rgb(0, 88, 255); } .usb-naked-button .usb-naked-button-link-text { font-weight: 400; text-decoration: underline; } .usb-naked-button:hover { text-decoration: underline; text-decoration-color: rgb(35, 90, 228); } .usb-naked-button:hover:has(.usb-naked-button-link-text) { text-decoration: none; } .usb-naked-button:hover:has(.usb-naked-button-link-text) .usb-naked-button-link-text { text-decoration: none; } .usb-naked-button:focus, .usb-naked-button:active { outline: none; } .usb-naked-button:focus::after, .usb-naked-button:active::after { content: " "; position: absolute; width: calc(100% + 0.75rem); max-width: calc(100% + 0.75rem); height: 2rem; top: -0.375rem; left: -0.375rem; border: calc(0.25rem / 2) solid rgb(35, 90, 228); border-radius: 0.25rem; } .usb-naked-button:active { text-decoration: underline; text-decoration-color: rgb(35, 90, 228); } .usb-naked-button.medium { min-height: 1.5rem; } .usb-naked-button.medium .usb-naked-button-text { font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 1rem; height: 1.5rem; line-height: 1.5rem; } .usb-naked-button.medium:focus::after, .usb-naked-button.medium:active::after { content: " "; position: absolute; width: calc(100% + 0.75rem); max-width: calc(100% + 0.75rem); height: 2.25rem; top: -0.375rem; left: -0.375rem; border: calc(0.25rem / 2) solid rgb(35, 90, 228); border-radius: 0.25rem; } .usb-search { display: flex; flex-wrap: nowrap; font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 1rem; position: relative; width: 100%; } .usb-search--row { align-items: start; } .usb-search--column { flex-direction: column; } .usb-search--column .usb-search_button.usb-button { margin: 0; margin-top: 0.75rem; width: 100%; } .usb-search, .usb-search * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; -webkit-focus-ring-color: rgba(0, 0, 0, 0) !important; -webkit-tap-highlight-color: transparent !important; -webkit-focus-ring-color: transparent !important; } .usb-search_container { display: inline-block; position: relative; width: 100%; } .usb-search_container.search-input-focus::after { content: ""; border-radius: 0.25rem; height: calc(100% + 0.5rem); position: absolute; left: -0.25rem; top: -0.25rem; width: calc(100% + 0.5rem); z-index: -1; } .usb-search-input_wrapper { position: relative; } .usb-search_input { color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: 1px solid rgb(122, 122, 149); border-radius: 0.25rem; color: rgb(45, 45, 62); box-shadow: none; height: 2.5rem; margin-bottom: 0; margin-left: 0; padding: 0.75rem 1.75rem 0.75rem 2.5rem; width: 100%; transition: width 100ms ease; will-change: width; } .usb-search_input::placeholder { color: rgb(99, 99, 127); } .usb-search_input::-webkit-search-decoration, .usb-search_input::-webkit-search-cancel-button, .usb-search_input::-webkit-search-results-button, .usb-search_input::-webkit-search-results-decoration { -webkit-appearance: none; } .usb-search_input::-ms-clear, .usb-search_input::-ms-reveal { display: none; width: 0; height: 0; } .usb-search_input:focus { border: 1px solid rgb(35, 90, 228); outline: 2px solid rgb(35, 90, 228); outline-offset: 4px; } .usb-search .helper-text__container { line-height: 1.5; padding-top: 0.25rem; display: flex; } .usb-search .helper-text__container .helper-text__text { color: rgb(99, 99, 127); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.02em; } .usb-search_label-icon { position: absolute; top: 50%; left: 0.75rem; padding-right: 0.75rem; transform: translateY(-50%); z-index: 1; color: rgb(45, 45, 62); } .usb-search_label-icon svg path { fill: rgb(45, 45, 62); } .usb-search_clear { height: 2.5rem; margin: 0; max-height: 1.5rem; padding: 0; width: 2.5rem; visibility: visible; z-index: 1; } .usb-search_clear .usb-icon { margin: 0; max-height: 1.25rem; } .usb-search_clear .usb-icon svg path { color: rgb(72, 72, 97); } .usb-search_clear:hover { border-color: transparent; } .usb-search_clear:hover .usb-icon svg { fill: rgb(72, 72, 97); } .usb-search button.usb-button.button--standard--minimal.usb-search_clear { padding: 0; margin: 0; max-height: 1rem; width: fit-content; text-align: right; min-height: 1.5rem; position: absolute; top: 50%; right: 0.75rem; transform: translate(0%, -50%); } .usb-search button.usb-button.button--standard--minimal.usb-search_clear:hover { background: white; } .usb-search button.usb-button.button--standard--minimal.usb-search_clear:focus::before { border: none; } .usb-search button.usb-button.button--standard--minimal.usb-search_clear:focus-visible { border-radius: 2px; outline: 2px solid rgb(35, 90, 228); content: ""; } .usb-search_button-container { position: relative; } .usb-search_button.usb-button { margin: 0; margin-left: 0.75rem; justify-content: center; } .usb-search_combobox { background-color: rgb(255, 255, 255); border: 1px solid rgb(205, 209, 226); border-radius: 0.25rem; position: absolute; top: calc(100% + 2px); left: 0; width: 100%; z-index: 2; } .usb-search_combobox-options { position: relative; } .usb-search_combobox-options--item { cursor: pointer; display: flex; align-items: flex-start; padding: 0.75rem 1rem; } .usb-search_combobox-options--item:not(:last-of-type) { border-bottom: 1px solid rgb(205, 209, 226); } .usb-search_combobox-options--item_query { color: rgb(45, 45, 62); font-weight: 500; } .usb-search_combobox-options--item:hover:not(.no-match), .usb-search_combobox-options--item[aria-selected=true] { background-color: rgb(241, 245, 251); color: rgb(35, 90, 228); border: 2px solid rgb(35, 90, 228); } .usb-search_combobox-options--item:hover:not(.no-match) svg, .usb-search_combobox-options--item[aria-selected=true] svg { fill: rgb(35, 90, 228); } .usb-search_combobox-options--item:hover:not(.no-match) .usb-search_combobox-options--item_query, .usb-search_combobox-options--item[aria-selected=true] .usb-search_combobox-options--item_query { color: rgb(35, 90, 228); } .usb-search_combobox-options--item.no-match { cursor: text; } .usb-search_combobox-options--item_icon { margin-right: 0.5rem; height: 1.25rem; width: 1.25rem; overflow: hidden; } .usb-search_combobox-options--item_icon svg { max-width: 1.25rem; max-height: 1.25rem; min-width: 1.25rem; min-height: 1.25rem; } .usb-search_combobox-options--item > * { pointer-events: none; } .usb-search .usb-search_scope .usb--select--wrapper.usb-search_scope-select { margin-top: 0 !important; min-height: auto !important; height: 2.5rem !important; max-height: 2.5rem !important; } .usb-search .usb-search_scope .usb--select--wrapper.usb-search_scope-select.is-focused::after { content: ""; outline: 2px solid rgb(35, 90, 228) !important; border: none; height: calc(100% + 0.5rem) !important; position: absolute !important; left: -0.25rem !important; top: -0.25rem !important; width: calc(100% + 0.5rem) !important; z-index: -1 !important; } .usb-search .usb-search_scope .usb--select--wrapper.usb-search_scope-select > .usb--error-message { display: none !important; } .usb-search .usb-search_scope .usb--select--wrapper.usb-search_scope-select > .helper_label--wrapper { display: none !important; } .usb-search .usb-search_scope .usb--select--wrapper.usb-search_scope-select > .usb--select--label { position: absolute !important; left: -100vw !important; } .usb-search .usb-search_scope .usb--select--wrapper.usb-search_scope-select .usb--select--container { border: 1px solid rgb(122, 122, 149) !important; border-radius: 0.25rem !important; box-shadow: none !important; height: 2.5rem !important; margin-top: 0 !important; margin-left: 0 !important; padding: 0.5rem !important; } .usb-search .usb-search_scope .usb--select--wrapper.usb-search_scope-select .usb--select--container .select--chevron { top: 0.625rem !important; right: 0.5rem !important; pointer-events: none !important; } .usb-search .usb-search_scope .usb--select--wrapper.usb-search_scope-select .usb--select--container:focus-within { border: 1px solid rgb(35, 90, 228) !important; } .usb-search--row .usb-search_scope { flex-grow: 0; flex-shrink: 0; } .usb-search--column .usb-search-scope { width: 100%; } .usb-search_scope { transition: flex-basis 100ms ease; will-change: flex-basis; } .usb-search--row .usb-search_scope .usb--select--wrapper.usb-search_scope-select .usb--select--container { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right: 0 !important; } .usb-search--row .usb-search_scope .usb--select--wrapper.usb-search_scope-select .usb--select--container .usb--select { padding-right: 1.25rem !important; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .usb-search--row .usb-search_scope .usb--select--wrapper.usb-search_scope-select .usb--select--container:focus-within { border: 1px solid rgb(35, 90, 228) !important; } .usb-search--row .usb-search_scope ~ .usb-search_container .usb-search_input { border-top-left-radius: 0; border-bottom-left-radius: 0; } .usb-search--column .usb-search_scope .usb--select--wrapper.usb-search_scope-select .usb-search_scope-select { max-width: 100%; } .usb-search--column .usb-search_scope .usb--select--wrapper.usb-search_scope-select .usb--select--container { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; border-bottom: 0 !important; } .usb-search--column .usb-search_scope ~ .usb-search_container .usb-search_input { border-top-left-radius: 0; border-top-right-radius: 0; } .form-control__search { display: inline-block; position: relative; width: 100%; } .form-control__search, .form-control__search * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; -webkit-focus-ring-color: rgba(0, 0, 0, 0) !important; -webkit-tap-highlight-color: transparent !important; -webkit-focus-ring-color: transparent !important; } .form-control__search.error .warning-icon { display: inline-block; position: relative; margin-right: 0.25rem; } .form-control__search.error .error-text__container { display: flex; } .form-control__search.is-focused::after { content: ""; border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); z-index: -1; } .form-control__search input[type=search] { width: 100%; height: 2.5rem; color: rgb(99, 99, 127); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; box-shadow: none; position: relative; border-radius: 0.25rem; border: 1px solid rgb(122, 122, 149); margin-bottom: 0; margin-left: 0; background-color: transparent; padding: 0.5rem 1.75rem 0.5rem 2.5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form-control__search input[type=search]:focus { outline: 0; border-color: rgb(35, 90, 228); box-shadow: 0; } .form-control__search .search-icon { position: absolute; margin: 0.625rem 0 0 0.75rem; z-index: 1; } .form-control__search .helper-text__container { line-height: 1.5; padding-top: 0.25rem; display: flex; } .form-control__search .helper-text__container .helper-text__text { color: rgb(99, 99, 127); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.02em; } .form-control__search .error-text__container { line-height: 1.5; padding-top: 0.25rem; display: none; } .form-control__search .error-text__container .error-text__error { color: rgb(207, 42, 54); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.02em; display: inline-block; align-self: center; } .usb-drawer:not(.header-not-sticky) .usb-drawer--header { position: sticky; top: 0; z-index: 9990; } .usb-drawer--container.footer-not-sticky, .usb-drawer--container.header-not-sticky { display: flex; flex-direction: column; height: 100%; max-height: none; } .usb-drawer--container.footer-not-sticky .usb-drawer--body { flex: 1 1 auto; overflow-y: visible; } .usb-drawer--container.header-not-sticky .usb-drawer--body { flex: 1 1 auto; overflow-y: visible; } .usb-drawer--container.footer-not-sticky .usb-drawer--footer { margin-top: auto; position: relative; flex-shrink: 0; } .usb-drawer--overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(1, 1, 1, 0.6); z-index: 9999; display: flex; justify-content: flex-end; align-items: center; animation-name: overlayAppear; animation-duration: 0.5s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } .usb-drawer--overlay-close-button { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; border: none; cursor: pointer; opacity: 0; } .usb-drawer--overlay dialog { padding: 0; } .usb-drawer--dialog { position: absolute; background: rgb(255, 255, 255); min-width: min(20rem, 100vw); max-width: 100vw; min-height: 9rem; max-height: 100vh; z-index: 10000; overflow: auto; display: flex; flex-direction: column; border: none; padding: 0; } .usb-drawer--container { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; max-height: 100vh; overflow: auto; } .usb-drawer--header { background-color: rgb(255, 255, 255); margin-bottom: 0; padding: 2.5rem 2rem 1rem; display: flex; flex-direction: column; position: relative; } .usb-drawer--header h1 { float: "left"; margin: 0; text-transform: none; font-size: 1.25rem !important; line-height: 1.5 !important; color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 500; font-size: 1.5rem; line-height: 1.25; } @media screen and (min-width: 42rem) { .usb-drawer--header h1 { font-size: 1.25rem; line-height: 1.5; } } .usb-drawer--header-content { width: 100%; } .usb-drawer--close-icon.usb-button.button--utility--minimal { position: absolute; top: 1rem; right: 1rem; background: transparent; border: none; cursor: pointer; width: 2rem; height: 2rem; display: flex; justify-content: center; align-items: center; transition: background-color 0.2s ease-in-out; } .usb-drawer--close-icon.usb-button.button--utility--minimal:hover, .usb-drawer--close-icon.usb-button.button--utility--minimal:focus { background-color: rgb(255, 255, 255); } .usb-drawer--close-icon.usb-button.button--utility--minimal:hover span, .usb-drawer--close-icon.usb-button.button--utility--minimal:focus span { color: rgb(72, 72, 97); } .usb-drawer--body { background-color: rgb(255, 255, 255); line-height: 1.5; flex: 1; overflow-y: auto; padding: 0 2rem 2.5rem; } .usb-drawer--footer { overflow-y: inherit; min-height: 4.5rem; padding: 1rem 2rem; display: flex; align-items: center; justify-content: flex-end; background-color: rgb(241, 245, 251); gap: 0.75rem; flex-wrap: wrap; overflow-x: auto; } .usb-drawer--footer.scrollable { position: sticky; bottom: 0; z-index: 1; } .usb-drawer--footer .usb-button-group { height: 100%; display: flex; align-items: center; } .usb-drawer--footer.default .usb-button:first-child { margin-right: auto; } @media only screen and (max-width: 47.9375rem) { .usb-drawer--footer.default { flex-direction: column; align-items: stretch; flex-wrap: nowrap; } .usb-drawer--footer.default .usb-button, .usb-drawer--footer.default .usb-button-group { width: 100%; margin-bottom: 0.75rem; display: flex; flex-direction: column; align-items: stretch; } .usb-drawer--footer.default .usb-button:last-child, .usb-drawer--footer.default .usb-button-group:last-child { margin-bottom: 0; } } .usb-drawer--footer.stacked { flex-direction: column; align-items: stretch; flex-wrap: nowrap; } .usb-drawer--footer.stacked .usb-button { width: 100%; min-width: 0; } .usb-drawer--footer.stacked .usb-button:not(:last-child) { margin-bottom: 0.75rem; } .usb-drawer--footer.split { flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .usb-drawer--footer.split .usb-button { flex: 0 1 auto; min-width: 0; } .usb-drawer--footer.split .usb-button:nth-child(1), .usb-drawer--footer.split .usb-button:nth-child(2) { flex-basis: calc(50% - 0.5rem); width: calc(50% - 0.5rem); max-width: 300px; margin-bottom: 0; } .usb-drawer--footer.split .usb-button:nth-child(3) { flex-basis: 100%; width: 100%; margin-top: 0.75rem; } .usb-drawer.drawer-right .usb-drawer--dialog { right: 0; top: 0; bottom: 0; min-width: min(20rem, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh; animation-name: drawerOpenSlideFromRight; animation-duration: 0.5s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } .usb-drawer.drawer-left .usb-drawer--dialog { left: 0; top: 0; bottom: 0; min-width: min(20rem, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh; animation-name: drawerOpenSlideFromLeft; animation-duration: 0.5s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } .usb-drawer.drawer-bottom .usb-drawer--dialog { bottom: 0; left: 0; right: 0; min-height: 9rem; max-height: 100vh; width: 100vw; height: auto; animation-name: drawerOpenSlideFromBottom; animation-duration: 0.5s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } .usb-drawer.drawer-custom-size.drawer-bottom .usb-drawer--dialog { max-height: unset; } .usb-drawer.drawer-custom-size.drawer-right .usb-drawer--dialog, .usb-drawer.drawer-custom-size.drawer-left .usb-drawer--dialog { max-width: unset; } @media screen and (min-width: 42rem) { .usb-drawer.drawer-right .usb-drawer--dialog, .usb-drawer.drawer-left .usb-drawer--dialog { min-width: min(20rem, 100vw); max-width: 100vw; } .usb-drawer.drawer-bottom .usb-drawer--dialog { min-height: 9rem; max-height: 100vh; } } @media screen and (min-width: 66rem) { .usb-drawer.drawer-right .usb-drawer--dialog, .usb-drawer.drawer-left .usb-drawer--dialog { min-width: min(20rem, 100vw); max-width: 100vw; } .usb-drawer.drawer-bottom .usb-drawer--dialog { min-height: 9rem; max-height: 100vh; } } .usb-drawer.scroll-footer .usb-drawer--dialog { overflow: scroll; } .usb-drawer.scroll-footer .usb-drawer--dialog .usb-drawer--container { max-height: unset; border: none; } .usb-drawer.scroll-footer .usb-drawer--dialog .usb-drawer--container .usb-drawer--body { overflow-y: unset; } .usb-drawer.animation-drawer { animation-name: overlayDisappear; animation-duration: 0.5s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } .usb-drawer.animation-drawer.drawer-left .usb-drawer--dialog { animation-name: drawerCloseSlideToLeft; animation-duration: 0.5s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } .usb-drawer.animation-drawer.drawer-right .usb-drawer--dialog { animation-name: drawerCloseSlideToRight; animation-duration: 0.5s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } .usb-drawer.animation-drawer.drawer-bottom .usb-drawer--dialog { animation-name: drawerCloseSlideToBottom; animation-duration: 0.5s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } .usb-drawer.closing { pointer-events: none; } @keyframes overlayAppear { from { background-color: rgba(1, 1, 1, 0); opacity: 0; } to { background-color: rgba(1, 1, 1, 0.6); opacity: 1; } } @keyframes overlayDisappear { from { background-color: rgba(1, 1, 1, 0.6); opacity: 1; } to { background-color: rgba(1, 1, 1, 0); opacity: 0; } } @keyframes drawerOpenSlideFromLeft { from { transform: translateX(-100%); } to { transform: translateX(0%); } } @keyframes drawerOpenSlideFromRight { from { transform: translateX(100%); } to { transform: translateX(0%); } } @keyframes drawerOpenSlideFromBottom { from { transform: translateY(100%); } to { transform: translateY(0%); } } @keyframes drawerCloseSlideToLeft { from { transform: translateX(0%); } to { transform: translateX(-100%); } } @keyframes drawerCloseSlideToRight { from { transform: translateX(0%); } to { transform: translateX(100%); } } @keyframes drawerCloseSlideToBottom { from { transform: translateY(0%); } to { transform: translateY(100%); } } @media (prefers-reduced-motion: reduce) { .usb-drawer { animation-name: none !important; animation-duration: 0s !important; } .usb-drawer--overlay, .usb-drawer--dialog, .usb-drawer.animation-drawer, .usb-drawer.animation-drawer .usb-drawer--dialog { animation-name: none !important; animation-duration: 0s !important; transition: none !important; } } html.usb-drawer-prevent-scroll { overflow: hidden; } /* Screen reader to hide */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .usb-table { display: block; position: relative; width: 100%; } .usb-table .usb-table_dataType-currency { text-align: right; } .usb-table .usb-table_accessor-cell-expander, .usb-table .usb-table_accessor-showsubrows { padding-right: 0; padding-left: 0; } .usb-table .usb-table_accessor-cell-expander:focus-within, .usb-table .usb-table_accessor-showsubrows:focus-within { outline: none !important; } .usb-table .usb-table_accessor-cell-expander.isStacked, .usb-table .usb-table_accessor-showsubrows.isStacked { border-top: 1px solid rgb(205, 209, 226); border-radius: 0.25rem; border-top-color: transparent; } .usb-table .usb-table_accessor-header-of-expanded-cell { border-top: 1px solid rgb(205, 209, 226); border-radius: 0.25rem; } .usb-table .usb-dropdown { margin-bottom: 4.5rem; } .usb-table .usb-dropdown [aria-expanded=true] { z-index: 6; } .usb-table_heading { color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 500; font-size: 1.25rem; line-height: 1.25; margin-bottom: 0.75rem; } .usb-table_caption { color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; margin-bottom: 0.75rem; text-align: left; } .usb-table_pagination { display: flex; justify-content: flex-end; } .usb-table_pagination--container { display: flex; flex-direction: row; margin-top: 1rem; } .usb-table_pagination--container.usb-dropdown .dropdown__btn, .usb-table_pagination--container .dropdown__btn-selection { margin-right: 1.25rem; } .usb-table_pagination--container.usb-button, .usb-table_pagination--container .button--standard--minimal { display: flex; flex-direction: row; margin: 0 0.25rem 0 0.25rem; padding-top: 0.75rem; font-size: 1rem; font-weight: 700; background-color: rgb(255, 255, 255); color: rgb(72, 72, 97); } .usb-table_pagination--page_count { display: flex; flex-direction: row; flex-shrink: 0; padding-top: 0.75rem; padding-left: 1rem; padding-right: 0.75rem; } .usb-table_pagination--chevron { width: 0; } @media screen and (max-width: 47.9375rem) { .usb-table_pagination { justify-content: left; max-width: 100%; } .usb-table_pagination--container { flex-direction: column; } .usb-table_pagination--container .usb-dropdown { margin-bottom: 1rem; width: fit-content; } .usb-table_pagination--container nav span { padding-left: 0; } } .usb-table_container::before, .usb-table_container::after { transition: opacity 0.25s ease; content: ""; position: absolute; top: 0; bottom: 0; width: 20px; opacity: 0; } .usb-table_container::before { background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.25)); right: 0; } .usb-table_container::after { background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.25)); left: 0; } .usb-table_container-shadow { position: relative; } .usb-table_container-shadow--right::before { opacity: 1; z-index: 25; } .usb-table_container-shadow--left { opacity: 1; border-left: 1px solid rgb(205, 209, 226); border-radius: 0.5rem; z-index: 25; } .usb-table_container--scroll { overflow: auto; border-radius: 0.5rem; } .usb-table_table { border-collapse: separate; table-layout: auto; border: 1px solid rgb(205, 209, 226); border-radius: 0.5rem; } .usb-table_table.scroll-active { border-left: none; } .usb-table_table th, .usb-table_table td { border-right: 1px solid rgb(205, 209, 226); border-bottom: 1px solid rgb(205, 209, 226); } .usb-table_table th:last-of-type, .usb-table_table td:last-of-type { border-right: none; } .usb-table_table tr th:not(.isStacked):last-of-type { border-top-right-radius: 0.5rem; } .usb-table_table tr th.table-sticky-header-border { border-bottom-color: rgb(122, 122, 149); } .usb-table_table thead tr { border-top-right-radius: 0.5rem; border-top-left-radius: 0.5rem; } .usb-table_table thead tr th:first-of-type { border-top-left-radius: 0.5rem; } .usb-table_table:not(.stackable) tbody tr:last-child { border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } .usb-table_table:not(.stackable) tbody tr:last-child td:first-of-type { border-bottom-left-radius: 0.5rem; } .usb-table_table:not(.stackable) tbody tr:last-child td:last-of-type { border-bottom-right-radius: 0.5rem; } .usb-table_table.cell-size-small th, .usb-table_table.cell-size-small td { padding-top: 0.25rem; padding-bottom: 0.25rem; } .usb-table_table.cell-size-small th.table-editable-cell, .usb-table_table.cell-size-small td.table-editable-cell { padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; vertical-align: middle; } .usb-table_table.cell-size-large th, .usb-table_table.cell-size-large td { padding-top: 1.25rem; padding-bottom: 1.25rem; } .usb-table_table.cell-size-large th.table-editable-cell, .usb-table_table.cell-size-large td.table-editable-cell { padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; vertical-align: middle; } .usb-table_table.cell-size-default th, .usb-table_table.cell-size-default td { padding-top: 0.75rem; padding-bottom: 0.75rem; } .usb-table_table.cell-size-default th.table-editable-cell, .usb-table_table.cell-size-default td.table-editable-cell { padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; vertical-align: middle; } .usb-table_table.zebra-striped.scrollable .usb-table_body--zebra { background-color: rgb(241, 245, 251); } .usb-table_table.zebra-striped.scrollable .usb-table_body--subrow:nth-child(even) { background-color: rgb(241, 245, 251); } .usb-table_table.zebra-striped.scrollable.child-background-match-parent .usb-table_body--subrow { background-color: transparent; } .usb-table_table.zebra-striped.scrollable.child-background-match-parent .usb-table_body--subrowZebra { background-color: rgb(241, 245, 251); } .usb-table_table.alt-header .usb-table_header--row { background-color: rgb(0, 30, 121); } .usb-table_table.alt-header .usb-table_header--cell, .usb-table_table.alt-header .usb-table_header--sort-button { color: rgb(255, 255, 255); border-left: none; border-bottom: none; } .usb-table_table.alt-header .usb-table_header .usb-icon { fill: rgb(255, 255, 255); } .usb-table_table.alt-header.no-data .usb-table_header--row { background-color: rgb(72, 72, 97); } .usb-table_table.alt-header.stackable .usb-table_body--cell { background: linear-gradient(to left, rgb(0, 30, 121) 0%, rgb(0, 30, 121) 100%); background-repeat: no-repeat; background-size: 50%; } .usb-table_table.alt-header.stackable .usb-table_body--cell .stackable-header { padding-top: 0.5rem; color: rgb(255, 255, 255); } .usb-table_table.stackable { border: none; border-spacing: 0 1.5rem; margin-top: calc(-2 * 1.25rem); table-layout: auto; text-align: left; text-overflow: ellipsis; white-space: nowrap; width: 100%; word-wrap: break-word; } .usb-table_table.stackable .usb-table_header { display: none; } .usb-table_table.stackable .usb-table_body--row { font-weight: 400; line-height: 1.5; padding: 0.7em 2vw; border-bottom: 1px solid rgb(205, 209, 226); margin-top: 0.5rem; } .usb-table_table.stackable .usb-table_body--subrow { padding: 0; margin: 0.7em 2vw; } .usb-table_table.stackable .usb-table_body--cell { border-left: 1px solid rgb(205, 209, 226); border-right: 1px solid rgb(205, 209, 226); display: flex; flex-direction: row; justify-content: space-between; } .usb-table_table.stackable .usb-table_body--cell:focus-within { outline: 2px solid rgb(0, 88, 255) !important; outline-offset: -2px; } .usb-table_table.stackable .usb-table_body--cell:first-of-type { border-top: 1px solid rgb(205, 209, 226); border-left: 1px solid rgb(205, 209, 226); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } .usb-table_table.stackable .usb-table_body--cell:last-of-type { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } .usb-table_table.stackable .stackable-header { padding-top: 0.5rem; font-weight: 700; } .usb-table_table.stackable .stackable-header::before { content: attr(data-column-header); } .usb-table_table.stackable .stackable-cell { padding-left: 0.75rem; padding-top: 0.5rem; text-align: left; white-space: normal; width: 50%; } .usb-table_table.stackable .stackable-cell .usb--checkbox-label-text { margin-top: -2px; } .usb-table_table.stackable .remove-cell:nth-last-child(2) { display: flex; flex-direction: row; justify-content: space-between; } .usb-table_table.stackable .remove-cell:nth-last-child(1) { display: none; } .usb-table_table.stackable .stackable-expanded-cell { border-left: 1px solid rgb(205, 209, 226); border-right: 1px solid rgb(205, 209, 226); border-bottom: 1px solid rgb(205, 209, 226); } .usb-table_table.stackable .stackable-expanded-cell:focus { outline: 2px solid rgb(0, 88, 255); } .usb-table_table.stackable .stackable-cell-expander { display: grid; margin-left: auto; margin-right: auto; } .usb-table_table.stackable .stackable-cell-expand-button { margin-left: auto; margin-right: auto; font-size: 1rem; background: transparent; } .usb-table_table.stackable .stackable-cell-expand-button:focus { outline: 2px solid rgb(0, 88, 255); } .usb-table_table.stackable .stackable-cell-expand-text { color: rgb(72, 72, 97); font-weight: 700; vertical-align: top; margin-left: 0.5rem; } .usb-table_table.stackable .table-input-value { padding-left: 0; } .usb-table_table.no-borders:not(.stackable) { border-color: transparent; } .usb-table_table.no-borders:not(.stackable) th { border-left-color: transparent; border-right-color: transparent; } .usb-table_table.no-borders:not(.stackable) tr:first-child th { border-top-color: transparent; } .usb-table_table.no-borders:not(.stackable) td { border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; } .usb-table_table.row-borders-only { border-color: transparent; } .usb-table_table.row-borders-only th { border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; } .usb-table_table.row-borders-only tr:first-child th { border-top-color: transparent; } .usb-table_table.row-borders-only tr:last-child { border-bottom: 1px solid rgb(205, 209, 226); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .usb-table_table.row-borders-only td { border-right-color: transparent; border-left-color: transparent; } .usb-table_table.row-borders-only td:first-of-type { border-top-color: transparent; border-left-color: transparent; } .usb-table_table thead, .usb-table_table tbody, .usb-table_table tr { display: grid; grid-column: 1/-1; grid-template-columns: subgrid; } .usb-table_table td, .usb-table_table th { display: block; } .usb-table_header--cell { color: rgb(72, 72, 97); padding-left: 1.5rem; padding-right: 1.5rem; text-align: left; white-space: normal; word-wrap: normal; } .usb-table_header--cell.expanded-cell:nth-last-child(2) { border-right: none; border-top-right-radius: 0.5rem; } .usb-table_header--cell:focus-within { outline: 2px solid rgb(0, 88, 255); outline-offset: -2.25px; } .usb-table_header--cell:last-child { border-bottom: 1px solid rgb(205, 209, 226); } .usb-table_header--cell:last-child.expanded-cell { position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .no-data .usb-table_header tr { background-color: rgb(205, 209, 226); border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .usb-table_header--sort-button { background-color: transparent; border: none; color: rgb(72, 72, 97); font-family: inherit; font-size: 1rem; font-weight: 700; padding: 0; text-align: left; width: 100%; display: flex; justify-content: space-between; } .usb-table_header--sort-button:focus { outline: none; } .usb-table_header--sort-button .sort-icon { float: right; } .usb-table_header--sort-button .sort-icon--currency { margin-left: 0.75rem; } .usb-table_header--sort-button * { pointer-events: none; } .usb-table_body tr:last-of-type .usb-table_body--cell--expanded-cell:last-of-type { border-bottom: none; } .usb-table_body--cell { padding-right: 1.5rem; padding-left: 1.5rem; text-align: left; white-space: normal; word-wrap: break-word; } .usb-table_body--cell.reduce-cell:not(.isStacked):nth-last-child(2) { border-right: none; } .usb-table_body--cell--expanded-cell { grid-column-start: -1; grid-column-end: 1; padding: 1rem; border-bottom: 1px solid rgb(205, 209, 226); } .usb-table_body--cell--expanded-cell:focus { outline: none; } .usb-table_body--cell--expanded-cell:focus-within { outline: none !important; } .usb-table_body--cell:first-child.toggle-first { padding-left: 0; padding-right: 0; } .usb-table_body--cell:first-child.toggle-first:focus-within { outline: none !important; } .usb-table_body--cell.remove-cell:nth-last-child(2) { display: none; } .usb-table_body--cell.reduce-cell:last-child { display: none; } .usb-table_body--cell.table-row-checkbox-cell { padding-right: 0.75rem; padding-left: 0.75rem; } .usb-table_body--cell.stackable-table-row-checkbox-cell { background-color: rgb(241, 245, 251); } .usb-table .usb-table_header--row, .usb-table .usb-table_body--row { background-color: rgb(255, 255, 255); color: rgb(72, 72, 97); font-size: 1rem; font-weight: 400; line-height: 1.5; } .usb-table .usb-table_header--row:last-child, .usb-table .usb-table_body--row:last-child { border-bottom: none; } .usb-table .usb-table_header--row:last-child .usb-table_body--cell.not-stacked, .usb-table .usb-table_body--row:last-child .usb-table_body--cell.not-stacked { border-bottom: none; } .usb-table .usb-table_header--row:last-child .usb-table_body--cell.remove-cell, .usb-table .usb-table_body--row:last-child .usb-table_body--cell.remove-cell { border-bottom: 1px solid rgb(205, 209, 226); } .usb-table .child-cell-size-small .usb-table_body--subrow .usb-table_body--cell { padding-top: 0.25rem; padding-bottom: 0.25rem; } .usb-table .child-cell-size-large .usb-table_body--subrow .usb-table_body--cell { padding-top: 1.25rem; padding-bottom: 1.25rem; } .usb-table .child-cell-size-default .usb-table_body--subrow .usb-table_body--cell { padding-top: 0.75rem; padding-bottom: 0.75rem; } @media only screen and (min-width: 48rem) { .usb-table .usb-table_body--subrow_first { opacity: 0.999; box-shadow: inset 0 4px 6px -1px rgba(0, 0, 0, 0.12); } .usb-table .usb-table_body--subrow_last { opacity: 0.999; box-shadow: inset 0 -4px 6px -1px rgba(0, 0, 0, 0.12); } .usb-table .usb-table_body--subrow_first.usb-table_body--subrow_last { box-shadow: inset 0 4px 6px -1px rgba(0, 0, 0, 0.12), inset 0 -4px 6px -1px rgba(0, 0, 0, 0.12); } } .usb-table .usb-table_body--subrow_last td:first-of-type { border-bottom: 1px solid rgb(205, 209, 226); } .usb-table .no-data .usb-table_body tr { display: block; } .usb-table .no-data td { padding: 2rem; border-bottom: none; } .usb-table_no-data { display: flex; flex-direction: row; } .usb-table_no-data--container { display: flex; flex-direction: column; margin-top: 0.5rem; } .usb-table_no-data--title { color: rgb(0, 30, 121); font-size: 1.75rem; font-weight: 700; } .usb-table_no-data--text { display: flex; flex-direction: column; font-size: 1.25rem; margin-top: 1rem; white-space: pre-wrap; } .usb-table_no-data--button { margin-top: auto; margin-left: auto; } .usb-table table:focus, .usb-table table:focus-within { outline: none; } .usb-table table:focus td, .usb-table table:focus-within td { transition: outline-offset 0.2s linear; outline: none; } .usb-table table:focus td:focus-within, .usb-table table:focus-within td:focus-within { outline: 2px solid rgb(0, 88, 255); outline-offset: -2.25px; } .usb-table table:focus td[tabindex="0"].roleIsGrid, .usb-table table:focus-within td[tabindex="0"].roleIsGrid { outline: 2px solid rgb(0, 88, 255); outline-offset: -2.25px; } .usb-table table:focus td[tabindex="-1"].roleIsGrid, .usb-table table:focus-within td[tabindex="-1"].roleIsGrid { outline: 2px solid rgb(0, 88, 255); outline-offset: -2.25px; } .usb-table table:focus th, .usb-table table:focus-within th { transition: outline-offset 0.2s linear; } .usb-table table:focus th[tabindex="0"].roleIsGrid, .usb-table table:focus-within th[tabindex="0"].roleIsGrid { outline: 2px solid rgb(0, 88, 255); outline-offset: -2.25px; } .usb-table .usb--checkbox-wrapper.table-checkbox-label { margin-bottom: 0; flex-basis: 0; padding-left: 1.37rem; padding-top: 0.25rem; margin-left: -1.25rem; } .usb-table .usb--checkbox-wrapper.table-header-checkbox-label { margin-bottom: 0; flex-basis: 0; padding-left: 0.7rem; padding-top: 0.25rem; margin-left: 0; } .usb-table .usb--checkbox-label.table-checkbox-label { justify-content: center; } .usb-table .usb--checkbox-label.table-checkbox-label::after { content: ""; border: 2px solid transparent; border-radius: 0.25rem; position: absolute; left: 0.15rem; } .show-label .usb--checkbox-label { z-index: -10; } .table-pagination-nav { display: flex; flex: none; } .table-pagination-nav-list { display: flex; } .table-expander { padding: 0; font-size: 1rem; margin-left: 1rem; margin-right: 1rem; border: none; background-color: transparent; vertical-align: middle; height: 1.25rem; } .table-expander:focus { outline: 2px solid rgb(0, 88, 255); border-radius: 0.25rem; } .table-icon-hover:hover { color: rgb(0, 88, 255); fill: rgb(0, 88, 255); } .demo-action { align-self: flex-end; } .table-actions-row { display: flex; flex-flow: wrap; flex-direction: row; max-width: 100%; } .table-actions-row.toolbar-only { justify-content: start; } .table-actions-row.show-hide-modal-only { justify-content: start; } .table-actions-row.row-size-small { padding-top: 0.25rem; padding-bottom: 0.25rem; } .table-actions-row.row-size-large { padding-top: 1.25rem; padding-bottom: 1.25rem; } .table-actions-row.row-size-default { padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-actions-row.enable-dropdown-menu { justify-content: end; } .responsive-stacked .usb-table_table.zebra-striped tbody tr { background-color: transparent; } .responsive-stacked .table-actions-row { display: block; margin-bottom: 2rem; border: none; } .responsive-stacked .usb-table_table.stackable .usb-table_body--cell.table-row-checkbox-cell .stackable-header { display: none; } .responsive-stacked .usb-table_table.stackable .usb-table_body--cell.table-row-checkbox-cell .usb--checkbox-wrapper { padding-left: 1rem; padding-top: 0; } .responsive-stacked .usb-table_table.stackable .usb-table_body--cell.table-row-checkbox-cell .usb--checkbox-label span.usb--checkbox-label-text { display: inline; } .show-hide-modal.stackable-show-hide-button { width: 100%; } .show-hide-column-modal-text { font-size: 1rem; } .table-modal.usb--modal-v2--dialog, .table-modal .usb-modal-v2--container, .table-modal .usb-modal-v2--body, .table-modal .usb--checkbox--fieldset, .table-modal .usb--checkbox-group--legend { text-align: left; } .table-modal-text { font-size: 1rem; margin-bottom: 1rem; } .table-modal-button { border: transparent; border-radius: 0.25rem; } .table-modal-button.stackable-show-hide-button { width: 100%; } .table-modal-button.stackable-show-hide-button.usb-button.button--small { justify-content: start; border: transparent; border-radius: 0.25rem; z-index: 5; padding: 1.25rem 0.75rem; } .table-modal-button.stackable-show-hide-button.usb-button.button--small:hover { background-color: rgb(245, 245, 250); color: rgb(35, 90, 228); } .table-modal-button.stackable-show-hide-button.usb-button:focus { border-top: 1px solid rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); color: rgb(35, 90, 228); outline: 2px solid rgb(35, 90, 228); background-color: rgb(245, 245, 250); outline-offset: -0.15rem; border-top-left-radius: 0; border-top-right-radius: 0; } .table-modal-button.stackable-show-hide-button.usb-button::before { border: none; border-radius: 0; height: none; position: absolute; left: 0; top: 0; width: none; } .table-modal-button.enable-dropdown-menu.usb-button.button--small { margin: 0 0.75rem 0 0; width: 100%; border: transparent; border-radius: 0.25rem; justify-content: start; z-index: 5; } .table-modal-button-text { vertical-align: top; font-weight: 500; } .table-modal-button-text.stackable-show-hide-button { font-weight: 400; } .table-selected-rows-label { display: flex; font-size: 1rem; flex-direction: column; justify-content: center; margin: 0.75rem 0.75rem 0 0; white-space: nowrap; } .stackable-selected-rows-label { margin-bottom: 1rem; text-align: right; } .table-toolbar { display: block; } .table-toolbar .usb-button-group { display: flex; flex-direction: row; flex-wrap: wrap; } .table-toolbar .usb-button-group.stackable-table-toolbar-button-group { margin-left: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; justify-content: center; } .table-toolbar .usb-button-group .usb-button.button--small { margin: 0.75rem 0.75rem 0 0; } .table-toolbar .usb-button-group .usb-button.button--small.stackable-table-button { width: 100%; margin-top: 0.5rem; margin-right: 0; } .table-row-checkbox { border-bottom: 1px solid rgb(205, 209, 226); } .table-row-checkbox:focus-within { outline: 2px solid rgb(0, 88, 255) !important; outline-offset: -2px; } .table-input-display { display: flex; flex-direction: column; justify-content: center; height: 100%; } .table-input-button { display: flex; justify-content: space-between; width: 100%; background-color: transparent; border: none; outline: none; color: rgb(0, 88, 255); padding-right: 0; padding-left: 0; } .table-input-value { padding-left: 1.5rem; padding-top: 0.15rem; font-size: 1rem; text-align: left; } .table-input-icon { padding-right: 1.5rem; padding-left: 0.5rem; } .table-text-input { margin-top: 0; padding-top: 0; padding-left: 0.5rem; padding-right: 0.5rem; min-height: 0; border: none; } .table-text-input input { padding: 0.5rem 1rem; padding-left: 15px; padding-bottom: 6px; color: rgb(45, 45, 62); border: 1px solid rgb(205, 209, 226); border-radius: 0.25rem; width: 100%; } .table-text-input.is-error { margin: 0.5rem 0; } .table-text-input.is-error input { border: 2px solid rgb(207, 42, 54); } .table-expanded-menu { z-index: 30; } .table-toolbar-button-group { padding-left: 0; } .table-toolbar-menu.usb-action__button-utility:hover, .table-toolbar-menu .usb-action__link-utility:hover { background-color: rgb(76, 76, 80); } .table-toolbar-menu.usb-menu-composable__trigger { min-width: unset !important; max-height: 2rem; font-size: 0.875rem; } .table-toolbar-menu.usb-menu-composable__trigger .usb-action__text .usb-menu-composable__menu-btn__label { font-weight: 500; } .table-toolbar-menu.usb-menu-composable__trigger .usb-action__icon { margin-top: 3px; } .table-toolbar-menu.usb-menu-composable__trigger.stackable-table-button { width: 100%; margin-top: 0; justify-content: start; border: transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .table-toolbar-menu.usb-action:focus::before { outline: 2px solid rgb(0, 88, 255); outline-offset: -2px !important; height: calc(100% + 0.75rem) !important; width: calc(100% + 0.75rem) !important; left: -6px !important; top: -6px !important; } .table-toolbar-menu.usb-action__button-utility-medium { min-height: 2rem; margin: 0.75rem 0.75rem 0 0; } .table-toolbar-row { display: flex; flex-wrap: wrap-reverse; } .stackable-toolbar-row { display: flex; flex-wrap: wrap-reverse; } .stackable-table-menu { display: block; width: 100%; } .stackable-table-menu .usb-menu-composable__container.expanded { width: 100%; } .table-sticky-header { position: sticky; top: 0; z-index: 10; background-color: rgb(255, 255, 255); border-top-right-radius: 0.5rem; border-top-left-radius: 0.5rem; } .table-sticky-first-column { position: sticky; top: 0; left: 0; z-index: 5; background-color: rgb(255, 255, 255); } .table-sticky-first-column.table-sticky-row-header-shadow::after { content: ""; position: absolute; top: 0; right: -20px; width: 20px; height: 100%; background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)); } .table-sticky-row { position: sticky; left: 0; z-index: 5; background-color: rgb(255, 255, 255); } .table-sticky-row.table-sticky-row-header-shadow::after { content: ""; position: absolute; top: 0; right: -20px; width: 20px; height: 100%; background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)); } .batch-actions-mobile-button { width: 100%; background: rgba(0, 0, 0, 0); border: rgb(205, 209, 226) solid 1px; border-radius: 0.25rem; color: rgb(99, 99, 127); padding: 0.5rem 0.75rem; margin-bottom: 0.25rem; text-align: left; } .batch-actions-mobile-button:focus { outline: 3px solid rgb(35, 90, 228); outline-offset: -0.2rem; } .batch-actions-mobile-button-row { display: flex; justify-content: space-between; } .batch-actions-mobile-actions-text { margin: auto 0; color: rgb(45, 45, 62); font-size: 0.875rem; font-family: Circular-USB, Arial, Helvetica, sans-serif; } .table-mobile-button { width: 100%; } .table-mobile-button.usb-button.button--utility--subtle { border: transparent; border-radius: 0.25rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0; color: rgb(72, 72, 97); padding: 1.25rem 0.75rem; justify-content: start; font-weight: 400; border-bottom: 1px solid rgb(205, 209, 226); } .table-mobile-button.usb-button.button--utility--subtle:hover { background-color: rgb(241, 245, 251); color: rgb(35, 90, 228); } .table-mobile-button.usb-button.button--utility--subtle.usb-button:focus { border-top: 1px solid rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); color: rgb(35, 90, 228); outline: 2px solid rgb(35, 90, 228); background-color: rgb(245, 245, 250); outline-offset: -0.15rem; border-top-left-radius: 0; border-top-right-radius: 0; } .table-mobile-button.usb-button.button--utility--subtle.usb-button::before { border: none; border-radius: 0; height: none; position: absolute; left: 0; top: 0; width: none; } .table-mobile-expand-panel { position: absolute; top: 3.75rem; z-index: 50; width: 100%; background-color: rgb(255, 255, 255); border: 1px solid rgb(205, 209, 226); border-radius: 0.25rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.12); } .usb-progress-card--card { width: auto; padding: 0; border-radius: 0.25rem; border: 1px solid #D1DCF6; margin: 0; background-color: rgb(255, 255, 255); display: flex; flex-direction: column; overflow: hidden; } .usb-progress-card--content { color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 0.875rem; line-height: 1.5; padding: 1.5rem; } .usb-progress-card--footer { margin: -1.5rem; margin-top: 1rem; border-radius: 0 0 0.25rem 0.25rem; background-color: rgb(241, 245, 251); display: flex; justify-content: flex-end; } .usb-progress-card--footer .usb-button, .usb-progress-card--footer .usb-button.button--default, .usb-progress-card--footer .usb-button.button--text { margin-top: 1rem; margin-bottom: 1rem; } .usb-progress-card .usb-progress-indicator { margin: 0; } .usb-progress-card .usb-progress-indicator .usb-progress-indicator__steps { display: none; } .usb-progress-card .usb-progress-indicator .usb-progress-indicator__bar { height: 5px !important; } .usb-progress-card .usb-progress-indicator .usb-progress-indicator__percentage { display: none !important; } .usb-list { list-style: none !important; display: flex; flex-direction: column; justify-content: space-between; align-content: center; margin-right: 1rem; } .usb-list li { display: flex; align-content: center; max-width: 32%; min-width: 32%; margin: 0.25rem; margin-left: 0; } .usb-list li .usb-icon { margin-right: 0.75rem; } h2 { color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 500; font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; } .usb-link { background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit; position: relative; display: inline-flex; gap: 0.5rem; cursor: pointer; align-items: center; } .usb-link, .usb-link * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; -webkit-focus-ring-color: rgba(0, 0, 0, 0) !important; -webkit-tap-highlight-color: transparent !important; -webkit-focus-ring-color: transparent !important; } .usb-link > span.usb-link_icon, .usb-link span.usb-icon { max-width: 1.25rem !important; max-height: 1.25rem !important; } .usb-link > span.usb-link_icon svg, .usb-link span.usb-icon svg { max-width: 1.25rem !important; max-height: 1.25rem !important; } .usb-link:not(:is(a, button))[aria-disabled=true], .usb-link:not(:is(a, button)).is-underlined[aria-disabled=true] { color: rgb(72, 72, 97) !important; font-size: inherit; font-weight: unset !important; text-decoration: none !important; pointer-events: none; } .usb-link:not(:is(a, button))[aria-disabled=true] .svg-icon, .usb-link:not(:is(a, button)).is-underlined[aria-disabled=true] .svg-icon { fill: rgb(72, 72, 97) !important; } .usb-link:is(button):disabled, .usb-link:is(button).is-underlined:disabled { color: rgb(72, 72, 97) !important; text-decoration: none !important; cursor: not-allowed; } .usb-link:is(button):disabled .svg-icon, .usb-link:is(button).is-underlined:disabled .svg-icon { fill: rgb(72, 72, 97) !important; } .usb-link:is(button):disabled:hover, .usb-link:is(button).is-underlined:disabled:hover { text-decoration: none !important; } .usb-link.cta-style_utility, .usb-link.is-utility-style { color: rgb(72, 72, 97) !important; } .usb-link.cta-style_utility .svg-icon, .usb-link.is-utility-style .svg-icon { fill: rgb(72, 72, 97) !important; } .usb-link.cta-style_highlight, .usb-link.is-highlight-style { color: rgb(207, 42, 54) !important; } .usb-link.cta-style_highlight .svg-icon, .usb-link.is-highlight-style .svg-icon { fill: rgb(207, 42, 54) !important; } .usb-link.emphasis_heavy, .usb-link.emphasis_subtle, .usb-link.is-underlined { text-decoration: underline !important; } .usb-link.emphasis_heavy:hover, .usb-link.emphasis_subtle:hover, .usb-link.is-underlined:hover { text-decoration: none !important; } .usb-link.emphasis_minimal, .usb-link.is-not-underlined { text-decoration: none !important; } .usb-link.emphasis_minimal:hover, .usb-link.is-not-underlined:hover { text-decoration: underline !important; } .usb-link.size_medium, .usb-link.is-size-medium { font-size: 1rem !important; } .usb-link.size_small, .usb-link.is-size-small { font-size: 0.875rem !important; } .usb-link.reverse-contrast, .usb-link.is-reverse-contrast { color: rgb(255, 255, 255) !important; } .usb-link.reverse-contrast .svg-icon, .usb-link.is-reverse-contrast .svg-icon { fill: rgb(255, 255, 255) !important; background-color: rgb(0, 30, 121) !important; } .usb-link:focus { outline: none; } .usb-link:focus::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; content: ""; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); } .usb-link.light:focus::before { border-color: rgb(255, 255, 255); } .usb-link.basic { color: rgb(35, 90, 228); font-size: inherit; font-weight: 500; line-height: 1.25; letter-spacing: normal; font-family: Circular-USB, Arial, Helvetica, sans-serif; text-decoration: underline; } .usb-link.basic .svg-icon { fill: rgb(35, 90, 228); } .usb-link.basic:hover { text-decoration: none; } .usb-link.basic.light { color: rgb(255, 255, 255); } @media (hover: none) and (pointer: coarse) { .usb-link.basic { text-decoration: underline; } .usb-link.basic:hover { text-decoration: underline; } } .usb-link.inline { color: rgb(35, 90, 228); font-size: inherit; font-weight: inherit; font-family: inherit; text-decoration: underline; } .usb-link.inline:hover { text-decoration: none; } .usb-link.inline.light { color: rgb(255, 255, 255); } @media (hover: none) and (pointer: coarse) { .usb-link.inline { text-decoration: underline; } .usb-link.inline:hover { text-decoration: underline; } } .usb-link.inline.default-no-underline { text-decoration: none; } @media (hover: none) and (pointer: coarse) { .usb-link.inline.default-no-underline { text-decoration: none; } .usb-link.inline.default-no-underline:hover { text-decoration: none; } } .usb-link.inline.default-no-underline:hover, .usb-link.inline.default-no-underline:focus { text-decoration: underline; } .usb-link.subtle { color: rgb(72, 72, 97); font-size: 0.75rem; font-weight: 500; line-height: 1.25; letter-spacing: normal; font-family: Circular-USB, Arial, Helvetica, sans-serif; text-decoration: underline; } .usb-link.subtle:hover { text-decoration: none; } .usb-link.subtle.light { color: rgb(255, 255, 255); } @media (hover: none) and (pointer: coarse) { .usb-link.subtle { text-decoration: underline; } .usb-link.subtle:hover { text-decoration: underline; } } .usb-link.arrow { display: inline-flex; align-items: center; font-size: 16px; font-weight: 500; line-height: 1.25; letter-spacing: normal; font-family: Circular-USB, Arial, Helvetica, sans-serif; } .usb-link.arrow:focus::before { height: calc(100% + 0.5rem); width: calc(100% + 0.75rem); } .usb-link.arrow, .usb-link.arrow > a { color: rgb(35, 90, 228); text-decoration: none; cursor: pointer; } .usb-link.arrow:hover, .usb-link.arrow > a:hover { text-decoration: underline; } @media (hover: none) and (pointer: coarse) { .usb-link.arrow, .usb-link.arrow > a { text-decoration: none; } .usb-link.arrow:hover, .usb-link.arrow > a:hover { text-decoration: none; } } .usb-link.arrow .usb-icon { display: inline-flex; align-items: center; margin-left: 0.25rem; } .usb-link.arrow svg { width: 1.25rem; height: 1.25rem; fill: rgb(35, 90, 228); } .usb-link.arrow.light, .usb-link.arrow.light > a { color: rgb(255, 255, 255); } .usb-link.arrow.light svg, .usb-link.arrow.light svg circle, .usb-link.arrow.light svg ellipse, .usb-link.arrow.light svg g, .usb-link.arrow.light svg path { fill: rgb(255, 255, 255); } .usb-link.arrow.default-underlined { text-decoration: underline; } @media (hover: none) and (pointer: coarse) { .usb-link.arrow.default-underlined { text-decoration: underline; } .usb-link.arrow.default-underlined:hover { text-decoration: none; } } .usb-link.arrow.default-underlined:hover { text-decoration: none; } .usb-link.back { display: inline-flex; align-items: center; font-size: inherit; font-weight: 500; line-height: 1.25; } .usb-link.back:focus::before { height: calc(100% + 0.5rem); width: calc(100% + 1rem); } .usb-link.back, .usb-link.back > a { color: rgb(35, 90, 228); text-decoration: none; } .usb-link.back:hover, .usb-link.back > a:hover { text-decoration: underline; } @media (hover: none) and (pointer: coarse) { .usb-link.back, .usb-link.back > a { text-decoration: none; } .usb-link.back:hover, .usb-link.back > a:hover { text-decoration: none; } } .usb-link.back .usb-icon { display: inline-flex; align-items: center; margin-right: 0.25rem; } .usb-link.back svg { width: 1.25rem; height: 1.25rem; fill: rgb(35, 90, 228); } .usb-link.back.light, .usb-link.back.light > a { color: rgb(255, 255, 255); } .usb-link.back.light svg, .usb-link.back.light svg circle, .usb-link.back.light svg ellipse, .usb-link.back.light svg g, .usb-link.back.light svg path { fill: rgb(255, 255, 255); } .usb-link.back.default-underlined { text-decoration: underline; } @media (hover: none) and (pointer: coarse) { .usb-link.back.default-underlined { text-decoration: underline; } .usb-link.back.default-underlined:hover { text-decoration: none; } } .usb-link.back.default-underlined:hover { text-decoration: none; } .usb-progress-indicator { position: relative; padding: 2.25rem 0 3.25rem; } .usb-progress-indicator--percentage_variant { padding-bottom: 2.25rem; } .usb-progress-indicator__percentage { text-align: center; top: 0.75rem; position: relative; display: block; color: rgb(99, 99, 127); text-decoration: none; font-size: 0.75rem; line-height: 1.5; font-weight: 400; } .usb-progress-indicator__steps { display: flex; flex-wrap: nowrap; position: relative; list-style-type: none; } .usb-progress-indicator__steps li { position: relative; height: 0.25rem; flex: 1 0 0; background-color: rgb(205, 209, 226); line-height: 1.5; } .usb-progress-indicator__steps li.active:after { background-color: rgb(35, 90, 228); border-color: rgb(35, 90, 228); z-index: 1; } .usb-progress-indicator__steps li.active a:hover, .usb-progress-indicator__steps li.active span.usb-link:hover { text-decoration: underline; color: rgb(35, 90, 228); } .usb-progress-indicator__steps li.completed:after { background-color: rgb(35, 90, 228); z-index: 2; } .usb-progress-indicator__steps li.completed a:hover, .usb-progress-indicator__steps li.completed span.usb-link:hover { text-decoration: underline; color: rgb(35, 90, 228); } .usb-progress-indicator__steps li.inactive a, .usb-progress-indicator__steps li.inactive span.usb-link.emphasis_subtle span { text-decoration: underline; pointer-events: auto; } .usb-progress-indicator__steps li.inactive a:hover, .usb-progress-indicator__steps li.inactive span.usb-link.emphasis_subtle span:hover { cursor: not-allowed; text-decoration: none; } .usb-progress-indicator__steps li.inactive button.usb-link span { text-decoration: underline; } .usb-progress-indicator__steps li.inactive button.usb-link span:hover { cursor: not-allowed; text-decoration: none; } .usb-progress-indicator__steps li button.usb-link { top: calc(50% - 9px + 15px); } .usb-progress-indicator__steps li a, .usb-progress-indicator__steps li span.usb-link { position: relative; text-align: center; top: calc(50% - 9px + 15px); color: rgb(99, 99, 127); text-decoration: none; font-size: 0.75rem; line-height: 1.5; font-weight: 400; letter-spacing: 0.02em; } .usb-progress-indicator__steps li a span.sr-only, .usb-progress-indicator__steps li span.usb-link span.sr-only { position: absolute; } .usb-progress-indicator__steps li:after { position: absolute; left: 0; top: 50%; margin-left: -4px; transform: translateY(-50%); content: ""; height: 0.75rem; width: 0.75rem; border: 2px solid rgb(241, 245, 251); border-radius: 50%; background-color: rgb(205, 209, 226); z-index: 1; } .usb-progress-indicator__steps li:last-of-type { background-color: transparent; width: 0 !important; flex: 0 0 auto; } .usb-progress-indicator__steps li:last-of-type a { left: -1.5rem !important; width: 36.57px !important; } .usb-progress-indicator__steps--percentage li:after { display: none; } .usb-progress-indicator__steps--percentage li:first-of-type:after, .usb-progress-indicator__steps--percentage li:last-of-type:after { display: inline; } .usb-progress-indicator__steps--percentage li.inactive { background-color: rgb(205, 209, 226); } .usb-progress-indicator__bar { position: absolute; height: 0.25rem; z-index: 1; width: 100%; overflow: hidden; } .usb-progress-indicator__bar::-moz-progress-bar { position: relative; padding-left: 0.25rem; padding-bottom: var(--value); background-color: rgb(35, 90, 228); height: 0; transform-origin: 0 0; transform: rotate(-90deg) translateX(-0.25rem); transition: padding-bottom 0.4s ease-in-out; z-index: 2; } .usb-progress-indicator progress[value] { /* Reset the default appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; background: rgb(205, 209, 226); /* Get rid of default border in Firefox. */ border: none; /* For IE10 */ color: rgb(35, 90, 228); } .usb-progress-indicator progress[value]::-webkit-progress-value { background: rgb(35, 90, 228); transition: 0.4s width ease-in-out; } .usb-progress-indicator progress[value]::-webkit-progress-bar { background: rgb(205, 209, 226); } .usb-button.button--disabled { background: none !important; color: rgb(122, 122, 149) !important; border: 1px solid rgb(205, 209, 226) !important; cursor: pointer !important; } .usb-button.button--disabled:hover, .usb-button.button--disabled:active { background: none; color: rgb(122, 122, 149); } .usb-button.button--disabled svg { fill: rgb(99, 99, 127); color: rgb(102, 102, 106); } /* For stand alone checkboxes without a bottom margin. Sibling of: .usb--checkbox-wrapper */ .edm-checkbox { margin-bottom: 0; /* For checkboxes that support the indeterminate. Sibling of: .usb--checkbox-wrapper */ } .edm-checkbox.tri-state-checkbox { flex: none; } .edm-checkbox.tri-state-checkbox .usb--checkbox-input:indeterminate + label .usb--checkbox-svg svg { border-width: 0; background: rgb(35, 90, 228); fill: rgb(255, 255, 255); } .edm-checkbox.tri-state-checkbox:hover .usb--checkbox-input:indeterminate:active + label .usb--checkbox-svg svg { border-width: 0; background: rgba(255, 255, 255, 0.78); } .edm-checkbox.tri-state-checkbox:hover .usb--checkbox-input:indeterminate + label .usb--checkbox-svg svg { border-width: 0; background: rgb(0, 60, 200); fill: rgb(255, 255, 255); } .usb-notification .usb-button--close-btn:active { background: transparent; } @media (hover: none) and (pointer: coarse) { .edm-document-upload .usb-button.button--loud .svg-icon { color: rgb(255, 255, 255); } } @media (hover: none) and (pointer: coarse) { .edm-document-upload .usb-button.button--primary .svg-icon { color: rgb(255, 255, 255); } } @media (hover: none) and (pointer: coarse) { .edm-document-upload .usb-button.button--secondary .svg-icon { color: rgb(35, 90, 228); } } @media (hover: none) and (pointer: coarse) { .edm-document-upload .usb-button.button--utility .svg-icon { color: rgb(72, 72, 97); } } @media (hover: none) and (pointer: coarse) { .edm-document-upload .usb-button.button--text .svg-icon { color: rgb(35, 90, 228); } } @media (hover: none) and (pointer: coarse) { .edm-document-upload .usb-button.button--disabled .svg-icon { color: rgb(99, 99, 127); } } .usb-accumulator .usb-combobox-container .usb-combobox-list-item .usb--checkbox-wrapper { width: 100%; } .edm-side-modal.slide-in-enter .edm-side-modal__overlay { background-color: rgba(1, 1, 1, 0); } .edm-side-modal.slide-in-enter .edm-side-modal__dialog { transform: translateX(100%); } .edm-side-modal.slide-in-enter-active .edm-side-modal__overlay { background-color: rgba(1, 1, 1, 0.6); transition: background-color 300ms; } .edm-side-modal.slide-in-enter-active .edm-side-modal__dialog { transform: translateX(0); transition: transform 300ms; } .edm-side-modal.slide-in-exit .edm-side-modal__overlay { background-color: rgba(1, 1, 1, 0.6); } .edm-side-modal.slide-in-exit-active .edm-side-modal__overlay { background-color: rgba(1, 1, 1, 0); transition: background-color 300ms; } .edm-side-modal.slide-in-exit-active .edm-side-modal__dialog { transform: translateX(100%); transition: transform 300ms; } .edm-side-modal__overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9990; background-color: rgba(1, 1, 1, 0.6); display: flex; justify-content: flex-end; align-items: flex-start; } .edm-side-modal__dialog { max-width: 100vw; max-height: 100vh; position: relative; width: 100vw; z-index: 9990; } @media only screen and (min-width: 20rem) { .edm-side-modal__dialog { height: auto; width: 100vw; } } @media only screen and (min-width: 30rem) { .edm-side-modal__dialog { height: auto; width: 480px; } } @media only screen and (min-width: 42rem) { .edm-side-modal__dialog { height: auto; width: 560px; } } @media only screen and (min-width: 66rem) { .edm-side-modal__dialog { height: auto; width: 896px; } } @media only screen and (min-width: 84rem) { .edm-side-modal__dialog { height: auto; width: 1056px; } } @media only screen and (min-width: 102rem) { .edm-side-modal__dialog { height: auto; width: 1088px; } } @media only screen and (min-width: 120rem) { .edm-side-modal__dialog { height: auto; width: 1136px; } } .edm-side-modal__container { display: flex; flex-direction: column; align-content: center; justify-content: flex-start; font-family: Circular-USB, Arial, Helvetica, sans-serif; height: 100%; min-height: 100%; width: 100%; max-width: 100vw; min-width: 30vw; position: relative; opacity: 1; border-radius: 0; } @media only screen and (min-width: 42rem) { .edm-side-modal__container { border-radius: 0.5rem 0 0 0.5rem; } } .edm-side-modal__close { display: flex; justify-content: flex-end; border-radius: 0; } @media only screen and (min-width: 42rem) { .edm-side-modal__close { border-radius: 0.5rem 0 0 0; } } .edm-side-modal__close .usb-button { top: 1rem !important; right: 1rem !important; } .edm-side-modal__close .usb-button:active { background: transparent; } .edm-side-modal__close .usb-button svg { color: rgb(72, 72, 97); } .edm-side-modal__header { display: flex; flex-direction: column; gap: 1rem; flex-shrink: 0; justify-content: space-between; width: 100%; padding: 0.5rem 0 1rem 1rem; } @media screen and (min-width: 42rem) { .edm-side-modal__header { padding: 0.5rem 0 1.5rem 2.5rem; } } .edm-side-modal__header_title_wrapper { float: left; margin: 0; text-transform: none; font-size: 1.25rem !important; line-height: 1.5 !important; color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 500; font-size: 1.5rem; line-height: 1.25; } .edm-side-modal__header_title_wrapper p { color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; } @media screen and (min-width: 42rem) { .edm-side-modal__header_title_wrapper { font-size: 1.25rem; line-height: 1.5; } } .edm-side-modal__header_subtitle_wrapper { font-size: 16px; font-weight: 400; color: rgb(76, 76, 80); line-height: 1.6; } .edm-side-modal__header .dialog-header { margin: 0 0 1rem 0; font-weight: 500; font-size: 100%; } .edm-side-modal__header .dialog-sub-header { font-size: 1rem; font-weight: 500; color: rgb(72, 72, 97); } .edm-side-modal__body { display: flex; flex-direction: column; -ms-overflow-style: -ms-autohiding-scrollbar; overflow-y: auto; height: 100vh; } .edm-side-modal__body--no-footer { border-radius: 0; } @media only screen and (min-width: 42rem) { .edm-side-modal__body--no-footer { border-radius: 0 0 0 0.5rem; } } .edm-side-modal__footer { border-radius: 0; display: flex; justify-content: flex-end; align-self: flex-end; margin-top: auto; width: 100%; } @media only screen and (min-width: 42rem) { .edm-side-modal__footer { border-radius: 0 0 0 0.5rem; } } .edm-side-modal__footer .usb-button-group { padding: 1.5rem 1rem; width: 100%; } .edm-side-modal__footer .usb-button-group .usb-button { margin: 0.5rem 0 0.5rem; } @media screen and (min-width: 42rem) { .edm-side-modal__footer .usb-button-group { padding: 0 2.5rem; flex-direction: row-reverse; } .edm-side-modal__footer .usb-button-group .usb-button { margin: 1rem 0 1rem 0.75rem; } .edm-side-modal__footer .usb-button-group .usb-button:nth-child(3) { margin-left: 0; margin-right: auto; } } .edm-side-modal.edm-side-modal--default .edm-side-modal__container { background-color: rgb(255, 255, 255); } .edm-side-modal.edm-side-modal--default .edm-side-modal__close { background-color: rgb(235, 239, 246); } .edm-side-modal.edm-side-modal--default .edm-side-modal__close .usb-button:hover { background: rgb(235, 239, 246); } .edm-side-modal.edm-side-modal--default .edm-side-modal__header { background-color: rgb(235, 239, 246); } .edm-side-modal.edm-side-modal--default .edm-side-modal__body { background-color: rgb(255, 255, 255); } .edm-side-modal.edm-side-modal--default .edm-side-modal__footer { background-color: rgb(235, 239, 246); } .edm-side-modal.edm-side-modal--primary .edm-side-modal__container { background-color: rgb(255, 255, 255); } .edm-side-modal.edm-side-modal--primary .edm-side-modal__close { background-color: rgb(255, 255, 255); } .edm-side-modal.edm-side-modal--primary .edm-side-modal__close .usb-button:hover { background: rgb(255, 255, 255); } .edm-side-modal.edm-side-modal--primary .edm-side-modal__header { background-color: rgb(255, 255, 255); } .edm-side-modal.edm-side-modal--primary .edm-side-modal__body { background-color: rgb(255, 255, 255); } .edm-side-modal.edm-side-modal--primary .edm-side-modal__footer { background-color: rgb(255, 255, 255); } .edm-side-modal.edm-side-modal--tertiary .edm-side-modal__container { background-color: rgb(235, 239, 246); } .edm-side-modal.edm-side-modal--tertiary .edm-side-modal__close { background-color: rgb(235, 239, 246); } .edm-side-modal.edm-side-modal--tertiary .edm-side-modal__close .usb-button:hover { background: rgb(235, 239, 246); } .edm-side-modal.edm-side-modal--tertiary .edm-side-modal__header { background-color: rgb(235, 239, 246); } .edm-side-modal.edm-side-modal--tertiary .edm-side-modal__body { background-color: rgb(235, 239, 246); } .edm-side-modal.edm-side-modal--tertiary .edm-side-modal__footer { background-color: rgb(235, 239, 246); } .edm-side-modal.edm-side-modal--quaternary .edm-side-modal__container { background-color: rgb(241, 245, 251); } .edm-side-modal.edm-side-modal--quaternary .edm-side-modal__close { background-color: rgb(238, 246, 255); } .edm-side-modal.edm-side-modal--quaternary .edm-side-modal__close .usb-button:hover { background: rgb(238, 246, 255); } .edm-side-modal.edm-side-modal--quaternary .edm-side-modal__header { background-color: rgb(238, 246, 255); } .edm-side-modal.edm-side-modal--quaternary .edm-side-modal__body { background-color: rgb(255, 255, 255); } .edm-side-modal.edm-side-modal--quaternary .edm-side-modal__footer { background-color: rgb(235, 239, 246); } .prevent-scroll { touch-action: none; -webkit-overflow-scrolling: none; overflow: hidden; /* Other browsers */ overscroll-behavior: none; } .edm-micro-modal__overlay { z-index: 1; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: transparent; transition: all 0.25s ease-in-out 0; cursor: not-allowed; } .edm-micro-modal { position: relative; } .edm-micro-modal__container-overlay { z-index: 1; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 10px; background-color: rgba(0, 0, 0, 0.4); overflow: hidden; } .edm-micro-modal__container { display: flex; justify-content: center; margin-top: -180px; opacity: 0; } .edm-micro-modal__container.is-active { transition: all 0.35s ease 0.1s; margin-top: 0; opacity: 1; } .edm-micro-modal__container.modal_container_condensed { height: 100%; } .edm-micro-modal__content { flex-direction: row; align-items: center; border-radius: 0 0 8px 8px; background-color: #ffffff; box-shadow: 0 16px 24px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.3); } .edm-micro-modal__content_condensed { flex: 1; height: calc(100% - 0.75rem); margin: 0 1.5rem; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; border-radius: 0 0 8px 8px; background-color: #ffffff; box-shadow: 0 16px 24px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.3); } @media screen and (min-width: 42rem) { .edm-micro-modal__content_condensed { flex-direction: row; margin: 0 2.5rem; } } .edm-micro-modal__title { margin: 1.5rem; margin-bottom: 0; font-weight: 400; } .edm-micro-modal__title.modal_title_condensed { margin: 0.25rem; flex: 1; } .edm-micro-modal__footer { display: flex; justify-content: center; } .edm-micro-modal__footer .modalButtonSmall { margin: 1rem 0.5rem; } .usb-button.button--disabled { background: none !important; color: rgb(122, 122, 149) !important; border: 1px solid rgb(205, 209, 226) !important; cursor: pointer !important; } .usb-button.button--disabled:hover, .usb-button.button--disabled:active { background: none; color: rgb(122, 122, 149); } .usb-button.button--disabled svg { fill: rgb(99, 99, 127); color: rgb(102, 102, 106); } /* For stand alone checkboxes without a bottom margin. Sibling of: .usb--checkbox-wrapper */ .edm-checkbox { margin-bottom: 0; /* For checkboxes that support the indeterminate. Sibling of: .usb--checkbox-wrapper */ } .edm-checkbox.tri-state-checkbox { flex: none; } .edm-checkbox.tri-state-checkbox .usb--checkbox-input:indeterminate + label .usb--checkbox-svg svg { border-width: 0; background: rgb(35, 90, 228); fill: rgb(255, 255, 255); } .edm-checkbox.tri-state-checkbox:hover .usb--checkbox-input:indeterminate:active + label .usb--checkbox-svg svg { border-width: 0; background: rgba(255, 255, 255, 0.78); } .edm-checkbox.tri-state-checkbox:hover .usb--checkbox-input:indeterminate + label .usb--checkbox-svg svg { border-width: 0; background: rgb(0, 60, 200); fill: rgb(255, 255, 255); } .usb-notification .usb-button--close-btn:active { background: transparent; } @media (hover: none) and (pointer: coarse) { .edm-document-upload .usb-button.button--loud .svg-icon { color: rgb(255, 255, 255); } } @media (hover: none) and (pointer: coarse) { .edm-document-upload .usb-button.button--primary .svg-icon { color: rgb(255, 255, 255); } } @media (hover: none) and (pointer: coarse) { .edm-document-upload .usb-button.button--secondary .svg-icon { color: rgb(35, 90, 228); } } @media (hover: none) and (pointer: coarse) { .edm-document-upload .usb-button.button--utility .svg-icon { color: rgb(72, 72, 97); } } @media (hover: none) and (pointer: coarse) { .edm-document-upload .usb-button.button--text .svg-icon { color: rgb(35, 90, 228); } } @media (hover: none) and (pointer: coarse) { .edm-document-upload .usb-button.button--disabled .svg-icon { color: rgb(99, 99, 127); } } .usb-accumulator .usb-combobox-container .usb-combobox-list-item .usb--checkbox-wrapper { width: 100%; } .edm-progress-card--card { width: auto; padding: 0; border-radius: 0.25rem; border: 1px solid #d1dcf6; margin: 0; background-color: rgb(255, 255, 255); display: flex; flex-direction: column; overflow: hidden; } .edm-progress-card--content { color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 0.875rem; line-height: 1.5; padding: 1.5rem; } .edm-progress-card--footer { margin: -1.5rem; margin-top: 1rem; border-radius: 0 0 0.25rem 0.25rem; background-color: rgb(241, 245, 251); display: flex; justify-content: flex-end; } .edm-progress-card--footer .usb-button, .edm-progress-card--footer .usb-button.button--default, .edm-progress-card--footer .usb-button.button--text { margin: 1rem 1.5rem; } .edm-progress-card .usb-progress-indicator { margin: 0; padding: 0; } .edm-progress-card .usb-progress-indicator .usb-progress-indicator__steps { display: none; } .edm-progress-card .usb-progress-indicator .usb-progress-indicator__bar { height: 5px !important; } .edm-progress-card .usb-progress-indicator .usb-progress-indicator__percentage { display: none !important; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__container { border-radius: 0.5rem; background-color: #fff; justify-content: space-between; box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.15), 0 3px 8px -3px rgba(110, 110, 110, 0.3); } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item .doc-grid-row .doc-grid-col1 { width: 2.75rem; flex: 0 0 2.75rem; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item .doc-grid-row .doc-grid-col2 { flex: 1; width: 28%; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item .doc-grid-row .doc-grid-col3.upload-list { width: 15%; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item .doc-grid-row .doc-grid-col3.files-list { width: 45%; } .edm-document-upload { display: flex; justify-content: center; /** * Uploading Progress Section */ /** * Upload Await Section */ } .edm-document-upload .upload-view { display: flex; flex-direction: column; width: 100%; } .edm-document-upload .upload-dropzone { display: flex; justify-content: center; flex-direction: column; width: 100%; align-items: center; text-align: center; border: none; min-height: auto; background: transparent; padding: 0; gap: 1rem; } .edm-document-upload .upload-dropzone:focus, .edm-document-upload .upload-dropzone:hover { border: none; background: transparent; } .edm-document-upload .upload-dropzone__illustration { width: 138px; } .edm-document-upload .upload-dropzone__browse-button { min-height: 2.5rem; margin-top: 0.25rem; width: 100%; margin: 0; } .edm-document-upload .upload-dropzone .document-upload-image { width: 8.9rem; } @media screen and (min-width: 30rem) { .edm-document-upload .upload-dropzone { border: 3px dashed rgb(72, 72, 97); min-height: 240px; margin: 0; background: rgb(255, 255, 255); color: rgb(99, 99, 127); border-radius: 0.25rem; padding: 1.5rem; } .edm-document-upload .upload-dropzone:focus, .edm-document-upload .upload-dropzone:hover { border: 3px dashed rgb(35, 90, 228); background: #eff3fc; } .edm-document-upload .upload-dropzone__browse-button { margin-top: 0.25rem; width: auto !important; } .edm-document-upload .upload-dropzone__illustration { width: auto; height: auto; display: flex; align-items: flex-start; justify-content: flex-start; } .edm-document-upload .upload-dropzone__text { display: flex; flex-direction: column; font-size: 1rem; line-height: 1.5rem; color: rgb(45, 45, 62); } .edm-document-upload .upload-dropzone__text .dropZoneDesktopInnerText1 { font-weight: 400; } .edm-document-upload .upload-dropzone__text .dropZoneDesktopInnerText2 { font-weight: 400; } .edm-document-upload .upload-dropzone__drag { display: flex; justify-content: center; flex-direction: column; width: 100%; align-items: center; text-align: center; gap: 0.25rem; } .edm-document-upload .upload-dropzone--onDragOver { background: #eff3fc; } .edm-document-upload .upload-dropzone .document-upload-image { width: 79px; } } .edm-document-upload .upload-instructions { width: 100%; } .edm-document-upload .upload-instructions__text { color: rgb(72, 72, 97); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; text-align: left; line-height: 1.6; } .edm-document-upload .upload-instructions__text .dropZoneHeaderText1--mobile { display: block; } @media screen and (min-width: 30rem) { .edm-document-upload .upload-instructions__text { font-weight: 400; font-size: 16px; margin-top: 0.5rem; margin-bottom: 0.5rem; text-align: left; line-height: inherit; color: rgb(72, 72, 97); } .edm-document-upload .upload-instructions__text .dropZoneHeaderText1--mobile { display: none; } .edm-document-upload .upload-instructions__text .dropZoneHeaderFileTypeText { text-transform: uppercase; } } .edm-document-upload .upload-button { margin-top: 0; justify-content: flex-center; } .edm-document-upload .upload-button .shield-button { width: 100%; margin: 0.75rem 0; } @media screen and (min-width: 30rem) { .edm-document-upload .upload-button { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-top: 1.5rem; } .edm-document-upload .upload-button .shield-button { margin-right: 0; margin-top: 0; width: auto; } } .edm-document-upload .upload-queue { padding: 1.25rem 0 0.5rem 0; } @media screen and (min-width: 30rem) { .edm-document-upload .upload-queue { padding: 1.5rem 0 0 0; } } .edm-document-upload .upload-queue__header { display: flex; flex-direction: row; align-items: center; width: 100%; margin-bottom: 0.75rem; } .edm-document-upload .upload-queue__header--mobile { flex-direction: column; align-items: flex-start; } .edm-document-upload .upload-queue__header--mobile .select-all-checkbox--mobile, .edm-document-upload .upload-queue__header--mobile .share-all-checkbox--mobile { margin-top: 10px; min-width: unset; margin-left: 15px; } .edm-document-upload .upload-queue__header .file-share-text { font-size: 0.875rem; color: rgb(45, 45, 62); margin-top: 0.5rem; } .edm-document-upload .upload-queue__header .select-all-checkbox, .edm-document-upload .upload-queue__header .share-all-checkbox { display: flex; min-width: 8rem; flex-grow: 1; margin-left: 1rem; } .edm-document-upload .upload-queue__header .share-all-checkbox { justify-content: flex-end; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper { margin: 0.5rem 0; align-items: center; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper:first-child { margin-top: 0; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper:last-child { margin-bottom: 0; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__container { display: flex; padding: 1.25rem 1rem; align-items: flex-start; gap: 0.5rem; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__container:hover, .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__container--selected-state { box-shadow: "0 4px 6px -1px rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .12)"; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__container--selected-state { background-color: rgb(217, 235, 255); } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__left-group .doc-grid-col0 { min-height: 30px; display: flex; align-items: center; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__left-group .doc-grid-col0 .usb--checkbox-wrapper { margin-bottom: 0; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__left-group .doc-grid-col2 { min-height: 30px; display: flex; align-items: center; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__left-group, .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__right-group { display: flex; align-items: flex-start; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__left-group .upload-action-container, .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__right-group .upload-action-container { display: none; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__left-group .upload-action-container--mobile, .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__right-group .upload-action-container--mobile { display: block; } @media screen and (min-width: 30rem) { .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__left-group .upload-action-container, .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__right-group .upload-action-container { display: block; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__left-group .upload-action-container--mobile, .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__right-group .upload-action-container--mobile { display: none; } } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item .doc-grid-row .doc-grid-col1 { width: auto; flex: 0; margin-right: 0.5rem; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item .doc-grid-row .doc-grid-col1 svg { display: block; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item .doc-grid-row .doc-grid-col2 .doc-summary-name { font-weight: 400; font-family: Circular-USB, Arial, Helvetica, sans-serif; word-break: break-word; color: rgb(72, 72, 97); } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__right-group { align-items: center; gap: 1rem; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__right-group .usb--checkbox-wrapper { margin-bottom: 0; } .edm-document-upload .upload-queue__list .upload-queue__list-wrapper .upload-queue__list-item__right-group .files-list { width: 100% !important; } .edm-document-upload .upload-notifications .usb-notification.document-notification { margin-bottom: 1rem; } .edm-document-upload .upload-notifications .usb-notification.document-notification .error { overflow-wrap: anywhere; } .edm-document-upload .upload-notifications .usb-notification.document-notification .primary-error-message { font-weight: 400; } .edm-document-upload .upload-notifications .usb-notification.document-notification .primary-message { word-break: break-word; outline: none; } .edm-document-upload .upload-notifications .usb-notification.document-notification ul.secondary-message-list { margin-left: 0; list-style-type: none; } .edm-document-upload .upload-notifications .usb-notification.document-notification ul.error-list { margin-left: 1.5rem; } .edm-document-upload .upload-notifications .usb-notification.document-notification li.secondary-message-list-item--single { margin: 0; } .edm-document-upload .upload-notifications .usb-notification.document-notification ul.document-name-list { margin-left: 1.5rem; } .edm-document-upload .upload-progress { margin-bottom: 1rem; } @media screen and (min-width: 30rem) { .edm-document-upload .upload-progress { margin-bottom: 1.5rem; } } .edm-document-upload .upload-progress h2 { font-weight: 400; font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; } .edm-document-upload .upload-progress h2 strong { font-weight: 700; } .edm-document-upload .upload-progress .upload-processing-header { display: flex; } .edm-document-upload .upload-progress .upload-processing-spinner.usb-loading-spinner-container { margin-right: 0.5rem; } .edm-document-upload .upload-progress .upload-processing-spinner.usb-loading-spinner-container .usb-loading-spinner__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0); overflow: hidden; white-space: nowrap; } .edm-document-upload .upload-progress .uploading-files { width: 100%; } .edm-document-upload .upload-progress .uploading-files .usb-list { display: flex; flex-wrap: nowrap; justify-content: flex-start; flex-direction: column; align-content: center; margin: 0; width: 100%; border: 0; } @media screen and (min-width: 30rem) { .edm-document-upload .upload-progress .uploading-files .usb-list { flex-wrap: wrap; flex-direction: row; } } .edm-document-upload .upload-progress .uploading-files .usb-list li { flex-basis: 50%; margin: 0.5rem 0; max-width: none; min-width: 0; display: flex; } .edm-document-upload .upload-progress .uploading-files .usb-list li .usb-icon { margin-right: 0.75rem; } .edm-document-upload .upload-progress .edm-progress-card.multiple-cards { margin-bottom: 1.25rem; } .edm-document-upload .upload-progress .cancel-upload { float: right; } .edm-document-upload .upload-progress .cancel-upload .usb-button.cancel-button { margin-top: 0.25rem; } .edm-document-upload .upload-wait { display: flex; border: 2px solid #d1dcf6; background-color: #ffffff; border-radius: 0.25rem; padding: 1rem; } .edm-document-upload .upload-wait .clock-image { width: 6.25rem; height: 6.25rem; float: left; border: 1px solid rgb(255, 255, 255); } .edm-document-upload .upload-wait-text { padding: 0; color: rgb(45, 45, 62); font-size: 1.25rem; margin: 0 1rem; } @media screen and (min-width: 30rem) { .edm-document-upload .upload-wait-text { padding: 1rem; margin: 1rem; } } /* Upload Document SVG Animation */ .document-upload-image { width: 79px; } @keyframes eem486u8y93j5_to__to { 0%, 73.333333% { transform: translate(79.974961px, 147.27102px); } 86.666667%, to { transform: translate(103.46499px, 145.187717px); } } @keyframes eem486u8y93j5_tr__tr { 0%, 44.444444% { transform: rotate(20deg); } 55.555556%, 73.333333% { transform: rotate(75deg); } 86.666667%, to { transform: rotate(140deg); } } @keyframes eem486u8y93j5_ts__ts { 0%, 44.666667%, 86.666667%, to { transform: skewX(0deg) skewY(0deg) scale(0, 0); } 55.777778%, 73.333333% { transform: skewX(0deg) skewY(0deg) scale(1, 1); } } @keyframes eem486u8y93j6_to__to { 0% { transform: translate(7.5px, 376.963321px); animation-timing-function: cubic-bezier(0.595, 0.005, 0.38, 1); } 22.444444%, 66.666667% { transform: translate(7.5px, 389.00533px); animation-timing-function: cubic-bezier(0.595, 0.005, 0.38, 1); } 44.666667% { transform: translate(7.5px, 377px); animation-timing-function: cubic-bezier(0.595, 0.005, 0.38, 1); } 88.888889%, to { transform: translate(7.5px, 377px); } } @keyframes eem486u8y93j7_tr__tr { 0%, 4.444444%, 88.888889%, to { transform: translate(194.153847px, 503px) rotate(-180deg); } 15.555556%, 22.222222%, 62.444444%, 66.888889% { transform: translate(194.153847px, 503px) rotate(0deg); animation-timing-function: cubic-bezier(0.595, 0.005, 0.38, 1); } 44.444444% { transform: translate(194.153847px, 503px) rotate(180deg); animation-timing-function: cubic-bezier(0.595, 0.005, 0.38, 1); } } @keyframes eem486u8y93j15_ts__ts { 0% { transform: translate(111.152821px, 117.573965px) rotate(90deg) scale(1.001328, 2.04071); } 33.333333% { transform: translate(111.152821px, 117.573965px) rotate(90deg) scale(1.001328, 1); } 55.555556%, to { transform: translate(111.152821px, 117.573965px) rotate(90deg) scale(0.003646, 1); } } @keyframes eem486u8y93j16_ts__ts { 0%, 22.222222% { transform: translate(107.098905px, 405.192811px) scale(1.030438, 1); } 33.333333%, to { transform: translate(107.098905px, 405.192811px) scale(0.005705, 1); } } @keyframes eem486u8y93j17_ts__ts { 0% { transform: translate(334.192811px, 409.101868px) rotate(90deg) scale(1.015735, 2.176596); } 11.111111% { transform: translate(334.192811px, 409.101868px) rotate(90deg) scale(1.015735, 1); } 22.222222%, to { transform: translate(334.192811px, 409.101868px) rotate(90deg) scale(0.001951, 1); } } @keyframes eem486u8y93j18_ts__ts { 0% { transform: translate(343.93147px, 114.5px) scale(1, 1); } 11.111111%, to { transform: translate(343.93147px, 114.5px) scale(0.026794, 1); } } @keyframes eem486u8y93j19_to__to { 0% { transform: translate(66.5px, 456px); animation-timing-function: cubic-bezier(0.595, 0.005, 0.38, 1); } 22.222222%, 66.666667% { transform: translate(66.5px, 492px); animation-timing-function: cubic-bezier(0.595, 0.005, 0.38, 1); } 44.444444% { transform: translate(154px, 492px); animation-timing-function: cubic-bezier(0.595, 0.005, 0.38, 1); } 88.888889%, to { transform: translate(66.5px, 456px); } } @keyframes eem486u8y93j21_to__to { 0%, 80.444444% { transform: translate(25.728267px, 84.937445px); } 84.888889% { transform: translate(25.728267px, -10.891801px); } 87.111111%, to { transform: translate(25.728267px, -71.0959px); } } @keyframes eem486u8y93j21_ts__ts { 0%, 80.444444% { transform: rotate(90deg) scale(-0.000129, 1.005533); } 84.888889% { transform: rotate(90deg) scale(-0.524188, 0.987703); } 87.111111%, to { transform: rotate(90deg) scale(0, 0.987703); } } @keyframes eem486u8y93j22_to__to { 0%, 79.333333%, 81.111111% { transform: translate(0.037506px, 89.183192px); } 85.555556% { transform: translate(0.037506px, 10.6199px); } 87.777778%, to { transform: translate(0.037506px, -45.744671px); } } @keyframes eem486u8y93j22_ts__ts { 0%, 79.333333%, 81.111111% { transform: rotate(90deg) scale(-0.000129, 1.005533); } 85.555556% { transform: rotate(90deg) scale(-0.524188, 0.987703); } 87.777778%, to { transform: rotate(90deg) scale(0, 0.987703); } } @keyframes eem486u8y93j23_to__to { 0%, 80%, 82% { transform: translate(50.239021px, 75.02891px); } 86.444444% { transform: translate(50.239021px, 29.111424px); } 88.666667%, to { transform: translate(50.239021px, -31.380615px); } } @keyframes eem486u8y93j23_ts__ts { 0%, 82% { transform: rotate(90deg) scale(-0.000129, 1.005533); } 86.444444% { transform: rotate(90deg) scale(-0.524188, 0.987703); } 88.666667% { transform: rotate(90deg) scale(-0.110868, 0.987703); } 88.888889%, to { transform: rotate(90deg) scale(0, 0.987703); } } @keyframes eem486u8y93j24_to__to { 0% { transform: translate(111.72719px, 114.5px); } 11.111111% { transform: translate(334.192811px, 114.5px); } 22.222222% { transform: translate(334.192811px, 408.5px); } 33.333333% { transform: translate(111.72719px, 408.5px); } 42.222222% { transform: translate(111.72719px, 327.383696px); } 53.333333% { transform: translate(223.000001px, 257.479218px); } 68.888889% { transform: translate(223.000001px, 257.5px); animation-timing-function: cubic-bezier(0.35, -0.005, 1, -0.06); } 80.888889%, to { transform: translate(223.000001px, -140.759144px); } } @keyframes eem486u8y93j24_tr__tr { 0%, 42.222222% { transform: rotate(-20deg); } 53.333333%, to { transform: rotate(0deg); } } @keyframes eem486u8y93j24_ts__ts { 0%, 42.222222% { transform: scale(0.184701, 0.184701); } 53.333333%, to { transform: scale(1, 1); } } @keyframes eem486u8y93j24_c_o { 0% { opacity: 0; } 4.444444%, to { opacity: 1; } } @keyframes eem486u8y93j38_ts__ts { 0%, 88.888889% { transform: translate(187.051462px, 309.434098px) rotate(-15deg) scale(0, 0); } to { transform: translate(187.051462px, 309.434098px) rotate(-15deg) scale(1.05, 1.05); } } @keyframes eem486u8y93j53_ts__ts { 0%, 48.888889% { transform: translate(225.117251px, 114.01117px) scale(0, 0); } 53.333333%, to { transform: translate(225.117251px, 114.01117px) scale(1, 1); } } @keyframes eem486u8y93j56_to__to { 0%, 44.444444% { transform: translate(405.5px, 72px); animation-timing-function: cubic-bezier(0.595, 0.005, 0.38, 1); } 22.222222%, 66.888889% { transform: translate(321px, 72px); animation-timing-function: cubic-bezier(0.595, 0.005, 0.38, 1); } 88.888889%, to { transform: translate(405.5px, 72px); } } @keyframes eem486u8y93j57_to__to { 0%, 44.444444% { transform: translate(298.959649px, 23.5px); animation-timing-function: cubic-bezier(0.595, 0.005, 0.38, 1); } 22.222222%, 66.888889% { transform: translate(298.959649px, 8.5px); animation-timing-function: cubic-bezier(0.595, 0.005, 0.38, 1); } 88.888889%, to { transform: translate(298.959649px, 23.5px); } } .document-upload-image svg #eem486u8y93j5_to { animation: eem486u8y93j5_to__to 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j5_tr { animation: eem486u8y93j5_tr__tr 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j5_ts { animation: eem486u8y93j5_ts__ts 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j6_to { animation: eem486u8y93j6_to__to 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j7_tr { animation: eem486u8y93j7_tr__tr 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j15_ts { animation: eem486u8y93j15_ts__ts 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j16_ts { animation: eem486u8y93j16_ts__ts 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j17_ts { animation: eem486u8y93j17_ts__ts 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j18_ts { animation: eem486u8y93j18_ts__ts 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j19_to { animation: eem486u8y93j19_to__to 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j21_to { animation: eem486u8y93j21_to__to 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j21_ts { animation: eem486u8y93j21_ts__ts 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j22_to { animation: eem486u8y93j22_to__to 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j22_ts { animation: eem486u8y93j22_ts__ts 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j23_to { animation: eem486u8y93j23_to__to 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j23_ts { animation: eem486u8y93j23_ts__ts 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j24_to { animation: eem486u8y93j24_to__to 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j24_tr { animation: eem486u8y93j24_tr__tr 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j24_ts { animation: eem486u8y93j24_ts__ts 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j24 { animation: eem486u8y93j24_c_o 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j38_ts { animation: eem486u8y93j38_ts__ts 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j53_ts { animation: eem486u8y93j53_ts__ts 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j56_to { animation: eem486u8y93j56_to__to 4500ms linear 1 normal forwards; } .document-upload-image svg #eem486u8y93j57_to { animation: eem486u8y93j57_to__to 4500ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j5_to { animation: eem486u8y93j5_to__to 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j5_tr { animation: eem486u8y93j5_tr__tr 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j5_ts { animation: eem486u8y93j5_ts__ts 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j6_to { animation: eem486u8y93j6_to__to 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j7_tr { animation: eem486u8y93j7_tr__tr 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j15_ts { animation: eem486u8y93j15_ts__ts 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j16_ts { animation: eem486u8y93j16_ts__ts 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j17_ts { animation: eem486u8y93j17_ts__ts 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j18_ts { animation: eem486u8y93j18_ts__ts 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j19_to { animation: eem486u8y93j19_to__to 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j21_to { animation: eem486u8y93j21_to__to 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j21_ts { animation: eem486u8y93j21_ts__ts 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j22_to { animation: eem486u8y93j22_to__to 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j22_ts { animation: eem486u8y93j22_ts__ts 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j23_to { animation: eem486u8y93j23_to__to 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j23_ts { animation: eem486u8y93j23_ts__ts 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j24_to { animation: eem486u8y93j24_to__to 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j24_tr { animation: eem486u8y93j24_tr__tr 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j24_ts { animation: eem486u8y93j24_ts__ts 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j24 { animation: eem486u8y93j24_c_o 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j38_ts { animation: eem486u8y93j38_ts__ts 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j53_ts { animation: eem486u8y93j53_ts__ts 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j56_to { animation: eem486u8y93j56_to__to 0ms linear 1 normal forwards; } .document-upload-image.no-animation svg #eem486u8y93j57_to { animation: eem486u8y93j57_to__to 0ms linear 1 normal forwards; } .svg-icon { max-width: 100%; display: inline; } .svg-icon svg.single path, .svg-icon svg.single circle, .svg-icon svg.single ellipse, .svg-icon svg.single g { fill: inherit; transition: fill 0.1s ease; } .svg-icon.v-align-middle { display: inline-block; } .svg-icon.v-align-middle svg { vertical-align: middle; } .svg-icon.block { display: block; } .svg-icon.default { color: rgb(122, 122, 149); fill: rgb(72, 72, 97); } .svg-icon.light { color: rgb(255, 255, 255); fill: rgb(255, 255, 255); } .svg-icon.brand-primary { color: rgb(0, 30, 121); fill: rgb(0, 30, 121); } .svg-icon.brand-secondary { color: rgb(122, 122, 149); fill: rgb(122, 122, 149); } .svg-icon.interaction { color: rgb(35, 90, 228); fill: rgb(35, 90, 228); } .svg-icon.error { color: rgb(207, 42, 54); fill: rgb(207, 42, 54); } .svg-icon.warning { color: rgb(235, 94, 1); fill: rgb(235, 94, 1); } .svg-icon.success { color: rgb(0, 125, 30); fill: rgb(0, 125, 30); } .svg-icon.neutral { color: rgb(35, 90, 228); fill: rgb(35, 90, 228); } .svg-icon.grey10 { color: rgb(241, 245, 251); fill: rgb(241, 245, 251); } .svg-icon.grey20 { color: rgb(235, 239, 246); fill: rgb(235, 239, 246); } .svg-icon.grey30 { color: rgb(205, 209, 226); fill: rgb(205, 209, 226); } .svg-icon.grey60 { color: rgb(122, 122, 149); fill: rgb(122, 122, 149); } .svg-icon.grey70 { color: rgb(99, 99, 127); fill: rgb(99, 99, 127); } .svg-icon.grey80 { color: rgb(72, 72, 97); fill: rgb(72, 72, 97); } .svg-icon.grey90 { color: rgb(45, 45, 62); fill: rgb(45, 45, 62); } .usb-tabs .tabs, .usb-tabs .tabs * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; -webkit-focus-ring-color: rgba(0, 0, 0, 0) !important; -webkit-tap-highlight-color: transparent !important; -webkit-focus-ring-color: transparent !important; } .usb-tabs .tabs__nav { position: relative; list-style-type: none; width: 100%; padding-left: 0; margin-bottom: 0; border-bottom: 2px solid rgb(205, 209, 226); z-index: 0; } .usb-tabs .tabs__nav li { position: relative; display: inline-block; margin-right: 1.25rem; } .usb-tabs .tabs__nav li:last-of-type { margin-right: 0; } .usb-tabs .tabs__button { position: relative; display: inline-block; width: 100%; padding: 0.25rem 0; color: rgb(72, 72, 97); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; font-weight: 500; cursor: pointer; border: none; outline: none; background: transparent; } .usb-tabs .tabs__button, .usb-tabs .tabs__button * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; -webkit-focus-ring-color: rgba(0, 0, 0, 0) !important; -webkit-tap-highlight-color: transparent !important; -webkit-focus-ring-color: transparent !important; } .usb-tabs .tabs__button:hover, .usb-tabs .tabs__button:hover > .tabs__iconbtn .clone-icon { color: rgb(35, 90, 228); fill: rgb(35, 90, 228); } .usb-tabs .tabs__button:focus::before { content: ""; border: 2px solid rgb(35, 90, 228); border-radius: 0.25rem; height: calc(100% + 0.75rem); position: absolute; left: -0.375rem; top: -0.375rem; width: calc(100% + 0.75rem); pointer-events: none; } .usb-tabs .tabs__button[aria-selected=true] { color: rgb(35, 90, 228); z-index: 2; } .usb-tabs .tabs__button[aria-selected=true]::after { content: ""; position: absolute; display: block; bottom: -2px; height: 2px; width: 100%; background-color: rgb(35, 90, 228); z-index: 2; } .usb-tabs .tabs__button.tabs__required:focus::before { width: calc(100% + 1.25rem); } .usb-tabs .tabs__iconbtn { padding: 0.75rem 0.75rem 0.75rem 0; } .usb-tabs .tabs__iconbtn { padding: 0.75rem 0.75rem 0 0; color: rgb(72, 72, 97); } .usb-tabs .tabs__iconbtn.selected .clone-icon { color: rgb(35, 90, 228); fill: rgb(35, 90, 228); } .usb-tabs .tabs__content { padding: 0.75rem 0; } .usb-tabs .tabs__content .tabs__panel { position: relative; } .usb-tabs .tabs__content .tabs__panel[aria-hidden=true], .usb-tabs .tabs__content .tabs__panel.hidden-tab { display: none; } .usb-tabs .required-pill { top: 0; padding: 6px 6px; border-radius: 50%; background: rgb(207, 42, 54); color: white; position: absolute; } .usb-tabs .bill-pay .tabs__button { color: rgb(45, 45, 62); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; } .usb-menu { position: relative; width: fit-content; } .usb-menu-composable { position: relative; margin: 0; } .usb-menu-composable__trigger { display: flex; } .usb-menu-composable__trigger__label { gap: 0.75rem; font-size: 1rem; font-weight: 500; line-height: 1.5; font-family: Circular-USB, Arial, Helvetica, sans-serif; letter-spacing: normal; } .usb-menu-composable__trigger__label > .usb-icon > svg { width: 24px; height: 24px; } .usb-menu-composable__trigger__label-item { font-size: 1rem; font-weight: 400; font-family: Circular-USB, Arial, Helvetica, sans-serif; letter-spacing: normal; line-height: 1.5; } .usb-menu-composable__trigger__label-text { display: flex; gap: 0.75rem; justify-content: space-evenly; } .usb-menu-composable__trigger__label-text > span { display: flex; align-items: center; justify-content: center; } .usb-menu-composable__trigger__label-text.chevron-right > .usb-icon.icon-right { padding-left: 0; } .usb-menu-composable__trigger__chevron.chevron-left { order: -1; } .usb-menu-composable__trigger:focus { background: rgb(255, 255, 255); border: 1px solid rgb(122, 122, 149); color: rgb(99, 99, 127); } .usb-menu-composable__trigger:active { background: rgb(255, 255, 255); border: 1px solid rgb(122, 122, 149); color: rgb(99, 99, 127); } .usb-menu-composable__trigger.usb-button { margin: 0; min-width: min-content; } .usb-menu-composable__trigger.usb-button .usb-icon { margin: 0; size: 1.2rem; } .usb-menu-composable__trigger.usb-button.button--small:not(.button--small--icon-only) { padding: 0.5rem; } .usb-menu-composable__trigger.usb-button.button--medium:not(.button--medium--icon-only) { padding: 0.5rem 1rem; } .usb-menu-composable__trigger.usb-button.button--large:not(.button--large--icon-only) { padding: 0.75rem 1.25rem; } .usb-menu-composable__trigger.usb-button.expanded::before { border: 2px solid rgb(35, 90, 228); border-radius: 0.5rem; content: ""; position: absolute; height: calc(100% + 2px); width: calc(100% + 2px); left: -1px; top: -1px; } .usb-menu-composable__trigger.usb-button.expanded .chevron { transform: rotate(180deg); } .usb-menu-composable__trigger.usb-button.button--utility--subtle { color: #4C4C50; } .usb-menu-composable__trigger.usb-button.button--utility--subtle:hover { background: rgb(255, 255, 255); color: #4C4C50; } .usb-menu-composable__trigger.usb-button.button--utility--subtle:hover .usb-icon svg { color: rgb(72, 72, 97); } .usb-menu-composable__trigger.usb-button.button--utility--subtle:disabled .usb-icon svg { color: rgb(122, 122, 149); } .usb-menu-composable__trigger.usb-button.button--utility--subtle .usb-menu-composable__trigger__label-item { color: #2E2E32; } .usb-menu-composable__trigger.usb-button.button--utility--heavy { background: rgb(255, 255, 255); border: 1px solid rgb(122, 122, 149); color: rgb(99, 99, 127); } .usb-menu-composable__trigger.usb-button.button--utility--heavy .usb-menu-composable__trigger__chevron .chevron.svg-icon { color: rgb(99, 99, 127); } .usb-menu-composable__container { position: absolute; border: none; list-style-type: none; max-height: 0; transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease-in-out; display: none; margin: 0.25rem 0; } .usb-menu-composable__container .menu-card { border-width: 1px; line-height: inherit; } .usb-menu-composable__container.align-right { right: 0; } .usb-menu-composable__container.expanded { display: block; max-height: 100vh; z-index: 1; } .usb-menu-composable__container__list { overflow: auto; min-width: 150px; border-radius: 0.5rem; margin: 0; padding: 0; } .usb-menu-composable__container__list.align-top { display: flex; flex-direction: column-reverse; } .usb-menu-composable__container__list.align-top > li:first-child { border-radius: 0 0 0.5rem 0.5rem; } .usb-menu-composable__container__list li { padding: 0.75rem 1.25rem; cursor: pointer; position: relative; background-color: rgb(255, 255, 255); display: flex; color: rgb(45, 45, 62); border-top: 1px solid rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.25; } .usb-menu-composable__container__list li:first-child { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } .usb-menu-composable__container__list li:last-child { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } .usb-menu-composable__container__list li:hover { background-color: rgb(241, 245, 251); border-top: 1px solid rgb(235, 239, 246); border-bottom: 1px solid rgb(235, 239, 246); color: rgb(35, 90, 228); } .usb-menu-composable__container__list li:focus { border-top: 1px solid rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); color: rgb(35, 90, 228); outline: 2px solid rgb(35, 90, 228); background-color: rgb(241, 245, 251); outline-offset: -0.15rem; -moz-outline-radius: 0.25rem; } .usb-menu-composable__container__list li .list-item-selected { color: rgb(35, 90, 228); font-weight: 500; } .usb-menu-composable__container__list li .list-item-unselected { color: rgb(45, 45, 62); } .usb-menu-composable__container__list li .list-item-svg { padding-right: 0.75rem; display: flex; } .usb-menu-composable__container__list li .list-item-svg .checkbox-input-checked { border-radius: 0.25rem; } .usb-menu-composable__container__list li .list-item-svg .checkbox-input-checked path { fill: rgb(35, 90, 228); stroke: rgb(255, 255, 255); stroke-width: 0.01rem; } .usb-menu-composable__container__list li .list-item-svg .checkbox-input-unchecked rect { fill: rgb(255, 255, 255); stroke: rgb(122, 122, 149); } .usb-menu-composable__container__cta-button { width: fit-content; margin: 0.5rem 1rem; } .usb-card { width: auto; height: auto; margin: auto; padding: 0; font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1; outline: transparent; position: relative; overflow: hidden; background-color: rgb(255, 255, 255); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .12); border-radius: 0.5rem; border-color: rgb(205, 209, 226); border-width: 0.25rem; border-style: solid; } .usb-card.card--shadow--sm { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12); } .usb-card.card--shadow--md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .12); } .usb-card.card--shadow--lg { box-shadow: 0 16px 24px -4px rgba(0, 0, 0, .12), 0 4px 8px -2px rgba(0, 0, 0, .6); } .usb-card.card--shadow--xl { box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .20); } .usb-card.card--shadow--none { box-shadow: none; } .usb-card.card--border-radius--sm { border-radius: 0.5rem; } .usb-card.card--border-radius--md { border-radius: 0.5rem; } .usb-card.card--border-radius--lg { border-radius: 0.5rem; } .usb-card.card--border-radius--none { border-radius: 0; } .usb-card.card--border-color--base { border-color: rgb(205, 209, 226); } .usb-card.card--border-color--dark { border-color: rgb(72, 72, 97); } .usb-card-section--cta-button--container-top { border-color: rgb(205, 209, 226); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .usb-card-section--cta-button--container-bottom { border-color: rgb(205, 209, 226); border-top-width: 1px; border-top-style: solid; border-top-left-radius: 0; border-top-right-radius: 0; } /* div.usb-loading-spinner[--reverse-contrast?] ├── svg.usb-loading-spinner__spinner[--size-{size}][--progress|activity] │ ├── circle.usb-loading-spinner__spinner__track[--progress|activity] │ └── circle.usb-loading-spinner__spinner__segment[--progress|activity][--progress-{progress}?] └── span.usb-loading-spinner__label[--position-{top|bottom|left|right|hidden}] */ /* Themeable tokens (@usb-shield/design-tokens) Spinner Size ├── loading_spinner-size-xs ├── loading_spinner-size-small ├── loading_spinner-size-medium ├── loading_spinner-size-large ├── loading_spinner-size-xl ├── loading_spinner-size-2xl └── loading_spinner-size-scalable Spinner Color ├── loading_spinner-track-fill-color ├── loading_spinner-reverse-contrast-track-fill-color ├── loading_spinner-segment-fill-color └── loading_spinner-reverse-contrast-segment-fill-color Label ├── loading_spinner-font-family ├── loading_spinner-font-size ├── loading_spinner-font-weight ├── loading_spinner-letter-spacing ├── loading_spinner-line-height ├── loading_spinner-text-color └── loading_spinner-reverse-contrast-text-color */ .usb-loading-spinner { --spinner-flex-direction: column; --spinner-size: 4rem; --spinner-track-color: rgb(205, 209, 226); --spinner-segment-color: rgb(35, 90, 228); --spinner-label-color: rgb(72, 72, 97); --spinner-stroke-width: 10%; --spinner-animation-duration: 1760ms; --spinner-animation-stroke-offset-percent: 25; --spinner-animation-stroke-radian: 50; --spinner-animation-gap-radian: 265; display: inline-flex; flex-direction: var(--spinner-flex-direction); justify-content: center; align-items: center; gap: 0.5rem; width: fit-content; position: relative; } .usb-loading-spinner:has(.usb-loading-spinner__spinner--size-xs) { --spinner-size: 1rem; } .usb-loading-spinner:has(.usb-loading-spinner__spinner--size-small) { --spinner-size: 1.5rem; } .usb-loading-spinner:has(.usb-loading-spinner__spinner--size-medium) { --spinner-size: 2rem; } .usb-loading-spinner:has(.usb-loading-spinner__spinner--size-large) { --spinner-size: 2.5rem; } .usb-loading-spinner:has(.usb-loading-spinner__spinner--size-xl) { --spinner-size: 3rem; } .usb-loading-spinner:has(.usb-loading-spinner__spinner--size-2xl) { --spinner-size: 4rem; } .usb-loading-spinner:has(.usb-loading-spinner__spinner--size-scalable) { --spinner-size: 100%; } .usb-loading-spinner:has(.usb-loading-spinner__spinner--size-custom) { --spinner-size: unset; } .usb-loading-spinner:has(.usb-loading-spinner__label--position-left) { --spinner-flex-direction: row-reverse; } .usb-loading-spinner:has(.usb-loading-spinner__label--position-right) { --spinner-flex-direction: row; } .usb-loading-spinner:has(.usb-loading-spinner__label--position-bottom) { --spinner-flex-direction: column; } .usb-loading-spinner:has(.usb-loading-spinner__label--position-top) { --spinner-flex-direction: column-reverse; } .usb-loading-spinner:has(.usb-loading-spinner__label--position-hidden) .usb-loading-spinner__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0); overflow: hidden; white-space: nowrap; } .usb-loading-spinner--reverse-contrast { --spinner-label-color: rgb(255, 255, 255); } .usb-loading-spinner--reverse-contrast:has(.usb-loading-spinner__spinner__track--activity) { --spinner-track-color: rgb(205, 209, 226); --spinner-segment-color: rgb(35, 90, 228); } .usb-loading-spinner--reverse-contrast:has(.usb-loading-spinner__spinner__track--progress) { --spinner-track-color: rgb(205, 209, 226); --spinner-segment-color: rgb(35, 90, 228); } .usb-loading-spinner__spinner { width: var(--spinner-size); max-width: var(--spinner-size); max-height: var(--spinner-size); height: var(--spinner-size); } .usb-loading-spinner__spinner--size-scalable { height: auto; aspect-ratio: 1/1; } .usb-loading-spinner__spinner svg { width: 100%; height: 100%; } .usb-loading-spinner__spinner__track, .usb-loading-spinner__spinner__segment { stroke-width: var(--spinner-stroke-width); transform-origin: top; stroke-linecap: round; stroke-linejoin: round; transition: opacity "0.25s ease"; will-change: opacity; stroke-miterlimit: 8; fill-opacity: 0; opacity: 1; } .usb-loading-spinner__spinner__track { stroke: var(--spinner-track-color); } .usb-loading-spinner__spinner__segment { stroke: var(--spinner-segment-color); } .usb-loading-spinner__spinner__segment--progress { transition: all "0.25s ease"; will-change: opacity, stroke, stroke-dasharray; } .usb-loading-spinner__spinner__segment--progress-0 { opacity: 0; } .usb-loading-spinner__spinner__segment--activity { animation-name: loading-spinner-activity-animation; animation-duration: var(--spinner-animation-duration); animation-fill-mode: forwards; animation-timing-function: linear; animation-direction: normal; animation-iteration-count: infinite; stroke-dashoffset: var(--spinner-animation-stroke-offset-percent); stroke-dasharray: var(--spinner-animation-stroke-radian) var(--spinner-animation-gap-radian); } .usb-loading-spinner__label { color: var(--spinner-label-color); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; text-align: center; min-height: 1.125rem; } @keyframes loading-spinner-activity-animation { 0% { stroke-dashoffset: 0; stroke-dasharray: 1.76, 174.24; } 25% { stroke-dashoffset: -88; stroke-dasharray: 61.6, 114.4; } 50% { stroke-dashoffset: -176; stroke-dasharray: 123.2, 52.8; } 75% { stroke-dashoffset: -264; stroke-dasharray: 61.6, 114.4; } 100% { stroke-dashoffset: -352; stroke-dasharray: 1.76, 174.24; } } .usb-avatar-container { display: flex; } .usb-avatar { display: inline-flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 500; background-color: rgb(0, 30, 121); color: rgb(255, 255, 255); border-color: rgb(0, 30, 121); } .usb-avatar--circle { border-radius: 50%; } .usb-avatar--square { border-radius: 0.25rem; } .usb-avatar--xs { height: 1rem; width: 1rem; font-size: 0.75rem; } .usb-avatar--small { height: 1.5rem; width: 1.5rem; font-size: 0.75rem; } .usb-avatar--medium { height: 2rem; width: 2rem; font-size: 0.875rem; } .usb-avatar--large { height: 2.5rem; width: 2.5rem; font-size: 1rem; } .usb-avatar--xl { height: 3rem; width: 3rem; font-size: 1.25rem; } .usb-avatar--2xl { height: 4rem; width: 4rem; font-size: 1.5rem; } .usb-avatar--3xl { height: 6.25rem; width: 6.25rem; font-size: 2.5rem; } .usb-avatar .usb-icon.svg-icon { display: flex; justify-content: center; align-items: center; } .usb-avatar .usb-icon svg { width: 100%; height: 100%; fill: currentColor; } .usb-avatar img { height: 100%; width: 100%; border-radius: 50%; } .usb-avatar:not(:has(.usb-icon, img, svg)) { border: 1px solid; } .usb-avatar-label { margin: auto 0; padding-left: 0.5rem; font-size: 1rem; font-weight: 400; color: rgb(45, 45, 62); } .header { display: flex; width: 100%; flex-direction: column; align-items: flex-start; } .header-signout { display: flex; width: 1280px; margin: 0 auto; flex-direction: row; align-items: center; align-self: stretch; height: 2.75rem; justify-content: flex-end; gap: 2.25rem; } .header-signout .usb-button { width: 53px; border: 0; } .header-signout .usb-button:hover { background-color: rgb(241, 245, 251); text-decoration: none; } .header-signout .usb-button:active { background-color: rgb(241, 245, 251); text-decoration: none; outline: none; } .header-signout .usb-button:focus-visible { outline: none; } .header-signout .usb-button:focus:before { border: none; } .header-signout .usb-button.signout-link { color: rgb(35, 90, 228); font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: 1.25rem; text-decoration: none; border: 0 !important; border-radius: 0 !important; } .header-signout .usb-button.signout-link:focus::before { border: 2px solid rgb(35, 90, 228); } .header .cookie-policy-banner { display: flex; width: 100%; flex-direction: column; align-items: center; padding-top: 2rem; padding-bottom: 2rem; } .header .cookie-policy-banner .usb-notification { display: flex; width: 1275px; } .header .cookie-policy-banner .usb-notification .usb-button--close-btn { position: absolute; top: 1rem; right: 1.25rem; cursor: pointer; padding: 0; height: 1.25rem; min-height: 0; min-width: 0; width: 1.25rem; background: transparent; } .header-container { height: 72px; background: rgb(12, 32, 116); } .header-container .header-box { width: 1280px; } .header-container .header-box .header-logo { width: 123.82px; height: 34.1px; display: inline-block; margin-top: 1.5rem; } .header-container .header-box .header-logo svg { width: 123.82px; height: 31.44px; top: 0.04px; gap: 0px; opacity: 0px; display: inline-block; } .header-container .header-box .user-details { display: inline-block; float: right; padding-top: 21px; } .header-container .header-box .user-details svg { fill: rgb(255, 255, 255); vertical-align: -webkit-baseline-middle; width: 30px; height: 30px; } .header-container .header-box .user-details div { display: inline-block; vertical-align: top; padding-left: 16px; color: rgb(255, 255, 255); font-size: 16px; font-weight: 400; line-height: 24px; text-align: right; } .header-container.light { background-color: rgb(255, 255, 255); /* Shadow small */ box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; align-items: center; gap: 10px; align-self: stretch; height: 69px; } .header-container.light .header-box { height: 69px; display: flex; align-items: center; } .header-container.light .header-box .header-logo { width: 123px; height: 34.1px; margin-top: 0px; } footer { display: flex; width: 100%; padding: 0.75rem 0; justify-content: space-between; align-items: center; background: rgb(0, 30, 121); } footer .footer-container { height: 64px; background: rgb(12, 32, 116); min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; } footer .footer-container svg { width: 100% !important; margin-top: 18px; } footer .footer-container .footer-copy-right { vertical-align: -webkit-baseline-middle; color: rgb(255, 255, 255); width: 1280px; margin: 0px auto; margin-top: -15px; } footer .footer-container-client { display: flex; width: 1280px; margin: 0 auto; justify-content: space-between; align-items: center; } footer .footer-container-client-terms-link { display: flex; align-items: flex-end; gap: 0.25rem; color: rgb(255, 255, 255); font-size: 16px; font-weight: 400; line-height: 1.25; text-decoration: none; } footer .footer-container-client-terms-link:focus { outline: none; } footer .footer-container-client-logo { display: flex; width: 100px; flex-direction: column; justify-content: center; align-items: center; gap: 0.5rem; flex-shrink: 0; } footer .footer-container-client-logo img { width: 100px; height: 27.72px; content: url("data:image/svg+xml,%0A%3Csvg version='1.1' id='logo' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 167.31253 45.15136' style='enable-background:new 0 0 167.31253 45.15136;' xml:space='preserve'%3E%3Cstyle%3E%0Apath, polygon %7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpolygon style='fill:%23DE162B;' points='2.31812,2.25356 2.3451,33.70156 28.98011,42.76156 55.6161,33.70156 55.6161,2.25356'/%3E%3Cpath d='M28.93842,32.71186h-8.14301v-2.814H20.7104c-1.57797,2.219-3.83698,3.368-7.20599,3.368 c-3.96399,0-7.58798-2.429-7.58798-7.503v-15.177h8.44199v11.595c0,2.559,0.298,4.35,2.771,4.35 c1.44901,0,3.36801-0.726,3.36801-4.264v-11.681h8.44101V32.71186z'/%3E%3Cpath d='M44.67344,17.02266c-0.04401-0.724-0.42603-1.278-0.98102-1.663c-0.51199-0.426-1.194-0.639-1.87601-0.639 c-1.194,0-2.55899,0.257-2.55899,1.705c0,0.639,0.513,0.938,0.98099,1.151c1.40701,0.598,4.60501,0.768,7.42001,1.705 c2.81201,0.897,5.285,2.559,5.285,6.183c0,6.14-5.884,7.801-11.255,7.801c-5.20099,0-10.914-2.089-11.04199-7.801h8.05701 c0.043,0.767,0.38397,1.406,1.02399,1.961c0.427,0.383,1.23499,0.639,2.26001,0.639c1.108,0,2.85599-0.426,2.85599-1.705 c0-1.28-0.72501-1.662-4.647-2.344c-6.43698-1.109-9.03799-3.155-9.03799-6.951c0-5.584,6.01099-7.034,10.44501-7.034 c4.77499,0,10.53,1.323,10.74298,6.99199H44.67344z'/%3E%3Cpath d='M70.46912,16.17066c-3.02701,0-3.70901,2.856-3.70901,5.457c0,2.644,0.68201,5.5,3.70901,5.5 s3.70898-2.856,3.70898-5.5C74.17811,19.02666,73.49613,16.17066,70.46912,16.17066 M58.61713,2.27166h8.44199v10.743h0.08499 c1.27902-1.876,3.53799-2.984,6.05301-2.984c7.418,0,9.423,6.31,9.423,11.511c0,5.542-3.02802,11.724-9.29501,11.724 c-4.13498,0-5.41299-1.577-6.47998-2.984h-0.08502v2.43h-8.14297V2.27166z'/%3E%3Cpath d='M98.055,22.77946c-1.02402,0.511-2.17401,0.81-3.32401,1.065c-1.87701,0.427-2.858,0.895-2.858,2.388 c0,1.023,1.108,2.045,2.64301,2.045c1.91998,0,3.41098-1.15,3.539-3.452V22.77946z M106.15501,27.76646 c0,1.663,0.086,3.54,1.02399,4.945h-8.61301c-0.21201-0.595-0.33899-1.492-0.29898-2.087H98.184 c-1.793,2.045-4.392,2.641-7.121,2.641c-4.26401,0-7.802-2.046-7.802-6.693c0-6.991,8.185-6.736,12.492-7.546 c1.151-0.213,2.302-0.553,2.302-1.962c0-1.492-1.40802-2.045-2.77002-2.045c-2.60199,0-3.11298,1.321-3.15598,2.259h-7.845 c0.25699-6.224,6.13898-7.248,11.38397-7.248c10.57303,0,10.48703,4.392,10.48703,8.656V27.76646z'/%3E%3Cpath d='M109.17985,10.58546h8.14398v2.814h0.08301c1.57898-2.217,3.83698-3.369,7.20496-3.369 c3.96503,0,7.59101,2.42999,7.59101,7.50399v15.177h-8.443v-11.595c0-2.559-0.297-4.35-2.76898-4.35 c-1.45203,0-3.37103,0.726-3.37103,4.264v11.681h-8.43994V10.58546z'/%3E%3Cpolygon points='135.18822,2.27166 143.62816,2.27166 143.62816,16.98066 149.00218,10.58566 158.55119,10.58566 150.66417,18.94166 159.78917,32.71166 149.63921,32.71166 145.1212,24.69766 143.62816,26.31666 143.62816,32.71166 135.18822,32.71166'/%3E%3Cpath d='M161.60429,31.90816h0.37097v-0.829h0.29102c0.19403,0,0.33398,0.023,0.41101,0.069 c0.13202,0.078,0.198,0.239,0.198,0.48v0.168l0.008,0.067l0.00403,0.024l0.00494,0.021h0.34705l-0.01202-0.026l-0.02002-0.11 l-0.005-0.156v-0.154c0-0.105-0.03894-0.214-0.11499-0.326c-0.07599-0.11-0.19696-0.179-0.36096-0.204 c0.13-0.021,0.23199-0.055,0.30597-0.102c0.13599-0.088,0.20404-0.227,0.20404-0.414c0-0.264-0.10803-0.442-0.32501-0.531 c-0.12103-0.05-0.31104-0.075-0.573-0.075h-0.73401V31.90816z M162.65831,30.77617c-0.078,0.03-0.19501,0.046-0.35101,0.046 h-0.33203v-0.76h0.315c0.203,0,0.35199,0.026,0.44604,0.078c0.09198,0.051,0.13898,0.154,0.13898,0.307 C162.87529,30.60816,162.80229,30.71816,162.65831,30.77617 M163.72826,29.51516c-0.37396-0.371-0.823-0.557-1.35394-0.557 c-0.526,0-0.97302,0.186-1.34601,0.557c-0.37305,0.373-0.55902,0.822-0.55902,1.349c0,0.53,0.185,0.983,0.55402,1.355 c0.37097,0.376,0.823,0.563,1.35101,0.563c0.53094,0,0.97998-0.187,1.35394-0.563c0.37402-0.373,0.56104-0.825,0.56104-1.355 C164.28929,30.33616,164.10228,29.88717,163.72826,29.51516 M163.53831,29.69916c0.31995,0.322,0.47998,0.709,0.47998,1.165 c0,0.457-0.16003,0.848-0.47998,1.172c-0.31805,0.322-0.70801,0.483-1.164,0.483c-0.45605,0-0.84406-0.161-1.16302-0.483 c-0.31799-0.324-0.47601-0.715-0.47601-1.172c0-0.456,0.15802-0.843,0.47803-1.165c0.32196-0.322,0.70898-0.484,1.16101-0.484 C162.82927,29.21516,163.21831,29.37716,163.53831,29.69916'/%3E%3C/svg%3E"); } footer .footer-external-link { display: flex; gap: 20px; } footer .footer-external-link div { color: #fff; } footer .footer-external-link a:focus { text-decoration: underline; } .form-notification-container { margin-bottom: 2rem; } .form-notification-container .usb-children-notification { align-items: center; display: flex; } .polling-spinner { display: flex; gap: 20px; align-items: center; margin-left: 2rem; } .polling-spinner .usb-loading-spinner-container.default { width: 30px; height: 30px; overflow: hidden; } @media (min-width: 768px) and (max-width: 1280px) { #ilmportal-app .cookie-policy-banner .usb-notification { max-width: 100%; padding: 0 32px; } .header-signout { width: min-content; display: inline-block; /* position: absolute; */ /* right: 32px; */ /* top: 8px; */ float: right; margin-top: -6px; } .header { max-width: 100%; background-color: white; display: block; padding: 16px 32px; } .header .header-container.light { box-shadow: none; height: auto; } .header .header-container.light .header-box { height: auto; display: flex; align-items: center; justify-content: center; } .header .header-container.light .header-logo img { height: 24px; } .header-container .header-box { max-width: 100%; } .header-container.light .header-box .header-logo { width: auto; height: auto; margin-top: 0px; } footer .footer-external-link { display: grid; } footer .footer-container .footer-copy-right { max-width: 100%; } footer .footer-container-client { max-width: 100%; align-items: center; } } @media (max-width: 767px) { .header-signout { width: min-content; display: inline-block; /* position: absolute; */ /* right: 32px; */ /* top: 8px; */ float: right; margin-top: -6px; } .header { max-width: 100%; background-color: white; display: block; padding: 16px 32px; } .header .header-container.light { box-shadow: none; height: auto; } .header .header-container.light .header-box { height: auto; display: flex; align-items: center; justify-content: center; } .header .header-container.light .header-logo img { height: 24px; } .header-container .header-box { max-width: 100%; } .header-container.light .header-box .header-logo { width: auto; height: auto; margin-top: 0px; } footer .footer-external-link { display: grid; } footer .footer-container .footer-copy-right { max-width: 100%; } footer .footer-container-client { max-width: 100%; align-items: center; } } .ilm-table { color: rgb(45, 45, 62); margin-bottom: 32px; } .ilm-table #empty-table-usb-table_default--id { min-width: 1000px; } .ilm-table .usb-table_table { border-radius: 8px; } .ilm-table .usb-table .usb-table_body--row:last-child .usb-table_body--cell.remove-cell { border-bottom: 0px; } .ilm-table .usb-table .usb-table_body--row:last-child .usb-table .usb-table_header--row:last-child .usb-table_body--cell.remove-cell { border-bottom: 0px; } .ilm-table .usb-table_pagination { width: 100% !important; display: flex; justify-content: flex-end; } .ilm-table .usb-table_pagination--container { margin-top: 16px; } .ilm-table .usb-table_pagination--container .dropdown__btn { padding: 0.5rem 1.25rem 0.5rem 1rem; border: 1px solid rgb(205, 209, 226); } .ilm-table .usb-table_pagination .usb-button .usb-icon { margin-left: 0.25rem; margin-right: 0.25rem; } .ilm-table .usb-table_pagination .usb-table_pagination--page_count { color: rgb(72, 72, 97); } .ilm-table .usb-table_pagination--page_count { display: flex; flex-direction: row; flex-shrink: 0; padding: 0.75rem 0.75rem 0 1rem; height: 1.5rem; } .ilm-table .usb-table_pagination li button span.usb-table_pagination--chevron { width: 1rem; } .ilm-table .usb-table_pagination .table-pagination-nav-list { margin-top: 0; } .ilm-table .usb-table_pagination .table-pagination-nav-list li .usb-table_pagination--arrow { margin: 0 0.5rem; } .ilm-table .usb-table_pagination .table-pagination-nav-list li .usb-table_pagination--arrow:active { background: rgb(0, 30, 121); color: rgba(255, 255, 255, 0.78); opacity: 1; } .ilm-table .usb-table_pagination .table-pagination-nav-list li .usb-table_pagination--arrow:active .svg-icon svg { fill: white; } .ilm-table .usb-table_pagination .table-pagination-nav-list li .usb-table_pagination--arrow:disabled:active, .ilm-table .usb-table_pagination .table-pagination-nav-list li .usb-table_pagination--arrow:disabled { background: rgb(204, 204, 210); color: rgb(72, 72, 97); opacity: 0.78; } .ilm-table .usb-table_pagination .table-pagination-nav-list li .usb-table_pagination--arrow:disabled:active .svg-icon svg, .ilm-table .usb-table_pagination .table-pagination-nav-list li .usb-table_pagination--arrow:disabled .svg-icon svg { fill: rgb(72, 72, 97); } .ilm-table .usb-table_pagination .table-pagination-nav-list li .usb-table_pagination--arrow .usb-icon svg { height: 1rem; width: 1rem; } .ilm-table .usb-table_container { border: none; } .ilm-table .usb-table_container.usb-table_container-shadow--right:before { display: none; } .ilm-table .usb-table_container .usb-table_table .usb-table_header--row { border-bottom: 1px solid rgb(204, 204, 210); } .ilm-table .usb-table_container .usb-table_table.no-borders:not(.stackable) { border: 1px solid rgb(204, 204, 210); border-radius: 0.5rem; } .ilm-table .usb-table_container .usb-table_table.no-borders:not(.stackable).cell-size-default th { margin: auto 0 auto 0; border: none; } .ilm-table .usb-table_container .usb-table_table.no-borders:not(.stackable).cell-size-default .usb-table_accessor-cell-expander { padding: 0.75rem 0; align-items: center; justify-content: center; display: flex; } .ilm-table .usb-table_container .usb-table_header--row { place-content: center; border-radius: 0.5rem; border-bottom: 1px solid rgb(204, 204, 210); border-radius: 0.5rem 0.5rem 0 0; height: 58px; } .ilm-table .usb-table_container .usb-table_header--row .usb-table_header--cell { padding-top: 1rem; padding-bottom: 1rem; height: 58px; } .ilm-table .usb-table_container .usb-table_header--sort-button { line-height: 1.45; font-weight: 500; color: rgb(46, 46, 50); display: flex; align-items: center; gap: 0.75rem; font-size: 1rem; letter-spacing: 0.16px; } .ilm-table .usb-table_container .usb-table_header--sort-button .sort-icon { float: none; fill: rgb(45, 45, 62); height: 1.25rem; width: 1.25rem; } .ilm-table .usb-table_container .usb-table_header--sort-button .sort-icon svg { color: rgb(46, 46, 50); } .ilm-table .usb-table_container .usb-table_body--row { color: rgb(45, 45, 62); } .ilm-table .usb-table_container .usb-table_body--row .usb-table_body--cell { font-size: 1rem; font-weight: 400; line-height: 1.6; letter-spacing: 0.16px; color: rgb(45, 45, 62); } .ilm-table .usb-table_container .usb-table_body--row .usb-table_body--cell .table-expander svg { color: rgb(127, 127, 132); fill: rgb(76, 76, 80); } .ilm-table .usb-table_container .usb-table_body--row .usb-table_body--cell a { color: rgb(35, 90, 228); font-size: 1rem; font-style: normal; font-weight: 400; line-height: 1.6; letter-spacing: 0.16px; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; } .ilm-table.usb-table { width: fit-content; } .ilm-table.usb-table .table-actions-row { border: 0; } .ilm-table.usb-table .table-actions-row.show-hide-modal-only, .ilm-table.usb-table .table-actions-row.toolbar-only { justify-content: start; } .ilm-table.usb-table .table-actions-row .table-toolbar .table-toolbar-button-group { padding-left: 0; margin-left: 0; } .ilm-table.usb-table .table-actions-row .table-toolbar .table-toolbar-button-group .show-hide-modal { margin-left: 0; } .ilm-table .story-expanded-cell-group { padding-left: 1.5rem; padding-right: 1.5rem; display: flex; flex-direction: column; flex-wrap: wrap; } .ilm-table .story-expanded-cell-row { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; } .ilm-table .story-expanded-cell-padding { padding-bottom: 1rem; } .ilm-table .story-expanded-cell-bold { font-size: 0.875rem; font-weight: 400; } .ilm-table .usb-button[aria-disabled=true]:focus::before { border: none; } @media screen and (max-width: 1280px) { .ilm-table #empty-table-usb-table_default--id { min-width: auto; } .usb-table .usb-dropdown { background-color: white; } .ilm-table .usb-table_pagination--container { flex-direction: row; } .ilm-table .usb-table_pagination { justify-content: flex-start; } #ilmportal-app .usb-table .usb-dropdown { margin-bottom: 2rem; max-width: 300px; } #ilmportal-app .responsive-stacked .usb-table_table.zebra-striped tbody tr { padding-left: 0px; padding-right: 0px; } } @media screen and (max-width: 767px) { .ilm-table .usb-table_container .usb-table_body--row .usb-table_body--cell { background-color: white; } .ilm-table #empty-table-usb-table_default--id { min-width: auto; } .usb-table .usb-dropdown { background-color: white; } .ilm-table .usb-table_pagination--container { flex-direction: row; } .ilm-table .usb-table_pagination { justify-content: flex-start; } #ilmportal-app .usb-table .usb-dropdown { margin-bottom: 2rem; max-width: 300px; } #ilmportal-app .responsive-stacked .usb-table_table.zebra-striped tbody tr { padding-left: 0px; padding-right: 0px; } } @media screen and (max-width: 42rem) { .ilm-table .usb-table_pagination--container { flex-direction: column; } #ilmportal-app .usb-table .usb-dropdown { max-width: 100%; } } .progress-container { height: 4px; width: 100%; border-radius: 2px; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; } .progress-container .progress-item { background-color: #CCCCD2; } .progress-container .progress-item.selected { background-color: rgb(35, 90, 228); } .progress-container .progress-item.selected:first-child { border-radius: 2px 0 0 2px; } .progress-container .progress-item.selected:last-child { border-radius: 0 2px 2px 0; } .progress-container-text { color: rgb(46, 46, 50); font-size: 0.875rem; font-weight: 400; line-height: 1.2; letter-spacing: 0.14px; margin: 6px 0 0 0; } .progress-container-percent { height: 4px; width: 100%; border-radius: 2px; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; background-color: #CCCCD2; } .progress-container-percent .progress-complete { background-color: rgb(35, 90, 228); border-radius: 2px; } .progress-container-percent-text { color: rgb(46, 46, 50); font-size: 0.875rem; font-weight: 400; line-height: 1.2; letter-spacing: 0.14px; margin: 6px 0 0 0; } .prevent-scroll { touch-action: none; -webkit-overflow-scrolling: none; overflow: hidden; overscroll-behavior: none; } .usb-modal-v2 { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9990; background: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; } .usb-modal-v2 .usb-modal-v2--container { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.12); border-radius: 0; transform: scale(1) perspective(0) translate(0) rotateX(0deg); opacity: 1; max-height: 75vh; background: #fff; } @media only screen and (min-width: 672px) { .usb-modal-v2 .usb-modal-v2--container { border-radius: 0.5rem; } } .usb-modal-v2--no-overlay { background-color: initial; } .usb-modal-v2--dialog { height: 100vh; height: -webkit-fill-available; max-width: 100vw; max-height: 100vh; position: relative; width: 100vw; z-index: 9990; } @media only screen and (min-width: 900px) { .usb-modal-v2--dialog { height: auto; width: 60vw; max-width: 37rem; } .form-modal-container .usb-modal-v2--dialog { height: 98vh; width: 50rem; max-width: 50rem; } .form-modal-container .usb-modal-v2--dialog .usb-modal-v2--container { height: 98vh; max-height: 98vh; } .form-modal-container .usb-modal-v2--dialog .usb-modal-v2--container .usb-modal-v2--body { max-height: 76vh; } } @media only screen and (min-width: 770px) and (max-width: 899px) { .usb-modal-v2--dialog { height: auto; width: 70vw; } } @media only screen and (min-width: 672px) and (max-width: 769px) { .usb-modal-v2--dialog { height: auto; width: 80vw; } } .usb-modal-v2--close { cursor: pointer; display: flex; justify-content: flex-end; } .usb-modal-v2--close .usb-button { cursor: pointer; padding: 0 !important; margin: 0 !important; top: 1rem !important; right: 1rem !important; height: -moz-fit-content; height: fit-content; align-self: center; align-self: flex-end; width: -moz-min-content; width: min-content; } .usb-modal-v2--close .usb-button .usb-icon { margin-right: 0 !important; } .usb-modal-v2--close .usb-button svg { color: #4c4c50; } .usb-modal-v2--close .usb-button:hover { background: #fff; } .usb-modal-v2--container { border: 1px solid #eeeef2; border-radius: 0.5rem; display: flex; flex-direction: column; align-content: center; justify-content: flex-start; font-family: Circular-USB, sans-serif; max-width: 100vw; min-width: 30vw; position: relative; opacity: 0; will-change: transform; will-change: opacity; transition: transform 0.5s ease, opacity 0.5s ease; transform: scale(1) perspective(0) translate(0) rotateX(0deg); perspective: 4; width: 100%; min-height: 100vh; min-height: -webkit-fill-available; } @media only screen and (min-width: 672px) { .usb-modal-v2--container { max-width: 80vw; height: auto; min-height: auto; min-height: -webkit-fit-content; } } .usb-modal-v2--header { display: flex; flex-shrink: 0; justify-content: space-between; width: 100%; padding: 0.5rem 1rem 0; margin-bottom: 1rem; } @media screen and (min-width: 672px) { .usb-modal-v2--header { padding: 0.5rem 2.5rem 0; margin-bottom: 1rem; } } .usb-modal-v2--header h1 { float: "left"; margin: 0; text-transform: none; font-size: 1.25rem !important; line-height: 1.5 !important; color: #2e2e32; font-family: Circular-USB, sans-serif; font-weight: 500; font-size: 1.5rem; line-height: 1.25; } @media screen and (min-width: 672px) { .usb-modal-v2--header h1 { font-size: 1.25rem; line-height: 1.5; } } .usb-modal-v2--body { display: flex; flex-direction: column; padding: 0 1rem 2rem; color: #4c4c50; line-height: 1.25; letter-spacing: normal; font-size: 1rem; font-weight: 500; -ms-overflow-style: -ms-autohiding-scrollbar; overflow-y: auto; } @media screen and (min-width: 672px) { .usb-modal-v2--body { min-height: 8vh; max-height: 30vh; padding: 0 2.5rem 2.5rem; } } .usb-modal-v2--footer { background: #f5f5fa; border-radius: 0 0 0.5rem 0.5rem; display: flex; justify-content: flex-end; align-self: flex-end; font-family: Circular-USB, sans-serif; width: 100%; overflow-y: visible; margin-top: auto; } .usb-modal-v2--footer .usb-button-group { padding: 1rem; width: 100%; } @media screen and (min-width: 672px) { .usb-modal-v2--footer .usb-button-group { flex-direction: row-reverse; } .usb-modal-v2--footer .usb-button-group .usb-button:nth-child(3) { margin-left: 0; margin-right: auto; } } .usb-modal-v2--footer .reverse { flex-direction: row-reverse; justify-content: flex-start; } .parent-form-rendering-engine { margin-top: 0px; margin-bottom: 32px; border-radius: 8px; border: 1px solid rgb(205, 209, 226); background: rgb(255, 255, 255); } .focusLayout:focus { outline: 2px solid #0A41C5; outline-offset: 2px; } .rendering-engine { background-color: #F1F5FB; } .rendering-engine-app { margin-bottom: 32px; margin: 0px auto; max-width: 1280px; min-height: auto; word-wrap: break-word; margin: auto; border-radius: 4px; font-style: normal; font-weight: 500; font-size: 1.25rem; padding: 2px 30px 0px 30px; display: grid; } .rendering-engine-app .section-container .section-spacing { margin: 0px auto; max-width: 1280px; min-height: auto; word-wrap: break-word; margin: auto; border-radius: 4px; font-style: normal; font-weight: 500; font-size: 1.25rem; } .rendering-engine-app .section-container .row { display: inline-block; width: 48.7%; vertical-align: top; } .rendering-engine-app .section-container .row .field-wrapper { display: grid; grid-template-columns: auto 24px; align-items: center; gap: 10px; } .rendering-engine-app .section-container .row.row--full-width { width: 100%; max-width: 100%; } .rendering-engine-app .section-container .row.row--50-width { width: 100%; } .rendering-engine-app .section-container .row.row--75-width { width: 100%; } .rendering-engine-app .section-container .row.row-25-width { width: 100%; } .rendering-engine-app .section-container .row:nth-child(odd) { margin: 0px 0px 20px 0px; } .rendering-engine-app .section-container .row:nth-child(even) { margin: 0px 0px 20px; } .rendering-engine-app .section-container .row .usb-menu-composable__trigger__label-text > span { font-weight: 400; } .rendering-engine-app .section-container .row .usb-card-section--cta-button--container-bottom .button--layout_row { margin-left: 16px; } .rendering-engine-app .section-container .row .card-vaidateion-error { color: rgb(207, 42, 54); font-size: 12px; } .rendering-engine-app .section-container .row .read-only .usb--radio-fieldset, .rendering-engine-app .section-container .row .read-only .usb--checkbox-wrapper, .rendering-engine-app .section-container .row .read-only .usb--checkbox--fieldset, .rendering-engine-app .section-container .row .read-only .usb-menu-composable__container__list > li, .rendering-engine-app .section-container .row .read-only .usb-accumulator > * { pointer-events: none; cursor: not-allowed; } .rendering-engine-app .section-container .row.row--full-width:nth-child(odd) { margin: 0px 0px 20px; } .rendering-engine-app .section-container .card-container .row:nth-child(odd) { margin: 0px 20px 20px 0px; } .rendering-engine-app .section-container .card-container .row:nth-child(even) { margin: 0px 0px 20px; } .rendering-engine-app .section-container .page-section-title { color: #2D2D3E; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; /* 150% */ margin: 0px; } .rendering-engine-app .section-container .section-text-container { margin-bottom: 20px; } .rendering-engine-app .section-container .section-message { color: rgb(76, 76, 80); font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; margin: 12px 0px 0 0px; } .rendering-engine-app .section-container .section-message-description { color: rgb(76, 76, 80); font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; margin: 0px 0px 0 0px; } .rendering-engine-app .section-container .document-container-file-list { width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; padding: 0; } .rendering-engine-app .section-container .document-container-file-list-item { text-align: left; width: 100%; max-width: 100%; box-sizing: border-box; display: grid; column-gap: 12px; align-items: start; } .rendering-engine-app .section-container .document-container-file-list-item-name { width: 100%; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; } .rendering-engine-app .section-container .document-container-file-list-item-text { width: 100%; min-width: 0; overflow-wrap: anywhere; word-break: break-word; width: 200px; } .rendering-engine-app .section-container .document-container-file-list-item-uploaded-by { width: 100%; min-width: 0; max-width: 200px; overflow-wrap: anywhere; word-break: break-word; } .rendering-engine-app .section-container .document-container-file-list-item-menu button { border: none; } .rendering-engine-app .section-container .document-container { border: 1px solid rgb(205, 209, 226); border-radius: 0.5rem; background-color: rgb(247, 247, 250); padding: 20px 16px; width: 100%; } .rendering-engine-app .section-container .document-container .usb-menu-composable__container__list li .list-item-unselected { color: rgb(45, 45, 62); align-items: center; display: flex; gap: 0.5rem; } .rendering-engine-app .section-container .document-container-heading { height: auto; margin: 0; font-size: 1rem; color: rgb(0, 0, 0); font-weight: 500; } .rendering-engine-app .section-container .document-container-description { font-size: 0.875rem; font-weight: 400; line-height: 1.3; color: rgb(45, 45, 62); margin-bottom: 0; } .rendering-engine-app .section-container .document-container-notification { margin-top: 0.75rem; } .rendering-engine-app .section-container .document-container-file-list-item { box-sizing: border-box; display: flex; margin: 0.75rem 0; padding: 0.75rem; width: 100%; min-height: auto; height: auto; justify-content: space-between; align-items: center; grid-gap: 0.5rem; gap: 0.5rem; background: rgb(255, 255, 255); border: 1px solid rgb(205, 209, 226); border-radius: 0.5rem; } .rendering-engine-app .section-container .document-container-file-list-item-name { display: flex; align-items: center; font-size: 1rem; font-weight: 400; width: 400px; margin: 0; } .rendering-engine-app .section-container .document-container-file-list-item-name .fileicon { margin-right: 0.5rem; } .rendering-engine-app .section-container .document-container-file-list-item-name .svg-icon svg.single { height: 2rem; width: 2rem; } .rendering-engine-app .section-container .document-container-file-list-item-name .svg-icon svg.single path:first-of-type { fill: #555; } .rendering-engine-app .section-container .document-container-file-list-item-name .svg-icon svg.single path { fill: white; } .rendering-engine-app .section-container .document-container-file-list-item-uploaded-by, .rendering-engine-app .section-container .document-container-file-list-item-uploaded-time { margin: 0; font-size: 0.75rem; font-weight: 400; min-height: 1rem; color: rgb(72, 72, 97); } .rendering-engine-app .section-container .document-container-file-list-item-menu { margin: 0; } .rendering-engine-app .section-container .document-container .fileupload_footer { display: start; justify-content: end; margin-top: 24px; } .rendering-engine-app .section-container .document-container .fileupload_footer .usb-icon { margin: 0px; } .rendering-engine-app .section-container .card-container.single-product { background: unset; border: unset; padding-bottom: 0; margin-bottom: 0; } .rendering-engine-app .section-container .card-container { background-color: #f7f7fa; padding: 1.25rem 1rem; border-radius: 0.75rem; overflow: inherit; display: flex; flex-direction: column; margin: 1.25rem 0; border: 1px solid #ccccd2; border-radius: 8px; border: 1px solid var(--us-bank-grays-gray-30, #CDCDD3); background: var(--us-bank-grays-gray-10, #F7F7FA); } .rendering-engine-app .section-container .card-container .usb--select--wrapper .usb--select--container .usb--select, .rendering-engine-app .section-container .card-container .usb--select--wrapper .usb--select--container, .rendering-engine-app .section-container .card-container .usb-text_area--wrapper { background-color: transparent; } .rendering-engine-app .section-container .card-container .read-only { pointer-events: not-allowed; } .rendering-engine-app .section-container .button--layout_row { margin-left: 0px; border-radius: 8px; } .rendering-engine-app .section-container .button--layout_row .usb-icon.svg-icon.usb-button--icon.default { margin-right: 0; } .rendering-engine-app .section-container .card-container { display: block; width: 100%; overflow: visible; } .rendering-engine-app .section-container .card-container .action-type { float: right; } .rendering-engine-app .section-container .card-container .action-type .usb-button.button--small { margin: 0px; } .rendering-engine-app .section-container .card-container .action-type div { display: inline-block; } .rendering-engine-app .section-container .card-container .action-type .usb-button.button--small .usb-icon { margin: 0px; } .rendering-engine-app .section-container .card-container.white-background { width: 100% !important; display: block; } .rendering-engine-app .data-group { margin-bottom: 0; } .usb-tabs--vertical .tabs__list { width: 312px; display: inline-block; vertical-align: top; } .usb-tabs .tabs__panels { width: 936px; display: inline-block; margin-left: 32px; } .usb-tabs .tabs__panel { padding: 0; } .usb-tabs--vertical { margin: 0px auto; width: 1280px; } .usb-tabs .tabs__tab[aria-selected=true] { border-bottom: 1px solid var(--utility-subdued, #CCCCD2); background: rgba(170, 170, 209, 0.12); } .usb-tabs .tabs__tab { padding-left: 1rem !important; text-align: left !important; } .document-container .modal-footer-container { display: flex; justify-self: end; } .document-container .usb-modal-v2--footer .usb-button-group { padding: 0; width: 100%; display: flex; } .document-container .usb-modal-v2--dialog { height: 90vh; max-height: 90vh; max-width: auto; width: 60vw; } .document-container .usb-modal-v2--body { max-height: 65vh; } .document-container .modal-container .usb-button.button--text { margin: 0; } .document-container .modal-container .document-upload-catogorytype { margin-bottom: 1rem; } .document-container .delete-modal-container { display: flex; justify-content: center; } .document-container .delete-modal-container .usb-modal-v2--dialog { height: auto; } .document-container .delete-modal-container .modal-footer-container { padding: 1rem; gap: 0.75rem; } .form-notification-container { width: 1280px; margin: 0 auto; margin-bottom: 2rem; } .form-notification-container .usb-children-notification { align-items: center; display: flex; } .form-notification-container-inline { margin: 0 auto; margin-bottom: 2rem; } .form-notification-container-inline .usb-children-notification { align-items: center; display: flex; } .polling-spinner { display: flex; gap: 20px; align-items: center; margin-left: 2rem; } .polling-spinner .usb-loading-spinner-container.default { width: 30px; height: 30px; overflow: hidden; } .loader-container .save-submit-loader { display: flex; width: 469px; height: 222px; padding: 2.5rem 0; flex-direction: column; justify-content: center; align-items: center; gap: 1.75rem; flex-shrink: 0; background: rgb(255, 255, 255); border-radius: 0.5rem; border: 1px solid rgb(235, 239, 246); box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.12), 0px 2px 4px -1px rgba(0, 0, 0, 0.12); } .rendering-engine-app { padding: 32px 32px 0px 32px; } .rendering-engine-app .section-container .usb--checkbox-group--legend, .rendering-engine-app .section-container .usb--radio-legend { font-weight: normal; color: rgb(99, 99, 127); } .rendering-engine-app .section-container .row { width: 533px; display: block; display: grid; grid-template-columns: auto min-content; align-items: center; } .rendering-engine-app .section-container .row .tool-tip-container { margin-left: 8px; } .rendering-engine-app .section-container .row:nth-child(odd) { margin-bottom: 20px; } .rendering-engine-app .section-container .row:nth-child(even) { margin-bottom: 20px; } .rendering-engine-app .section-container .row .usb-date_picker { padding: 0px; } .rendering-engine-app .section-container .row .usb--select--wrapper { margin-top: 0; } .rendering-engine-app .section-container .usb-readonly-accumulator { font-weight: normal; color: rgb(99, 99, 127); list-style-type: disc; margin-left: 20px; font-size: 1rem; } .rendering-engine-app .section-container .usb-readonly-accumulator li { padding: 5px 0; } .rendering-engine-app .section-container .page-container { width: 100%; margin-bottom: 44px; } .rendering-engine-app .section-container .page-container .error:first-child { margin: 0px; padding: 16px 16px 12px 16px; } .rendering-engine-app .section-container .page-container .usb-notification > .error > div { margin-right: 0px; } .rendering-engine-app .section-container .page-container .usb-notification > .error ul { margin: 0px; list-style-position: inside; } .rendering-engine-app .section-container .page-container .usb-notification > .error .notification--content-group { white-space: pre-wrap; } .rendering-engine-app .section-container .page-container .usb-notification .usb-children-notification .usb-icon { padding: 0; } .rendering-engine-app .section-container .page-container .usb-notification h2 { font-weight: 400; color: #2D2D3E; font-size: 14px; font-style: normal; line-height: 21px; /* 150% */ } .rendering-engine-app .section-container .page-container .usb-notification { margin-top: 8px; margin-bottom: 12px; } .rendering-engine-app .section-container .page-container .page-title-container { display: flex; align-items: center; gap: 0.75rem; } .rendering-engine-app .section-container .page-container .page-title-container .edit-task-button { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 500; white-space: nowrap; cursor: pointer; } .rendering-engine-app .section-container .page-container .page-title { margin: 0; font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 20px; font-style: normal; font-weight: 500; line-height: 130%; /* 26px */ color: #484861; } .rendering-engine-app .section-container .page-container .page-description { color: #63637F; font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; margin: 12px 0; font-weight: 400; line-height: 160%; /* 25.6px */ letter-spacing: 0.16px; } .rendering-engine-app .section-container .page-container .page-description * { background-color: white; overflow: hidden; } .rendering-engine-app .section-container .form-modal-container .card-container .loader-container { width: 50rem; max-width: 50rem; } .rendering-engine-app .section-container .form-modal-container .card-footer-buttons { display: flex; gap: 1.25rem; flex-direction: row-reverse; } .rendering-engine-app .section-container .form-modal-container .modal-submit-loader { z-index: 9991; } .header_container { padding: 24px 0 27px 0; width: 1280px; margin: 0 auto; } .header_container .onboardingTitle { color: var(--us-bank-grays-gray-70, #6e6e6e); font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ letter-spacing: 0.84px; text-transform: uppercase; } .header_container .headerContent .taskName .taskHeader { font-size: 28px; font-style: normal; font-weight: 500; line-height: 35px; /* 125% */ margin: 8px 0px; } .header_container .headerContent .taskName .taskSubHeader { color: var(--label-mid, #4c4c50); font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; /* 150% */ } .header_container .headerContent { display: flex; justify-content: space-between; column-gap: 1.25rem; } .header_container .headerContent .taskName { width: 720px; } .header_container .taskHeader { height: auto; color: rgb(0, 30, 121); font-size: 1.75rem; font-weight: 500; } .header_container .taskSubHeader { width: 720px; height: auto; max-width: none; color: rgb(72, 72, 97); font-size: 1rem; font-weight: 400; letter-spacing: 0; line-height: 1.6 !important; } .notification--content-single { margin: 0px; } .is-read-only .button__date-picker .usb-icon { display: none; } @media (max-width: 768px) { .usb-tabs--vertical { width: auto; display: grid; grid-gap: 32px; } .usb-tabs--vertical .tabs__list { width: 100%; } .usb-tabs .tabs__panels { width: 100%; padding: 0px; margin: 0px; } .rendering-engine-app .section-container .row { width: 100%; } } #USBMultiSelect-multi-select-error { margin-top: 1rem; margin-bottom: 1rem; } .errorMessageLayout { display: flex; flex-direction: column; } .usb-tabs .tabs__panel:focus::before { border: none !important; border-radius: 0 !important; } .responsive-tab-toggle, .mobile-task-indicator { display: none; } .rendering-engine-app .section-container .document-container { line-height: 21px; } .rendering-engine-app .section-container .document-container .usb-menu-composable__trigger__label { transform: rotate(90deg); } .rendering-engine-app .section-container .document-container-description { color: #2C2C2C; font-size: 14px; font-style: normal; font-weight: 400; line-height: 21px; /* 150% */ padding-top: 4px; } .rendering-engine-app .section-container .document-error { border-radius: 8px; border: 1px solid rgb(207, 42, 54); } .rendering-engine-app .section-container .document-error .document-container-heading { color: rgb(207, 42, 54); font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; /* 150% */ } .rendering-engine-app .section-container .document-error .document-error-message { color: rgb(207, 42, 54); /* USB Circular/Caption */ font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 0.75rem; font-style: normal; letter-spacing: 0.24px; align-items: center; display: flex; padding-top: 4px; } .rendering-engine-app .section-container .document-error .document-error-icon { margin-right: 3px; } .rendering-engine-app .section-container .document-error .document-error-icon svg { height: 12px; width: 12px; } .rendering-engine-app .section-container .document-error-message { display: none; } .error-card { background: white; display: flex; align-items: center; justify-content: center; font-size: 20px; padding: 48px 32px; width: 100%; color: #555; text-align: center; font-size: 14px; font-style: normal; font-weight: 400; line-height: 21px; /* 150% */ height: auto; margin-bottom: 32px; } .error-refresh-button { margin-top: 24px; } .error-warning-icon { margin-bottom: 8px; } .error-warning-icon svg { fill: #858585; } .error-tasklist { background: white; } @media (min-width: 768px) and (max-width: 1280px) { .ilm-table.usb-table { width: 100%; } .mobile-task-indicator { display: block; color: #63637F; display: flex; align-items: center; gap: 10px; /* USB Circular/Superhead */ font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ letter-spacing: 0.84px; text-transform: uppercase; margin-bottom: 12px; } .form-notification-container { width: 100%; } .rendering-engine-app .section-container .card-container { width: 100%; } .usb-tabs--vertical { width: 100%; } .usb-tabs--vertical .tabs__list { width: 100%; margin-bottom: 32px; } .usb-tabs .tabs__panels { width: 100%; margin: 0px; } .dashboard-error-container { max-width: 100%; } .dashboard_container { padding: 0 32px; max-width: 100%; min-height: calc(100vh - 390px); } .dashboard_container .inprogress-text { margin-bottom: 2rem; } .form_container { max-width: 100%; padding: 0 32px; min-height: calc(100vh - 345px); } .header_container { width: 100%; } .header_container .taskSubHeader { width: 100%; } .header_container .headerContent .taskName { width: 100%; } .rendering-engine-app .section-container .page-container { width: 100%; } .rendering-engine-app .section-container .row.row--full-width { width: 100%; } .rendering-engine-app .section-container .document-container { width: 100%; } .rendering-engine-app .section-container .document-container-file-list-item-name { width: calc(100% - 50px); } .rendering-engine-app .document-container-file-list-item-uploaded-by { display: none; } .rendering-engine-app .section-container .document-container-file-list-item-uploaded-by { display: none; } .rendering-engine-app .document-container-file-list-item-uploaded-time { display: none; } .rendering-engine-app .section-container .document-container-file-list-item-text { width: 100%; word-break: break-word; } .rendering-engine-app { padding: 16px 16px 0px 16px; } .rendering-engine-app .section-container .row { width: 50%; } .page-container { width: 200px; } .footer-buttons .usb-button.button--standard--heavy { margin: 0 0 12px 0; } .icon-left.button--layout_row.modal_close_icon { width: 40px; } .document-container .usb-modal-v2--dialog { height: auto; } .show .tabs__list { display: block; } .hide .tabs__list { display: none; } .responsive-tab-toggle { display: block; align-items: center; display: flex; gap: 10px; justify-content: center; padding: 16px 8px; color: #0A41C5; font-size: 14px; font-style: normal; font-weight: 500; line-height: 14px; cursor: pointer; margin-bottom: 32px; width: auto; margin-left: 8px; } .responsive-tab-toggle .usb-icon.svg-icon.default svg { height: 16px; width: 16px; fill: #0A41C5; } } @media (max-width: 767px) { .ilm-table.usb-table { width: 100%; } .mobile-task-indicator { display: block; color: #63637F; display: flex; align-items: center; gap: 10px; /* USB Circular/Superhead */ font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ letter-spacing: 0.84px; text-transform: uppercase; margin-bottom: 12px; } .form-notification-container { width: 100%; } .rendering-engine-app .section-container .card-container { width: 100%; } .dashboard-error-container { max-width: 100%; } .dashboard_container { padding: 0 32px; max-width: 100%; min-height: calc(100vh - 330px); } .dashboard_container .inprogress-text { margin-bottom: 2rem; } .form_container { max-width: 100%; padding: 0 32px; } .header_container { width: 100%; } .header_container .taskSubHeader { width: 100%; } .header_container .headerContent .taskName { width: 100%; } .rendering-engine-app .section-container .page-container { width: 100%; } .rendering-engine-app .section-container .row.row--full-width { width: 100%; } .rendering-engine-app .section-container .document-container { width: 100%; } .rendering-engine-app .section-container .document-container-file-list-item-name { width: calc(100% - 50px); } .rendering-engine-app .document-container-file-list-item-uploaded-by { display: none; } .rendering-engine-app .section-container .document-container-file-list-item-uploaded-by { display: none; } .rendering-engine-app .document-container-file-list-item-uploaded-time { display: none; } .rendering-engine-app .section-container .document-container-file-list-item { overflow-wrap: anywhere; } .rendering-engine-app .section-container .document-container-file-list-item-text { width: 100%; word-break: break-word; } .rendering-engine-app .section-container .button--layout_row { width: 100%; } .rendering-engine-app { padding: 16px 16px 0px 16px; } .rendering-engine-app .section-container .row { width: 100%; } .page-container { width: 200px; } .footer-buttons .usb-button-group.default { display: grid; } .footer-buttons .usb-button.button--standard--subtle { margin: 0 0 16px 0; } .footer-buttons .usb-button.button--standard--heavy { margin: 0 0 12px 0; } .icon-left.button--layout_row.modal_close_icon { width: 40px; } .document-container .usb-modal-v2--dialog { height: auto; width: calc(100vw - 32px); } .show .tabs__list { display: block; } .hide .tabs__list { display: none; } .responsive-tab-toggle { display: block; overflow: hidden; align-items: center; display: flex; gap: 10px; justify-content: center; padding: 16px 8px; color: #0A41C5; font-size: 14px; font-style: normal; font-weight: 500; line-height: 14px; cursor: pointer; margin-bottom: 32px; width: 100%; } .responsive-tab-toggle .usb-icon.svg-icon.default svg { height: 16px; width: 16px; fill: #0A41C5; } } @media (max-width: 672px) { .rendering-engine-app { display: block; } .dashboard_container { padding: 0 16px; } .back-button.usb-button { width: 100%; align-items: center; display: flex; justify-content: center; } .form_container { max-width: 100%; padding: 0 16px; } } .rendering-engine-app .upload-action-container.doc-grid-col3 { display: none !important; } @media screen and (max-width: 30rem) { .rendering-engine-app .upload-action-container--mobile.doc-grid-col3 { display: none !important; width: 0%; } } .delete-modal-container { display: flex; justify-content: center; } .delete-modal-container .usb-modal-v2--dialog { height: auto; } .delete-modal-container .usb-modal-v2--footer .usb-button-group { width: 100%; display: flex; } .delete-modal-container .modal-footer-container { display: flex; padding: 0; gap: 0.75rem; } .confirmation-modal-footer { display: flex; gap: 0.75rem; } .rendering-engine-app .usb-notification .notification--content-group, .rendering-engine-app .usb-notification .multiple-notification--text, .rendering-engine-app .usb-notification .multiple-notification--link, .rendering-engine-app .usb-notification .multiple-notification--link-text { white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .contact-card-container { width: 296px; height: 296px; justify-content: center; align-items: center; position: absolute; } .contact-card-container .contact-card { display: flex; width: 296px; height: 296px; padding: 1.5rem; flex-direction: column; align-items: flex-start; gap: 1rem; border: 1px solid white; border-radius: 0.25rem; background: rgb(255, 255, 255); box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 6px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.12); } .contact-card-container .contact-card-content { display: flex; padding-right: 0.5rem; align-items: center; } .contact-card-container .contact-card-content .contact-card-body { display: flex; width: 247px; flex-direction: column; align-items: flex-start; gap: 1.5rem; align-self: stretch; } .contact-card-container .contact-card-content .contact-card-body .contact-details { display: flex; width: 247px; flex-direction: column; align-items: flex-start; align-self: stretch; } .contact-card-container .contact-card-content .contact-card-body .contact-details-header { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; color: var(--label-vivid, #2C2C2C); font-style: normal; font-weight: 700; line-height: 24px; margin-bottom: 20px; /* 150% */ } .contact-card-container .contact-card-content .contact-card-body .contact-details-content { display: flex; align-items: flex-start; align-self: stretch; } .contact-card-container .contact-card-content .contact-card-body .contact-details-content-profile { width: 3.75rem; height: 3.75rem; } .contact-card-container .contact-card-content .contact-card-body .contact-details-content-profile-image { border-radius: 50%; flex-shrink: 0; } .contact-card-container .contact-card-content .contact-card-body .contact-details-content-info { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; flex: 1 0 0; } .contact-card-container .contact-card-content .contact-card-body .contact-details-content-info-name { display: flex; height: 1.25rem; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.75rem; align-self: stretch; color: var(--label-vivid, #2C2C2C); font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: 145%; /* 20.3px */ letter-spacing: 0.14px; margin: 0; } .contact-card-container .contact-card-content .contact-card-body .contact-details-content-info-role { color: var(--grays-gray-80, #4C4C50); font-size: 0.75rem; font-style: normal; font-weight: 400; line-height: 170%; /* 20.4px */ padding-left: 0.5rem; letter-spacing: 0.24px; } .contact-card-container .contact-card-content .contact-card-body .contact-details-content-info-email { display: flex; align-items: flex-start; gap: 0.5rem; align-self: stretch; } .contact-card-container .contact-card-content .contact-card-body .contact-details-content-info-email-icon svg { fill: var(--standard-subdued, #235AE4); width: 1.5rem; height: 1.5rem; } .contact-card-container .contact-card-content .contact-card-body .contact-details-content-info-email-link { color: var(--standard-subdued, #235AE4); font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: 20px; /* 142.857% */ text-decoration-line: underline; } .contact-card-container .contact-card-content .contact-card-body .contact-details-content-info-phone { display: flex; align-items: flex-start; gap: 0.5rem; align-self: stretch; } .contact-card-container .contact-card-content .contact-card-body .contact-details-content-info-phone-icon svg { fill: var(--standard-subdued, #235AE4); width: 1.5rem; height: 1.5rem; } .contact-card-container .contact-card-content .contact-card-body .contact-details-content-info-phone-number { color: var(--standard-subdued, #235AE4); font-size: 0.75rem; font-style: normal; font-weight: 500; line-height: 20px; /* 166.667% */ text-decoration-line: underline; padding-top: 2px; } .contact-card-container .contact-card-content .contact-card-body .contact-details-content-info-phone-helper-text { margin: 0px; color: var(--grays-gray-80, #4C4C50); font-size: 0.75rem; font-style: normal; font-weight: 400; line-height: 170%; /* 20.4px */ letter-spacing: 0.24px; } .contact-card-container .contact-card-content .contact-card-body .contact-details-footer-text { color: var(--label-muted, #66666A); font-size: 0.75rem; font-style: normal; font-weight: 400; line-height: 170%; /* 20.4px */ letter-spacing: 0.24px; } .contact-card .usb-avatar { height: 3rem; width: 3rem; } .usb-drawer--overlay .read-only-card { display: flex; padding: 1.5rem; align-items: flex-start; align-self: stretch; flex-direction: column; gap: 2rem; border-radius: 0.5rem; border: 1px solid rgb(204, 204, 210); background: #F7F7FA; } .usb-drawer--overlay .read-only-card .full-name { color: var(--token-label-vivid); font-size: 1rem; font-style: normal; font-weight: 500; line-height: 1.2; /* 150% */ } .usb-drawer--overlay .drawer-selected-authorized-individual-card { display: flex; flex-direction: column; gap: 1rem; background-color: white; border: 1px solid rgb(204, 204, 210); border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 1rem; } .usb-drawer--overlay .drawer-selected-authorized-individual-card > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; width: 100%; } .rendering-engine-app .section-container .card-container .card-footer-buttons { display: flex; gap: 1.25rem; } @media (max-width: 767px) { .create-authorized-individual-btn { position: relative; top: 0px !important; } } @media (min-width: 768px) and (max-width: 1024px) { .create-authorized-individual-btn { position: relative; top: -80px !important; } } @media (min-width: 1025px) and (max-width: 1439px) { .create-authorized-individual-btn { position: relative; top: -80px; } } @media (min-width: 1440px) { .create-authorized-individual-btn { position: relative; top: -144px; } } .create-authorized-individual-btn { position: relative; top: -144px; } .usb-drawer .no-drawer-table-data .create-authorized-individual-btn { position: relative; top: 0px; } .usb-drawer .usb-drawer--dialog .usb-drawer--container .usb-drawer--body.with-scrollable-footer { width: 100%; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; } .usb-drawer--header-content h1 { color: rgb(46, 46, 50); font-size: 1.25rem; font-style: normal; font-weight: 500; line-height: 1.3; } .usb-drawer--footer .drawer-footer-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; width: 100%; } .usb-drawer--footer .drawer-footer-buttons > .drawer-back { margin-right: auto; display: flex; align-items: center; } .usb-drawer .usb-drawer--dialog { width: 100% !important; } .usb-drawer .drawer-table { width: auto; } .usb-drawer .drawer-section-description { padding-top: 10px; padding-bottom: 20px; } .usb-drawer .usb-search-label { padding-bottom: 1.5rem; text-transform: none; line-height: 1.5; color: rgb(46, 46, 50); font-weight: 500; } .usb-drawer .table-selected-rows-label { color: rgb(72, 72, 97); font-style: normal; font-weight: 500; line-height: 1.5; letter-spacing: 0.5px; margin: 0; margin-bottom: 1rem; } .usb-drawer .drawer-input-width, .usb-drawer .drawer-checkbox-spacing { width: 60%; } .usb-drawer .accountAuthorizations { width: 30%; } .usb-drawer .usb--wrapper { width: 50%; } .usb-drawer .usb--select--wrapper { width: 50%; } .usb-drawer .add-authorized-individual-button { margin-top: 0.5rem; } .usb-drawer .usb-radio-group-horizontal .usb--radio-list { display: flex; align-items: flex-start; gap: 2rem; align-self: stretch; } .usb-drawer .usb--radio-legend { color: rgb(72, 72, 97); font-family: Circular-USB, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; gap: 0.25rem; padding-left: 0; padding-right: 20px; } .drawer-container .modal-submit-loader { z-index: 10000; } /* overrding css from shield reset */ html { overflow: hidden !important; } .page_heading { font-size: 3rem; text-align: center; } main { width: 100%; margin: 0px auto; } .dashboard_container { width: 1280px; margin: 0 auto; margin-top: 44px; } .dashboard_container__header { font-size: 1.75rem; padding-bottom: 2rem; color: rgb(0, 30, 121); font-weight: 500; margin: 0; line-height: 1.3; } .dashboard_container__description { font-size: 20px; } .dashboard_container__filter { display: inline-block; } .dashboard_container__filter .usb-button.button--text { margin: 0; } .dashboard_container__search { float: right; width: 288px; background-color: white; } .dashboard_container__search .form-control__search input[type=search] { height: 2.5rem; } .dashboard_container__content { display: grid; } .dashboard_container .inprogress-text { color: rgb(72, 72, 97); font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: 1.5; letter-spacing: 0.84px; text-transform: uppercase; margin: 0; margin-bottom: 1rem; } .loader-comp { display: flex; justify-content: center; align-items: center; height: 100vh; font-size: 2rem; } .back-button.usb-button { margin: 24px 0 0 0; padding: 8px; gap: 0px; line-height: 20px; } .back-button.usb-button .svg-icon { color: rgb(35, 90, 228); height: 20px; width: 20px; margin-right: 4px; } .form_container { width: 1280px; margin: 0 auto; position: relative; } .header_container .headerContent { display: flex; justify-content: space-between; column-gap: 1.25rem; } .header_container .headerContent .taskName { width: 720px; } .header_container .taskHeader { height: auto; color: rgb(0, 30, 121); font-size: 1.75rem; font-weight: 500; } .header_container .taskSubHeader { width: 720px; height: auto; max-width: none; color: rgb(72, 72, 97); font-size: 1rem; font-weight: 400; letter-spacing: 0; line-height: 1.6 !important; } .header_container .card-detail { display: flex; column-gap: 2rem; white-space: nowrap; } .header_container .card-header { color: var(--label-mid, #4c4c50); font-size: 14px; font-style: normal; font-weight: 400; line-height: 170%; /* 23.8px */ letter-spacing: 0.14px; letter-spacing: 0.14px; gap: 8px; display: flex; } .header_container .card-value { color: var(--label-muted, #66666a); font-size: 12px; font-style: normal; font-weight: 400; line-height: 170%; /* 20.4px */ letter-spacing: 0.24px; } .header_container .statusicon { margin-right: 10px; } .header_container .icons { margin-top: 0; left: 0; position: relative; top: 0; margin-right: 0.5rem; } .icon-class { width: 1.25rem; height: 1.25rem; padding-left: 0; padding-right: 0; font-style: normal; font-weight: 500; font-size: 0.875rem; line-height: 1.5; margin-right: 0.5rem; } .status_icon { height: 1.25rem; margin-right: 0.5rem; width: 1.25rem; } .header_container { padding: 24px 0 29px 0; } .header_container .onboardingTitle { color: var(--us-bank-grays-gray-70, #6e6e6e); font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ letter-spacing: 0.84px; text-transform: uppercase; } .header_container .headerContent .taskName .taskHeader { font-size: 28px; font-style: normal; font-weight: 500; line-height: 35px; /* 125% */ margin: 8px 0px; } .header_container .headerContent .taskName .taskSubHeader { color: var(--label-mid, #4c4c50); font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; /* 150% */ } .header_container .headerContent .card-container .statusCard { display: flex; width: 400px; padding: var(--space-l, 24px) var(--space-xl, 32px); justify-content: flex-start; align-items: flex-start; gap: var(--space-xl, 32px); border: 1px solid rgb(204, 204, 210); padding: 1.5rem 2rem; border-radius: 4px; } .usb-tabs .tabs__panel { padding: 0; } .error-card { background: white; display: flex; align-items: center; justify-content: center; font-size: 20px; padding: 48px 32px; width: 100%; color: #555; text-align: center; font-size: 14px; font-style: normal; font-weight: 400; line-height: 21px; /* 150% */ height: auto; margin-bottom: 32px; } .error-refresh-button { margin-top: 24px; } .error-warning-icon { margin-bottom: 8px; } .error-warning-icon svg { fill: #858585; } .error-tasklist { background: white; } .rendering-engine-tabs-container .usb-tabs .tabs__tab { padding-left: 1rem; } .rendering-engine-tabs-container .usb-tabs .tabs__panel:focus::before { border: none; border-radius: 0; } .rendering-engine-app .section-container .card-container .document-container { width: 100%; } .rendering-engine-app .section-container .document-container { line-height: 21px; } .rendering-engine-app .section-container .document-container .usb-menu-composable__trigger__label { transform: rotate(90deg); } .rendering-engine-app .section-container .document-container-description { color: #2c2c2c; font-size: 14px; font-style: normal; font-weight: 400; line-height: 21px; /* 150% */ padding-top: 4px; } .rendering-engine-app .section-container .document-error { border-radius: 8px; border: 1px solid rgb(207, 42, 54); } .rendering-engine-app .section-container .document-error .document-container-heading { color: rgb(207, 42, 54); font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; /* 150% */ } .rendering-engine-app .section-container .document-error .document-error-message { color: rgb(207, 42, 54); /* USB Circular/Caption */ font-family: Circular-USB, Arial, Helvetica, sans-serif; font-size: 0.75rem; font-style: normal; letter-spacing: 0.24px; align-items: center; display: flex; padding-top: 4px; } .rendering-engine-app .section-container .document-error .document-error-icon { margin-right: 3px; } .rendering-engine-app .section-container .document-error .document-error-icon svg { height: 12px; width: 12px; } .rendering-engine-app .section-container .document-error-message { display: none; } .no-data-found { text-align: center; padding: 10px; } .rendering-engine-delete-modal .modal_close_icon:hover, .rendering-engine-upload-modal .modal_close_icon:hover { background: transparent; } .dashboard-error-container { align-items: center; justify-content: center; margin: 0 auto; display: flex; width: 1280px; } .polling-error-container { margin: 0 auto; display: flex; width: 1280px; margin-top: 48px; margin-bottom: 100px; } .focusNotificationLayout { box-shadow: 0 0 0 2px #235ae4 inset; } .responsive-tab-toggle { display: none; } .mobile-task-indicator { display: none; } .rendering-engine-app .section-container .row .card-vaidateion-error { margin-top: 16px; } @media (min-width: 768px) and (max-width: 1280px) { .ilm-table.usb-table { width: 100%; } .mobile-task-indicator { display: block; color: #63637f; display: flex; align-items: center; gap: 10px; /* USB Circular/Superhead */ font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ letter-spacing: 0.84px; text-transform: uppercase; margin-bottom: 12px; } .form-notification-container { width: 100%; } .rendering-engine-app .section-container .card-container { width: 100%; } .usb-tabs--vertical { width: 100%; } .usb-tabs--vertical .tabs__list { width: 100%; margin-bottom: 32px; } .usb-tabs .tabs__panels { width: 100%; margin: 0px; } .dashboard-error-container { max-width: 100%; } .dashboard_container { padding: 0 32px; max-width: 100%; min-height: calc(100vh - 390px); } .dashboard_container .inprogress-text { margin-bottom: 2rem; } .form_container { max-width: 100%; padding: 0 32px; min-height: calc(100vh - 345px); } .header_container { width: 100%; } .header_container .taskSubHeader { width: 100%; } .header_container .headerContent .taskName { width: 100%; } .rendering-engine-app .section-container .page-container { width: 100%; } .rendering-engine-app .section-container .row.row--full-width { width: 100%; } .rendering-engine-app .section-container .document-container { width: 100%; } .rendering-engine-app .section-container .document-container-file-list-item-name { width: calc(100% - 50px); } .rendering-engine-app .document-container-file-list-item-uploaded-by { display: none; } .rendering-engine-app .section-container .document-container-file-list-item-uploaded-by { display: none; } .rendering-engine-app .document-container-file-list-item-uploaded-time { display: none; } .rendering-engine-app .section-container .document-container-file-list-item-text { width: 100%; word-break: break-word; } .rendering-engine-app { padding: 16px 16px 0px 16px; } .rendering-engine-app .section-container .row { width: 50%; } .page-container { width: 200px; } .footer-buttons .usb-button.button--standard--heavy { margin: 0 0 12px 0; } .icon-left.button--layout_row.modal_close_icon { width: 40px; } .document-container .usb-modal-v2--dialog { height: auto; } .show .tabs__list { display: block; } .hide .tabs__list { display: none; } .responsive-tab-toggle { display: block; align-items: center; display: flex; gap: 10px; justify-content: center; padding: 16px 8px; color: #0a41c5; font-size: 14px; font-style: normal; font-weight: 500; line-height: 14px; cursor: pointer; margin-bottom: 32px; width: 100%; } .responsive-tab-toggle .usb-icon.svg-icon.default svg { height: 16px; width: 16px; fill: #0a41c5; } } @media (max-width: 767px) { .ilm-table.usb-table { width: 100%; } .mobile-task-indicator { display: block; color: #63637f; display: flex; align-items: center; gap: 10px; /* USB Circular/Superhead */ font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ letter-spacing: 0.84px; text-transform: uppercase; margin-bottom: 12px; } .form-notification-container { width: 100%; } .rendering-engine-app .section-container .card-container { width: 100%; } .dashboard-error-container { max-width: 100%; } .dashboard_container { padding: 0 32px; max-width: 100%; min-height: calc(100vh - 330px); } .dashboard_container .inprogress-text { margin-bottom: 2rem; } .form_container { max-width: 100%; padding: 0 32px; } .header_container { width: 100%; } .header_container .taskSubHeader { width: 100%; } .header_container .headerContent .taskName { width: 100%; } .rendering-engine-app .section-container .page-container { width: 100%; } .rendering-engine-app .section-container .row.row--full-width { width: 100%; } .rendering-engine-app .section-container .document-container { width: 100%; } .rendering-engine-app .section-container .document-container-file-list-item-name { width: calc(100% - 50px); } .rendering-engine-app .document-container-file-list-item-uploaded-by { display: none; } .rendering-engine-app .section-container .document-container-file-list-item-uploaded-by { display: none; } .rendering-engine-app .document-container-file-list-item-uploaded-time { display: none; } .rendering-engine-app .section-container .document-container-file-list-item { overflow-wrap: anywhere; } .rendering-engine-app .section-container .document-container-file-list-item-text { width: 100%; word-break: break-word; } .rendering-engine-app .section-container .button--layout_row { width: 100%; } .rendering-engine-app { padding: 16px 16px 0px 16px; } .rendering-engine-app .section-container .row { width: 100%; } .page-container { width: 200px; } .footer-buttons .usb-button-group.default { display: grid; } .footer-buttons .usb-button.button--standard--subtle { margin: 0 0 16px 0; } .footer-buttons .usb-button.button--standard--heavy { margin: 0 0 12px 0; } .icon-left.button--layout_row.modal_close_icon { width: 40px; } .document-container .usb-modal-v2--dialog { height: auto; width: calc(100vw - 32px); } .show .tabs__list { display: block; } .hide .tabs__list { display: none; } .responsive-tab-toggle { display: block; align-items: center; display: flex; gap: 10px; justify-content: center; padding: 16px 8px; color: #0a41c5; font-size: 14px; font-style: normal; font-weight: 500; line-height: 14px; cursor: pointer; margin-bottom: 32px; width: 100%; } .responsive-tab-toggle .usb-icon.svg-icon.default svg { height: 16px; width: 16px; fill: #0a41c5; } } @media (max-width: 672px) { .rendering-engine-app { display: block; } .dashboard_container { padding: 0 16px; } .back-button.usb-button { width: 100%; align-items: center; display: flex; justify-content: center; } .form_container { max-width: 100%; padding: 0 16px; } } .app-flex-wrapper { min-height: 100vh; display: flex; flex-direction: column; } .app-main-content { flex: 1 0 auto; display: flex; flex-direction: column; } .footer-buttons { margin-top: 24px; } .footer-buttons .button--standard--subtle { margin-left: 20px; border-radius: 8px; } .footer-buttons button { margin-left: 0.5em; margin-bottom: 32px; } .without-left-nav .footer-buttons { float: none; margin: 0px auto; width: 1280px; } .without-left-nav .footer-buttons div { float: right; } .rendering-engine-sandbox .contact-card-container { top: 175px; left: 220px; } .body-container.with-left-nav .usb-tabs div.tabs__tab { pointer-events: none; cursor: not-allowed; color: rgb(99, 99, 127); font-size: 14px; font-style: normal; font-weight: 400; line-height: 145%; /* 20.3px */ letter-spacing: 0.14px; } .no-data-found { text-align: center; padding: 10px; } .loader-container { width: 100vw; height: 100vh; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 99; background: rgba(0, 0, 0, 0.4); top: 0px; left: 0px; } .row .usb-menu .usb-button.button--medium { min-height: 2.5rem; max-height: fit-content !important; line-height: 1.5; padding: 0.5rem 1.5rem; font-size: 1rem; white-space: normal; word-break: break-word; overflow-wrap: break-word; text-overflow: ellipsis; max-width: 100%; } .row .usb-readonly-textinput { font-weight: 400; font-size: 1rem; line-height: 1.5; } .row .usb-accumulator-chips-removable { max-height: none !important; } .row .usb-form-combobox_list.expanded { max-height: 300px; overflow-y: auto; z-index: 2; } .row .usb-search-bordered { border: 1px solid rgb(204, 204, 210); border-radius: 0.25rem; padding: 2rem 1.25rem; } .row .usb-radio-group-horizontal .usb--radio-list { display: flex; align-items: flex-start; gap: 2rem; align-self: stretch; }.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.usb-table{display:block;position:relative;width:100%}.usb-table .usb-table_dataType-currency{text-align:right}.usb-table .usb-table_accessor-cell-expander,.usb-table .usb-table_accessor-showsubrows{padding-right:0;padding-left:0}.usb-table .usb-table_accessor-cell-expander:focus-within,.usb-table .usb-table_accessor-showsubrows:focus-within{outline:none!important}.usb-table .usb-table_accessor-cell-expander.isStacked,.usb-table .usb-table_accessor-showsubrows.isStacked{border-top-color:var(--token-utility-subdued,#cdd1e2);border-radius:var(--token-rounded-sm,.25rem);border-top:var(--token-border-width-default,1px) solid transparent}.usb-table .usb-table_accessor-header-of-expanded-cell{border-top:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2);border-radius:var(--token-rounded-sm,.25rem)}.usb-table .usb-dropdown{margin-bottom:var(--token-spacing-18,4.5rem)}.usb-table .usb-dropdown [aria-expanded=true]{z-index:6}.usb-table_heading{color:var(--table-heading-text-color,#2d2d3e);font-weight:var(--token-font-weight-med,500);font-size:var(--token-font-size-lg,1.25rem);line-height:var(--token-line-height-lg,1.25)}.usb-table_caption,.usb-table_heading{font-family:var(--token-font-base,Circular-USB,Arial,Helvetica,sans-serif);margin-bottom:var(--token-spacing-3,.75rem)}.usb-table_caption{color:var(--table-caption-text-color,#2d2d3e);font-weight:var(--token-font-weight-reg,400);font-size:var(--token-font-size-base,1rem);line-height:var(--token-line-height-3xl,1.5);text-align:left}.usb-table_pagination{display:flex;justify-content:flex-end}.usb-table_pagination--container{display:flex;flex-direction:row;margin-top:var(--token-spacing-4,1rem)}.usb-table_pagination--container .dropdown__btn-selection,.usb-table_pagination--container.usb-dropdown .dropdown__btn{margin-right:var(--token-spacing-5,1.25rem)}.usb-table_pagination--container .button--standard--minimal,.usb-table_pagination--container.usb-button{display:flex;flex-direction:row;margin:0 var(--token-spacing-1,.25rem) 0 var(--token-spacing-1,.25rem);padding-top:var(--token-spacing-3,.75rem);font-size:var(--token-font-size-base,1rem);font-weight:var(--token-font-weight-bold,700);background-color:var(--table-pagination-arrow-background-color,#fff);color:var(--table-pagination-arrow,#484861)}.usb-table_pagination--page_count{display:flex;flex-direction:row;flex-shrink:0;padding-top:var(--token-spacing-3,.75rem);padding-left:var(--token-spacing-4,1rem);padding-right:var(--token-spacing-3,.75rem)}.usb-table_pagination--chevron{width:0}@media screen and (max-width:47.9375rem){.usb-table_pagination{justify-content:left;max-width:100%}.usb-table_pagination--container{flex-direction:column}.usb-table_pagination--container .usb-dropdown{margin-bottom:var(--token-spacing-4,1rem);width:-moz-fit-content;width:fit-content}.usb-table_pagination--container nav span{padding-left:0}}.usb-table_container:after,.usb-table_container:before{transition:opacity .25s ease;content:"";position:absolute;top:0;bottom:0;width:20px;opacity:0}.usb-table_container:before{background:linear-gradient(90deg,hsla(0,0%,100%,0),rgba(0,0,0,.25));right:0}.usb-table_container:after{background:linear-gradient(270deg,hsla(0,0%,100%,0),rgba(0,0,0,.25));left:0}.usb-table_container-shadow{position:relative}.usb-table_container-shadow--right:before{opacity:1;z-index:25}.usb-table_container-shadow--left{opacity:1;border-left:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2);border-radius:var(--token-rounded-md,.5rem);z-index:25}.usb-table_container--scroll{overflow:auto;border-radius:var(--token-rounded-md,.5rem)}.usb-table_table{border-collapse:initial;table-layout:auto;border:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2)}.usb-table_table.scroll-active{border-left:none}.usb-table_table td,.usb-table_table th{border-right:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2);border-bottom:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2)}.usb-table_table td:last-of-type,.usb-table_table th:last-of-type{border-right:none}.usb-table_table tr th:not(.isStacked):last-of-type{border-top-right-radius:var(--token-rounded-md,.5rem)}.usb-table_table tr th.table-sticky-header-border{border-bottom-color:var(--token-utility-mid,#7a7a95)}.usb-table_table thead tr{border-top-right-radius:var(--token-rounded-md,.5rem)}.usb-table_table thead tr,.usb-table_table thead tr th:first-of-type{border-top-left-radius:var(--token-rounded-md,.5rem)}.usb-table_table:not(.stackable) tbody tr:last-child{border-bottom-right-radius:var(--token-rounded-md,.5rem)}.usb-table_table:not(.stackable) tbody tr:last-child,.usb-table_table:not(.stackable) tbody tr:last-child td:first-of-type{border-bottom-left-radius:var(--token-rounded-md,.5rem)}.usb-table_table:not(.stackable) tbody tr:last-child td:last-of-type{border-bottom-right-radius:var(--token-rounded-md,.5rem)}.usb-table_table{border-radius:var(--token-rounded-md,.5rem)}.usb-table_table.cell-size-small td,.usb-table_table.cell-size-small th{padding-top:var(--token-spacing-1,.25rem);padding-bottom:var(--token-spacing-1,.25rem)}.usb-table_table.cell-size-small td.table-editable-cell,.usb-table_table.cell-size-small th.table-editable-cell{padding:0;vertical-align:middle}.usb-table_table.cell-size-large td,.usb-table_table.cell-size-large th{padding-top:var(--token-spacing-5,1.25rem);padding-bottom:var(--token-spacing-5,1.25rem)}.usb-table_table.cell-size-large td.table-editable-cell,.usb-table_table.cell-size-large th.table-editable-cell{padding:0;vertical-align:middle}.usb-table_table.cell-size-default td,.usb-table_table.cell-size-default th{padding-top:var(--token-spacing-3,.75rem);padding-bottom:var(--token-spacing-3,.75rem)}.usb-table_table.cell-size-default td.table-editable-cell,.usb-table_table.cell-size-default th.table-editable-cell{padding:0;vertical-align:middle}.usb-table_table.zebra-striped.scrollable .usb-table_body--subrow:nth-child(2n),.usb-table_table.zebra-striped.scrollable .usb-table_body--zebra{background-color:var(--table-row-secondary-background-color,#f1f5fb)}.usb-table_table.zebra-striped.scrollable.child-background-match-parent .usb-table_body--subrow{background-color:initial}.usb-table_table.zebra-striped.scrollable.child-background-match-parent .usb-table_body--subrowZebra{background-color:var(--table-row-secondary-background-color,#f1f5fb)}.usb-table_table.alt-header .usb-table_header--row{background-color:var(--table-header-background-color,#00004e)}.usb-table_table.alt-header .usb-table_header--cell,.usb-table_table.alt-header .usb-table_header--sort-button{color:var(--table-sort-button-color,#fff);border-left:none;border-bottom:none}.usb-table_table.alt-header .usb-table_header .usb-icon{fill:var(--table-sort-button-color,#fff)}.usb-table_table.alt-header.no-data .usb-table_header--row{background-color:var(--table-danger-background-color,#484861)}.usb-table_table.alt-header.stackable .usb-table_body--cell{background:linear-gradient(270deg,var(--table-stackable-background-color,#00004e) 0,var(--table-stackable-background-color,#00004e));background-repeat:no-repeat;background-size:50%}.usb-table_table.alt-header.stackable .usb-table_body--cell .stackable-header{padding-top:var(--token-spacing-2,.5rem);color:var(--table-stackable-row-text-color,#fff)}.usb-table_table.stackable{border:none;border-spacing:0 var(--token-spacing-6,1.5rem);margin-top:calc(var(--token-spacing-5, 1.25rem)*-2);table-layout:auto;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%;word-wrap:break-word}.usb-table_table.stackable .usb-table_header{display:none}.usb-table_table.stackable .usb-table_body--row{font-weight:var(--token-font-weight-reg,400);line-height:var(--token-line-height-3xl,1.5);padding:.7em 2vw;border-bottom:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2);margin-top:var(--token-spacing-2,.5rem)}.usb-table_table.stackable .usb-table_body--subrow{padding:0;margin:.7em 2vw}.usb-table_table.stackable .usb-table_body--cell{border-left:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2);border-right:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2);display:flex;flex-direction:row;justify-content:space-between}.usb-table_table.stackable .usb-table_body--cell:focus-within{outline:2px solid var(--table-interaction-color,#0058ff)!important;outline-offset:-2px}.usb-table_table.stackable .usb-table_body--cell:first-of-type{border-top:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2);border-left:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2);border-top-left-radius:var(--token-rounded-md,.5rem);border-top-right-radius:var(--token-rounded-md,.5rem)}.usb-table_table.stackable .usb-table_body--cell:last-of-type{border-bottom-left-radius:var(--token-rounded-md,.5rem);border-bottom-right-radius:var(--token-rounded-md,.5rem)}.usb-table_table.stackable .stackable-header{padding-top:var(--token-spacing-2,.5rem);font-weight:var(--token-font-weight-bold,700)}.usb-table_table.stackable .stackable-header:before{content:attr(data-column-header)}.usb-table_table.stackable .stackable-cell{padding-left:var(--token-spacing-3,.75rem);padding-top:var(--token-spacing-2,.5rem);text-align:left;white-space:normal;width:50%}.usb-table_table.stackable .stackable-cell .usb--checkbox-label-text{margin-top:-2px}.usb-table_table.stackable .remove-cell:nth-last-child(2){display:flex;flex-direction:row;justify-content:space-between}.usb-table_table.stackable .remove-cell:last-child{display:none}.usb-table_table.stackable .stackable-expanded-cell{border-left:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2);border-right:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2);border-bottom:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2)}.usb-table_table.stackable .stackable-expanded-cell:focus{outline:2px solid var(--table-interaction-color,#0058ff)}.usb-table_table.stackable .stackable-cell-expander{display:grid;margin-left:auto;margin-right:auto}.usb-table_table.stackable .stackable-cell-expand-button{margin-left:auto;margin-right:auto;font-size:var(--token-font-size-base,1rem);background:transparent}.usb-table_table.stackable .stackable-cell-expand-button:focus{outline:2px solid var(--table-interaction-color,#0058ff)}.usb-table_table.stackable .stackable-cell-expand-text{color:var(--table-stackable-expanded-text-color,#484861);font-weight:var(--token-font-weight-bold,700);vertical-align:top;margin-left:var(--token-spacing-2,.5rem)}.usb-table_table.stackable .table-input-value{padding-left:0}.usb-table_table.no-borders:not(.stackable){border-color:transparent}.usb-table_table.no-borders:not(.stackable) th{border-left-color:transparent;border-right-color:transparent}.usb-table_table.no-borders:not(.stackable) tr:first-child th{border-top-color:transparent}.usb-table_table.no-borders:not(.stackable) td{border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent}.usb-table_table.row-borders-only{border-color:transparent}.usb-table_table.row-borders-only th{border-left-color:transparent;border-right-color:transparent;border-top-color:transparent}.usb-table_table.row-borders-only tr:first-child th{border-top-color:transparent}.usb-table_table.row-borders-only tr:last-child{border-bottom:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2);border-bottom-left-radius:0;border-bottom-right-radius:0}.usb-table_table.row-borders-only td{border-right-color:transparent;border-left-color:transparent}.usb-table_table.row-borders-only td:first-of-type{border-top-color:transparent;border-left-color:transparent}.usb-table_table tbody,.usb-table_table thead,.usb-table_table tr{display:grid;grid-column:1/-1;grid-template-columns:subgrid}.usb-table_table td,.usb-table_table th{display:block}.usb-table_header--cell{color:var(--table-header-cell-text-color,#484861);padding-left:var(--token-spacing-6,1.5rem);padding-right:var(--token-spacing-6,1.5rem);text-align:left;white-space:normal;word-wrap:normal}.usb-table_header--cell.expanded-cell:nth-last-child(2){border-right:none;border-top-right-radius:var(--token-rounded-md,.5rem)}.usb-table_header--cell:focus-within{outline:2px solid var(--table-interaction-color,#0058ff);outline-offset:-2.25px}.usb-table_header--cell:last-child.expanded-cell{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px)}.usb-table_header--cell:last-child{border-bottom:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2)}.no-data .usb-table_header tr{background-color:var(--token-utility-subdued,#cdd1e2);border-top-left-radius:var(--token-rounded-sm,.25rem);border-top-right-radius:var(--token-rounded-sm,.25rem)}.usb-table_header--sort-button{background-color:initial;border:none;color:var(--table-header-cell-text-color,#484861);font-family:inherit;font-size:var(--token-font-size-base,1rem);font-weight:var(--token-font-weight-bold,700);padding:0;text-align:left;width:100%;display:flex;justify-content:space-between}.usb-table_header--sort-button:focus{outline:none}.usb-table_header--sort-button .sort-icon{float:right}.usb-table_header--sort-button .sort-icon--currency{margin-left:var(--token-spacing-3,.75rem)}.usb-table_header--sort-button *{pointer-events:none}.usb-table_body tr:last-of-type .usb-table_body--cell--expanded-cell:last-of-type{border-bottom:none}.usb-table_body--cell{padding-right:var(--token-spacing-6,1.5rem);padding-left:var(--token-spacing-6,1.5rem);text-align:left;white-space:normal;word-wrap:break-word}.usb-table_body--cell.reduce-cell:not(.isStacked):nth-last-child(2){border-right:none}.usb-table_body--cell--expanded-cell{grid-column-start:-1;grid-column-end:1;padding:var(--token-spacing-4,1rem);border-bottom:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2)}.usb-table_body--cell--expanded-cell:focus{outline:none}.usb-table_body--cell--expanded-cell:focus-within{outline:none!important}.usb-table_body--cell:first-child.toggle-first{padding-left:0;padding-right:0}.usb-table_body--cell:first-child.toggle-first:focus-within{outline:none!important}.usb-table_body--cell.reduce-cell:last-child,.usb-table_body--cell.remove-cell:nth-last-child(2){display:none}.usb-table_body--cell.table-row-checkbox-cell{padding-right:var(--token-spacing-3,.75rem);padding-left:var(--token-spacing-3,.75rem)}.usb-table_body--cell.stackable-table-row-checkbox-cell{background-color:var(--table-stackable-row-checkbox-cell-background-color,#f1f5fb)}.usb-table .usb-table_body--row,.usb-table .usb-table_header--row{background-color:var(--token-background-primary,#fff);color:var(--token-text-color-secondary,#484861);font-size:var(--token-font-size-base,1rem);font-weight:var(--token-font-weight-reg,400);line-height:var(--token-line-height-3xl,1.5)}.usb-table .usb-table_body--row:last-child,.usb-table .usb-table_body--row:last-child .usb-table_body--cell.not-stacked,.usb-table .usb-table_header--row:last-child,.usb-table .usb-table_header--row:last-child .usb-table_body--cell.not-stacked{border-bottom:none}.usb-table .usb-table_body--row:last-child .usb-table_body--cell.remove-cell,.usb-table .usb-table_header--row:last-child .usb-table_body--cell.remove-cell{border-bottom:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2)}.usb-table .child-cell-size-small .usb-table_body--subrow .usb-table_body--cell{padding-top:var(--token-spacing-1,.25rem);padding-bottom:var(--token-spacing-1,.25rem)}.usb-table .child-cell-size-large .usb-table_body--subrow .usb-table_body--cell{padding-top:var(--token-spacing-5,1.25rem);padding-bottom:var(--token-spacing-5,1.25rem)}.usb-table .child-cell-size-default .usb-table_body--subrow .usb-table_body--cell{padding-top:var(--token-spacing-3,.75rem);padding-bottom:var(--token-spacing-3,.75rem)}@media only screen and (min-width:48rem){.usb-table .usb-table_body--subrow_first{opacity:.999;box-shadow:inset 0 4px 6px -1px rgba(0,0,0,.12)}.usb-table .usb-table_body--subrow_last{opacity:.999;box-shadow:inset 0 -4px 6px -1px rgba(0,0,0,.12)}.usb-table .usb-table_body--subrow_first.usb-table_body--subrow_last{box-shadow:inset 0 4px 6px -1px rgba(0,0,0,.12),inset 0 -4px 6px -1px rgba(0,0,0,.12)}}.usb-table .usb-table_body--subrow_last td:first-of-type{border-bottom:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2)}.usb-table .no-data .usb-table_body tr{display:block}.usb-table .no-data td{padding:2rem;border-bottom:none}.usb-table_no-data{display:flex;flex-direction:row}.usb-table_no-data--container{display:flex;flex-direction:column;margin-top:var(--token-spacing-2,.5rem)}.usb-table_no-data--title{color:var(--table-danger-title-text-color,#00004e);font-size:var(--token-font-size-2xl,1.75rem);font-weight:var(--token-font-weight-bold,700)}.usb-table_no-data--text{display:flex;flex-direction:column;font-size:var(--token-font-size-lg,1.25rem);margin-top:var(--token-spacing-4,1rem);white-space:pre-wrap}.usb-table_no-data--button{margin-top:auto;margin-left:auto}.usb-table table:focus,.usb-table table:focus-within{outline:none}.usb-table table:focus-within td,.usb-table table:focus td{transition:outline-offset .2s linear;outline:none}.usb-table table:focus-within td:focus-within,.usb-table table:focus td:focus-within{outline:2px solid var(--table-interaction-color,#0058ff);outline-offset:-2.25px}.usb-table table:focus-within td[tabindex="0"].roleIsGrid,.usb-table table:focus td[tabindex="0"].roleIsGrid{outline:2px solid var(--table-interaction-color,#0058ff);outline-offset:-2.25px}.usb-table table:focus-within td[tabindex="-1"].roleIsGrid,.usb-table table:focus td[tabindex="-1"].roleIsGrid{outline:2px solid var(--table-interaction-color,#0058ff);outline-offset:-2.25px}.usb-table table:focus-within th,.usb-table table:focus th{transition:outline-offset .2s linear}.usb-table table:focus-within th[tabindex="0"].roleIsGrid,.usb-table table:focus th[tabindex="0"].roleIsGrid{outline:2px solid var(--table-interaction-color,#0058ff);outline-offset:-2.25px}.usb-table .usb--checkbox-wrapper.table-checkbox-label{margin-bottom:0;flex-basis:0;padding-left:1.37rem;padding-top:var(--token-spacing-1,.25rem);margin-left:-1.25rem}.usb-table .usb--checkbox-wrapper.table-header-checkbox-label{margin-bottom:0;flex-basis:0;padding-left:.7rem;padding-top:var(--token-spacing-1,.25rem);margin-left:0}.usb-table .usb--checkbox-label.table-checkbox-label{justify-content:center}.usb-table .usb--checkbox-label.table-checkbox-label:after{content:"";border:2px solid transparent;border-radius:var(--checkbox-focus-border-radius,.25rem);position:absolute;left:.15rem}.show-label .usb--checkbox-label{z-index:-10}.table-pagination-nav{display:flex;flex:none}.table-pagination-nav-list{display:flex}.table-expander{padding:0;font-size:var(--token-font-size-base,1rem);margin-left:var(--token-spacing-4,1rem);margin-right:var(--token-spacing-4,1rem);border:none;background-color:initial;vertical-align:middle;height:var(--token-spacing-5,1.25rem)}.table-expander:focus{outline:2px solid var(--table-interaction-color,#0058ff);border-radius:var(--token-rounded-sm,.25rem)}.table-icon-hover:hover{color:var(--table-interaction-color,#0058ff);fill:var(--table-interaction-color,#0058ff)}.demo-action{align-self:flex-end}.table-actions-row{display:flex;flex-flow:wrap;flex-direction:row;max-width:100%}.table-actions-row.show-hide-modal-only,.table-actions-row.toolbar-only{justify-content:start}.table-actions-row.row-size-small{padding-top:var(--token-spacing-1,.25rem);padding-bottom:var(--token-spacing-1,.25rem)}.table-actions-row.row-size-large{padding-top:var(--token-spacing-5,1.25rem);padding-bottom:var(--token-spacing-5,1.25rem)}.table-actions-row.row-size-default{padding-top:var(--token-spacing-3,.75rem);padding-bottom:var(--token-spacing-3,.75rem)}.table-actions-row.enable-dropdown-menu{justify-content:end}.responsive-stacked .usb-table_table.zebra-striped tbody tr{background-color:initial}.responsive-stacked .table-actions-row{display:block;margin-bottom:2rem;border:none}.responsive-stacked .usb-table_table.stackable .usb-table_body--cell.table-row-checkbox-cell .stackable-header{display:none}.responsive-stacked .usb-table_table.stackable .usb-table_body--cell.table-row-checkbox-cell .usb--checkbox-wrapper{padding-left:var(--token-spacing-4,1rem);padding-top:0}.responsive-stacked .usb-table_table.stackable .usb-table_body--cell.table-row-checkbox-cell .usb--checkbox-label span.usb--checkbox-label-text{display:inline}.show-hide-modal.stackable-show-hide-button{width:100%}.show-hide-column-modal-text{font-size:var(--token-font-size-base,1rem)}.table-modal .usb--checkbox--fieldset,.table-modal .usb--checkbox-group--legend,.table-modal.usb--modal-v2--dialog,.table-modal .usb-modal-v2--body,.table-modal .usb-modal-v2--container{text-align:left}.table-modal-text{font-size:var(--token-font-size-base,1rem);margin-bottom:var(--token-spacing-4,1rem)}.table-modal-button{border:transparent;border-radius:var(--token-rounded-sm,.25rem)}.table-modal-button.stackable-show-hide-button{width:100%}.table-modal-button.stackable-show-hide-button.usb-button.button--small{justify-content:start;border:transparent;border-radius:var(--token-rounded-sm,.25rem);z-index:5;padding:var(--token-spacing-5,1.25rem) var(--token-spacing-3,.75rem)}.table-modal-button.stackable-show-hide-button.usb-button.button--small:hover{background-color:#f5f5fa;color:#235ae4}.table-modal-button.stackable-show-hide-button.usb-button:focus{border-top:1px solid #fff;border-bottom:1px solid #fff;color:#235ae4;outline:2px solid #235ae4;background-color:#f5f5fa;outline-offset:-.15rem;border-top-left-radius:0;border-top-right-radius:0}.table-modal-button.stackable-show-hide-button.usb-button:before{border:none;border-radius:0;height:none;position:absolute;left:0;top:0;width:none}.table-modal-button.enable-dropdown-menu.usb-button.button--small{margin:0 var(--token-spacing-3,.75rem) 0 0;width:100%;border:transparent;border-radius:var(--token-rounded-sm,.25rem);justify-content:start;z-index:5}.table-modal-button-text{vertical-align:top;font-weight:var(--token-font-weight-med,500)}.table-modal-button-text.stackable-show-hide-button{font-weight:var(--token-font-weight-reg,400)}.table-selected-rows-label{display:flex;font-size:var(--token-font-size-base,1rem);flex-direction:column;justify-content:center;margin:var(--token-spacing-3,.75rem) var(--token-spacing-3,.75rem) 0 0;white-space:nowrap}.stackable-selected-rows-label{margin-bottom:var(--token-spacing-4,1rem);text-align:right}.table-toolbar{display:block}.table-toolbar .usb-button-group{display:flex;flex-direction:row;flex-wrap:wrap}.table-toolbar .usb-button-group.stackable-table-toolbar-button-group{margin-left:0;padding-left:0;padding-right:0;flex-wrap:wrap;justify-content:center}.table-toolbar .usb-button-group .usb-button.button--small{margin:var(--token-spacing-3,.75rem) var(--token-spacing-3,.75rem) 0 0}.table-toolbar .usb-button-group .usb-button.button--small.stackable-table-button{width:100%;margin-top:var(--token-spacing-2,.5rem);margin-right:0}.table-row-checkbox{border-bottom:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2)}.table-row-checkbox:focus-within{outline:2px solid var(--table-interaction-color,#0058ff)!important;outline-offset:-2px}.table-input-display{display:flex;flex-direction:column;justify-content:center;height:100%}.table-input-button{display:flex;justify-content:space-between;width:100%;background-color:initial;border:none;outline:none;color:var(--table-interaction-color,#0058ff);padding-right:0;padding-left:0}.table-input-value{padding-left:var(--token-spacing-6,1.5rem);padding-top:.15rem;font-size:var(--token-font-size-base,1rem);text-align:left}.table-input-icon{padding-right:var(--token-spacing-6,1.5rem)}.table-input-icon,.table-text-input{padding-left:var(--token-spacing-2,.5rem)}.table-text-input{margin-top:0;padding-top:0;padding-right:var(--token-spacing-2,.5rem);min-height:0;border:none}.table-text-input input{padding:.5rem 1rem 6px 15px;color:var(--table-text-input-text-color,#2d2d3e);border:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2);border-radius:var(--token-rounded-sm,.25rem);width:100%}.table-text-input.is-error input{border:2px solid var(--text-input-basic-error-border-color,#ce2935)}.table-text-input.is-error{margin:.5rem 0}.table-expanded-menu{z-index:30}.table-toolbar-button-group{padding-left:0}.table-toolbar-menu.usb-action__button-utility:hover,.table-toolbar-menu .usb-action__link-utility:hover{background-color:#4c4c50}.table-toolbar-menu.usb-menu-composable__trigger{min-width:unset!important;max-height:var(--token-spacing-8,2rem);font-size:var(--token-font-size-sm,.875rem)}.table-toolbar-menu.usb-menu-composable__trigger .usb-action__text .usb-menu-composable__menu-btn__label{font-weight:var(--token-font-weight-med,500)}.table-toolbar-menu.usb-menu-composable__trigger .usb-action__icon{margin-top:3px}.table-toolbar-menu.usb-menu-composable__trigger.stackable-table-button{width:100%;margin-top:0;justify-content:start;border:transparent;border-top-left-radius:var(--token-rounded-sm,.25rem);border-top-right-radius:var(--token-rounded-sm,.25rem);border-bottom-left-radius:var(--token-rounded-sm,.25rem);border-bottom-right-radius:var(--token-rounded-sm,.25rem)}.table-toolbar-menu.usb-action:focus:before{outline:2px solid var(--table-interaction-color,#0058ff);outline-offset:-2px!important;height:calc(100% + .75rem)!important;width:calc(100% + .75rem)!important;left:-6px!important;top:-6px!important}.table-toolbar-menu.usb-action__button-utility-medium{min-height:var(--token-spacing-8,2rem);margin:var(--token-spacing-3,.75rem) var(--token-spacing-3,.75rem) 0 0}.stackable-toolbar-row,.table-toolbar-row{display:flex;flex-wrap:wrap-reverse}.stackable-table-menu{display:block;width:100%}.stackable-table-menu .usb-menu-composable__container.expanded{width:100%}.table-sticky-header{z-index:10;border-top-right-radius:var(--token-rounded-md,.5rem);border-top-left-radius:var(--token-rounded-md,.5rem)}.table-sticky-first-column,.table-sticky-header{position:sticky;top:0;background-color:var(--token-background-primary,#fff)}.table-sticky-first-column{left:0;z-index:5}.table-sticky-first-column.table-sticky-row-header-shadow:after{content:"";position:absolute;top:0;right:-20px;width:20px;height:100%;background-image:linear-gradient(270deg,transparent,rgba(0,0,0,.25))}.table-sticky-row{position:sticky;left:0;z-index:5;background-color:var(--token-background-primary,#fff)}.table-sticky-row.table-sticky-row-header-shadow:after{content:"";position:absolute;top:0;right:-20px;width:20px;height:100%;background-image:linear-gradient(270deg,transparent,rgba(0,0,0,.25))}.batch-actions-mobile-button{width:100%;background:transparent;border:1px solid var(--token-utility-subdued,#cdd1e2);border-radius:var(--token-rounded-sm,.25rem);color:var(--token-label-muted,#63637f);padding:var(--token-spacing-2,.5rem) var(--token-spacing-3,.75rem);margin-bottom:var(--token-spacing-1,.25rem);text-align:left}.batch-actions-mobile-button:focus{outline:3px solid #235ae4;outline-offset:-.2rem}.batch-actions-mobile-button-row{display:flex;justify-content:space-between}.batch-actions-mobile-actions-text{margin:auto 0;color:var(--token-label-vivid,#2d2d3e);font-size:var(--token-font-size-sm,.875rem);font-family:var(--token-font-base,Circular-USB,Arial,Helvetica,sans-serif)}.table-mobile-button{width:100%}.table-mobile-button.usb-button.button--utility--subtle{border:transparent;border-radius:var(--token-rounded-sm,.25rem);border-bottom-left-radius:0;border-bottom-right-radius:0;color:var(--token-utility-vivid,#484861);padding:var(--token-spacing-5,1.25rem) var(--token-spacing-3,.75rem);justify-content:start;font-weight:var(--token-font-weight-reg,400);border-bottom:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2)}.table-mobile-button.usb-button.button--utility--subtle:hover{background-color:var(--token-surface-alternate-muted,#f1f5fb);color:#235ae4}.table-mobile-button.usb-button.button--utility--subtle.usb-button:focus{border-top:1px solid #fff;border-bottom:1px solid #fff;color:#235ae4;outline:2px solid #235ae4;background-color:#f5f5fa;outline-offset:-.15rem;border-top-left-radius:0;border-top-right-radius:0}.table-mobile-button.usb-button.button--utility--subtle.usb-button:before{border:none;border-radius:0;height:none;position:absolute;left:0;top:0;width:none}.table-mobile-expand-panel{position:absolute;top:var(--token-spacing-15,3.75rem);z-index:50;width:100%;background-color:var(--table-row-background-color,#fff);border:var(--token-border-width-default,1px) solid var(--token-utility-subdued,#cdd1e2);border-radius:var(--token-rounded-sm,.25rem);box-shadow:0 4px 6px -1px rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.12)}#ilmportal-app { background-color: rgb(241, 245, 251); } #ilmportal-app .spinner-center { display: flex; align-items: center; justify-content: center; min-height: 60vh; width: 100%; } #ilmportal-app .process-tracker-nav { display: flex; justify-content: flex-start; margin-bottom: 16px; margin-left: auto; margin-right: auto; width: 1280px; } #ilmportal-app .process-tracker-btn { text-align: left; } #ilmportal-app html, #ilmportal-app body, #ilmportal-app #ilmportal-app { height: 100%; margin: 0; padding: 0; box-sizing: border-box; overflow-x: hidden; background-color: rgb(241, 245, 251); } #ilmportal-app .layout-container { display: flex; flex-direction: column; width: 100vw; height: 100vh; box-sizing: border-box; margin: 0; padding: 0; overflow-y: auto; } #ilmportal-app .login-container { background-image: url("/assets/login-background-image-895867c1.png"); background-size: cover; background-repeat: no-repeat; background-position: center; flex: 1 0 auto; min-height: 0; display: flex; flex-direction: column; justify-content: stretch; align-items: stretch; } #ilmportal-app .layout-container { display: flex; flex-direction: column; width: 100vw; min-height: 100vh; box-sizing: border-box; margin: 0; padding: 0; /* Allow scroll if content overflows, so footer is never cut off */ } #ilmportal-app * { font-family: "Circular-USB"; } #ilmportal-app .cookie-policy-banner { display: flex; width: 100%; flex-direction: column; align-items: center; padding-top: 32px; } #ilmportal-app .cookie-policy-banner .usb-notification { display: flex; width: 1275px; } #ilmportal-app .cookie-policy-banner .usb-notification .usb-button--close-btn { position: absolute; top: 16px; right: 20px; cursor: pointer; padding: 0; height: 20px; min-height: 0; min-width: 0; width: 20px; background: transparent; } body { /* .login-container styles moved to #ilmportal-app for correct scoping */ } body .footerLayout { display: flex !important; height: 6.25rem; background: rgb(0, 30, 121) !important; padding: 0 !important; flex-shrink: 0; width: 100%; } body .session-modal .usb-modal-v2 { z-index: 10000; } body .session-modal .usb-modal-v2--container .usb-modal-v2--footer .usb-button-group { gap: 16px; display: flex; flex-direction: row; } @media (max-width: 767px) { #ilmportal-app .layout-container { display: block; } body .footerLayout { padding: 16px 32px !important; height: auto !important; } body .login-container { background-image: url("/assets/login-background-image-895867c1.png"); background-size: cover; background-repeat: no-repeat; background-position: center; min-height: calc(100vh - 236px); } } @media (min-width: 768px) and (max-width: 1280px) { #ilmportal-app .cookie-policy-banner .usb-notification { max-width: 100%; } .rendering-engine-app .section-container .button--layout_row { width: auto; } .responsive-tab-toggle { width: auto; } body .login-container { background-image: url("/assets/login-background-image-895867c1.png"); background-size: cover; background-repeat: no-repeat; background-position: center; min-height: calc(100vh - 236px); } #ilmportal-app .layout-container { display: block; } body .footerLayout { padding: 16px 32px !important; height: auto !important; } body .otp-flow-container .custom-container .otp-main { width: 100%; max-width: 448px; } } @media (max-width: 767px) { #ilmportal-app .layout-container { display: block; } #ilmportal-app .layout-container .otp-flow-container .custom-container .otp-main { width: 100%; max-width: 448px; } #ilmportal-app .layout-container .otp-flow-container { padding: 32px; } #ilmportal-app .cookie-policy-banner .usb-notification { display: flex; width: 100%; } body .cookie-policy-banner { padding-left: 32px; padding-right: 32px; } body .footerLayout { padding: 16px 32px !important; height: auto !important; } } @media (max-width: 672px) { #ilmportal-app .layout-container .otp-flow-container { padding: 32px 16px; } body .cookie-policy-banner { padding-left: 16px; padding-right: 16px; } body .footerLayout { padding: 16px !important; } } .error-boundary-container { background-color: rgb(241, 245, 251); min-height: calc(100vh - 170px); align-items: center; justify-content: center; display: flex; padding: 32px; }