/* ========================================================================== BASE (body, images, base helpers, panels borders) Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ body { font-family: var(--font-body); line-height: 1.6; color: var(--color-text); background-color: var(--body-bg); } .StandardPanel, .ContentBorder, h2, .PanelHead.Distinguish, .TitleBarCaption, div.ShowFieldset fieldset, .panel-border, .panel-heading.Distinguish { border-color: var(--color-border); } .PanelHead.Distinguish .PanelHeadOptions, .panel-heading.Distinguish .panel-head-options { margin-top: .6em; } .PanelHead.Distinguish.Collapsible { align-items: center; } .PanelHead.Distinguish.Collapsible:hover { cursor: pointer; } .PanelHead.Distinguish.Collapsible:after { display: block; content: ''; width: 20px; height: 20px; background: transparent var(--icon-collapse) 0 0 no-repeat; transform: rotate(180deg); margin-right: .5em; } .PanelHead.Distinguish.Collapsible.open:after { transform: rotate(0deg); } /* Used for messages guiding users to the next step */ .HelperText { color: var(--color-brand); } /* This gives certain selected items (e.g., in the PeoplePanel in the Event Showcase) a colored background */ .SelectedItem { background-color: var(--color-slate); } /** * This automatically resizes images when they're too large to fit in their container. * It may override any user-defined width/height on images. If the behavior is unwanted, * consider changing this declaration to a class (e.g. '.img-responsive') which you can * apply as desired. */ img:not([src*="commandbar.com"]) { max-width: 100%; height: auto !important; } /** * Sometimes images should not be resized. This class can be used as a wrapper or directly * on the image to avoid the resizing. */ img.ImgNoResize, .ImgNoResize img { max-width: none; } /* Give a block of text some extra emphasis. * This class also makes the text larger, per UltraWave styles */ .lead { margin-bottom: 20px; } .bg-img-full-size { background-position: center center; background-repeat: no-repeat; background-size: cover; } .bg-img-dark { background-color: var(--color-grey-800); } .bg-img-dark, .bg-img-dark h1, .bg-img-dark h2, .bg-img-dark h3, .bg-img-dark h4, .bg-img-dark h5, .bg-img-dark h6 { color: var(--color-white); } .bg-img-dark a:not(.TextButton):not(.btn), .bg-img-dark a:not(.TextButton):not(.btn):hover, .bg-img-dark a:not(.TextButton):not(.btn):focus, .bg-img-dark a:not(.TextButton):not(.btn):active { color: var(--color-white); text-decoration: underline; } /* ========================================================================== TYPOGRAPHY (headings, links, rules, text emphasis) Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ /* -------------------------------------------------------------------------- FLUID TYPE SCALE (AREMA-style clamp()/pow() modular scale) Every element sets --fl (its step on the scale); the clamp interpolates its size between --font-size-min (at --font-width-min) and --font-size-max (at --font-width-max), so type scales smoothly with the viewport. To rescale the WHOLE site, change --font-size-min / --font-size-max below. Tuned to this theme (base ~17-19px, h1 ~36-44px) rather than AREMA's larger 20-26px base. Requires CSS pow() (Chrome 125+, Safari 18+, Firefox 118+). -------------------------------------------------------------------------- */ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .PageTitle, .PanelTitle, .SectionTitle, .SectionLabel, .SectionLabelSmaller, .text-xs, .text-sm, .text-base, .text-lg, .text-xl, .text-2xl, .text-3xl, .text-4xl, .text-5xl, .text-6xl, .text-7xl, .text-8xl, .text-9xl, .fs-xxs, .fs-xs, .fs-base, .fs-s, .fs-m, .fs-l, .fs-xl, .fs-xxl, .fs-xxxl, .fluid, p, li, textarea, input, select, button, th, td { --fl: 0; --font-size-min: 15; --font-size-max: 18; --font-ratio-min: 1.16; --font-ratio-max: 1.2; --font-width-min: 390; --font-width-max: 1200; --fluid-min: calc(var(--font-size-min) * pow(var(--font-ratio-min), var(--fl, 0))); --fluid-max: calc(var(--font-size-max) * pow(var(--font-ratio-max), var(--fl, 0))); --fluid-preferred: calc((var(--fluid-max) - var(--fluid-min)) / (var(--font-width-max) - var(--font-width-min))); /* NOTE: uses px (not the utopia.fyi rem/16 form). iMIS sets the root font-size to 10px here, and the rem/16 form assumes a 16px root, which would render every size ~0.625x too small. px is root-independent and correct on any host; browser zoom still scales it. */ --fluid-type: clamp( (var(--fluid-min) * 1px), (var(--fluid-min) * 1px) - (var(--fluid-preferred) * var(--font-width-min) * 1px) + (var(--fluid-preferred) * var(--variable-unit, 100vi)), (var(--fluid-max) * 1px) ); font-size: var(--fluid-type); } /* Containers using container queries get cqi instead of vi */ .fluid-text-container { container-type: inline-size; --variable-unit: 100cqi; } /* Heading levels step up the modular scale (incl. iMIS heading aliases) */ h1, .h1, .PageTitle { --fl: 5; } h2, .h2, .PanelTitle { --fl: 4; } h3, .h3, .SectionTitle { --fl: 3; } h4, .h4, .SectionLabel { --fl: 2; } h5, .h5, .SectionLabelSmaller { --fl: 1; } h6, .h6 { --fl: 0; } p, li, body { --fl: 0; } /* Utility type scale (Tailwind-style .text-* and legacy .fs-* map to the same steps) */ .text-xs, .fs-xs { --fl: -2; } .text-sm, .fs-xxs { --fl: -1; } .text-base, .fs-base { --fl: 0; } .text-lg, .fs-s { --fl: 1; } .text-xl { --fl: 2; } .text-2xl, .fs-m { --fl: 2; } .text-3xl, .fs-l { --fl: 3; } .text-4xl, .fs-xl { --fl: 4; } .text-5xl, .fs-xxl { --fl: 5; } .text-6xl, .fs-xxxl { --fl: 6; } .text-7xl { --fl: 7; } .text-8xl { --fl: 8; } .text-9xl { --fl: 9; } a, .Link, .RadGrid.RadGrid .rgRow a, .RadGrid.RadGrid .rgAltRow a, .RadGrid.RadGrid .rgEditForm a, .k-grid.k-grid a, .RadToolTip.RadToolTip a { color: var(--link-color) ; text-decoration: underline; } a:visited, .Link:visited, .RadGrid.RadGrid .rgRow a:visited, .RadGrid.RadGrid .rgAltRow a:visited, .RadGrid.RadGrid .rgEditForm a:visited, .k-grid.k-grid a:visited, .RadToolTip.RadToolTip a:visited { color: var(--link-color-visited) ; } a:hover, a:focus, a:active, .Link:hover, .Link:focus, .Link:active, .RadGrid.RadGrid .rgRow a:hover, .RadGrid.RadGrid .rgRow a:focus, .RadGrid.RadGrid .rgRow a:active, .RadGrid.RadGrid .rgAltRow a:hover, .RadGrid.RadGrid .rgAltRow a:focus, .RadGrid.RadGrid .rgAltRow a:active, .RadGrid.RadGrid .rgEditForm a:hover, .RadGrid.RadGrid .rgEditForm a:focus, .RadGrid.RadGrid .rgEditForm a:active, .k-grid.k-grid a:hover, .k-grid.k-grid a:focus, .k-grid.k-grid a:active, .RadToolTip.RadToolTip a:hover, .RadToolTip.RadToolTip a:focus, .RadToolTip.RadToolTip a:active { color: var(--link-color-hover) ; text-decoration: underline ; } a.aspNetDisabled, a.aspNetDisabled:hover, a.aspNetDisabled:focus, a.aspNetDisabled:active, a.aspNetDisabled:visited, a:disabled, a:disabled:hover, a:disabled:focus, a:disabled:active, a:disabled:visited, .Link.aspNetDisabled, .Link.aspNetDisabled:hover, .Link.aspNetDisabled:focus, .Link.aspNetDisabled:active, .Link.aspNetDisabled:visited, .Link:disabled, .Link:disabled:hover, .Link:disabled:focus, .Link:disabled:active, .Link:disabled:visited, .RadGrid.RadGrid .rgRow a.aspNetDisabled, .RadGrid.RadGrid .rgRow a.aspNetDisabled:hover, .RadGrid.RadGrid .rgRow a.aspNetDisabled:focus, .RadGrid.RadGrid .rgRow a.aspNetDisabled:active, .RadGrid.RadGrid .rgRow a.aspNetDisabled:visited, .RadGrid.RadGrid .rgRow a:disabled, .RadGrid.RadGrid .rgRow a:disabled:hover, .RadGrid.RadGrid .rgRow a:disabled:focus, .RadGrid.RadGrid .rgRow a:disabled:active, .RadGrid.RadGrid .rgRow a:disabled:visited, .RadGrid.RadGrid .rgAltRow a.aspNetDisabled, .RadGrid.RadGrid .rgAltRow a.aspNetDisabled:hover, .RadGrid.RadGrid .rgAltRow a.aspNetDisabled:focus, .RadGrid.RadGrid .rgAltRow a.aspNetDisabled:active, .RadGrid.RadGrid .rgAltRow a.aspNetDisabled:visited, .RadGrid.RadGrid .rgAltRow a:disabled, .RadGrid.RadGrid .rgAltRow a:disabled:hover, .RadGrid.RadGrid .rgAltRow a:disabled:focus, .RadGrid.RadGrid .rgAltRow a:disabled:active, .RadGrid.RadGrid .rgAltRow a:disabled:visited, .RadGrid.RadGrid .rgEditForm a.aspNetDisabled, .RadGrid.RadGrid .rgEditForm a.aspNetDisabled:hover, .RadGrid.RadGrid .rgEditForm a.aspNetDisabled:focus, .RadGrid.RadGrid .rgEditForm a.aspNetDisabled:active, .RadGrid.RadGrid .rgEditForm a.aspNetDisabled:visited, .RadGrid.RadGrid .rgEditForm a:disabled, .RadGrid.RadGrid .rgEditForm a:disabled:hover, .RadGrid.RadGrid .rgEditForm a:disabled:focus, .RadGrid.RadGrid .rgEditForm a:disabled:active, .RadGrid.RadGrid .rgEditForm a:disabled:visited, .k-grid.k-grid a.aspNetDisabled, .k-grid.k-grid a.aspNetDisabled:hover, .k-grid.k-grid a.aspNetDisabled:focus, .k-grid.k-grid a.aspNetDisabled:active, .k-grid.k-grid a.aspNetDisabled:visited, .k-grid.k-grid a:disabled, .k-grid.k-grid a:disabled:hover, .k-grid.k-grid a:disabled:focus, .k-grid.k-grid a:disabled:active, .k-grid.k-grid a:disabled:visited, .RadToolTip.RadToolTip a.aspNetDisabled, .RadToolTip.RadToolTip a.aspNetDisabled:hover, .RadToolTip.RadToolTip a.aspNetDisabled:focus, .RadToolTip.RadToolTip a.aspNetDisabled:active, .RadToolTip.RadToolTip a.aspNetDisabled:visited, .RadToolTip.RadToolTip a:disabled, .RadToolTip.RadToolTip a:disabled:hover, .RadToolTip.RadToolTip a:disabled:focus, .RadToolTip.RadToolTip a:disabled:active, .RadToolTip.RadToolTip a:disabled:visited { color: var(--link-color-disabled) ; text-decoration: none ; } h1, .h1, .PageTitle { font-family: var(--font-heading); font-weight: bold; color: var(--color-heading); margin-top: 0; } h1.BigHeader, .h1.BigHeader { color: var(--color-white); background-color: var(--color-accent-orange); padding: 20px; margin: 0; } h2, .h2, .panel-heading.Distinguish, .PanelHead.Distinguish, .TitleBarCaption, div.PanelTitle { min-height: 0; border-bottom-style: solid; } h2, .h2, .PanelTitle { font-family: var(--font-heading); font-weight: bold; color: var(--color-heading); line-height: 1.45em; } h3, .SectionTitle { font-family: var(--font-heading); font-weight: 500; color: var(--color-heading); } h4, .SectionLabel, h5 { margin: 0 0 .2em; } h4, .h4, .SectionLabel { font-family: var(--font-heading); font-weight: 600; color: var(--color-heading); } h5, .h5, .SectionLabelSmaller { font-family: var(--font-heading); font-weight: 500; color: var(--color-text); } h6, .h6 { font-family: var(--font-heading); font-weight: 400; color: var(--color-text); margin: 0; } strong { font-weight: 600; } @media only screen { .callout { border-radius: 4px; padding: 1.5rem 2.5rem !important; border: 1px solid #ddd !important; background: rgba(var(--color-brand-rgb), .1); } .callout-gradient-text { background: linear-gradient(50deg, var(--color-teal-darkest) 15%, var(--color-accent-purple) 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .callout2-gradient-text { background: linear-gradient(135deg, var(--color-teal-dark) 45%, var(--color-teal-darkest) 85%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } } blockquote { color: var(--color-brand-light); font-family: var(--font-display); font-size: 150%; font-style: italic; margin: 4rem 8rem; padding: 0; position: relative; text-wrap: balance; z-index: 0; &:before { color: var(--color-grey-200); content: "“"; font-family: var(--font-display); font-size: 320%; left: -.5em; position: absolute; top: -.5em; z-index: -1; } } ul, ol { margin-block: 1em; } hr { margin-left: .5em; margin-right: .5em; border-width: 1px 0 0 0; border-style: solid; border-color: var(--color-border); } body:not(.not-publication-content) { .publication-content { max-width: 90ch; margin-inline: auto; } } .full-width-image { width: 100vw; margin-inline: calc(50% - 50vw); img { display: block; width: 100%; aspect-ratio: 14 / 5; -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; } } #ctl01_ciOnlineJournalHeadersiPart__Body { padding: 0; margin-bottom: 4rem; #tgd-article-header { overflow-y: clip; } .article-header { color: var(--article-hero-text-color); padding-block: 4rem; @media(min-width: 700px) { padding-block: 12rem; } position: relative; z-index: 0; &:before { background: linear-gradient(45deg, var(--article-hero-bg1) 0%, var(--article-hero-bg2) 50%); background-position: center center; background-size: cover; content: ''; height: 100%; left: 0; margin-left: calc(50% - 50vw); position: absolute; width: 100vw !important; top: 0; z-index: -1; } &:after { background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), var(--article-hero); background-position: var(--article-hero-position, center); background-size: cover; content: ''; height: 100%; left: 0; margin-left: calc(50% - 50vw); position: absolute; width: 100vw !important; top: 0; z-index: -2; filter: blur(3px); scale: 1.1; } h1, h2, h3, h4, h5, h6, p, li, a { max-width: 70ch; text-shadow: var(--article-hero-text-shadow); color: var(--article-hero-text-color); } .article-title { text-wrap: balance; } .article-subtitle { font-family: var(--font-display); font-size: 140%; font-style: italic; font-weight: 400; line-height: 1.3em; text-wrap: balance; } .article-author { font-family: var(--font-display); margin-top: 2rem; font-size: 90%; } .article-date { font-family: var(--font-primary); margin-top: 2rem; font-size: 90%; } } } .iqa-author-name { .panel-body, .PanelBody, .panel-heading.Distinguish { padding: 0; thead { display:none; } div, table, tr, td { background: transparent; border: none; padding: 0; } } } .author-info { @media (min-width: 700px) { display: grid; grid-auto-flow: row; grid-gap: 3.3rem; grid-template-columns: minmax(0, 70%) minmax(0, 30%); } .author-bio:empty { display: none; } .author-card { .author-photo { margin-bottom: 1rem; } p { text-align: left; margin-bottom: 1rem; font-size:16px; font-style: italic; } } } .iqa-featured-articles-alt .bht-article-card { .bht-article-image-link { z-index: 0; position: relative; &:before { background: linear-gradient(45deg, var(--article-hero-bg1) 3%, var(--article-hero-bg2) 80%); content: ''; height: 100%; left: 0; position: absolute; width: 100% !important; top: 0; z-index: 1; } } .bht-article-text .bht-article-title { font-weight: bold; a { text-shadow: var(--article-hero-text-shadow), var(--article-hero-text-shadow) !important; color: var(--article-hero-text-color) !important; } } }/* ========================================================================== ANIMATIONS (keyframes used by component micro-interactions; AOS removed) Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ @keyframes slide-down-with-delay { 0% { transform: translateY(-100%); opacity: 0; } 25% { transform: translateY(-100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes slide-up-with-delay { 0% { transform: translateY(75px); opacity: 0; } 25% { transform: translateY(75px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes appear-zoom-out-with-delay { 0% { transform: scale(1.1); opacity: 0; } 25% { transform: scale(1.1); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes appear-zoom-in-with-delay { 0% { transform: scale(0.95); opacity: 0; } 25% { transform: scale(0.95); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes soft-zoom-motion { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: translateY(1); } } @keyframes bubble-effect { 0% { opacity: 0; transform: scale(0.95); } 25% { opacity: 0.5; } 40% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); } } @keyframes fade-in { 0% { opacity: 0; } 50% { opacity: 0.5; } 100% { opacity: 1; } } @keyframes rotate { 100% { transform: rotate(360deg); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(0.95); } 100% { transform: scale(1); } } @keyframes bounce { 50% { transform: translateY(-10px); } } /* ========================================================================== MASTER PAGE LAYOUT (container, header grid, sticky footer, back-to-top) Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ /* Class used to contain the various pieces of the master page */ .container { max-width: var(--container-max); margin-right: auto; margin-left: auto; padding-left: 30px; padding-right: 30px; } .container::after, .body-container::after { display: block; clear: both; content: ""; } .has-secondary-col .body-container { display: grid; } .has-secondary-col .body-container .col-primary { grid-row: -1; /* ensure the main content displays BEFORE nav on small screens */ } @media (min-width: 992px) { .has-secondary-col .body-container { grid-template-columns: 1fr 76% minmax(12em, 22%) 1fr; grid-template-rows: auto; grid-column-gap: 30px; } .has-secondary-col .body-container .col-primary { grid-column: 2 / span 1; grid-row: 1; } .has-secondary-col .body-container .col-secondary { grid-column: 3 / span 1; grid-row: 1; } } .secondary-nav-top .has-secondary-col .body-container { grid-template-columns: auto; } .secondary-nav-top .has-secondary-col .body-container .col-primary { grid-column: 1; grid-row: 2; } .secondary-nav-top .has-secondary-col .body-container .col-secondary { grid-column: 1; grid-row: 1; } header.header { display: grid; position: relative; margin-bottom: 1em; } @media (max-width: 991px) { header.header { grid-template: "logo" "utility" "primary-nav"; } } @media (min-width: 992px) { header.header { grid-template: "utility utility" auto "logo primary-nav" auto; grid-template-areas: "utility utility" "logo primary-nav"; } } header.header .header-background-container { position: absolute; width: 100%; height: 100%; grid-area: 1 / 1 / -1 / -1; /* span the whole header */ z-index: -1; } header.header .header-background-container .ContentItemContainer > .ContentItemContainer, header.header .header-background-container .header-bg, header.header .header-background-container .carousel-inner .item { position: absolute; top: 0; left: 0; width: 100%; height: 100% !important; } header.header .header-background-container .carousel, header.header .header-background-container .carousel-inner { position: static; } header.header .header-logo-container { grid-area: logo; align-self: start; justify-self: start; padding-left: 3px; padding-top: 0; padding-bottom: 0; z-index: 100; } .t-ie11 header.header .header-logo-container { position: absolute; top: 1.5em; } @media (min-width: 992px) { header.header .header-logo-container { align-self: end; } } header.header .header-aux-container { grid-area: utility; align-self: start; justify-self: none; padding-right: 3px; padding-top: 0; padding-bottom: 0; z-index: 101; } header.header .header-primary-nav-container { grid-area: primary-nav; align-self: start; justify-self: end; padding-left: 3px; padding-right: 3px; z-index: 100; max-width: 1180px; width: 100%; } header.header .home-page-header-container, header.header .internal-header-container { grid-area: banner; padding-left: 3px; padding-right: 3px; } @media (max-width: 991px){ header.header .header-logo-container { -ms-grid-row: 1; -ms-grid-column: 1; } header.header .header-aux-container { -ms-grid-row: 2; -ms-grid-column: 1; } header.header .header-primary-nav-container { -ms-grid-row: 3; -ms-grid-column: 1; } } @media (min-width: 992px){ header.header .header-logo-container { -ms-grid-row: 2; -ms-grid-column: 1; } header.header .header-logo-container { -ms-grid-row: 2; -ms-grid-column: 1; } header.header .header-aux-container { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; } header.header .header-aux-container { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; } header.header .header-primary-nav-container { -ms-grid-row: 2; -ms-grid-column: 2; } header.header .header-primary-nav-container { -ms-grid-row: 2; -ms-grid-column: 2; } } /* IE11 - Grid alignment */ .t-ie11 header.header { display: -ms-grid; -ms-grid-columns: 1fr minmax(768px, 1380px) 1fr !important; } .t-ie11 .header-background-container { -ms-grid-column: 1 !important; } .t-ie11 .header-logo-container, .t-ie11 .header-aux-container, .t-ie11 .header-primary-nav-container, .t-ie11 .home-page-header-container, .t-ie11 .internal-header-container { -ms-grid-column: 2 !important; } .t-ie11 .header-primary-nav-container { margin-left: 200px; } /* This applies to the breadcrumb area */ .breadcrumb { float: none; display: inline; line-height: 33px; } /* Homepage Full Width areas */ .Wrapper-FullWidth .main-container.container { max-width: 100%; padding: 0; } .Wrapper-FullWidth .row { margin-left: 0; margin-right: 0; } .Wrapper-FullWidth .col-sm-12 { padding-left: 0; padding-right: 0; } .backToTop { background: var(--color-accent-green) var(--sprite-header) 5px -223px no-repeat; font: 0/0 a; width: 50px; height: 50px; position: fixed; bottom: 30px; right: 30px; transform: rotate(-90deg); border-radius: 40px; transition: background 0.2s ease-in; z-index: 100; } .backToTop:hover { background-color: var(--color-dark); } /* Show mobile search between 768 and 992 */ @media (min-width: 768px) and (max-width: 992px) { .search-container { display: block; } } /* Sticky Footer ========================================================================== */ /* Flex-style sticky footer See https://css-tricks.com/couple-takes-sticky-footer/ */ .wrapper { display: flex; min-height: 100vh; flex-direction: column; } .wrapper .main-container { width: 100%; flex: 1 0 auto; margin-bottom: 1em; } .wrapper footer.footer { flex-shrink: 0; } /*Social share iPart alignment*/ .PanelFieldLabel.SocialShare { line-height: 1.4em; } /* ========================================================================== MASTERPAGE ELEMENTS (progress bar, sub/left navigation, misc) Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ /* This applies to the loading bar at the top of the page */ .ProgressDiv { background-color: var(--color-gold); } /* header logo -- light header, so the primary (colour) logo is used. (If you make the header a dark/brand colour, switch this to var(--logo-inverse).) */ #masterHeaderImage { background-image: var(--logo-primary); background-repeat: no-repeat; background-size: contain; width: 270px; height: auto; /* The following are needed to hide the text, but allow it to be read by screen readers */ text-indent: -9999px; overflow: hidden; float: left; } #masterDonorHeaderImage { background-image: var(--logo-header); background-repeat: no-repeat; width: 170px; height: auto; /* The following are needed to hide the text, but allow it to be read by screen readers */ text-indent: -9999px; overflow: hidden; float: left; } @media (min-width: 992px) { #masterDonorHeaderImage { width: 169px; } } /* Header Border */ #masterHeaderBackground, .header { border-bottom: 2px solid var(--color-grey-100); } /* Used in the donor site header logo content area */ #masterHeaderActionArea a { display: block; text-align: center; } /* On Behalf Of with target set */ .ProxyPanelContact { background-color: var(--color-brand); } .ProxyPanelContact, .ProxyPanelContact .obo-label { color: var(--color-white); } .ProxyPanelContact a { color: var(--color-brand-lighter); } /* Sub (Left) Navigation ========================================================================== */ #pagesubnav { border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .SubNavPanelHead { background-color: var(--color-white); color: var(--color-text); font-family: var(--font-primary); font-weight: 500; } .SubNavigationSeparator { border-width: 1px 0 0 0; border-style: solid; border-color: var(--color-border); height: 1px; padding: 0; margin: 0; } /* ========================================================================== FOOTER Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ footer.footer { background-color: var(--color-footer-bg); color: var(--color-footer-text); padding-top: 60px; padding-bottom: 60px; text-align: center; } /* Keep all footer text small and uniform. Left alone, the block elements (headings, paragraphs, list items) pick up the fluid type scale and render large on wide screens; pin them to one small size so the whole footer reads consistently on the smaller side. Social sprite icons are excluded so their glyph sizing stays intact. Bump this one value to resize the footer text. */ footer.footer, footer.footer h1, footer.footer h2, footer.footer h3, footer.footer h4, footer.footer h5, footer.footer h6, footer.footer p, footer.footer li, footer.footer td, footer.footer a:not(.SocialSprite) { font-size: 13px; } footer.footer a, footer.footer a:hover, footer.footer a:focus, footer.footer a:active, footer.footer a:visited { color: var(--footer-link); } footer.footer .NavigationListItem { display: block; } footer.footer .NavigationLink { padding-left: 0; padding-right: 0; } footer.footer h3, footer.footer h4 { margin-bottom: .2em; color: var(--color-footer-text); } footer.footer .footer-content .row { margin-left: 0; margin-right: 0; } @media (min-width: 992px) { footer.footer h3 { margin-top: 0; } footer.footer .footer-content { text-align: left; } } .footer-angle-bg footer.footer { position: relative; } .footer-angle-bg footer.footer:before { content: ''; display: block; background: var(--color-footer-bg); width: 100%; height: 400px; position: absolute; z-index: -1; top: -285px; transform: skew(0, 5deg); } .footer-content { padding-top: 3em; } h3.share-article-heading { font-size: 16px; } .share-article-links { order: 1; display: grid; grid-auto-flow: row; grid-gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(3rem, 100%), 1fr)); .share-article-link--facebook { --icon-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24.5 24.5'%3E%3C!-- Generator: Adobe Illustrator 30.6.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 109) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cg id='facebook_square'%3E%3Cpath id='Path_77' class='st0' d='M0,0v24.5h10.132v-8.33h-3.447v-3.92h3.447v-2.987c0-3.4,2.024-5.279,5.122-5.279,1.0162.0143,2.03.1039,3.033.268v3.331h-1.709c-1.0749-.1414-2.0608.6154-2.2022,1.6903-.0189.1435-.0218.2886-.0088.4327v2.544h3.763l-.6,3.92h-3.163v8.33h10.133V0H0Z'/%3E%3C/g%3E%3C/svg%3E"); } .share-article-link--linkedin { --icon-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24.5 24.5'%3E%3C!-- Generator: Adobe Illustrator 30.6.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 109) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M0,0v24.5h24.5V0H0ZM7.408,21h-3.634v-11.69h3.634v11.69ZM5.6,7.712h-.012c-1.1631,0-2.106-.9429-2.106-2.106s.9429-2.106,2.106-2.106,2.106.9429,2.106,2.106c.0033,1.1598-.9342,2.1027-2.094,2.106ZM21.017,21h-3.634v-5.687c0-1.359-.023-3.1-1.884-3.1-1.89,0-2.182,1.482-2.182,3v5.787h-3.634v-11.69h3.488v1.59h.047c.7137-1.213,2.0356-1.9365,3.442-1.884,3.675,0,4.357,2.421,4.357,5.571v6.413Z'/%3E%3C/svg%3E"); } .share-article-link--x { --icon-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24.5 24.5'%3E%3C!-- Generator: Adobe Illustrator 30.6.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 109) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M0,0v24.5h24.5V0H0ZM15.5077,20.4816l-4.3922-6.392-5.4989,6.392h-1.4212l6.2892-7.3102L4.1954,4.0184h4.7969l4.1589,6.0529,5.2072-6.0529h1.4211l-5.997,6.971h-.0003l6.5223,9.4921h-4.7969.0001Z'/%3E%3Cpolygon class='st0' points='12.4032 10.9412 8.3115 5.0883 6.1287 5.0883 11.1989 12.3406 11.8361 13.252 11.8361 13.2524 16.1763 19.4604 18.3591 19.4604 13.0404 11.8525 12.4032 10.9412'/%3E%3C/svg%3E"); } .share-article-link--youtube { --icon-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24.5 24.5'%3E%3C!-- Generator: Adobe Illustrator 30.6.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 109) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cg id='youtube_square'%3E%3Cpath id='Path_79' class='st0' d='M10.214,9.3l5.209,2.957-5.209,2.957s0-5.914,0-5.914ZM24.5,0v24.5H0V0h24.5ZM22.2,12.267c.0102-1.6173-.1284-3.2321-.414-4.824-.2282-.8628-.8989-1.5385-1.76-1.773-1.546-.42-7.776-.42-7.776-.42,0,0-6.23,0-7.776.42-.8618.2339-1.5335.9097-1.762,1.773-.2852,1.5919-.4231,3.2068-.412,4.824-.0102,1.6173.1284,3.2321.414,4.824.2312.8558.9039,1.5216,1.762,1.744,1.546.414,7.776.414,7.776.414,0,0,6.23,0,7.776-.42.8581-.2224,1.5308-.8882,1.762-1.744.2844-1.59.4217-3.2028.41-4.818Z'/%3E%3C/g%3E%3C/svg%3E"); } .share-article-link--instagram { --icon-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24.5 24.5'%3E%3C!-- Generator: Adobe Illustrator 30.6.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 109) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cg id='instagram_square'%3E%3Cpath id='Path_81' class='st0' d='M12.25,9.333c-1.611,0-2.917,1.306-2.917,2.917s1.306,2.917,2.917,2.917,2.917-1.306,2.917-2.917h0c-.0006-1.6108-1.3062-2.9164-2.917-2.917ZM19.069,7.093c-.2994-.762-.9011-1.3659-1.662-1.668-1.149-.449-3.885-.35-5.157-.35s-4.008-.1-5.157.35c-.762.3004-1.3644.9049-1.662,1.668-.455,1.143-.356,3.885-.356,5.157s-.1,4.007.356,5.157c.2997.7604.9016,1.3623,1.662,1.662,1.149.455,3.885.356,5.157.356s4.007.1,5.157-.356c.7631-.2976,1.3676-.9,1.668-1.662.455-1.149.35-3.885.35-5.157s.1-4.008-.35-5.157c0,0-.006,0-.006,0ZM12.25,16.736c-2.4748-.0027-4.4788-2.0111-4.4761-4.4859s2.0111-4.4788,4.4859-4.4761,4.4788,2.0111,4.4761,4.4859c-.0013,1.187-.4735,2.3249-1.3129,3.1641-.8417.841-1.9832,1.313-3.173,1.312ZM16.917,8.622c-.4214.0016-.8017-.2523-.962-.642-.2243-.533.0259-1.1469.5589-1.3712s1.1469.0259,1.3712.5589c.0549.1305.0828.2707.082.4123.0022.5777-.4643,1.0478-1.042,1.05h-.002l-.006-.008h-.0001ZM0,0v24.5h24.5V0H0ZM20.936,15.861c.0275,1.3589-.4795,2.6742-1.412,3.663-.9888.9325-2.3041,1.4395-3.663,1.412-1.447.082-5.775.082-7.216,0-1.3602.0249-2.6765-.4816-3.669-1.412-.9302-.9902-1.4368-2.3046-1.412-3.663-.082-1.447-.082-5.775,0-7.222-.0275-1.3589.4795-2.6742,1.412-3.663.9931-.9294,2.309-1.4359,3.669-1.412,1.441-.082,5.769-.082,7.216,0,1.3591-.0227,2.6734.4861,3.663,1.418.9325.9888,1.4395,2.3041,1.412,3.663.081,1.441.081,5.769,0,7.216Z'/%3E%3C/g%3E%3C/svg%3E"); } .share-article-link--email { --icon-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24.5 24.5'%3E%3C!-- Generator: Adobe Illustrator 30.6.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 109) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M0,0v24.5h24.5V0H0ZM12.2877,7.3824h8.3235l-4.1617,3.58-4.1618,3.58-4.1618-3.58-4.1617-3.58h8.3235ZM3.8585,12.7476v-5.2061l2.6824,2.603,2.6824,2.6031-2.6824,2.603-2.6824,2.603v-5.206ZM12.2877,18.1808H4.0885l4.0996-3.3617,1.8405-1.5091,2.2591,1.8524,2.2592-1.8524,1.8404,1.5091,4.0996,3.3617h-8.1992ZM20.7168,12.7476v5.206l-2.6824-2.603-2.6824-2.603,2.6824-2.603,2.6824-2.6031v5.2061Z'/%3E%3C/svg%3E"); } .share-article-link--copy { --icon-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24.5 24.5'%3E%3C!-- Generator: Adobe Illustrator 30.6.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 109) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='st0' points='14.2734 4.7344 14.2734 9.0704 18.6093 9.0704 18.6093 9.021 14.3228 4.7344 14.2734 4.7344'/%3E%3Cpath class='st0' d='M0,0v24.5h24.5V0H0ZM16.5859,20.9218H4.7344V6.7579h2.3125v1.1562h-1.1562v11.8514h9.5389v-1.1562h1.1562v2.3124ZM19.7656,17.4531h-11.5624V3.5782h6.599l4.9634,4.9633v8.9115Z'/%3E%3Cpolygon class='st0' points='13.1172 4.7344 9.3594 4.7344 9.3594 16.2968 18.6093 16.2968 18.6093 10.2266 13.1172 10.2266 13.1172 4.7344'/%3E%3C/svg%3E"); } .share-article-link--more { --icon-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24.5 24.5'%3E%3C!-- Generator: Adobe Illustrator 30.6.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 109) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M0,0v24.5h24.5V0H0ZM5.9342,14.1447c-1.0485,0-1.8948-.8463-1.8948-1.8947s.8463-1.8947,1.8948-1.8947,1.8947.8463,1.8947,1.8947-.8463,1.8947-1.8947,1.8947ZM12.25,14.1447c-1.0484,0-1.8947-.8463-1.8947-1.8947s.8463-1.8947,1.8947-1.8947,1.8947.8463,1.8947,1.8947-.8463,1.8947-1.8947,1.8947ZM18.5658,14.1447c-1.0484,0-1.8947-.8463-1.8947-1.8947s.8463-1.8947,1.8947-1.8947,1.8948.8463,1.8948,1.8947-.8463,1.8947-1.8948,1.8947Z'/%3E%3C/svg%3E"); } .share-article-link { background-color: var(--color-brand); border:none; -webkit-mask-image: var(--icon-image); mask-image: var(--icon-image); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center; mask-position: center; padding: 1rem; text-decoration: none; width: 3rem; height: 3rem; &:hover { background-color: var(--color-brand-dark); } .share-article-link-icon { display:none; } } } .social-links { order: 1; display: grid; justify-self: end; grid-auto-flow: column; grid-gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(3rem, 100%), 1fr)); .social-link--facebook { --icon-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24.5 24.5'%3E%3C!-- Generator: Adobe Illustrator 30.6.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 109) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cg id='facebook_square'%3E%3Cpath id='Path_77' class='st0' d='M0,0v24.5h10.132v-8.33h-3.447v-3.92h3.447v-2.987c0-3.4,2.024-5.279,5.122-5.279,1.0162.0143,2.03.1039,3.033.268v3.331h-1.709c-1.0749-.1414-2.0608.6154-2.2022,1.6903-.0189.1435-.0218.2886-.0088.4327v2.544h3.763l-.6,3.92h-3.163v8.33h10.133V0H0Z'/%3E%3C/g%3E%3C/svg%3E"); } .social-link--linkedin { --icon-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24.5 24.5'%3E%3C!-- Generator: Adobe Illustrator 30.6.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 109) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M0,0v24.5h24.5V0H0ZM7.408,21h-3.634v-11.69h3.634v11.69ZM5.6,7.712h-.012c-1.1631,0-2.106-.9429-2.106-2.106s.9429-2.106,2.106-2.106,2.106.9429,2.106,2.106c.0033,1.1598-.9342,2.1027-2.094,2.106ZM21.017,21h-3.634v-5.687c0-1.359-.023-3.1-1.884-3.1-1.89,0-2.182,1.482-2.182,3v5.787h-3.634v-11.69h3.488v1.59h.047c.7137-1.213,2.0356-1.9365,3.442-1.884,3.675,0,4.357,2.421,4.357,5.571v6.413Z'/%3E%3C/svg%3E"); } .social-link--x { --icon-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24.5 24.5'%3E%3C!-- Generator: Adobe Illustrator 30.6.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 109) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M0,0v24.5h24.5V0H0ZM15.5077,20.4816l-4.3922-6.392-5.4989,6.392h-1.4212l6.2892-7.3102L4.1954,4.0184h4.7969l4.1589,6.0529,5.2072-6.0529h1.4211l-5.997,6.971h-.0003l6.5223,9.4921h-4.7969.0001Z'/%3E%3Cpolygon class='st0' points='12.4032 10.9412 8.3115 5.0883 6.1287 5.0883 11.1989 12.3406 11.8361 13.252 11.8361 13.2524 16.1763 19.4604 18.3591 19.4604 13.0404 11.8525 12.4032 10.9412'/%3E%3C/svg%3E"); } .social-link--youtube { --icon-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24.5 24.5'%3E%3C!-- Generator: Adobe Illustrator 30.6.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 109) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cg id='youtube_square'%3E%3Cpath id='Path_79' class='st0' d='M10.214,9.3l5.209,2.957-5.209,2.957s0-5.914,0-5.914ZM24.5,0v24.5H0V0h24.5ZM22.2,12.267c.0102-1.6173-.1284-3.2321-.414-4.824-.2282-.8628-.8989-1.5385-1.76-1.773-1.546-.42-7.776-.42-7.776-.42,0,0-6.23,0-7.776.42-.8618.2339-1.5335.9097-1.762,1.773-.2852,1.5919-.4231,3.2068-.412,4.824-.0102,1.6173.1284,3.2321.414,4.824.2312.8558.9039,1.5216,1.762,1.744,1.546.414,7.776.414,7.776.414,0,0,6.23,0,7.776-.42.8581-.2224,1.5308-.8882,1.762-1.744.2844-1.59.4217-3.2028.41-4.818Z'/%3E%3C/g%3E%3C/svg%3E"); } .social-link--instagram { --icon-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24.5 24.5'%3E%3C!-- Generator: Adobe Illustrator 30.6.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 109) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cg id='instagram_square'%3E%3Cpath id='Path_81' class='st0' d='M12.25,9.333c-1.611,0-2.917,1.306-2.917,2.917s1.306,2.917,2.917,2.917,2.917-1.306,2.917-2.917h0c-.0006-1.6108-1.3062-2.9164-2.917-2.917ZM19.069,7.093c-.2994-.762-.9011-1.3659-1.662-1.668-1.149-.449-3.885-.35-5.157-.35s-4.008-.1-5.157.35c-.762.3004-1.3644.9049-1.662,1.668-.455,1.143-.356,3.885-.356,5.157s-.1,4.007.356,5.157c.2997.7604.9016,1.3623,1.662,1.662,1.149.455,3.885.356,5.157.356s4.007.1,5.157-.356c.7631-.2976,1.3676-.9,1.668-1.662.455-1.149.35-3.885.35-5.157s.1-4.008-.35-5.157c0,0-.006,0-.006,0ZM12.25,16.736c-2.4748-.0027-4.4788-2.0111-4.4761-4.4859s2.0111-4.4788,4.4859-4.4761,4.4788,2.0111,4.4761,4.4859c-.0013,1.187-.4735,2.3249-1.3129,3.1641-.8417.841-1.9832,1.313-3.173,1.312ZM16.917,8.622c-.4214.0016-.8017-.2523-.962-.642-.2243-.533.0259-1.1469.5589-1.3712s1.1469.0259,1.3712.5589c.0549.1305.0828.2707.082.4123.0022.5777-.4643,1.0478-1.042,1.05h-.002l-.006-.008h-.0001ZM0,0v24.5h24.5V0H0ZM20.936,15.861c.0275,1.3589-.4795,2.6742-1.412,3.663-.9888.9325-2.3041,1.4395-3.663,1.412-1.447.082-5.775.082-7.216,0-1.3602.0249-2.6765-.4816-3.669-1.412-.9302-.9902-1.4368-2.3046-1.412-3.663-.082-1.447-.082-5.775,0-7.222-.0275-1.3589.4795-2.6742,1.412-3.663.9931-.9294,2.309-1.4359,3.669-1.412,1.441-.082,5.769-.082,7.216,0,1.3591-.0227,2.6734.4861,3.663,1.418.9325.9888,1.4395,2.3041,1.412,3.663.081,1.441.081,5.769,0,7.216Z'/%3E%3C/g%3E%3C/svg%3E"); } .social-link--email { --icon-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24.5 24.5'%3E%3C!-- Generator: Adobe Illustrator 30.6.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 109) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M0,0v24.5h24.5V0H0ZM12.2877,7.3824h8.3235l-4.1617,3.58-4.1618,3.58-4.1618-3.58-4.1617-3.58h8.3235ZM3.8585,12.7476v-5.2061l2.6824,2.603,2.6824,2.6031-2.6824,2.603-2.6824,2.603v-5.206ZM12.2877,18.1808H4.0885l4.0996-3.3617,1.8405-1.5091,2.2591,1.8524,2.2592-1.8524,1.8404,1.5091,4.0996,3.3617h-8.1992ZM20.7168,12.7476v5.206l-2.6824-2.603-2.6824-2.603,2.6824-2.603,2.6824-2.6031v5.2061Z'/%3E%3C/svg%3E"); } .social-link--copy { --icon-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24.5 24.5'%3E%3C!-- Generator: Adobe Illustrator 30.6.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 109) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='st0' points='14.2734 4.7344 14.2734 9.0704 18.6093 9.0704 18.6093 9.021 14.3228 4.7344 14.2734 4.7344'/%3E%3Cpath class='st0' d='M0,0v24.5h24.5V0H0ZM16.5859,20.9218H4.7344V6.7579h2.3125v1.1562h-1.1562v11.8514h9.5389v-1.1562h1.1562v2.3124ZM19.7656,17.4531h-11.5624V3.5782h6.599l4.9634,4.9633v8.9115Z'/%3E%3Cpolygon class='st0' points='13.1172 4.7344 9.3594 4.7344 9.3594 16.2968 18.6093 16.2968 18.6093 10.2266 13.1172 10.2266 13.1172 4.7344'/%3E%3C/svg%3E"); } .social-link--more { --icon-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24.5 24.5'%3E%3C!-- Generator: Adobe Illustrator 30.6.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 109) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M0,0v24.5h24.5V0H0ZM5.9342,14.1447c-1.0485,0-1.8948-.8463-1.8948-1.8947s.8463-1.8947,1.8948-1.8947,1.8947.8463,1.8947,1.8947-.8463,1.8947-1.8947,1.8947ZM12.25,14.1447c-1.0484,0-1.8947-.8463-1.8947-1.8947s.8463-1.8947,1.8947-1.8947,1.8947.8463,1.8947,1.8947-.8463,1.8947-1.8947,1.8947ZM18.5658,14.1447c-1.0484,0-1.8947-.8463-1.8947-1.8947s.8463-1.8947,1.8947-1.8947,1.8948.8463,1.8948,1.8947-.8463,1.8947-1.8948,1.8947Z'/%3E%3C/svg%3E"); } .social-link { background-color: var(--color-white); border:none; -webkit-mask-image: var(--icon-image); mask-image: var(--icon-image); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center; mask-position: center; padding: 1rem; text-decoration: none; width: 3rem; height: 3rem; &:hover { background-color: var(--color-brand-lighter); } .social-link-icon { display:none; } } } .you-might-like-heading { font-size: 120%; } .you-might-like-cards { order: 1; display: grid; grid-auto-flow: row; grid-gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); font-size: 80%; } /* ========================================================================== PRIMARY NAVIGATION Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ @media (min-width: 992px) { .primary-navigation-area .MegaDropDownMenuOuter { text-align: right; } } @media (min-width: 992px) { .header-bottom-container { min-height: 105px; } } /* Reset some Telerik defaults */ .RadMenu.RadMenu_Coffee { float: none; z-index: 1001 !important; position: relative; } .RadMenu.RadMenu_Coffee:focus { outline: none; } .RadMenu.RadMenu_Coffee .rmVertical .rmToggle .rmIcon:before, .RadMenu.RadMenu_Coffee .rmVertical .rmExpand:before, .RadMenu.RadMenu_Coffee .rmRightArrow .rmIcon:before, .RadMenu.RadMenu_Coffee .rmHorizontal .rmToggle .rmIcon:before, .RadMenu.RadMenu_Coffee .rmHorizontal .rmExpand:before, .RadMenu.RadMenu_Coffee .rmBottomArrow .rmIcon:before { content: none; } .RadMenu.RadMenu_Coffee .rmItem, .RadMenu.RadMenu_Coffee .rmHorizontal > .rmItem, .RadMenu.RadMenu_Coffee .rmHorizontal > .rmRootScrollGroup > .rmItem, .RadMenu.RadMenu_Coffee .rmLink { float: none; } .RadMenu.RadMenu_Coffee .rmLink { padding: 0px; } .RadMenu.RadMenu_Coffee .rmToggle, .RadMenu.RadMenu_Coffee .rmRootGroup .rmRootLink .rmToggle { width: auto; } .RadMenu.RadMenu_Coffee .rmToggle, .RadMenu.RadMenu_Coffee .rmToggle .rmIcon, .RadMenu.RadMenu_Coffee .rmRootGroup .rmRootLink .rmToggle { position: static; } .RadMenu.RadMenu_Coffee .rmGroup .rmContent, .RadMenu.RadMenu_Coffee .rmRootGroup .rmContent { padding: 0; } .RadMenu.RadMenu_Coffee, .RadMenu.RadMenu_Coffee .rmItem { font-size: inherit; } .RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup { padding: 0; } .RadMenu.RadMenu_Coffee ul { margin: 0; padding: 0; } .RadMenu.RadMenu_Coffee .rmItem { list-style: none; } .RadMenu.RadMenu_Coffee .rmDisabled > a { cursor: default; } .RadMenu.RadMenu_Coffee .rmItem { width: auto; clear: both; text-align: left; } .RadMenu.RadMenu_Coffee .rmText, .RadMenu.RadMenu_Coffee .rmHorizontal .rmText, .RadMenu.RadMenu_Coffee .rmSlide .rmText { padding: 0 3px; } .RadMenu.RadMenu_Coffee .rmSlide .rmText { /* give space for the expand arrow */ padding-right: 28px; } .RadMenu.RadMenu_Coffee .rmSlide .rmGroup { position: relative; } .RadMenu.RadMenu_Coffee .rmLink, .RadMenu.RadMenu_Coffee .rmOneLevel .rmItem .rmLink { padding: 0; } .RadMenu.RadMenu_Coffee .rmTwoLevels .rmItem .rmItem, .RadMenu.RadMenu_Coffee .rmTwoLevels .rmLevel1 .rmLink { /* make sure second-level rsm items are lined up properly */ padding-left: 0; } .RadMenu.RadMenu_Coffee .rmTwoLevels .rmLink { margin-bottom: 0; } .RadMenu.RadMenu_Coffee .rmTwoLevels .rmLevel1 > .rmItem > .rmLink { font-size: 1em; } .RadMenu.RadMenu_Coffee .rmTwoLevels .rmLevel1 > .rmItem > .rmLink, .RadMenu.RadMenu_Coffee .rmTwoLevels .rmLevel1 > .rmItem.rmDisabled > .rmLink:hover, .RadMenu.RadMenu_Coffee .rmTwoLevels .rmLevel1 > .rmItem.rmDisabled > .rmLink:focus { text-transform: none; color: var(--color-dark); font-weight: normal; letter-spacing: 0px; } .RadMenu.RadMenu_Coffee .rmOneLevel .rmItem .rmLink { white-space: nowrap; } .RadMenu.RadMenu_Coffee .rmLink { text-decoration: none; display: block; position: relative; /* required for the menu to work in IE */ } .RadMenu.RadMenu_Coffee .rmGroup .rmText { margin: 0; } .RadMenu.RadMenu_Coffee .rmRootLink { color: var(--nav-color); font-family: var(--font-primary); font-size: 100%; font-weight: normal; letter-spacing: 0px; } .header-dark .RadMenu.RadMenu_Coffee .rmRootLink { color: var(--color-white); font-family: var(--font-primary); font-size: 100%; font-weight: normal; letter-spacing: 0px; } .RadMenu.RadMenu_Coffee .rmRootLink.rmSelected { /* root item selected styles */ color: var(--color-text); background-color: transparent; } .header-dark .RadMenu.RadMenu_Coffee .rmRootLink.rmSelected { color: var(--color-white); background-color: transparent; } .RadMenu.RadMenu_Coffee .rmRootLink.rmExpanded, .RadMenu.RadMenu_Coffee .rmRootLink:hover, .RadMenu.RadMenu_Coffee .rmRootLink.rmFocused { /* root item hover and focus styles */ background-color: transparent; color: var(--nav-link-hover); } .header-dark .RadMenu.RadMenu_Coffee .rmRootLink.rmExpanded, .header-dark .RadMenu.RadMenu_Coffee .rmRootLink:hover, .header-dark .RadMenu.RadMenu_Coffee .rmRootLink.rmFocused { color: var(--header-nav-hover); background-color: transparent; } .RadMenu.RadMenu_Coffee .rmGroup { background-color: var(--color-white); } .header-dark .RadMenu.RadMenu_Coffee .rmGroup { background-color: transparent; } .RadMenu.RadMenu_Coffee .rmDisabled > .rmLink { color: var(--color-dark); } .RadMenu.RadMenu_Coffee .rmDisabled > .rmLink:hover, .RadMenu.RadMenu_Coffee .rmDisabled > .rmLink:active { background-color: transparent; color: var(--color-dark); } .header-dark .RadMenu.RadMenu_Coffee .rmDisabled > .rmLink { color: var(--color-grey-200); } .header-dark .RadMenu.RadMenu_Coffee .rmDisabled > .rmLink:hover, .header-dark .RadMenu.RadMenu_Coffee .rmDisabled > .rmLink:active { color: var(--color-grey-200); } .RadMenu.RadMenu_Coffee .rmToggle, .RadMenu.RadMenu_Coffee .rmRootGroup .rmRootLink .rmToggle { float: right; height: 100%; } @media (max-width: 991px) { .RadMenu.RadMenu_Coffee .rmToggle, .RadMenu.RadMenu_Coffee .rmRootGroup .rmRootLink .rmToggle { /* a clickable target to expand multi-level navigaiton */ display: inline-block; } } .RadMenu.RadMenu_Coffee .rmToggle .rmIcon, .RadMenu.RadMenu_Coffee .rmRootGroup .rmRootLink .rmToggle .rmIcon { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; display: block; width: 12px; height: 12px; -webkit-mask-image: url("images/auxIcons.svg#caret"); -webkit-mask-repeat: no-repeat; background: var(--nav-color); margin-top: 15px; margin-bottom: 15px; margin-right: 3px; margin-left: 3px; } .RadMenu.RadMenu_Coffee .rmLink:hover .rmToggle > .rmIcon, .RadMenu.RadMenu_Coffee .rmLink.rmFocused .rmToggle > .rmIcon, .RadMenu.RadMenu_Coffee .rmSelected > .rmLink .rmToggle > .rmIcon, .RadMenu.RadMenu_Coffee .rmFocused > .rmLink.rmRootLink .rmToggle > .rmIcon, .RadMenu.RadMenu_Coffee .rmExpanded > .rmLink .rmToggle > .rmIcon, .RadMenu.RadMenu_Coffee .rmSlide .rmLink .rmToggle > .rmIcon { background: var(--nav-link-hover); } .RadMenu.RadMenu_Coffee .rmExpanded.rmLink > .rmToggle > .rmIcon { background: var(--nav-link-hover); transform: rotate(180deg); } /*2nd and 3rd level navigation (dropdown menus)*/ .RadMenu_Coffee .rmSlide { display: none; /* hide the sub nav until requested */ position: absolute; height: auto !important; } .RadMenu_Coffee .rmSlide .rmItem { float: none; display: block; } .RadMenu_Coffee .rmSlide .rmText { float: none; } .RadMenu_Coffee .rmSlide .rmLink { color: var(--color-dark); font-family: var(--font-primary); font-size: 90%; font-weight: 300; } .header-dark .RadMenu_Coffee .rmSlide .rmLink { color: var(--color-white); font-family: var(--font-primary); font-size: 90%; font-weight: 300; } .RadMenu_Coffee .rmSlide .rmSeparator, .RadMenu_Coffee .rmSlide .rmVertical > .rmSeparator, .RadMenu_Coffee .rmSlide .MegaDropDownMenuSeparator > .rmLink { border-bottom: 1px solid var(--color-white); } .header-dark .RadMenu_Coffee .rmSlide .rmSeparator, .header-dark .RadMenu_Coffee .rmSlide .rmVertical > .rmSeparator, .header-dark .RadMenu_Coffee .rmSlide .MegaDropDownMenuSeparator > .rmLink { border-bottom-color: var(--color-white); } .RadMenu_Coffee .rmSlide .rmSeparator, .RadMenu_Coffee .rmSlide .rmVertical > .rmSeparator { margin: 0 3px; } .RadMenu_Coffee .rmSlide .rmFocused > .rmLink, .RadMenu_Coffee .rmSlide .rmSelected > .rmLink, .RadMenu_Coffee .rmSlide .rmItem.rmSelected > .rmLink { background-color: var(--color-grey-lightest); color: var(--nav-link-hover); } .RadMenu_Coffee .rmSlide .rmFocused > .rmLink.header-dark, .RadMenu_Coffee .rmSlide .rmSelected > .rmLink.header-dark, .RadMenu_Coffee .rmSlide .rmItem.rmSelected > .rmLink.header-dark { background-color: transparent; color: var(--header-nav-hover); } .RadMenu_Coffee .rmSlide .rmLink:hover, .RadMenu_Coffee .rmSlide .rmLink:focus, .RadMenu_Coffee .rmSlide .rmLink.rmFocused, .RadMenu_Coffee .rmSlide .rmLevel1 > .rmItem > .rmLink:hover, .RadMenu_Coffee .rmSlide .rmLevel1 > .rmItem > .rmLink:focus, .RadMenu_Coffee .rmSlide .rmLevel1 > .rmItem > .rmLink.rmFocused { background-color: var(--color-grey-lightest); color: var(--nav-link-hover); } .header-dark .RadMenu_Coffee .rmSlide .rmLink:hover, .header-dark .RadMenu_Coffee .rmSlide .rmLink:focus, .header-dark .RadMenu_Coffee .rmSlide .rmLink.rmFocused, .header-dark .RadMenu_Coffee .rmSlide .rmLevel1 > .rmItem > .rmLink:hover, .header-dark .RadMenu_Coffee .rmSlide .rmLevel1 > .rmItem > .rmLink:focus, .header-dark .RadMenu_Coffee .rmSlide .rmLevel1 > .rmItem > .rmLink.rmFocused { background-color: transparent; color: var(--header-nav-hover); } .RadMenu_Coffee .rmSlide.rmLevel1 .rmGroup { /* for second-level sub-nav and beyond, * we want to indent the nav to give separation */ margin-left: 0; } .RadMenu_Coffee .rmSlide .rmExpandRight, .RadMenu_Coffee .rmSlide .rmGroup a.rmLink.rmExpandRight { background-image: var(--sprite-nav); background-position: 110% -200px; background-repeat: no-repeat; } .RadMenu_Coffee .rmSlide .MegaDropDownMenuSeparator .rmLink { padding: 0; } @media (max-width: 991px) { .RadMenu_Coffee .rmSlide { width: 100% !important; left: 0 !important; } .RadMenu_Coffee .rmSlide ul.rmVertical, .RadMenu_Coffee .rmSlide ul.rmHorizontal, .RadMenu_Coffee .rmSlide ul.rmRootScrollGroup { float: none; } .RadMenu_Coffee .rmSlide .rmSlide { /* for right expanded items, expand below on extra small screens */ left: 0 !important; } .RadMenu_Coffee .rmSlide .rmToggleHandles .rmSlide .rmText { /* if we have toggles on we don't want to add the extra padding */ padding-right: 3px; } .RadMenu_Coffee .rmSlide .rmToggleHandles .rmExpandRight, .RadMenu_Coffee .rmSlide .rmToggleHandles .rmGroup a.rmText.rmExpandRight { /* if toggle handles are on we don't want to display the arrow twice*/ background-image: none; } } @media (min-width: 992px) { .RadMenu.RadMenu_Coffee .rmItem { white-space: nowrap; } .RadMenu.RadMenu_Coffee ul.rmRootGroup { width: auto; float: right; line-height: 1.6; } .RadMenu.RadMenu_Coffee ul.rmRootGroup > .rmItem { float: left; clear: none; } .RadMenu.RadMenu_Coffee ul.rmRootGroup > .rmItem > .rmLink { margin: 0; } .RadMenu.RadMenu_Coffee .rmSlide .rmGroup { margin: 0; } .RadMenu.RadMenu_Coffee .rmSlide .rmItem { float: none; display: block; } .RadMenu.RadMenu_Coffee .rmSlide .rmLink { margin: 0; } .RadMenu.RadMenu_Coffee .rmToggle, .RadMenu.RadMenu_Coffee .rmRootGroup .rmRootLink .rmToggle { display: block; } .RadMenu.RadMenu_Coffee.MegaDropDownMenuOuter ul.rmLevel1 div.rmSlide, .RadMenu.RadMenu_Coffee.MegaDropDownMenuOuter ul.rmLevel1 ul.rmVertical div.rmSlide { display: block !important; } .RadMenu.RadMenu_Coffee.MegaDropDownMenuOuter .rmGroup.rmLevel1 .rmToggle { display: none; } .RadMenu.RadMenu_Coffee.MegaDropDownMenuOuter .rmExpandRight, .RadMenu.RadMenu_Coffee.MegaDropDownMenuOuter .rmGroup a.rmLink.rmExpandRight { background: none; } } @media (max-width: 991px) { .RadMenu.RadMenu_Coffee.MegaDropDownMenuOuter .rmExpandRight, .RadMenu.RadMenu_Coffee.MegaDropDownMenuOuter .rmGroup a.rmLink.rmExpandRight { background: none; } } /* ========================================================================== SECONDARY NAVIGATION Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ /**** Telerik overrides ****/ .RadTreeView.RadTreeView_Coffee { white-space: normal; } .RadTreeView.RadTreeView_Coffee .rtLI, .RadTreeView.RadTreeView_Coffee .rtTop, .RadTreeView.RadTreeView_Coffee .rtMid, .RadTreeView.RadTreeView_Coffee .rtBot { padding: 0; } .RadTreeView.RadTreeView_Coffee .rtIn { font-weight: normal; display: block; } .RadTreeView.RadTreeView_Coffee .rtIn, .RadTreeView.RadTreeView_Coffee .rtHover .rtIn, .RadTreeView.RadTreeView_Coffee .rtSelected .rtIn { padding: 10px 25px; border: none; } .RadTreeView.RadTreeView_Coffee .rtSelected > a.rtIn, .RadTreeView.RadTreeView_Coffee .child-is-selected.rtIn, .RadTreeView.RadTreeView_Coffee .child-is-selected-wrapper .rtIn { background-color: transparent; color: var(--color-brand); font-weight: 400 !important; } .RadTreeView.RadTreeView_Coffee .rtSelected > a.rtIn:hover, .RadTreeView.RadTreeView_Coffee .rtSelected > a.rtIn:active, .RadTreeView.RadTreeView_Coffee .rtSelected > a.rtIn:focus { background-color: transparent; color: var(--color-brand); } .RadTreeView.RadTreeView_Coffee .rtUL .rtUL { padding-left: 25px; } .RadTreeView.RadTreeView_Coffee > .rtUL > .rtLI { /* add a separator border to the first-level sub-nav items only */ border-top: 1px solid var(--color-border); } .RadTreeView.RadTreeView_Coffee > .rtUL > .rtLI:first-child { border-top: none; } .RadTreeView.RadTreeView_Coffee > .rtUL > .rtLI .rtLI .rtIn { /* children should have less padding */ padding: 0 12.5px; } .RadTreeView.RadTreeView_Coffee > .rtUL > .rtLI > .rtUL { /* this makes the children section padding even */ padding-right: 25px; padding-bottom: 10px; } .RadTreeView.RadTreeView_Coffee > .rtUL { /* add a boundary for hovered navs */ margin: 0 1px 1px 1px; } .RadTreeView.RadTreeView_Coffee .rtSp, .RadTreeView.RadTreeView_Coffee .rtPlus, .RadTreeView.RadTreeView_Coffee .rtMinus { /* set display of the expand/collapse icons in this theme */ display: block; } .RadTreeView.RadTreeView_Coffee a.rtIn { color: var(--color-text); transition: all 0.2s ease-in; margin: 0; } @media screen and (prefers-reduced-motion: reduce) { .RadTreeView.RadTreeView_Coffee a.rtIn { transition: none; } } .RadTreeView.RadTreeView_Coffee a.rtIn:hover, .RadTreeView.RadTreeView_Coffee a.rtIn:focus { background-color: none; color: var(--nav-link-hover); } .RadTreeView.RadTreeView_Coffee a.rtIn:active { background-color: var(--color-white); } .nav-secondary { background-color: transparent; margin-bottom: 1em; } .nav-secondary .sub-nav-head { background-color: none; color: var(--color-ink); font-weight: bold; font-size: 120%; padding: 10px 15px; text-transform: uppercase; } .nav-secondary .SubNavigationSeparator { border: none; height: 4px; background-color: transparent; } .nav-secondary .SubNavigationSeparator .rtIn { padding: 0; color: var(--color-text); } .nav-secondary .rtSelected + ul li:first-child .rtIn { background-color: transparent; color: var(--color-brand); font-weight: 400 !important; } .secondary-nav-top .sub-nav-head, .secondary-nav-top .post-secondary-nav { display: none !important; } .secondary-nav-top .nav-secondary { border-color: var(--color-border); border-style: solid; border-width: 2px 0; } .secondary-nav-top .RadTreeView.RadTreeView_Coffee > .rtUL { text-align: center; } .secondary-nav-top .RadTreeView.RadTreeView_Coffee > .rtUL > .rtLI { display: inline-block; border-top: none; } .secondary-nav-top .RadTreeView.RadTreeView_Coffee a.rtIn { color: var(--color-text); font-weight: 600 !important; font-size: 1.2em !important; } /* ========================================================================== AUXILIARY NAVIGATION (utility bar, dark header, aux/primary switch, OBO icons) Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ .header-aux-container .UtilityNavigation { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; } .navbar-toggle { vertical-align: middle; background-color: transparent; border-color: transparent; border-radius: 3px; margin-left: 0px; } .header-dark .navbar-toggle { background-color: transparent; border-color: transparent; } .navbar-toggle.collapsed { background-color: transparent; } .header-dark .navbar-toggle.collapsed { background-color: transparent; } .navbar-toggle:hover, .navbar-toggle:focus { background-color: transparent; } .header-dark .navbar-toggle:hover, .header-dark .navbar-toggle:focus { background-color: rgba(var(--overlay-light-rgb), 0.1); } .navbar-toggle .icon-bar { background-color: transparent; border-radius: 3px; } .header-dark .navbar-toggle .icon-bar { background-color: var(--color-white); } .navbar-toggle .icon-search { margin-top: 13px; margin-bottom: 13px; } .header-aux-container .UtilityAuthentication a, .header-aux-container a.NavigationLink, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link, .header-aux-container .account-toggle .nav-text { color: var(--aux-link-color); font-size: 12px; text-decoration: none; font-weight: bold; } .header-aux-container .UtilityAuthentication a:hover, .header-aux-container .UtilityAuthentication a:focus, .header-aux-container .UtilityAuthentication a:hover span, .header-aux-container .UtilityAuthentication a:focus span, .header-aux-container a.NavigationLink:hover, .header-aux-container a.NavigationLink:focus, .header-aux-container a.NavigationLink:hover span, .header-aux-container a.NavigationLink:focus span, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:hover, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:focus, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:hover span, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:focus span, .header-aux-container .account-toggle .nav-text:hover, .header-aux-container .account-toggle .nav-text:focus, .header-aux-container .account-toggle .nav-text:hover span, .header-aux-container .account-toggle .nav-text:focus span { color: var(--aux-link-color); text-decoration: underline; } .header-dark .header-aux-container .UtilityAuthentication a, .header-dark .header-aux-container a.NavigationLink, .header-dark .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link, .header-dark .header-aux-container .account-toggle .nav-text { color: var(--color-white); } .header-dark .header-aux-container .UtilityAuthentication a:hover, .header-dark .header-aux-container .UtilityAuthentication a:focus, .header-dark .header-aux-container .UtilityAuthentication a:hover span, .header-dark .header-aux-container .UtilityAuthentication a:focus span, .header-dark .header-aux-container a.NavigationLink:hover, .header-dark .header-aux-container a.NavigationLink:focus, .header-dark .header-aux-container a.NavigationLink:hover span, .header-dark .header-aux-container a.NavigationLink:focus span, .header-dark .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:hover, .header-dark .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:focus, .header-dark .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:hover span, .header-dark .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:focus span, .header-dark .header-aux-container .account-toggle .nav-text:hover, .header-dark .header-aux-container .account-toggle .nav-text:focus, .header-dark .header-aux-container .account-toggle .nav-text:hover span, .header-dark .header-aux-container .account-toggle .nav-text:focus span { color: var(--color-white); } .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link { padding-left: 5px; padding-right: 5px; } .header-aux-container .UtilityTranslation { margin-left: 0px; margin-right: 0px; } .header-aux-container .UtilityTranslation select { height: 32px; margin-left: 0; margin-right: 0; } .header-aux-container .caret { border-top-color: var(--aux-link-color); } .header-dark .header-aux-container .caret { border-top-color: var(--color-white); } /* Auxiliary button links ========================================================================== */ /* Button-style auxiliary links (e.g. Cart, My account) */ .nav-auxiliary .nav-aux-button { /* Cart Item Flag indicating how many items are in your cart */ } .nav-auxiliary .nav-aux-button.NavigationListItem { position: relative; /* required for cart indicator placement */ display: inline-block; } .nav-auxiliary .nav-aux-button.nav-aux-cart .NavigationLink, .nav-auxiliary .nav-aux-button.nav-aux-account .NavigationLink { width: 50px; height: 50px; border-radius: 3px; padding-left: 0; padding-right: 0; margin-left: 0px; border: 1px solid transparent; background-color: transparent; text-align: center; } .header-dark .nav-auxiliary .nav-aux-button.nav-aux-cart .NavigationLink, .header-dark .nav-auxiliary .nav-aux-button.nav-aux-account .NavigationLink { background-color: transparent; } .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text, .nav-auxiliary .nav-aux-button.nav-aux-account .nav-text { display: inline-block; vertical-align: middle; background-image: var(--sprite-icons); background-repeat: no-repeat; height: 30px; min-width: 30px; line-height: 30px; overflow: hidden; margin-top: 9px; margin-bottom: 9px; } .nav-auxiliary .nav-aux-button.nav-aux-cart .NavigationLink:hover, .nav-auxiliary .nav-aux-button.nav-aux-cart .NavigationLink:focus { background-color: transparent; } .header-dark .nav-auxiliary .nav-aux-button.nav-aux-cart .NavigationLink:hover, .header-dark .nav-auxiliary .nav-aux-button.nav-aux-cart .NavigationLink:focus { background-color: rgba(var(--overlay-light-rgb), 0.1); } .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text { background-position: -252px -78px; font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; width: 30px; height: 30px; } @media (max-width: 991px) { .nav-auxiliary .nav-aux-button.nav-aux-account .NavigationLink:hover, .nav-auxiliary .nav-aux-button.nav-aux-account .NavigationLink:focus { background-color: transparent; } .header-dark .nav-auxiliary .nav-aux-button.nav-aux-account .NavigationLink:hover, .header-dark .nav-auxiliary .nav-aux-button.nav-aux-account .NavigationLink:focus { background-color: rgba(var(--overlay-light-rgb), 0.1); } } @media (min-width: 992px) { .nav-auxiliary .nav-aux-button.nav-aux-account .NavigationLink { width: auto; } } .nav-auxiliary .nav-aux-button.nav-aux-account .nav-text { background-position: -986px -76px; padding-left: 27px; } @media (max-width: 991px) { .nav-auxiliary .nav-aux-button.nav-aux-account .nav-text { width: 30px; height: 30px; padding-left: 0; font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } } .nav-auxiliary .nav-aux-button.nav-aux-cart .cartFull { /* left postion is padding plus placement */ position: absolute; top: 0; right: -2px; line-height: 1; width: 1.6em; } .nav-auxiliary .nav-aux-button.nav-aux-cart .cartCenter { color: var(--color-white); background-color: var(--color-accent-teal); border-radius: 2px; font-size: 1em; line-height: 1; padding: 0 2px 1px; box-shadow: -1px 1px 0 rgba(var(--color-text-rgb), 0.6); } /* Dark header ========================================================================== */ .header-dark .header-logo path { fill: var(--color-white); } .header-dark .obo-toggle, .header-dark .ste-toggle { background-position-y: -105px; } .header-dark .navbar-toggle .icon-search { background-position-y: -112px; } .header-dark .UtilitySearch #SimpleSearchBlock .search-field { background-position-y: -75px; } .header-dark .UtilitySearch #SimpleSearchBlock .search-field:focus { background-position-y: 5px; } .header-dark .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text, .header-dark .nav-auxiliary .nav-aux-button.nav-aux-account .nav-text { background-position-y: -112px; } a.ste-toggle, .obo-toggle, .page-statistics-toggle { background-color: transparent; margin-right: 0; border-radius: 3px; } .header-dark a.ste-toggle, .header-dark .obo-toggle, .header-dark .page-statistics-toggle { background-color: transparent; } a.ste-toggle:hover, a.ste-toggle:focus, .obo-toggle:hover, .obo-toggle:focus, .page-statistics-toggle:hover, .page-statistics-toggle:focus { background-color: transparent; } .header-dark a.ste-toggle:hover, .header-dark a.ste-toggle:focus, .header-dark .obo-toggle:hover, .header-dark .obo-toggle:focus, .header-dark .page-statistics-toggle:hover, .header-dark .page-statistics-toggle:focus { background-color: rgba(var(--overlay-light-rgb), 0.1); } a.ste-toggle.on, .obo-toggle.on, .page-statistics-toggle.on { background-color: transparent; } a.ste-toggle.on:hover, a.ste-toggle.on:focus, .obo-toggle.on:hover, .obo-toggle.on:focus, .page-statistics-toggle.on:hover, .page-statistics-toggle.on:focus { background-color: rgba(var(--shadow-rgb), 0); } .header-dark a.ste-toggle.on, .header-dark .obo-toggle.on, .header-dark .page-statistics-toggle.on { background-color: transparent; } .header-dark a.ste-toggle.on:hover, .header-dark a.ste-toggle.on:focus, .header-dark .obo-toggle.on:hover, .header-dark .obo-toggle.on:focus, .header-dark .page-statistics-toggle.on:hover, .header-dark .page-statistics-toggle.on:focus { background-color: rgba(var(--shadow-rgb), 0); } @media (min-width: 992px) { .obo-toggle { margin-top: 2px; } } .OnBehalfOfContainer { width: 100%; } @media (max-width: 991px) { .UtilitySection.UtilitySearch { display: none; } } #SimpleSearchBlock .search-field { background: var(--color-white) var(--sprite-header) no-repeat; background-position: 5px 5px; padding-left: 28px; } #SimpleSearchBlock .TextButton { display: none; } .UtilitySearch #SimpleSearchBlock .search-field { margin: 0; width: 50px; height: 50px; border-color: transparent; box-shadow: none; padding-right: 0; background-color: transparent; color: transparent; transition: width 1s; } @media screen and (prefers-reduced-motion: reduce) { .UtilitySearch #SimpleSearchBlock .search-field { transition: none; } } .UtilitySearch #SimpleSearchBlock .search-field:hover { cursor: pointer; background-color: transparent; } .UtilitySearch #SimpleSearchBlock .search-field:focus { width: 13em; border-color: var(--color-grey-300); box-shadow: inset 0 1px 1px rgba(var(--shadow-rgb), 0.075); background-color: var(--color-white); padding-right: 10px; color: var(--color-text); } .header-dark .UtilitySearch #SimpleSearchBlock .search-field { background-color: transparent; } .header-dark .UtilitySearch #SimpleSearchBlock .search-field:hover { background-color: rgba(var(--overlay-light-rgb), 0.1); } .header-dark .UtilitySearch #SimpleSearchBlock .search-field:focus { background-color: var(--color-white); } .nav-search-results-wrapper a { color: var(--color-brand); } .nav-search-results-highlighted-item:-moz-any-link { background-color: var(--color-brand); color: var(--color-white); } .nav-search-results-highlighted-item:any-link, .nav-search-results-wrapper a:hover, .nav-search-results-wrapper a:focus { background-color: var(--color-brand); color: var(--color-white); } /* Auxiliary/Primary switch ========================================================================== */ /** * A class that allows a navigation to display in the primary nav on xs screens * and the auxiliary nav on wider screens. * To use this configure the nav item to not be hidden and also display in the * auxiliary navigaiton item. */ @media (max-width: 767px) { .nav-auxiliary .nav-aux-primary-switch, tr.nav-auxiliary .nav-aux-primary-switch, th.nav-auxiliary .nav-aux-primary-switch, td.nav-auxiliary .nav-aux-primary-switch { display: none !important; } } @media (min-width: 768px) { .nav-primary .nav-aux-primary-switch, tr.nav-primary .nav-aux-primary-switch, th.nav-primary .nav-aux-primary-switch, td.nav-primary .nav-aux-primary-switch { display: none !important; } } @media (max-width: 991px) { .searchbar-collapse { width: 100%; } .searchbar-collapse .search-container { padding: 0; margin-top: 10px; margin-bottom: 10px; } .header-container .UtilityNavigation.nav-auxiliary { text-align: right; } } /* Obo icons */ .obo-panel { --system-icon-color:var(--color-white); } .obo-action.obo-clear-cart:before { opacity: 0.9; } /* SVG icon support for OOTB themes */ .wrapper.SVG-enabled { /* Replace out-of-the-box hamburger icon */ /* On behalf of */ /* Search */ } .wrapper.SVG-enabled .dropdown .caret { border: none; } .wrapper.SVG-enabled .nav-aux-cart a, .wrapper.SVG-enabled .nav-aux-account a, .wrapper.SVG-enabled .navbar-toggle .icon-search, .wrapper.SVG-enabled .obo-toggle, .wrapper.SVG-enabled .page-statistics-toggle, .wrapper.SVG-enabled .ste-toggle, .wrapper.SVG-enabled .UtilitySearch #SimpleSearchBlock, .wrapper.SVG-enabled .navbar-toggle { width: 30px; height: 30px; background-image: none; } .wrapper.SVG-enabled .nav-aux-cart a:before, .wrapper.SVG-enabled .nav-aux-account a:before, .wrapper.SVG-enabled .navbar-toggle .icon-search:before, .wrapper.SVG-enabled .obo-toggle:before, .wrapper.SVG-enabled .page-statistics-toggle:before, .wrapper.SVG-enabled .ste-toggle:before, .wrapper.SVG-enabled .UtilitySearch #SimpleSearchBlock:before, .wrapper.SVG-enabled .navbar-toggle:before { background: transparent var(--sprite-header) no-repeat; -webkit-mask-image: none; mask-image: none; width: 30px; height: 30px; } .wrapper.SVG-enabled .nav-aux-cart a:before { background-position: 0 -49px; } .wrapper.SVG-enabled .nav-aux-account a:before { background-position: 0 -110px; } .wrapper.SVG-enabled .page-statistics-toggle:before, .wrapper.SVG-enabled .page-statistics-toggle.on { background-position: 0 -367px; } .wrapper.SVG-enabled .menu-toggle { background: transparent var(--sprite-header) no-repeat; background-position: 0 -440px; width: 30px; height: 30px; } .wrapper.SVG-enabled .menu-toggle .icon-bar { display: none; } .wrapper.SVG-enabled a.obo-toggle:before { background-position: 0 -518px; font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } .wrapper.SVG-enabled a.obo-toggle.on, .wrapper.SVG-enabled a.obo-toggle.on:hover { background-color: transparent; } .wrapper.SVG-enabled a.obo-toggle.on:before, .wrapper.SVG-enabled a.obo-toggle.on:hover:before { filter: none; } .wrapper.SVG-enabled .obo-action:before { background-color: var(--color-white); } .wrapper.SVG-enabled .searchbar-toggle { margin: 0; } .wrapper.SVG-enabled .navbar-toggle .icon-search { margin: 0; } .wrapper.SVG-enabled .navbar-toggle .icon-search:before, .wrapper.SVG-enabled .header-search > .header-search:before { background-position: 0 0; } .wrapper.SVG-enabled a.ste-toggle:before { background-position: 0 -290px; margin-left: 0; } .wrapper.SVG-enabled a.ste-toggle.on, .wrapper.SVG-enabled a.ste-toggle.on:hover { background-color: transparent; } .wrapper.SVG-enabled a.ste-toggle.on:before, .wrapper.SVG-enabled a.ste-toggle.on:hover:before { filter: none; } .wrapper.SVG-enabled .dropdown .caret:before { background-color: var(--aux-link-color); } .wrapper.SVG-enabled .nav-aux-cart .nav-text, .wrapper.SVG-enabled .nav-aux-account .nav-text { position: absolute; left: -10000px; z-index: 2000; font-size: 70%; } .obo-action { background-image: var(--sprite-obo); } .obo-action.obo-change-contact, .obo-action.obo-change-contact[disabled]:hover, .obo-action.obo-change-contact.Disabled:hover, .obo-action.obo-change-contact.aspNetDisabled:hover, a.aspNetDisabled:hover .obo-action.obo-change-contact { background-position: 0px 0; } .obo-action.obo-change-contact:hover, .obo-action.obo-change-contact:focus, a:hover .obo-action.obo-change-contact, a:focus .obo-action.obo-change-contact { background-position: 0px -35px; } .obo-action.obo-clear, .obo-action.obo-clear[disabled]:hover, .obo-action.obo-clear.Disabled:hover, .obo-action.obo-clear.aspNetDisabled:hover, a.aspNetDisabled:hover .obo-action.obo-clear { background-position: -35px 0; } .obo-action.obo-clear:hover, .obo-action.obo-clear:focus, a:hover .obo-action.obo-clear, a:focus .obo-action.obo-clear { background-position: -35px -35px; } /* ========================================================================== SOCIAL MEDIA ICONS Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ .SocialSprite { border-radius: 4px; } /**** End Social Netowrking Icon Styling ****/ input, button, select, textarea { font-family: var(--font-primary); } select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input, .input-fake { display: inline-block; height: 40px; padding: 5px 10px; font-size: 100%; line-height: 1.6; color: var(--color-text); border: 1px solid var(--color-grey-300); border-radius: 3px; box-shadow: inset 0 1px 1px rgba(var(--shadow-rgb), 0.075); transition: border linear 0.2s, box-shadow linear 0.2s; } @media screen and (prefers-reduced-motion: reduce) { select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input, .input-fake { transition: none; } } select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus, .input-fake:focus { border-color: var(--color-brand-light); outline: 0; box-shadow: inset 0 1px 1px rgba(var(--shadow-rgb), 0.075), 0 0 8px var(--color-brand-glow); } select::-moz-placeholder, textarea::-moz-placeholder, input[type="text"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="datetime"]::-moz-placeholder, input[type="datetime-local"]::-moz-placeholder, input[type="date"]::-moz-placeholder, input[type="month"]::-moz-placeholder, input[type="time"]::-moz-placeholder, input[type="week"]::-moz-placeholder, input[type="number"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="url"]::-moz-placeholder, input[type="search"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="color"]::-moz-placeholder, .uneditable-input::-moz-placeholder, .input-fake::-moz-placeholder { color: var(--color-grey-600); opacity: 1; } select::placeholder, textarea::placeholder, input[type="text"]::placeholder, input[type="password"]::placeholder, input[type="datetime"]::placeholder, input[type="datetime-local"]::placeholder, input[type="date"]::placeholder, input[type="month"]::placeholder, input[type="time"]::placeholder, input[type="week"]::placeholder, input[type="number"]::placeholder, input[type="email"]::placeholder, input[type="url"]::placeholder, input[type="search"]::placeholder, input[type="tel"]::placeholder, input[type="color"]::placeholder, .uneditable-input::placeholder, .input-fake::placeholder { color: var(--color-grey-600); opacity: 1; } .input-fake:focus-within { border-color: var(--color-brand-light); outline: 0; box-shadow: inset 0 1px 1px rgba(var(--shadow-rgb), 0.075), 0 0 8px var(--color-brand-glow); } /* Upload file button*/ .RadUpload .ruInputs li:hover .ruButton, .RadUpload .ruInputs li:focus .ruButton { background-color: var(--color-grey-400); color: var(--color-text); } input[type="date"] { padding-right: 0; position: relative; } input[type="date"]::-webkit-calendar-picker-indicator { border-left: 1px solid var(--color-grey-200); padding: 8px; cursor: pointer; background: var(--color-grey-lighter) url("../../Assets/images/IconSprite.svg#datepicker") no-repeat center center; background-size: 15px 15px; position: absolute; right: 0; top: 0; } input[type="date"]::-webkit-calendar-picker-indicator:hover { background-color: var(--color-grey-100); } input[type="date"]::-webkit-calendar-picker-indicator:focus { background-color: var(--color-accent-orange-dark); filter: invert(100%) brightness(100%); } /* RadComboBox needs the same styles as normal inputs, * but has to be done separately due to its structure */ .RadComboBox.RadComboBox_MetroTouch { color: var(--color-text); font-family: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; } .RadComboBox.RadComboBox_MetroTouch .rcbInner, .RadComboBox.RadComboBox_MetroTouch .rcbInner .rcbInput, .RadComboBox.RadComboBox_MetroTouch .rcbFocused, .RadComboBox.RadComboBox_MetroTouch .rcbFocused .rcbInput, .RadComboBox.RadComboBox_MetroTouch .rcbHovered, .RadComboBox.RadComboBox_MetroTouch .rcbHovered .rcbInput { color: var(--color-text); } .RadComboBox.RadComboBox_MetroTouch .rcbInner { height: 40px; padding: 0; font-size: 100%; line-height: 1.6; border: 1px solid var(--color-grey-300); border-radius: 3px; box-shadow: inset 0 1px 1px rgba(var(--shadow-rgb), 0.075); transition: border linear 0.2s, box-shadow linear 0.2s; overflow: hidden; } @media screen and (prefers-reduced-motion: reduce) { .RadComboBox.RadComboBox_MetroTouch .rcbInner { transition: none; } } .RadComboBox.RadComboBox_MetroTouch .rcbInputCell { padding: 0; } .RadComboBox.RadComboBox_MetroTouch .rcbFocused { border-color: var(--color-brand-light); outline: 0; box-shadow: inset 0 1px 1px rgba(var(--shadow-rgb), 0.075), 0 0 8px var(--color-brand-glow); } .RadComboBox.RadComboBox_MetroTouch .rcbInput { height: 100%; padding: 5px 10px; } .RadComboBox.RadComboBox_MetroTouch.PageSizeDropDown .rcbInput { /* Make sure the page size dropdown in the RadGrid has enough room to show page size */ padding: 2px; } .RadComboBox.RadComboBox_MetroTouch .rcbInner .rcbEmptyMessage, .RadComboBox.RadComboBox_MetroTouch .rcbHovered .rcbEmptyMessage { color: var(--color-grey-600); } .RadComboBox.RadComboBox_MetroTouch .rcbActionButton { border-radius: 0 3px 3px 0; height: 40px; padding: 0; width: 30px; } .RadComboBox.RadComboBox_MetroTouch .rcbActionButton .rcbIcon { height: 1.4em; } .RadComboBox.RadComboBox_MetroTouch .rcbActionButton .p-icon { width: 30px; } .RadComboBoxDropDown.RadComboBoxDropDown_MetroTouch { font: inherit; } .RadComboBoxDropDown.RadComboBoxDropDown_MetroTouch .rcbItem, .RadComboBoxDropDown.RadComboBoxDropDown_MetroTouch .rcbHovered, .RadComboBoxDropDown.RadComboBoxDropDown_MetroTouch .rcbDisabled, .RadComboBoxDropDown.RadComboBoxDropDown_MetroTouch .rcbLoading { padding-top: 5px; padding-bottom: 5px; } .RadInput.RadInput.riSingle, .RadInput.RadInput, .RadInput { height: auto !important; /* IE11 */ } .RadInput.RadInput.riSingle .riTextBox, .RadInput.RadInput .riTextBox, .RadInput .riTextBox { height: 40px; padding: 5px 10px; border-color: var(--color-grey-300); font: inherit; color: var(--color-text); } .RadInput.RadInput.riSingle .riTextBox:focus, .RadInput.RadInput .riTextBox:focus, .RadInput .riTextBox:focus { border-color: var(--color-brand-light); } .RadUpload.RadUpload .ruFakeInput { height: 38px; padding: 0; border-radius: 3px; } /* RadEditor designed to look like a normal text box */ .HtmlEditorTextBoxStyle { border: 1px solid var(--color-grey-300); border-radius: 3px; box-shadow: inset 0 1px 1px rgba(var(--shadow-rgb), 0.075); } .HtmlEditorTextBoxStyle .reContent { border-radius: 3px; } .HtmlEditorTextBoxStyle iframe, .HtmlEditorTextBoxStyle td { background-color: transparent; } /* RadPicker - Make sure there's some space between the picker and the time zone label*/ .RadPicker + .TimeZoneLabel { margin-left: .5em; } /* Chosen multi-select */ .chosen-container-multi .chosen-choices { min-height: 40px; border-radius: 3px; border-color: var(--color-grey-300); box-shadow: inset 0 1px 1px rgba(var(--shadow-rgb), 0.075); transition: border linear 0.2s, box-shadow linear 0.2s; background-image: none; } @media screen and (prefers-reduced-motion: reduce) { .chosen-container-multi .chosen-choices { transition: none; } } .chosen-container-multi .chosen-choices li.search-field { /* Remove the styling used in the master page search-field */ background-color: transparent; background-image: none; border-color: transparent; padding-left: 0 !important; } .chosen-container-active .chosen-choices { border-color: var(--color-brand-light); outline: 0; box-shadow: inset 0 1px 1px rgba(var(--shadow-rgb), 0.075), 0 0 8px var(--color-brand-glow); } input[type="radio"], input[type="checkbox"] { margin: 4px 0 0; *margin-top: 0; /* IE7 */ margin-top: 1px \9; /* IE8-9 */ line-height: normal; cursor: pointer; } input[type="file"], input[type="image"], input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] { width: auto; } textarea { height: auto; } select { border: 1px solid var(--color-grey-300); background-color: var(--color-white); } select[multiple], select[size] { height: auto; } select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { outline: thin dotted var(--color-grey-800); outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } /* Touch-friendly form controls that show as buttons */ .radiobutton-buttons input[type="radio"]:checked + label { color: var(--color-text); background: var(--color-grey); border-color: var(--color-grey); } /* ========================================================================== BUTTONS Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ /* set up button base styles */ .btn, .TextButton, .RadUpload.RadUpload .ruButton, .RadUploadProgressArea.RadUploadProgressArea .ruButton { display: inline-block; margin-bottom: 0; font-weight: 600; font-family: var(--font-primary); text-align: center; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: normal; text-decoration: none; padding: 10px 20px; font-size: 1em; line-height: 1.6; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; user-select: none; transition: background 0.2s ease-out; } @media screen and (prefers-reduced-motion: reduce) { .btn, .TextButton, .RadUpload.RadUpload .ruButton, .RadUploadProgressArea.RadUploadProgressArea .ruButton { transition: none; } } .btn.disabled, .btn[disabled], fieldset[disabled] .btn, .btn.aspNetDisabled, .TextButton.disabled, .TextButton[disabled], fieldset[disabled] .TextButton, .TextButton.aspNetDisabled, .RadUpload.RadUpload .ruButton.disabled, .RadUpload.RadUpload .ruButton[disabled], fieldset[disabled] .RadUpload.RadUpload .ruButton, .RadUpload.RadUpload .ruButton.aspNetDisabled, .RadUploadProgressArea.RadUploadProgressArea .ruButton.disabled, .RadUploadProgressArea.RadUploadProgressArea .ruButton[disabled], fieldset[disabled] .RadUploadProgressArea.RadUploadProgressArea .ruButton, .RadUploadProgressArea.RadUploadProgressArea .ruButton.aspNetDisabled { opacity: .55; box-shadow: none; } a.TextButton.disabled, a.TextButton[disabled], fieldset[disabled] a.TextButton, a.TextButton.aspNetDisabled { pointer-events: none; } /* default button */ .btn, .TextButton, .RadUpload.RadUpload .ruButton, .RadUploadProgressArea.RadUploadProgressArea .ruButton { background-color: var(--color-grey); border-color: var(--color-grey); } .btn, .btn:hover, .btn:focus, .btn:active, .btn:visited, .TextButton, .TextButton:hover, .TextButton:focus, .TextButton:active, .TextButton:visited, .RadUpload.RadUpload .ruButton, .RadUpload.RadUpload .ruButton:hover, .RadUpload.RadUpload .ruButton:focus, .RadUpload.RadUpload .ruButton:active, .RadUpload.RadUpload .ruButton:visited, .RadUploadProgressArea.RadUploadProgressArea .ruButton, .RadUploadProgressArea.RadUploadProgressArea .ruButton:hover, .RadUploadProgressArea.RadUploadProgressArea .ruButton:focus, .RadUploadProgressArea.RadUploadProgressArea .ruButton:active, .RadUploadProgressArea.RadUploadProgressArea .ruButton:visited { text-decoration: none; } .btn, .btn:visited, .TextButton, .TextButton:visited, .RadUpload.RadUpload .ruButton, .RadUpload.RadUpload .ruButton:visited, .RadUploadProgressArea.RadUploadProgressArea .ruButton, .RadUploadProgressArea.RadUploadProgressArea .ruButton:visited { color: var(--color-text); } .btn:hover, .btn:focus, .btn:active, .TextButton:hover, .TextButton:focus, .TextButton:active, .RadUpload.RadUpload .ruButton:hover, .RadUpload.RadUpload .ruButton:focus, .RadUpload.RadUpload .ruButton:active, .RadUploadProgressArea.RadUploadProgressArea .ruButton:hover, .RadUploadProgressArea.RadUploadProgressArea .ruButton:focus, .RadUploadProgressArea.RadUploadProgressArea .ruButton:active { color: var(--color-text); text-decoration: none; background-color: var(--color-grey-400); border-color: var(--color-grey-400); } .btn:active, .TextButton:active, .RadUpload.RadUpload .ruButton:active, .RadUploadProgressArea.RadUploadProgressArea .ruButton:active { background-image: none; } .btn:disabled, .btn:disabled:hover, .btn:disabled:focus, .btn:disabled:active, .btn.disabled, .btn.disabled:hover, .btn.disabled:focus, .btn.disabled:active, .btn.aspNetDisabled, .btn.aspNetDisabled:hover, .btn.aspNetDisabled:focus, .btn.aspNetDisabled:active, .TextButton:disabled, .TextButton:disabled:hover, .TextButton:disabled:focus, .TextButton:disabled:active, .TextButton.disabled, .TextButton.disabled:hover, .TextButton.disabled:focus, .TextButton.disabled:active, .TextButton.aspNetDisabled, .TextButton.aspNetDisabled:hover, .TextButton.aspNetDisabled:focus, .TextButton.aspNetDisabled:active, .RadUpload.RadUpload .ruButton:disabled, .RadUpload.RadUpload .ruButton:disabled:hover, .RadUpload.RadUpload .ruButton:disabled:focus, .RadUpload.RadUpload .ruButton:disabled:active, .RadUpload.RadUpload .ruButton.disabled, .RadUpload.RadUpload .ruButton.disabled:hover, .RadUpload.RadUpload .ruButton.disabled:focus, .RadUpload.RadUpload .ruButton.disabled:active, .RadUpload.RadUpload .ruButton.aspNetDisabled, .RadUpload.RadUpload .ruButton.aspNetDisabled:hover, .RadUpload.RadUpload .ruButton.aspNetDisabled:focus, .RadUpload.RadUpload .ruButton.aspNetDisabled:active, .RadUploadProgressArea.RadUploadProgressArea .ruButton:disabled, .RadUploadProgressArea.RadUploadProgressArea .ruButton:disabled:hover, .RadUploadProgressArea.RadUploadProgressArea .ruButton:disabled:focus, .RadUploadProgressArea.RadUploadProgressArea .ruButton:disabled:active, .RadUploadProgressArea.RadUploadProgressArea .ruButton.disabled, .RadUploadProgressArea.RadUploadProgressArea .ruButton.disabled:hover, .RadUploadProgressArea.RadUploadProgressArea .ruButton.disabled:focus, .RadUploadProgressArea.RadUploadProgressArea .ruButton.disabled:active, .RadUploadProgressArea.RadUploadProgressArea .ruButton.aspNetDisabled, .RadUploadProgressArea.RadUploadProgressArea .ruButton.aspNetDisabled:hover, .RadUploadProgressArea.RadUploadProgressArea .ruButton.aspNetDisabled:focus, .RadUploadProgressArea.RadUploadProgressArea .ruButton.aspNetDisabled:active { color: var(--color-text); background-color: var(--color-grey); border-color: var(--color-grey); } .RadUpload.RadUpload .ruBrowse, .RadUpload.RadUpload .ruRemove { height: auto; padding: 10px 20px; line-height: 1.6; border-radius: 4px; } /* primary button */ .PrimaryButton, .UsePrimaryButton .TextButton, .RadGrid input.PrimaryButton, .RadGrid.RadGrid input.TextButton.PrimaryButton, .RadGrid.RadGrid a.TextButton.PrimaryButton { background-color: var(--btn-primary-bg); border-color: transparent; } .PrimaryButton, .PrimaryButton:hover, .PrimaryButton:focus, .PrimaryButton:active, .PrimaryButton:visited, .UsePrimaryButton .TextButton, .UsePrimaryButton .TextButton:hover, .UsePrimaryButton .TextButton:focus, .UsePrimaryButton .TextButton:active, .UsePrimaryButton .TextButton:visited, .RadGrid input.PrimaryButton, .RadGrid input.PrimaryButton:hover, .RadGrid input.PrimaryButton:focus, .RadGrid input.PrimaryButton:active, .RadGrid input.PrimaryButton:visited, .RadGrid.RadGrid input.TextButton.PrimaryButton, .RadGrid.RadGrid input.TextButton.PrimaryButton:hover, .RadGrid.RadGrid input.TextButton.PrimaryButton:focus, .RadGrid.RadGrid input.TextButton.PrimaryButton:active, .RadGrid.RadGrid input.TextButton.PrimaryButton:visited, .RadGrid.RadGrid a.TextButton.PrimaryButton, .RadGrid.RadGrid a.TextButton.PrimaryButton:hover, .RadGrid.RadGrid a.TextButton.PrimaryButton:focus, .RadGrid.RadGrid a.TextButton.PrimaryButton:active, .RadGrid.RadGrid a.TextButton.PrimaryButton:visited { text-decoration: none; } .PrimaryButton, .PrimaryButton:visited, .UsePrimaryButton .TextButton, .UsePrimaryButton .TextButton:visited, .RadGrid input.PrimaryButton, .RadGrid input.PrimaryButton:visited, .RadGrid.RadGrid input.TextButton.PrimaryButton, .RadGrid.RadGrid input.TextButton.PrimaryButton:visited, .RadGrid.RadGrid a.TextButton.PrimaryButton, .RadGrid.RadGrid a.TextButton.PrimaryButton:visited { color: var(--color-white); } .PrimaryButton:hover, .PrimaryButton:focus, .PrimaryButton:active, .UsePrimaryButton .TextButton:hover, .UsePrimaryButton .TextButton:focus, .UsePrimaryButton .TextButton:active, .RadGrid input.PrimaryButton:hover, .RadGrid input.PrimaryButton:focus, .RadGrid input.PrimaryButton:active, .RadGrid.RadGrid input.TextButton.PrimaryButton:hover, .RadGrid.RadGrid input.TextButton.PrimaryButton:focus, .RadGrid.RadGrid input.TextButton.PrimaryButton:active, .RadGrid.RadGrid a.TextButton.PrimaryButton:hover, .RadGrid.RadGrid a.TextButton.PrimaryButton:focus, .RadGrid.RadGrid a.TextButton.PrimaryButton:active { color: var(--color-white); text-decoration: none; background-color: var(--btn-primary-hover-bg); border-color: rgba(var(--shadow-rgb), 0); } .PrimaryButton:active, .UsePrimaryButton .TextButton:active, .RadGrid input.PrimaryButton:active, .RadGrid.RadGrid input.TextButton.PrimaryButton:active, .RadGrid.RadGrid a.TextButton.PrimaryButton:active { background-image: none; } .PrimaryButton:disabled, .PrimaryButton:disabled:hover, .PrimaryButton:disabled:focus, .PrimaryButton:disabled:active, .PrimaryButton.disabled, .PrimaryButton.disabled:hover, .PrimaryButton.disabled:focus, .PrimaryButton.disabled:active, .PrimaryButton.aspNetDisabled, .PrimaryButton.aspNetDisabled:hover, .PrimaryButton.aspNetDisabled:focus, .PrimaryButton.aspNetDisabled:active, .UsePrimaryButton .TextButton:disabled, .UsePrimaryButton .TextButton:disabled:hover, .UsePrimaryButton .TextButton:disabled:focus, .UsePrimaryButton .TextButton:disabled:active, .UsePrimaryButton .TextButton.disabled, .UsePrimaryButton .TextButton.disabled:hover, .UsePrimaryButton .TextButton.disabled:focus, .UsePrimaryButton .TextButton.disabled:active, .UsePrimaryButton .TextButton.aspNetDisabled, .UsePrimaryButton .TextButton.aspNetDisabled:hover, .UsePrimaryButton .TextButton.aspNetDisabled:focus, .UsePrimaryButton .TextButton.aspNetDisabled:active, .RadGrid input.PrimaryButton:disabled, .RadGrid input.PrimaryButton:disabled:hover, .RadGrid input.PrimaryButton:disabled:focus, .RadGrid input.PrimaryButton:disabled:active, .RadGrid input.PrimaryButton.disabled, .RadGrid input.PrimaryButton.disabled:hover, .RadGrid input.PrimaryButton.disabled:focus, .RadGrid input.PrimaryButton.disabled:active, .RadGrid input.PrimaryButton.aspNetDisabled, .RadGrid input.PrimaryButton.aspNetDisabled:hover, .RadGrid input.PrimaryButton.aspNetDisabled:focus, .RadGrid input.PrimaryButton.aspNetDisabled:active, .RadGrid.RadGrid input.TextButton.PrimaryButton:disabled, .RadGrid.RadGrid input.TextButton.PrimaryButton:disabled:hover, .RadGrid.RadGrid input.TextButton.PrimaryButton:disabled:focus, .RadGrid.RadGrid input.TextButton.PrimaryButton:disabled:active, .RadGrid.RadGrid input.TextButton.PrimaryButton.disabled, .RadGrid.RadGrid input.TextButton.PrimaryButton.disabled:hover, .RadGrid.RadGrid input.TextButton.PrimaryButton.disabled:focus, .RadGrid.RadGrid input.TextButton.PrimaryButton.disabled:active, .RadGrid.RadGrid input.TextButton.PrimaryButton.aspNetDisabled, .RadGrid.RadGrid input.TextButton.PrimaryButton.aspNetDisabled:hover, .RadGrid.RadGrid input.TextButton.PrimaryButton.aspNetDisabled:focus, .RadGrid.RadGrid input.TextButton.PrimaryButton.aspNetDisabled:active, .RadGrid.RadGrid a.TextButton.PrimaryButton:disabled, .RadGrid.RadGrid a.TextButton.PrimaryButton:disabled:hover, .RadGrid.RadGrid a.TextButton.PrimaryButton:disabled:focus, .RadGrid.RadGrid a.TextButton.PrimaryButton:disabled:active, .RadGrid.RadGrid a.TextButton.PrimaryButton.disabled, .RadGrid.RadGrid a.TextButton.PrimaryButton.disabled:hover, .RadGrid.RadGrid a.TextButton.PrimaryButton.disabled:focus, .RadGrid.RadGrid a.TextButton.PrimaryButton.disabled:active, .RadGrid.RadGrid a.TextButton.PrimaryButton.aspNetDisabled, .RadGrid.RadGrid a.TextButton.PrimaryButton.aspNetDisabled:hover, .RadGrid.RadGrid a.TextButton.PrimaryButton.aspNetDisabled:focus, .RadGrid.RadGrid a.TextButton.PrimaryButton.aspNetDisabled:active { color: var(--color-white); background-color: var(--btn-primary-bg); border-color: transparent; } /* accent button */ .AccentButton, .AccentButton .TextButton, .RadGrid input.AccentButton, .RadGrid.RadGrid input.TextButton.AccentButton, .RadGrid.RadGrid a.TextButton.AccentButton { background-color: var(--btn-secondary-bg); border-color: transparent; } .AccentButton, .AccentButton:hover, .AccentButton:focus, .AccentButton:active, .AccentButton:visited, .AccentButton .TextButton, .AccentButton .TextButton:hover, .AccentButton .TextButton:focus, .AccentButton .TextButton:active, .AccentButton .TextButton:visited, .RadGrid input.AccentButton, .RadGrid input.AccentButton:hover, .RadGrid input.AccentButton:focus, .RadGrid input.AccentButton:active, .RadGrid input.AccentButton:visited, .RadGrid.RadGrid input.TextButton.AccentButton, .RadGrid.RadGrid input.TextButton.AccentButton:hover, .RadGrid.RadGrid input.TextButton.AccentButton:focus, .RadGrid.RadGrid input.TextButton.AccentButton:active, .RadGrid.RadGrid input.TextButton.AccentButton:visited, .RadGrid.RadGrid a.TextButton.AccentButton, .RadGrid.RadGrid a.TextButton.AccentButton:hover, .RadGrid.RadGrid a.TextButton.AccentButton:focus, .RadGrid.RadGrid a.TextButton.AccentButton:active, .RadGrid.RadGrid a.TextButton.AccentButton:visited { text-decoration: none; } .AccentButton, .AccentButton:visited, .AccentButton .TextButton, .AccentButton .TextButton:visited, .RadGrid input.AccentButton, .RadGrid input.AccentButton:visited, .RadGrid.RadGrid input.TextButton.AccentButton, .RadGrid.RadGrid input.TextButton.AccentButton:visited, .RadGrid.RadGrid a.TextButton.AccentButton, .RadGrid.RadGrid a.TextButton.AccentButton:visited { color: var(--color-white); } .AccentButton:hover, .AccentButton:focus, .AccentButton:active, .AccentButton .TextButton:hover, .AccentButton .TextButton:focus, .AccentButton .TextButton:active, .RadGrid input.AccentButton:hover, .RadGrid input.AccentButton:focus, .RadGrid input.AccentButton:active, .RadGrid.RadGrid input.TextButton.AccentButton:hover, .RadGrid.RadGrid input.TextButton.AccentButton:focus, .RadGrid.RadGrid input.TextButton.AccentButton:active, .RadGrid.RadGrid a.TextButton.AccentButton:hover, .RadGrid.RadGrid a.TextButton.AccentButton:focus, .RadGrid.RadGrid a.TextButton.AccentButton:active { color: var(--color-white); text-decoration: none; background-color: var(--btn-secondary-bg); border-color: rgba(var(--shadow-rgb), 0); } .AccentButton:active, .AccentButton .TextButton:active, .RadGrid input.AccentButton:active, .RadGrid.RadGrid input.TextButton.AccentButton:active, .RadGrid.RadGrid a.TextButton.AccentButton:active { background-image: none; } .AccentButton:disabled, .AccentButton:disabled:hover, .AccentButton:disabled:focus, .AccentButton:disabled:active, .AccentButton.disabled, .AccentButton.disabled:hover, .AccentButton.disabled:focus, .AccentButton.disabled:active, .AccentButton.aspNetDisabled, .AccentButton.aspNetDisabled:hover, .AccentButton.aspNetDisabled:focus, .AccentButton.aspNetDisabled:active, .AccentButton .TextButton:disabled, .AccentButton .TextButton:disabled:hover, .AccentButton .TextButton:disabled:focus, .AccentButton .TextButton:disabled:active, .AccentButton .TextButton.disabled, .AccentButton .TextButton.disabled:hover, .AccentButton .TextButton.disabled:focus, .AccentButton .TextButton.disabled:active, .AccentButton .TextButton.aspNetDisabled, .AccentButton .TextButton.aspNetDisabled:hover, .AccentButton .TextButton.aspNetDisabled:focus, .AccentButton .TextButton.aspNetDisabled:active, .RadGrid input.AccentButton:disabled, .RadGrid input.AccentButton:disabled:hover, .RadGrid input.AccentButton:disabled:focus, .RadGrid input.AccentButton:disabled:active, .RadGrid input.AccentButton.disabled, .RadGrid input.AccentButton.disabled:hover, .RadGrid input.AccentButton.disabled:focus, .RadGrid input.AccentButton.disabled:active, .RadGrid input.AccentButton.aspNetDisabled, .RadGrid input.AccentButton.aspNetDisabled:hover, .RadGrid input.AccentButton.aspNetDisabled:focus, .RadGrid input.AccentButton.aspNetDisabled:active, .RadGrid.RadGrid input.TextButton.AccentButton:disabled, .RadGrid.RadGrid input.TextButton.AccentButton:disabled:hover, .RadGrid.RadGrid input.TextButton.AccentButton:disabled:focus, .RadGrid.RadGrid input.TextButton.AccentButton:disabled:active, .RadGrid.RadGrid input.TextButton.AccentButton.disabled, .RadGrid.RadGrid input.TextButton.AccentButton.disabled:hover, .RadGrid.RadGrid input.TextButton.AccentButton.disabled:focus, .RadGrid.RadGrid input.TextButton.AccentButton.disabled:active, .RadGrid.RadGrid input.TextButton.AccentButton.aspNetDisabled, .RadGrid.RadGrid input.TextButton.AccentButton.aspNetDisabled:hover, .RadGrid.RadGrid input.TextButton.AccentButton.aspNetDisabled:focus, .RadGrid.RadGrid input.TextButton.AccentButton.aspNetDisabled:active, .RadGrid.RadGrid a.TextButton.AccentButton:disabled, .RadGrid.RadGrid a.TextButton.AccentButton:disabled:hover, .RadGrid.RadGrid a.TextButton.AccentButton:disabled:focus, .RadGrid.RadGrid a.TextButton.AccentButton:disabled:active, .RadGrid.RadGrid a.TextButton.AccentButton.disabled, .RadGrid.RadGrid a.TextButton.AccentButton.disabled:hover, .RadGrid.RadGrid a.TextButton.AccentButton.disabled:focus, .RadGrid.RadGrid a.TextButton.AccentButton.disabled:active, .RadGrid.RadGrid a.TextButton.AccentButton.aspNetDisabled, .RadGrid.RadGrid a.TextButton.AccentButton.aspNetDisabled:hover, .RadGrid.RadGrid a.TextButton.AccentButton.aspNetDisabled:focus, .RadGrid.RadGrid a.TextButton.AccentButton.aspNetDisabled:active { color: var(--color-white); background-color: var(--btn-secondary-bg); border-color: transparent; } /* Facebook sign in button */ .TextButton.Facebook { background-color: var(--color-facebook); border-color: var(--color-brand-darker); } .TextButton.Facebook, .TextButton.Facebook:hover, .TextButton.Facebook:focus, .TextButton.Facebook:active, .TextButton.Facebook:visited { text-decoration: none; } .TextButton.Facebook, .TextButton.Facebook:visited { color: var(--color-white); } .TextButton.Facebook:hover, .TextButton.Facebook:focus, .TextButton.Facebook:active { color: var(--color-white); text-decoration: none; background-color: var(--btn-primary-hover-bg); border-color: var(--color-brand-darkest); } .TextButton.Facebook:active { background-image: none; } .TextButton.Facebook:disabled, .TextButton.Facebook:disabled:hover, .TextButton.Facebook:disabled:focus, .TextButton.Facebook:disabled:active, .TextButton.Facebook.disabled, .TextButton.Facebook.disabled:hover, .TextButton.Facebook.disabled:focus, .TextButton.Facebook.disabled:active, .TextButton.Facebook.aspNetDisabled, .TextButton.Facebook.aspNetDisabled:hover, .TextButton.Facebook.aspNetDisabled:focus, .TextButton.Facebook.aspNetDisabled:active { color: var(--color-white); background-color: var(--color-facebook); border-color: var(--color-brand-darker); } /* LinkedIn sign in button */ .SignInButton.LinkedIn { background-color: var(--color-linkedin); border-color: var(--color-teal-dark); } .SignInButton.LinkedIn, .SignInButton.LinkedIn:hover, .SignInButton.LinkedIn:focus, .SignInButton.LinkedIn:active, .SignInButton.LinkedIn:visited { text-decoration: none; } .SignInButton.LinkedIn, .SignInButton.LinkedIn:visited { color: var(--color-white); } .SignInButton.LinkedIn:hover, .SignInButton.LinkedIn:focus, .SignInButton.LinkedIn:active { color: var(--color-white); text-decoration: none; background-color: var(--color-teal-dark); border-color: var(--color-teal-darkest); } .SignInButton.LinkedIn:active { background-image: none; } .SignInButton.LinkedIn:disabled, .SignInButton.LinkedIn:disabled:hover, .SignInButton.LinkedIn:disabled:focus, .SignInButton.LinkedIn:disabled:active, .SignInButton.LinkedIn.disabled, .SignInButton.LinkedIn.disabled:hover, .SignInButton.LinkedIn.disabled:focus, .SignInButton.LinkedIn.disabled:active, .SignInButton.LinkedIn.aspNetDisabled, .SignInButton.LinkedIn.aspNetDisabled:hover, .SignInButton.LinkedIn.aspNetDisabled:focus, .SignInButton.LinkedIn.aspNetDisabled:active { color: var(--color-white); background-color: var(--color-linkedin); border-color: var(--color-teal-dark); } .SmallButton, .UseSmallButton .TextButton { font-size: 85%; padding: 8px 18px; border-radius: 4px; } .MediumButton, .UseMediumButton .TextButton { font-size: 120%; padding: 14px 24px; border-radius: 4px; } .LargeButton, .UseLargeButton .TextButton { font-size: 150%; padding: 17px 27px; border-radius: 4px; } .FullWidthButton, .UseFullWidthButton .TextButton { width: 100%; } /* Style buttons to look like links for deemphasis */ .LinkButton { -webkit-appearance: none !important; background: transparent !important; color: var(--color-brand); text-shadow: none; box-shadow: none; border: none; font-weight: normal; padding: 5px 10px; font-size: 1em; line-height: 1.6; border-radius: 4px; color: var(--color-brand) ; text-decoration: none; } .LinkButton:visited { color: var(--color-brand-visited) ; } .LinkButton:hover, .LinkButton:focus, .LinkButton:active { color: var(--color-brand-dark) ; text-decoration: underline ; } .LinkButton.aspNetDisabled, .LinkButton.aspNetDisabled:hover, .LinkButton.aspNetDisabled:focus, .LinkButton.aspNetDisabled:active, .LinkButton.aspNetDisabled:visited, .LinkButton:disabled, .LinkButton:disabled:hover, .LinkButton:disabled:focus, .LinkButton:disabled:active, .LinkButton:disabled:visited { color: var(--color-grey-mid) ; text-decoration: none ; } @media (min-width: 992px) { .StandardButtonMd { padding: 5px 10px; font-size: 1em; line-height: 1.6; border-radius: 4px; } } /* Generic red and green buttons to be used for all themes (styling is not theme dependant) */ .DangerButton { background-color: var(--color-accent-red); border-color: transparent; background-color: var(--color-accent-red); border-color: transparent; } .DangerButton, .DangerButton:hover, .DangerButton:focus, .DangerButton:active, .DangerButton:visited { text-decoration: none; } .DangerButton, .DangerButton:visited { color: var(--color-white); } .DangerButton:hover, .DangerButton:focus, .DangerButton:active { color: var(--color-white); text-decoration: none; background-color: var(--color-accent-red-dark); border-color: rgba(var(--shadow-rgb), 0); } .DangerButton:active { background-image: none; } .DangerButton:disabled, .DangerButton:disabled:hover, .DangerButton:disabled:focus, .DangerButton:disabled:active, .DangerButton.disabled, .DangerButton.disabled:hover, .DangerButton.disabled:focus, .DangerButton.disabled:active, .DangerButton.aspNetDisabled, .DangerButton.aspNetDisabled:hover, .DangerButton.aspNetDisabled:focus, .DangerButton.aspNetDisabled:active { color: var(--color-white); background-color: var(--color-accent-red); border-color: transparent; } .DangerButton, .DangerButton:hover, .DangerButton:focus, .DangerButton:active, .DangerButton:visited { text-decoration: none; } .DangerButton, .DangerButton:visited { color: var(--color-white); } .DangerButton:hover, .DangerButton:focus, .DangerButton:active { color: var(--color-white); text-decoration: none; background-color: var(--color-accent-red-dark); border-color: rgba(var(--shadow-rgb), 0); } .DangerButton:active { background-image: none; } .DangerButton:disabled, .DangerButton:disabled:hover, .DangerButton:disabled:focus, .DangerButton:disabled:active, .DangerButton.disabled, .DangerButton.disabled:hover, .DangerButton.disabled:focus, .DangerButton.disabled:active, .DangerButton.aspNetDisabled, .DangerButton.aspNetDisabled:hover, .DangerButton.aspNetDisabled:focus, .DangerButton.aspNetDisabled:active { color: var(--color-white); background-color: var(--color-accent-red); border-color: transparent; } .SuccessButton { background-color: var(--btn-secondary-hover-bg); border-color: transparent; } .SuccessButton, .SuccessButton:hover, .SuccessButton:focus, .SuccessButton:active, .SuccessButton:visited { text-decoration: none; } .SuccessButton, .SuccessButton:visited { color: var(--color-text); } .SuccessButton:hover, .SuccessButton:focus, .SuccessButton:active { color: var(--color-text); text-decoration: none; background-color: var(--btn-secondary-hover-bg); border-color: rgba(var(--shadow-rgb), 0); } .SuccessButton:active { background-image: none; } .SuccessButton:disabled, .SuccessButton:disabled:hover, .SuccessButton:disabled:focus, .SuccessButton:disabled:active, .SuccessButton.disabled, .SuccessButton.disabled:hover, .SuccessButton.disabled:focus, .SuccessButton.disabled:active, .SuccessButton.aspNetDisabled, .SuccessButton.aspNetDisabled:hover, .SuccessButton.aspNetDisabled:focus, .SuccessButton.aspNetDisabled:active { color: var(--color-text); background-color: var(--btn-secondary-hover-bg); border-color: transparent; } /**account page button group**/ .button-group .LargeButton { width: 100%; height: 100%; font-size: 1.06em !important; line-height: 1.2; min-height: 70px; display: flex; justify-content: center; align-items: center; } a.btn.sysicon--before:not(.aspNetDisabled):hover:before, a.btn.sysicon--after:not(.aspNetDisabled):hover:after, a.btn.sysicon--before:not(.aspNetDisabled):focus:before, a.btn.sysicon--after:not(.aspNetDisabled):focus:after, a.btn.sysicon--before:before, a.btn.sysicon--after:after, a.TextButton.sysicon--before:not(.aspNetDisabled):hover:before, a.TextButton.sysicon--after:not(.aspNetDisabled):hover:after, a.TextButton.sysicon--before:not(.aspNetDisabled):focus:before, a.TextButton.sysicon--after:not(.aspNetDisabled):focus:after, a.TextButton.sysicon--before:before, a.TextButton.sysicon--after:after, a.PrimaryButton.sysicon--before:not(.aspNetDisabled):hover:before, a.PrimaryButton.sysicon--after:not(.aspNetDisabled):hover:after, a.PrimaryButton.sysicon--before:not(.aspNetDisabled):focus:before, a.PrimaryButton.sysicon--after:not(.aspNetDisabled):focus:after, a.PrimaryButton.sysicon--before:before, a.PrimaryButton.sysicon--after:after, button.sysicon--before:not(.aspNetDisabled):hover:before, button.sysicon--after:not(.aspNetDisabled):hover:after, button.sysicon--before:not(.aspNetDisabled):focus:before, button.sysicon--after:not(.aspNetDisabled):focus:after, button.sysicon--before:before, button.sysicon--after:after { background-color: var(--color-text); } /* ========================================================================== CONTENT ITEMS (invoices, group list editor, comm prefs, mini profile) Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ /* Open Invoices ========================================================================== */ .OpenInvoicesTotals .SelectedTotal .PanelFieldValue { color: var(--color-accent-green-bright); } /* Group List Editor ========================================================================== */ .RadTreeView.GLE .rtLI { margin-bottom: .3em; } .RadTreeView.GLE .rtIn, .RadTreeView.GLE .rtHover .rtIn, .RadTreeView.GLE .rtSelected .rtIn { background-color: transparent; border: none; color: var(--color-brand); } .RadTreeView.GLE a:hover, .RadTreeView.GLE a:focus, .RadTreeView.GLE span[onclick]:hover, .RadTreeView.GLE span[onclick]:focus { background-color: var(--color-brand); color: var(--color-white); } .RadTreeView.GLE .rtImg { border-radius: 4px; } /* Communiaction Preferences ========================================================================== */ .CommunicationPreferencesSection { background-color: var(--color-white); } /* Inline edit save and publish buttons ========================================================================= */ .SimpleContentEditorInline .reToolBar:last-child .reTool { background-color: var(--color-grey); color: var(--color-text); font-family: var(--font-primary); font-weight: 600; transition: background 0.2s ease-out; } @media screen and (prefers-reduced-motion: reduce) { .SimpleContentEditorInline .reToolBar:last-child .reTool { transition: none; } } .SimpleContentEditorInline .reToolBar:last-child .reTool:hover, .SimpleContentEditorInline .reToolBar:last-child .reTool:focus, .SimpleContentEditorInline .reToolBar:last-child .reTool:active { background-color: var(--color-grey-300); } .SimpleContentEditorInline .reToolBar:last-child .reTool:before { background: var(--color-text); } .SimpleContentEditorInline .reToolBar:last-child .reDone { background-color: var(--color-brand); color: var(--color-white); } .SimpleContentEditorInline .reToolBar:last-child .reDone:hover, .SimpleContentEditorInline .reToolBar:last-child .reDone:focus, .SimpleContentEditorInline .reToolBar:last-child .reDone:active { background-color: var(--color-brand-darker); } .SimpleContentEditorInline .reToolBar:last-child .reDone:before { background-color: var(--color-white); } /* Mini Profile ========================================================================== */ .mini-profile-banner-large .mini-profile-name-section .SectionLabel, .mini-profile-banner-small .mini-profile-name-section .SectionLabel { /* Style the name like an h2 */ font-family: var(--font-primary); font-weight: 500; font-size: 135%; } .mini-profile-banner-large .mini-profile-picture-section, .mini-profile-banner-large .panel-heading, .mini-profile-banner-small .mini-profile-picture-section, .mini-profile-banner-small .panel-heading { background-color: var(--color-white); color: var(--color-ink); } .mini-profile-banner-large .profile-picture-container, .mini-profile-banner-small .profile-picture-container { display: inline-block; background-color: var(--color-white); box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); padding: 8px; border-radius: 5px; } .mini-profile-banner-large .profile-picture-container img, .mini-profile-banner-small .profile-picture-container img { border-radius: 3px; } .mini-profile-banner-large .mini-profile-status-section, .mini-profile-banner-small .mini-profile-status-section { font-size: .9em; } @media (min-width: 768px) { .mini-profile-banner-large .mini-profile-name-section, .mini-profile-banner-large .mini-profile-address-section { background-color: var(--color-white); } } .account-banner:before { background-color: var(--color-white); border-radius: 4px; } @media (min-width: 768px) { .account-banner .mini-profile-banner-large .mini-profile { grid-template: "picture name" 1fr "picture address" auto "picture status" auto/fit-content(33%) auto; } } .account-banner .mini-profile-name-section, .account-banner .mini-profile-address-section, .account-banner .mini-profile-picture-section, .account-banner .mini-profile-status-section, .account-banner .mini-profile-banner-large .panel-heading, .account-banner .mini-profile-banner-small .panel-heading { background-color: transparent; } .account-banner .mini-profile-banner-large .mini-profile-picture-section .profile-picture-container, .account-banner .mini-profile-banner-small .mini-profile-picture-section .profile-picture-container { margin-bottom: 0; } .account-banner .mini-profile-banner-large .mini-profile-picture-section-after, .account-banner .mini-profile-banner-small .mini-profile-picture-section-after { height: 0; } .account-banner .summary-display { font-size: .9em; } .account-banner .AlertSet { background-color: transparent; } .account-banner .AlertSet .AlertItem { margin-bottom: 0.5rem; border-radius: 4px; padding-top: 0.75rem; padding-bottom: 0.75rem; } .account-banner .AlertSet .AlertItem:last-item { margin-bottom: 0; } .account-banner .AlertSet .AlertItem .media > img { width: 20px; } .account-banner .scrollbar-minimal ::-webkit-scrollbar-track { background-color: transparent; } .account-banner .scrollbar-minimal ::-webkit-scrollbar-thumb { background-color: rgba(var(--shadow-rgb), 0.4); } .account-banner .scrollbar-minimal ::-webkit-scrollbar-thumb:hover { background: rgba(var(--shadow-rgb), 0.6); } .account-banner-short .banner-content:after { background-image: var(--img-decorative); } .account-banner-bg-color-1 .account-banner:before { background-color: var(--color-white); } .account-banner-bg-color-1 .account-banner-short .banner-top-bar { background-color: var(--color-white); } .account-banner-bg-color-2 .account-banner:before { background-color: var(--color-white); } .account-banner-bg-color-2 .account-banner-short .banner-top-bar { background-color: var(--color-white); } .account-banner-bg-color-3 .account-banner:before { background-color: var(--color-accent-orange); } .account-banner-bg-color-3 .account-banner-short .banner-top-bar { background-color: var(--color-accent-orange); } .account-banner-bg-color-4 .account-banner:before { background-color: var(--color-accent-orange-dark); } .account-banner-bg-color-4 .account-banner-short .banner-top-bar { background-color: var(--color-accent-orange-dark); } .account-banner-bg-color-5 .account-banner:before { background-color: var(--color-accent-purple); } .account-banner-bg-color-5 .account-banner-short .banner-top-bar { background-color: var(--color-accent-purple); } .account-banner-bg-color-red .account-banner:before { background-color: var(--color-accent-red); } .account-banner-bg-color-red .account-banner-short .banner-top-bar { background-color: var(--color-accent-red); } .account-banner-bg-color-orange .account-banner:before { background-color: var(--color-accent-orange-dark); } .account-banner-bg-color-orange .account-banner-short .banner-top-bar { background-color: var(--color-accent-orange-dark); } .account-banner-bg-color-yellow .account-banner:before { background-color: var(--color-yellow); } .account-banner-bg-color-yellow .account-banner-short .banner-top-bar { background-color: var(--color-yellow); } .account-banner-bg-color-green .account-banner:before { background-color: var(--color-accent-green-bright); } .account-banner-bg-color-green .account-banner-short .banner-top-bar { background-color: var(--color-accent-green-bright); } .account-banner-bg-color-blue .account-banner:before { background-color: var(--color-twitter); } .account-banner-bg-color-blue .account-banner-short .banner-top-bar { background-color: var(--color-twitter); } .account-banner-bg-color-purple .account-banner:before { background-color: var(--color-accent-purple); } .account-banner-bg-color-purple .account-banner-short .banner-top-bar { background-color: var(--color-accent-purple); } .account-banner-bg-color-mps-1 .account-banner:before { background-color: var(--color-brand); } .account-banner-bg-color-mps-1 .account-banner-short .banner-top-bar { background-color: var(--color-brand); } .account-banner-bg-color-mps-2 .account-banner:before { background-color: var(--color-dark); } .account-banner-bg-color-mps-2 .account-banner-short .banner-top-bar { background-color: var(--color-dark); } .account-banner .area-top-left, .account-banner-short .area-top-left { --system-icon-color: var(--color-grey-800); --system-icon-color-hover: var(--color-grey-900); } .account-banner .area-top-left a, .account-banner .area-middle-left a, .account-banner .area-bottom-left a, .account-banner .area-center a, .account-banner-short .area-top-left a, .account-banner-short .area-middle-left a, .account-banner-short .area-bottom-left a, .account-banner-short .area-center a { text-decoration: underline; } .account-banner .area-top-left, .account-banner .area-top-left h1, .account-banner .area-top-left h2, .account-banner .area-top-left h3, .account-banner .area-top-left h4, .account-banner .area-top-left h5, .account-banner .area-top-left label, .account-banner .area-top-left .Label, .account-banner .area-top-left .SectionLabel, .account-banner .area-middle-left, .account-banner .area-middle-left h1, .account-banner .area-middle-left h2, .account-banner .area-middle-left h3, .account-banner .area-middle-left h4, .account-banner .area-middle-left h5, .account-banner .area-middle-left label, .account-banner .area-middle-left .Label, .account-banner .area-middle-left .SectionLabel, .account-banner .area-bottom-left, .account-banner .area-bottom-left h1, .account-banner .area-bottom-left h2, .account-banner .area-bottom-left h3, .account-banner .area-bottom-left h4, .account-banner .area-bottom-left h5, .account-banner .area-bottom-left label, .account-banner .area-bottom-left .Label, .account-banner .area-bottom-left .SectionLabel, .account-banner .area-center, .account-banner .area-center h1, .account-banner .area-center h2, .account-banner .area-center h3, .account-banner .area-center h4, .account-banner .area-center h5, .account-banner .area-center label, .account-banner .area-center .Label, .account-banner .area-center .SectionLabel, .account-banner-short .area-top-left, .account-banner-short .area-top-left h1, .account-banner-short .area-top-left h2, .account-banner-short .area-top-left h3, .account-banner-short .area-top-left h4, .account-banner-short .area-top-left h5, .account-banner-short .area-top-left label, .account-banner-short .area-top-left .Label, .account-banner-short .area-top-left .SectionLabel, .account-banner-short .area-middle-left, .account-banner-short .area-middle-left h1, .account-banner-short .area-middle-left h2, .account-banner-short .area-middle-left h3, .account-banner-short .area-middle-left h4, .account-banner-short .area-middle-left h5, .account-banner-short .area-middle-left label, .account-banner-short .area-middle-left .Label, .account-banner-short .area-middle-left .SectionLabel, .account-banner-short .area-bottom-left, .account-banner-short .area-bottom-left h1, .account-banner-short .area-bottom-left h2, .account-banner-short .area-bottom-left h3, .account-banner-short .area-bottom-left h4, .account-banner-short .area-bottom-left h5, .account-banner-short .area-bottom-left label, .account-banner-short .area-bottom-left .Label, .account-banner-short .area-bottom-left .SectionLabel, .account-banner-short .area-center, .account-banner-short .area-center h1, .account-banner-short .area-center h2, .account-banner-short .area-center h3, .account-banner-short .area-center h4, .account-banner-short .area-center h5, .account-banner-short .area-center label, .account-banner-short .area-center .Label, .account-banner-short .area-center .SectionLabel { color: var(--color-text); } .account-banner .area-top-left a.ButtonItem, .account-banner .area-middle-left a.ButtonItem, .account-banner .area-bottom-left a.ButtonItem, .account-banner .area-center a.ButtonItem, .account-banner-short .area-top-left a.ButtonItem, .account-banner-short .area-middle-left a.ButtonItem, .account-banner-short .area-bottom-left a.ButtonItem, .account-banner-short .area-center a.ButtonItem { text-decoration: none; } .account-banner .area-top-left a:not(.ButtonItem), .account-banner .area-middle-left a:not(.ButtonItem), .account-banner .area-bottom-left a:not(.ButtonItem), .account-banner .area-center a:not(.ButtonItem), .account-banner-short .area-top-left a:not(.ButtonItem), .account-banner-short .area-middle-left a:not(.ButtonItem), .account-banner-short .area-bottom-left a:not(.ButtonItem), .account-banner-short .area-center a:not(.ButtonItem) { color: var(--color-text); } .account-banner-bg-color-5 .account-banner .area-top-left, .account-banner-bg-color-5 .account-banner-short .area-top-left, .account-banner-bg-color-red .account-banner .area-top-left, .account-banner-bg-color-red .account-banner-short .area-top-left, .account-banner-bg-color-purple .account-banner .area-top-left, .account-banner-bg-color-purple .account-banner-short .area-top-left, .account-banner-bg-color-mps-1 .account-banner .area-top-left, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left, .account-banner-bg-color-mps-2 .account-banner .area-top-left, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left { --system-icon-color: var(--color-grey-300); --system-icon-color-hover: var(--color-white); } .account-banner-bg-color-5 .account-banner .area-top-left, .account-banner-bg-color-5 .account-banner .area-top-left h1, .account-banner-bg-color-5 .account-banner .area-top-left h2, .account-banner-bg-color-5 .account-banner .area-top-left h3, .account-banner-bg-color-5 .account-banner .area-top-left h4, .account-banner-bg-color-5 .account-banner .area-top-left h5, .account-banner-bg-color-5 .account-banner .area-top-left label, .account-banner-bg-color-5 .account-banner .area-top-left .Label, .account-banner-bg-color-5 .account-banner .area-top-left .SectionLabel, .account-banner-bg-color-5 .account-banner .area-top-bar-left, .account-banner-bg-color-5 .account-banner .area-top-bar-left h1, .account-banner-bg-color-5 .account-banner .area-top-bar-left h2, .account-banner-bg-color-5 .account-banner .area-top-bar-left h3, .account-banner-bg-color-5 .account-banner .area-top-bar-left h4, .account-banner-bg-color-5 .account-banner .area-top-bar-left h5, .account-banner-bg-color-5 .account-banner .area-top-bar-left label, .account-banner-bg-color-5 .account-banner .area-top-bar-left .Label, .account-banner-bg-color-5 .account-banner .area-top-bar-left .SectionLabel, .account-banner-bg-color-5 .account-banner .area-top-bar-right, .account-banner-bg-color-5 .account-banner .area-top-bar-right h1, .account-banner-bg-color-5 .account-banner .area-top-bar-right h2, .account-banner-bg-color-5 .account-banner .area-top-bar-right h3, .account-banner-bg-color-5 .account-banner .area-top-bar-right h4, .account-banner-bg-color-5 .account-banner .area-top-bar-right h5, .account-banner-bg-color-5 .account-banner .area-top-bar-right label, .account-banner-bg-color-5 .account-banner .area-top-bar-right .Label, .account-banner-bg-color-5 .account-banner .area-top-bar-right .SectionLabel, .account-banner-bg-color-5 .account-banner-short .area-top-left, .account-banner-bg-color-5 .account-banner-short .area-top-left h1, .account-banner-bg-color-5 .account-banner-short .area-top-left h2, .account-banner-bg-color-5 .account-banner-short .area-top-left h3, .account-banner-bg-color-5 .account-banner-short .area-top-left h4, .account-banner-bg-color-5 .account-banner-short .area-top-left h5, .account-banner-bg-color-5 .account-banner-short .area-top-left label, .account-banner-bg-color-5 .account-banner-short .area-top-left .Label, .account-banner-bg-color-5 .account-banner-short .area-top-left .SectionLabel, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left h1, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left h2, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left h3, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left h4, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left h5, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left label, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .Label, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .SectionLabel, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right h1, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right h2, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right h3, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right h4, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right h5, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right label, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .Label, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .SectionLabel, .account-banner-bg-color-red .account-banner .area-top-left, .account-banner-bg-color-red .account-banner .area-top-left h1, .account-banner-bg-color-red .account-banner .area-top-left h2, .account-banner-bg-color-red .account-banner .area-top-left h3, .account-banner-bg-color-red .account-banner .area-top-left h4, .account-banner-bg-color-red .account-banner .area-top-left h5, .account-banner-bg-color-red .account-banner .area-top-left label, .account-banner-bg-color-red .account-banner .area-top-left .Label, .account-banner-bg-color-red .account-banner .area-top-left .SectionLabel, .account-banner-bg-color-red .account-banner .area-top-bar-left, .account-banner-bg-color-red .account-banner .area-top-bar-left h1, .account-banner-bg-color-red .account-banner .area-top-bar-left h2, .account-banner-bg-color-red .account-banner .area-top-bar-left h3, .account-banner-bg-color-red .account-banner .area-top-bar-left h4, .account-banner-bg-color-red .account-banner .area-top-bar-left h5, .account-banner-bg-color-red .account-banner .area-top-bar-left label, .account-banner-bg-color-red .account-banner .area-top-bar-left .Label, .account-banner-bg-color-red .account-banner .area-top-bar-left .SectionLabel, .account-banner-bg-color-red .account-banner .area-top-bar-right, .account-banner-bg-color-red .account-banner .area-top-bar-right h1, .account-banner-bg-color-red .account-banner .area-top-bar-right h2, .account-banner-bg-color-red .account-banner .area-top-bar-right h3, .account-banner-bg-color-red .account-banner .area-top-bar-right h4, .account-banner-bg-color-red .account-banner .area-top-bar-right h5, .account-banner-bg-color-red .account-banner .area-top-bar-right label, .account-banner-bg-color-red .account-banner .area-top-bar-right .Label, .account-banner-bg-color-red .account-banner .area-top-bar-right .SectionLabel, .account-banner-bg-color-red .account-banner-short .area-top-left, .account-banner-bg-color-red .account-banner-short .area-top-left h1, .account-banner-bg-color-red .account-banner-short .area-top-left h2, .account-banner-bg-color-red .account-banner-short .area-top-left h3, .account-banner-bg-color-red .account-banner-short .area-top-left h4, .account-banner-bg-color-red .account-banner-short .area-top-left h5, .account-banner-bg-color-red .account-banner-short .area-top-left label, .account-banner-bg-color-red .account-banner-short .area-top-left .Label, .account-banner-bg-color-red .account-banner-short .area-top-left .SectionLabel, .account-banner-bg-color-red .account-banner-short .area-top-bar-left, .account-banner-bg-color-red .account-banner-short .area-top-bar-left h1, .account-banner-bg-color-red .account-banner-short .area-top-bar-left h2, .account-banner-bg-color-red .account-banner-short .area-top-bar-left h3, .account-banner-bg-color-red .account-banner-short .area-top-bar-left h4, .account-banner-bg-color-red .account-banner-short .area-top-bar-left h5, .account-banner-bg-color-red .account-banner-short .area-top-bar-left label, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .Label, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .SectionLabel, .account-banner-bg-color-red .account-banner-short .area-top-bar-right, .account-banner-bg-color-red .account-banner-short .area-top-bar-right h1, .account-banner-bg-color-red .account-banner-short .area-top-bar-right h2, .account-banner-bg-color-red .account-banner-short .area-top-bar-right h3, .account-banner-bg-color-red .account-banner-short .area-top-bar-right h4, .account-banner-bg-color-red .account-banner-short .area-top-bar-right h5, .account-banner-bg-color-red .account-banner-short .area-top-bar-right label, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .Label, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .SectionLabel, .account-banner-bg-color-purple .account-banner .area-top-left, .account-banner-bg-color-purple .account-banner .area-top-left h1, .account-banner-bg-color-purple .account-banner .area-top-left h2, .account-banner-bg-color-purple .account-banner .area-top-left h3, .account-banner-bg-color-purple .account-banner .area-top-left h4, .account-banner-bg-color-purple .account-banner .area-top-left h5, .account-banner-bg-color-purple .account-banner .area-top-left label, .account-banner-bg-color-purple .account-banner .area-top-left .Label, .account-banner-bg-color-purple .account-banner .area-top-left .SectionLabel, .account-banner-bg-color-purple .account-banner .area-top-bar-left, .account-banner-bg-color-purple .account-banner .area-top-bar-left h1, .account-banner-bg-color-purple .account-banner .area-top-bar-left h2, .account-banner-bg-color-purple .account-banner .area-top-bar-left h3, .account-banner-bg-color-purple .account-banner .area-top-bar-left h4, .account-banner-bg-color-purple .account-banner .area-top-bar-left h5, .account-banner-bg-color-purple .account-banner .area-top-bar-left label, .account-banner-bg-color-purple .account-banner .area-top-bar-left .Label, .account-banner-bg-color-purple .account-banner .area-top-bar-left .SectionLabel, .account-banner-bg-color-purple .account-banner .area-top-bar-right, .account-banner-bg-color-purple .account-banner .area-top-bar-right h1, .account-banner-bg-color-purple .account-banner .area-top-bar-right h2, .account-banner-bg-color-purple .account-banner .area-top-bar-right h3, .account-banner-bg-color-purple .account-banner .area-top-bar-right h4, .account-banner-bg-color-purple .account-banner .area-top-bar-right h5, .account-banner-bg-color-purple .account-banner .area-top-bar-right label, .account-banner-bg-color-purple .account-banner .area-top-bar-right .Label, .account-banner-bg-color-purple .account-banner .area-top-bar-right .SectionLabel, .account-banner-bg-color-purple .account-banner-short .area-top-left, .account-banner-bg-color-purple .account-banner-short .area-top-left h1, .account-banner-bg-color-purple .account-banner-short .area-top-left h2, .account-banner-bg-color-purple .account-banner-short .area-top-left h3, .account-banner-bg-color-purple .account-banner-short .area-top-left h4, .account-banner-bg-color-purple .account-banner-short .area-top-left h5, .account-banner-bg-color-purple .account-banner-short .area-top-left label, .account-banner-bg-color-purple .account-banner-short .area-top-left .Label, .account-banner-bg-color-purple .account-banner-short .area-top-left .SectionLabel, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left h1, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left h2, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left h3, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left h4, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left h5, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left label, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .Label, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .SectionLabel, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right h1, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right h2, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right h3, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right h4, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right h5, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right label, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .Label, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .SectionLabel, .account-banner-bg-color-mps-1 .account-banner .area-top-left, .account-banner-bg-color-mps-1 .account-banner .area-top-left h1, .account-banner-bg-color-mps-1 .account-banner .area-top-left h2, .account-banner-bg-color-mps-1 .account-banner .area-top-left h3, .account-banner-bg-color-mps-1 .account-banner .area-top-left h4, .account-banner-bg-color-mps-1 .account-banner .area-top-left h5, .account-banner-bg-color-mps-1 .account-banner .area-top-left label, .account-banner-bg-color-mps-1 .account-banner .area-top-left .Label, .account-banner-bg-color-mps-1 .account-banner .area-top-left .SectionLabel, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left h1, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left h2, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left h3, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left h4, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left h5, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left label, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .Label, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .SectionLabel, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right h1, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right h2, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right h3, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right h4, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right h5, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right label, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .Label, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .SectionLabel, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left h1, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left h2, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left h3, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left h4, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left h5, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left label, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .Label, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .SectionLabel, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left h1, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left h2, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left h3, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left h4, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left h5, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left label, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .Label, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .SectionLabel, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right h1, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right h2, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right h3, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right h4, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right h5, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right label, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .Label, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .SectionLabel, .account-banner-bg-color-mps-2 .account-banner .area-top-left, .account-banner-bg-color-mps-2 .account-banner .area-top-left h1, .account-banner-bg-color-mps-2 .account-banner .area-top-left h2, .account-banner-bg-color-mps-2 .account-banner .area-top-left h3, .account-banner-bg-color-mps-2 .account-banner .area-top-left h4, .account-banner-bg-color-mps-2 .account-banner .area-top-left h5, .account-banner-bg-color-mps-2 .account-banner .area-top-left label, .account-banner-bg-color-mps-2 .account-banner .area-top-left .Label, .account-banner-bg-color-mps-2 .account-banner .area-top-left .SectionLabel, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left h1, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left h2, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left h3, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left h4, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left h5, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left label, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .Label, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .SectionLabel, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right h1, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right h2, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right h3, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right h4, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right h5, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right label, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .Label, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .SectionLabel, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left h1, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left h2, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left h3, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left h4, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left h5, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left label, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .Label, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .SectionLabel, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left h1, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left h2, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left h3, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left h4, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left h5, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left label, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .Label, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .SectionLabel, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right h1, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right h2, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right h3, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right h4, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right h5, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right label, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .Label, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .SectionLabel { color: var(--color-white); } .account-banner-bg-color-5 .account-banner .area-top-left a.ButtonItem, .account-banner-bg-color-5 .account-banner .area-top-bar-left a.ButtonItem, .account-banner-bg-color-5 .account-banner .area-top-bar-right a.ButtonItem, .account-banner-bg-color-5 .account-banner-short .area-top-left a.ButtonItem, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left a.ButtonItem, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right a.ButtonItem, .account-banner-bg-color-red .account-banner .area-top-left a.ButtonItem, .account-banner-bg-color-red .account-banner .area-top-bar-left a.ButtonItem, .account-banner-bg-color-red .account-banner .area-top-bar-right a.ButtonItem, .account-banner-bg-color-red .account-banner-short .area-top-left a.ButtonItem, .account-banner-bg-color-red .account-banner-short .area-top-bar-left a.ButtonItem, .account-banner-bg-color-red .account-banner-short .area-top-bar-right a.ButtonItem, .account-banner-bg-color-purple .account-banner .area-top-left a.ButtonItem, .account-banner-bg-color-purple .account-banner .area-top-bar-left a.ButtonItem, .account-banner-bg-color-purple .account-banner .area-top-bar-right a.ButtonItem, .account-banner-bg-color-purple .account-banner-short .area-top-left a.ButtonItem, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left a.ButtonItem, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right a.ButtonItem, .account-banner-bg-color-mps-1 .account-banner .area-top-left a.ButtonItem, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left a.ButtonItem, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right a.ButtonItem, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left a.ButtonItem, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left a.ButtonItem, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right a.ButtonItem, .account-banner-bg-color-mps-2 .account-banner .area-top-left a.ButtonItem, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left a.ButtonItem, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right a.ButtonItem, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left a.ButtonItem, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left a.ButtonItem, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right a.ButtonItem { text-decoration: none; } .account-banner-bg-color-5 .account-banner .area-top-left a:not(.ButtonItem), .account-banner-bg-color-5 .account-banner .area-top-bar-left a:not(.ButtonItem), .account-banner-bg-color-5 .account-banner .area-top-bar-right a:not(.ButtonItem), .account-banner-bg-color-5 .account-banner-short .area-top-left a:not(.ButtonItem), .account-banner-bg-color-5 .account-banner-short .area-top-bar-left a:not(.ButtonItem), .account-banner-bg-color-5 .account-banner-short .area-top-bar-right a:not(.ButtonItem), .account-banner-bg-color-red .account-banner .area-top-left a:not(.ButtonItem), .account-banner-bg-color-red .account-banner .area-top-bar-left a:not(.ButtonItem), .account-banner-bg-color-red .account-banner .area-top-bar-right a:not(.ButtonItem), .account-banner-bg-color-red .account-banner-short .area-top-left a:not(.ButtonItem), .account-banner-bg-color-red .account-banner-short .area-top-bar-left a:not(.ButtonItem), .account-banner-bg-color-red .account-banner-short .area-top-bar-right a:not(.ButtonItem), .account-banner-bg-color-purple .account-banner .area-top-left a:not(.ButtonItem), .account-banner-bg-color-purple .account-banner .area-top-bar-left a:not(.ButtonItem), .account-banner-bg-color-purple .account-banner .area-top-bar-right a:not(.ButtonItem), .account-banner-bg-color-purple .account-banner-short .area-top-left a:not(.ButtonItem), .account-banner-bg-color-purple .account-banner-short .area-top-bar-left a:not(.ButtonItem), .account-banner-bg-color-purple .account-banner-short .area-top-bar-right a:not(.ButtonItem), .account-banner-bg-color-mps-1 .account-banner .area-top-left a:not(.ButtonItem), .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left a:not(.ButtonItem), .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right a:not(.ButtonItem), .account-banner-bg-color-mps-1 .account-banner-short .area-top-left a:not(.ButtonItem), .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left a:not(.ButtonItem), .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right a:not(.ButtonItem), .account-banner-bg-color-mps-2 .account-banner .area-top-left a:not(.ButtonItem), .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left a:not(.ButtonItem), .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right a:not(.ButtonItem), .account-banner-bg-color-mps-2 .account-banner-short .area-top-left a:not(.ButtonItem), .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left a:not(.ButtonItem), .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right a:not(.ButtonItem) { color: var(--color-white); } .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton) { border-color: var(--color-white); background-color: transparent; border-width: 1px; } .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):visited { text-decoration: none; } .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):visited, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):visited { color: var(--color-white); } .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):hover { color: var(--color-text); background-color: var(--color-white); border-color: var(--color-white); } .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus { box-shadow: 0 0 0 0.25rem rgba(var(--overlay-light-rgb), 0.5); } .btn-check:checked + .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show, .btn-check:checked + .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .btn-check:active + .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton), .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show { color: var(--color-text); background-color: var(--color-white); border-color: var(--color-white); } .btn-check:checked + .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus, .btn-check:checked + .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .btn-check:active + .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):active:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).active:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).dropdown-toggle.show:focus { box-shadow: inset 0 3px 5px rgba(var(--shadow-rgb), 0.125), 0 0 0 0.25rem rgba(var(--overlay-light-rgb), 0.5); } .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-red .account-banner .area-top-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton:not(.PrimaryButton).aspNetDisabled, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton):disabled, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).disabled, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton:not(.PrimaryButton).aspNetDisabled { color: var(--color-white); background-color: transparent; } .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton { background-color: var(--color-white); border-color: var(--color-white); border-width: 1px; } .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton:visited, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:visited, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton:visited, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:visited, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton:visited, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:visited { text-decoration: none; } .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton:visited, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:visited, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton:visited, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:visited, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton:visited, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:visited, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:visited { color: var(--color-text); } .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:active { color: var(--color-text); text-decoration: none; background-color: var(--color-grey-100); border-color: var(--color-grey-200); } .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:active { background-image: none; } .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-5 .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-5 .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-5 .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-5 .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-5 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-red .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-red .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-red .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-red .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-red .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-purple .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-purple .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-purple .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-purple .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-purple .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-mps-1 .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-mps-1 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-mps-2 .account-banner .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-left .TextButton.PrimaryButton.aspNetDisabled:active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled:hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton:disabled:active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled:hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.disabled:active, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:hover, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:focus, .account-banner-bg-color-mps-2 .account-banner-short .area-top-bar-right .TextButton.PrimaryButton.aspNetDisabled:active { color: var(--color-text); background-color: var(--color-white); border-color: var(--color-white); } .account-banner-bg-color-5 .account-banner .sysicon:focus, .account-banner-bg-color-5 .account-banner button.sysicon:focus, .account-banner-bg-color-5 .account-banner-short .sysicon:focus, .account-banner-bg-color-5 .account-banner-short button.sysicon:focus, .account-banner-bg-color-red .account-banner .sysicon:focus, .account-banner-bg-color-red .account-banner button.sysicon:focus, .account-banner-bg-color-red .account-banner-short .sysicon:focus, .account-banner-bg-color-red .account-banner-short button.sysicon:focus, .account-banner-bg-color-purple .account-banner .sysicon:focus, .account-banner-bg-color-purple .account-banner button.sysicon:focus, .account-banner-bg-color-purple .account-banner-short .sysicon:focus, .account-banner-bg-color-purple .account-banner-short button.sysicon:focus, .account-banner-bg-color-mps-1 .account-banner .sysicon:focus, .account-banner-bg-color-mps-1 .account-banner button.sysicon:focus, .account-banner-bg-color-mps-1 .account-banner-short .sysicon:focus, .account-banner-bg-color-mps-1 .account-banner-short button.sysicon:focus, .account-banner-bg-color-mps-2 .account-banner .sysicon:focus, .account-banner-bg-color-mps-2 .account-banner button.sysicon:focus, .account-banner-bg-color-mps-2 .account-banner-short .sysicon:focus, .account-banner-bg-color-mps-2 .account-banner-short button.sysicon:focus { border-color: var(--color-white) !important; } @media (min-width: 768px) { .account-banner-bg-color-5 .account-banner .area-middle-left, .account-banner-bg-color-5 .account-banner .area-middle-left h1, .account-banner-bg-color-5 .account-banner .area-middle-left h2, .account-banner-bg-color-5 .account-banner .area-middle-left h3, .account-banner-bg-color-5 .account-banner .area-middle-left h4, .account-banner-bg-color-5 .account-banner .area-middle-left h5, .account-banner-bg-color-5 .account-banner .area-middle-left label, .account-banner-bg-color-5 .account-banner .area-middle-left .Label, .account-banner-bg-color-5 .account-banner .area-middle-left .SectionLabel, .account-banner-bg-color-5 .account-banner .area-bottom-left, .account-banner-bg-color-5 .account-banner .area-bottom-left h1, .account-banner-bg-color-5 .account-banner .area-bottom-left h2, .account-banner-bg-color-5 .account-banner .area-bottom-left h3, .account-banner-bg-color-5 .account-banner .area-bottom-left h4, .account-banner-bg-color-5 .account-banner .area-bottom-left h5, .account-banner-bg-color-5 .account-banner .area-bottom-left label, .account-banner-bg-color-5 .account-banner .area-bottom-left .Label, .account-banner-bg-color-5 .account-banner .area-bottom-left .SectionLabel, .account-banner-bg-color-5 .account-banner-short .area-middle-left, .account-banner-bg-color-5 .account-banner-short .area-middle-left h1, .account-banner-bg-color-5 .account-banner-short .area-middle-left h2, .account-banner-bg-color-5 .account-banner-short .area-middle-left h3, .account-banner-bg-color-5 .account-banner-short .area-middle-left h4, .account-banner-bg-color-5 .account-banner-short .area-middle-left h5, .account-banner-bg-color-5 .account-banner-short .area-middle-left label, .account-banner-bg-color-5 .account-banner-short .area-middle-left .Label, .account-banner-bg-color-5 .account-banner-short .area-middle-left .SectionLabel, .account-banner-bg-color-5 .account-banner-short .area-bottom-left, .account-banner-bg-color-5 .account-banner-short .area-bottom-left h1, .account-banner-bg-color-5 .account-banner-short .area-bottom-left h2, .account-banner-bg-color-5 .account-banner-short .area-bottom-left h3, .account-banner-bg-color-5 .account-banner-short .area-bottom-left h4, .account-banner-bg-color-5 .account-banner-short .area-bottom-left h5, .account-banner-bg-color-5 .account-banner-short .area-bottom-left label, .account-banner-bg-color-5 .account-banner-short .area-bottom-left .Label, .account-banner-bg-color-5 .account-banner-short .area-bottom-left .SectionLabel, .account-banner-bg-color-red .account-banner .area-middle-left, .account-banner-bg-color-red .account-banner .area-middle-left h1, .account-banner-bg-color-red .account-banner .area-middle-left h2, .account-banner-bg-color-red .account-banner .area-middle-left h3, .account-banner-bg-color-red .account-banner .area-middle-left h4, .account-banner-bg-color-red .account-banner .area-middle-left h5, .account-banner-bg-color-red .account-banner .area-middle-left label, .account-banner-bg-color-red .account-banner .area-middle-left .Label, .account-banner-bg-color-red .account-banner .area-middle-left .SectionLabel, .account-banner-bg-color-red .account-banner .area-bottom-left, .account-banner-bg-color-red .account-banner .area-bottom-left h1, .account-banner-bg-color-red .account-banner .area-bottom-left h2, .account-banner-bg-color-red .account-banner .area-bottom-left h3, .account-banner-bg-color-red .account-banner .area-bottom-left h4, .account-banner-bg-color-red .account-banner .area-bottom-left h5, .account-banner-bg-color-red .account-banner .area-bottom-left label, .account-banner-bg-color-red .account-banner .area-bottom-left .Label, .account-banner-bg-color-red .account-banner .area-bottom-left .SectionLabel, .account-banner-bg-color-red .account-banner-short .area-middle-left, .account-banner-bg-color-red .account-banner-short .area-middle-left h1, .account-banner-bg-color-red .account-banner-short .area-middle-left h2, .account-banner-bg-color-red .account-banner-short .area-middle-left h3, .account-banner-bg-color-red .account-banner-short .area-middle-left h4, .account-banner-bg-color-red .account-banner-short .area-middle-left h5, .account-banner-bg-color-red .account-banner-short .area-middle-left label, .account-banner-bg-color-red .account-banner-short .area-middle-left .Label, .account-banner-bg-color-red .account-banner-short .area-middle-left .SectionLabel, .account-banner-bg-color-red .account-banner-short .area-bottom-left, .account-banner-bg-color-red .account-banner-short .area-bottom-left h1, .account-banner-bg-color-red .account-banner-short .area-bottom-left h2, .account-banner-bg-color-red .account-banner-short .area-bottom-left h3, .account-banner-bg-color-red .account-banner-short .area-bottom-left h4, .account-banner-bg-color-red .account-banner-short .area-bottom-left h5, .account-banner-bg-color-red .account-banner-short .area-bottom-left label, .account-banner-bg-color-red .account-banner-short .area-bottom-left .Label, .account-banner-bg-color-red .account-banner-short .area-bottom-left .SectionLabel, .account-banner-bg-color-purple .account-banner .area-middle-left, .account-banner-bg-color-purple .account-banner .area-middle-left h1, .account-banner-bg-color-purple .account-banner .area-middle-left h2, .account-banner-bg-color-purple .account-banner .area-middle-left h3, .account-banner-bg-color-purple .account-banner .area-middle-left h4, .account-banner-bg-color-purple .account-banner .area-middle-left h5, .account-banner-bg-color-purple .account-banner .area-middle-left label, .account-banner-bg-color-purple .account-banner .area-middle-left .Label, .account-banner-bg-color-purple .account-banner .area-middle-left .SectionLabel, .account-banner-bg-color-purple .account-banner .area-bottom-left, .account-banner-bg-color-purple .account-banner .area-bottom-left h1, .account-banner-bg-color-purple .account-banner .area-bottom-left h2, .account-banner-bg-color-purple .account-banner .area-bottom-left h3, .account-banner-bg-color-purple .account-banner .area-bottom-left h4, .account-banner-bg-color-purple .account-banner .area-bottom-left h5, .account-banner-bg-color-purple .account-banner .area-bottom-left label, .account-banner-bg-color-purple .account-banner .area-bottom-left .Label, .account-banner-bg-color-purple .account-banner .area-bottom-left .SectionLabel, .account-banner-bg-color-purple .account-banner-short .area-middle-left, .account-banner-bg-color-purple .account-banner-short .area-middle-left h1, .account-banner-bg-color-purple .account-banner-short .area-middle-left h2, .account-banner-bg-color-purple .account-banner-short .area-middle-left h3, .account-banner-bg-color-purple .account-banner-short .area-middle-left h4, .account-banner-bg-color-purple .account-banner-short .area-middle-left h5, .account-banner-bg-color-purple .account-banner-short .area-middle-left label, .account-banner-bg-color-purple .account-banner-short .area-middle-left .Label, .account-banner-bg-color-purple .account-banner-short .area-middle-left .SectionLabel, .account-banner-bg-color-purple .account-banner-short .area-bottom-left, .account-banner-bg-color-purple .account-banner-short .area-bottom-left h1, .account-banner-bg-color-purple .account-banner-short .area-bottom-left h2, .account-banner-bg-color-purple .account-banner-short .area-bottom-left h3, .account-banner-bg-color-purple .account-banner-short .area-bottom-left h4, .account-banner-bg-color-purple .account-banner-short .area-bottom-left h5, .account-banner-bg-color-purple .account-banner-short .area-bottom-left label, .account-banner-bg-color-purple .account-banner-short .area-bottom-left .Label, .account-banner-bg-color-purple .account-banner-short .area-bottom-left .SectionLabel, .account-banner-bg-color-mps-1 .account-banner .area-middle-left, .account-banner-bg-color-mps-1 .account-banner .area-middle-left h1, .account-banner-bg-color-mps-1 .account-banner .area-middle-left h2, .account-banner-bg-color-mps-1 .account-banner .area-middle-left h3, .account-banner-bg-color-mps-1 .account-banner .area-middle-left h4, .account-banner-bg-color-mps-1 .account-banner .area-middle-left h5, .account-banner-bg-color-mps-1 .account-banner .area-middle-left label, .account-banner-bg-color-mps-1 .account-banner .area-middle-left .Label, .account-banner-bg-color-mps-1 .account-banner .area-middle-left .SectionLabel, .account-banner-bg-color-mps-1 .account-banner .area-bottom-left, .account-banner-bg-color-mps-1 .account-banner .area-bottom-left h1, .account-banner-bg-color-mps-1 .account-banner .area-bottom-left h2, .account-banner-bg-color-mps-1 .account-banner .area-bottom-left h3, .account-banner-bg-color-mps-1 .account-banner .area-bottom-left h4, .account-banner-bg-color-mps-1 .account-banner .area-bottom-left h5, .account-banner-bg-color-mps-1 .account-banner .area-bottom-left label, .account-banner-bg-color-mps-1 .account-banner .area-bottom-left .Label, .account-banner-bg-color-mps-1 .account-banner .area-bottom-left .SectionLabel, .account-banner-bg-color-mps-1 .account-banner-short .area-middle-left, .account-banner-bg-color-mps-1 .account-banner-short .area-middle-left h1, .account-banner-bg-color-mps-1 .account-banner-short .area-middle-left h2, .account-banner-bg-color-mps-1 .account-banner-short .area-middle-left h3, .account-banner-bg-color-mps-1 .account-banner-short .area-middle-left h4, .account-banner-bg-color-mps-1 .account-banner-short .area-middle-left h5, .account-banner-bg-color-mps-1 .account-banner-short .area-middle-left label, .account-banner-bg-color-mps-1 .account-banner-short .area-middle-left .Label, .account-banner-bg-color-mps-1 .account-banner-short .area-middle-left .SectionLabel, .account-banner-bg-color-mps-1 .account-banner-short .area-bottom-left, .account-banner-bg-color-mps-1 .account-banner-short .area-bottom-left h1, .account-banner-bg-color-mps-1 .account-banner-short .area-bottom-left h2, .account-banner-bg-color-mps-1 .account-banner-short .area-bottom-left h3, .account-banner-bg-color-mps-1 .account-banner-short .area-bottom-left h4, .account-banner-bg-color-mps-1 .account-banner-short .area-bottom-left h5, .account-banner-bg-color-mps-1 .account-banner-short .area-bottom-left label, .account-banner-bg-color-mps-1 .account-banner-short .area-bottom-left .Label, .account-banner-bg-color-mps-1 .account-banner-short .area-bottom-left .SectionLabel, .account-banner-bg-color-mps-2 .account-banner .area-middle-left, .account-banner-bg-color-mps-2 .account-banner .area-middle-left h1, .account-banner-bg-color-mps-2 .account-banner .area-middle-left h2, .account-banner-bg-color-mps-2 .account-banner .area-middle-left h3, .account-banner-bg-color-mps-2 .account-banner .area-middle-left h4, .account-banner-bg-color-mps-2 .account-banner .area-middle-left h5, .account-banner-bg-color-mps-2 .account-banner .area-middle-left label, .account-banner-bg-color-mps-2 .account-banner .area-middle-left .Label, .account-banner-bg-color-mps-2 .account-banner .area-middle-left .SectionLabel, .account-banner-bg-color-mps-2 .account-banner .area-bottom-left, .account-banner-bg-color-mps-2 .account-banner .area-bottom-left h1, .account-banner-bg-color-mps-2 .account-banner .area-bottom-left h2, .account-banner-bg-color-mps-2 .account-banner .area-bottom-left h3, .account-banner-bg-color-mps-2 .account-banner .area-bottom-left h4, .account-banner-bg-color-mps-2 .account-banner .area-bottom-left h5, .account-banner-bg-color-mps-2 .account-banner .area-bottom-left label, .account-banner-bg-color-mps-2 .account-banner .area-bottom-left .Label, .account-banner-bg-color-mps-2 .account-banner .area-bottom-left .SectionLabel, .account-banner-bg-color-mps-2 .account-banner-short .area-middle-left, .account-banner-bg-color-mps-2 .account-banner-short .area-middle-left h1, .account-banner-bg-color-mps-2 .account-banner-short .area-middle-left h2, .account-banner-bg-color-mps-2 .account-banner-short .area-middle-left h3, .account-banner-bg-color-mps-2 .account-banner-short .area-middle-left h4, .account-banner-bg-color-mps-2 .account-banner-short .area-middle-left h5, .account-banner-bg-color-mps-2 .account-banner-short .area-middle-left label, .account-banner-bg-color-mps-2 .account-banner-short .area-middle-left .Label, .account-banner-bg-color-mps-2 .account-banner-short .area-middle-left .SectionLabel, .account-banner-bg-color-mps-2 .account-banner-short .area-bottom-left, .account-banner-bg-color-mps-2 .account-banner-short .area-bottom-left h1, .account-banner-bg-color-mps-2 .account-banner-short .area-bottom-left h2, .account-banner-bg-color-mps-2 .account-banner-short .area-bottom-left h3, .account-banner-bg-color-mps-2 .account-banner-short .area-bottom-left h4, .account-banner-bg-color-mps-2 .account-banner-short .area-bottom-left h5, .account-banner-bg-color-mps-2 .account-banner-short .area-bottom-left label, .account-banner-bg-color-mps-2 .account-banner-short .area-bottom-left .Label, .account-banner-bg-color-mps-2 .account-banner-short .area-bottom-left .SectionLabel { color: var(--color-white); } .account-banner-bg-color-5 .account-banner .area-middle-left a.ButtonItem, .account-banner-bg-color-5 .account-banner .area-bottom-left a.ButtonItem, .account-banner-bg-color-5 .account-banner-short .area-middle-left a.ButtonItem, .account-banner-bg-color-5 .account-banner-short .area-bottom-left a.ButtonItem, .account-banner-bg-color-red .account-banner .area-middle-left a.ButtonItem, .account-banner-bg-color-red .account-banner .area-bottom-left a.ButtonItem, .account-banner-bg-color-red .account-banner-short .area-middle-left a.ButtonItem, .account-banner-bg-color-red .account-banner-short .area-bottom-left a.ButtonItem, .account-banner-bg-color-purple .account-banner .area-middle-left a.ButtonItem, .account-banner-bg-color-purple .account-banner .area-bottom-left a.ButtonItem, .account-banner-bg-color-purple .account-banner-short .area-middle-left a.ButtonItem, .account-banner-bg-color-purple .account-banner-short .area-bottom-left a.ButtonItem, .account-banner-bg-color-mps-1 .account-banner .area-middle-left a.ButtonItem, .account-banner-bg-color-mps-1 .account-banner .area-bottom-left a.ButtonItem, .account-banner-bg-color-mps-1 .account-banner-short .area-middle-left a.ButtonItem, .account-banner-bg-color-mps-1 .account-banner-short .area-bottom-left a.ButtonItem, .account-banner-bg-color-mps-2 .account-banner .area-middle-left a.ButtonItem, .account-banner-bg-color-mps-2 .account-banner .area-bottom-left a.ButtonItem, .account-banner-bg-color-mps-2 .account-banner-short .area-middle-left a.ButtonItem, .account-banner-bg-color-mps-2 .account-banner-short .area-bottom-left a.ButtonItem { text-decoration: none; } .account-banner-bg-color-5 .account-banner .area-middle-left a:not(.ButtonItem), .account-banner-bg-color-5 .account-banner .area-bottom-left a:not(.ButtonItem), .account-banner-bg-color-5 .account-banner-short .area-middle-left a:not(.ButtonItem), .account-banner-bg-color-5 .account-banner-short .area-bottom-left a:not(.ButtonItem), .account-banner-bg-color-red .account-banner .area-middle-left a:not(.ButtonItem), .account-banner-bg-color-red .account-banner .area-bottom-left a:not(.ButtonItem), .account-banner-bg-color-red .account-banner-short .area-middle-left a:not(.ButtonItem), .account-banner-bg-color-red .account-banner-short .area-bottom-left a:not(.ButtonItem), .account-banner-bg-color-purple .account-banner .area-middle-left a:not(.ButtonItem), .account-banner-bg-color-purple .account-banner .area-bottom-left a:not(.ButtonItem), .account-banner-bg-color-purple .account-banner-short .area-middle-left a:not(.ButtonItem), .account-banner-bg-color-purple .account-banner-short .area-bottom-left a:not(.ButtonItem), .account-banner-bg-color-mps-1 .account-banner .area-middle-left a:not(.ButtonItem), .account-banner-bg-color-mps-1 .account-banner .area-bottom-left a:not(.ButtonItem), .account-banner-bg-color-mps-1 .account-banner-short .area-middle-left a:not(.ButtonItem), .account-banner-bg-color-mps-1 .account-banner-short .area-bottom-left a:not(.ButtonItem), .account-banner-bg-color-mps-2 .account-banner .area-middle-left a:not(.ButtonItem), .account-banner-bg-color-mps-2 .account-banner .area-bottom-left a:not(.ButtonItem), .account-banner-bg-color-mps-2 .account-banner-short .area-middle-left a:not(.ButtonItem), .account-banner-bg-color-mps-2 .account-banner-short .area-bottom-left a:not(.ButtonItem) { color: var(--color-white); } } @media (min-width: 992px) { .account-banner-bg-color-5 .account-banner .area-center, .account-banner-bg-color-5 .account-banner .area-center h1, .account-banner-bg-color-5 .account-banner .area-center h2, .account-banner-bg-color-5 .account-banner .area-center h3, .account-banner-bg-color-5 .account-banner .area-center h4, .account-banner-bg-color-5 .account-banner .area-center h5, .account-banner-bg-color-5 .account-banner .area-center label, .account-banner-bg-color-5 .account-banner .area-center .Label, .account-banner-bg-color-5 .account-banner .area-center .SectionLabel, .account-banner-bg-color-5 .account-banner-short .area-center, .account-banner-bg-color-5 .account-banner-short .area-center h1, .account-banner-bg-color-5 .account-banner-short .area-center h2, .account-banner-bg-color-5 .account-banner-short .area-center h3, .account-banner-bg-color-5 .account-banner-short .area-center h4, .account-banner-bg-color-5 .account-banner-short .area-center h5, .account-banner-bg-color-5 .account-banner-short .area-center label, .account-banner-bg-color-5 .account-banner-short .area-center .Label, .account-banner-bg-color-5 .account-banner-short .area-center .SectionLabel, .account-banner-bg-color-red .account-banner .area-center, .account-banner-bg-color-red .account-banner .area-center h1, .account-banner-bg-color-red .account-banner .area-center h2, .account-banner-bg-color-red .account-banner .area-center h3, .account-banner-bg-color-red .account-banner .area-center h4, .account-banner-bg-color-red .account-banner .area-center h5, .account-banner-bg-color-red .account-banner .area-center label, .account-banner-bg-color-red .account-banner .area-center .Label, .account-banner-bg-color-red .account-banner .area-center .SectionLabel, .account-banner-bg-color-red .account-banner-short .area-center, .account-banner-bg-color-red .account-banner-short .area-center h1, .account-banner-bg-color-red .account-banner-short .area-center h2, .account-banner-bg-color-red .account-banner-short .area-center h3, .account-banner-bg-color-red .account-banner-short .area-center h4, .account-banner-bg-color-red .account-banner-short .area-center h5, .account-banner-bg-color-red .account-banner-short .area-center label, .account-banner-bg-color-red .account-banner-short .area-center .Label, .account-banner-bg-color-red .account-banner-short .area-center .SectionLabel, .account-banner-bg-color-purple .account-banner .area-center, .account-banner-bg-color-purple .account-banner .area-center h1, .account-banner-bg-color-purple .account-banner .area-center h2, .account-banner-bg-color-purple .account-banner .area-center h3, .account-banner-bg-color-purple .account-banner .area-center h4, .account-banner-bg-color-purple .account-banner .area-center h5, .account-banner-bg-color-purple .account-banner .area-center label, .account-banner-bg-color-purple .account-banner .area-center .Label, .account-banner-bg-color-purple .account-banner .area-center .SectionLabel, .account-banner-bg-color-purple .account-banner-short .area-center, .account-banner-bg-color-purple .account-banner-short .area-center h1, .account-banner-bg-color-purple .account-banner-short .area-center h2, .account-banner-bg-color-purple .account-banner-short .area-center h3, .account-banner-bg-color-purple .account-banner-short .area-center h4, .account-banner-bg-color-purple .account-banner-short .area-center h5, .account-banner-bg-color-purple .account-banner-short .area-center label, .account-banner-bg-color-purple .account-banner-short .area-center .Label, .account-banner-bg-color-purple .account-banner-short .area-center .SectionLabel, .account-banner-bg-color-mps-1 .account-banner .area-center, .account-banner-bg-color-mps-1 .account-banner .area-center h1, .account-banner-bg-color-mps-1 .account-banner .area-center h2, .account-banner-bg-color-mps-1 .account-banner .area-center h3, .account-banner-bg-color-mps-1 .account-banner .area-center h4, .account-banner-bg-color-mps-1 .account-banner .area-center h5, .account-banner-bg-color-mps-1 .account-banner .area-center label, .account-banner-bg-color-mps-1 .account-banner .area-center .Label, .account-banner-bg-color-mps-1 .account-banner .area-center .SectionLabel, .account-banner-bg-color-mps-1 .account-banner-short .area-center, .account-banner-bg-color-mps-1 .account-banner-short .area-center h1, .account-banner-bg-color-mps-1 .account-banner-short .area-center h2, .account-banner-bg-color-mps-1 .account-banner-short .area-center h3, .account-banner-bg-color-mps-1 .account-banner-short .area-center h4, .account-banner-bg-color-mps-1 .account-banner-short .area-center h5, .account-banner-bg-color-mps-1 .account-banner-short .area-center label, .account-banner-bg-color-mps-1 .account-banner-short .area-center .Label, .account-banner-bg-color-mps-1 .account-banner-short .area-center .SectionLabel, .account-banner-bg-color-mps-2 .account-banner .area-center, .account-banner-bg-color-mps-2 .account-banner .area-center h1, .account-banner-bg-color-mps-2 .account-banner .area-center h2, .account-banner-bg-color-mps-2 .account-banner .area-center h3, .account-banner-bg-color-mps-2 .account-banner .area-center h4, .account-banner-bg-color-mps-2 .account-banner .area-center h5, .account-banner-bg-color-mps-2 .account-banner .area-center label, .account-banner-bg-color-mps-2 .account-banner .area-center .Label, .account-banner-bg-color-mps-2 .account-banner .area-center .SectionLabel, .account-banner-bg-color-mps-2 .account-banner-short .area-center, .account-banner-bg-color-mps-2 .account-banner-short .area-center h1, .account-banner-bg-color-mps-2 .account-banner-short .area-center h2, .account-banner-bg-color-mps-2 .account-banner-short .area-center h3, .account-banner-bg-color-mps-2 .account-banner-short .area-center h4, .account-banner-bg-color-mps-2 .account-banner-short .area-center h5, .account-banner-bg-color-mps-2 .account-banner-short .area-center label, .account-banner-bg-color-mps-2 .account-banner-short .area-center .Label, .account-banner-bg-color-mps-2 .account-banner-short .area-center .SectionLabel { color: var(--color-white); } .account-banner-bg-color-5 .account-banner .area-center a.ButtonItem, .account-banner-bg-color-5 .account-banner-short .area-center a.ButtonItem, .account-banner-bg-color-red .account-banner .area-center a.ButtonItem, .account-banner-bg-color-red .account-banner-short .area-center a.ButtonItem, .account-banner-bg-color-purple .account-banner .area-center a.ButtonItem, .account-banner-bg-color-purple .account-banner-short .area-center a.ButtonItem, .account-banner-bg-color-mps-1 .account-banner .area-center a.ButtonItem, .account-banner-bg-color-mps-1 .account-banner-short .area-center a.ButtonItem, .account-banner-bg-color-mps-2 .account-banner .area-center a.ButtonItem, .account-banner-bg-color-mps-2 .account-banner-short .area-center a.ButtonItem { text-decoration: none; } .account-banner-bg-color-5 .account-banner .area-center a:not(.ButtonItem), .account-banner-bg-color-5 .account-banner-short .area-center a:not(.ButtonItem), .account-banner-bg-color-red .account-banner .area-center a:not(.ButtonItem), .account-banner-bg-color-red .account-banner-short .area-center a:not(.ButtonItem), .account-banner-bg-color-purple .account-banner .area-center a:not(.ButtonItem), .account-banner-bg-color-purple .account-banner-short .area-center a:not(.ButtonItem), .account-banner-bg-color-mps-1 .account-banner .area-center a:not(.ButtonItem), .account-banner-bg-color-mps-1 .account-banner-short .area-center a:not(.ButtonItem), .account-banner-bg-color-mps-2 .account-banner .area-center a:not(.ButtonItem), .account-banner-bg-color-mps-2 .account-banner-short .area-center a:not(.ButtonItem) { color: var(--color-white); } } .account-page-with-banner .mini-profile-banner-large .panel-heading, .account-page-with-banner .mini-profile-banner-small .panel-heading, .account-page-with-banner .account-page-top-area.account-page-top-area { background-color: var(--color-white); } .account-page-with-banner .account-page-top-area { padding-top: 30px; padding-left: 30px; padding-right: 30px; } .account-page-with-banner .mini-profile-banner-large .mini-profile-picture-section, .account-page-with-banner .mini-profile-banner-small .mini-profile-picture-section { background-color: var(--color-white); } .account-page-with-banner .mini-profile-banner-large .mini-profile-picture-section, .account-page-with-banner .mini-profile-banner-small .mini-profile-picture-section { border-bottom: 1px solid var(--color-grey-300); } @media (min-width: 768px) { .account-page-with-banner .mini-profile-banner-large .mini-profile-name-section, .account-page-with-banner .mini-profile-banner-large .mini-profile-address-section { background-color: var(--color-white); } .account-page-with-banner .mini-profile-banner-large .mini-profile-name-section, .account-page-with-banner .mini-profile-banner-large .mini-profile-name-section h1, .account-page-with-banner .mini-profile-banner-large .mini-profile-name-section h2, .account-page-with-banner .mini-profile-banner-large .mini-profile-name-section h3, .account-page-with-banner .mini-profile-banner-large .mini-profile-name-section h4, .account-page-with-banner .mini-profile-banner-large .mini-profile-name-section h5, .account-page-with-banner .mini-profile-banner-large .mini-profile-name-section label, .account-page-with-banner .mini-profile-banner-large .mini-profile-name-section .Label, .account-page-with-banner .mini-profile-banner-large .mini-profile-name-section .SectionLabel, .account-page-with-banner .mini-profile-banner-large .mini-profile-address-section, .account-page-with-banner .mini-profile-banner-large .mini-profile-address-section h1, .account-page-with-banner .mini-profile-banner-large .mini-profile-address-section h2, .account-page-with-banner .mini-profile-banner-large .mini-profile-address-section h3, .account-page-with-banner .mini-profile-banner-large .mini-profile-address-section h4, .account-page-with-banner .mini-profile-banner-large .mini-profile-address-section h5, .account-page-with-banner .mini-profile-banner-large .mini-profile-address-section label, .account-page-with-banner .mini-profile-banner-large .mini-profile-address-section .Label, .account-page-with-banner .mini-profile-banner-large .mini-profile-address-section .SectionLabel { color: var(--color-text); } .account-page-with-banner .mini-profile-banner-large .mini-profile-name-section a.ButtonItem, .account-page-with-banner .mini-profile-banner-large .mini-profile-address-section a.ButtonItem { text-decoration: none; } .account-page-with-banner .mini-profile-banner-large .mini-profile-name-section a:not(.ButtonItem), .account-page-with-banner .mini-profile-banner-large .mini-profile-address-section a:not(.ButtonItem) { color: var(--color-text); } .account-page-with-banner .mini-profile-banner-large .mini-profile:after { /* because we're not sure if the name or address will be the last section of the right column, need to add the border in this weird way */ content: ''; border-bottom: 1px solid var(--color-grey-300); grid-column: address; grid-row: address; align-self: end; z-index: 1; } } /* ========================================================================== HEROES / JUMBOTRON (full-width home area, header backgrounds, carousel) Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ /* Home page full width banners */ /* Home page full width area ========================================================================== */ /* This is for the full width area of the Cities and Cities_Responsive home page. * It uses a content area to acheive the full width */ .HomePageFullWidthArea .ContentItemContainer .panel:not(.panel-border), .HomePageFullWidthArea .ContentItemContainer div .panel:not(.panel-border) { /* if borders are not turned on don't leave the space for them */ border-width: 0; } .HomePageFullWidthArea .ContentItemContainer .panel .panel-body-container .panel-body, .HomePageFullWidthArea .ContentItemContainer div .panel .panel-body-container .panel-body { /* Turn off the padding on iPart panels */ padding: 0; } /* Header backgrounds ========================================================================== */ .header-bg { background-color: var(--color-white); } .header-dark .header-bg { background-color: var(--color-text); } .carousel .img-copyright, .carousel2 .img-copyright { width: 100%; text-align: right; font-size: 70%; } .carousel .img-copyright a, .carousel .img-copyright a:hover, .carousel .img-copyright a:focus, .carousel .img-copyright a:visited, .carousel .img-copyright a:active, .carousel2 .img-copyright a, .carousel2 .img-copyright a:hover, .carousel2 .img-copyright a:focus, .carousel2 .img-copyright a:visited, .carousel2 .img-copyright a:active { color: var(--color-white); } /* Carousel ========================================================================== */ /* Used by the Slideshow iPart */ .carousel, .carousel2, .HomePageFullWidthArea { position: relative; } .carousel h1, .carousel h2, .carousel h3, .carousel h4, .carousel h5, .carousel2 h1, .carousel2 h2, .carousel2 h3, .carousel2 h4, .carousel2 h5, .HomePageFullWidthArea h1, .HomePageFullWidthArea h2, .HomePageFullWidthArea h3, .HomePageFullWidthArea h4, .HomePageFullWidthArea h5 { font-weight: 600; display: inline-block; } @media (max-width: 991px) { .carousel h1, .carousel2 h1, .HomePageFullWidthArea h1 { font-size: 200%; } } .carousel .carousel-caption, .carousel2 .carousel-caption, .HomePageFullWidthArea .carousel-caption { padding: 1em; position: absolute; font-family: var(--font-primary); bottom: auto; top: calc(500px / 2); background-color: none; font-weight: 300; text-align: left; color: var(--color-white); } .carousel .carousel-caption p, .carousel2 .carousel-caption p, .HomePageFullWidthArea .carousel-caption p { font-size: 1em; } .carousel .carousel-caption h1, .carousel2 .carousel-caption h1, .HomePageFullWidthArea .carousel-caption h1 { color: var(--color-white); } .carousel .carousel-caption h1:after, .carousel2 .carousel-caption h1:after, .HomePageFullWidthArea .carousel-caption h1:after { display: none; } @media (min-width: 992px) { .carousel .carousel-caption, .carousel2 .carousel-caption, .HomePageFullWidthArea .carousel-caption { width: 40%; left: 15%; right: auto; } } @media (max-width: 991px) { .carousel .carousel-caption, .carousel2 .carousel-caption, .HomePageFullWidthArea .carousel-caption { width: 100%; position: static; margin: 0 auto; } } .Wrapper-HomePage .header { min-height: auto; } .Wrapper-HomePage .header-background-container { background-color: var(--color-grey-mid); /* fall back to make the header dark in case the carousel does not load */ } .Wrapper-HomePage .header-background-container:before { content: ''; display: block; background-image: linear-gradient(to bottom, rgba(var(--shadow-rgb), 0.5) 0, rgba(var(--shadow-rgb), 0) 100%); background-repeat: repeat-x; height: 6em; width: 100%; position: absolute; z-index: 1; } .Wrapper-HomePage .header-background-container .ContentItemContainer > .ContentItemContainer { content: ''; display: block; width: 100%; height: 100%; background: var(--color-dark); background: var(--color-dark) linear-gradient(27deg, var(--color-grey-mid) 0%, var(--color-dark) 30%, var(--color-accent-green) 100%); } .Wrapper-HomePage .header-background-container .ContentItemContainer > .ContentItemContainer .bg-img-full-size { mix-blend-mode: multiply; } .Wrapper-HomePage .home-page-header-container { display: flex; flex-direction: column; height: 100%; justify-content: center; padding-top: 3em; padding-bottom: 3em; } .hero-caption, .carousel-caption { background-color: transparent; text-align: center; } .hero-caption h1, .carousel-caption h1 { font-size: 3.5rem; text-transform: uppercase; margin-bottom: 1rem; } .hero-caption h1 .text-large, .carousel-caption h1 .text-large { display: block; margin-top: 1rem; font-size: 5rem; } .hero-caption p.lead, .carousel-caption p.lead { font-size: 1.8rem; line-height: 1.5; } @media (min-width: 992px) { .hero-caption, .carousel-caption { width: 80%; margin-left: auto; margin-right: auto; max-width: var(--container-max); } .hero-caption h1, .carousel-caption h1 { font-size: 5rem; } .hero-caption h1 .text-large, .carousel-caption h1 .text-large { font-size: 6.5rem; } .hero-caption p.lead, .carousel-caption p.lead { font-size: 2rem; } } @media (min-width: 992px) { .hero-caption h1, .carousel-caption h1 { font-size: 7rem; } .hero-caption h1 .text-large, .carousel-caption h1 .text-large { font-size: 8.8rem; } .hero-caption p.lead, .carousel-caption p.lead { font-size: 2.8rem; } } .carousel-hero-dark .carousel-caption, .carousel-hero-dark .carousel-caption h1, .carousel-hero-dark .carousel-caption h2, .carousel-hero-dark .carousel-caption h3, .carousel-hero-dark .carousel-caption h4, .carousel-hero-dark .carousel-caption h5, .hero-dark .hero-caption, .hero-dark .hero-caption h1, .hero-dark .hero-caption h2, .hero-dark .hero-caption h3, .hero-dark .hero-caption h4, .hero-dark .hero-caption h5 { color: var(--color-white); } .carousel-hero-dark .carousel-caption a:not(.TextButton), .hero-dark .hero-caption a:not(.TextButton) { color: var(--color-white); text-decoration: underline; } .header-display-page-title header.header .internal-header-container { align-self: center; text-align: center; } .header-display-page-title header.header .internal-header-container .header-title-banner { padding-top: 3em; padding-bottom: 3em; background-repeat: no-repeat; background-position: 50% 10%; background-size: 200px; min-height: 200px; } .header-display-page-title header.header .internal-header-container .lead { max-width: 20em; margin-left: auto; margin-right: auto; } @media (min-width: 768px) { .header-display-page-title header.header .internal-header-container { padding-top: 4em; padding-bottom: 4em; } .header-display-page-title header.header .internal-header-container h1 { font-size: 4em; } } @media (min-width: 992px) { .header-display-page-title header.header .internal-header-container { padding-top: 5em; padding-bottom: 5em; } .header-display-page-title header.header .internal-header-container h1 { font-size: 5.5em; } .header-display-page-title header.header .internal-header-container .lead { font-size: 2em; } } .interior-img-splash { display: grid; align-items: end; } .interior-img-splash .img-primary-container, .interior-img-splash .img-secondary-container, .interior-img-splash .splash-text { grid-column: 1; grid-row: 1; max-height: 70vh; } .interior-img-splash .img-inner { width: 100%; height: 100%; } .interior-img-splash .splash-text { z-index: 3; padding: 10px; color: var(--color-white); } .interior-img-splash .splash-text h2 { color: var(--color-white); } @media (max-width: 991px) { .interior-img-splash .img-secondary-container { display: none; } } @media (min-width: 992px) { .interior-img-splash { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 2fr auto 1fr; align-items: start; } .interior-img-splash img { -o-object-fit: cover !important; object-fit: cover !important; -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; max-width: initial; height: 100% !important; } .interior-img-splash .img-primary-container { grid-column: 1 / span 2; grid-row: 1 /span 2; width: 100%; height: 100%; } .interior-img-splash .img-secondary-container { grid-column: 2 / span 2; grid-row: 2 / span 2; width: 100%; height: 100%; } .interior-img-splash .splash-text { grid-column: 1 / span 3; grid-row: 2; margin-left: 8em; margin-top: 3em; } .interior-img-splash .splash-text h2 { font-size: 2.8em; } .interior-img-splash .splash-text h2 span { font-size: 115%; } .interior-img-splash .splash-text .lead { font-size: 2em; } } .parallax-container { position: relative; } .parallax-container .js-parallax-up { position: absolute; } /* ========================================================================== CALLOUTS & FEATURES (spotlight, feature area, image banners, header links) Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ /* Classes that can be used for iParts and HTML content */ /* Titles */ h1.BigHeader, .h1.BigHeader { background-color: transparent; color: var(--color-ink); } /* Use class ContentBlockPrimary to give a block of content extra emphasis */ .ContentBlockPrimary { padding: 20px; background-color: var(--color-white); } /* Make the titles on secondary columns smaller - used on the Member home page */ .SecondaryColumn h2, .SecondaryColumn .PanelTitle, .SecondaryColumn .panel-title { font-family: inherit; font-weight: bold; font-size: 90%; color: var(--color-grey-800); text-transform: uppercase; } .SecondaryColumn h2, .SecondaryColumn .PanelHead, .SecondaryColumn .TitleBarCaption, .SecondaryColumn .panel-heading { border-bottom: none; } .SecondaryColumn h4, .SecondaryColumn .PanelHead, .SecondaryColumn .TitleBarCaption, .SecondaryColumn .panel-heading { color: var(--color-ink); } .SecondaryColumn .PanelHead, .SecondaryColumn .panel-heading { padding: 0 4px; } .SecondaryColumn .PanelField label, .SecondaryColumn .PanelField .Label, .SecondaryColumn .PanelField .PanelFieldLabel, .SecondaryColumn .PanelField .PanelFieldValue { text-align: unset; float: none; width: auto; } .SecondaryColumn .CommunityBlogItem { padding: 0 0 0 10px; } .SecondaryColumn .CommunityBlogItem .PanelFieldValue { padding: 0; } .SecondaryColumn .CommunityItemTitle { font-weight: normal; font-size: inherit; } .SecondaryColumn .RadGrid .rgRow td, .SecondaryColumn .RadGrid .rgNoRecords td { padding: 4px; } /* Use class ContentBlockPictureArea to surround an image within a ContentBlockPrimary area */ .ContentBlockPictureArea, .ContentBlockLeft { width: 250px; float: left; margin-right: .5em; margin-bottom: .5em; } @media (max-width: 991px) { .ContentBlockPictureArea, .ContentBlockLeft { float: none; margin: 0px auto; width: 100%; max-width: 400px; } } .ContentBlockPictureArea.FloatRight, .ContentBlockLeft.FloatRight { float: right; margin-left: .5em; } .ContentBlockPictureArea img, .ContentBlockLeft img { max-width: 100%; height: auto !important; } @media (max-width: 991px) { .ContentBlockPictureArea img, .ContentBlockLeft img { width: 100%; max-width: 400px; } } .BlockList ul { margin: 0; padding: 0; } .BlockList li { list-style: none; } .BlockList a { display: block; text-decoration: none; padding: 20px; } .BlockList a:hover { background-color: var(--color-grey-lighter); } .BlockList a span { text-decoration: underline; } .BlockList p { color: var(--color-text); margin-bottom: 0; } .TaggedListColumns .TaggedListPanel { max-width: var(--container-max); margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; justify-content: center; padding: 30px 0 0 30px; } .TaggedListColumns .TaggedListPanel .content-tagged-tall { float: none; border: 0 solid transparent; border-width: 0 30px 30px 0; } .TaggedListColumns .TaggedListPanel > div:last-child .TextButton { /* Hide the Next Button */ display: none; } /* Tagged list format, styled similar to BlockList */ .BlockTLItem { display: block; text-decoration: none; padding: 10px 0; } @media (max-width: 991px) { .BlockTLItem { flex-wrap: wrap; } } .BlockTLItem .text { width: 75%; margin: 0px 15px; } @media (max-width: 991px) { .BlockTLItem .text { width: 100%; margin: 15px; } } .BlockTLItem .contentTaggedListResponsiveThumbnail { max-width: 200px; height: 100% !important; } @media (max-width: 991px) { .BlockTLItem .contentTaggedListResponsiveThumbnail { display: block; margin: 0px auto; width: 100%; max-width: 450px; } } .BlockTLItem, .BlockList li { border-bottom: 1px solid var(--color-border); } .BlockTLItem h4, .BlockList h4 { font-size: 110%; font-weight: normal; } /* Tall tagged list items */ /* Best when used in conjunction with the TaggedListColumns class in the Zone CSS */ .content-tagged-tall { min-width: 15em; max-width: 33.3333333333%; float: left; } .content-tagged-tall:first-child { margin-left: 0; } .content-tagged-tall a:not(.TextButton) { text-decoration: none; } .content-tagged-tall a:not(.TextButton), .content-tagged-tall a:not(.TextButton):visited { color: var(--color-accent-orange); } .content-tagged-tall a:not(.TextButton):hover, .content-tagged-tall a:not(.TextButton):focus, .content-tagged-tall a:not(.TextButton):active { color: var(--color-accent-orange); } .content-tagged-tall .item-image-wrapper { height: 15em; overflow: hidden; position: relative; } .content-tagged-tall .item-image-wrapper:after { content: ''; display: block; background-color: rgba(var(--color-dark-rgb), 0.2); position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all .2s ease; } .content-tagged-tall .item-image-wrapper img { -o-object-fit: cover !important; object-fit: cover !important; -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; max-width: initial; height: 100% !important; } .content-tagged-tall .item-image-wrapper .item-image-inner { width: 100%; height: 100%; transition: all .2s ease; } .content-tagged-tall .item-description { padding: 10px; background-color: var(--color-white); } .content-tagged-tall:hover .item-image-wrapper:after { opacity: 0; } .content-tagged-tall:hover .item-image-inner { transform: scale(1.1); } .content-tagged-tall:nth-child(2) { transition-delay: .2s !important; } .content-tagged-tall:nth-child(3) { transition-delay: .3s !important; } /* PublishDate and ReadMoreLink are used in the Block tagged list format */ .PublishDate { font-size: 85%; font-style: italic; } /* Use on the blockquote element for a styled quote */ .Quote { margin: 1.5em .7em 1.5em 0; padding: 1.5em .7em; quotes: "\201C" "\201D" "\201C" "\201D"; font-weight: normal; } .Quote:before { content: open-quote; margin-right: 0.25em; vertical-align: -0.4em; font-size: 500%; line-height: 0.1em; } .Quote p { display: inline; } .Quote cite { display: block; margin-left: 1em; margin-top: .5em; font-style: italic; } .Quote cite:before { content: "\2014 "; } @media (min-width: 768px) { .Quote { font-size: 120%; } .Quote cite { font-size: 90%; margin-left: 2em; } } .QuoteStyle2 { border-left-color: var(--color-accent-green); } /* CalloutPanelField1 can be used as a wrapper for PanelFields, or on the PanelField directly, to callout the first label. */ .CalloutPanelField1 .PanelField label:first-child, .CalloutPanelField1.PanelField label:first-child, .CalloutPanelField1 .PanelField .Label:first-child, .CalloutPanelField1.PanelField .Label:first-child { position: relative; padding: 15px; margin: 0 0 1em; color: var(--color-white); background: var(--color-accent-orange); /*$callout1-bg*/ width: auto; border-radius: 3px; } .CalloutPanelField1 .PanelField label:first-child:after, .CalloutPanelField1.PanelField label:first-child:after, .CalloutPanelField1 .PanelField .Label:first-child:after, .CalloutPanelField1.PanelField .Label:first-child:after { content: ""; position: absolute; bottom: -8px; /* value = - border-top-width - border-bottom-width */ left: 30px; /* controls horizontal position */ border-width: 8px 8px 0; /* vary these values to change the angle of the vertex */ border-style: solid; border-color: var(--color-accent-orange) transparent; /*$callout1-bg*/ /* reduce the damage in FF3.0 */ display: block; width: 0; } /* TotalBox can be used as a wrapper for PanelFields, or on the PanelField directly, to visually distinguish a calculated total. */ .TotalBox { border-color: var(--color-border); } .TotalBox label { background-color: var(--color-accent-orange); color: var(--color-white); padding: .25em .75em; color: var(--color-white); } /* Add zone style "CCOGrayBg" to give CCO content a gray background */ .CCOGrayBg .RadMultiPage { background-color: var(--color-white); } .CCOGrayBg .yui-g { float: none; } /* Add zone style "TitleBarNoBorder" to remove the bottom border from the title bar caption */ .TitleBarNoBorder .TitleBarCaption, .TitleBarNoBorder .PanelHead.Distinguish, .TitleBarNoBorder .panel-heading.Distinguish { border-bottom: none; } /* Use the FeatureText class to make a block of text larger for emphasis */ .FeatureText { color: var(--color-grey-dark); font-size: 150%; line-height: 170%; } /* Use the CenterText class to center the text within the iPart */ .CenterText { text-align: center; } .FullWidthButtons .btn, .FullWidthButtons .TextButton { display: block; } /* Use class FeatureActionLink on a link to call attention to it */ a.FeatureActionLink { transition: all 0.2s ease-in; font-family: var(--font-primary); font-size: 110%; font-weight: 500; line-height: 1.5em; padding: 8px 0; text-decoration: none; } @media screen and (prefers-reduced-motion: reduce) { a.FeatureActionLink { transition: none; } } @media (min-width: 992px) { a.FeatureActionLink { font-size: 150%; } } a.FeatureActionLink:hover { text-decoration: underline; } /* Spotlight ========================================================================== */ /* Featured items display */ .Spotlight { text-align: center; } .Spotlight img, .Spotlight h4 { text-align: center; } @media (min-width: 768px) { .Spotlight .ImageWrapper { height: 160px; } } .Spotlight .TextButton, .Spotlight .btn { margin-top: 1em; } .Spotlight p { text-align: center; padding-top: 0.4em; } @media (max-width: 767px) { .Spotlight p { text-align: left; } } .Spotlight a img { transition: opacity 0.2s; } @media screen and (prefers-reduced-motion: reduce) { .Spotlight a img { transition: none; } } .Spotlight a img:hover { opacity: .8; } .SpotlightRow { margin-bottom: 1.2em; } .SpotlightRow::after { display: block; clear: both; content: ""; } .SpotlightRow.ThreeAcross { display: flex; flex-wrap: wrap; } .SpotlightRow.ThreeAcross .Spotlight { width: 100%; padding-left: 2%; padding-right: 2%; position: relative; } @media (min-width: 992px) { .SpotlightRow.ThreeAcross .Spotlight { width: 33%; } .SpotlightRow.ThreeAcross .Spotlight .btn { position: absolute; left: 0; right: 0; margin: auto; width: 90%; bottom: 0; } } @media (min-width: 768px) { .SpotlightRow.ThreeAcross .Spotlight { padding-bottom: 60px; } .SpotlightRow.ThreeAcross .Spotlight p { font-size: 0.8em; } } /* Feature Area ========================================================================== */ @media (min-width: 992px) { .feature-area { padding-top: 8em; padding-bottom: 6em; } } .my-lg, .mt-lg { margin-top: 4em; } .my-lg, .mb-lg { margin-bottom: 4em; } /* Feature Header ========================================================================== */ .feature-header { text-align: center; color: var(--color-text); border-bottom: none; margin-bottom: .4em; font-size: 4rem; max-width: 25em; margin-left: auto; margin-right: auto; } .feature-lead { text-align: center; max-width: 20em; margin-left: auto; margin-right: auto; } /* Feature Link ========================================================================== */ .feature-link-with-image { margin-bottom: 1em; } .feature-link-with-image, .feature-link-with-image:hover, .feature-link-with-image:active, .feature-link-with-image:visited { text-decoration: none; color: var(--color-white); } .feature-link-with-image .feature-link-wrapper { background-position: center center; background-repeat: no-repeat; background-size: cover; height: 17em; margin-bottom: 20px; } .feature-link-with-image .feature-link-text { height: 100%; padding: .8em; font-size: 110%; } @media (min-width: 480px) { .feature-link-with-image .feature-link-text { width: 45%; } } .feature-link-with-image .feature-link-text h1, .feature-link-with-image .feature-link-text h2, .feature-link-with-image .feature-link-text h3, .feature-link-with-image .feature-link-text h4, .feature-link-with-image .feature-link-text h5 { margin-top: 0; } .feature-link-with-image.feature-link-1 .feature-link-text { background-color: var(--color-accent-orange); background-color: rgba(var(--color-accent-orange-rgb), 0.75); } .feature-link-with-image.feature-link-1:hover .feature-link-text { background-color: var(--color-accent-orange); background-color: rgba(var(--color-accent-orange-rgb), 0.75); } .feature-link-with-image.feature-link-2 .feature-link-text { background-color: var(--color-dark); background-color: rgba(var(--color-dark-rgb), 0.75); } .feature-link-with-image.feature-link-2:hover .feature-link-text { background-color: var(--color-grey-900); background-color: rgba(var(--color-dark-rgb), 0.75); } /* Line Thru ========================================================================== */ /* A small piece of text with a line on either side */ /* E.g. the "or" text on the sign in iPart (when social networking sign in is enabled) */ .LineThruBlock { border-bottom: 1px solid var(--color-border); } .LineThru { background-color: var(--color-grey-lightest); } /* Feature Text Inline ========================================================================== */ .feature-text-inline { color: var(--color-accent-orange); } /* Header Links ========================================================================== */ .header-link { border-bottom: none; } .header-link a { text-decoration: none; } .header-link a, .header-link a:visited { color: var(--color-text); } .header-link a:hover, .header-link a:active, .header-link a:focus { color: var(--color-brand); } /* Image Banners ========================================================================== */ /* Publication-v27: removed Flat_White's demo .bg-img- sample banners (red-panda, tiger, elephant, etc.) -- they referenced non-existent sample images and carried one-off hardcoded colors. For a banner background, apply the token-driven helpers instead: .bg-hero / .bg-header-image / .bg-cover (see helpers-backgrounds-images.css) and set the image in variables.css. */ .banner-tall, .banner-short { text-decoration: none; display: block; background-repeat: no-repeat; background-size: cover; position: relative; border-radius: 0; } .banner-tall, .banner-tall:visited, .banner-tall:active, .banner-tall:hover, .banner-tall:focus, .banner-tall h2, .banner-short, .banner-short:visited, .banner-short:active, .banner-short:hover, .banner-short:focus, .banner-short h2 { color: var(--color-white); } .banner-text h2 { font-size: 100%; } .banner-tall { height: 500px; max-width: 300px; } .banner-tall .banner-text { position: absolute; bottom: 0; padding: 10px; background-color: var(--color-ink); background-color: rgba(var(--shadow-rgb), 0.75); border-radius: 0 0 5px 5px; } .banner-short { min-height: 150px; max-width: 300px; } .banner-short .banner-text { padding: 5px; min-height: 150px; background-color: var(--color-ink); background-color: rgba(var(--shadow-rgb), 0.2); border-radius: 5px; } /* Image Copyright Statements ========================================================================== */ .img-copyright { font-size: 70%; } /* Article Tags (pill chips) ========================================================================== The theme script (js/publication.js) reads the Article Tags query iPart, rebuilds its tags as clean pills in .tgd-article-tags, relocates them into .publication-content, and hides the raw iPart (the iPart sits below the fold, so the script hides it before it is ever seen). Chips styled below. */ .article-tags { margin-top: 2em; padding-top: 1.1em; border-top: 1px solid var(--color-border); section { display: inline-block; } .panel-body { padding: 0; } .article-tags-label { font-size: 0.8em; font-weight: 600; color: var(--color-text); margin-right: 0.6em; vertical-align: baseline; } a { display: inline-block; vertical-align: baseline; font-size: 0.8em; margin: 0 0.35em 0.5em 0; padding: 0.42em 1em; line-height: 1.35; background-color: var(--color-grey-lighter); color: var(--color-brand-darker); border-radius: var(--radius-pill); text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } a:hover, a:focus { background-color: var(--color-brand); color: var(--color-white); } } /* ========================================================================== COMMUNITIES Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ /* Community left nav */ .CommunityLinksBlock a { color: var(--color-text); } .CommunityLinksBlock a:hover { background-color: var(--color-grey-lightest); color: var(--color-text); text-decoration: none; } .CommunityLinksBlock a.CommunityLinksSelected, .CommunityLinksBlock a.CommunityLinksSelected:hover { background-color: var(--color-brand); color: var(--color-white); font-weight: bold; text-decoration: none; } /* Community breadcrumb */ .BreadCrumbCurrent { font-size: 120%; font-weight: bold; } /*** Communities common elements ***/ .CommunityItemActionLinks a:hover { background-color: var(--color-brand); } .CommunityItemTitle { font-size: 110%; padding: .25em 0; } .CommunityProfilePicture img { border-radius: 4px; } .CommunityReplyForm, .CommunityCommentItem { background: var(--color-grey-lighter); border-left: 10px solid var(--color-border); box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); } .CommunityWikiItem .CommunityRepeaterList .CommunityCommentItem { background: var(--color-grey-lighter); } /* For adding comments */ .CommunityWikiReplyForm { background: var(--color-grey-lighter); box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); } /**Styles for recent activity query template*/ .RecentCommunityPost { border: 1px solid var(--color-border); border-radius: 4px; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); } .RecentCommunityPost .CommunityProfilePicture { border: 1px solid var(--color-border); } .RecentCommunityPost .CommunityName { border-bottom: 1px solid var(--color-border); } .RecentCommunityPost .CommunityName span { color: var(--color-brand); } /*****************************************************/ /* Donor Sample Site Styles */ /*****************************************************/ /* These styles are used in the Donor sample site */ .DonorBannerInterior { overflow: hidden; height: 275px; position: relative; } .DonorBannerTextBackgroundHome { background: none repeat scroll 0 0 var(--color-grey-900); background: none repeat scroll 0 0 rgba(var(--shadow-rgb), 0.4); float: right; height: 292px; width: 450px; margin: 20px; } .DonorBannerTextBackgroundInterior { background: none repeat scroll 0 0 var(--color-grey-900); background: none repeat scroll 0 0 rgba(var(--shadow-rgb), 0.4); float: right; height: 236px; width: 450px; margin: 20px; } .DonorBannerTextBackgroundHome h1, .DonorBannerTextBackgroundInterior h1 { color: var(--color-white); font-size: 280%; background: none; margin: 0.4em; } .DonorBannerTextBackgroundHome p, .DonorBannerTextBackgroundInterior p { color: var(--color-white); font-size: 120%; line-height: 1.6em; margin: 1em; padding: 0.4em; } /**** End Donor Sample Site Styles ****/ /* ========================================================================== DONATION PAGE ENHANCEMENTS Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ /* Donation page enhancements ========================================================================== */ /* To enhance the display of a donation page, apply the donate-page class to the Donation Creator iPart's CSS Class */ .donate-page .GiftItemName { color: var(--color-accent-orange); font-size: 200%; } .donate-page .GiftItemDescription { font-size: 125%; } .RelatedItemsHorizontalEffect li:hover { transform: scale(1.06); border-radius: 0; background-color: transparent; } /* Fix product name overlapping other content */ ul.RelatedItemsHorizontal li, .RelatedItemsHorizontal ul.rrItemsList li { height: auto; } /*Member home events**/ .my-events { margin-bottom: 60px; } .my-events .pagination { display: none; } .my-events .panel-body, .my-events .PanelBody { padding: 0; } .my-events .event { display: flex; } .my-events .card { border-radius: 4px; overflow: hidden; border: 1px solid var(--color-border); box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); margin: 20px 0px; } .my-events section:first-of-type .card { margin-top: 0; } .my-events section:last-of-type .card { margin-bottom: 0; } .my-events .card-body { padding: 0; } .my-events .image { display: block; width: 95px; height: auto; min-height: 95px; background-size: cover; background-position: center; background-repeat: no-repeat; flex-shrink: 0; } .my-events .details { display: flex; align-items: center; padding: 10px 0px; } .my-events .event-details { max-width: 53%; padding: 10px 0px; } .my-events .date { padding: 0px 25px 0px 0px; margin: 0px 25px; text-align: center; position: relative; } .my-events .date:after { display: block; content: ''; width: 1px; height: 80%; background: var(--color-grey-400); position: absolute; right: 0; top: 0; bottom: 0; margin: auto; } .my-events .day { font-size: 2.11em; color: var(--color-brand); font-weight: 700; line-height: 1em; } .my-events .month { font-weight: 700; font-size: 0.72em; text-transform: uppercase; margin: -5px 0px -5px 0px; } .my-events .title { font-weight: 600; line-height: 1.2em; } .my-events .datetime { display: none; } .my-events .link { position: absolute; right: 20px; } .my-events section:first-of-type .date { display: none; } .my-events section:first-of-type .datetime { display: block; font-weight: 500; font-size: 0.89em; line-height: 24px; margin: 5px 0px; } .my-events section:first-of-type .image { width: 265px; height: auto; min-height: 140px; } .my-events section:first-of-type .details { margin-left: 20px; flex-shrink: 0; width: 100%; } .my-events section:first-of-type .title { font-size: 1.11em; } .my-events section:first-of-type .event-details { max-width: 42%; width: 100%; } @media (max-width: 991px) { .my-events .event, .my-events .link { position: relative; display: block; } .my-events .details { flex-wrap: wrap; padding: 0; } .my-events .image { display: none; } .my-events .link { padding: 15px; right: auto; text-align: center; border-top: 1px solid var(--color-grey-400); width: 100%; } .my-events .date { padding: 15px 25px 10px 0px; } .my-events .date:after { height: 100%; } .my-events section:first-of-type .details { margin-left: 0; } .my-events section:first-of-type .image { display: block; min-height: 180px; width: 100%; } .my-events section:first-of-type .event-details { max-width: 100%; padding: 15px; } } @media (max-width: 767px) { .my-events .event-details { max-width: 100%; padding: 15px; } .my-events .date { width: 100%; padding: 15px; margin: 0px auto; } .my-events .date:after { height: 1px; width: 100%; top: auto; } } .template-list .panel-body, .template-list .PanelBody { padding: 25px; } .template-list .QueryTemplateItem { padding: 25px 0px; border-bottom: 1px solid var(--color-border); } .template-list .QueryTemplateItem p { margin: 0; } .template-list .QueryTemplateItem a { font-weight: 600; } .template-list section:first-of-type .QueryTemplateItem { padding-top: 0; } .template-list section:last-of-type .QueryTemplateItem { border: none; padding-bottom: 0; } .template-cards .card { border-radius: 4px; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); } .template-cards .panel-body, .template-cards .PanelBody { padding: 0; } .template-cards .mb-3 { margin-bottom: 20px !important; } /*Member home orgs*/ .shadow-box > .panel > .panel-body-container { background: var(--color-white); border-radius: 4px; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); margin-bottom: 40px; border: 1px solid var(--color-border); } .shadow-box .CommunicationPreferencesSection { background-color: var(--color-white); } .shadow-box-zone { margin-bottom: 40px; background: var(--color-white); border-radius: 4px; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); border: 1px solid var(--color-border); padding: 15px; } @media (min-width: 768px) { .shadow-box-zone.col-sm-6 { width: 48%; margin: 0px auto 40px auto; } .shadow-box-zone.col-sm-4 { width: 31%; margin: 0px auto 40px auto; } .shadow-box-zone.col-sm-3 { width: 23%; margin: 0px auto 40px auto; } } .button-group .LargeButton { width: 100%; height: 100%; font-size: 1.06em !important; line-height: 1.2; min-height: 70px; display: flex; justify-content: center; align-items: center; } @media (min-width: 992px) { .button-group .col-sm-4 { width: 33.3333%; } } @media (max-width: 991px) { .button-group > div { width: 100%; } } @media (max-width: 991px) { .member-profile > div { width: 100%; } } .member-profile .mb-2 { margin: 0 !important; } .member-profile .mini-profile-address-section { padding-bottom: 0px; } .member-profile .mini-profile-name-section { padding-top: 0; } .member-profile .mini-profile-banner-large .mini-profile-name-section .SectionLabel, .member-profile .mini-profile-banner-small .mini-profile-name-section .SectionLabel { font-weight: 700; color: var(--color-brand); } /**member account page**/ .coadmin-manage a { padding: 15px; border-radius: 4px; background-color: var(--color-accent-orange); color: var(--color-white); text-decoration: none; width: 100%; display: block; font-weight: 700; font-size: 1.22em; margin-bottom: 20px; transition: all 0.2s ease; } @media screen and (prefers-reduced-motion: reduce) { .coadmin-manage a { transition: none; } } .coadmin-manage a:before { content: ''; display: inline-block; width: 30px; height: 30px; background-color: var(--color-white); vertical-align: middle; margin-right: 10px; -webkit-mask-image: url(images/mh-icons.svg#orgs); mask-image: url(images/mh-icons.svg#orgs); -webkit-mask-size: 28px 28px; mask-size: 28px 28px; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .coadmin-manage a:after { content: ''; display: inline-block; width: 21px; float: right; height: 21px; background-color: var(--color-white); vertical-align: middle; margin-top: 12px; margin-right: 10px; -webkit-mask-image: var(--icon-arrows); mask-image: var(--icon-arrows); -webkit-mask-size: 21px 21px; mask-size: 21px 21px; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: all 0.2s ease; } @media screen and (prefers-reduced-motion: reduce) { .coadmin-manage a:after { transition: none; } } .coadmin-manage a:hover, .coadmin-manage a:focus, .coadmin-manage a:active { background-color: var(--color-accent-orange); } .coadmin-manage a:hover:after, .coadmin-manage a:focus:after, .coadmin-manage a:active:after { margin-right: 0px; } /**Icon headings**/ .heading-icon .panel-heading { padding: 6px 0px; } .heading-icon .panel-title, .heading-icon h3 { text-align: left; text-transform: uppercase; color: var(--color-grey-dark); font-weight: 600; font-size: 1.11em; margin-bottom: 10px; } .heading-icon.engage .panel-title:before, .heading-icon.engage h3:before { content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: var(--color-grey-dark); -webkit-mask-size: 20px 20px; mask-size: 20px 20px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; margin-right: 10px; -webkit-mask-image: url(images/mh-icons.svg#engage); mask-image: url(images/mh-icons.svg#engage); -webkit-mask-size: 22px 22px; mask-size: 22px 22px; width: 22px; height: 22px; } .heading-icon.orgs .panel-title:before, .heading-icon.orgs h3:before { content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: var(--color-grey-dark); -webkit-mask-size: 20px 20px; mask-size: 20px 20px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; margin-right: 10px; -webkit-mask-image: url(images/mh-icons.svg#orgs); mask-image: url(images/mh-icons.svg#orgs); -webkit-mask-size: 25px 25px; mask-size: 25px 25px; width: 25px; height: 25px; } .heading-icon.events .panel-title:before, .heading-icon.events h3:before { content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: var(--color-grey-dark); -webkit-mask-size: 20px 20px; mask-size: 20px 20px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; margin-right: 10px; -webkit-mask-image: url(images/mh-icons.svg#events); mask-image: url(images/mh-icons.svg#events); } .heading-icon.committees .panel-title:before, .heading-icon.committees h3:before { content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: var(--color-grey-dark); -webkit-mask-size: 20px 20px; mask-size: 20px 20px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; margin-right: 10px; -webkit-mask-image: url(images/mh-icons.svg#committees); mask-image: url(images/mh-icons.svg#committees); -webkit-mask-size: 30px 30px; mask-size: 30px 30px; width: 30px; height: 30px; -webkit-mask-position: 0px 5px; mask-position: 0px 5px; } .heading-icon.sections .panel-title:before, .heading-icon.sections h3:before { content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: var(--color-grey-dark); -webkit-mask-size: 20px 20px; mask-size: 20px 20px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; margin-right: 10px; -webkit-mask-image: url(images/mh-icons.svg#sections); mask-image: url(images/mh-icons.svg#sections); -webkit-mask-size: 25px 25px; mask-size: 25px 25px; width: 25px; height: 25px; } .heading-icon.orders .panel-title:before, .heading-icon.orders h3:before { content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: var(--color-grey-dark); -webkit-mask-size: 20px 20px; mask-size: 20px 20px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; margin-right: 10px; -webkit-mask-image: url(images/mh-icons.svg#orders); mask-image: url(images/mh-icons.svg#orders); } .heading-icon.community .panel-title:before, .heading-icon.community h3:before { content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: var(--color-grey-dark); -webkit-mask-size: 20px 20px; mask-size: 20px 20px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; margin-right: 10px; -webkit-mask-image: url(images/mh-icons.svg#community); mask-image: url(images/mh-icons.svg#community); } .heading-icon.clubs .panel-title:before, .heading-icon.clubs h3:before { content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: var(--color-grey-dark); -webkit-mask-size: 20px 20px; mask-size: 20px 20px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; margin-right: 10px; -webkit-mask-image: url(images/mh-icons.svg#committees); mask-image: url(images/mh-icons.svg#committees); } /**MBRR Join now page**/ .highlighter-quote blockquote { font: 600 1.2em var(--font-primary); line-height: 1.6em; margin: 0; text-align: center; } .highlighter-quote blockquote mark { background-color: transparent; background-image: linear-gradient(to bottom right, transparent 0%, var(--color-accent-green) 0% 100%), linear-gradient(to top left, transparent 0%, var(--color-accent-green) 0%); background-size: 0.5em 2em, calc(100% - 0.25em * 2 + 1px) 2em, 0.25em 2em; background-position: 0 50%, 50% 50%, 100% 50%; background-repeat: no-repeat; padding-inline: 0.5em; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: var(--color-ink); } .highlight-card { border-radius: 4px; border: 1px var(--color-border) solid; padding: 1em; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); background-color: var(--color-white); } .highlight-card.flat { box-shadow: none; border: 0px; } .highlight-card.mbr-card .btn, .highlight-card.mbr-card .TextButton, .highlight-card.mbr-card .PrimaryButton { margin: 5px 0px; width: 100%; max-width: 260px; } .highlight-card.mbr-card h3 { margin: 0px 0px 1em 0px; } .highlight-card.mbr-card .iMIS-WebPart > .ContentItemContainer, .highlight-card.mbr-card .WebPartZone > .ContentItemContainer { margin: 0; } .highlight-card.speechbox { background-color: var(--color-blue-grey); position: relative; z-index: 0; } .highlight-card.speechbox:after { width: 0px; height: 0px; border-style: solid; border-width: 0 50px 152px 36px; border-color: transparent transparent var(--color-blue-grey) transparent; transform: rotate(240deg); display: block; content: ''; position: absolute; bottom: -65px; left: 19px; z-index: -1; } .highlight-card.comparison { padding: 1.5em; margin-top: 45px; position: relative; } .highlight-card.comparison .btn { margin-top: 2em; } .highlight-card.comparison h2 { margin: 1em 0; } @media (min-width: 992px) { .highlight-card.comparison { min-height: 750px; max-width: 450px; margin: 25px auto; padding-bottom: 120px; } .highlight-card.comparison .btn { position: absolute; bottom: 1.5em; left: 0; right: 0; margin: auto; max-width: 70%; } } @media (min-width: 1200px) { .highlight-card.comparison { max-width: 100%; } } @media (max-width: 991px) { .highlight-card.comparison { max-width: 450px; margin: 25px auto; } } .highlight-card.promoted { border-width: 3px; border-color: var(--color-accent-orange); border-style: solid; } .highlight-card.promoted:before { content: 'Most popular'; border-radius: 4px; background-color: var(--color-accent-orange); background-image: url("../../Assets/images/Icons/svg/fire.svg"); background-repeat: no-repeat; background-position: 4px center; display: inline-block; padding: 0.2em 0.5em 0.2em 30px; position: absolute; left: 50%; transform: translateX(-50%); top: -1em; font-weight: 600; } ul.ticks { text-align: left; padding-inline-start: 15px; list-style: none; } ul.ticks li { background-image: url("../../Assets/images/Icons/svg/tick.svg"); background-repeat: no-repeat; padding: 5px 0px 5px 25px; background-position: 0px 10px; } /* ========================================================================== SEARCH RESULTS Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ /* Search Results ========================================================================== */ .SearchField, .SearchResultSummary .ListItemTitle a { display: block; background-color: var(--color-white); padding: 8px 12px; } .SearchField label { font-size: 120%; color: var(--color-brand); } .SearchResultSummary .ListItemTitle a { text-decoration: none; color: var(--color-brand) !important; margin: -4px -7px 0; } .SearchResultSummary .ListItemTitle a:hover { background-color: var(--color-white); text-decoration: underline; } .RadGrid_MetroTouch .rgAltRow { background: var(--color-white) !important; } .SearchResultSummary .ImageSection { float: left; width: 5em; text-align: center; img { max-width: 4.5em; } } @media (min-width: 768px) { .SearchResultSummary .Description { margin-left: 5.5em; } } div#ctl01_TemplateBody_WebPartManager1_gwpciSearchresults_ciSearchresults_panResults table thead { display:none; } .RadGrid_MetroTouch { border-color: var(--color-white) !important; } .rgPagerCell { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px; .rgArrPart1 { grid-column: span 2 / span 2; justify-self: left; @media(min-width:700px) { grid-column-start: 1; grid-column: span 1 / span 1; justify-self: center; } } .rgNumPart { display:none; grid-column: span 3 / span 3; justify-self: center; @media(min-width:700px) { display: table-row; justify-self: center; } } .rgArrPart2 { grid-column: span 3 / span 3; justify-self: right; @media(min-width:700px) { grid-column-start: 5; grid-column: span 1 / span 1; justify-self: center; } } .rgAdvPart { display: none; justify-self: center; } .rgInfoPart { font-size: 14px; grid-column: span 5 / span 5; grid-row-start: 2; justify-self: center; } } a#ctl01_TemplateBody_WebPartManager1_gwpciSearchresults_ciSearchresults_lstSearchResults_Grid1_ctl00_ctl03_ctl01_ShowAll { display: none; } /* ========================================================================== COMMERCE DISPLAY (event, product, progress tracker, filter panel, cart) Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ /* Event Display ========================================================================== */ .EventSummary { background-color: transparent; } .EventSummary .PhotoArea { padding-right: 2em; padding-bottom: 2em; } .EventSummary .Description { padding-bottom: 2em; } .EventSummary .PhotoArea img { border: 1px solid var(--color-border) !important; } .ProgramGroup .PanelHead, .ProgramGroup .panel-heading { background-color: var(--color-slate); } .ProgramGroup .PanelTitle, .ProgramGroup .panel-title { font-family: var(--font-primary); font-weight: 600; font-size: 120%; line-height: 2em; padding-left: .5em; color: var(--color-white); } .ProgramGroup .PanelBody, .ProgramGroup .panel-body { padding: 0; } /* Product Display ========================================================================== */ .ProductDisplay { background-color: var(--color-white); padding: 1em; } /* Progress Tracker ========================================================================== */ /* These are overrides for the colors and styles defined in 10-UltraWave.css */ /* */ .ProgressTracker .count { font-weight: bold; } .ProgressTracker .SuccessfulMessage, .ProgressTracker .ProgressBar > span { background-color: var(--color-dark); } .ProgressTrackerNavigation:hover { border-radius: 4px; box-shadow: 0 2px 3px 0px var(--color-grey-mid); border-color: var(--color-grey-mid); opacity: 0.9; cursor: pointer; } /* */ /* */ .ProgressTracker2 .ProgressTrackerPanel { background-color: var(--color-slate); } .ProgressTracker2 .ProgressTrackerPanel::after { display: block; clear: both; content: ""; } .ProgressTracker2 .ProgressTrackerPanel .count { color: var(--color-white); font-family: var(--font-primary); font-weight: 500; } .ProgressTracker2 div p { background-color: var(--color-grey-lightest); color: var(--color-accent-green); margin-bottom: 0; } .ProgressTracker2 .ProgressBar { margin: 10px; } .ProgressTracker2 .ProgressBar > span { background-color: var(--color-orange-light); } .ProgressTracker2 .SuccessfulMessage { background-color: var(--color-green-light); color: var(--color-text); } /* */ /* Filter Panel (Query Menu) ========================================================================== */ /* This is an alternate style for the Query Menu filter panel */ .FilterPanel { background-color: var(--color-white); border: none !important; margin-top: -3px; } .FilterPanel .PanelTitle, .FilterPanel .panel-title { background-image: none; padding-left: 0.1em; line-height: normal; margin-left: 0; font-size: 111.17655%; } .FilterPanel .PanelHead.Distinguish, .FilterPanel .panel-heading.Distinguish { border: none; min-height: 1em; } /* Cart Charges ========================================================================== */ .CartCharges { font-size: 1em; background-color: transparent; } .CartCharges .PanelField { border-bottom: none; border-top: none; } .CartCharges .PanelField:first-child, .CartCharges .PanelField .GrandTotal { border-top: none; } .CartCharges .GrandTotal .PanelField { font-weight: 600; } /* ========================================================================== TELERIK OVERRIDES (RadGrid, RadMenu, RadScheduler, RadWindow, etc.) Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ /* RadTabStrip ========================================================================== */ .RadTabStripTop_Metro .rtsLevel1, .RadTabStripTop_Metro .rtsLevel1 .rtsUL, .RadTabStrip_Metro .rtsLevel1, .RadTabStrip_Metro .rtsLevel1 .rtsUL { background-color: var(--color-dark) !important; } .RadTabStripTop_Metro .rtsLevel1 .rtsLink, .RadTabStripTop_Metro .rtsLevel1 .rtsUL .rtsLink, .RadTabStrip_Metro .rtsLevel1 .rtsLink, .RadTabStrip_Metro .rtsLevel1 .rtsUL .rtsLink { text-transform: none; border: none; border-radius: 4px 4px 0 0; } .RadTabStripTop_Metro .rtsLevel1 .rtsSelected, .RadTabStripTop_Metro .rtsLevel1 .rtsLink:hover, .RadTabStripTop_Metro .rtsLevel1 .rtsUL .rtsSelected, .RadTabStripTop_Metro .rtsLevel1 .rtsUL .rtsLink:hover, .RadTabStrip_Metro .rtsLevel1 .rtsSelected, .RadTabStrip_Metro .rtsLevel1 .rtsLink:hover, .RadTabStrip_Metro .rtsLevel1 .rtsUL .rtsSelected, .RadTabStrip_Metro .rtsLevel1 .rtsUL .rtsLink:hover { border-color: var(--color-white); } .RadTabStripTop_Metro .rtsLevel1 .rtsDisabled, .RadTabStripTop_Metro .rtsLevel1 .rtsDisabled:hover, .RadTabStripTop_Metro .rtsLevel1 .rtsUL .rtsDisabled, .RadTabStripTop_Metro .rtsLevel1 .rtsUL .rtsDisabled:hover, .RadTabStrip_Metro .rtsLevel1 .rtsDisabled, .RadTabStrip_Metro .rtsLevel1 .rtsDisabled:hover, .RadTabStrip_Metro .rtsLevel1 .rtsUL .rtsDisabled, .RadTabStrip_Metro .rtsLevel1 .rtsUL .rtsDisabled:hover { color: var(--color-grey-200); border-color: transparent; } .RadTabStrip_MetroTouch.RadTabStrip_MetroTouch { font-family: var(--font-primary) !important; font-weight: inherit; font-size: 1.22em !important; clear: both; } html .RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsLevel1 .rtsSelected, html .RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsLevel1 .rtsSelected:hover { border-color: var(--color-dark); background-color: var(--color-dark); } @media (max-width: 600px) { .RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsLI, .RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsLink, .RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsUL, .RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsLevel { float: none; width: 100%; display: block; } html .RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsLevel1 .rtsLink { margin: 0; } } @media (max-width: 767px) { .RadTabStripVertical.RadTabStrip_MetroTouch.RadTabStrip_MetroTouch { display: block; } .RadTabStripVertical.RadTabStrip_MetroTouch.RadTabStrip_MetroTouch + .RadMultiPage { border-top-width: 0; } .RadTabStripVertical.RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsLink, .RadTabStripVertical.RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsIn { text-align: center; } } @media (min-width: 601px) and (max-width: 767px) { .RadTabStripVertical.RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsLI { display: inline-block; float: left; } } /* On the account page, when secondary nav is present, display the tabs on top */ @media (min-width: 768px) { .account-page-with-banner .has-secondary-col .tabs-wrapper.tabs-left, .account-page-with-banner .has-secondary-col .tags-wrapper.tabs-right { display: block; } .account-page-with-banner .has-secondary-col .RadTabStripVertical.RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsLI { display: inline-block; float: left; } } .RadTabStrip, .RadTabStripVertical { padding: 10px 10px 0 10px; } .RadTabStrip_MetroTouch.RadTabStripBottom_MetroTouch .rtsLevel1 { border: none; } /* RadTabStrip - Content Collection Organiser custom style for dropdown version on account page ========================================================================== */ .stacked-tabs .RadMultiPage { background: transparent; border-radius: 0px; box-shadow: none; border: 0; } .stacked-tabs .RadMultiPage .RadMultiPage { background: var(--color-white); border-radius: 0 4px 4px 4px; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); margin-bottom: 40px; border: 1px solid var(--color-border); border-top: 0; } .stacked-tabs .cco > .RadTabStrip_MetroTouch.RadTabStrip, .stacked-tabs .cco > .RadTabStrip_MetroTouch.RadTabStripVertical .rtsUL { background-color: transparent; } .stacked-tabs .select-tab { width: 100%; padding: 10px 15px; background: var(--color-brand); border-radius: 4px; position: relative; z-index: 22; color: var(--color-white); font-weight: 600; margin-bottom: 40px; font-size: 1.11em; line-height: normal; display: block; } .stacked-tabs .select-tab:hover, .stacked-tabs .select-tab:focus { cursor: pointer; text-decoration: none; } .stacked-tabs .select-tab:before { content: ''; display: inline-block; width: 30px; height: 30px; background-color: var(--color-white); vertical-align: middle; margin-right: 10px; -webkit-mask-image: url(images/auxIcons.svg#menu); mask-image: url(images/auxIcons.svg#menu); -webkit-mask-size: 24px 24px; mask-size: 24px 24px; -webkit-mask-position: center 5px; mask-position: center 5px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .RadTabStrip .rtsLevel1.stacked-list { overflow: visible; border: 0 !important; } .RadTabStrip .rtsLevel1.stacked-list .rtsUL { background: var(--color-white); display: block; width: auto; border-radius: 0px 0px 4px 4px; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); border: 1px solid var(--color-border); position: absolute; top: 50px; left: 10px; right: 10px; z-index: 21; } .RadTabStrip .rtsLevel1.stacked-list .rtsLI { float: none; } .RadTabStrip .rtsLevel1.stacked-list a.rtsLink, .RadTabStrip .rtsLevel1.stacked-list a.rtsLink.rtsSelected, .RadTabStrip .rtsLevel1.stacked-list .rtsFirst a.rtsLink, .RadTabStrip .rtsLevel1.stacked-list .rtsFirst a.rtsLink.rtsSelected { text-align: left; margin: 0px; border-radius: 0px; background-color: var(--color-white) !important; color: var(--color-text) !important; border: 0; box-shadow: none; font-size: 1em; font-weight: 600; text-transform: none; } .RadTabStrip .rtsLevel1.stacked-list a.rtsLink:hover, .RadTabStrip .rtsLevel1.stacked-list a.rtsLink:focus, .RadTabStrip .rtsLevel1.stacked-list a.rtsLink:active, .RadTabStrip .rtsLevel1.stacked-list a.rtsLink.rtsSelected:hover, .RadTabStrip .rtsLevel1.stacked-list a.rtsLink.rtsSelected:focus, .RadTabStrip .rtsLevel1.stacked-list a.rtsLink.rtsSelected:active, .RadTabStrip .rtsLevel1.stacked-list .rtsFirst a.rtsLink:hover, .RadTabStrip .rtsLevel1.stacked-list .rtsFirst a.rtsLink:focus, .RadTabStrip .rtsLevel1.stacked-list .rtsFirst a.rtsLink:active, .RadTabStrip .rtsLevel1.stacked-list .rtsFirst a.rtsLink.rtsSelected:hover, .RadTabStrip .rtsLevel1.stacked-list .rtsFirst a.rtsLink.rtsSelected:focus, .RadTabStrip .rtsLevel1.stacked-list .rtsFirst a.rtsLink.rtsSelected:active { background: var(--color-grey-lightest) !important; color: var(--color-brand) !important; box-shadow: none; } /* RadToolTip ========================================================================== */ /* Currently used by the QueryMenu iPart */ .RadToolTip_Telerik a:hover { background-color: var(--color-slate); } /* RadGrid ========================================================================== */ .RadGrid.RadGrid_MetroTouch, .RadGrid.RadGrid_Metro { color: var(--color-text); } .RadGrid.RadGrid_MetroTouch .rgHeader, .RadGrid.RadGrid_MetroTouch .rgRow td, .RadGrid.RadGrid_MetroTouch .rgAltRow td, .RadGrid.RadGrid_MetroTouch .rgEditRow > td, .RadGrid.RadGrid_Metro .rgHeader, .RadGrid.RadGrid_Metro .rgRow td, .RadGrid.RadGrid_Metro .rgAltRow td, .RadGrid.RadGrid_Metro .rgEditRow > td { border-left-color: transparent; } .RadGrid.RadGrid_MetroTouch td.rgPagerCell, .RadGrid.RadGrid_Metro td.rgPagerCell { border-width: 0; } .RadGrid.RadGrid_MetroTouch .rgCommandRow, .RadGrid.RadGrid_Metro .rgCommandRow { background-color: transparent; } .RadGrid.RadGrid_MetroTouch .rgPagerCell .rgNumPart a.rgCurrentPage, .RadGrid.RadGrid_MetroTouch .rgPagerCell .rgNumPart a.rgCurrentPage, .RadGrid.RadGrid_MetroTouch .rgPagerCell .rgNumPart a.rgCurrentPage:hover, .RadGrid.RadGrid_MetroTouch .rgPagerCell .rgNumPart a:active, .RadGrid.RadGrid_MetroTouch .rgPagerCell .rgPagePrev:active, .RadGrid.RadGrid_MetroTouch .rgPagerCell .rgPageNext:active, .RadGrid.RadGrid_MetroTouch .rgPagerCell .rgPageFirst:active, .RadGrid.RadGrid_MetroTouch .rgPagerCell .rgPageLast:active, .RadGrid.RadGrid_MetroTouch .rgPager .rgPagerCell .rgPagerButton, .RadGrid.RadGrid_MetroTouch .rgPager .rgPagerCell .rgPagerButton:hover, .RadGrid.RadGrid_MetroTouch .rgPager .rgPagerCell .rgActionButton:hover, .RadGrid.RadGrid_Metro .rgPagerCell .rgNumPart a.rgCurrentPage, .RadGrid.RadGrid_Metro .rgPagerCell .rgNumPart a.rgCurrentPage, .RadGrid.RadGrid_Metro .rgPagerCell .rgNumPart a.rgCurrentPage:hover, .RadGrid.RadGrid_Metro .rgPagerCell .rgNumPart a:active, .RadGrid.RadGrid_Metro .rgPagerCell .rgPagePrev:active, .RadGrid.RadGrid_Metro .rgPagerCell .rgPageNext:active, .RadGrid.RadGrid_Metro .rgPagerCell .rgPageFirst:active, .RadGrid.RadGrid_Metro .rgPagerCell .rgPageLast:active, .RadGrid.RadGrid_Metro .rgPager .rgPagerCell .rgPagerButton, .RadGrid.RadGrid_Metro .rgPager .rgPagerCell .rgPagerButton:hover, .RadGrid.RadGrid_Metro .rgPager .rgPagerCell .rgActionButton:hover { background-color: var(--color-dark); border-color: var(--color-dark); text-decoration: none; color: var(--color-white) !important; } .RadGrid.RadGrid_MetroTouch .rgNumPart a, .RadGrid.RadGrid_MetroTouch .rgPagerCell .rgNumPart a, .RadGrid.RadGrid_Metro .rgNumPart a, .RadGrid.RadGrid_Metro .rgPagerCell .rgNumPart a { border-radius: 100%; line-height: 28px; padding: 0; border-color: transparent; } .RadGrid.RadGrid_MetroTouch .rgPager .rgPagerButton, .RadGrid.RadGrid_Metro .rgPager .rgPagerButton { border-radius: 4px; } .RadGrid.RadGrid_MetroTouch input.rgAdd, .RadGrid.RadGrid_MetroTouch input.rgRefresh, .RadGrid.RadGrid_MetroTouch .rgSave, .RadGrid.RadGrid_MetroTouch .rgCommandRow .rgCancel, .RadGrid.RadGrid_Metro input.rgAdd, .RadGrid.RadGrid_Metro input.rgRefresh, .RadGrid.RadGrid_Metro .rgSave, .RadGrid.RadGrid_Metro .rgCommandRow .rgCancel { background-color: var(--color-dark); } .RadGrid.RadGrid_MetroTouch input.rgAdd:hover, .RadGrid.RadGrid_MetroTouch input.rgRefresh:hover, .RadGrid.RadGrid_MetroTouch .rgSave:hover, .RadGrid.RadGrid_MetroTouch .rgCommandRow .rgCancel:hover, .RadGrid.RadGrid_Metro input.rgAdd:hover, .RadGrid.RadGrid_Metro input.rgRefresh:hover, .RadGrid.RadGrid_Metro .rgSave:hover, .RadGrid.RadGrid_Metro .rgCommandRow .rgCancel:hover { background-color: var(--color-white); } .RadGrid.RadGrid_MetroTouch .rgInfoPart, .RadGrid.RadGrid_Metro .rgInfoPart { color: var(--color-text); } .RadGrid.RadGrid_MetroTouch .rgMasterTable, .RadGrid.RadGrid_Metro .rgMasterTable { background-color: var(--color-white); } .RadGrid.RadGrid_MetroTouch .rgHeader, .RadGrid.RadGrid_MetroTouch .rgHeader:first-child, .RadGrid.RadGrid_MetroTouch th.rgResizeCol, .RadGrid.RadGrid_MetroTouch th.rgResizeCol:first-child, .RadGrid.RadGrid_MetroTouch .rgRow td, .RadGrid.RadGrid_MetroTouch .rgRow td:first-child, .RadGrid.RadGrid_MetroTouch .rgAltRow td, .RadGrid.RadGrid_MetroTouch .rgAltRow td:first-child, .RadGrid.RadGrid_MetroTouch .rgEditRow > td, .RadGrid.RadGrid_MetroTouch .rgEditRow > td:first-child, .RadGrid.RadGrid_MetroTouch .rgFooter td, .RadGrid.RadGrid_MetroTouch .rgFooter td:first-child, .RadGrid.RadGrid_MetroTouch .rgFilterRow td, .RadGrid.RadGrid_MetroTouch .rgFilterRow td:first-child, .RadGrid.RadGrid_MetroTouch .rgNoRecords td, .RadGrid.RadGrid_MetroTouch .rgNoRecords td:first-child, .RadGrid.RadGrid_Metro .rgHeader, .RadGrid.RadGrid_Metro .rgHeader:first-child, .RadGrid.RadGrid_Metro th.rgResizeCol, .RadGrid.RadGrid_Metro th.rgResizeCol:first-child, .RadGrid.RadGrid_Metro .rgRow td, .RadGrid.RadGrid_Metro .rgRow td:first-child, .RadGrid.RadGrid_Metro .rgAltRow td, .RadGrid.RadGrid_Metro .rgAltRow td:first-child, .RadGrid.RadGrid_Metro .rgEditRow > td, .RadGrid.RadGrid_Metro .rgEditRow > td:first-child, .RadGrid.RadGrid_Metro .rgFooter td, .RadGrid.RadGrid_Metro .rgFooter td:first-child, .RadGrid.RadGrid_Metro .rgFilterRow td, .RadGrid.RadGrid_Metro .rgFilterRow td:first-child, .RadGrid.RadGrid_Metro .rgNoRecords td, .RadGrid.RadGrid_Metro .rgNoRecords td:first-child { padding: 7px 12px; } .RadGrid.RadGrid_MetroTouch .rgRow td.rgExpandCol, .RadGrid.RadGrid_MetroTouch .rgRow td.rgExpandCol:first-child, .RadGrid.RadGrid_MetroTouch .rgAltRow td.rgExpandCol, .RadGrid.RadGrid_MetroTouch .rgAltRow td.rgExpandCol:first-child, .RadGrid.RadGrid_Metro .rgRow td.rgExpandCol, .RadGrid.RadGrid_Metro .rgRow td.rgExpandCol:first-child, .RadGrid.RadGrid_Metro .rgAltRow td.rgExpandCol, .RadGrid.RadGrid_Metro .rgAltRow td.rgExpandCol:first-child { /* reset the padding for expand/collapse column */ padding-left: 0; padding-right: 0; } .RadGrid.RadGrid_MetroTouch .rgGroupPanel, .RadGrid.RadGrid_MetroTouch .rgGroupPanel caption, .RadGrid.RadGrid_Metro .rgGroupPanel, .RadGrid.RadGrid_Metro .rgGroupPanel caption { background-color: var(--color-white); } .RadGrid.RadGrid_MetroTouch .rgActiveRow td, .RadGrid.RadGrid_MetroTouch .rgActiveRow td.rgSorted, .RadGrid.RadGrid_MetroTouch .rgSelectedRow td, .RadGrid.RadGrid_MetroTouch .rgSelectedRow td.rgSorted, .RadGrid.RadGrid_MetroTouch .rgMasterTable .rgActiveCell, .RadGrid.RadGrid_Metro .rgActiveRow td, .RadGrid.RadGrid_Metro .rgActiveRow td.rgSorted, .RadGrid.RadGrid_Metro .rgSelectedRow td, .RadGrid.RadGrid_Metro .rgSelectedRow td.rgSorted, .RadGrid.RadGrid_Metro .rgMasterTable .rgActiveCell { border-color: var(--color-white); } * + html .RadGrid.RadGrid_MetroTouch .rgSelectedRow .rgSorted, * html .RadGrid.RadGrid_MetroTouch .rgSelectedRow .rgSorted, * + html .RadGrid.RadGrid_Metro .rgSelectedRow .rgSorted, * html .RadGrid.RadGrid_Metro .rgSelectedRow .rgSorted { background-color: var(--color-white); } .RadGrid.RadGrid_MetroTouch .rgMasterTable .rgSelectedCell, .RadGrid.RadGrid_MetroTouch .rgSelectedRow, .RadGrid.RadGrid_MetroTouch td.rgEditRow .rgSelectedRow, .RadGrid.RadGrid_MetroTouch .rgSelectedRow td.rgSorted, .RadGrid.RadGrid_MetroTouch th.rgSorted, .RadGrid.RadGrid_Metro .rgMasterTable .rgSelectedCell, .RadGrid.RadGrid_Metro .rgSelectedRow, .RadGrid.RadGrid_Metro td.rgEditRow .rgSelectedRow, .RadGrid.RadGrid_Metro .rgSelectedRow td.rgSorted, .RadGrid.RadGrid_Metro th.rgSorted, { background-color: var(--color-white); border-color: var(--color-white); text-decoration: none; } .RadGrid.RadGrid_MetroTouch .rgMasterTable .rgSelectedCell a, .RadGrid.RadGrid_MetroTouch .rgSelectedRow a, .RadGrid.RadGrid_MetroTouch td.rgEditRow .rgSelectedRow a, .RadGrid.RadGrid_MetroTouch .rgSelectedRow td.rgSorted a, .RadGrid.RadGrid_MetroTouch th.rgSorted a, .RadGrid.RadGrid_Metro .rgMasterTable .rgSelectedCell a, .RadGrid.RadGrid_Metro .rgSelectedRow a, .RadGrid.RadGrid_Metro td.rgEditRow .rgSelectedRow a, .RadGrid.RadGrid_Metro .rgSelectedRow td.rgSorted a, .RadGrid.RadGrid_Metro th.rgSorted a, .RadGrid_MetroTouch .rgSelectedRow { color: var(--color-ink) !important; } .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton, .RadGrid.RadGrid_MetroTouch .rgFooter .btn, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton, .RadGrid.RadGrid_Metro .rgFooter a.TextButton, .RadGrid.RadGrid_Metro .rgFooter .btn, .RadGrid.RadGrid_Metro .rgFooter .TextButton, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton { background-color: var(--color-grey-light); border-color: var(--color-grey); } .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton, .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton:hover, .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton:focus, .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton:active, .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton:visited, .RadGrid.RadGrid_MetroTouch .rgFooter .btn, .RadGrid.RadGrid_MetroTouch .rgFooter .btn:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .btn:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .btn:active, .RadGrid.RadGrid_MetroTouch .rgFooter .btn:visited, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton:active, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton:visited, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton:active, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton:visited, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:active, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:visited, .RadGrid.RadGrid_Metro .rgFooter a.TextButton, .RadGrid.RadGrid_Metro .rgFooter a.TextButton:hover, .RadGrid.RadGrid_Metro .rgFooter a.TextButton:focus, .RadGrid.RadGrid_Metro .rgFooter a.TextButton:active, .RadGrid.RadGrid_Metro .rgFooter a.TextButton:visited, .RadGrid.RadGrid_Metro .rgFooter .btn, .RadGrid.RadGrid_Metro .rgFooter .btn:hover, .RadGrid.RadGrid_Metro .rgFooter .btn:focus, .RadGrid.RadGrid_Metro .rgFooter .btn:active, .RadGrid.RadGrid_Metro .rgFooter .btn:visited, .RadGrid.RadGrid_Metro .rgFooter .TextButton, .RadGrid.RadGrid_Metro .rgFooter .TextButton:hover, .RadGrid.RadGrid_Metro .rgFooter .TextButton:focus, .RadGrid.RadGrid_Metro .rgFooter .TextButton:active, .RadGrid.RadGrid_Metro .rgFooter .TextButton:visited, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton:hover, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton:focus, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton:active, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton:visited, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:hover, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:focus, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:active, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:visited { text-decoration: none; } .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton, .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton:visited, .RadGrid.RadGrid_MetroTouch .rgFooter .btn, .RadGrid.RadGrid_MetroTouch .rgFooter .btn:visited, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton:visited, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton:visited, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:visited, .RadGrid.RadGrid_Metro .rgFooter a.TextButton, .RadGrid.RadGrid_Metro .rgFooter a.TextButton:visited, .RadGrid.RadGrid_Metro .rgFooter .btn, .RadGrid.RadGrid_Metro .rgFooter .btn:visited, .RadGrid.RadGrid_Metro .rgFooter .TextButton, .RadGrid.RadGrid_Metro .rgFooter .TextButton:visited, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton:visited, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:visited { color: var(--color-text); } .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton:hover, .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton:focus, .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton:active, .RadGrid.RadGrid_MetroTouch .rgFooter .btn:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .btn:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .btn:active, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton:active, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton:active, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:active, .RadGrid.RadGrid_Metro .rgFooter a.TextButton:hover, .RadGrid.RadGrid_Metro .rgFooter a.TextButton:focus, .RadGrid.RadGrid_Metro .rgFooter a.TextButton:active, .RadGrid.RadGrid_Metro .rgFooter .btn:hover, .RadGrid.RadGrid_Metro .rgFooter .btn:focus, .RadGrid.RadGrid_Metro .rgFooter .btn:active, .RadGrid.RadGrid_Metro .rgFooter .TextButton:hover, .RadGrid.RadGrid_Metro .rgFooter .TextButton:focus, .RadGrid.RadGrid_Metro .rgFooter .TextButton:active, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton:hover, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton:focus, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton:active, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:hover, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:focus, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:active { color: var(--color-text); text-decoration: none; background-color: var(--color-grey-400); border-color: var(--color-grey-400); } .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton:active, .RadGrid.RadGrid_MetroTouch .rgFooter .btn:active, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton:active, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton:active, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:active, .RadGrid.RadGrid_Metro .rgFooter a.TextButton:active, .RadGrid.RadGrid_Metro .rgFooter .btn:active, .RadGrid.RadGrid_Metro .rgFooter .TextButton:active, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton:active, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:active { background-image: none; } .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton:disabled, .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton:disabled:hover, .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton:disabled:focus, .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton:disabled:active, .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton.disabled, .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton.disabled:hover, .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton.disabled:focus, .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton.disabled:active, .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton.aspNetDisabled, .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton.aspNetDisabled:hover, .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton.aspNetDisabled:focus, .RadGrid.RadGrid_MetroTouch .rgFooter a.TextButton.aspNetDisabled:active, .RadGrid.RadGrid_MetroTouch .rgFooter .btn:disabled, .RadGrid.RadGrid_MetroTouch .rgFooter .btn:disabled:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .btn:disabled:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .btn:disabled:active, .RadGrid.RadGrid_MetroTouch .rgFooter .btn.disabled, .RadGrid.RadGrid_MetroTouch .rgFooter .btn.disabled:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .btn.disabled:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .btn.disabled:active, .RadGrid.RadGrid_MetroTouch .rgFooter .btn.aspNetDisabled, .RadGrid.RadGrid_MetroTouch .rgFooter .btn.aspNetDisabled:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .btn.aspNetDisabled:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .btn.aspNetDisabled:active, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton:disabled, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton:disabled:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton:disabled:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton:disabled:active, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton.disabled, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton.disabled:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton.disabled:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton.disabled:active, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton.aspNetDisabled, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton.aspNetDisabled:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton.aspNetDisabled:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .TextButton.aspNetDisabled:active, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton:disabled, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton:disabled:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton:disabled:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton:disabled:active, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton.disabled, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton.disabled:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton.disabled:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton.disabled:active, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton.aspNetDisabled, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton.aspNetDisabled:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton.aspNetDisabled:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUpload.RadUpload .ruButton.aspNetDisabled:active, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:disabled, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:disabled:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:disabled:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:disabled:active, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton.disabled, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton.disabled:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton.disabled:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton.disabled:active, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton.aspNetDisabled, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton.aspNetDisabled:hover, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton.aspNetDisabled:focus, .RadGrid.RadGrid_MetroTouch .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton.aspNetDisabled:active, .RadGrid.RadGrid_Metro .rgFooter a.TextButton:disabled, .RadGrid.RadGrid_Metro .rgFooter a.TextButton:disabled:hover, .RadGrid.RadGrid_Metro .rgFooter a.TextButton:disabled:focus, .RadGrid.RadGrid_Metro .rgFooter a.TextButton:disabled:active, .RadGrid.RadGrid_Metro .rgFooter a.TextButton.disabled, .RadGrid.RadGrid_Metro .rgFooter a.TextButton.disabled:hover, .RadGrid.RadGrid_Metro .rgFooter a.TextButton.disabled:focus, .RadGrid.RadGrid_Metro .rgFooter a.TextButton.disabled:active, .RadGrid.RadGrid_Metro .rgFooter a.TextButton.aspNetDisabled, .RadGrid.RadGrid_Metro .rgFooter a.TextButton.aspNetDisabled:hover, .RadGrid.RadGrid_Metro .rgFooter a.TextButton.aspNetDisabled:focus, .RadGrid.RadGrid_Metro .rgFooter a.TextButton.aspNetDisabled:active, .RadGrid.RadGrid_Metro .rgFooter .btn:disabled, .RadGrid.RadGrid_Metro .rgFooter .btn:disabled:hover, .RadGrid.RadGrid_Metro .rgFooter .btn:disabled:focus, .RadGrid.RadGrid_Metro .rgFooter .btn:disabled:active, .RadGrid.RadGrid_Metro .rgFooter .btn.disabled, .RadGrid.RadGrid_Metro .rgFooter .btn.disabled:hover, .RadGrid.RadGrid_Metro .rgFooter .btn.disabled:focus, .RadGrid.RadGrid_Metro .rgFooter .btn.disabled:active, .RadGrid.RadGrid_Metro .rgFooter .btn.aspNetDisabled, .RadGrid.RadGrid_Metro .rgFooter .btn.aspNetDisabled:hover, .RadGrid.RadGrid_Metro .rgFooter .btn.aspNetDisabled:focus, .RadGrid.RadGrid_Metro .rgFooter .btn.aspNetDisabled:active, .RadGrid.RadGrid_Metro .rgFooter .TextButton:disabled, .RadGrid.RadGrid_Metro .rgFooter .TextButton:disabled:hover, .RadGrid.RadGrid_Metro .rgFooter .TextButton:disabled:focus, .RadGrid.RadGrid_Metro .rgFooter .TextButton:disabled:active, .RadGrid.RadGrid_Metro .rgFooter .TextButton.disabled, .RadGrid.RadGrid_Metro .rgFooter .TextButton.disabled:hover, .RadGrid.RadGrid_Metro .rgFooter .TextButton.disabled:focus, .RadGrid.RadGrid_Metro .rgFooter .TextButton.disabled:active, .RadGrid.RadGrid_Metro .rgFooter .TextButton.aspNetDisabled, .RadGrid.RadGrid_Metro .rgFooter .TextButton.aspNetDisabled:hover, .RadGrid.RadGrid_Metro .rgFooter .TextButton.aspNetDisabled:focus, .RadGrid.RadGrid_Metro .rgFooter .TextButton.aspNetDisabled:active, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton:disabled, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton:disabled:hover, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton:disabled:focus, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton:disabled:active, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton.disabled, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton.disabled:hover, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton.disabled:focus, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton.disabled:active, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton.aspNetDisabled, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton.aspNetDisabled:hover, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton.aspNetDisabled:focus, .RadGrid.RadGrid_Metro .rgFooter .RadUpload.RadUpload .ruButton.aspNetDisabled:active, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:disabled, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:disabled:hover, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:disabled:focus, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton:disabled:active, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton.disabled, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton.disabled:hover, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton.disabled:focus, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton.disabled:active, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton.aspNetDisabled, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton.aspNetDisabled:hover, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton.aspNetDisabled:focus, .RadGrid.RadGrid_Metro .rgFooter .RadUploadProgressArea.RadUploadProgressArea .ruButton.aspNetDisabled:active { color: var(--color-text); background-color: var(--color-grey); border-color: var(--color-grey); } /* RadComboBox ========================================================================= */ .RadComboBox .rcbActionButton .t-font-icon { font: 16px/1 "TelerikWebUI"; } /* RadDataPager ========================================================================== */ .RadDataPager.RadDataPager_MetroTouch, .RadDataPager.RadDataPager_Metro { border: none; background-color: transparent; } .RadDataPager.RadDataPager_MetroTouch .rdpNumPart a.rdpCurrentPage, .RadDataPager.RadDataPager_MetroTouch .rdpNumPart a.rdpCurrentPage:hover, .RadDataPager.RadDataPager_MetroTouch .rdpPageFirst:hover, .RadDataPager.RadDataPager_MetroTouch .rdpPagePrev:hover, .RadDataPager.RadDataPager_MetroTouch .rdpPageNext:hover, .RadDataPager.RadDataPager_MetroTouch .rdpPageLast:hover, .RadDataPager.RadDataPager_MetroTouch .rdpPagerButton, .RadDataPager.RadDataPager_Metro .rdpNumPart a.rdpCurrentPage, .RadDataPager.RadDataPager_Metro .rdpNumPart a.rdpCurrentPage:hover, .RadDataPager.RadDataPager_Metro .rdpPageFirst:hover, .RadDataPager.RadDataPager_Metro .rdpPagePrev:hover, .RadDataPager.RadDataPager_Metro .rdpPageNext:hover, .RadDataPager.RadDataPager_Metro .rdpPageLast:hover, .RadDataPager.RadDataPager_Metro .rdpPagerButton { background-color: var(--color-dark); border-color: var(--color-dark); } /* RadScheduler ========================================================================== */ .RadScheduler.RadScheduler_Metro .rsAptIn { border-top: none; } .RadScheduler.RadScheduler_Metro .rsHeader { border-color: var(--color-dark); background-color: var(--color-dark); } .RadScheduler.RadScheduler_Metro .rsHeader ul a { border-color: var(--color-dark); } .RadScheduler.RadScheduler_Metro .rsHeader h2 { font-family: var(--font-primary); font-weight: bold; color: var(--color-white); text-transform: none; border-bottom: none; } /* RadMenu ========================================================================== */ .RadMenu.RadMenu_Metro.RadMenu, .RadMenu.RadMenu_MetroTouch.RadMenu { font-family: inherit; font-weight: normal; } .RadMenu.RadMenu_Metro, .RadMenu.RadMenu_Metro .rmRootLink, .RadMenu.RadMenu_MetroTouch, .RadMenu.RadMenu_MetroTouch .rmRootLink { text-transform: none; color: var(--color-white); } .RadMenu.RadMenu_Metro div.rmRootGroup, .RadMenu.RadMenu_Metro ul.rmRootGroup, .RadMenu.RadMenu_MetroTouch div.rmRootGroup, .RadMenu.RadMenu_MetroTouch ul.rmRootGroup { background-color: var(--color-accent-green); } .RadMenu.RadMenu_Metro .rmRootLink, .RadMenu.RadMenu_MetroTouch .rmRootLink { border-color: var(--color-accent-green); } .RadMenu.RadMenu_Metro .rmDisabled, .RadMenu.RadMenu_Metro .rmDisabled:hover, .RadMenu.RadMenu_MetroTouch .rmDisabled, .RadMenu.RadMenu_MetroTouch .rmDisabled:hover { border-color: var(--color-accent-green); } .RadMenu.RadMenu_Metro .rmGroup .rmFocused, .RadMenu.RadMenu_Metro .rmGroup .rmFocused:hover, .RadMenu.RadMenu_Metro .rmGroup .rmSelected, .RadMenu.RadMenu_Metro .rmGroup .rmSelected:hover, .RadMenu.RadMenu_Metro .rmGroup .rmLink.rmSelected, .RadMenu.RadMenu_Metro .rmGroup .rmLink.rmSelected:hover, .RadMenu.RadMenu_Metro .rmGroup .rmExpanded, .RadMenu.RadMenu_Metro .rmGroup .rmExpanded:hover, .RadMenu.RadMenu_MetroTouch .rmGroup .rmFocused, .RadMenu.RadMenu_MetroTouch .rmGroup .rmFocused:hover, .RadMenu.RadMenu_MetroTouch .rmGroup .rmSelected, .RadMenu.RadMenu_MetroTouch .rmGroup .rmSelected:hover, .RadMenu.RadMenu_MetroTouch .rmGroup .rmLink.rmSelected, .RadMenu.RadMenu_MetroTouch .rmGroup .rmLink.rmSelected:hover, .RadMenu.RadMenu_MetroTouch .rmGroup .rmExpanded, .RadMenu.RadMenu_MetroTouch .rmGroup .rmExpanded:hover { border-color: var(--color-accent-green); background-color: var(--color-accent-green); color: var(--color-white) !important; } .RadMenu_MetroTouch .rmRootGroup .rmLeftImage { margin-top: 10px !important; } .RadMenu .rmGroup, .RadMenu .rmRootGroup, .RadMenu .rmMultiColumn, .RadMenu .rmPopup { box-sizing: content-box; border-width: 0px !important; border-style: solid; background-position: 0 0; position: relative; left: 0; top: 0; } .RadMenu .rmRootGroup.rmHorizontal > .rmItem, .RadMenu .rmRootGroup.rmHorizontal > .rmRootScrollGroup > .rmItem { border-width: 0px !important; border-style: solid; } .RadMenu .rmRootGroup .rmRootLink, .RadMenu .rmGroup .rmLink { padding: 0px !important; } .RadMenu .rmRootGroup .rmRootLink .rmToggle { margin-right: 2px !important; margin-left: -12px !important; } .RadMenu .rmGroup:before, .RadMenu .rmMultiColumn:before, .RadMenu .rmScrollWrap > .rmHorizontal:before, .RadMenu .rmScrollWrap > .rmVertical:before { display: none !important; } /* RadWindow ========================================================================== */ .RadWindow.RadWindow_MetroTouch .rwTitleRow em { font-family: inherit; font-weight: normal; margin: 8px 10px; } .RadWindow.RadWindow_MetroTouch .rwTitleRow .rwTitlebar, .RadWindow.RadWindow_MetroTouch .rwTitleRow .rwTopLeft, .RadWindow.RadWindow_MetroTouch .rwTitleRow .rwTopRight { background-color: var(--color-dark); } .RadWindow.RadWindow_MetroTouch .rwTitleRow td.rwWindowContent a.rwPopupButton:active, .RadWindow.RadWindow_MetroTouch .rwTitleRow td.rwWindowContent a.rwPopupButton:focus { border-color: var(--color-dark); background-color: var(--color-dark); } .RadWindow.RadWindow_MetroTouch .rwTable ul.rwControlButtons { margin-top: 7px; } .RadWindow.RadWindow_MetroTouch .rwControlButtons a:focus { border-color: var(--color-white); border-radius: 50%; /* override setting from UltraWave */ outline: none; } .RadWindow.RadWindow_MetroTouch td.rwBodyLeft, .RadWindow.RadWindow_MetroTouch td.rwBodyRight, .RadWindow.RadWindow_MetroTouch .rwFooterCenter, .RadWindow.RadWindow_MetroTouch .rwFooterLeft, .RadWindow.RadWindow_MetroTouch .rwFooterRight { background: var(--color-grey-lightest); } .RadWindow.RadWindow_Metro .rwTitlebar, .RadWindow.RadWindow_Metro .rwTopLeft, .RadWindow.RadWindow_Metro .rwTopRight, .RadWindow.RadWindow_Metro .rwTopResize, .RadWindow.RadWindow_Metro .rwControlButtons a { background-color: var(--color-dark); } .RadWindow.RadWindow_Metro .rwControlButtons a { border-color: var(--color-dark); } .RadWindow.RadWindow_Metro .rwControlButtons a:focus { /* give the refresh, expand, close buttons an outline when focused */ box-shadow: 0 0 0 1px rgba(var(--overlay-light-rgb), 0.7); /* needed for IE9 compability */ border-collapse: separate; /* override setting from UltraWave */ outline: none; } .RadWindow.RadWindow_Metro table.rwTitlebarControls em { text-transform: none; } /* RadTreeView ========================================================================== */ .RadTreeView.RadTreeView_Vista .rtLI { padding: 0; } .RadTreeView.RadTreeView_Vista .rtPlus, .RadTreeView.RadTreeView_Vista .rtMinus { margin: 5px 6px 0 -17px; width: 11px; height: 11px; border-width: 0; left: auto; top: auto; } /* RadPicker ========================================================================== */ /* Date and Time selectors */ .RadCalendar.RadCalendar_Metro, .RadCalendar.RadCalendar_Metro .rcMainTable, .RadCalendar.RadCalendar_MetroTouch, .RadCalendar.RadCalendar_MetroTouch .rcMainTable { font-family: inherit; font-weight: inherit; } .RadCalendar.RadCalendar_Metro .rcFastPrev:hover, .RadCalendar.RadCalendar_Metro .rcPrev:hover, .RadCalendar.RadCalendar_Metro .rcNext:hover, .RadCalendar.RadCalendar_Metro .rcFastNext:hover, .RadCalendar.RadCalendar_MetroTouch .rcFastPrev:hover, .RadCalendar.RadCalendar_MetroTouch .rcPrev:hover, .RadCalendar.RadCalendar_MetroTouch .rcNext:hover, .RadCalendar.RadCalendar_MetroTouch .rcFastNext:hover { border-color: var(--color-dark); } .RadCalendar.RadCalendar_Metro .rcFastPrev:hover:before, .RadCalendar.RadCalendar_Metro .rcPrev:hover:before, .RadCalendar.RadCalendar_Metro .rcNext:hover:before, .RadCalendar.RadCalendar_Metro .rcFastNext:hover:before, .RadCalendar.RadCalendar_MetroTouch .rcFastPrev:hover:before, .RadCalendar.RadCalendar_MetroTouch .rcPrev:hover:before, .RadCalendar.RadCalendar_MetroTouch .rcNext:hover:before, .RadCalendar.RadCalendar_MetroTouch .rcFastNext:hover:before { color: var(--color-dark); } .RadCalendar.RadCalendar_Metro .rcRow .rcToday a, .RadCalendar.RadCalendar_MetroTouch .rcRow .rcToday a { border-color: var(--color-dark); } .RadCalendar.RadCalendar_Metro .rcMain .rcRow .rcSelected a, .RadCalendar.RadCalendar_MetroTouch .rcMain .rcRow .rcSelected a { border-color: var(--color-dark); background: var(--color-dark); } .RadCalendar.RadCalendar_MetroTouch .rcRow a, .RadCalendar.RadCalendar_MetroTouch .rcRow span { /* The Sunday column is not rendering correctly because it's in a instead of a . This corrects the issue. */ display: block; padding: .08em .4em; text-decoration: none; outline: 0; } .RadCalendar.RadCalendar_MetroTouch .rcMain .rcRow th { font-size: 100%; padding: 0; } .RadCalendar.RadCalendar_Metro .rcRow a, .RadCalendar.RadCalendar_Metro .rcRow span { display: block; padding: 0 .6em; text-decoration: none; outline: 0; } .RadCalendar.RadCalendar_Metro .rcMain .rcRow th { padding: 0; } .RadCalendarMonthView.RadCalendarMonthView_Metro, .RadCalendarMonthView.RadCalendarMonthView_Metro .rcButtons input, .RadCalendarMonthView.RadCalendarMonthView_MetroTouch, .RadCalendarMonthView.RadCalendarMonthView_MetroTouch .rcButtons input { font-family: inherit; font-weight: inherit; } .RadCalendarMonthView.RadCalendarMonthView_Metro .rcSelected a, .RadCalendarMonthView.RadCalendarMonthView_MetroTouch .rcSelected a { background: var(--color-dark); border-color: var(--color-dark); } .RadCalendarMonthView.RadCalendarMonthView_MetroTouch #rcMView_Today { background: var(--color-dark); border-color: var(--color-dark); } .RadCalendarTimeView.RadCalendarTimeView_Metro, .RadCalendarTimeView.RadCalendarTimeView_MetroTouch { font-family: inherit; font-weight: inherit; } .RadCalendarTimeView.RadCalendarTimeView_Metro td.rcSelected a, .RadCalendarTimeView.RadCalendarTimeView_MetroTouch td.rcSelected a { border-color: var(--color-dark); background: var(--color-dark); } .RadPicker.RadPicker_Metro .rcCalPopup:hover, .RadPicker.RadPicker_Metro .rcCalPopup:focus, .RadPicker.RadPicker_Metro .rcCalPopup:active, .RadPicker.RadPicker_Metro .rcTimePopup:hover, .RadPicker.RadPicker_Metro .rcTimePopup:focus, .RadPicker.RadPicker_Metro .rcTimePopup:active, .RadPicker.RadPicker_MetroTouch .rcCalPopup:hover, .RadPicker.RadPicker_MetroTouch .rcCalPopup:focus, .RadPicker.RadPicker_MetroTouch .rcCalPopup:active, .RadPicker.RadPicker_MetroTouch .rcTimePopup:hover, .RadPicker.RadPicker_MetroTouch .rcTimePopup:focus, .RadPicker.RadPicker_MetroTouch .rcTimePopup:active { color: GetBestContextualTextColor(var(--color-dark)); background-color: var(--color-dark); } .RadPicker .rcCalPopup, .RadPicker .rcTimePopup { width: inherit; text-indent: inherit; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .RadPicker .RadInput { border-radius: 3px; } /* ========================================================================== ACCOUNT PAGES (member fees, account banner, event display, cart) Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ ========================================================================== */ /* RadGrid ========================================================================== */ .account-page .RadGrid.RadGrid_MetroTouch { border: 0px; background: transparent; } .account-page .RadGrid.RadGrid_MetroTouch .rgHeader, .account-page .RadGrid.RadGrid_MetroTouch .rgHeader:first-child, .account-page .RadGrid.RadGrid_MetroTouch th.rgResizeCol, .account-page .RadGrid.RadGrid_MetroTouch th.rgResizeCol:first-child, .account-page .RadGrid.RadGrid_MetroTouch .rgRow td, .account-page .RadGrid.RadGrid_MetroTouch .rgRow td:first-child, .account-page .RadGrid.RadGrid_MetroTouch .rgAltRow td, .account-page .RadGrid.RadGrid_MetroTouch .rgAltRow td:first-child, .account-page .RadGrid.RadGrid_MetroTouch .rgEditRow > td, .account-page .RadGrid.RadGrid_MetroTouch .rgEditRow > td:first-child, .account-page .RadGrid.RadGrid_MetroTouch .rgFooter td, .account-page .RadGrid.RadGrid_MetroTouch .rgFooter td:first-child, .account-page .RadGrid.RadGrid_MetroTouch .rgFilterRow td, .account-page .RadGrid.RadGrid_MetroTouch .rgFilterRow td:first-child, .account-page .RadGrid.RadGrid_MetroTouch .rgNoRecords td, .account-page .RadGrid.RadGrid_MetroTouch .rgNoRecords td:first-child { padding: 12px 12px; } .account-page .RadGrid.RadGrid_MetroTouch thead { border-radius: 4px; overflow: hidden; } .account-page .RadGrid.RadGrid_MetroTouch thead tr { border: 0px; } .account-page .RadGrid.RadGrid_MetroTouch th { background-color: var(--color-dark); border: 0px; color: var(--color-white); text-decoration: none !important; font-size: 0.89em; font-weight: 600; border-bottom: 0px; } .account-page .RadGrid.RadGrid_MetroTouch th.text-hide { font-size: 0; } .account-page .RadGrid.RadGrid_MetroTouch th.rgExpandCol { font-size: 0; padding: 28px 0px !important; } .account-page .RadGrid.RadGrid_MetroTouch th a { color: var(--color-white); text-decoration: none !important; font-size: 0.89em; font-weight: 600; } .account-page .RadGrid.RadGrid_MetroTouch th .rgSortAsc, .account-page .RadGrid.RadGrid_MetroTouch th .rgSortDesc { background-image: none; background-color: var(--color-white); width: 20px; height: 20px; margin: 5px; -webkit-mask-image: var(--icon-arrow); mask-image: var(--icon-arrow); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 13px 13px; mask-size: 13px 13px; -webkit-mask-position: center; mask-position: center; } .account-page .RadGrid.RadGrid_MetroTouch th .rgSortAsc { transform: rotate(-90deg); } .account-page .RadGrid.RadGrid_MetroTouch th .rgSortDesc { transform: rotate(90deg); -webkit-mask-position: 4px center; mask-position: 4px center; } .account-page .RadGrid.RadGrid_MetroTouch .rgMasterTable { border-collapse: separate; border-spacing: 0px 10px; background: transparent; padding: 0px 15px; border: 0; } .account-page .RadGrid.RadGrid_MetroTouch .rgMasterTable .rgMasterTable th { background-color: var(--color-blue-grey); } .account-page .RadGrid.RadGrid_MetroTouch .rgMasterTable .rgMasterTable th.rgHeader, .account-page .RadGrid.RadGrid_MetroTouch .rgMasterTable .rgMasterTable th.rgHeader:first-child { padding-top: 13px; padding-bottom: 13px; } .account-page .RadGrid.RadGrid_MetroTouch .rgMasterTable .rgDetailTable { border: 0; border-collapse: separate; border-spacing: 0px 10px; background: transparent; padding: 0px 15px; } .account-page .RadGrid.RadGrid_MetroTouch .rgMasterTable .rgDetailTable thead th { background-color: var(--color-blue-grey); } .account-page .RadGrid.RadGrid_MetroTouch .rgExpand, .account-page .RadGrid.RadGrid_MetroTouch .rgCollapse { background-image: none; background-color: var(--color-brand); width: 20px; height: 20px; margin: 5px; -webkit-mask-image: var(--icon-arrow); mask-image: var(--icon-arrow); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 13px 13px; mask-size: 13px 13px; -webkit-mask-position: center; mask-position: center; color: var(--color-white); } .account-page .RadGrid.RadGrid_MetroTouch .rgCollapse { transform: rotate(90deg); } .account-page .RadGrid.RadGrid_MetroTouch tr.rgRow, .account-page .RadGrid.RadGrid_MetroTouch tr.rgAltRow { box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); background: var(--color-white); } .account-page .RadGrid.RadGrid_MetroTouch tr.rgRow.rgSelectedRow, .account-page .RadGrid.RadGrid_MetroTouch tr.rgAltRow.rgSelectedRow { background-color: var(--color-white); } .account-page .RadGrid.RadGrid_MetroTouch tr.rgRow.rgSelectedRow .rgExpand, .account-page .RadGrid.RadGrid_MetroTouch tr.rgRow.rgSelectedRow .rgCollapse, .account-page .RadGrid.RadGrid_MetroTouch tr.rgAltRow.rgSelectedRow .rgExpand, .account-page .RadGrid.RadGrid_MetroTouch tr.rgAltRow.rgSelectedRow .rgCollapse { background-color: var(--color-white); } .account-page .RadGrid.RadGrid_MetroTouch tr.rgRow td, .account-page .RadGrid.RadGrid_MetroTouch tr.rgAltRow td { border: 1px solid var(--color-border); border-right-width: 0; border-left-width: 0; } .account-page .RadGrid.RadGrid_MetroTouch tr.rgRow td:first-child, .account-page .RadGrid.RadGrid_MetroTouch tr.rgAltRow td:first-child { border-left-width: 1px; border-left-color: var(--color-border); } .account-page .RadGrid.RadGrid_MetroTouch tr.rgRow td:last-child, .account-page .RadGrid.RadGrid_MetroTouch tr.rgRow td:has(+ [style="display:none;"]), .account-page .RadGrid.RadGrid_MetroTouch tr.rgAltRow td:last-child, .account-page .RadGrid.RadGrid_MetroTouch tr.rgAltRow td:has(+ [style="display:none;"]) { border-right-width: 1px; border-right-color: var(--color-border); } .account-page .RadGrid.RadGrid_MetroTouch tr.rgRow td.rgSorted, .account-page .RadGrid.RadGrid_MetroTouch tr.rgAltRow td.rgSorted { background: var(--color-white); } .account-page .RadGrid.RadGrid_MetroTouch tr.rgRow td.rgExpandCol, .account-page .RadGrid.RadGrid_MetroTouch tr.rgAltRow td.rgExpandCol { padding: 13px 0px !important; background: transparent; } .account-page .RadGrid.RadGrid_MetroTouch tr.rgRow td a, .account-page .RadGrid.RadGrid_MetroTouch tr.rgAltRow td a { font-weight: 500; } .account-page .RadGrid.RadGrid_MetroTouch tr.rgAltRow { background: var(--color-grey-lightest); } .account-page .RadGrid.RadGrid_MetroTouch tr.rgAltRow td { border-color: var(--color-brand-light); } .account-page .RadGrid.RadGrid_MetroTouch tr.rgAltRow td.rgSorted { background: var(--color-grey-lightest); } .account-page .RadGrid.RadGrid_MetroTouch tr.rgAltRow td.rgExpandCol { background: transparent; } .account-page .RadGrid.RadGrid_MetroTouch tr.rgAltRow td:first-child { border-left-width: 1px; border-left-color: var(--color-brand-light); } .account-page .RadGrid.RadGrid_MetroTouch tr.rgAltRow td:last-child, .account-page .RadGrid.RadGrid_MetroTouch tr.rgAltRow td:has(+ [style="display:none;"]) { border-right-width: 1px; border-right-color: var(--color-brand-light); } .account-page .RadGrid.RadGrid_MetroTouch tr td:first-child, .account-page .RadGrid.RadGrid_MetroTouch tr th:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .account-page .RadGrid.RadGrid_MetroTouch tr td:last-child, .account-page .RadGrid.RadGrid_MetroTouch tr td:has(+ [style="display:none;"]), .account-page .RadGrid.RadGrid_MetroTouch tr th:last-child, .account-page .RadGrid.RadGrid_MetroTouch tr th:has(+ [style="display:none;"]) { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .account-page .RadGrid.RadGrid_MetroTouch tr td.rgExpandCol { background: transparent; } /* Member fees ========================================================================== */ @media (min-width: 992px) { .member-fees { display: flex; justify-content: space-between; } .member-fees span:last-child { text-align: right; } } .member-fees span { display: block; } .member-fees .paid { color: var(--color-accent-green); } .member-fees .balance { background-color: var(--color-accent-orange); padding: 5px 10px; border-radius: 4px; } /*table fix*/ .table-auto .rgClipCells { table-layout: auto !important; } .coadmin-manage a { padding: 15px; border-radius: 4px; background-color: var(--color-accent-green); color: var(--color-white); text-decoration: none; width: 100%; display: block; font-weight: 700; font-size: 1.22em; margin-bottom: 20px; transition: all 0.2s ease; } @media screen and (prefers-reduced-motion: reduce) { .coadmin-manage a { transition: none; } } .coadmin-manage a:before { content: ''; display: inline-block; width: 30px; height: 30px; background-color: var(--color-white); vertical-align: middle; margin-right: 10px; -webkit-mask-image: url(images/mh-icons.svg#orgs); mask-image: url(images/mh-icons.svg#orgs); -webkit-mask-size: 28px 28px; mask-size: 28px 28px; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .coadmin-manage a:after { content: ''; display: inline-block; width: 21px; float: right; height: 21px; background-color: var(--color-white); vertical-align: middle; margin-top: 7px; margin-right: 10px; -webkit-mask-image: var(--icon-arrows); mask-image: var(--icon-arrows); -webkit-mask-size: 21px 21px; mask-size: 21px 21px; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: all 0.2s ease; } @media screen and (prefers-reduced-motion: reduce) { .coadmin-manage a:after { transition: none; } } .coadmin-manage a:hover, .coadmin-manage a:focus, .coadmin-manage a:active { background-color: var(--color-accent-green-dark); } .coadmin-manage a:hover:after, .coadmin-manage a:focus:after, .coadmin-manage a:active:after { margin-right: 0px; } .FloatArea.card { box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); } /* Account banner ========================================================================== */ .account-banner:before { border-radius: 4px; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); border: 1px solid var(--color-border); } /* ========================================================================== Event display ========================================================================== */ .SummaryFloat .RegistrationArea div:not(.PriceOverrideForm) > .PrimaryButton.LargeButton { font-size: 1em !important; } .RegistrationArea .SelectedRegistrant, .RegistrationArea .MainRegistrantInfoSectionWrapper:has(.SelectedRegistrant) { border-color: var(--color-slate) !important; border-radius: 4px; } .RegistrationArea .MainRegistrantInfoSectionWrapper, .RegistrationArea .RegisterMultiple .card-body { border-radius: 4px; } .PricingData .Free, .EventDetails .Free, .ProgramItemSummary .Free, .CartCharges .Free { color: var(--color-accent-green-dark); font-weight: 600; } .PricingData .text-success, .EventDetails .text-success, .ProgramItemSummary .text-success, .CartCharges .text-success { color: var(--color-accent-green-dark) !important; } .ProgramItemSummary .InItinerary { /* Indicator when the program item is in your itenarary - Note the spelling mistake... */ background-color: var(--color-accent-green-dark); color: var(--color-white); } .ProgramItemSummary .InItinerary.sysicon--before:before { background: var(--color-white); } /* ========================================================================== GenAI ========================================================================== */ #MainPanel:has(.GenAIContent) .TextButton, #MainPanel:has(.GenAIContent) .PrimaryButton { padding: 5px 10px; } .genai-command-button-container .Cancel { color: var(--color-brand); } .genai-command-button-container .Cancel:hover, .genai-command-button-container .Cancel:focus, .genai-command-button-container .Cancel:active { color: var(--color-brand); } /* ========================================================================== Cart ========================================================================== */ .PromotionManager .panel-heading.Collapsible .panel-title { font-size: 1em; color: var(--color-brand); } .PromotionManager .panel-heading.Collapsible .sysicon.sysicon-collapsed:after, .PromotionManager .panel-heading.Collapsible a.sysicon.sysicon-collapsed:not(.aspNetDisabled):after, .PromotionManager .panel-heading.Collapsible .sysicon.sysicon-expanded:after, .PromotionManager .panel-heading.Collapsible a.sysicon.sysicon-expanded:not(.aspNetDisabled):after { background-color: var(--color-brand); } .cart-items-grid .card, .invoice-grid .card { box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); } .cart-items-grid .riContSpinButtons a, .cart-items-grid .riContSpinButtons.riSingle a, .invoice-grid .riContSpinButtons a, .invoice-grid .riContSpinButtons.riSingle a { background-color: var(--color-grey); } .cart-items-grid .riContSpinButtons a.riDown, .cart-items-grid .riContSpinButtons.riSingle a.riDown, .invoice-grid .riContSpinButtons a.riDown, .invoice-grid .riContSpinButtons.riSingle a.riDown { border-radius: 4px 0px 0px 4px; } .cart-items-grid .riContSpinButtons a.riUp, .cart-items-grid .riContSpinButtons.riSingle a.riUp, .invoice-grid .riContSpinButtons a.riUp, .invoice-grid .riContSpinButtons.riSingle a.riUp { border-radius: 0px 4px 4px 0px; } .cart-items-grid .riContSpinButtons a:after, .cart-items-grid .riContSpinButtons.riSingle a:after, .invoice-grid .riContSpinButtons a:after, .invoice-grid .riContSpinButtons.riSingle a:after { background: var(--color-text); } .cart-items-grid .riContSpinButtons a:hover, .cart-items-grid .riContSpinButtons a:active, .cart-items-grid .riContSpinButtons a:focus, .cart-items-grid .riContSpinButtons.riSingle a:hover, .cart-items-grid .riContSpinButtons.riSingle a:active, .cart-items-grid .riContSpinButtons.riSingle a:focus, .invoice-grid .riContSpinButtons a:hover, .invoice-grid .riContSpinButtons a:active, .invoice-grid .riContSpinButtons a:focus, .invoice-grid .riContSpinButtons.riSingle a:hover, .invoice-grid .riContSpinButtons.riSingle a:active, .invoice-grid .riContSpinButtons.riSingle a:focus { background-color: var(--color-grey-400); } .cart-items-grid a.expand-collapse-btn .sysicon:after, .invoice-grid a.expand-collapse-btn .sysicon:after { background-color: var(--color-brand); } .cart-items-grid a.expand-collapse-btn .sysicon.sysicon-expanded:after, .invoice-grid a.expand-collapse-btn .sysicon.sysicon-expanded:after { -webkit-mask-image: url(images/auxIcons.svg#caret-thin-up); mask-image: url(images/auxIcons.svg#caret-thin-up); -webkit-mask-position: 0px 4px; mask-position: 0px 4px; } .cart-items-grid a.expand-collapse-btn .sysicon.sysicon-collapsed:after, .invoice-grid a.expand-collapse-btn .sysicon.sysicon-collapsed:after { -webkit-mask-image: url(images/auxIcons.svg#caret-thin); mask-image: url(images/auxIcons.svg#caret-thin); -webkit-mask-position: 0px 4px; mask-position: 0px 4px; } .cart-items-grid a.expand-collapse-btn:hover .sysicon:after, .cart-items-grid a.expand-collapse-btn:active .sysicon:after, .cart-items-grid a.expand-collapse-btn:focus .sysicon:after, .invoice-grid a.expand-collapse-btn:hover .sysicon:after, .invoice-grid a.expand-collapse-btn:active .sysicon:after, .invoice-grid a.expand-collapse-btn:focus .sysicon:after { background-color: var(--color-brand-dark) !important; } .cart-items-grid .removeItem .sysicon.sysicon-delete-bin:not(.aspNetDisabled):after, .invoice-grid .removeItem .sysicon.sysicon-delete-bin:not(.aspNetDisabled):after { background-color: var(--color-text); } .cart-items-grid .removeItem .sysicon.sysicon-delete-bin:not(.aspNetDisabled):hover:after, .cart-items-grid .removeItem .sysicon.sysicon-delete-bin:not(.aspNetDisabled):active:after, .cart-items-grid .removeItem .sysicon.sysicon-delete-bin:not(.aspNetDisabled):focus:after, .invoice-grid .removeItem .sysicon.sysicon-delete-bin:not(.aspNetDisabled):hover:after, .invoice-grid .removeItem .sysicon.sysicon-delete-bin:not(.aspNetDisabled):active:after, .invoice-grid .removeItem .sysicon.sysicon-delete-bin:not(.aspNetDisabled):focus:after { background-color: var(--color-text); } /* ========================================================================== DASHBOARDS (staff dashboard styling) Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ /* Zone or iPart style for the staff dashboards for consistent styling */ .ProgressTracker_Dashboard .label, .ProgressTracker_Dashboard_Overview .label { font-size: 120%; display: block; margin-top: 10px; } .ProgressTracker_Dashboard .ProgressBar, .ProgressTracker_Dashboard_Overview .ProgressBar { margin-left: -10px; margin-right: -10px; } .ProgressTracker2 ul, .ProgressTracker_Dashboard ul, .ProgressTracker_Dashboard_Overview ul { margin: 0; padding: 0; } .ProgressTracker2 ul, .ProgressTracker2 li, .ProgressTracker_Dashboard ul, .ProgressTracker_Dashboard li, .ProgressTracker_Dashboard_Overview ul, .ProgressTracker_Dashboard_Overview li { list-style-type: none; } .ProgressTracker2 .count, .ProgressTracker_Dashboard .count, .ProgressTracker_Dashboard_Overview .count { font-weight: 600; display: block; line-height: 1; letter-spacing: -1px; } .ProgressTracker2 .label, .ProgressTracker_Dashboard .label, .ProgressTracker_Dashboard_Overview .label { line-height: 1.25; } .ProgressTracker2 .ProgressBar, .ProgressTracker_Dashboard .ProgressBar, .ProgressTracker_Dashboard_Overview .ProgressBar { margin-top: 10px; margin-bottom: 10px; position: relative; background-color: rgba(var(--shadow-rgb), 0.1); } .ProgressTracker2 .ProgressBar > span, .ProgressTracker_Dashboard .ProgressBar > span, .ProgressTracker_Dashboard_Overview .ProgressBar > span { display: block; height: 100%; background-color: var(--color-accent-orange); position: relative; overflow: hidden; } .ProgressTracker2 p, .ProgressTracker_Dashboard p, .ProgressTracker_Dashboard_Overview p { margin-bottom: 0; } .ProgressTracker_Dashboard .panel-heading.Distinguish { padding-bottom: 0; } .ProgressTracker_Dashboard .inset { display: block; padding-bottom: 15px; } .ProgressTracker2 .count, .ProgressTracker_Dashboard .count { font-size: 350%; } .ProgressTracker2 .ProgressBar, .ProgressTracker_Dashboard .ProgressBar { padding: 0; height: 18px; } .ProgressTracker_Dashboard_Overview .panel { /* default the overview PTs to the same height */ min-height: 11em; } .ProgressTracker_Dashboard_Overview .panel-heading.Distinguish { border-bottom-color: transparent; } .ProgressTracker_Dashboard_Overview .count { font-size: 4rem; } .ProgressTracker_Dashboard_Overview .ProgressBar { height: 5px; margin-bottom: 5px; } .ProgressTrackerNumberGradient .count { font-weight: 500; font-size: 5.5rem; } @media only screen { .ProgressTrackerNumberGradient .count { background: linear-gradient(50deg, var(--color-teal-darkest) 15%, var(--color-accent-purple) 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } } .StaffDashboard h2, .StaffDashboard .panel-heading.Distinguish, .StaffDashboard .PanelHead.Distinguish, .StaffDashboard .TitleBarCaption { border-bottom-color: transparent; } .StaffDashboard h2.Collapsible, .StaffDashboard .panel-heading.Distinguish.Collapsible, .StaffDashboard .PanelHead.Distinguish.Collapsible, .StaffDashboard .TitleBarCaption.Collapsible { border-bottom-color: var(--color-border); } .CampaignDashboard .panel { padding-top: 15px; } .CampaignDashboard .GridCardStyle, .CampaignDashboard .RadGrid.RadGrid, .CampaignDashboard .panel-border { margin-bottom: 0.9em; } /* ========================================================================== SKIN-SPECIFIC STYLES Ported from Flat_White for Publication-v27 (modular theme). ========================================================================== */ html { scroll-behavior: smooth; scrollbar-gutter: stable; } .wrapper { background: var(--color-grey-lightest); } @media (min-width: 992px) { .wrapper.col-on-right { background: linear-gradient(90deg, var(--color-grey-lightest) 50%, white 50%); } .wrapper .main-container { margin-bottom: 0; } } .main-container { padding: 0; } @media (max-width: 991px) { .col-secondary { border-top: 1px solid var(--color-border); background: var(--color-white); } } @media (min-width: 992px) { .has-secondary-col .body-container { grid-column-gap: 0px; } .has-secondary-col .body-container .col-primary { border-right: 1px solid var(--color-border); } } body:not(.Wrapper-HomePage) .body-container > div { padding: 0 15px 15px 15px; } @media (min-width: 992px) { body:not(.Wrapper-HomePage) .body-container > div { padding: 0 30px 30px 30px; } } body.Wrapper-FullWidth .body-container > div { padding: 0px; } .col-primary { background: var(--color-grey-lightest); } ::-moz-selection { background: var(--color-accent-teal-light); } ::selection { background: var(--color-accent-teal-light); } ::-moz-selection { background: var(--color-accent-teal-light); } .readMore { text-decoration: none; font-weight: 500; } .readMore:after { display: inline-block; vertical-align: middle; content: ''; width: 20px; height: 20px; background: var(--color-brand); -webkit-mask-image: var(--icon-arrows); mask-image: var(--icon-arrows); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 18px 18px; mask-size: 18px 18px; margin-left: 10px; margin-top: -2px; transition: all 0.2s ease; } .readMore:hover, .readMore:focus, .readMore:active { text-decoration: none; color: var(--color-accent-teal); } .readMore:hover:after, .readMore:focus:after, .readMore:active:after { margin-left: 15px; background: var(--color-accent-teal); } h1 .readMore, h2 .readMore, h3 .readMore, h4 .readMore, h5 .readMore, h6 .readMore { font-size: 1em; display: block; line-height: 0; } @media (min-width: 992px) { h1 .readMore, h2 .readMore, h3 .readMore, h4 .readMore, h5 .readMore, h6 .readMore { display: inline-block; margin-left: 10px; line-height: inherit; } } h1.BigHeader, .h1.BigHeader { background-color: var(--color-accent-green); color: var(--color-white); } /* CommunityBreadCrumb */ .BreadCrumbCurrent { font-size: 100%; font-weight: 600; } .backToTop { background-image: none; width: 40px; height: 40px; transform: none; transition: all 0.2s ease; } .backToTop:after { display: block; content: ''; background: var(--color-white); width: 40px; height: 40px; -webkit-mask-image: url(images/auxIcons.svg#caret); mask-image: url(images/auxIcons.svg#caret); -webkit-mask-size: 20px 20px; mask-size: 20px 20px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transform: rotate(180deg); } .backToTop:hover { transform: scale(1.15); background: var(--color-accent-green); } .SmallButton, .UseSmallButton .TextButton { padding: 10px 20px; } .MediumButton, .UseMediumButton .TextButton { padding: 10px 20px; } .LargeButton, .UseLargeButton .TextButton { padding: 10px 20px; } .border { border-radius: 4px; } /*Alerts*/ .Alerts ul.AlertSet { margin-bottom: 40px; text-align: left; } .Alerts .AlertItem { list-style: none; border: 1px solid var(--color-border); margin-top: 15px !important; padding: 12px 10px; background-color: var(--color-grey-lightest); border-radius: 4px; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); } .Alerts .AlertItem:first-child { margin-top: 0 !important; } .AsiInformation, .AsiSuccess, .AsiWarning, .AsiError, .AsiValidation, .AsiValidationSummary, .AsiNeutral, .AsiImportant { border-radius: 4px; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); margin-bottom: 10px; } .AsiInformation { border-color: var(--color-accent-teal); background-color: var(--color-accent-teal-lightest); } .AsiSuccess { border-color: var(--color-accent-green); background-color: var(--color-accent-teal-lightest); } .AsiWarning { border-color: var(--color-accent-orange); background-color: var(--color-peach); } .AsiError { border-color: var(--color-accent-red-dark); background-color: var(--color-pink-light); } .AsiValidation { border-color: var(--color-accent-orange-dark); background-color: var(--color-peach); } .AsiImportant { border-color: var(--color-accent-red); } /*General slideshow styling*/ .carousel-caption { text-shadow: none; } /*Separated image and caption slideshow*/ .slideshow-banner .carousel-control { display: none; } .slideshow-banner .carousel-indicators { width: 50%; margin-left: 0; left: 0; } .slideshow-banner .carousel-inner.bg-img > .item { background-image: none !important; } .slideshow-banner .img { position: absolute; left: 50%; right: 0; height: 100%; background-size: cover; background-position: center; } .slideshow-banner.image-left .carousel-indicators { left: auto; right: 0; } .slideshow-banner.image-left .img { right: 50%; left: 0; } .slideshow-banner.image-left .caption-wrapper { left: auto; right: 0; } @media (min-width: 992px) { .slideshow-banner .caption-wrapper { display: flex; position: absolute; top: 0; left: 0; bottom: 0; width: 50%; background: var(--color-brand); justify-content: center; align-items: center; } .slideshow-banner .caption-wrapper .carousel-caption { width: 100%; left: auto; right: auto; top: auto; position: relative; padding: 10%; } } @media (max-width: 991px) { .slideshow-banner { height: auto !important; } .slideshow-banner .carousel-inner.bg-img > .item { height: auto !important; } .slideshow-banner .img { left: 0; top: auto; height: 200px; position: relative; width: 100%; } .slideshow-banner .carousel-caption { top: 0; transform: none; position: relative; left: 0; right: 0; background-color: var(--color-brand); padding: 30px; } .slideshow-banner .bg { display: flex; flex-wrap: wrap; } .slideshow-banner a.link { position: relative; display: flex; flex-wrap: wrap-reverse; } .slideshow-banner .carousel-indicators { width: 100%; bottom: 0; } } .StandardPanel, .ContentBorder, h2, .PanelHead.Distinguish, .TitleBarCaption, div.ShowFieldset fieldset, .panel-border, .panel-heading.Distinguish { border: none; } .ProgressTracker2 .ProgressTrackerPanel .label { color: var(--color-white); } .ProgressTracker_Dashboard_Overview h2.panel-title { font-size: 130%; } .ProgressTracker_Dashboard_Overview .panel-border { background: var(--color-white); border-radius: 4px; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); border: 1px solid var(--color-border); } .FullWidthArea-StyleBg1 .row { padding: 40px 0px; } .FullWidthArea-StyleBg1 .home-spotlight { float: none; max-width: 500px; padding: 0px 30px; margin: 0px auto; } .FullWidthArea-StyleBg1 .Spotlight { text-align: left; display: flex; flex-wrap: wrap; } .FullWidthArea-StyleBg1 .Spotlight .Spotlight-image { align-self: center; margin: 0px auto 30px auto; } .FullWidthArea-StyleBg1 .Spotlight p { text-align: inherit; font-weight: 300; margin: 20px 0px; padding: 0; } .FullWidthArea-StyleBg1 .Spotlight .SectionLabel a { color: var(--color-ink); font-size: 135%; font-weight: 700; } .FullWidthArea-StyleBg1 .Spotlight .SectionLabel a:hover, .FullWidthArea-StyleBg1 .Spotlight .SectionLabel a:focus, .FullWidthArea-StyleBg1 .Spotlight .SectionLabel a:active { color: var(--color-accent-teal); } .FullWidthArea-StyleBg1 .Spotlight a { text-decoration: none; } @media (min-width: 992px) { .FullWidthArea-StyleBg1 .row { display: flex; flex-flow: column wrap; padding: 80px 0px; } .FullWidthArea-StyleBg1 .row:nth-of-type(2) .Spotlight { flex-flow: row-reverse nowrap; } .FullWidthArea-StyleBg1 .home-spotlight { width: 100%; max-width: 900px; clear: both; } .FullWidthArea-StyleBg1 .home-spotlight:nth-of-type(1) { align-self: center; } .FullWidthArea-StyleBg1 .home-spotlight:nth-of-type(2) { align-self: flex-end; } .FullWidthArea-StyleBg1 .home-spotlight:nth-of-type(3) { align-self: flex-start; } .FullWidthArea-StyleBg1 .Spotlight { align-items: center; gap: 0px 75px; flex-wrap: nowrap; } .FullWidthArea-StyleBg1 .Spotlight p { margin: 40px 0px; } .FullWidthArea-StyleBg1 .Spotlight .Spotlight-image { flex-shrink: 0; margin-bottom: 0; } } .FullWidthArea-StyleBg2 { position: relative; } @media (min-width: 992px) { .FullWidthArea-StyleBg2 { padding-top: 40px; } } .FullWidthArea-StyleBg2 .row { padding: 40px 0px; } .FullWidthArea-StyleBg2 .tracker-benefits { align-items: center; justify-content: center; gap: 0px 5%; } @media (max-width: 991px) { .FullWidthArea-StyleBg2 .tracker-benefits { max-width: 500px; margin: 0px auto; } } .FullWidthArea-StyleBg2 .home-member-benefits ul { padding-inline-start: 0px; margin-top: 30px; } .FullWidthArea-StyleBg2 .home-member-benefits li { list-style: none; background: var(--icon-arrow) no-repeat 0 8px/12px 12px; padding-left: 25px; } .home-member-tracker .ProgressTrackerPanel { background: transparent; } .home-member-tracker .ProgressTracker2 .ProgressTrackerPanel .count { color: var(--color-brand); font-size: 4em; font-family: var(--font-primary); font-weight: 700; margin-bottom: -10px; text-align: center; } .home-member-tracker .ProgressTracker2 .ProgressTrackerPanel .inset { text-align: left; padding: 0; } .home-member-tracker .ProgressTracker2 .ProgressTrackerPanel .label { font-size: 135%; color: var(--color-ink); font-weight: 500; font-family: var(--font-primary); text-align: center; } @media (min-width: 992px) { .home-member-tracker .ProgressTracker2 .ProgressTrackerPanel .count { font-size: 5.8em; text-align: left; margin-bottom: 0; } .home-member-tracker .ProgressTracker2 .ProgressTrackerPanel .label { text-align: left; } } .home-membership-types p { display: flex; justify-content: space-between; } @media (max-width: 991px) { .home-membership-types p { display: block; } } a.home-membership-btn { text-align: center; color: var(--color-ink); display: block; text-decoration: none; line-height: 0.7em; font: 600 1em var(--font-primary); margin: 2em auto; transition: all 0.2s ease-in-out; background: var(--color-white); border-radius: 4px; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); padding: 20px 20px 35px 20px; max-width: 500px; border: 1px solid var(--color-border); } @media (min-width: 992px) { a.home-membership-btn { width: 32%; max-width: 100%; margin: 0; } } a.home-membership-btn img { border-radius: 50%; display: inline-block; margin: 0 auto; transition: all 0.2s ease-in-out; } a.home-membership-btn:hover, a.home-membership-btn:active, a.home-membership-btn:focus { background: var(--color-accent-teal); color: var(--color-white); } a.home-membership-btn:hover img, a.home-membership-btn:active img, a.home-membership-btn:focus img { transform: scale(1.2); } .home-testimonial { padding: 0; } .slideshow-banner.testimonial { max-width: 500px; margin: 0px auto; } .slideshow-banner.testimonial .carousel-inner.bg-img { box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); border-radius: 5px; overflow: hidden; border: 1px solid var(--color-border); } .slideshow-banner.testimonial .carousel-inner.bg-img > .item { background: var(--color-white); border-radius: 5px; overflow: hidden; } .slideshow-banner.testimonial .carousel-indicators { padding: 0px 5%; } .slideshow-banner.testimonial .carousel-indicators li { border: none; background: var(--color-brand); opacity: 0.5; } .slideshow-banner.testimonial .carousel-indicators li.active { opacity: 1; } .slideshow-banner.testimonial .carousel-indicators li:hover { opacity: 1; background: var(--color-accent-teal); } .slideshow-banner.testimonial .caption-wrapper { background: var(--color-white); } .slideshow-banner.testimonial .caption-wrapper .carousel-caption { color: var(--color-ink); background: transparent; } .slideshow-banner.testimonial .caption-wrapper .carousel-caption h1, .slideshow-banner.testimonial .caption-wrapper .carousel-caption h2, .slideshow-banner.testimonial .caption-wrapper .carousel-caption h3, .slideshow-banner.testimonial .caption-wrapper .carousel-caption h4, .slideshow-banner.testimonial .caption-wrapper .carousel-caption h5, .slideshow-banner.testimonial .caption-wrapper .carousel-caption h6 { color: var(--color-ink); margin-top: 0; } @media (min-width: 992px) { .slideshow-banner.testimonial { max-width: 100%; } .slideshow-banner.testimonial .img { clip-path: polygon(0 0, 80% 0%, 100% 100%, 0% 100%); } .slideshow-banner.testimonial .carousel-indicators { text-align: left; } .slideshow-banner.testimonial .caption-wrapper:before { display: block; position: absolute; width: 65px; content: ''; height: 120%; left: -95px; background: var(--color-accent-teal); border-left: 20px solid var(--color-brand); transform: rotate(-18deg); } } .news-timeline .TaggedListPanel { position: relative; padding-bottom: 100px; } .news-timeline .TaggedListPanel:before { content: ' '; display: block; border-right: 2px dashed var(--color-brand); height: 100%; position: absolute; top: 0; left: 30px; } .news-timeline .TaggedListPanel a[id*='NextButton'] { display: none; } .news-timeline a.TextButton { left: 40px; display: inline-block; clear: both; margin: -95px 0 0 40px; position: relative; } .news-timeline a.TextButton:before { content: ' '; display: block; border-bottom: 2px dashed var(--color-brand); width: 40px; height: 48%; position: absolute; left: -40px; } .timeline-item { display: flex; align-items: flex-start; position: relative; margin: 20px 0; flex-direction: row-reverse; } .timeline-item:before { content: ' '; display: block; flex: 0 0 60px; order: 2; height: 60px; background: var(--color-brand-lighter); border: 2px solid var(--color-brand); border-radius: 50%; will-change: transform; } .timeline-tagged-content { position: relative; display: flex; order: 1; box-shadow: 8px 6px 20px 0 rgba(var(--color-dark-rgb), 0.2); border-radius: 4px; border-top-left-radius: 0; padding: 15px 15px 5px 15px; flex-grow: 0; margin-left: 30px; border-bottom: 15px solid var(--color-brand); background: var(--color-white); } .timeline-tagged-content:hover { border-bottom: 15px solid var(--color-brand-darker); } .timeline-tagged-content:before { content: ' '; display: block; position: absolute; right: 100%; left: auto; border-top: 28px solid transparent; border-right: 22px solid var(--color-white); border-bottom: 28px solid transparent; z-index: 46; } .timeline-tagged-content h4 a:after { content: ' '; display: block; z-index: 45; border-radius: 10px; border-top-left-radius: 0; box-shadow: -6px -6px 26px 0 white; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .timeline-tagged-content img { width: 35%; align-self: flex-start; } .timeline-tagged-desc { padding: 0 15px; } @media (min-width: 992px) { .FullWidthArea-StyleBg3 .panel-heading.Distinguish { text-align: center; } .news-timeline .TaggedListPanel:before { left: 50%; transform: translateX(-50%); } .news-timeline a.TextButton { left: 50%; } .timeline-tagged-content { width: 45%; margin: 0; } .timeline-item { flex-direction: row; } .timeline-item:nth-child(odd) { flex-direction: row-reverse; } .timeline-item:nth-child(odd):before { margin-right: calc(5% - 30px); } .timeline-item:nth-child(odd) .timeline-tagged-content:after { border-radius: 4px; border-top-left-radius: 0; } .timeline-item:nth-child(even):before { margin-left: calc(5% - 30px); } .timeline-item:nth-child(even) .timeline-tagged-content { border-radius: 4px; border-top-right-radius: 0; } .timeline-item:nth-child(even) .timeline-tagged-content:before { right: auto; left: 100%; border-top: 28px solid transparent; border-left: 22px solid var(--color-white); border-bottom: 28px solid transparent; border-right: none; } } .list-with-featured .panel-body, .list-with-featured .PanelBody { padding: 0; } .list-with-featured .TaggedListPanel { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px 0px; } .list-with-featured .BlockTLItem { width: 30%; border-bottom: 0; display: flex; gap: 0px 15px; position: relative; padding: 0; } .list-with-featured .BlockTLItem:first-of-type { width: 100%; flex-shrink: 0; align-items: center; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); gap: 0; border-radius: 4px; overflow: hidden; margin-bottom: 20px; border: 1px solid var(--color-border); } .list-with-featured .BlockTLItem:first-of-type .newsImage { width: 50%; height: 100%; border-radius: 0; } .list-with-featured .BlockTLItem:first-of-type .desc { display: block; margin: 15px 0px; } .list-with-featured .BlockTLItem:first-of-type .details { padding: 80px 50px; background: var(--color-white); } .list-with-featured .BlockTLItem:first-of-type .readMore { position: relative; } .list-with-featured .desc, .list-with-featured .contentTaggedListImageThumbnailR { display: none; } .list-with-featured .newsImage { width: 100px; height: 100px; flex-shrink: 0; border-radius: 4px; background-size: cover; background-position: center; } .list-with-featured h4 { margin-bottom: 10px; font-size: 1em; font-weight: 500; line-height: 1.2; } .list-with-featured .PublishDate { font-size: 0.8em; font-style: normal; } .list-with-featured .readMore { font-size: 0.89em; position: absolute; bottom: 0px; } @media (max-width: 991px) { .list-with-featured .TaggedListPanel { display: block; } .list-with-featured .BlockTLItem, .list-with-featured .BlockTLItem:first-of-type { width: 100%; display: block; max-width: 500px; margin: 0px auto 30px auto; border-radius: 4px; overflow: hidden; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); } .list-with-featured .BlockTLItem .newsImage, .list-with-featured .BlockTLItem:first-of-type .newsImage { height: 200px; width: 100%; } .list-with-featured .BlockTLItem .details, .list-with-featured .BlockTLItem:first-of-type .details { padding: 30px; background: var(--color-white); } .list-with-featured .readMore { position: relative; } .list-with-featured h4 { margin-top: 10px; } } .FullWidthArea-StyleBg3 { position: relative; overflow: hidden; background: var(--img-testimonial-bg) center center no-repeat; background-size: cover; } .FullWidthArea-StyleBg3:after { display: block; position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: rgba(var(--color-text-rgb), 0.5); z-index: 1; } .FullWidthArea-StyleBg3 .row { position: relative; z-index: 2; padding: 160px 0px; } .FullWidthArea-StyleBg3 blockquote { font: 600 2.6em var(--font-primary); line-height: 1.3; color: var(--color-white); margin: 0; } @media (max-width: 991px) { .FullWidthArea-StyleBg3 blockquote { font-size: 1.8em; } } .FullWidthArea-StyleBg3 h2 { color: var(--color-white); font-size: 2em; text-align: right; font-weight: 500; font-style: italic; } @media (max-width: 991px) { .FullWidthArea-StyleBg3 h2 { font-size: 1.4em; } } .FullWidthArea-StyleBg5 .RelatedItemsHorizontal, .CartButtonWrapper .CardButtonUl { display: flex; } .FullWidthArea-StyleBg5 .RelatedItemsHorizontal li, .CartButtonWrapper .CardButtonUl li { box-shadow: 8px 6px 20px 0 rgba(var(--color-dark-rgb), 0.2); position: relative; float: none; width: auto !important; border-radius: 4px; } .FullWidthArea-StyleBg5 .RelatedItemsHorizontal li:after, .CartButtonWrapper .CardButtonUl li:after { content: ''; display: block; height: 15px; width: 100%; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; position: absolute; bottom: 0; } .FullWidthArea-StyleBg5 .RelatedItemsHorizontal li:hover:after, .CartButtonWrapper .CardButtonUl li:hover:after { background: linear-gradient(90deg, var(--color-accent-teal) 0%, var(--color-brand) 100%); animation: fade-in 0.4s ease-in; } .FullWidthArea-StyleBg5 .RelatedItemsHorizontal li:hover img, .CartButtonWrapper .CardButtonUl li:hover img { transform: scale(1); } .FullWidthArea-StyleBg5 .RelatedItemsHorizontal li a.LabelLink, .CartButtonWrapper .CardButtonUl li a.LabelLink { text-decoration: none; color: var(--color-dark); } .FullWidthArea-StyleBg5 .RelatedItemsHorizontal li a.LabelLink:before, .CartButtonWrapper .CardButtonUl li a.LabelLink:before { content: ' '; display: block; box-shadow: -6px -6px 26px 0 white; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 15; } .FullWidthArea-StyleBg5 .RelatedItemsHorizontal li img, .CartButtonWrapper .CardButtonUl li img { transition: all 0.2s ease-in-out; } .FullWidthArea-StyleBg4 { padding: 40px 0px; } .FullWidthArea-StyleBg4 .row { padding: 40px 0px; } .upcoming-events .panel-body, .upcoming-events .PanelBody { padding: 0; } .upcoming-events .imageWrapper, .upcoming-events .image { display: block; height: 200px; background-size: cover; background-position: center; overflow: hidden; transition: all 0.2s ease-in; } .upcoming-events .card { border-radius: 4px; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); overflow: hidden; border: 1px solid var(--color-border); } .upcoming-events .card:hover, .upcoming-events .card:active, .upcoming-events .card:focus { cursor: pointer; } .upcoming-events .card:hover .image, .upcoming-events .card:active .image, .upcoming-events .card:focus .image { transform: scale(1.2); } .upcoming-events .card:hover .readMore, .upcoming-events .card:active .readMore, .upcoming-events .card:focus .readMore { color: var(--color-accent-teal); } .upcoming-events .card:hover .readMore:after, .upcoming-events .card:active .readMore:after, .upcoming-events .card:focus .readMore:after { margin-left: 15px; background: var(--color-accent-teal); } .upcoming-events .card-body { padding: 0; } .upcoming-events .details { display: block; padding: 25px; } .upcoming-events .QueryTemplateSet.row { flex-wrap: wrap; padding: 0px !important; justify-content: space-between; } @media (max-width: 991px) { .upcoming-events .QueryTemplateSet.row { display: block; } .upcoming-events .QueryTemplateSet.row .card { max-width: 500px; margin: 0px auto 60px auto; } .upcoming-events .QueryTemplateSet.row section:last-of-type .card { margin-bottom: 0; } } .upcoming-events .row-cols-md-3 > * { width: 32%; padding: 0; } @media (max-width: 991px) { .upcoming-events .row-cols-md-3 > * { width: 100%; } } .upcoming-events .link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .upcoming-events .pagination { display: none; } .CardButtonWrapper .CardButtonUl { list-style-type: none; margin: 0 0 50px 0; padding: 0px; text-align: center; } .CardButtonWrapper .CardButtonUl li { border-radius: 25px; margin: -1.2% 1.5%; padding: 0px 0 0px 0; } .CardButtonWrapper .CardButtonUl li:hover img { width: 100%; } .CardButtonWrapper .CardButtonUl li a.LabelLink { line-height: 3.5em; } .CardButtonWrapper .CardButtonUl li a.LabelLink:before { border-radius: 25px; } .CardButtonWrapper .CardButtonUl li img { border-radius: 25px 25px 0 0 !important; transform: scale(1); filter: grayscale(0%); width: auto; } @media (min-width: 992px) { .FullWidthArea-StyleBg5 .RelatedItemsHorizontal, .CardButtonWrapper .CardButtonUl { flex-flow: row nowrap; } .RelatedItemsHorizontal li, .CardButtonUl li { flex: 0 0 30%; } } .FullWidthArea-StyleBg4 .sponsors-listing ul { display: flex; flex-flow: row wrap; padding: 0; justify-content: space-between; } .FullWidthArea-StyleBg4 .sponsors-listing li { list-style: none; display: flex; width: 32%; background: var(--color-white); padding: 30px 15px; border-radius: 4px; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); border: 1px solid var(--color-border); } .FullWidthArea-StyleBg4 .sponsors-listing img { max-width: 250px; margin: 0 auto; align-self: center; } .FullWidthArea-StyleBg4 .sponsors-listing img:hover { filter: initial; transition: all 0.5s ease-in; } @media (max-width: 991px) { .FullWidthArea-StyleBg4 .sponsors-listing ul { display: block; } .FullWidthArea-StyleBg4 .sponsors-listing li { margin: 0px auto 40px auto; width: 100%; max-width: 500px; } .FullWidthArea-StyleBg4 .sponsors-listing li:last-of-type { margin-bottom: 0; } } .FullWidthArea-StyleBg6, .FullWidthArea-StyleBg7 { position: relative; overflow: hidden; background: var(--color-ink) var(--img-promo-1) center center no-repeat; background-size: cover; color: var(--color-white); } @media (min-width: 992px) { .FullWidthArea-StyleBg6, .FullWidthArea-StyleBg7 { padding: 40px 0px; } } @media (max-width: 991px) { .FullWidthArea-StyleBg6 .col-sm-4, .FullWidthArea-StyleBg7 .col-sm-4 { padding-top: 40px; } } .FullWidthArea-StyleBg6:after, .FullWidthArea-StyleBg7:after { display: block; position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: rgba(var(--shadow-rgb), 0.7); z-index: 1; } .FullWidthArea-StyleBg6 .row, .FullWidthArea-StyleBg7 .row { position: relative; z-index: 2; padding: 40px 0px; } .FullWidthArea-StyleBg6 h1, .FullWidthArea-StyleBg6 h2, .FullWidthArea-StyleBg6 h3, .FullWidthArea-StyleBg6 h4, .FullWidthArea-StyleBg6 h5, .FullWidthArea-StyleBg6 h6, .FullWidthArea-StyleBg7 h1, .FullWidthArea-StyleBg7 h2, .FullWidthArea-StyleBg7 h3, .FullWidthArea-StyleBg7 h4, .FullWidthArea-StyleBg7 h5, .FullWidthArea-StyleBg7 h6 { color: var(--color-white); } .FullWidthArea-StyleBg7 { background: var(--color-ink) var(--img-promo-2) center center no-repeat; background-size: cover; padding: 200px 0px; } .FullWidthArea-StyleBg7:after { height: 50%; margin: auto; background: rgba(var(--shadow-rgb), 0.9); } footer.footer { padding-top: 0px; padding-bottom: 15px; text-align: left; } footer.footer a { text-decoration: none; } footer.footer a:hover, footer.footer a:focus { color: var(--color-brand-lighter); } footer.footer a.TextButton { color: var(--color-dark); } footer.footer h3, footer.footer h4 { margin-bottom: 15px; font-size: 100%; font-weight: 600; } footer.footer .footer-content > .container { grid-template: "navigation contact" "copyright copyright" / 2fr 1fr; font-weight: 300; /* first level */ } footer.footer .footer-content > .container h2 { font-size: 1em; color: var(--color-white); } @media (max-width: 991px) { :root { --aux-link-color: var(--color-ink); } } .header-aux-container { background: var(--aux-bg); } @media (max-width: 991px) { .header-aux-container { --aux-bg: transparent; } } /* Publication-v27: light nav text on the brand header band (the header background itself is set on `header.header` via --color-header-bg). Scoped to desktop because the mobile nav is a slide-out overlay with its own style. */ @media (min-width: 992px) { header.header .RadMenu.RadMenu_Coffee .rmRootLink, header.header .RadMenu.RadMenu_Coffee .rmRootLink.rmSelected { color: var(--header-nav-color); } header.header .RadMenu.RadMenu_Coffee .rmRootLink:hover, header.header .RadMenu.RadMenu_Coffee .rmRootLink.rmExpanded, header.header .RadMenu.RadMenu_Coffee .rmRootLink.rmFocused { color: var(--header-nav-hover); } } @media (min-width: 992px) { .header-aux-container .UtilityNavigationToggle { display: none; } } .header-aux-container > div { max-width: var(--container-max); margin-right: auto; margin-left: auto; padding-left: 30px; padding-right: 30px; } .header-aux-container .UtilityAuthentication a, .header-aux-container a.NavigationLink, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link, .header-aux-container .account-toggle .nav-text { font-weight: 300; padding: 0; } .header-aux-container .UtilityNavigation { gap: 0px 15px; align-items: center; } @media (max-width: 991px) { .header-aux-container .UtilityNavigation { justify-content: center; } } .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link { border-left: 1px solid var(--color-white); } .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:first-of-type { border: none; } .header-aux-container .UtilityNavigation .NavigationUnorderedList { display: flex; gap: 0px 15px; } .header-aux-container .UtilityAuthenticationLink { border-right: 1px solid var(--color-white); margin-right: 10px; padding-right: 20px; } .header-aux-container .UtilityTranslation { position: relative; width: 100%; max-width: 120px; display: block; } .header-aux-container .UtilityTranslation label { color: var(--color-white); } .header-aux-container .UtilityTranslation select { border: 1px solid var(--aux-link-color); font-size: 75%; color: var(--aux-link-color); background-color: rgba(var(--shadow-rgb), 0.2); padding: 0px 10px; height: 25px; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; display: block; background-image: url(images/auxIcons.svg#caret-white); background-repeat: no-repeat; background-size: 12px 12px; background-position: 95% center; } .header-aux-container .UtilityTranslation select:hover, .header-aux-container .UtilityTranslation select:focus { cursor: pointer; } .header-aux-container .UtilityTranslation select option { color: var(--color-dark); padding: 5px 0; background-color: var(--color-white); } .header-aux-container .UtilityTranslation select option:focus, .header-aux-container .UtilityTranslation select option:active, .header-aux-container .UtilityTranslation select option[selected] { background-color: var(--color-brand) !important; color: var(--color-white); } @media (min-width: 992px) { .header-aux-container .UtilityTranslation select:focus, .header-aux-container .UtilityTranslation select:active { background-color: var(--color-text); } } @media (max-width: 991px) { .header-aux-container .UtilityTranslation { margin: 0; } .header-aux-container .UtilityTranslation select { background-color: transparent; background-image: url(images/auxIcons.svg#caret); } } /* Auxiliary Icons */ .UtilitySearch, .UtilitySTEToggle, .UtilityAuthentication, .UtilityTranslation, .UtilityPTSToggle { margin-left: 0px; } .nav-aux-cart .NavigationLink:hover, .nav-aux-cart .NavigationLink:focus { border: 1px solid white; border-radius: 4px; } .navbar-toggle, .obo-toggle, .ste-toggle, .page-statistics-toggle, .searchbar-toggle { height: 30px; width: 30px; -webkit-mask-image: url(images/auxIcons.svg#caret); mask-image: url(images/auxIcons.svg#caret); -webkit-mask-size: 18px 18px; mask-size: 18px 18px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background: var(--aux-link-color); } .navbar-toggle.collapsed, .obo-toggle.collapsed, .ste-toggle.collapsed, .page-statistics-toggle.collapsed, .searchbar-toggle.collapsed { background: var(--aux-link-color); } .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text:before { display: inline-block; vertical-align: middle; margin: 0px 11px 0px 0px; content: ''; height: 30px; width: 18px; -webkit-mask-image: url(images/auxIcons.svg#cart); mask-image: url(images/auxIcons.svg#cart); -webkit-mask-size: 18px 18px; mask-size: 18px 18px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background: var(--aux-link-color); } .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text:hover, .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text:focus { text-decoration: none; color: var(--color-accent-teal); } .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text:hover:before, .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text:focus:before { background: var(--color-accent-teal); } @media (min-width: 992px) { .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text { font-size: inherit; font-family: var(--font-primary); line-height: 1.6; font-weight: 300; width: auto; color: var(--aux-link-color); } .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text:hover, .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text:focus { color: var(--color-accent-teal-light); } .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text:hover:before, .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text:focus:before { background: var(--color-accent-teal-light); } } .obo-toggle { -webkit-mask-image: url(images/auxIcons.svg#obo); mask-image: url(images/auxIcons.svg#obo); -webkit-mask-position: 7px 8px; mask-position: 7px 8px; } @media (min-width: 992px) { .obo-toggle { margin-top: 0px; } } a.ste-toggle { -webkit-mask-image: url(images/auxIcons.svg#ste); mask-image: url(images/auxIcons.svg#ste); -webkit-mask-position: 8px 5px; mask-position: 8px 5px; } .page-statistics-toggle { -webkit-mask-image: url(images/auxIcons.svg#pts); mask-image: url(images/auxIcons.svg#pts); -webkit-mask-position: 8px 5px; mask-position: 8px 5px; } .obo-toggle:hover, .obo-toggle:focus, .obo-toggle.on, a.ste-toggle:hover, a.ste-toggle:focus, a.ste-toggle.on, .page-statistics-toggle:hover, .page-statistics-toggle:focus, .page-statistics-toggle.on { background: var(--color-accent-teal); } @media (min-width: 992px) { .obo-toggle:hover, .obo-toggle:focus, .obo-toggle.on, a.ste-toggle:hover, a.ste-toggle:focus, a.ste-toggle.on, .page-statistics-toggle:hover, .page-statistics-toggle:focus, .page-statistics-toggle.on { background: var(--color-accent-teal-light); } } .obo-toggle.on:hover, .obo-toggle.on:focus, a.ste-toggle.on:hover, a.ste-toggle.on:focus, .page-statistics-toggle.on:hover, .page-statistics-toggle.on:focus { background: var(--color-white); } .searchbar-toggle { -webkit-mask-image: url(images/auxIcons.svg#search-white); mask-image: url(images/auxIcons.svg#search-white); } .header-aux-container .UtilityAuthentication a:hover, .header-aux-container .UtilityAuthentication a:focus, .header-aux-container .UtilityAuthentication a:hover span, .header-aux-container .UtilityAuthentication a:focus span, .header-aux-container a.NavigationLink:hover, .header-aux-container a.NavigationLink:focus, .header-aux-container a.NavigationLink:hover span, .header-aux-container a.NavigationLink:focus span, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:hover, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:focus, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:hover span, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:focus span, .header-aux-container .account-toggle .nav-text:hover, .header-aux-container .account-toggle .nav-text:focus, .header-aux-container .account-toggle .nav-text:hover span, .header-aux-container .account-toggle .nav-text:focus span { text-decoration: none; color: var(--color-accent-teal); } @media (min-width: 992px) { .header-aux-container .UtilityAuthentication a:hover, .header-aux-container .UtilityAuthentication a:focus, .header-aux-container .UtilityAuthentication a:hover span, .header-aux-container .UtilityAuthentication a:focus span, .header-aux-container a.NavigationLink:hover, .header-aux-container a.NavigationLink:focus, .header-aux-container a.NavigationLink:hover span, .header-aux-container a.NavigationLink:focus span, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:hover, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:focus, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:hover span, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:focus span, .header-aux-container .account-toggle .nav-text:hover, .header-aux-container .account-toggle .nav-text:focus, .header-aux-container .account-toggle .nav-text:hover span, .header-aux-container .account-toggle .nav-text:focus span { color: var(--color-accent-teal-light); } } .header-aux-container .nav-aux-cart a.NavigationLink:hover, .header-aux-container .nav-aux-cart a.NavigationLink:focus, .header-aux-container .nav-aux-cart a.NavigationLink:hover span, .header-aux-container .nav-aux-cart a.NavigationLink:focus span { color: var(--color-white); } .navbar-toggle .icon-search { display: none; } .nav-auxiliary .nav-aux-button.nav-aux-account .nav-text { padding: 0; background: none; } @media (max-width: 991px) { .nav-auxiliary .nav-aux-button.nav-aux-account .nav-text { background: var(--color-ink); -webkit-mask-size: 18px 18px; mask-size: 18px 18px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-image: url(images/auxIcons.svg#person); mask-image: url(images/auxIcons.svg#person); margin: 0; } } @media (max-width: 991px) { .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text { margin: 0; } } .nav-auxiliary .nav-aux-button.nav-aux-cart .NavigationLink { width: auto; } .nav-auxiliary .nav-aux-button.nav-aux-cart .cartFull { position: absolute; top: 5px; right: auto; left: 7px; } @media (max-width: 991px) { .nav-auxiliary .nav-aux-button.nav-aux-cart .cartFull { top: 0px; } } .nav-auxiliary .nav-aux-button.nav-aux-cart .cartCenter { color: var(--color-white); background-color: var(--color-accent-teal); border-radius: 20px; font-size: 1em; line-height: 1; padding: 0 2px 1px; box-shadow: -1px 1px 0 rgba(var(--color-text-rgb), 0.6); display: block; width: 22px; height: 22px; font-weight: 600; line-height: 1.7; } @media (max-width: 991px) { .nav-auxiliary .nav-aux-button.nav-aux-cart .NavigationLink, .nav-auxiliary .nav-aux-button.nav-aux-account .NavigationLink { width: 30px; height: 30px; margin: 0; } } .menu-toggle { -webkit-mask-image: url(images/auxIcons.svg#menu); mask-image: url(images/auxIcons.svg#menu); -webkit-mask-size: 18px 18px; mask-size: 18px 18px; -webkit-mask-position: center 8px; mask-position: center 8px; } .menu-toggle .icon-bar { display: none; } a.ste-toggle { background: var(--aux-link-color); } .UtilitySTEToggle { margin: 0; } .EasyEditOn header#hd .EasyEditContent:hover, .EasyEditOn footer#ft .EasyEditContent:hover { background: transparent; } .obo-panel, .obo-panel a { color: var(--color-white); } .obo-toggle, .obo-toggle.on { background-position: 0 -518px; } .UtilitySearch label { color: var(--color-white); } @media (min-width: 992px) { .UtilitySearch .search-container-sm { display: block !important; } } .UtilitySearch #SimpleSearchBlock .search-field { background-position: 4px 2px; border-radius: 3px; height: 25px; width: 150px; color: var(--color-white); font-size: 12px; border: 1px solid var(--color-white); background-image: url(images/auxIcons.svg#search-white); background-size: 16px 18px; background-color: rgba(var(--shadow-rgb), 0.2); display: block; box-shadow: none; } .UtilitySearch #SimpleSearchBlock .search-field:focus, .UtilitySearch #SimpleSearchBlock .search-field:hover, .UtilitySearch #SimpleSearchBlock .search-field:active { width: 150px; background-color: var(--color-text); color: var(--color-white); } .search-container .search-field { width: 100%; max-width: 360px; background-position: 4px 2px; border-radius: 3px; margin: 0px auto; height: 25px; color: var(--color-text); font-size: 75%; border: 1px solid var(--color-text); background-image: url(images/auxIcons.svg#search); background-size: 16px 18px; background-color: transparent; background-repeat: no-repeat; display: block; box-shadow: none; padding-left: 28px; } .search-container .TextButton { display: none; } .transaction-date-toggle.on, .transaction-date-toggle.on:hover, .list-toggle.on, .list-toggle.on:hover { background-position-y: -70px; background-color: var(--color-white); } .account-menu .dropdown-menu { font-size: 90%; border-radius: 4px; border: 0; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); } .account-menu .dropdown-menu > li > a { font-weight: 300; } .account-menu .dropdown-menu > li > a:hover, .account-menu .dropdown-menu > li > a:focus { background: var(--color-grey-lightest); color: var(--color-accent-teal); } .account-menu .obo-label, .account-menu .dropdown-header { color: var(--color-text); font-weight: 600; } .account-menu .obo-label { color: var(--color-white); } .account-menu .profile-picture-wrapper { margin-right: 10px; } .account-menu .account-toggle:hover, .account-menu .account-toggle:focus { border: 0; } .account-menu .account-toggle:hover .nav-text, .account-menu .account-toggle:focus .nav-text { text-decoration: none; color: var(--color-accent-teal); } @media (min-width: 992px) { .account-menu .account-toggle:hover .nav-text, .account-menu .account-toggle:focus .nav-text { color: var(--color-accent-teal-light); } } .account-menu .account-toggle:hover .caret, .account-menu .account-toggle:focus .caret { background: var(--color-accent-teal); } @media (min-width: 992px) { .account-menu .account-toggle:hover .caret, .account-menu .account-toggle:focus .caret { background: var(--color-accent-teal-light); } } .account-menu .account-toggle .caret { border: 0; background: var(--color-white); -webkit-mask-image: url(images/auxIcons.svg#caret); mask-image: url(images/auxIcons.svg#caret); -webkit-mask-size: 10px 10px; mask-size: 10px 10px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; width: 12px; height: 12px; display: block; margin-left: 5px; } /*Carousel indicators*/ .carousel-indicators li { margin: 0px 2px; width: 12px; height: 12px; } .carousel-indicators li.active { margin: 0px 2px; } .header-background-container { overflow: hidden; display: none; } .header-background-container .item.active { background-position: center; } html:not(.t-ie) .Wrapper-HomePage .header-background-container .item.active { animation: none; } .Wrapper-HomePage .header-background-container .ContentItemContainer > .ContentItemContainer { background: var(--color-dark); background: var(--color-dark) linear-gradient(27deg, var(--color-dark) 90%, var(--color-dark) 0%); } .header-background-container .carousel-inner.bg-img > .item { background-color: var(--color-dark); } header.header { border-bottom: none; background: var(--color-header-bg); box-shadow: 0px 0px 32px 0px rgba(var(--shadow-rgb), 0.75); margin: 0; z-index: 200; } header.header .header-logo-container { align-self: flex-start; padding-left: 30px; } @media (max-width: 991px) { header.header .header-logo-container { align-self: center; justify-self: center; padding: 0; } } @media (min-width: 1380px) { header.header .header-primary-nav-container { max-width: 1000px; justify-self: center; } header.header .header-logo-container { max-width: 380px; justify-self: center; } } header.header .header-aux-container { padding-right: 0; } @media (max-width: 991px) { header.header .header-aux-container { padding-bottom: 20px; } } /*Homepage override*/ @media (min-width: 992px) { .Wrapper-HomePage header.header { grid-template: "utility utility" auto "logo primary-nav" auto "banner banner" auto; grid-template-areas: "utility utility" "logo primary-nav" "banner banner"; } .Wrapper-HomePage header.header > .header-logo-container { -ms-grid-row: 2; -ms-grid-column: 1; } .Wrapper-HomePage header.header > .header-logo-container { -ms-grid-row: 2; -ms-grid-column: 1; } .Wrapper-HomePage header.header > .header-aux-container { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; } .Wrapper-HomePage header.header > .header-aux-container { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; } .Wrapper-HomePage header.header > .header-primary-nav-container { -ms-grid-row: 2; -ms-grid-column: 2; } .Wrapper-HomePage header.header > .header-primary-nav-container { -ms-grid-row: 2; -ms-grid-column: 2; } .Wrapper-HomePage header.header > .home-page-header-container, .Wrapper-HomePage header.header > .internal-header-container { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 2; } .Wrapper-HomePage header.header > .home-page-header-container, .Wrapper-HomePage header.header > .internal-header-container { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 2; } } .Wrapper-HomePage header.header:after { display: none; } .Wrapper-HomePage header.header .home-page-header-container { display: none; } .Wrapper-HomePage header.header .header-background-container { display: block; position: relative; height: 700px; } .Wrapper-HomePage header.header .header-background-container:before { background-image: linear-gradient(to bottom, rgba(var(--color-text-rgb), 0.6) 0, rgba(var(--shadow-rgb), 0) 100%); background-repeat: repeat-x; } .Wrapper-HomePage header.header .header-background-container .carousel-inner .item:after { background: rgba(var(--color-text-rgb), 0.5); top: 0; right: 0; bottom: 0; left: 0; width: 100%; display: block; content: ''; position: absolute; } .Wrapper-HomePage header.header .header-background-container .carousel-inner:after { display: none; } .Wrapper-HomePage header.header .header-background-container .carousel-control { display: none; } .Wrapper-HomePage header.header .header-background-container .carousel-caption { width: 95%; left: 5%; top: 50%; transform: translateY(-50%); bottom: auto; padding: 0; opacity: 0; animation: fade-in 1s ease-in; animation-delay: 1s; animation-fill-mode: forwards; position: absolute; } @media (min-width: 992px) { .Wrapper-HomePage header.header .header-background-container .carousel-caption { width: 65%; } .Wrapper-HomePage header.header .header-background-container .carousel-caption h1 { font-size: 3.3em; } .Wrapper-HomePage header.header .header-background-container .carousel-caption p { font-size: 1.2em; } } .Wrapper-HomePage header.header .header-background-container .carousel-caption h1 { text-transform: none; } .Wrapper-HomePage header.header .header-background-container .carousel-indicators li { border: 0; border-radius: 1px; width: 45px; height: 5px; background-color: rgba(var(--overlay-light-rgb), 0.6); } .Wrapper-HomePage header.header .header-background-container .carousel-indicators li:hover, .Wrapper-HomePage header.header .header-background-container .carousel-indicators li:focus { background-color: var(--color-accent-teal); } .Wrapper-HomePage header.header .header-background-container .carousel-indicators li.active { background: var(--color-white); } .Wrapper-HomePage header.header .header-background-container .carousel-indicators li.active:hover, .Wrapper-HomePage header.header .header-background-container .carousel-indicators li.active:focus { background-color: var(--color-accent-teal); } body:not(.Wrapper-HomePage) .home-page-header-container, .internal-header-container { display: none; } @media (min-width: 992px) { header.header .header-logo-container { align-self: center; } #masterHeaderImage { transition: transform 0.2s ease; height: 67px; } #masterHeaderImage:hover { transform: scale(1.05); } } @media (max-width: 991px) { #masterHeaderImage { width: 270px; height: 67px; margin: 10px 0px; background-size: contain; position: relative; } .UtilitySection.UtilitySearch { display: none; } } .internal-header-container { display: none; } /* Primary Navigation */ .RadMenu.RadMenu_Coffee { margin-top: 20px; margin-bottom: 20px; } @media (min-width: 992px) { .RadMenu.RadMenu_Coffee { padding-right: 30px; } } .RadMenu.RadMenu_Coffee .rmRootLink { border: 1px solid transparent; border-radius: 4px; display: block !important; transition: border 0.3s ease-in; } @media (min-width: 992px) { .RadMenu.RadMenu_Coffee .rmRootGroup { display: flex; flex-wrap: wrap; } } .RadMenu.RadMenu_Coffee .rmRootGroup > li > div.rmSlide .rmGroup { animation: bubble-effect 0.2s ease-in; animation-fill-mode: forwards; } .RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup { margin: 0; padding: 0px; border-radius: 4px; } .RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup .rmFirst .rmLink { border-radius: 4px 4px 0px 0px; } .RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup .rmLast .rmLink { border-radius: 0px 0px 4px 4px; } .RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup.rmLevel2 { margin: 0; padding: 0px; box-shadow: none; } .RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup .rmLink { transition: all 0.2s ease-in; } .RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup .rmLink .rmText { padding: 8px 30px 8px 15px; width: 100%; } .RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup .rmLink:hover, .RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup .rmFocused, .RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup .rmExpanded { color: var(--color-accent-teal); } .RadMenu.RadMenu_Coffee .rmTwoLevels .rmSlide .rmSlide .rmGroup { background: none; } .RadMenu.RadMenu_Coffee .rmSlide { float: none; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); border-radius: 4px; } .RadMenu.RadMenu_Coffee .rmTwoLevels .rmSlide .rmSlide { box-shadow: none; } .RadMenu.RadMenu_Coffee .rmHorizontal .rmText, .RadMenu.RadMenu_Coffee .rmText { padding: 5px 15px; display: inline-block !important; } @media (max-width: 991px) { .RadMenu.RadMenu_Coffee .rmHorizontal .rmText, .RadMenu.RadMenu_Coffee .rmText { width: 95%; white-space: break-spaces; } } @media (min-width: 992px) { .RadMenu.RadMenu_Coffee .rmGroup.rmLevel1 .rmToggle { display: none; } .RadMenu.RadMenu_Coffee .rmExpandRight, .RadMenu.RadMenu_Coffee .rmGroup a.rmLink.rmExpandRight { background-image: none; } } @media (max-width: 991px) { .RadMenu.RadMenu_Coffee .rmGroup.rmLevel1 .rmToggle { display: block; position: absolute; right: 8px; } .RadMenu.RadMenu_Coffee .rmGroup.rmLevel1 .rmSlide { top: 45px !important; } .RadMenu.RadMenu_Coffee .rmGroup.rmLevel1 .rmGroup { padding-left: 15px; } } @media (max-width: 991px) { .RadMenu.MegaDropDownMenuOuter div.rmSlide { position: static; } } /* Side Internal */ .nav-secondary .sub-nav-head { font-size: 1em; text-transform: none; font-weight: 600; border-bottom: 1px solid var(--color-grey-300); } .RadTreeView.RadTreeView_Coffee .rtIn { display: inline-block; margin: 5px 0; padding: 10px 25px; } .RadTreeView.RadTreeView_Coffee .rtIn:hover { color: var(--color-accent-red); } .RadTreeView.RadTreeView_Coffee .rtUL > .rtLI { border: none; } .RadTreeView.RadTreeView_Coffee > .rtUL > .rtLI .rtLI .rtIn { /* children should have less padding */ padding: 5px 15px; } .RadTreeView.RadTreeView_Coffee > .rtUL > .rtLI > .rtUL { padding-right: 0px; } .RadTreeView.RadTreeView_Coffee .rtUL .rtUL { padding-left: 25px; } .RadTreeView.RadTreeView_Coffee .rtPlus, .RadTreeView.RadTreeView_Coffee .rtMinus { background: var(--color-text); width: 12px; height: 12px; -webkit-mask-image: url("images/auxIcons.svg#caret"); mask-image: url("images/auxIcons.svg#caret"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; top: 19px; left: 5px; margin: 0; } .RadTreeView.RadTreeView_Coffee .rtPlus:before, .RadTreeView.RadTreeView_Coffee .rtMinus:before { display: none; } .RadTreeView.RadTreeView_Coffee .rtPlus:hover, .RadTreeView.RadTreeView_Coffee .rtPlus:focus, .RadTreeView.RadTreeView_Coffee .rtMinus:hover, .RadTreeView.RadTreeView_Coffee .rtMinus:focus { background: var(--color-accent-teal); } .RadTreeView.RadTreeView_Coffee .rtMinus { transform: rotate(180deg); } .account-page-top-area { border-top-left-radius: 24px; } /* Horizontal Tabs */ .RadTabStrip_MetroTouch { background-color: transparent; padding: 5px; } .RadTabStrip_MetroTouch.RadTabStrip_MetroTouch { font: 500 20px var(--font-primary) !important; line-height: 1.6; } html .RadTabStrip_MetroTouch .rtsLevel1 { border: none; margin-bottom: -1px; } html .RadTabStrip_MetroTouch .rtsLevel1 a.rtsLink { background-color: var(--color-brand); color: var(--color-white); padding: 8px 10px 8px 10px; margin: 0px 5px 0 0; border-radius: 4px 4px 0px 0px; border: 1px solid var(--color-border); border-bottom: 0px; font-weight: 500; } @media (max-width: 600px) { html .RadTabStrip_MetroTouch .rtsLevel1 a.rtsLink { border-radius: 0px; } } html .RadTabStrip_MetroTouch .rtsLevel1 a.rtsLink:hover, html .RadTabStrip_MetroTouch .rtsLevel1 a.rtsLink.rtsSelected, html .RadTabStrip_MetroTouch .rtsLevel1 a.rtsLink.rtsSelected:hover { border-color: var(--color-border); background-color: var(--color-white); padding: 8px 10px 8px 10px; text-decoration: none !important; color: var(--color-dark); box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); } html .RadTabStrip_MetroTouch .rtsLevel1 a.rtsLink.rtsSelected, html .RadTabStrip_MetroTouch .rtsLevel1 a.rtsLink.rtsSelected:hover { text-transform: none; } html .RadTabStrip_MetroTouch .rtsLevel1 a.rtsLink.rtsSelected:focus { text-decoration: underline !important; } html .RadTabStrip_MetroTouch .rtsLevel1 .rtsFirst .rtsLink { border-radius: 4px 4px 0px 0px; margin: 0px 5px 0px 10px; font-weight: 500; } @media (max-width: 600px) { html .RadTabStrip_MetroTouch .rtsLevel1 .rtsFirst .rtsLink { margin: 0px; } } .RadMultiPage { background: var(--color-white); border-radius: 4px; border: 1px solid var(--color-border); box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); } .stacked-tabs .select-tab { background: var(--color-brand); } .stacked-tabs .RadMultiPage .RadMultiPage { background: var(--color-white); border-radius: 4px; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); margin-bottom: 40px; border: 1px solid var(--color-border); } .RadTabStrip .rtsLevel1.stacked-list a.rtsLink:hover, .RadTabStrip .rtsLevel1.stacked-list a.rtsLink:focus, .RadTabStrip .rtsLevel1.stacked-list a.rtsLink:active, .RadTabStrip .rtsLevel1.stacked-list a.rtsLink.rtsSelected:hover, .RadTabStrip .rtsLevel1.stacked-list a.rtsLink.rtsSelected:focus, .RadTabStrip .rtsLevel1.stacked-list a.rtsLink.rtsSelected:active { background: var(--color-grey-lightest); color: var(--color-accent-teal); box-shadow: none; } .ContentTabbedDisplay { border-top: 1px solid var(--color-border) !important; } /* Vertical tabs */ .RadTabStripVertical .rtsFirst a.rtsLink { margin: 10px 0px 2px 5px !important; } html .RadTabStripVertical .rtsLevel1 a.rtsLink { margin: 2px 0px 2px 5px; border-radius: 4px 0px 0px 4px; } html .RadTabStripVertical .rtsLevel1 a.rtsLink:hover, html .RadTabStripVertical .rtsLevel1 a.rtsLink.rtsSelected, html .RadTabStripVertical .rtsLevel1 a.rtsLink.rtsSelected:hover { background-color: transparent; color: var(--color-dark); text-transform: none; margin: 2px 0px 2px 5px; border-radius: 4px 0px 0px 4px; } html .RadTabStripVertical .rtsLevel1 a.rtsLink.rtsSelected:focus { text-decoration: underline !important; } .RadTabStripVertical .rtsUL .rtsLink .rtsTxt { border: 1px solid transparent; padding: 8px 10px; display: inline; } .RadTabStripVertical .rtsUL .rtsSelected .rtsTxt, .RadTabStripVertical .rtsUL .rtsLink:hover .rtsTxt { border: 1px solid rgba(var(--overlay-light-rgb), 0.5); border-radius: 4px; } select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { padding: 5px 10px; } .MediumButton, .UseMediumButton .TextButton { font-size: 100% !important; } .LargeButton, .UseLargeButton .TextButton, .UseLargeButton .TextButtonWithImage { font-size: 120% !important; border-radius: 4px; } label, .Label { font-weight: 600; } /* Publication-v27: header page-load entrance animations removed for a lighter touch (was slide-down on home, fade-in on internal pages). To restore, re-add `animation: slide-down-with-delay 1s ease-out;` and `animation: fade-in 1s ease-in;` to these header containers. */ .SearchField label, .SearchResultSummary .ListItemTitle a, .SelectedItem a { font-size: 110%; font-weight: 600; border-radius: 4px; } .SearchField label, .SearchField label:hover, .SearchField label:active, .SearchField label:visited, .SearchResultSummary .ListItemTitle a, .SearchResultSummary .ListItemTitle a:hover, .SearchResultSummary .ListItemTitle a:active, .SearchResultSummary .ListItemTitle a:visited, .SelectedItem a, .SelectedItem a:hover, .SelectedItem a:active, .SelectedItem a:visited { color: var(--color-brand) !important; } .ContentBlockPrimary, .FilterPanel { background-color: transparent; } .transaction-date-toggle { background-position: -210px -103px; } .list-toggle { background-position: -350px -103px; } .RadPicker.RadPicker_Metro .rcCalPopup:hover, .RadPicker.RadPicker_Metro .rcCalPopup:focus, .RadPicker.RadPicker_Metro .rcCalPopup:active, .RadPicker.RadPicker_Metro .rcTimePopup:hover, .RadPicker.RadPicker_Metro .rcTimePopup:focus, .RadPicker.RadPicker_Metro .rcTimePopup:active, .RadPicker.RadPicker_MetroTouch .rcCalPopup:hover, .RadPicker.RadPicker_MetroTouch .rcCalPopup:focus, .RadPicker.RadPicker_MetroTouch .rcCalPopup:active, .RadPicker.RadPicker_MetroTouch .rcTimePopup:hover, .RadPicker.RadPicker_MetroTouch .rcTimePopup:focus, .RadPicker.RadPicker_MetroTouch .rcTimePopup:active { color: var(--color-white); background-color: var(--color-dark); } .RadPicker_Metro.rcCalPopupOpen .rcCalPopup, .RadPicker_Metro.rcMYPopupOpen .rcCalPopup, .RadPicker_Metro.rcTimePopupOpen .rcTimePopup { border-color: var(--color-dark); } /* Recent History iPart */ .RecentHistoryListHorizontal > li > a { font-size: 85%; padding: 8px 18px; border-radius: 4px; border: 1px solid transparent; text-decoration: none; } .RecentHistoryListHorizontal > li.RecentHistoryClear > a:hover, .RecentHistoryListHorizontal > li.RecentHistoryClear > a:active { text-decoration: underline; } .RecentHistoryListHorizontal > li.RecentHistoryItem > a { background-color: var(--color-white); box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); } .RecentHistoryListHorizontal > li.RecentHistoryItem > a:hover, .RecentHistoryListHorizontal > li.RecentHistoryItem > a:active { border-color: var(--color-dark); } .radiobutton-btn-group input[type="radio"]:checked + label, .radiobutton-buttons input[type="radio"]:checked + label { background: var(--color-accent-green); border-color: var(--color-accent-green); color: var(--color-white); } /* Individual social sprite buttons */ .SocialSprite.FacebookIcon { background: var(--color-white) !important; /* !important - Help upgrades with custom themes, remove eventually */ } .SocialSprite.FacebookIcon:after { background-color: var(--color-dark); } .SocialSprite.FacebookIcon:hover, .SocialSprite.FacebookIcon:focus { background-color: var(--color-facebook) !important; } .SocialSprite.FacebookIcon:hover:after, .SocialSprite.FacebookIcon:focus:after { background-color: var(--color-white) !important; } .SocialSprite.TwitterIcon { background: var(--color-white) !important; /* !important - Help upgrades with custom themes, remove eventually */ } .SocialSprite.TwitterIcon:after { background-color: var(--color-dark); } .SocialSprite.TwitterIcon:hover, .SocialSprite.TwitterIcon:focus { background-color: var(--color-ink) !important; } .SocialSprite.TwitterIcon:hover:after, .SocialSprite.TwitterIcon:focus:after { background-color: var(--color-white) !important; } .SocialSprite.XIcon { background: var(--color-white) !important; /* !important - Help upgrades with custom themes, remove eventually */ } .SocialSprite.XIcon:after { background-color: var(--color-dark); } .SocialSprite.XIcon:hover, .SocialSprite.XIcon:focus { background-color: var(--color-ink) !important; } .SocialSprite.XIcon:hover:after, .SocialSprite.XIcon:focus:after { background-color: var(--color-white) !important; } .SocialSprite.LinkedInIcon { background: var(--color-white) !important; /* !important - Help upgrades with custom themes, remove eventually */ } .SocialSprite.LinkedInIcon:after { background-color: var(--color-dark); } .SocialSprite.LinkedInIcon:hover, .SocialSprite.LinkedInIcon:focus { background-color: var(--color-linkedin) !important; } .SocialSprite.LinkedInIcon:hover:after, .SocialSprite.LinkedInIcon:focus:after { background-color: var(--color-white) !important; } .SocialSprite.YouTubeIcon { background: var(--color-white) !important; /* !important - Help upgrades with custom themes, remove eventually */ } .SocialSprite.YouTubeIcon:after { background-color: var(--color-dark); } .SocialSprite.YouTubeIcon:hover, .SocialSprite.YouTubeIcon:focus { background-color: var(--color-youtube) !important; } .SocialSprite.YouTubeIcon:hover:after, .SocialSprite.YouTubeIcon:focus:after { background-color: var(--color-white) !important; } .SocialSprite.EmailIcon { background: var(--color-white) !important; /* !important - Help upgrades with custom themes, remove eventually */ } .SocialSprite.EmailIcon:after { background-color: var(--color-dark); } .SocialSprite.EmailIcon:hover, .SocialSprite.EmailIcon:focus { background-color: var(--color-social-email) !important; } .SocialSprite.EmailIcon:hover:after, .SocialSprite.EmailIcon:focus:after { background-color: var(--color-white) !important; } .SocialSprite.PinterestIcon { background: var(--color-white) !important; /* !important - Help upgrades with custom themes, remove eventually */ } .SocialSprite.PinterestIcon:after { background-color: var(--color-dark); } .SocialSprite.PinterestIcon:hover, .SocialSprite.PinterestIcon:focus { background-color: var(--color-pinterest) !important; } .SocialSprite.PinterestIcon:hover:after, .SocialSprite.PinterestIcon:focus:after { background-color: var(--color-white) !important; } .SocialSprite.GPlusIcon { background: var(--color-white) !important; /* !important - Help upgrades with custom themes, remove eventually */ } .SocialSprite.GPlusIcon:after { background-color: var(--color-dark); } .SocialSprite.GPlusIcon:hover, .SocialSprite.GPlusIcon:focus { background-color: var(--color-accent-red) !important; } .SocialSprite.GPlusIcon:hover:after, .SocialSprite.GPlusIcon:focus:after { background-color: var(--color-white) !important; } .SocialSprite.SkypeIcon { background: var(--color-white) !important; /* !important - Help upgrades with custom themes, remove eventually */ } .SocialSprite.SkypeIcon:after { background-color: var(--color-dark); } .SocialSprite.SkypeIcon:hover, .SocialSprite.SkypeIcon:focus { background-color: var(--color-skype) !important; } .SocialSprite.SkypeIcon:hover:after, .SocialSprite.SkypeIcon:focus:after { background-color: var(--color-white) !important; } .SocialSprite.InstagramIcon { background: var(--color-white) !important; /* !important - Help upgrades with custom themes, remove eventually */ } .SocialSprite.InstagramIcon:after { background-color: var(--color-dark); } .SocialSprite.InstagramIcon:hover, .SocialSprite.InstagramIcon:focus { background-color: var(--color-instagram) !important; } .SocialSprite.InstagramIcon:hover:after, .SocialSprite.InstagramIcon:focus:after { background-color: var(--color-white) !important; } .SocialSprite.MediumIcon { background: var(--color-white) !important; /* !important - Help upgrades with custom themes, remove eventually */ } .SocialSprite.MediumIcon:after { background-color: var(--color-dark); } .SocialSprite.MediumIcon:hover, .SocialSprite.MediumIcon:focus { background-color: var(--color-ink) !important; } .SocialSprite.MediumIcon:hover:after, .SocialSprite.MediumIcon:focus:after { background-color: var(--color-white) !important; } .SocialSprite.TikTokIcon { background: var(--color-white) !important; /* !important - Help upgrades with custom themes, remove eventually */ } .SocialSprite.TikTokIcon:after { background-color: var(--color-dark); } .SocialSprite.TikTokIcon:hover, .SocialSprite.TikTokIcon:focus { background-color: var(--color-ink) !important; } .SocialSprite.TikTokIcon:hover:after, .SocialSprite.TikTokIcon:focus:after { background-color: var(--color-white) !important; } .SocialSprite.SnapChatIcon { background: var(--color-white) !important; /* !important - Help upgrades with custom themes, remove eventually */ } .SocialSprite.SnapChatIcon:after { background-color: var(--color-dark); } .SocialSprite.SnapChatIcon:hover, .SocialSprite.SnapChatIcon:focus { background-color: var(--color-snapchat) !important; } .SocialSprite.SnapChatIcon:hover:after, .SocialSprite.SnapChatIcon:focus:after { background-color: var(--color-white) !important; } .SocialSprite { background: var(--color-white); opacity: 1; margin: 0px 3px; } .SocialSprite.LargeButtons { width: 35px; height: 35px; } .SocialSprite.LargeButtons:after { width: 20px; height: 20px; } /**Member homepage**/ .mhp, .account-page { /*100 community - blog*/ } .mhp .engage .panel-body-container, .account-page .engage .panel-body-container { padding: 20px 15px 80px 15px; } .mhp .engagement-link, .account-page .engagement-link { margin-top: -100px; margin-bottom: 80px; padding: 0px 15px; } @media (max-width: 767px) { .mhp .engagement-link, .account-page .engagement-link { margin-top: -135px; } } .mhp .CommunityItemActionLinks, .mhp .CommunityParentLink, .mhp .CommunityItemBody, .account-page .CommunityItemActionLinks, .account-page .CommunityParentLink, .account-page .CommunityItemBody { display: none; } .mhp .CommunityDateLine, .account-page .CommunityDateLine { font-size: 0.8em; font-style: normal; } .mhp .CommunityDateLine a, .account-page .CommunityDateLine a { color: var(--color-text); font-weight: 600; } .mhp .CommunityCommentItem, .mhp .CommunityTopicItem, .account-page .CommunityCommentItem, .account-page .CommunityTopicItem { margin: 0px 0px 20px 0px; padding: 15px; border-radius: 4px; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); border: 1px solid var(--color-border); background: var(--color-white); } .mhp .CommunityCommentItem .CommunityParentLink, .account-page .CommunityCommentItem .CommunityParentLink { display: block; margin-left: 60px; } .mhp .CommunityCommentItem .CommunityParentLink:before, .account-page .CommunityCommentItem .CommunityParentLink:before { content: 'Reply to'; background-image: var(--icon-reply); background-repeat: no-repeat; background-size: 14px 10px; background-position: left center; padding-left: 20px; } .mhp .CommunityProfileTitle, .account-page .CommunityProfileTitle { margin: 0; } .mhp .CommunityProfilePicture img, .account-page .CommunityProfilePicture img { border-radius: 50px; border: 1px solid var(--color-border); } .mhp .CommunityItemTitle, .account-page .CommunityItemTitle { font-weight: 600; font-size: 1em; } .mhp .CommunityRepeaterTable .p-3, .account-page .CommunityRepeaterTable .p-3 { margin: 0px 0px 20px 0px; padding: 25px !important; border-radius: 4px; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); border: 1px solid var(--color-border); background: var(--color-white); font-size: 0.89em; } .mhp .CommunityRepeaterTable .pt-3, .account-page .CommunityRepeaterTable .pt-3 { display: none; } .mhp .CommunityRepeaterTable .SectionTitle, .account-page .CommunityRepeaterTable .SectionTitle { color: var(--color-brand); font-weight: 600; font-size: 1em; } .mhp .CommunityRepeaterTable .SectionTitle:hover, .mhp .CommunityRepeaterTable .SectionTitle:focus, .mhp .CommunityRepeaterTable .SectionTitle:active, .account-page .CommunityRepeaterTable .SectionTitle:hover, .account-page .CommunityRepeaterTable .SectionTitle:focus, .account-page .CommunityRepeaterTable .SectionTitle:active { color: var(--color-brand-dark); } .mhp .CommunityRepeaterTable .PublishDate, .account-page .CommunityRepeaterTable .PublishDate { font-style: normal; font-size: 0.78em; } .mhp .CommunityRepeaterTable .PublishDate span:last-of-type, .account-page .CommunityRepeaterTable .PublishDate span:last-of-type { font-weight: 600; } @media (max-width: 767px) { .mhp .row, .account-page .row { max-width: 500px; margin: 0px auto; } } .mhp-community .panel-heading { display: none; } .mhp-community .panel-body, .mhp-community .PanelBody { padding: 0px; } .no-HR hr { display: none; } .medium-chartbox .donut-bite:BEFORE { background-color: var(--color-white) !important; } .medium-chartbox span.donut-filling { font-weight: 700; font-size: 3em; color: var(--color-ink); } .medium-chartbox .donut-caption { font-weight: 700; font-size: 1.3em; } .large.donut-bite:before, .large.donut-bite:after { background-color: var(--color-accent-green) !important; } /**CTA icons**/ .cta-icon { display: flex; background: var(--color-white); text-align: center; border-radius: 4px; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); padding: 30px; position: relative; border: 1px solid var(--color-border); min-height: 184px; justify-content: center; align-items: center; } .cta-icon a { color: var(--color-ink); } .cta-icon a img { margin: 0px auto 10px auto; transition: all 0.2s ease; display: block; height: 65px !important; } .cta-icon a:hover, .cta-icon a:focus, .cta-icon a:active { text-decoration: none; } .cta-icon a:hover img, .cta-icon a:focus img, .cta-icon a:active img { transform: scale(1.1); } @media (max-width: 991px) { .ctas .col-sm-4 { width: 50%; } } @media (max-width: 767px) { .ctas .col-sm-4 { width: 100%; padding: 0; } } @media (max-width: 767px) { .reverse-mobile { flex-direction: column-reverse; } } /*Member home purchases*/ .orders { font-weight: 300; margin-bottom: 40px; } .orders .panel-body, .orders .PanelBody { padding: 0px 15px; } .orders .QueryTemplateSet { gap: 0px 2%; } .orders .col { width: 31%; margin: 0; padding: 0; } .orders .card { border-radius: 4px; overflow: hidden; border: 1px solid var(--color-border); box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); } .orders .card-body { padding: 15px; } .orders a { font-weight: 600; } .orders a.readMore { margin: 10px 0px 0px -15px; display: block; } .orders .date { font-size: 0.89em; margin: -5px 0px 10px 0px; } .orders .title { margin-bottom: 2px; } .orders .total { margin-bottom: 10px; } .orders .shipped { font-weight: 600; } .orders .balance { background-color: var(--color-accent-orange); padding: 5px 10px; border-radius: 4px; } @media (max-width: 991px) { .orders .col { width: 100%; flex: auto; margin-bottom: 25px !important; } .orders .panel-body, .orders .PanelBody { padding: 0px; } .orders a.readMore { margin: 0px; display: block; } } .blue-heading h1, .blue-heading h2, .blue-heading h3, .blue-heading h4, .blue-heading h5, .blue-heading h6 { color: var(--color-brand); } .no-panel-padding .panel-body, .no-panel-padding .PanelBody { padding: 0px; } .no-query-header thead { display: none; } .AddressEditor .panel-body-container { box-shadow: none; border: 0; margin-bottom: 0px; } .AddressEditor .ContentTabbedDisplay { border-top: 0 !important; } .AddressEditor a { line-break: anywhere; } /*Member home profile*/ .mhp .profile { background: var(--color-white); border-radius: 4px; box-shadow: 0px 0px 10px 0px rgba(var(--shadow-rgb), 0.1); margin-bottom: 40px; border: 1px solid var(--color-border); padding-top: 15px; } .mhp .profile .iMIS-WebPart > .ContentItemContainer, .mhp .profile .WebPartZone > .ContentItemContainer { margin: 0; } .mhp .profile .profile-link { margin: 0px 0px 10px 0px; } .my-profile { text-align: center; font-weight: 300; } .my-profile .image { display: block; background-size: cover; background-position: center; width: 150px; height: 150px; border-radius: 150px; margin: 0px auto; } .my-profile .name { display: block; font-weight: 600; font-size: 1.33em; margin: 15px 0px 0px 0px; } .icon-search { width: 20px; height: 20px; position:relative; a { &:before { display:inline-block; content:''; position:absolute; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 38.4042 38.4028'%3E%3C!-- Generator: Adobe Illustrator 29.3.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 151) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; fill-rule: evenodd; %7D %3C/style%3E%3C/defs%3E%3Cpath id='Path_514' class='st0' d='M14.4,4.7986c-5.3019,0-9.6,4.2981-9.6,9.6s4.2981,9.6,9.6,9.6,9.6-4.2981,9.6-9.6-4.2981-9.6-9.6-9.6h0ZM0,14.3986C.0008,6.4457,6.4485-.0008,14.4014,0c7.9529.0008,14.3994,6.4485,14.3986,14.4014-.0003,2.9877-.9299,5.9014-2.66,8.3372l11.56,11.56c.9389.9389.9389,2.4611,0,3.4s-2.4611.9389-3.4,0l-11.56-11.56c-6.4833,4.6061-15.473,3.0843-20.079-3.399C.9298,20.3028-.0002,17.3877,0,14.3986Z'/%3E%3C/svg%3E"); width: 20px; height: 20px; top:0; left:0; } .nav-text { display:none; } } }/* ========================================================================== LAYOUT HELPERS (column systems + content width + alignment) Curated from AREMA. Apply the .columns-* class to a WebPartZone (or a TaggedListPanel) to lay its child zones out in a responsive grid. Gaps use the --space-* scale so spacing stays consistent site-wide. ========================================================================== */ /* Multi-column zone layouts (single-column below 700px, grid above) */ @media (min-width: 700px) { .columns-2.WebPartZone, .columns-2 .TaggedListPanel, .columns-3.WebPartZone, .columns-3 .TaggedListPanel, .columns-4.WebPartZone, .columns-4 .TaggedListPanel, .columns-40-60.WebPartZone, .columns-40-60 .TaggedListPanel, .columns-60-40.WebPartZone, .columns-60-40 .TaggedListPanel, .columns-25-75.WebPartZone, .columns-25-75 .TaggedListPanel, .columns-75-25.WebPartZone, .columns-75-25 .TaggedListPanel, .columns-20-80.WebPartZone, .columns-20-80 .TaggedListPanel, .columns-80-20.WebPartZone, .columns-80-20 .TaggedListPanel { display: grid; grid-auto-flow: row; grid-gap: var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--space-6); } .columns-3.WebPartZone, .columns-3 .TaggedListPanel { grid-template-columns: repeat(3, minmax(0, 1fr)); } .columns-4.WebPartZone, .columns-4 .TaggedListPanel { grid-template-columns: repeat(4, minmax(0, 1fr)); } .columns-40-60.WebPartZone, .columns-40-60 .TaggedListPanel { grid-template-columns: minmax(0, 40%) minmax(0, 60%); } .columns-60-40.WebPartZone, .columns-60-40 .TaggedListPanel { grid-template-columns: minmax(0, 60%) minmax(0, 40%); } .columns-25-75.WebPartZone, .columns-25-75 .TaggedListPanel { grid-template-columns: minmax(0, 25%) minmax(0, 75%); } .columns-75-25.WebPartZone, .columns-75-25 .TaggedListPanel { grid-template-columns: minmax(0, 75%) minmax(0, 25%); } .columns-20-80.WebPartZone, .columns-20-80 .TaggedListPanel { grid-template-columns: minmax(0, 20%) minmax(0, 80%); } .columns-80-20.WebPartZone, .columns-80-20 .TaggedListPanel { grid-template-columns: minmax(0, 80%) minmax(0, 20%); } /* Reverse visual order without changing source order */ .columns-rev.WebPartZone, .columns-rev .TaggedListPanel { direction: rtl; } .columns-rev.WebPartZone > div, .columns-rev .TaggedListPanel > div { direction: ltr; } /* Remove the gap on a per-zone basis */ .columns-gap-0.WebPartZone, .columns-gap-0 .TaggedListPanel { grid-gap: 0; } } /* Content width constraints */ .content-width-narrow { max-width: 800px; margin-inline: auto; } .content-width-full { width: 100vw; margin-left: calc(50% - 50vw); } /* Simple alignment / float utilities */ .float-left { float: left; } .float-right { float: right; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .v-center { display: flex; justify-content: center; } .v-bottom { display: flex; justify-content: flex-end; } /* Keep a 16:9 frame for embedded video */ .youtube-video { aspect-ratio: 16 / 9; width: 100%; } figure.article-image-caption { margin: 1.5rem; img { width: 100% !important; } figcaption { color: var(--color-heading, black); font-size: .8em; margin-block: 1rem; width: 100% !important; } }/* ========================================================================== IQA LAYOUT HELPERS Turn an iMIS IQA query result (a RadGrid table) into a clean, responsive card grid. Add one of these classes to the Query Menu / IQA iPart's "CSS Class" field: .iqa-table-columns responsive auto grid (default -- fills the row with as many ~300px cards as fit) .iqa-table-columns-2/-3/-4 fixed 2 / 3 / 4 columns Adapted from AREMA's arema-layouts-iqa.css (tokenised, native nesting). Single column below 700px; grid above. The grid's own surface, borders and the header row are stripped so only the cards carry visual weight, and the pager (tfoot) is ordered back to the bottom. ========================================================================== */ [class*="iqa-table-columns"] { /* The iPart's .panel-body adds 10px side padding, insetting the grid from the page's text column. Zero it so the cards' left/right edges line up with the page heading and body copy. */ & .panel-heading, & .panel-body { padding-inline: 0; } & .RadGrid.RadGrid_MetroTouch { /* Telerik's MetroTouch scroll mode pins the grid to a fixed height with overflow:auto; against the flex/grid card layout that leaves a stray scrollbar. Let the grid flow to its natural height instead. !important beats Telerik's per-grid injected height; scoped so no other RadGrid is affected. */ overflow: visible !important; height: auto !important; /* Hide the grid header row */ & thead { display: none; } /* Strip the grid's own surface + edges (background, borders, cell padding) so only the cards carry them */ &, & table, & tbody, & tbody tr.rgRow, & tbody tr.rgAltRow, & tbody td { background: transparent; border: 0; margin: 0; padding: 0; grid-column: auto / span 2; grid-row: auto / span 2; } /* Zero the row-cell padding. Higher specificity than the strip rule above, so it wins against Telerik's own `.rgRow td` cell padding (first-child included). */ & .rgRow td, & .rgAltRow td { padding: 0; } /* Title link: full .RadGrid prefix so these out-specify type.css's `.RadGrid.RadGrid .rgRow a` link rule (0,3,1) -- otherwise the grid link styling forces an underline and link colour on the title. (0,4,1) wins with no !important. */ & .bht-article-title a { color: var(--color-heading); text-decoration: none; } & .bht-article-card:hover .bht-article-title a { color: var(--color-brand); text-decoration: underline; } @media (min-width: 700px) { /* table as a flex column so the pager (tfoot) can be ordered to the bottom */ & table { display: flex; flex-direction: column; width: 100%; } /* rows become the card grid */ & tbody { order: 1; display: grid; grid-auto-flow: row; grid-gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); } /* each row + its visible cell stretch so every card is the same height */ & tbody tr.rgRow, & tbody tr.rgAltRow { display: flex; } & tbody td { display: flex; flex: 1 1 100%; } /* ---- Pager: clean, centered prev/next + page info ------------------ */ /* Telerik renders the pager as a nested table cluttered with a "Change page:" label, first/last jumps, a "Show all" link and a 2x2 arrow sprite. Flatten the nested table (display:contents) so the pager cell centres in the flex footer, hide the clutter, and redraw prev/next as brand chevrons. !important throughout to override the MetroTouch skin; all scoped to .iqa-table-columns so no other grid/pager is touched. */ & tfoot { order: 2; display: flex !important; justify-content: center !important; align-items: center !important; gap: var(--space-4) !important; margin-top: var(--space-6) !important; padding-top: var(--space-5) !important; border-top: 1px solid var(--color-grey-100) !important; } & .rgPager, & .rgPager > td, & .rgPager table, & .rgPager tbody, & .rgPager tbody > tr { display: contents !important; } /* Hide the screen-reader caption/head, the first/last jumps, "Show all" */ & .rgPager thead, & .rgPager caption, & .rgPageFirst, & .rgPageLast, & .rgPager a.AddPaddingLeft { display: none !important; } & .rgPagerCell { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--space-4) !important; padding: 0 !important; background: transparent !important; border: 0 !important; } /* font-size:0 collapses the leading "Change page:" text node */ & .rgArrPart1 { display: inline-flex !important; align-items: center !important; gap: var(--space-4) !important; font-size: 0 !important; } /* Prev/next: brand chevrons drawn with mask-image so the colour stays tokenised (mask uses the SVG's alpha; the fill comes from background-color). */ & .rgPagePrev, & .rgPageNext { width: 26px !important; height: 26px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background-color: var(--color-brand) !important; cursor: pointer !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; -webkit-mask-size: contain !important; mask-size: contain !important; transition: background-color 0.15s ease, transform 0.15s ease !important; } & .rgPagePrev { -webkit-mask-image: url("data:image/svg+xml,") !important; mask-image: url("data:image/svg+xml,") !important; } & .rgPageNext { -webkit-mask-image: url("data:image/svg+xml,") !important; mask-image: url("data:image/svg+xml,") !important; } & .rgPagePrev:hover, & .rgPageNext:hover { background-color: var(--color-brand-dark) !important; transform: scale(1.15) !important; } /* Dim the arrows where Telerik marks them disabled (e.g. first/last page) */ & .rgPagePrev.aspNetDisabled, & .rgPageNext.aspNetDisabled, & .rgPagePrev:disabled, & .rgPageNext:disabled { opacity: 0.25 !important; cursor: default !important; transform: none !important; } & .rgInfoPart { font-size: 0.82em !important; color: var(--color-text) !important; white-space: nowrap !important; font-weight: 500 !important; } } } } .feature-first-article { & .RadGrid.RadGrid_MetroTouch { @media (min-width: 700px) { & tbody > tr:first-child { grid-column: 1 / span 4; grid-row: 1 / span 3; .bht-article-card { & .bht-article-image { aspect-ratio: 3 / 2.5; } } } } } } .feature-first-article-strict { & .RadGrid.RadGrid_MetroTouch { @media (min-width: 700px) { & tbody > tr:first-child { grid-column: 1 / span 4; grid-row: 1 / span 4; .bht-article-card { & .bht-article-image { aspect-ratio: 2.8 / 3; } } } } } } [class*="iqa-table-columns"]:not(.feature-first-article), [class*="iqa-table-columns"]:not(.feature-first-article-strict) { @media (min-width: 700px) { & table tbody:not(:has(> :nth-child(3))) { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); } } } .category-panel-grid .panel { display: grid; grid-template-columns: auto 100px; grid-template-rows: auto; gap: 8px; .panel-heading { grid-column: span 1 / span 1; } .panel-description { grid-column: span 1 / span 1; justify-items: end; align-content: space-around; } .panel-body-container { grid-column: span 2 / span 2; align-content: space-around; } } /* Fixed column counts (>= 700px). Kept as standalone selectors so their specificity matches the auto-fill base rule and they win on source order. */ @media (min-width: 700px) { .iqa-table-columns-2 .RadGrid.RadGrid_MetroTouch tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); } .iqa-table-columns-3 .RadGrid.RadGrid_MetroTouch tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); } .iqa-table-columns-4 .RadGrid.RadGrid_MetroTouch tbody { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Featured layout: one card per row, laid out as a two-up image/text split */ [class*="iqa-table-columns"].iqa-featured-articles .RadGrid.RadGrid_MetroTouch tbody { grid-template-columns: 1fr; & .bht-article-card { order: 1; display: grid; grid-auto-flow: row; grid-gap: var(--space-4); grid-template-columns: 1fr 1fr; & .bht-article-image { /* aspect-ratio: 1 / 1.5;*/ /* max-width: 20vw;*/ margin-inline: auto; } & .bht-article-text { align-content: space-around; } } } /* Featured layout: one card per row, laid out as a two-up image/text split */ [class*="iqa-table-columns"].iqa-featured-articles-alt .RadGrid.RadGrid_MetroTouch tbody { grid-template-columns: 1fr; & .bht-article-card { display: grid; padding-bottom: 0; place-items: self-end center; > * { grid-area: 1 / 1; } & .bht-article-image { aspect-ratio: 3 / 1; /* max-width: 20vw;*/ margin-inline: auto; } & .bht-article-text { align-content: space-around; z-index: 1; padding: 4rem 2rem; & .bht-article-title { text-align: center; &:after { content: 'Read More'; display: block; margin-block: 2rem; font-size: 0.7em; background: rgba(0, 0, 0, .4); color: white; width: -moz-fit-content; width: fit-content; border: 1px solid white; padding: 0.7rem 2rem; text-transform: uppercase; } a { color: var(--color-white); font-size: 2em; text-decoration: none; text-shadow: 0 3px 10px black; } } } & :hover { & .bht-article-title { &:after { color: black; background: rgba(255, 255, 255, .9); border: 1px solid black; } } } } } } /* Optional companion: drop the filter/search panel background (e.g. so it can sit transparently over a hero). Add class .iqa-no-filter-bg alongside. */ .iqa-no-filter-bg .FilterPanel { background-color: transparent; } /* -------------------------------------------------------------------------- ARTICLE CARDS (.bht-article-card) Square-ish (4:3) image, compact un-underlined title, an uppercase byline distinct from the intro, padded text, a hover lift, and a stretched link that makes the whole card clickable. All colours come from theme tokens. -------------------------------------------------------------------------- */ .bht-article-card { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; /* fill the equal-height grid cell */ background: var(--color-white); border: 1px solid var(--color-grey-100); border-radius: var(--radius-lg); overflow: hidden; padding-bottom: var(--space-4); transition: box-shadow 0.2s ease, transform 0.2s ease; &:hover { box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.12); } /* 4:3 trimmed image, flush to the card edges */ & .bht-article-image-link { display: block; overflow: hidden; } & .bht-article-image { display: block; width: 100%; aspect-ratio: 4 / 3; -o-object-fit: cover; object-fit: cover; -o-object-position: var(--image-focus); object-position: var(--image-focus); transition: transform 0.35s ease; } &:hover .bht-article-image { transform: scale(1.04); } /* Text gets breathing room; the image stays flush to the card edges */ & > .bht-article-title, & > .bht-article-meta, & > .bht-article-description { padding-inline: var(--space-4); } /* Title: compact, un-underlined until hover (colour/underline handled by the grid-scoped rules above so they out-specify type.css's link styling) */ & .bht-article-title { font-size: 1.15em; font-weight: 500; line-height: 1.18; margin: var(--space-4) 0 var(--space-2); } /* Author + date: small uppercase byline, clearly not the intro. max() floors the size on narrow viewports: the fluid base shrinks and the sub-em multiplier compounds it, so below the crossover the floor holds; the em value wins at wide widths, leaving the desktop look unchanged. */ & .bht-article-meta { font-size: max(12px, 0.8em); color: var(--color-brand-light); font-style: italic; font-family: var(--font-display); font-weight: 500; letter-spacing: 0; margin-bottom: 0.6em; } /* Intro: smaller, muted body text. max() floors it so narrow viewports stay readable (see the byline note above); the em value wins when wide. */ & .bht-article-description { font-size: max(14px, 0.75em); line-height: 1.5; color: var(--color-text); margin: 0; } /* Whole-card link: a stretched pseudo-element over the card, driven by the title link (so a click anywhere on the card opens the article). */ & .bht-article-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } } .bht-article-text { padding-inline: 10px; } .iqa-featured-articles .bht-article-card { background: transparent; border: none; .bht-article-image { border-radius: var(--radius-lg); } .bht-article-text > * { max-width: 400px; text-wrap: balance; } &:hover { box-shadow: none; } &:hover .bht-article-image { transform: scale(1); } & .bht-article-title { font-size: 1.5em; } }/* ========================================================================== SPACING HELPERS (margin / padding utilities) Generated from the --space-* scale in variables.css, so the whole scale re-tunes by editing those tokens. Steps: 0,1,2,3,4,5,6,7,8 -> 0, 4, 8, 12, 16, 24, 32, 48, 64px Sides: (all), t=top, r=right, b=bottom, l=left, x=inline, y=block ========================================================================== */ .m-0 { margin: var(--space-0); } .mt-0 { margin-top: var(--space-0); } .mr-0 { margin-right: var(--space-0); } .mb-0 { margin-bottom: var(--space-0); } .ml-0 { margin-left: var(--space-0); } .mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); } .my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); } .p-0 { padding: var(--space-0); } .pt-0 { padding-top: var(--space-0); } .pr-0 { padding-right: var(--space-0); } .pb-0 { padding-bottom: var(--space-0); } .pl-0 { padding-left: var(--space-0); } .px-0 { padding-left: var(--space-0); padding-right: var(--space-0); } .py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); } .m-1 { margin: var(--space-1); } .mt-1 { margin-top: var(--space-1); } .mr-1 { margin-right: var(--space-1); } .mb-1 { margin-bottom: var(--space-1); } .ml-1 { margin-left: var(--space-1); } .mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); } .my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); } .p-1 { padding: var(--space-1); } .pt-1 { padding-top: var(--space-1); } .pr-1 { padding-right: var(--space-1); } .pb-1 { padding-bottom: var(--space-1); } .pl-1 { padding-left: var(--space-1); } .px-1 { padding-left: var(--space-1); padding-right: var(--space-1); } .py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); } .m-2 { margin: var(--space-2); } .mt-2 { margin-top: var(--space-2); } .mr-2 { margin-right: var(--space-2); } .mb-2 { margin-bottom: var(--space-2); } .ml-2 { margin-left: var(--space-2); } .mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); } .my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); } .p-2 { padding: var(--space-2); } .pt-2 { padding-top: var(--space-2); } .pr-2 { padding-right: var(--space-2); } .pb-2 { padding-bottom: var(--space-2); } .pl-2 { padding-left: var(--space-2); } .px-2 { padding-left: var(--space-2); padding-right: var(--space-2); } .py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } .m-3 { margin: var(--space-3); } .mt-3 { margin-top: var(--space-3); } .mr-3 { margin-right: var(--space-3); } .mb-3 { margin-bottom: var(--space-3); } .ml-3 { margin-left: var(--space-3); } .mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); } .my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); } .p-3 { padding: var(--space-3); } .pt-3 { padding-top: var(--space-3); } .pr-3 { padding-right: var(--space-3); } .pb-3 { padding-bottom: var(--space-3); } .pl-3 { padding-left: var(--space-3); } .px-3 { padding-left: var(--space-3); padding-right: var(--space-3); } .py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); } .m-4 { margin: var(--space-4); } .mt-4 { margin-top: var(--space-4); } .mr-4 { margin-right: var(--space-4); } .mb-4 { margin-bottom: var(--space-4); } .ml-4 { margin-left: var(--space-4); } .mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); } .my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); } .p-4 { padding: var(--space-4); } .pt-4 { padding-top: var(--space-4); } .pr-4 { padding-right: var(--space-4); } .pb-4 { padding-bottom: var(--space-4); } .pl-4 { padding-left: var(--space-4); } .px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .m-5 { margin: var(--space-5); } .mt-5 { margin-top: var(--space-5); } .mr-5 { margin-right: var(--space-5); } .mb-5 { margin-bottom: var(--space-5); } .ml-5 { margin-left: var(--space-5); } .mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); } .my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); } .p-5 { padding: var(--space-5); } .pt-5 { padding-top: var(--space-5); } .pr-5 { padding-right: var(--space-5); } .pb-5 { padding-bottom: var(--space-5); } .pl-5 { padding-left: var(--space-5); } .px-5 { padding-left: var(--space-5); padding-right: var(--space-5); } .py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); } .m-6 { margin: var(--space-6); } .mt-6 { margin-top: var(--space-6); } .mr-6 { margin-right: var(--space-6); } .mb-6 { margin-bottom: var(--space-6); } .ml-6 { margin-left: var(--space-6); } .mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); } .my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); } .p-6 { padding: var(--space-6); } .pt-6 { padding-top: var(--space-6); } .pr-6 { padding-right: var(--space-6); } .pb-6 { padding-bottom: var(--space-6); } .pl-6 { padding-left: var(--space-6); } .px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .m-7 { margin: var(--space-7); } .mt-7 { margin-top: var(--space-7); } .mr-7 { margin-right: var(--space-7); } .mb-7 { margin-bottom: var(--space-7); } .ml-7 { margin-left: var(--space-7); } .mx-7 { margin-left: var(--space-7); margin-right: var(--space-7); } .my-7 { margin-top: var(--space-7); margin-bottom: var(--space-7); } .p-7 { padding: var(--space-7); } .pt-7 { padding-top: var(--space-7); } .pr-7 { padding-right: var(--space-7); } .pb-7 { padding-bottom: var(--space-7); } .pl-7 { padding-left: var(--space-7); } .px-7 { padding-left: var(--space-7); padding-right: var(--space-7); } .py-7 { padding-top: var(--space-7); padding-bottom: var(--space-7); } .m-8 { margin: var(--space-8); } .mt-8 { margin-top: var(--space-8); } .mr-8 { margin-right: var(--space-8); } .mb-8 { margin-bottom: var(--space-8); } .ml-8 { margin-left: var(--space-8); } .mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); } .my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); } .p-8 { padding: var(--space-8); } .pt-8 { padding-top: var(--space-8); } .pr-8 { padding-right: var(--space-8); } .pb-8 { padding-bottom: var(--space-8); } .pl-8 { padding-left: var(--space-8); } .px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } /* Auto margins for centering / pushing */ .mx-auto { margin-left: auto; margin-right: auto; } .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; } /* ========================================================================== BACKGROUND COLOUR HELPERS Palette-driven, DRY. Apply a .bg-* class to any element / WebPartZone. Dark backgrounds automatically flip text + links to white for contrast. Replaces Flat_White's legacy .AltBgColor1..5 pattern. Rough mapping: .AltBgColor1/2 -> .bg-white .AltBgColor3 -> .bg-accent-orange .AltBgColor4 -> .bg-accent-orange-dark .AltBgColor5 -> .bg-accent-purple .AltBgColorred -> .bg-accent-red ========================================================================== */ /* Light backgrounds */ .bg-white { --color-inherit-background: var(--color-white); } .bg-light { --color-inherit-background: var(--color-grey-lighter); } .bg-lightest { --color-inherit-background: var(--color-grey-lightest); } .bg-grey { --color-inherit-background: var(--color-grey); } /* Brand / accent backgrounds */ .bg-brand { --color-inherit-background: var(--color-brand); } .bg-dark { --color-inherit-background: var(--color-dark); } .bg-slate { --color-inherit-background: var(--color-slate); } .bg-accent-teal { --color-inherit-background: var(--color-accent-teal); } .bg-accent-teal-light { --color-inherit-background: var(--color-accent-teal-light); } .bg-accent-green { --color-inherit-background: var(--color-accent-green); } .bg-accent-orange { --color-inherit-background: var(--color-accent-orange); } .bg-accent-orange-dark { --color-inherit-background: var(--color-accent-orange-dark); } .bg-accent-purple { --color-inherit-background: var(--color-accent-purple); } .bg-accent-red { --color-inherit-background: var(--color-accent-red); } .bg-white, .bg-light, .bg-lightest, .bg-grey, .bg-brand, .bg-dark, .bg-slate, .bg-accent-teal, .bg-accent-teal-light, .bg-accent-orange, .bg-accent-orange-dark, .bg-accent-purple, .bg-accent-red { position: relative; z-index: 0; &:before { background-color: var(--color-inherit-background); content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -1; } } /* Contrast: dark backgrounds get light text + headings + links */ .bg-brand, .bg-dark, .bg-slate, .bg-accent-teal, .bg-accent-green, .bg-accent-orange-dark, .bg-accent-purple, .bg-accent-red, .bg-brand h1, .bg-brand h2, .bg-brand h3, .bg-brand h4, .bg-brand h5, .bg-brand h6, .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6, .bg-slate h1, .bg-slate h2, .bg-slate h3, .bg-slate h4, .bg-slate h5, .bg-slate h6, .bg-accent-teal h1, .bg-accent-teal h2, .bg-accent-teal h3, .bg-accent-teal h4, .bg-accent-teal h5, .bg-accent-teal h6, .bg-accent-green h1, .bg-accent-green h2, .bg-accent-green h3, .bg-accent-green h4, .bg-accent-green h5, .bg-accent-green h6, .bg-accent-orange-dark h1, .bg-accent-orange-dark h2, .bg-accent-orange-dark h3, .bg-accent-orange-dark h4, .bg-accent-orange-dark h5, .bg-accent-orange-dark h6, .bg-accent-purple h1, .bg-accent-purple h2, .bg-accent-purple h3, .bg-accent-purple h4, .bg-accent-purple h5, .bg-accent-purple h6, .bg-accent-red h1, .bg-accent-red h2, .bg-accent-red h3, .bg-accent-red h4, .bg-accent-red h5, .bg-accent-red h6 { color: var(--color-white); } .bg-brand a:not(.btn):not(.TextButton), .bg-dark a:not(.btn):not(.TextButton), .bg-slate a:not(.btn):not(.TextButton), .bg-accent-teal a:not(.btn):not(.TextButton), .bg-accent-green a:not(.btn):not(.TextButton), .bg-accent-orange-dark a:not(.btn):not(.TextButton), .bg-accent-purple a:not(.btn):not(.TextButton), .bg-accent-red a:not(.btn):not(.TextButton) { color: var(--color-white); text-decoration: underline; } .bg-full:after, .bg-full:before { margin-left: calc(50% - 50vw); width: 100vw !important; }/* ========================================================================== BACKGROUND IMAGE HELPERS Generic positioning utilities + asset-driven backgrounds. The asset classes pull their image from variables.css (--img-*, --logo-*), so a client re-skins them by editing that one file. (Note: .bg-img-full-size and .bg-img-dark already live in base.css.) ========================================================================== */ /* Generic positioning */ .bg-cover { background-size: cover; background-position: center center; background-repeat: no-repeat; } .bg-contain { background-size: contain; background-position: center center; background-repeat: no-repeat; } .bg-fixed { background-attachment: fixed; } .bg-center { background-position: center center; } /* Asset-driven backgrounds (swap the image in variables.css) */ .bg-decorative { background-image: var(--img-decorative); } .bg-testimonial { background-image: var(--img-testimonial-bg); background-size: cover; background-position: center center; } .bg-header-image { background-image: var(--img-header-bg); background-size: cover; background-position: center center; } .bg-hero { background-image: var(--img-hero); background-size: cover; background-position: center center; } /* ========================================================================== TABLE HELPERS (clean, minimal content tables) Applies to author-inserted content tables (a bare with no class) and to any table you explicitly mark class="table". Framework/Telerik tables (RadGrid etc.) always carry a class, so table:not([class]) leaves them untouched. Colours come from the --table-* tokens in variables.css. ========================================================================== */ table:not([class]), table.table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: 0.95em; line-height: 1.5; } table:not([class]) caption, table.table caption { caption-side: top; text-align: left; font-weight: 600; color: var(--color-heading); padding-bottom: var(--space-2); } table:not([class]) th, table.table th { text-align: left; vertical-align: bottom; padding: var(--table-cell-padding); font-weight: 600; color: var(--table-header-text); background-color: var(--table-header-bg); border-bottom: 2px solid var(--table-border); } table:not([class]) td, table.table td { padding: var(--table-cell-padding); vertical-align: top; border-bottom: 1px solid var(--table-border); } /* Gentle row hover for scannability */ table:not([class]) tbody tr:hover, table.table tbody tr:hover { background-color: var(--color-white); } /* Opt-in zebra striping: class="table table-striped" */ table.table-striped tbody tr:nth-child(odd) { background-color: var(--table-stripe); } /* Opt-in borderless: class="table table-flush" (rules only, no fills) */ table.table-flush th, table.table-flush td { background-color: transparent; } /* ========================================================================== MISC HELPERS (borders, radius, shadows, display, truncation, ratios) Small, curated utility set. Colours/sizes come from variables.css tokens. ========================================================================== */ /* Borders */ .border { border: var(--border-width) solid var(--color-border); } .border-top { border-top: var(--border-width) solid var(--color-border); } .border-right { border-right: var(--border-width) solid var(--color-border); } .border-bottom { border-bottom: var(--border-width) solid var(--color-border); } .border-left { border-left: var(--border-width) solid var(--color-border); } .border-0 { border: 0 !important; } /* Radius */ .rounded { border-radius: var(--radius); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-pill { border-radius: var(--radius-pill); } .rounded-0 { border-radius: 0 !important; } /* Shadows */ .shadow-sm { box-shadow: 1px 1px 3px rgba(var(--shadow-rgb), 0.15); } .shadow { box-shadow: 1px 1px 8px rgba(var(--shadow-rgb), 0.12); } .shadow-lg { box-shadow: 0 6px 24px rgba(var(--shadow-rgb), 0.16); } .shadow-0 { box-shadow: none !important; } /* Display controls */ .hidden, .DisplayNone { display: none !important; } .block { display: block !important; } .inline-block { display: inline-block !important; } @media (min-width: 777px) { .mobile-only { display: none !important; } } @media (max-width: 776.98px) { .desktop-only { display: none !important; } } /* Accessible visually-hidden text (keeps it available to screen readers) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Truncation */ .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .line-clamp-2, .line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { -webkit-line-clamp: 2; } .line-clamp-3 { -webkit-line-clamp: 3; } /* Image aspect ratios */ .img-ratio-1-1 { width: 100%; aspect-ratio: 1 / 1; -o-object-fit: cover; object-fit: cover; } .img-ratio-4-3 { width: 100%; aspect-ratio: 4 / 3; -o-object-fit: cover; object-fit: cover; } .img-ratio-16-9 { width: 100%; aspect-ratio: 16 / 9; -o-object-fit: cover; object-fit: cover; } .img-ratio-9-12 { width: 100%; aspect-ratio: 9 / 12; -o-object-fit: cover; object-fit: cover; } /* Clearfix for legacy float contexts */ .clearfix::after { display: block; clear: both; content: ""; }