@charset "UTF-8"; /* //////////////////////////////////////// Colors - overrides settings-color \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- GENERAL SETTINGS ---------------------------------------- Read more about settings and USWDS style tokens in the documentation: https://designsystem.digital.gov/design-tokens ---------------------------------------- */ /* ---------------------------------------- Image path ---------------------------------------- Relative image file path ---------------------------------------- */ /* ---------------------------------------- Show compile warnings ---------------------------------------- Show Sass warnings when functions and mixins use non-standard tokens. AND Show updates and notifications. ---------------------------------------- */ /* ---------------------------------------- Namespace ---------------------------------------- */ /* ---------------------------------------- Prefix separator ---------------------------------------- Set the character the separates responsive and state prefixes from the main class name. The default (":") needs to be preceded by two backslashes to be properly escaped. ---------------------------------------- */ /* ---------------------------------------- Layout grid ---------------------------------------- Should the layout grid classes output with !important ---------------------------------------- */ /* ---------------------------------------- Border box sizing ---------------------------------------- When set to true, sets the box-sizing property of all site elements to `border-box`. ---------------------------------------- */ /* ---------------------------------------- Focus styles ---------------------------------------- */ /* ---------------------------------------- Icons ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- TYPOGRAPHY SETTINGS ---------------------------------------- Read more about settings and USWDS typography tokens in the documentation: https://designsystem.digital.gov/design-tokens/typesetting/overview/ ---------------------------------------- */ /* ---------------------------------------- Root font size ---------------------------------------- Setting $theme-respect-user-font-size to true sets the root font size to 100% and uses ems for media queries ---------------------------------------- $theme-root-font-size only applies when $theme-respect-user-font-size is set to false. This will set the root font size as a specific px value and use px values for media queries. Accepts true or false ---------------------------------------- */ /* ---------------------------------------- Global styles ---------------------------------------- Adds basic styling for the following unclassed elements: - paragraph: paragraph text - link: links - content: paragraph text, links, headings, lists, and tables ---------------------------------------- */ /* ---------------------------------------- Browser compatibility mode ---------------------------------------- When true, outputs woff and ttf font formats in addition to woff2 ---------------------------------------- */ /* ---------------------------------------- Font path ---------------------------------------- Relative font file path ---------------------------------------- */ /* ---------------------------------------- Custom typeface tokens ---------------------------------------- Add a new custom typeface token if your project uses a typeface not already defined by USWDS. ---------------------------------------- USWDS defines the following tokens by default: ---------------------------------------- 'georgia' 'helvetica' 'merriweather' 'open-sans' 'public-sans' 'roboto-mono' 'source-sans-pro' 'system' 'tahoma' 'verdana' ---------------------------------------- Add as many new tokens as you have custom typefaces. Reference your new token(s) in the type-based font settings using the quoted name of the token. For example: $theme-font-type-cond: 'example-font-token'; display-name: The display name of your font cap-height: The height of a 500px `N` in Sketch ---------------------------------------- You should change `example-[style]-token` names to something more descriptive. ---------------------------------------- */ /* ---------------------------------------- Type-based font settings ---------------------------------------- Set the type-based tokens for your project from the following tokens, or from any new font tokens you added in $theme-typeface-tokens. ---------------------------------------- 'georgia' 'helvetica' 'merriweather' 'open-sans' 'public-sans' 'roboto-mono' 'source-sans-pro' 'system' 'tahoma' 'verdana' ---------------------------------------- */ /* ---------------------------------------- Custom font stacks ---------------------------------------- Add custom font stacks to any of the type-based fonts. Any USWDS typeface token already has a default stack. Custom stacks don't need to include the font's display name. It will automatically appear at the start of the stack. ---------------------------------------- Example: $theme-font-type-sans: 'source-sans-pro'; $theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; Output: font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; ---------------------------------------- */ /* ---------------------------------------- Add any custom font source files ---------------------------------------- If you want USWDS to generate additional @font-face declarations, add your font data below, following the example that follows. ---------------------------------------- USWDS automatically generates @font-face declarations for the following 'merriweather' 'public-sans' 'roboto-mono' 'source-sans-pro' These typefaces not require custom source files. ---------------------------------------- EXAMPLE - dir: Directory relative to $theme-font-path - This directory should include fonts saved as .woff2 ExampleSerif-Normal.woff2 $theme-font-serif-custom-src: ( dir: 'custom/example-serif', roman: ( 100: false, 200: false, 300: 'ExampleSerif-Light', 400: 'ExampleSerif-Normal', 500: false, 600: false, 700: 'ExampleSerif-Bold', 800: false, 900: false, ), italic: ( 100: false, 200: false, 300: 'ExampleSerif-LightItalic', 400: 'ExampleSerif-Italic', 500: false, 600: false, 700: 'ExampleSerif-BoldItalic', 800: false, 900: false, ), ); ---------------------------------------- */ /* ---------------------------------------- Role-based font settings ---------------------------------------- Set the role-based tokens for your project from the following font-type tokens. ---------------------------------------- 'cond' 'icon' 'lang' 'mono' 'sans' 'serif' ---------------------------------------- */ /* ---------------------------------------- Type scale ---------------------------------------- Define your project's type scale using values from the USWDS system type scale 1-20 ---------------------------------------- */ /* ---------------------------------------- Font weights ---------------------------------------- Assign weights 100-900 Or use `false` for unneeded weights. ---------------------------------------- */ /* ---------------------------------------- General typography settings ---------------------------------------- Type scale tokens ---------------------------------------- micro: 10px 1: 12px 2: 13px 3: 14px 4: 15px 5: 16px 6: 17px 7: 18px 8: 20px 9: 22px 10: 24px 11: 28px 12: 32px 13: 36px 14: 40px 15: 48px 16: 56px 17: 64px 18: 80px 19: 120px 20: 140px ---------------------------------------- Line height tokens ---------------------------------------- 1: 1 2: 1.15 3: 1.35 4: 1.5 5: 1.62 6: 1.75 ---------------------------------------- Font role tokens ---------------------------------------- 'ui' 'heading' 'body' 'code' 'alt' ---------------------------------------- Measure (max-width) tokens ---------------------------------------- 1: 44ex 2: 60ex 3: 64ex 4: 68ex 5: 74ex 6: 88ex none: none ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- COLOR SETTINGS ---------------------------------------- Read more about settings and USWDS color tokens in the documentation: https://designsystem.digital.gov/design-tokens/color ---------------------------------------- */ /* ---------------------------------------- Theme palette colors ---------------------------------------- */ /* ---------------------------------------- State palette colors ---------------------------------------- */ /* ---------------------------------------- General colors ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- COMPONENT SETTINGS ---------------------------------------- Read more about settings and USWDS style tokens in the documentation: https://designsystem.digital.gov/design-tokens ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- SPACING SETTINGS ---------------------------------------- Read more about settings and USWDS spacing units tokens in the documentation: https://designsystem.digital.gov/design-tokens/spacing-units ---------------------------------------- */ /* ---------------------------------------- Border radius ---------------------------------------- 2px 2px 0.5 4px 1 8px 1.5 12px 2 16px 2.5 20px 3 24px 4 32px 5 40px 6 48px 7 56px 8 64px 9 72px ---------------------------------------- */ /* ---------------------------------------- Column gap ---------------------------------------- 2px 2px 0.5 4px 1 8px 2 16px 3 24px 4 32px 5 40px 6 48px ---------------------------------------- */ /* ---------------------------------------- Grid container max-width ---------------------------------------- mobile mobile-lg tablet tablet-lg desktop desktop-lg widescreen ---------------------------------------- */ /* ---------------------------------------- Site ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- UTILITIES SETTINGS ---------------------------------------- Read more about settings and USWDS utilities in the documentation: https://designsystem.digital.gov/utilities ---------------------------------------- */ /* ---------------------------------------- map-collect() ---------------------------------------- Collect multiple maps into a single large map source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe ---------------------------------------- */ /* ---------------------------------------- Utility breakpoints ---------------------------------------- Which breakpoints does your project need? Select as `true` any breakpoint used by utilities or layout grid ---------------------------------------- */ /* ---------------------------------------- Global colors ---------------------------------------- The following palettes will be added to - background-color - border-color - color - text-decoration-color ---------------------------------------- */ /* ---------------------------------------- Settings ---------------------------------------- */ /* ---------------------------------------- Values ---------------------------------------- */ /* ---------------------------------------- color() ---------------------------------------- Derive a color from a color shortcode ---------------------------------------- */ /* ---------------------------------------- append-important() ---------------------------------------- Append `!important` to a list ---------------------------------------- */ /* ---------------------------------------- get-last() ---------------------------------------- Return the last item of a list, Return null if the value is null ---------------------------------------- */ /* ---------------------------------------- de-list() ---------------------------------------- Transform a one-element list or arglist into that single element. ---------------------------------------- (1) => 1 ((1)) => (1) ---------------------------------------- */ /* ---------------------------------------- error-not-token() ---------------------------------------- Returns a common not-a-token error. ---------------------------------------- */ /* ---------------------------------------- uswds-error() ---------------------------------------- Allow the system to pass an error as text to test error states in unit testing ---------------------------------------- */ /* ---------------------------------------- get-default() ---------------------------------------- Returns the default value from a map of project defaults get-default("bg-color") > $theme-body-background-color ---------------------------------------- */ /* ---------------------------------------- has-important() ---------------------------------------- Check to see if `!important` is being passed in a mixin's props ---------------------------------------- */ /* ---------------------------------------- map-deep-get() ---------------------------------------- @author Hugo Giraudel @access public @param {Map} $map - Map @param {Arglist} $keys - Key chain @return {*} - Desired value ---------------------------------------- */ /* ---------------------------------------- multi-cat() ---------------------------------------- Concatenate two lists ---------------------------------------- */ /* ---------------------------------------- remove() ---------------------------------------- Remove a value from a list ---------------------------------------- */ /* ---------------------------------------- smart-quote() ---------------------------------------- Quotes strings Inspects `px`, `xs`, and `xl` numbers Leaves bools as is ---------------------------------------- */ /* ---------------------------------------- str-replace() ---------------------------------------- Replace any substring with another string ---------------------------------------- */ /* ---------------------------------------- str-split() ---------------------------------------- Split a string at a given separator and convert into a list of substrings ---------------------------------------- */ /* ---------------------------------------- strip-unit() ---------------------------------------- Remove the unit of a length @author Hugo Giraudel @param {Number} $number - Number to remove unit from @return {Number} - Unitless number ---------------------------------------- */ /* ---------------------------------------- base-to-map() @TODO: Deprecate and delete ---------------------------------------- Convert a single base to a USWDS value map. Candidate for deprecation if we remove isReadable ---------------------------------------- */ /* ---------------------------------------- to-number() ---------------------------------------- Casts a string into a number ---------------------------------------- @param {String | Number} $value - Value to be parsed @return {Number} ---------------------------------------- */ /* ---------------------------------------- unpack() ---------------------------------------- Create lists of single items from lists of lists. ---------------------------------------- (1, (2.1, 2.2), 3) --> (1, 2.1, 2.2, 3) ---------------------------------------- */ /* ---------------------------------------- color() ---------------------------------------- Derive a color from a color shortcode ---------------------------------------- */ /* ---------------------------------------- color() ---------------------------------------- Derive a color from a color shortcode ---------------------------------------- */ /* ---------------------------------------- get-system-color() ---------------------------------------- Derive a system color from its family, value, and vivid or a passed variable that is, itself, a list ---------------------------------------- */ /* ---------------------------------------- color() ---------------------------------------- Derive a color from a color shortcode ---------------------------------------- */ /* ---------------------------------------- color() ---------------------------------------- Derive a color from a color shortcode ---------------------------------------- */ /* ---------------------------------------- color() ---------------------------------------- Derive a color from a color shortcode ---------------------------------------- */ /* ---------------------------------------- set-theme-color() ---------------------------------------- Derive a color from a system color token or a hex value ---------------------------------------- */ /* ---------------------------------------- px-to-rem() ---------------------------------------- Converts a value in px to a value in rem ---------------------------------------- */ /* ---------------------------------------- rem-to-user-em() ---------------------------------------- Converts a value in rem to a value in [user-settings] em for use in media queries ---------------------------------------- */ /* ---------------------------------------- px-to-user-em() ---------------------------------------- Converts a value in px to a value in em ---------------------------------------- */ /* ---------------------------------------- rem-to-px() ---------------------------------------- Converts a value in rem to a value in px ---------------------------------------- */ /* ---------------------------------------- spacing-multiple() ---------------------------------------- Converts a spacing unit multiple into the desired final units (currently rem) ---------------------------------------- */ /* ---------------------------------------- units() ---------------------------------------- Converts a spacing unit into the desired final units (currently rem) ---------------------------------------- */ /* ---------------------------------------- number-to-token() ---------------------------------------- Converts an integer or numeric value into a system value Ex: 0.5 --> '05' -1px --> 'neg-1px' ---------------------------------------- */ /* ---------------------------------------- Project fonts ---------------------------------------- Collects font settings in a map for looping. ---------------------------------------- */ /* ---------------------------------------- Luminance ranges ---------------------------------------- */ /* ---------------------------------------- ns() ---------------------------------------- Add a namesspace of $type if that namespace is set to output ---------------------------------------- */ /* ---------------------------------------- Line height ---------------------------------------- */ /* ---------------------------------------- Measure ---------------------------------------- */ /* ---------------------------------------- cap-height() ---------------------------------------- Get the cap height of a valid typeface ---------------------------------------- */ /* ---------------------------------------- validate-typeface-token() ---------------------------------------- Check to see if a typeface-token exists. Throw an error if a passed token does not exist in the typeface-token map. ---------------------------------------- */ /* ---------------------------------------- convert-to-font-type() ---------------------------------------- Converts a font-role token into a font-type token. Leaves font-type tokens unchanged. ---------------------------------------- */ /* ---------------------------------------- font-sources() ---------------------------------------- Outputs a list of font sources used in a @font-face declaration. $theme-font-browser-compatibility: true - output woff2, woff, ttf $theme-font-browser-compatibility: false - output woff2 @param stem: string - [font path]/[custom-src.dir]/[custom-src.[style].[weight]] @output: string filetypes must be one of the filetypes set in variables/$project-font-face-filetypes (woff, woff2, ttf) ---------------------------------------- */ /* ---------------------------------------- get-font-stack() ---------------------------------------- Get a font stack from a style- or role-based font token. ---------------------------------------- */ /* ---------------------------------------- get-typeface-token() ---------------------------------------- Get a typeface token from a font-type or font-role token. ---------------------------------------- */ /* ---------------------------------------- normalize-type-scale() ---------------------------------------- Normalizes a specific face's optical size to a set target ---------------------------------------- */ /* ---------------------------------------- system-type-scale() ---------------------------------------- Get a value from the system type scale ---------------------------------------- */ /* ---------------------------------------- Easing ---------------------------------------- */ /* deprecated.scss --- Occasionally the design system will deprecate old variables or functionality. If we replace the old functionality with something new, this is a place to connect the old functionality to the new functionality, in the service of better continuity and backwards compatibility within a major release cycle. Note the USWDS version where we deprecated the old functionality in a comment. Be sure to update notifications.scss. This file should started fresh at each major version. */ /* ---------------------------------------- advanced-color() ---------------------------------------- Derive a color from a color triplet: [family], [grade], [variant] ---------------------------------------- */ /* ---------------------------------------- calculate-grade() ---------------------------------------- Derive the grade equivalent any color, even non-token colors ---------------------------------------- */ /* ---------------------------------------- color-token-assignment() ---------------------------------------- Get the system token equivalent of any theme color token ---------------------------------------- */ /* ---------------------------------------- is-system-color-token() ---------------------------------------- Return whether a token is a system color token ---------------------------------------- */ /* ---------------------------------------- is-theme-color-token() ---------------------------------------- Return whether a token is a theme color token ---------------------------------------- */ /* ---------------------------------------- color-token-family() ---------------------------------------- Returns the family of a color token. Returns: color-family color-token-family("accent-warm-vivid") > "accent-warm" color-token-family("red-50v") > "red" color-token-variant(("red", 50, "vivid")) > "red" ---------------------------------------- */ /* ---------------------------------------- decompose() ---------------------------------------- Convert a color token into into a list of form [family], [grade], [variant] Vivid variants return "vivid" as the variant. If neither grade nor variant exists, returns 'null' ---------------------------------------- */ /* ---------------------------------------- color-token-family() ---------------------------------------- Returns the family of a color token. Returns: color-family color-token-family("accent-warm-vivid") > "accent-warm" color-token-family("red-50v") > "red" color-token-variant(("red", 50, "vivid")) > "red" ---------------------------------------- */ /* ---------------------------------------- color-token-grade() ---------------------------------------- Returns the grade of a USWDS color token. Returns: color-grade color-token-grade("accent-warm") > "root" color-token-grade("accent-warm-vivid") > "root" color-token-grade("accent-warm-darker") > "darker" color-token-grade("red-50v") > 50 color-token-variant(("red", 50, "vivid")) > 50 ---------------------------------------- */ /* ---------------------------------------- color-token-family() ---------------------------------------- Returns the family of a color token. Returns: color-family color-token-family("accent-warm-vivid") > "accent-warm" color-token-family("red-50v") > "red" color-token-variant(("red", 50, "vivid")) > "red" ---------------------------------------- */ /* ---------------------------------------- is-color-token() ---------------------------------------- Returns whether a given string is a USWDS color token. ---------------------------------------- */ /* ---------------------------------------- pow() ---------------------------------------- Raises a unitless number to the power of another unitless number Includes helper functions ---------------------------------------- */ /* ---------------------------------------- Helper functions ---------------------------------------- */ /* factorial() ---------------------------------------- */ /* summation() ---------------------------------------- */ /* exp-maclaurin() ---------------------------------------- */ /* ln() ---------------------------------------- */ /* ---------------------------------------- color-token-type() ---------------------------------------- Returns the type of a color token. Returns: "system" | "theme" ---------------------------------------- */ /* ---------------------------------------- color-token-variant() ---------------------------------------- Returns the variant of color token. Returns: "vivid" | false color-token-variant("accent-warm") > false color-token-variant("accent-warm-vivid") > "vivid" color-token-variant("red-50v") > "vivid" color-token-variant(("red", 50, "vivid")) > "vivid" ---------------------------------------- */ /* ---------------------------------------- magic-number() ---------------------------------------- Returns the magic number of two color grades. Takes numbers or color tokens. magic-number(50, 10) return: 40 magic-number("red-50", "red-10") return: 40 ---------------------------------------- */ /* ---------------------------------------- is-accessible-magic-number() ---------------------------------------- Returns whether two grades achieve specified target color contrast Returns: true | false is-accessible-magic-number(10, 50, "AA") > false is-accessible-magic-number(10, 60, "AA") > true ---------------------------------------- */ /* ---------------------------------------- wcag-magic-number() ---------------------------------------- Returns the magic number of a specific wcag grade: "AA" "AA-Large" "AAA" wcag-magic-number("AA") > 50 ---------------------------------------- */ /* ---------------------------------------- get-link-tokens-from-bg() ---------------------------------------- Get accessible link colors for a given background color returns: link-token, hover-token get-link-tokens-from-bg( "black", "red-60", "red-10", "AA") > "red-10", "red-5" get-link-tokens-from-bg( "black", "red-60v", "red-10v", "AA-large") > "red-60v", "red-50v" get-link-tokens-from-bg( "black", "red-5v", "red-60v", "AA") > "red-5v", "white" get-link-tokens-from-bg( "black", "white", "red-60v", "AA") > "white", "white" ---------------------------------------- */ /* ---------------------------------------- next-token() ---------------------------------------- Returns next "darker" or "lighter" color token of the same token type and variant. Returns: color-token | false next-token("accent-warm", "lighter") > "accent-warm-light" next-token("gray-10", "lighter") > "gray-5" next-token("gray-5", "lighter") > "white" next-token("white", "lighter") > false next-token("red-50v", "darker") > "red-60v" next-token("red-50", "darker") > "red-60" next-token("red-80v", "darker") > "red-90" next-token("red-90", "darker") > "black" next-token("white", "darker") > "gray-5" next-token("black", "lighter") > "gray-90" ---------------------------------------- */ /* ---------------------------------------- test-colors() ---------------------------------------- Check to see if all system colors fall between the proper relative luminance range for their grade. Has a couple quirks, as the luminance() function returns slightly different results than expected. ---------------------------------------- */ /* ---------------------------------------- columns() ---------------------------------------- outputs a grid-col number based on the number of desired columns in the 12-column grid Ex: columns(2) --> 6 grid-col(columns(2)) ---------------------------------------- */ /* ---------------------------------------- USWDS Properties ---------------------------------------- */ /* ---------------------------------------- get-uswds-value() ---------------------------------------- Finds and outputs a value from the USWDS standard values. Used to build other standard utility functions and mixins. ---------------------------------------- */ /* ---------------------------------------- get-standard-values() ---------------------------------------- Gets a map of USWDS standard values for a property ---------------------------------------- */ /* ---------------------------------------- border-radius() ---------------------------------------- Get a border-radius from the system border-radii ---------------------------------------- */ /* ---------------------------------------- font-weight() fw() ---------------------------------------- Get a font-weight value from the system font-weight ---------------------------------------- */ /* ---------------------------------------- feature() ---------------------------------------- Gets a valid USWDS font feature setting ---------------------------------------- */ /* ---------------------------------------- flex() ---------------------------------------- Gets a valid USWDS flex value ---------------------------------------- */ /* ---------------------------------------- font-family() family() ---------------------------------------- Get a font-family stack from a role-based or type-based font family ---------------------------------------- */ /* ---------------------------------------- letter-spacing() ls() ---------------------------------------- Get a letter-spacing value from the system letter-spacing ---------------------------------------- */ /* ---------------------------------------- measure() ---------------------------------------- Gets a valid USWDS reading line length ---------------------------------------- */ /* ---------------------------------------- opacity() ---------------------------------------- Get an opacity from the system opacities ---------------------------------------- */ /* ---------------------------------------- order() ---------------------------------------- Get an order value from the system orders ---------------------------------------- */ /* ---------------------------------------- radius() ---------------------------------------- Get a border-radius value from the system letter-spacing ---------------------------------------- */ /* ---------------------------------------- font-size() ---------------------------------------- Get type scale value from a [family] and [scale] ---------------------------------------- */ /* ---------------------------------------- z-index() z() ---------------------------------------- Get a z-index value from the system z-index ---------------------------------------- */ /* ---------------------------------------- utility-font() ---------------------------------------- Get a normalized font-size in rem from a family and a type size in either system scale or project scale ---------------------------------------- Not the public-facing function. Used for building the utilities and withholds certain errors. ---------------------------------------- */ /* ---------------------------------------- family() ---------------------------------------- Get a font-family stack ---------------------------------------- */ /* ---------------------------------------- size() ---------------------------------------- Get a normalized font-size in rem from a family and a type size in either system scale or project scale ---------------------------------------- */ /* ---------------------------------------- font() ---------------------------------------- Get a font-family stack AND Get a normalized font-size in rem from a family and a type size in either system scale or project scale ---------------------------------------- */ /* ---------------------------------------- typeset() ---------------------------------------- Sets: - family - size - line-height ---------------------------------------- */ /* stylelint-disable max-nesting-depth */ /* ---------------------------------------- @render-pseudoclass ---------------------------------------- Build a pseucoclass utiliy from values calculated in the @render-utilities-in loop ---------------------------------------- */ /* ---------------------------------------- @render-utility ---------------------------------------- Build a utility from values calculated in the @render-utilities-in loop ---------------------------------------- TODO: Determine the proper use of unquote() in the following. Changed to account for a 'interpolation near operators will be simplified in a future version of Sass' warning. ---------------------------------------- */ /* ---------------------------------------- @render-utilities-in ---------------------------------------- The master loop that sets the building blocks of utilities from the values in individual rule settings and loops through all possible variants ---------------------------------------- */ /* stylelint-enable */ /* notifications.scss --- Adds a notification at the top of each USWDS compile. Use this file for important notifications and updates to the design system. This file should started fresh at each major version. */ /* prettier-ignore */ /* prettier-ignore */ /* ---------------------------------------- Generated Hero Color Styles ---------------------------------------- */ .hero--primary { color: white; } .hero--primary .usa-button--hero { background-color: #2378c3; color: white; } .hero--primary .usa-button--hero:visited { color: white; } .hero--primary .usa-button--hero:hover, .hero--primary .usa-button--hero.usa-button--hover { background-color: #074b69; color: white; } .hero--primary .usa-button--hero.usa-button--active { background-color: #002d3f; color: white; } .hero--primary .usa-button--hero::after, .hero--primary .usa-button--hero:visited::after { background-color: #11181d; } .hero--primary.hero--no_image, .hero--primary.hero--no_image_short { background: #002d3f; } .hero--primary.hero--no_image .hero__title, .hero--primary.hero--no_image .hero__subtitle, .hero--primary.hero--no_image .hero__image-credit, .hero--primary.hero--no_image_short .hero__title, .hero--primary.hero--no_image_short .hero__subtitle, .hero--primary.hero--no_image_short .hero__image-credit { color: white; } .hero--primary.hero--background, .hero--primary.hero--background_short { background: #002d3f; } .hero--primary .hero__background-image__overlay { background: rgba(0, 58, 112, 0.75); } .hero--primary .hero__background-image__overlay--solid { background: #002d3f; } .hero--primary .usa-button--big { margin-top: 1.25rem; color: white; } .hero--primary .usa-button--big.usa-button--hero::after, .hero--primary .usa-button--big.usa-button--hero:visited::after { background-color: #11181d; } .hero--primary .usa-button--secondary { color: white; background-color: #2378c3; } .hero--primary .usa-button--secondary::after, .hero--primary .usa-button--secondary:visited::after { background-color: #11181d; } .hero--primary .usa-button--secondary.usa-button--active { background-color: #002d3f; color: white; } .hero--primary .usa-button--secondary.usa-button--hover, .hero--primary .usa-button--secondary:hover { background-color: #074b69; color: white; } .hero--secondary { color: white; } .hero--secondary .usa-button--hero { background-color: #2378c3; color: white; } .hero--secondary .usa-button--hero:visited { color: white; } .hero--secondary .usa-button--hero:hover, .hero--secondary .usa-button--hero.usa-button--hover { background-color: #074b69; color: white; } .hero--secondary .usa-button--hero.usa-button--active { background-color: #002d3f; color: white; } .hero--secondary .usa-button--hero::after, .hero--secondary .usa-button--hero:visited::after { background-color: #11181d; } .hero--secondary.hero--no_image, .hero--secondary.hero--no_image_short { background: #face00; } .hero--secondary.hero--no_image .hero__title, .hero--secondary.hero--no_image .hero__subtitle, .hero--secondary.hero--no_image .hero__image-credit, .hero--secondary.hero--no_image_short .hero__title, .hero--secondary.hero--no_image_short .hero__subtitle, .hero--secondary.hero--no_image_short .hero__image-credit { color: white; } .hero--secondary.hero--background, .hero--secondary.hero--background_short { background: #face00; } .hero--secondary .hero__background-image__overlay { background: rgba(31, 132, 98, 0.75); } .hero--secondary .hero__background-image__overlay--solid { background: #face00; } .hero--secondary .usa-button--big { margin-top: 1.25rem; color: white; } .hero--secondary .usa-button--big.usa-button--hero::after, .hero--secondary .usa-button--big.usa-button--hero:visited::after { background-color: #11181d; } .hero--secondary .usa-button--secondary { color: white; background-color: #2378c3; } .hero--secondary .usa-button--secondary::after, .hero--secondary .usa-button--secondary:visited::after { background-color: #11181d; } .hero--secondary .usa-button--secondary.usa-button--active { background-color: #002d3f; color: white; } .hero--secondary .usa-button--secondary.usa-button--hover, .hero--secondary .usa-button--secondary:hover { background-color: #074b69; color: white; } .hero--gray { color: black; } .hero--gray .usa-button--hero { background-color: #face00; color: black; } .hero--gray .usa-button--hero:visited { color: black; } .hero--gray .usa-button--hero:hover, .hero--gray .usa-button--hero.usa-button--hover { background-color: #ffe396; color: black; } .hero--gray .usa-button--hero.usa-button--active { background-color: #002d3f; color: black; } .hero--gray .usa-button--hero::after, .hero--gray .usa-button--hero:visited::after { background-color: #c2850c; } .hero--gray.hero--no_image, .hero--gray.hero--no_image_short { background: #adadad; } .hero--gray.hero--no_image .hero__title, .hero--gray.hero--no_image .hero__subtitle, .hero--gray.hero--no_image .hero__image-credit, .hero--gray.hero--no_image_short .hero__title, .hero--gray.hero--no_image_short .hero__subtitle, .hero--gray.hero--no_image_short .hero__image-credit { color: black; } .hero--gray.hero--background, .hero--gray.hero--background_short { background: #adadad; } .hero--gray .hero__background-image__overlay { background: rgba(173, 173, 173, 0.85); } .hero--gray .hero__background-image__overlay--solid { background: #adadad; } .hero--gray .usa-button--big { margin-top: 1.25rem; color: black; } .hero--gray .usa-button--big.usa-button--hero::after, .hero--gray .usa-button--big.usa-button--hero:visited::after { background-color: #c2850c; } .hero--gray .usa-button--secondary { color: black; background-color: #2378c3; } .hero--gray .usa-button--secondary::after, .hero--gray .usa-button--secondary:visited::after { background-color: #11181d; } .hero--gray .usa-button--secondary.usa-button--active { background-color: #002d3f; color: white; } .hero--gray .usa-button--secondary.usa-button--hover, .hero--gray .usa-button--secondary:hover { background-color: #074b69; color: white; } .hero--accent_cool { color: white; } .hero--accent_cool .usa-button--hero { background-color: #112f4e; color: white; } .hero--accent_cool .usa-button--hero:visited { color: white; } .hero--accent_cool .usa-button--hero:hover, .hero--accent_cool .usa-button--hero.usa-button--hover { background-color: #005ea2; color: white; } .hero--accent_cool .usa-button--hero.usa-button--active { background-color: #002d3f; color: white; } .hero--accent_cool .usa-button--hero::after, .hero--accent_cool .usa-button--hero:visited::after { background-color: #13171f; } .hero--accent_cool.hero--no_image, .hero--accent_cool.hero--no_image_short { background: #207FA2; } .hero--accent_cool.hero--no_image .hero__title, .hero--accent_cool.hero--no_image .hero__subtitle, .hero--accent_cool.hero--no_image .hero__image-credit, .hero--accent_cool.hero--no_image_short .hero__title, .hero--accent_cool.hero--no_image_short .hero__subtitle, .hero--accent_cool.hero--no_image_short .hero__image-credit { color: white; } .hero--accent_cool.hero--background, .hero--accent_cool.hero--background_short { background: #207FA2; } .hero--accent_cool .hero__background-image__overlay { background: rgba(32, 127, 162, 0.85); } .hero--accent_cool .hero__background-image__overlay--solid { background: #207FA2; } .hero--accent_cool .usa-button--big { margin-top: 1.25rem; color: white; } .hero--accent_cool .usa-button--big.usa-button--hero::after, .hero--accent_cool .usa-button--big.usa-button--hero:visited::after { background-color: #13171f; } .hero--accent_cool .usa-button--secondary { color: white; background-color: #2378c3; } .hero--accent_cool .usa-button--secondary::after, .hero--accent_cool .usa-button--secondary:visited::after { background-color: #11181d; } .hero--accent_cool .usa-button--secondary.usa-button--active { background-color: #002d3f; color: white; } .hero--accent_cool .usa-button--secondary.usa-button--hover, .hero--accent_cool .usa-button--secondary:hover { background-color: #074b69; color: white; } .hero--accent_warm { color: white; } .hero--accent_warm .usa-button--hero { background-color: #2672de; color: white; } .hero--accent_warm .usa-button--hero:visited { color: white; } .hero--accent_warm .usa-button--hero:hover, .hero--accent_warm .usa-button--hero.usa-button--hover { background-color: #1a4480; color: white; } .hero--accent_warm .usa-button--hero.usa-button--active { background-color: #002d3f; color: white; } .hero--accent_warm .usa-button--hero::after, .hero--accent_warm .usa-button--hero:visited::after { background-color: #252f3e; } .hero--accent_warm.hero--no_image, .hero--accent_warm.hero--no_image_short { background: #c05600; } .hero--accent_warm.hero--no_image .hero__title, .hero--accent_warm.hero--no_image .hero__subtitle, .hero--accent_warm.hero--no_image .hero__image-credit, .hero--accent_warm.hero--no_image_short .hero__title, .hero--accent_warm.hero--no_image_short .hero__subtitle, .hero--accent_warm.hero--no_image_short .hero__image-credit { color: white; } .hero--accent_warm.hero--background, .hero--accent_warm.hero--background_short { background: #c05600; } .hero--accent_warm .hero__background-image__overlay { background: rgba(192, 86, 64, 0.85); } .hero--accent_warm .hero__background-image__overlay--solid { background: #c05600; } .hero--accent_warm .usa-button--big { margin-top: 1.25rem; color: white; } .hero--accent_warm .usa-button--big.usa-button--hero::after, .hero--accent_warm .usa-button--big.usa-button--hero:visited::after { background-color: #252f3e; } .hero--accent_warm .usa-button--secondary { color: white; background-color: #2378c3; } .hero--accent_warm .usa-button--secondary::after, .hero--accent_warm .usa-button--secondary:visited::after { background-color: #11181d; } .hero--accent_warm .usa-button--secondary.usa-button--active { background-color: #002d3f; color: white; } .hero--accent_warm .usa-button--secondary.usa-button--hover, .hero--accent_warm .usa-button--secondary:hover { background-color: #074b69; color: white; } .hero--inset.hero--secondary .hero__title, .hero--inset.hero--secondary .hero__subtitle, .hero--inset.hero--secondary .hero__image-credit, .hero--no_image.hero--secondary .hero__title, .hero--no_image.hero--secondary .hero__subtitle, .hero--no_image.hero--secondary .hero__image-credit { color: white; } .hero--primary.hero--no_image, .hero--primary.hero--no_image_short { background: #002d3f; } .hero--primary.hero--background, .hero--primary.hero--background_short { background: #002d3f; } /* ======================================== OJP HEADER CSS VARIABLES - DARK BLUE COOL BLUE AND YELLOW THEME ======================================== */ :root { /* Primary OJP Colors */ --ojp-header__active-nav: #face00; --ojp-header__background: #002d3f; --ojp-header__base-lightest: #f0f0f0; --ojp-header__primary: #002d3f; --ojp-header__primary-darker: #001a24; --ojp-header__primary-light: #4f6fa7; --ojp-header__secondary: #face00; --ojp-header__secondary-darker: #e6a800; --ojp-header__white: #ffffff; /* Additional Colors Used */ --ojp-color__black: #000000; --ojp-color__white: #ffffff; --ojp-color__gray-light: #f0f0f0; --ojp-color__gray-lighter: #fcfcfc; --ojp-color__gray-border: #ccc; --ojp-color__gray-disabled: #c9c9c9; --ojp-color__gray-disabled-text: #454545; --ojp-color__submenu-border: #edeff0; --ojp-color__text-dark: #1b1b1b; --ojp-color__focus-outline: #2491ff; --ojp-color__search-border: #face00; --ojp-color__black-transparent: rgba(0, 0, 0, 0.8); /* CTA Component Colors */ --cta-background: #fcfcfc; --cta-top-bottom-border: #face00; --cta-side-border: #a9aeb1; --cta-callout-divider: #565c65; --cta-download-background: url("../images/uswds-alt/download-solid.svg"); /* Layout Builder Twocol Gray */ --twocol-background: #fcfcfc; --twocol-border: #dfe1e2; } @media all and (min-width: 55em) { .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-accordion__button[aria-expanded=true]::after { background-color: var(--ojp-header__active-nav); } } .modification-notes .modification-notes__divider { background-color: #face00 !important; } :root { --menu-mobile-background: #002d3f; --menu-mobile-text: white; --menu-mobile-text-hover: #002d3f; --menu-mobile-active: #face00; --menu-mobile-expanded-icon: url("../images/uswds-alt/minus-white.svg"); --menu-mobile-expanded-icon-hover: url("../images/uswds-alt/minus-dark-primary.svg"); --menu-mobile-unexpanded-icon: url("../images/uswds-alt/plus-white.svg"); --menu-mobile-unexpanded-icon-hover: url("../images/uswds-alt/plus-dark-primary.svg"); } /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS THEME CUSTOM STYLES ---------------------------------------- !! Copy this file to your project's sass root. Don't edit the version in node_modules. ---------------------------------------- Custom project SASS goes here. i.e. @include u-padding-right('05'); ---------------------------------------- */ /** * @file * Two-column layout styles for Layout Builder. * * Migrated from OJP theme's _general-pages.scss */ .layout--accordion-layout > .usa-accordion__content { padding: 0; } div.uswds-middle-section { padding-top: 0; } .layout--twocol-section { align-items: flex-start; } .layout--twocol-section.layout--twocol-section.layout--twocol-section--75-25 > .layout__region.layout__region--first { max-width: 100%; } .layout--twocol-section.layout--twocol-section.layout--twocol-section--75-25 > .layout__region.layout__region--first, .layout--twocol-section.layout--twocol-section.layout--twocol-section--75-25 > .layout__region.layout__region--second { flex: 0 1 100%; align-items: flex-start; } @media all and (min-width: 55em) { .layout--twocol-section.layout--twocol-section.layout--twocol-section--75-25 > .layout__region.layout__region--first { flex: 0 1 75%; max-width: 75%; } .layout--twocol-section.layout--twocol-section.layout--twocol-section--75-25 > .layout__region.layout__region--second { flex: 0 1 25%; } } @media all and (min-width: 55em) { .layout--twocol-section.layout--twocol-section--75-25 > .layout__region--first, .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first { padding-right: 3.125rem; } } @media all and (min-width: 55em) { .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--first + .layout__region--second, .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--first + .layout__region--second { padding-left: 3.125rem; } } .layout--twocol-section .layout__region--second { overflow: visible; word-break: break-word; display: flex; flex-direction: column; } .layout--twocol-section .layout__region--second .usa-sidenav { padding-left: 0 !important; font-size: 0.99rem !important; line-height: 1.4 !important; } .layout--twocol-section .layout__region--second .usa-sidenav__item { font-size: 0.99rem !important; } .layout--twocol-section .layout__region--second .usa-sidenav__sublist { padding-left: 0; } .layout--twocol-section .layout__region--second .usa-sidenav a { word-break: normal; overflow-wrap: normal; } .layout--twocol-section .layout__region--second > * { flex: 0 1 auto; width: 100%; min-height: 1px; } .layout--twocol-section .layout__region--second nav.menu--main { order: 99; } @media all and (min-width: 55em) { .layout--twocol-section .layout__region--second nav.menu--main { order: inherit; } } @media screen and (min-width: 40em) { .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--first { padding-right: 1.5625rem; max-width: 50%; } .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--second { padding-left: 1.5625rem; max-width: 50%; } } .layout--fourcol-section .layout__region { padding: 0.25rem; } @media all and (min-width: 30em) { .layout__region { display: flex; flex-wrap: wrap; align-items: stretch; } .layout__region > div { flex: 0 0 100%; max-width: 100%; padding-top: 0; } .layout__region > div.cta { padding-top: 1.25rem; } } .layout__region .block-views { margin-bottom: 2.5rem; } .layout__region .block-views .views-row:last-child .listing-item-row { margin-bottom: 0; } .layout__region .block-views nav[aria-labelledby=pagination-heading--2] .pager__items { margin-top: 1.875rem; } .views-exposed-form.usa-form { max-width: 100%; margin-bottom: 2.5rem; } .views-exposed-form.usa-form .cta { padding: 0; } #layout-builder * { word-break: break-word; } .layout .section-container { display: contents; } .layout--layout-twocol-gray, .layout.bg-gray { display: block; background: var(--twocol-background); border-top: 1px solid var(--twocol-border); border-bottom: 1px solid var(--twocol-border); left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-bottom: 2.5rem; position: relative; width: 100vw; padding: 1.375rem 0 0; } @media all and (min-width: 55em) { .layout--layout-twocol-gray, .layout.bg-gray { padding: 3.75rem 0 0; } } @media all and (min-width: 55em) { .layout--twocol-section.bg-gray .section-container > div { flex: 0 0 calc(50% - 2.1875rem); max-width: calc(50% - 2.1875rem); } .layout--twocol-section.bg-gray .section-container > div { margin-bottom: 0 !important; } } @media all and (min-width: 55em) { .layout--layout-threecol.bg-gray .section-container > div { flex: 0 0 calc(33% - 2.1875rem); max-width: calc(33% - 2.1875rem); } } @media all and (min-width: 55em) { .layout--fourcol-section.bg-gray .section-container > div { flex: 0 0 calc(25% - 2.1875rem); max-width: calc(25% - 2.1875rem); } } .layout--layout-twocol-gray .layout__region, .layout--onecol.bg-gray .layout__region, .layout.bg-gray .section-container { margin-left: auto; margin-right: auto; max-width: 64rem; padding-left: 1rem; padding-right: 1rem; } @media all and (min-width: 64em) { .layout--layout-twocol-gray .layout__region, .layout--onecol.bg-gray .layout__region, .layout.bg-gray .section-container { padding-left: 2rem; padding-right: 2rem; } } @media all and (min-width: 55em) { .layout--layout-twocol-gray .layout__region, .layout--onecol.bg-gray .layout__region, .layout.bg-gray .section-container { display: flex; justify-content: space-between; flex-wrap: wrap; } .layout--layout-twocol-gray .layout__region > div, .layout--onecol.bg-gray .layout__region > div, .layout.bg-gray .section-container > div { margin-bottom: 4.375rem; } } @media all and (min-width: 55em) { .layout--layout-twocol-gray .layout__region > div { flex: 0 0 calc(50% - 2.1875rem); max-width: calc(50% - 2.1875rem); } } .layout--twocol-section--25-75 .layout__region--first > *, .layout--twocol-section--75-25 .layout__region--second > *, .layout--twocol-section--33-67 .layout__region--first > *, .layout--twocol-section--67-33 .layout__region--second > * { margin-bottom: 2.5rem; } .layout--twocol-section.layout-builder__layout .layout__region > *:last-child { margin-bottom: 0; } .layout--fluid { max-width: unset; } .layout--fluid-mid { max-width: 84rem; } /* ======================================== Project-specific Style Overrides ======================================== Custom styles and overrides for the OJP theme. These styles should be project-specific modifications that don't belong in the main USWDS theme files. */ /* ---------------------------------------- Typography Overrides ---------------------------------------- */ body, .ui-dialog .ui-dialog-content { font-size: 1.0625rem; line-height: 1.625rem; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; } body p, .ui-dialog .ui-dialog-content p, .usa-prose > p { line-height: 1.6; margin-bottom: 0; margin-top: 0; max-width: 100%; } body p + *, .ui-dialog .ui-dialog-content p + *, .usa-prose > p + * { margin-top: 1em; } body * + p, .ui-dialog .ui-dialog-content * + p, .usa-prose > * + p { margin-top: 1em; } .usa-prose, .usa-prose > table, .usa-prose > table caption, .usa-table caption { font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif !important; } .usa-prose { font-size: 0.99rem; } label, .usa-label, .usa-legend { font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif !important; } .field--name-body ul li > a { display: inline; } .layout--node-page .field--name-body { margin-bottom: 2.5rem; } .layout--node-landing_page .block-layout-builder > .field--name-body, .page-node-type-landing-page .layout-builder__section .block-layout-builder > .field--name-body, .page-node-type-landing-page .block-layout-builder > .field--name-body { margin-bottom: 1rem !important; } h1, h2, h3, h4, h5, h6 { font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif; } h1, h3, h4, h5, h6 { font-weight: 700; margin: 0 0 0.625rem; } h1 { font-size: 2.5rem; line-height: 3.25rem; } h2 { font-size: 1.875rem; line-height: 2.4375rem; margin: 0 0 1.25rem; } .usa-section h2 { margin: 0.625rem 0 0; } h3 { font-size: 1.25rem; line-height: 1.625rem; } h4 { font-size: 1.0625rem; line-height: 1.375rem; } h5 { font-size: 0.9375rem; line-height: 1.25rem; } /* ---------------------------------------- Grid System Overrides ---------------------------------------- */ .grid-row.grid-gap { margin-left: -0.5rem; margin-right: -0.5rem; } @media all and (min-width: 64em) { .grid-row.grid-gap { margin-left: -1rem; margin-right: -1rem; } } /* ---------------------------------------- Anchor Links ---------------------------------------- */ a.anchorjs-link:not(:hover), a.anchorjs-link:not(:hover):visited { color: #565c65; } a, .ui-dialog-content a { color: #005ea2; text-underline-offset: 4px; } a:active, a:hover { color: #11181d; } /* ---------------------------------------- Button ---------------------------------------- */ .usa-button:not(.usa-menu-btn):not(.usa-input) { font-size: 0.99rem; line-height: 1; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; cursor: pointer; display: inline-block; font-weight: 700; height: 44px; margin-right: 0.5rem; padding: 0.75rem 1.25rem !important; border-radius: 0 !important; text-align: center; text-decoration: none; } .usa-button { border-radius: 0 !important; } .usa-button::after, .usa-button:visited::after { border-radius: 0 !important; } .usa-button--big, .layout--node-event .field--name-field-event-url a { border-radius: 0.25rem !important; font-size: 1.0625rem !important; padding: 1rem 1.5rem !important; } /* ---------------------------------------- Call-out ---------------------------------------- */ .call-out { width: 100%; padding: 1.25rem; background-color: #fcfcfc; border: 1px solid #c6cace; margin-bottom: 1.125rem; } .call-out p { font-size: 1.0625rem; line-height: 1.6; } .call-out h3 { font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 1.1875rem; margin: 0; } @media all and (min-width: 30em) { .call-out { width: 13.5rem; } .call-out.align-left { float: left; margin-right: 1.25rem; } .call-out.align-right { float: right; margin-left: 1.25rem; } } /* ---------------------------------------- Mobile Navigation ---------------------------------------- */ @media all and (max-width: 54.99em) { .usa-nav { right: 0; left: auto; } .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-nav__link.usa-current::after { width: 0.4375rem; top: 0; bottom: 0; left: 0; border-radius: 0; height: auto; } span.usa-current-border, .usa-nav__submenu-item .usa-current-border, .usa-nav__primary .usa-nav__link.usa-current > span, .usa-nav__primary .usa-nav__link.is-active > span, .usa-nav__primary .usa-accordion__button.usa-current > span { border-left: none !important; padding-left: 0 !important; } } @media all and (min-width: 55em) { .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-accordion__button[aria-expanded=true] { border-bottom: none; } .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-nav__link, .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-accordion__button { line-height: 1; } .usa-header--extended .usa-nav .usa-nav__primary { margin-left: 0; } .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item { font-size: 0.9375rem; } .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-accordion__button { font-size: inherit; } .usa-header--extended .usa-nav .usa-nav__inner { padding-right: 1rem; } .usa-header--extended .usa-nav .usa-nav__secondary .usa-nav__secondary-links { margin-bottom: 0; } } @media all and (max-width: 54.99em) { .usa-header--extended .usa-nav { background: var(--menu-mobile-background); } .usa-header--extended .usa-nav .default, .usa-header--extended .usa-nav .no-header { display: flex; flex-direction: column; } .usa-header--extended .usa-nav .default .usa-nav__secondary, .usa-header--extended .usa-nav .no-header .usa-nav__secondary { order: 1; } .usa-header--extended .usa-nav .default section, .usa-header--extended .usa-nav .no-header section { order: 2; } .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item:first-child { border-top: 0 none; } .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-accordion__button { background-position: right 0.5rem center; } .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-accordion__button::before, .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-accordion__button span::after { content: none; display: none; } .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-accordion__button[aria-expanded=true] { background-image: var(--menu-mobile-expanded-icon); background-size: 10px 10px; } .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-accordion__button[aria-expanded=true]:hover { background-image: var(--menu-mobile-expanded-icon-hover); } .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-accordion__button[aria-expanded=false] { background-image: var(--menu-mobile-unexpanded-icon); background-size: 10px 10px; } .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-accordion__button[aria-expanded=false]:hover { background-image: var(--menu-mobile-unexpanded-icon-hover); } .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-nav__submenu .usa-nav__submenu-item { border: 0 none; font-size: 0.9375rem; } .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-nav__submenu .usa-nav__submenu-item .usa-current-border { border-left: 0 none; padding-left: 0; } .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-nav__submenu .usa-nav__submenu-item:hover a { background-color: white; color: var(--menu-mobile-text-hover) !important; } .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-nav__submenu .usa-nav__submenu-item a { padding-left: 3rem; color: white !important; } .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-nav__link { color: white !important; font-size: 1.0625rem; padding-right: 1.6875rem; } .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-nav__link:hover { background-color: white; color: var(--menu-mobile-text-hover) !important; } .usa-header--extended .usa-nav .usa-nav__secondary button.doj-sharing__toggle { background-image: url("../images/ojp/share-white.svg") !important; } .usa-header--extended .usa-nav .usa-nav__secondary .usa-nav__secondary-links .usa-nav__secondary-item { margin-bottom: 1.5625rem; } .usa-header--extended .usa-nav .usa-nav__secondary .usa-nav__secondary-links .usa-nav__secondary-item a, .usa-header--extended .usa-nav .usa-nav__secondary .usa-nav__secondary-links .usa-nav__secondary-item a:visited { color: white !important; font-size: 0.9375rem; padding: 0.375rem 0; } } .usa-alert__body > *, .usa-alert--error .usa-alert__body > *, .usa-alert--warning .usa-alert__body > * { margin-left: 0; } .usa-footer { font-size: 0.99rem; } .usa-footer .usa-footer__secondary-link { padding: 0.8rem 0 !important; } .usa-form { font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.99rem; line-height: 1.4; } .usa-form .usa-input, .usa-form .usa-range, .usa-form .usa-select, .usa-form .usa-textarea { max-width: none; } .usa-form .usa-input--2xs, .usa-form .usa-input-group--2xs { max-width: 5ex; } .usa-form .usa-input--xs, .usa-form .usa-input-group--xs { max-width: 9ex; } .usa-form .usa-input--sm, .usa-form .usa-input--small, .usa-form .usa-input-group--sm, .usa-form .usa-input-group--small { max-width: 13ex; } .usa-form .usa-input--md, .usa-form .usa-input--medium, .usa-form .usa-input-group--md, .usa-form .usa-input-group--medium { max-width: 20ex; } .usa-form .usa-input--lg, .usa-form .usa-input-group--lg { max-width: 30ex; } .usa-form .usa-input--xl, .usa-form .usa-input-group--xl { max-width: 40ex; } .usa-form .usa-input--2xl, .usa-form .usa-input-group--2xl { max-width: 50ex; } .usa-combo-box__input, .usa-input-group, .usa-input, .usa-textarea, .usa-range, .usa-select { border-width: 1px; border-color: #565c65; border-style: solid; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; color: #1b1b1b; display: block; height: 2.5rem; margin-top: 0.5rem; max-width: 30rem; padding: 0.5rem; } .usa-textarea { height: auto; } @media all and (max-width: 29.99em) { .usa-combo-box__input, .usa-input-group, .usa-input, .usa-textarea, .usa-range, .usa-select { width: 100%; } } .usa-button.usa-input { border: 0 none; display: inline-block; } input:focus { outline: 0.25rem dashed #2491ff !important; outline-offset: 0; } .gsc-search-box tr { display: flex; } .usa-search.usa-search--small, .gsc-search-box { margin-right: 1rem; } .usa-search.usa-search--small table, .usa-search.usa-search--small tr, .usa-search.usa-search--small td, .gsc-search-box table, .gsc-search-box tr, .gsc-search-box td { background-color: transparent; margin: 0; padding: 0; border: 0; } .usa-search.usa-search--small .gsc-input, .gsc-search-box .gsc-input { background: none; padding-right: 0 !important; } .usa-search.usa-search--small .gsc-input-box, .gsc-search-box .gsc-input-box { border: 0; padding: 0; } .usa-search.usa-search--small .gsib_b, .gsc-search-box .gsib_b { display: none !important; } .usa-search.usa-search--small .gsc-search-button svg, .gsc-search-box .gsc-search-button svg { display: none; } .usa-search.usa-search--small input, .gsc-search-box input { background: transparent !important; text-indent: 0 !important; border: 1px solid #002d3f !important; border-right: 0 none !important; border-radius: 0 !important; color: #1b1b1b !important; display: block !important; height: 2rem !important; max-width: 30rem !important; padding: 0.5rem !important; margin: 0 !important; width: 18ch !important; } @media all and (min-width: 55em) { .usa-search.usa-search--small input, .gsc-search-box input { width: 27ch !important; height: 2.5rem !important; } } @media all and (min-width: 55em) { .usa-search.usa-search--small .usa-button, .usa-search.usa-search--small .gsc-search-button button, .gsc-search-box .usa-button, .gsc-search-box .gsc-search-button button { height: 2.5rem; } } .usa-search.usa-search--small input, .gsc-search-box input { border: solid 1px #adadad !important; } /* ---------------------------------------- Drupal Field Display ---------------------------------------- */ /* ---------------------------------------- Table Styles ---------------------------------------- */ table:not(.webform-ui-elements-table) th, table:not(.webform-ui-elements-table) td, .usa-table th, .usa-table td { padding: 0.625rem; } table:not(.webform-ui-elements-table) caption, .usa-prose > table:not(.webform-ui-elements-table) caption, .usa-table caption { margin-bottom: 0 !important; } .usa-sidenav > .usa-sidenav__item a:not(.usa-button) { padding: 0.5rem 1rem !important; } .usa-sidenav a:not(.usa-button):hover { background-color: #fcfcfc; text-decoration: none; } .layout--twocol-section .layout__region--second .usa-sidenav__item { font-size: 1.0625rem !important; } .field--name-field-content-advisory { display: none; } .field.field--label-inline > div { display: inline-block; vertical-align: top; } .field.field--label-inline .field__label::after { content: ":"; } .field__label { font-weight: bold; } .uswds-local-tasks.usa-button-group.usa-button-group--segmented { margin-bottom: 1.5rem; } .modification-notes { padding-top: 1.25rem; } @media all and (max-width: 63.99em) { .usa-form-group .usa-label { margin-bottom: 0.5rem; } } /* ---------------------------------------- Description Text ---------------------------------------- */ .description { font-style: italic; } /* ---------------------------------------- List Styles ---------------------------------------- */ body:not(.path-admin) ul, body:not(.path-admin) ol, .ui-dialog .ui-dialog-content ul, .ui-dialog .ui-dialog-content ol { padding-left: 0.75rem; list-style-position: inside; } .usa-nav ul, .usa-nav ol, .usa-nav__primary, .usa-nav__submenu, .usa-nav__secondary-links { padding-left: 0; list-style-position: outside; } .usa-prose .usa-collection, .usa-collection, .usa-prose > ul, .usa-prose > ol, .usa-list { padding-left: 3ch !important; } .usa-prose > ul li, .usa-prose > ol li, .usa-list li { max-width: 100%; } .usa-alert--info .usa-alert__body > * { margin-left: 0; } a:visited { color: #54278f; } .ojp-image figure .ojp-image__caption { text-align: left; padding: 0.625rem; width: 100%; background-color: #fcfcfc; border-top: none; border-right: 0.0625rem solid #dfe1e2; border-bottom: 0.0625rem solid #dfe1e2; border-left: 0.0625rem solid #dfe1e2; font-size: 0.8125rem; line-height: 1.0625rem; } .layout--twocol-section--75-25 .layout__region--second > * { margin-bottom: 1.5rem; } .usa-accordion__content { padding: 1rem 1.25rem 1rem 1.25rem !important; border: 1px solid #dfe1e2 !important; border-top: 0 none !important; position: relative; } .usa-in-page-nav { margin-left: 0; max-width: none; } .usa-in-page-nav__list a:not(.usa-button).usa-current { color: #1b1b1b; font-weight: 700; padding-left: 0.8rem; position: relative; transform: translateX(0); transition: transform 0.07s ease, padding-left 0.07s ease; } .usa-in-page-nav__list a:not(.usa-button):not(.usa-current) { color: #005ea2; } .usa-in-page-nav__list a:not(.usa-button) { display: block; padding: 0.5rem 0.2rem; text-decoration: none; transition: transform 0.07s ease, max-height 0.07s ease, padding 0.07s ease; } .usa-section h2 { margin: 0.625rem 0 1.25rem; } .usa-in-page-nav__heading { font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.25rem; font-weight: 700; line-height: 1.625rem; margin: 0 0 10px 0; } .usa-in-page-nav__list { padding-left: 0 !important; border-left: none; } .ojp-image { display: inline-block; max-width: 100%; } .ojp-image img { max-width: 100%; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ojp-image img { width: 100%; } } @media only screen and (max-width: 479px) { .ojp-image { display: block; float: none; } .ojp-image figure { margin: 0 auto; } } .ojp-image figure { margin: 0; display: flex; flex-direction: column; align-items: center; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ojp-image figure > * { width: 100%; min-height: 1px; } } .ojp-image figure > a { line-height: 0; } .ojp-image figure .ojp-image__caption { text-align: left; padding: 0.625rem; width: 100%; background-color: #fcfcfc; border-top: none; border-right: 0.0625rem solid #a9aeb1; border-bottom: 0.0625rem solid #a9aeb1; border-left: 0.0625rem solid #a9aeb1; font-size: 0.8125rem; } .ojp-image figure .ojp-image__caption .ojp-image__caption--text { line-height: 1.4rem; } .ojp-image figure .ojp-image__caption .ojp-image__caption--author { font-style: italic; line-height: 1.4rem !important; } .ojp-image figure .ojp-image__caption .ojp-image__caption--text + .ojp-image__caption--author { margin-top: 0.625rem; line-height: 1.4rem !important; } @media all and (min-width: 30em) { .ojp-image + * { margin-top: 1rem; } .ojp-image.card__video + * { margin-top: 0; } .ojp-image.align-right { margin-left: 1rem; float: right; } .ojp-image.align-left { margin-right: 1rem; float: left; } .ojp-image.align-center { display: inherit; text-align: center; } } @media all and (min-width: 30em) and (-ms-high-contrast: none), (min-width: 30em) and (-ms-high-contrast: active) { .ojp-image.align-center img { width: auto; } } @media all and (min-width: 30em) { .ojp-image.align-center figure { margin: 0 auto; } } .embedded-entity { width: 100%; } @media all and (min-width: 30em) { .embedded-entity.align-right { width: 240px; margin: 1em 0 1em 1em; } .embedded-entity.align-left { width: 240px; margin: 1em 1em 1em 0em; } } .ojp-video__caption { text-align: left; padding: 0.625rem; width: 100%; background-color: #fcfcfc; border-top: none; border-right: 0.0625rem solid #a9aeb1; border-bottom: 0.0625rem solid #a9aeb1; border-left: 0.0625rem solid #a9aeb1; font-size: 0.8125rem; } .ojp-video__caption a { text-decoration: none; } .video-embed-field-responsive-video { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } .video-embed-field-responsive-video iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: 0; } drupal-entity[data-entity-bundle=video] { display: block; } @media only screen and (max-width: 479px) { .long-text { margin-top: 1em; margin-bottom: 1em; } .long-text .ojp-image { display: flex; justify-content: center; align-items: flex-start; margin-bottom: 1em; } .long-text .ojp-image:not(:first-child) { margin-top: 1em; } .long-text .ojp-image.align-right, .long-text .ojp-image.align-left { float: none; } } body:not(.path-admin) p + ul, body:not(.path-admin) p + ol { margin-top: 0.3125rem; } body:not(.path-admin) ul, body:not(.path-admin) ol { padding-left: 0.75rem; list-style-position: inside; } .text-formatted ul, .cke_editable_themed ul, .use-float-friendly-lists ul, .usa-accordion__content ul { list-style-position: inside; padding-left: 1.5rem; } .text-formatted ol li, .text-formatted ul li, .cke_editable_themed ol li, .cke_editable_themed ul li, .use-float-friendly-lists ol li, .use-float-friendly-lists ul li, .usa-accordion__content ol li, .usa-accordion__content ul li { overflow: hidden; } .text-formatted ol li *, .text-formatted ul li *, .cke_editable_themed ol li *, .cke_editable_themed ul li *, .use-float-friendly-lists ol li *, .use-float-friendly-lists ul li *, .usa-accordion__content ol li *, .usa-accordion__content ul li * { text-indent: 0; } .text-formatted ol li a, .text-formatted ul li a, .cke_editable_themed ol li a, .cke_editable_themed ul li a, .use-float-friendly-lists ol li a, .use-float-friendly-lists ul li a, .usa-accordion__content ol li a, .usa-accordion__content ul li a { padding: 0.25rem 0; } .text-formatted ol li a + a, .text-formatted ul li a + a, .cke_editable_themed ol li a + a, .cke_editable_themed ul li a + a, .use-float-friendly-lists ol li a + a, .use-float-friendly-lists ul li a + a, .usa-accordion__content ol li a + a, .usa-accordion__content ul li a + a { padding: 0.25rem 0; } .text-formatted ol li, .cke_editable_themed ol li, .use-float-friendly-lists ol li, .usa-accordion__content ol li { margin-bottom: 0.3125rem; padding-left: 1.25rem; text-indent: -1.25rem; } .text-formatted ul li, .cke_editable_themed ul li, .use-float-friendly-lists ul li, .usa-accordion__content ul li { margin-bottom: 0.625rem; padding-left: 1.5rem; text-indent: -1.4375rem; } .text-formatted ul a { padding-bottom: 0px; padding-top: 0px; } .text-formatted table a, .text-formatted ul a { box-sizing: border-box; display: initial; } .branded-list.usa-footer__logos-container .branded-list-title { padding-left: 1em; } @media print { .branded-list.usa-footer__logos-container .branded-list-title { display: none; } } .branded-list.usa-footer__logos-container .usa-footer-logo { text-align: center; } .branded-list.usa-footer__logos-container .usa-footer-logo img { padding: 1em; } @media print { .branded-list.usa-footer__logos-container .usa-footer-logo img { max-width: 75px; padding: 0; } } .branded-list.usa-footer__logos-container ul { font-weight: bold; } @media print { .branded-list.usa-footer__logos-container ul { display: none; } } .list--inline { margin-bottom: 0; margin-top: 0; list-style-type: none; padding-left: 0; display: flex; flex-wrap: wrap; } .list--inline--pipe-separated li:not(:last-child)::after { margin-left: 0.25rem; margin-right: 0.25rem; content: " | "; white-space: pre; } .list--inline--pipe-separated li .ext { margin-right: -3px; } .usa-tooltip__body::after { display: none !important; } .usa-accordion ul[title], .usa-accordion ol[title] { position: relative; } .usa-accordion ul[title]:hover::after, .usa-accordion ol[title]:hover::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: #1b1b1b; color: white; padding: 0.5rem 0.75rem; border-radius: 4px; font-size: 0.875rem; line-height: 1.2; white-space: nowrap; z-index: 2147483647 !important; margin-bottom: 5px; opacity: 0; animation: accordionListTooltipFadeIn 0.3s ease-in-out forwards; pointer-events: none; } .usa-accordion ul[title]:hover::before, .usa-accordion ol[title]:hover::before { display: none; } .usa-accordion ul[title][data-position=top]:hover::after, .usa-accordion ol[title][data-position=top]:hover::after { bottom: 100%; top: auto; margin-bottom: 5px; margin-top: 0; } .usa-accordion ul[title][data-position=top]:hover::before, .usa-accordion ol[title][data-position=top]:hover::before { bottom: 100%; top: auto; border-top-color: #1b1b1b; border-bottom-color: transparent; margin-bottom: 0; margin-top: 0; } .usa-accordion ul[title][data-position=bottom]:hover::after, .usa-accordion ol[title][data-position=bottom]:hover::after { top: 100%; bottom: auto; margin-top: 5px; margin-bottom: 0; } .usa-accordion ul[title][data-position=bottom]:hover::before, .usa-accordion ol[title][data-position=bottom]:hover::before { top: 100%; bottom: auto; border-bottom-color: #1b1b1b; border-top-color: transparent; margin-top: 0; margin-bottom: 0; } .usa-accordion ul[title][data-position=left]:hover::after, .usa-accordion ol[title][data-position=left]:hover::after { right: 100%; left: auto; top: 50%; bottom: auto; transform: translateY(-50%); margin-right: 5px; margin-bottom: 0; } .usa-accordion ul[title][data-position=left]:hover::before, .usa-accordion ol[title][data-position=left]:hover::before { right: 100%; left: auto; top: 50%; bottom: auto; transform: translateY(-50%); border-left-color: #1b1b1b; border-top-color: transparent; margin-right: 0; margin-bottom: 0; } .usa-accordion ul[title][data-position=right]:hover::after, .usa-accordion ol[title][data-position=right]:hover::after { left: 100%; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); margin-left: 5px; margin-bottom: 0; } .usa-accordion ul[title][data-position=right]:hover::before, .usa-accordion ol[title][data-position=right]:hover::before { left: 100%; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); border-right-color: #1b1b1b; border-top-color: transparent; margin-left: 0; margin-bottom: 0; } .usa-accordion ul li[title], .usa-accordion ol li[title] { position: relative; } .usa-accordion ul li[title]:hover::after, .usa-accordion ol li[title]:hover::after { content: attr(title); position: absolute; bottom: 100%; left: 0; background-color: #1b1b1b; color: white; padding: 0.5rem 0.75rem; border-radius: 4px; font-size: 0.875rem; line-height: 1.2; white-space: nowrap; z-index: 1000; margin-bottom: 5px; opacity: 0; animation: accordionListTooltipFadeIn 0.3s ease-in-out forwards; pointer-events: none; } .usa-accordion ul li[title]:hover::before, .usa-accordion ol li[title]:hover::before { content: ""; position: absolute; bottom: 100%; left: 10px; border: 5px solid transparent; border-top-color: #1b1b1b; z-index: 1000; margin-bottom: 0; opacity: 0; animation: accordionListTooltipFadeIn 0.3s ease-in-out forwards; pointer-events: none; } .usa-accordion ul li[title][data-position=top]:hover::after, .usa-accordion ol li[title][data-position=top]:hover::after { bottom: 100%; top: auto; margin-bottom: 5px; margin-top: 0; } .usa-accordion ul li[title][data-position=top]:hover::before, .usa-accordion ol li[title][data-position=top]:hover::before { bottom: 100%; top: auto; border-top-color: #1b1b1b; border-bottom-color: transparent; margin-bottom: 0; margin-top: 0; } .usa-accordion ul li[title][data-position=bottom]:hover::after, .usa-accordion ol li[title][data-position=bottom]:hover::after { top: 100%; bottom: auto; margin-top: 5px; margin-bottom: 0; } .usa-accordion ul li[title][data-position=bottom]:hover::before, .usa-accordion ol li[title][data-position=bottom]:hover::before { top: 100%; bottom: auto; border-bottom-color: #1b1b1b; border-top-color: transparent; margin-top: 0; margin-bottom: 0; left: 10px; } .usa-accordion ul li[title][data-position=left]:hover::after, .usa-accordion ol li[title][data-position=left]:hover::after { right: 100%; left: auto; top: 0; bottom: auto; margin-right: 5px; margin-bottom: 0; } .usa-accordion ul li[title][data-position=left]:hover::before, .usa-accordion ol li[title][data-position=left]:hover::before { right: 100%; left: auto; top: 10px; bottom: auto; border-left-color: #1b1b1b; border-top-color: transparent; margin-right: 0; margin-bottom: 0; } .usa-accordion ul li[title][data-position=right]:hover::after, .usa-accordion ol li[title][data-position=right]:hover::after { left: 100%; right: auto; top: 0; bottom: auto; margin-left: 5px; margin-bottom: 0; } .usa-accordion ul li[title][data-position=right]:hover::before, .usa-accordion ol li[title][data-position=right]:hover::before { left: 100%; right: auto; top: 10px; bottom: auto; border-right-color: #1b1b1b; border-top-color: transparent; margin-left: 0; margin-bottom: 0; } @keyframes accordionListTooltipFadeIn { from { opacity: 0; transform: translateX(-50%) translateY(-2px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .listing-item-row { display: flex; align-items: flex-start; margin-top: 1.6875rem; border-bottom: 1px solid #2d2e2f; margin-bottom: 1.875rem; padding-bottom: 1.25rem; } .listing-item-row.listing-item--survey { border-bottom: none; margin-top: 0; margin-bottom: 0; } .listing-item-row .listing-item__eyebrow { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; margin-bottom: 0.3125rem; font-weight: bold; } .listing-item-row .listing-item__title { font-size: 1.5rem; margin: 0 0 0.625rem 0; } .listing-item-row .listing-item__title a { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; text-decoration: none; } .listing-item-row .listing-item__title a:hover { color: #1f303e; text-decoration: underline; } .listing-item-row .listing-item__title a:active { color: #11181d; } .listing-item-row .listing-item__title a:focus { outline: 0.25rem dashed #2491ff; outline-offset: 0; } .listing-item-row .listing-item__title a:visited { color: #54278f; } .listing-item-row .listing-item__content_wrapper { flex-basis: 100%; } .listing-item-row .listing-item__wrapper { margin-bottom: 0.625rem; } .listing-item-row .listing-item__wrapper--columns { display: flex; flex-direction: column-reverse; } @media all and (min-width: 40em) { .listing-item-row .listing-item__wrapper--columns { flex-direction: row; } } .listing-item-row .listing-item__content { flex-grow: 1; word-break: break-word; } .listing-item-row .listing-item .field--label-inline .field__label { font-weight: normal; } .listing-item__thumbnail { margin-right: 1rem; flex-basis: 5rem; flex-shrink: 0; } .listing-item__thumbnail.auto-thumbnail img { border: 1px solid #919191; } .listing-item__default-icon { width: 4.6875rem; } .listing-item__media { margin-bottom: 0.875rem; } @media all and (min-width: 40em) { .listing-item__media { margin-bottom: 0; margin-left: 1.875rem; } } .listing-item__media--video, .listing-item__media--video-file, .listing-item__media--remote-mp4 { min-width: 13.75rem; width: 13.75rem; } .listing-item__media--audio-file { min-width: 8.375rem; } .listing-item__media--audio-file::after { content: ""; background-position: 15px 15px; background-repeat: no-repeat; background-size: 30px 26.7px; display: block; height: 56px; width: 60px; } @media all and (min-width: 40em) { .listing-item__media--audio-file::after { float: right; } } .listing-item__media--audio-file.listing-item__media--with-hero-icon { min-width: 13.75rem; width: 13.75rem; } .listing-item__media--audio-file.listing-item__media--with-hero-icon::after { display: none; } .listing-item__media--audio-file.listing-item__media--with-hero-icon .field--name-field-view-full-image { display: none; } .listing-item__media--audio-file .listing-item__hero-icon { float: right; width: 13.75rem; height: auto; overflow: hidden; } .listing-item__media--audio-file .listing-item__hero-icon img { width: 100%; height: 100%; object-fit: cover; } @media all and (min-width: 40em) { .listing-item__media--audio-file .listing-item__hero-icon { float: right; } } .listing-item--survey .listing-item__title { margin-bottom: 0.3125rem; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 0.99rem; line-height: 1; } .listing-item--survey .file { background-image: none; padding-left: 0; } table:not(.webform-ui-elements-table), .usa-table { border: 0; font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important; text-align: left; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 1.0625rem; margin: 0; line-height: normal; } @media print { table:not(.webform-ui-elements-table) thead, .usa-table thead { display: table-row-group; } } table:not(.webform-ui-elements-table) thead th, .usa-table thead th { background-clip: border-box; } table:not(.webform-ui-elements-table) thead th a, .usa-table thead th a { display: block; text-decoration: none; font-weight: bold; padding-right: 1rem; position: relative; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { table:not(.webform-ui-elements-table) thead th a, .usa-table thead th a { height: 2.5rem; display: flex; align-items: center; } } table:not(.webform-ui-elements-table) thead th a::after, table:not(.webform-ui-elements-table) thead th a::before, .usa-table thead th a::after, .usa-table thead th a::before { content: ""; display: inline-block; width: 0.625rem; height: 0.625rem; background-size: 100%; position: absolute; right: 0; z-index: 1; top: 50%; transform: translateY(1px); background-image: url("../color-theme-scss/assets-legacy/uswds-alt/arrow-down-disabled.svg"); } table:not(.webform-ui-elements-table) thead th a::before, .usa-table thead th a::before { transform: rotate(180deg) translateY(8px); top: 50%; } table:not(.webform-ui-elements-table) thead th a > span, .usa-table thead th a > span { position: absolute; right: 0; top: 50%; transform: translateY(-10px); width: 0.625rem; height: 1.25rem; z-index: 2; background-size: 0.625rem 0.625rem; background-position-y: center; background-repeat: no-repeat; } table:not(.webform-ui-elements-table) thead th a > span.tablesort--asc, table:not(.webform-ui-elements-table) thead th a > span.tablesort--desc, .usa-table thead th a > span.tablesort--asc, .usa-table thead th a > span.tablesort--desc { background-image: url("../color-theme-scss/assets-legacy/arrow-down.svg"); } table:not(.webform-ui-elements-table) thead th a > span.tablesort--desc, .usa-table thead th a > span.tablesort--desc { transform: rotate(180deg) translateY(10px); } table:not(.webform-ui-elements-table) thead .is-active a::after, table:not(.webform-ui-elements-table) thead .is-active a::before, .usa-table thead .is-active a::after, .usa-table thead .is-active a::before { background-image: none; } table:not(.webform-ui-elements-table) caption, .usa-table caption { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 1.0625rem; line-height: normal; margin-bottom: 0; padding: 0.625rem; } table:not(.webform-ui-elements-table) th, table:not(.webform-ui-elements-table) td, .usa-table th, .usa-table td { padding: 0.625rem; } table:not(.webform-ui-elements-table) caption, .usa-table caption { background-color: transparent; border-top: 0; border-left: 0; border-right: 0; } table:not(.webform-ui-elements-table) td, table:not(.webform-ui-elements-table) th, table:not(.webform-ui-elements-table) tbody tr, .usa-table td, .usa-table th, .usa-table tbody tr { background-color: transparent; border: 0; } table:not(.webform-ui-elements-table) thead th, .usa-table thead th { border-top: 0; } table:not(.webform-ui-elements-table) caption, table:not(.webform-ui-elements-table) thead th, .usa-table caption, .usa-table thead th { color: white; background-color: #112f4e; } table:not(.webform-ui-elements-table) thead th, .usa-table thead th { border-top: 1px solid #c6cace; } table:not(.webform-ui-elements-table) th, table:not(.webform-ui-elements-table) td, .usa-table th, .usa-table td { border-top: 1px solid #c6cace; border-bottom: 1px solid #c6cace; } table:not(.webform-ui-elements-table):not(.usa-table--borderless) caption, .usa-table:not(.usa-table--borderless) caption { border-top: 1px solid #c6cace; border-left: 1px solid #c6cace; border-right: 1px solid #c6cace; } table:not(.webform-ui-elements-table):not(.usa-table--borderless) th, table:not(.webform-ui-elements-table):not(.usa-table--borderless) td, .usa-table:not(.usa-table--borderless) th, .usa-table:not(.usa-table--borderless) td { border-left: 1px solid #c6cace; border-right: 1px solid #c6cace; } table:not(.webform-ui-elements-table) thead th[aria-sort], .usa-table thead th[aria-sort] { color: white; background-color: #112f4e; } table:not(.webform-ui-elements-table) thead th a, .usa-table thead th a { color: white; } table:not(.webform-ui-elements-table) thead th a::after, table:not(.webform-ui-elements-table) thead th a::before, .usa-table thead th a::after, .usa-table thead th a::before { background-image: url("../color-theme-scss/assets-legacy/uswds-alt/arrow-down-disabled-gray-30.svg"); } table:not(.webform-ui-elements-table) thead th a > span.tablesort--asc, table:not(.webform-ui-elements-table) thead th a > span.tablesort--desc, .usa-table thead th a > span.tablesort--asc, .usa-table thead th a > span.tablesort--desc { background-image: url("../color-theme-scss/assets-legacy/uswds-alt/arrow-down-white.svg"); } table:not(.webform-ui-elements-table) tr:nth-child(even), .usa-table tr:nth-child(even) { background-color: #eff6fb; } table:not(.webform-ui-elements-table) tr:nth-child(odd), .usa-table tr:nth-child(odd) { background-color: white; } table:not(.webform-ui-elements-table) tr:hover td, table:not(.webform-ui-elements-table) tr:hover th[scope=row], .usa-table tr:hover td, .usa-table tr:hover th[scope=row] { background-color: #d9e8f6; } table:not(.webform-ui-elements-table) tbody th, .usa-prose > table:not(.webform-ui-elements-table) tbody th, .usa-table tbody th { text-align: left; font-weight: bold; } table:not(.webform-ui-elements-table) caption, .usa-prose > table:not(.webform-ui-elements-table) caption, .usa-table caption { font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.9375rem; font-weight: bold; margin-bottom: 0.75rem; text-align: left; } .usa-table--plain { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 1.0625rem; margin: 0; line-height: normal; } @media print { .usa-table--plain thead { display: table-row-group; } } .usa-table--plain thead th { background-clip: border-box; } .usa-table--plain thead th a { display: block; text-decoration: none; font-weight: bold; padding-right: 1rem; position: relative; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .usa-table--plain thead th a { height: 2.5rem; display: flex; align-items: center; } } .usa-table--plain thead th a::after, .usa-table--plain thead th a::before { content: ""; display: inline-block; width: 0.625rem; height: 0.625rem; background-size: 100%; position: absolute; right: 0; z-index: 1; top: 50%; transform: translateY(1px); background-image: url("../color-theme-scss/assets-legacy/uswds-alt/arrow-down-disabled.svg"); } .usa-table--plain thead th a::before { transform: rotate(180deg) translateY(8px); top: 50%; } .usa-table--plain thead th a > span { position: absolute; right: 0; top: 50%; transform: translateY(-10px); width: 0.625rem; height: 1.25rem; z-index: 2; background-size: 0.625rem 0.625rem; background-position-y: center; background-repeat: no-repeat; } .usa-table--plain thead th a > span.tablesort--asc, .usa-table--plain thead th a > span.tablesort--desc { background-image: url("../color-theme-scss/assets-legacy/arrow-down.svg"); } .usa-table--plain thead th a > span.tablesort--desc { transform: rotate(180deg) translateY(10px); } .usa-table--plain thead .is-active a::after, .usa-table--plain thead .is-active a::before { background-image: none; } .usa-table--plain caption { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 1.0625rem; line-height: normal; margin-bottom: 0; padding: 0.625rem; } .usa-table--plain th, .usa-table--plain td { padding: 0.625rem; } .usa-table--plain caption, .usa-table--plain thead th { color: #1b1b1b; background-color: #dfe1e2; } .usa-table--plain thead th { border-top: 1px solid #565c65; } .usa-table--plain th, .usa-table--plain td { border-top: 1px solid #565c65; border-bottom: 1px solid #565c65; } .usa-table--plain:not(.usa-table--borderless) caption { border-top: 1px solid #565c65; border-left: 1px solid #565c65; border-right: 1px solid #565c65; } .usa-table--plain:not(.usa-table--borderless) th, .usa-table--plain:not(.usa-table--borderless) td { border-left: 1px solid #565c65; border-right: 1px solid #565c65; } .usa-table--plain thead th[aria-sort] { color: #1b1b1b; background-color: #97d4ea; } .usa-table--plain thead th a { color: #1b1b1b; } .usa-table--plain thead th a::after, .usa-table--plain thead th a::before { background-image: url("../color-theme-scss/assets-legacy/uswds-alt/arrow-down-disabled.svg"); } .usa-table--plain thead th a > span.tablesort--asc, .usa-table--plain thead th a > span.tablesort--desc { background-image: url("../color-theme-scss/assets-legacy/arrow-down.svg"); } .usa-table--plain tr:hover td, .usa-table--plain tr:hover th[scope=row] { background-color: white; } .usa-table--borderless { border: 0; } .usa-table--borderless caption { border-top: 0; border-left: 0; border-right: 0; } .usa-table--borderless th:first-child { padding-left: 0.625rem; } .usa-table--borderless th, .usa-table--borderless td { border-left: 0; border-right: 0; } .table-wrapper { max-width: 100%; overflow: auto; clear: both; } @media print { .table-wrapper { overflow: visible; } } .table-wrapper .sticky-header a:visited, .table-wrapper .sticky-header a:hover { color: white; } .table-wrapper table.dataTable tr:nth-child(even) { background-color: #eff6fb; } .table-wrapper table.dataTable tr:nth-child(odd) { background-color: white; } * + .table-wrapper { margin: 2rem 0; } table.dataTable, table.dataTable th, table.dataTable td { box-sizing: border-box; } .dataTables_wrapper table.dataTable { border-collapse: collapse; } .dataTables_wrapper table.dataTable tr:nth-child(even) { background-color: #eff6fb; } .dataTables_wrapper table.dataTable tr:nth-child(odd) { background-color: white; } .dataTables_wrapper table.dataTable > tbody > tr.child ul.dtr-details li { text-indent: inherit; } .dataTables_wrapper .dataTables_length { height: 3rem; display: flex; align-items: center; } .dataTables_wrapper .dataTables_filter { height: 3rem; display: flex; align-items: center; margin-bottom: 1rem; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers { padding-top: 0; width: 100%; display: flex; justify-content: space-between; align-items: stretch; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers > span { display: none; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers > span.prev-removed { padding-left: 9.1875rem; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers > span.next-removed { padding-right: 9.1875rem; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled), .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled) { background-color: #face00; border-radius: 0; color: #1b1b1b; font-weight: bold; position: relative; width: 9.1875rem; height: 3.875rem; background-color: #face00 !important; color: #1b1b1b !important; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-input, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-input { border: 0 none; display: inline-block; } .usa-prose > .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled), .usa-prose > .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled) { text-decoration: inherit; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled):visited, .usa-prose > .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled):visited, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled):visited, .usa-prose > .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled):visited { color: #1b1b1b; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled)::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled)::after { position: absolute; width: 100%; bottom: 0; left: 0; right: 0; height: 0.25rem; background-color: #c9ab48; content: ""; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled):not([disabled]).usa-focus, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled):not([disabled]):focus, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled):not([disabled]).usa-focus, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled):not([disabled]):focus { outline-offset: 0; outline: 0.1875rem dashed #2491ff; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled):active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled):active { background-color: #c9ab48; color: #1b1b1b; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled):hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled):hover { background-color: #ffe396; color: #1b1b1b; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--secondary, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--secondary:visited, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--secondary, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--secondary:visited { background-color: #002d3f; color: white; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--secondary::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--secondary:visited::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--secondary::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--secondary:visited::after { background-color: #11181d; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--secondary.usa-button--active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--secondary:active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--secondary:visited.usa-button--active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--secondary:visited:active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--secondary.usa-button--active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--secondary:active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--secondary:visited.usa-button--active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--secondary:visited:active { background-color: #11181d; color: white; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--secondary.usa-button--hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--secondary:hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--secondary:visited.usa-button--hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--secondary:visited:hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--secondary.usa-button--hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--secondary:hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--secondary:visited.usa-button--hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--secondary:visited:hover { background-color: #1f303e; color: white; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled):disabled, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled):disabled { background-color: #dfe1e2; color: #a9aeb1; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled):disabled::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled):disabled::after { background-color: #a9aeb1; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline { background-color: transparent; color: #1b1b1b; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline::after { top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; background-color: transparent; border: 0.25rem solid #face00; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline:hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline:hover { background-color: transparent; color: #1b1b1b; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--hover::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline:hover::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--hover::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline:hover::after { border: 0.25rem solid #ffe396; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline:active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline:active { background-color: transparent; color: #1b1b1b; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--active::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline:active::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--active::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline:active::after { border: 0.25rem solid #c9ab48; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--secondary, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--secondary { color: #1b1b1b; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--secondary::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--secondary::after { border: 0.25rem solid #002d3f; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--secondary.usa-button--hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--secondary:hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--secondary.usa-button--hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--secondary:hover { color: #1b1b1b; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--secondary.usa-button--hover::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--secondary:hover::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--secondary.usa-button--hover::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--secondary:hover::after { border: 0.25rem solid #1f303e; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--secondary.usa-button--active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--secondary:active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--secondary.usa-button--active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--secondary:active { color: #1b1b1b; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--secondary.usa-button--active::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--secondary:active::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--secondary.usa-button--active::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--secondary:active::after { border: 0.25rem solid #11181d; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline:disabled, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline:disabled { color: #a9aeb1; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline:disabled::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline:disabled::after { border: 0.25rem solid #dfe1e2; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--inverse, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--inverse { background-color: transparent; color: white; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--inverse::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--inverse::after { top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; background-color: transparent; border: 0.25rem solid white; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--inverse::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--inverse::after { border: 0.25rem solid white; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--inverse.usa-button--hover::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--inverse:hover::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--inverse.usa-button--hover::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--inverse:hover::after { border: 0.25rem solid white; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--inverse.usa-button--active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--inverse:active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--inverse.usa-button--active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--inverse:active { color: #a9aeb1; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--inverse.usa-button--active::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--inverse:active::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--inverse.usa-button--active::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--inverse:active::after { border: 0.25rem solid #a9aeb1; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--big, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--big { font-size: 1.0625rem; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled):hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled):hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--hover { background-color: #ffe396 !important; color: #1b1b1b !important; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled):active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled):active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--active { background-color: #c9ab48 !important; color: #1b1b1b !important; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline { background-color: #face00 !important; color: #1b1b1b !important; border: none !important; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline:hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline:hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--hover { background-color: #ffe396 !important; color: #1b1b1b !important; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline:active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline.usa-button--active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline:active, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline.usa-button--active { background-color: #c9ab48 !important; color: #1b1b1b !important; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled).usa-button--outline::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled).usa-button--outline::after { display: none !important; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next { width: 9.1875rem; height: 3.875rem; border: 0 none; padding: 1.125rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; text-decoration: none; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous.disabled, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next.disabled { background-color: #dfe1e2 !important; color: #a9aeb1 !important; cursor: not-allowed; pointer-events: none; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous.disabled::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next.disabled::after { background-color: #a9aeb1 !important; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous.disabled { display: none; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled):hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled):hover { background-color: #ffe396 !important; background-image: none !important; background: #ffe396 !important; color: #1b1b1b !important; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled):hover::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled):hover::after { background-color: transparent !important; background-image: none !important; background: transparent !important; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled):hover::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled):hover::after { background-color: #c9ab48 !important; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous { margin-left: 0; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next { margin-left: auto; } @media all and (min-width: 40em) { .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next { margin-left: 0; } } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.current { display: inline-flex; align-items: center; justify-content: center; color: black !important; background-color: #fcfcfc !important; border-bottom: solid 3px #face00; border-top: 0 none; border-left: 0 none; border-right: 0 none; padding-bottom: 0.9375rem; font-weight: bold; position: relative; z-index: 1; cursor: default; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.current:only-child { display: none; } @media all and (min-width: 40em) { .dataTables_wrapper .dataTables_paginate.paging_simple_numbers > span { border-top: 1px solid #a9aeb1; border-bottom: 1px solid #a9aeb1; background-color: #fcfcfc; display: block; text-align: center; flex-grow: 1; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers > span a.paginate_button { display: inline-block; padding: 1.125rem; background-color: #fcfcfc; height: 3.75rem; border: 0 none; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers > span a.paginate_button:hover { outline: 0.25rem solid #2491ff; outline-offset: 0rem; position: relative; z-index: 2; color: inherit !important; border: 0 none; background: #fcfcfc; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers > span a.paginate_button.current { color: black !important; border: 0 none; background: #fcfcfc; border-bottom: solid 3px #face00; padding-bottom: 0.9375rem; position: relative; z-index: 1; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers > span a.paginate_button.current:only-child { display: none; } } .dataTables_wrapper label { display: block; line-height: 1.2; max-width: 30rem; font-weight: bold; } .dataTables_wrapper input[type=search] { float: none; border-width: 1px; border-color: #565c65; border-style: solid; appearance: none; border-radius: 0; color: #1b1b1b; height: 2.5rem; max-width: 30rem; padding: 0.5rem; } .dataTables_wrapper input[type=search]:focus { outline: 0.25rem solid #2491ff; outline-offset: 0rem; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled), .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled) { background-color: #face00 !important; background-image: none !important; background: #face00 !important; color: #1b1b1b !important; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled):hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled):hover { background-color: #ffe396 !important; background-image: none !important; background: #ffe396 !important; color: #1b1b1b !important; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled):hover::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled):hover::after { background-color: transparent !important; background-image: none !important; background: transparent !important; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next { height: 3.875rem; border: 0 none; padding: 1.125rem; position: relative; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled)::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled)::after { position: absolute; width: 100%; bottom: 0; left: 0; right: 0; height: 0.25rem; background-color: #c9ab48; content: ""; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous:not(.disabled):hover::after, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next:not(.disabled):hover::after { background-color: transparent; } .webform-off-canvas table:not(.webform-ui-elements-table), .webform-off-canvas table:not(.webform-ui-elements-table) caption, .webform-off-canvas table:not(.webform-ui-elements-table) thead, .webform-off-canvas table:not(.webform-ui-elements-table) tbody, .webform-off-canvas table:not(.webform-ui-elements-table) tfoot, .webform-off-canvas table:not(.webform-ui-elements-table) tr, .webform-off-canvas table:not(.webform-ui-elements-table) th, .webform-off-canvas table:not(.webform-ui-elements-table) td { all: revert !important; } .ojp-listing-table > .view-content { max-width: 100%; overflow: auto; clear: both; } @media all and (max-width: 39.99em) { .ojp-listing-table table, .ojp-listing-table thead, .ojp-listing-table tbody, .ojp-listing-table th, .ojp-listing-table td, .ojp-listing-table tr, .ojp-listing-table caption { display: block; } .ojp-listing-table thead th:not(:first-child) { border-top: 0 none; } .ojp-listing-table tbody tr { border: 1px solid #565c65; } .ojp-listing-table tbody tr:first-child { border-top: 0 none; } .ojp-listing-table tbody tr td { border: 0 none; } .ojp-listing-table tbody tr td.views-field-title a { font-weight: bold; } } .moderation-dashboard-block .usa-table { width: 100%; } /** * @file * Flexible card component styles. * * Ported from OJP legacy theme's _flexible-card.scss. */ .flexible-card { border: thin solid #a9aeb1; background: #fcfcfc; margin-bottom: 1.5rem; } .flexible-card__headline a { text-decoration: none; } .flexible-card__body { padding: 1.25rem; } .flexible-card .field--name-field-image { display: contents; } @media all and (min-width: 30em) { .flexible-card.first { margin-left: 0; } .flexible-card.last { margin-right: 0; } } @media all and (min-width: 30em) { .flexible-card--image-left { display: flex; flex-direction: row; } .flexible-card--image-left .card__image { flex: 0 1 48%; padding-right: 0.75rem; } .flexible-card--image-left .card__image img { height: 100%; object-fit: cover; } .flexible-card--image-left .flexible-card__body { flex: 1; } } @media all and (min-width: 30em) { .flexible-card--image-right { display: flex; flex-direction: row-reverse; } .flexible-card--image-right .card__image { flex: 0 1 48%; padding-left: 0.75rem; } .flexible-card--image-right .card__image img { height: 100%; object-fit: cover; } .flexible-card--image-right .flexible-card__body { flex: 1; } } .flexible-card--image-top { display: block; } @media all and (min-width: 30em) { .flexible-card--image-top { display: block; } .flexible-card--image-top .card__image { width: 100%; padding-left: 0; padding-right: 0; } .flexible-card--image-top .card__image img { width: 100%; height: auto; max-height: 500px; object-fit: cover; } } @media all and (min-width: 30em) { .flexible-card--two-across.flexible-card--image-left, .flexible-card--two-across.flexible-card--image-right, .flexible-card--three-across.flexible-card--image-left, .flexible-card--three-across.flexible-card--image-right, .flexible-card--four-across.flexible-card--image-left, .flexible-card--four-across.flexible-card--image-right { display: block; } .flexible-card--two-across.flexible-card--image-left .card__image, .flexible-card--two-across.flexible-card--image-right .card__image, .flexible-card--three-across.flexible-card--image-left .card__image, .flexible-card--three-across.flexible-card--image-right .card__image, .flexible-card--four-across.flexible-card--image-left .card__image, .flexible-card--four-across.flexible-card--image-right .card__image { width: 100%; padding-left: 0; padding-right: 0; } } @media all and (min-width: 30em) { .layout__region .flexible-card--two-across { flex: 0 1 48%; display: block; } .layout__region .flexible-card--two-across.odd { margin-right: auto; display: block; } .layout__region .flexible-card--image-top { display: block; } .layout--onecol .layout__region .flexible-card--two-across { display: block; flex: 0 1 48.4375%; } .layout--onecol .layout__region .flexible-card--two-across.odd { display: block; margin-right: 3.125%; } .layout--onecol .layout__region .flexible-card.only .card__image { flex: 0 1 48.4375%; } .layout--onecol .layout__region .flexible-card--image-top { display: block; } } @media all and (min-width: 40em) { .layout__region .flexible-card--three-across { flex: 0 1 31.25%; width: 31.25%; } .layout__region .flexible-card--three-across:not(.third) { margin-right: 3.125%; } } @media all and (min-width: 40em) and (min-width: 30em) { .layout--onecol .layout__region .flexible-card.only { flex: 0 1 100%; display: flex; margin-left: 0; margin-right: 0 !important; } .layout--onecol .layout__region .flexible-card.only .card__image { float: left; flex: 0 1 50% !important; padding-right: 1.25rem; } .layout--onecol .layout__region .flexible-card.only .card__image img { display: block; width: 100%; height: 100%; object-fit: cover; } .layout--onecol .layout__region .flexible-card.only .flexible-card__body { flex: 1; } } @media all and (min-width: 40em) { .layout--onecol .layout__region .flexible-card.only.flexible-card--image-right .card__image { padding-right: 0; padding-left: 1.25rem; } .layout--onecol .layout__region .flexible-card.only.flexible-card--image-top .card__image { display: block; flex: 0 1 100% !important; padding-right: 0; padding-left: 0; } .flexible-card--image-top { display: block; } .flexible-card--image-top .card__image { flex: 0 1 100% !important; padding-right: 0; padding-left: 0; } } .layout--twocol-section .layout__region .flexible-card.only { flex: 0 1 100%; } .layout--twocol-section--33-67 .layout__region--first .flexible-card, .layout--twocol-section--25-75 .layout__region--first .flexible-card, .layout--twocol-section--50-50 .layout__region--first .flexible-card { flex: 0 1 100%; } @media all and (min-width: 30em) { .layout--twocol-section--33-67 .flexible-card { display: block; } .layout--twocol-section--33-67 .flexible-card .card__image { width: 100%; padding-left: 0; padding-right: 0; } } @media (max-width: 767px) { .flexible-card--image-left, .flexible-card--image-right, .flexible-card--image-top { display: block; } .flexible-card--image-left .card__image, .flexible-card--image-right .card__image, .flexible-card--image-top .card__image { width: 100%; padding-right: 0; padding-left: 0; } .flexible-card--image-left .card__image img, .flexible-card--image-right .card__image img, .flexible-card--image-top .card__image img { width: 100%; height: 100%; max-height: 250px; object-fit: cover; } } @media (min-width: 768px) { .flexible-card__body { margin-top: 1rem; } } .flexible-card:has(.card__video) .flexible-card__body { margin-top: 0; } .supplementary-link { font-size: 1rem; line-height: 1.5rem; } /** * @file * Webform and off-canvas dialog styles. * * Scoped to #drupal-off-canvas-wrapper to match OJP legacy pattern. * Overrides SDC/USWDS styles that bleed into the off-canvas dialog. */ /* ---------------------------------------- Off-canvas wrapper base ---------------------------------------- */ #drupal-off-canvas-wrapper table { margin-bottom: 0; } #drupal-off-canvas-wrapper tr.draggable td.field-multiple-drag { width: 0.125rem; } #drupal-off-canvas-wrapper tr.draggable input[type=text] { width: 100%; } #drupal-off-canvas-wrapper .description, #drupal-off-canvas-wrapper .details-description { word-break: break-word; } #drupal-off-canvas-wrapper .details-wrapper { margin-top: 0.625rem; } #drupal-off-canvas-wrapper .filter-help { font-size: 0.8125rem; } #drupal-off-canvas-wrapper .filter-wrapper .form-item { margin-top: 0; } #drupal-off-canvas-wrapper .text-format-wrapper .js-form-type-textarea { margin-bottom: 0; } /* ---------------------------------------- Typography resets ---------------------------------------- */ #drupal-off-canvas-wrapper, #drupal-off-canvas-wrapper .ui-widget-content, #drupal-off-canvas-wrapper .ui-dialog-content { font-family: revert; font-size: revert; line-height: revert; } #drupal-off-canvas-wrapper p { line-height: revert; margin-top: revert; margin-bottom: revert; max-width: revert; } #drupal-off-canvas-wrapper p + *, #drupal-off-canvas-wrapper * + p { margin-top: revert; } /* ---------------------------------------- Lists ---------------------------------------- */ #drupal-off-canvas-wrapper ul, #drupal-off-canvas-wrapper ol { padding-left: 1.5rem; list-style-position: outside; } #drupal-off-canvas-wrapper ul li { list-style-type: disc; } #drupal-off-canvas-wrapper ol li { list-style-type: decimal; } /* ---------------------------------------- Tables ---------------------------------------- */ #drupal-off-canvas-wrapper table, #drupal-off-canvas-wrapper thead, #drupal-off-canvas-wrapper tbody, #drupal-off-canvas-wrapper tfoot, #drupal-off-canvas-wrapper tr, #drupal-off-canvas-wrapper th, #drupal-off-canvas-wrapper td, #drupal-off-canvas-wrapper caption { all: revert; } /* ---------------------------------------- Form elements Claro styles are loaded via the off-canvas AJAX response. Only fix USWDS-specific overrides that bleed in. ---------------------------------------- */ /* Restore single native arrow on select — USWDS adds a background-image SVG arrow that conflicts with the browser's native appearance arrow. */ #drupal-off-canvas-wrapper select { -webkit-appearance: auto; appearance: auto; background-image: none; padding-right: revert; } /* ---------------------------------------- Tabs (Tabby library — tabby-ui.min.css handles visual styling) Structure: div.webform-tabs > ul.webform-tabs-item-list > li.webform-tab > a[role=tab] ---------------------------------------- */ /* Prevent tab text from wrapping (hyphenating) */ #drupal-off-canvas-wrapper [role=tab] { white-space: nowrap; } /* Position "Expand all" button above the tab bar */ #drupal-off-canvas-wrapper .webform-tabs { position: relative; padding-top: 2.5rem; } #drupal-off-canvas-wrapper .webform-details-toggle-state-wrapper { position: absolute; top: 0; right: 0; } /* ======================================== AUTO-GENERATED COMPONENTS & PAGES IMPORTS ======================================== This file is automatically generated by the Gulp build process. Do not edit manually - it will be overwritten. Generated on: 2026-07-30T16:21:41.942Z */ .usa-accordion__heading { font-weight: normal; } .usa-accordion__heading button.usa-accordion__button { background-size: 1rem; line-height: 1.25rem; font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 1.0625rem !important; position: relative; } .usa-accordion__heading button.usa-accordion__button[aria-expanded=true] { background-color: #face00; color: black; padding: 1rem 3.5rem 1rem 1.25rem; background-image: url("../images/uswds-alt/minus-gray-cool-60.svg"); } .usa-accordion__heading button.usa-accordion__button[aria-expanded=false] { background-color: #dfe1e2; background-size: 1rem; color: black; padding: 1rem 3.5rem 1rem 1.25rem; background-image: url("../images/uswds-alt/plus-gray-cool-60.svg"); } .usa-accordion__heading button.usa-accordion__button:focus { outline: 0.25rem dashed #4f97d1; outline-offset: 0; } .usa-accordion__heading button.usa-accordion__button[title]:hover::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: #1b1b1b; color: white; padding: 0.5rem 0.75rem; border-radius: 4px; font-size: 0.875rem; line-height: 1.2; white-space: nowrap; z-index: 2147483647 !important; margin-bottom: 5px; opacity: 0; animation: tooltipFadeIn 0.3s ease-in-out forwards; } .usa-accordion__heading button.usa-accordion__button[title]:hover::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1b1b1b; z-index: 1000; margin-bottom: 0; opacity: 0; animation: tooltipFadeIn 0.3s ease-in-out forwards; } .usa-accordion__heading button.usa-accordion__button[data-position=top]:hover::after { bottom: 100%; top: auto; margin-bottom: 5px; margin-top: 0; } .usa-accordion__heading button.usa-accordion__button[data-position=top]:hover::before { bottom: 100%; top: auto; border-top-color: #1b1b1b; border-bottom-color: transparent; margin-bottom: 0; margin-top: 0; } .usa-accordion__heading button.usa-accordion__button[data-position=bottom]:hover::after { top: 100%; bottom: auto; margin-top: 5px; margin-bottom: 0; } .usa-accordion__heading button.usa-accordion__button[data-position=bottom]:hover::before { top: 100%; bottom: auto; border-bottom-color: #1b1b1b; border-top-color: transparent; margin-top: 0; margin-bottom: 0; } .usa-accordion__heading button.usa-accordion__button[data-position=left]:hover::after { right: 100%; left: auto; top: 50%; bottom: auto; transform: translateY(-50%); margin-right: 5px; margin-bottom: 0; } .usa-accordion__heading button.usa-accordion__button[data-position=left]:hover::before { right: 100%; left: auto; top: 50%; bottom: auto; transform: translateY(-50%); border-left-color: #1b1b1b; border-top-color: transparent; margin-right: 0; margin-bottom: 0; } .usa-accordion__heading button.usa-accordion__button[data-position=right]:hover::after { left: 100%; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); margin-left: 5px; margin-bottom: 0; } .usa-accordion__heading button.usa-accordion__button[data-position=right]:hover::before { left: 100%; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); border-right-color: #1b1b1b; border-top-color: transparent; margin-left: 0; margin-bottom: 0; } .usa-accordion__heading span.ui-accordion-header-icon { display: none; } .usa-accordion__content { padding: 1rem 1.25rem 1rem 1.25rem; border: 1px solid #dfe1e2 !important; border-top: 0 none; position: relative; } .usa-accordion__content[title] { transform: translateZ(0); isolation: isolate; overflow: visible !important; clip: unset !important; -webkit-clip-path: none !important; clip-path: none !important; } .usa-accordion__content p { font-size: 1.0625rem; font-weight: normal; max-width: inherit; } .usa-accordion__content a { color: #002d3f; text-decoration: underline; } .usa-accordion__content a:visited { color: #54278f; } .usa-accordion__content a:hover { color: #1f303e; } .usa-accordion__content a:active { color: #11181d; } .usa-accordion__content a:focus { outline: 0.25rem solid #2491ff; outline-offset: 0rem; } .usa-accordion__content ul { list-style-type: disc !important; padding-left: 0.75rem !important; } .usa-accordion__content ul li ul { list-style-type: circle !important; } .usa-accordion__content ul li ul li ul { list-style-type: square !important; } .usa-accordion__content ul li, .usa-accordion__content ol li { max-width: unset; } .usa-accordion__content ul li a, .usa-accordion__content ol li a { display: inline; } .usa-accordion__content[title]:hover::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: #1b1b1b; color: white; padding: 0.5rem 0.75rem; border-radius: 4px; font-size: 0.875rem; line-height: 1.2; white-space: nowrap; z-index: 2147483647 !important; opacity: 0; animation: accordionContentTooltipFadeIn 0.3s ease-in-out forwards; pointer-events: none; margin-bottom: 5px; } .usa-accordion__content[title]:hover::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1b1b1b; z-index: 2147483647 !important; margin-bottom: 0; opacity: 0; animation: accordionContentTooltipFadeIn 0.3s ease-in-out forwards; pointer-events: none; } .usa-accordion__content[data-position=top]:hover::after { bottom: 100%; top: auto; margin-bottom: 5px; margin-top: 0; } .usa-accordion__content[data-position=top]:hover::before { bottom: 100%; top: auto; border-top-color: #1b1b1b; border-bottom-color: transparent; margin-bottom: 0; margin-top: 0; } .usa-accordion__content[data-position=bottom]:hover::after { top: 100%; bottom: auto; margin-top: 5px; margin-bottom: 0; } .usa-accordion__content[data-position=bottom]:hover::before { top: 100%; bottom: auto; border-bottom-color: #1b1b1b; border-top-color: transparent; margin-top: 0; margin-bottom: 0; } .usa-accordion__content[data-position=left]:hover::after { right: 100%; left: auto; top: 50%; bottom: auto; transform: translateY(-50%); margin-right: 5px; margin-bottom: 0; } .usa-accordion__content[data-position=left]:hover::before { right: 100%; left: auto; top: 50%; bottom: auto; transform: translateY(-50%); border-left-color: #1b1b1b; border-top-color: transparent; margin-right: 0; margin-bottom: 0; } .usa-accordion__content[data-position=right]:hover::after { left: 100%; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); margin-left: 5px; margin-bottom: 0; } .usa-accordion__content[data-position=right]:hover::before { left: 100%; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); border-right-color: #1b1b1b; border-top-color: transparent; margin-left: 0; margin-bottom: 0; } @keyframes tooltipFadeIn { from { opacity: 0; transform: translateX(-50%) translateY(-2px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes accordionContentTooltipFadeIn { from { opacity: 0; transform: translateX(-50%) translateY(-2px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .usa-accordion .usa-accordion__button[data-tooltip-text]:hover::after, .usa-accordion .usa-accordion__content[data-tooltip-text]:hover::after, .usa-accordion .usa-accordion__button[title]:hover::after, .usa-accordion .usa-accordion__content[title]:hover::after { content: attr(data-tooltip-text, attr(title)) !important; position: fixed !important; top: 20px !important; left: 50% !important; transform: translateX(-50%) !important; background-color: #1b1b1b !important; color: white !important; padding: 0.5rem 0.75rem !important; border-radius: 4px !important; font-size: 0.875rem !important; line-height: 1.2 !important; white-space: nowrap !important; opacity: 1 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; animation: accordionTooltipShow 0.3s ease-in-out !important; margin: 0 !important; width: auto !important; height: auto !important; max-width: 300px !important; display: block !important; visibility: visible !important; z-index: 2147483647 !important; pointer-events: none !important; font-weight: normal !important; backdrop-filter: none !important; filter: none !important; clip: unset !important; -webkit-clip-path: none !important; clip-path: none !important; overflow: visible !important; } @keyframes accordionTooltipShow { from { opacity: 0; transform: translateX(-50%) translateY(-5px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .usa-alert { font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 0.99rem; padding-bottom: 1rem; padding-top: 1rem; margin-bottom: 1rem; } .usa-alert .usa-alert__body { padding-left: 3.8rem !important; padding-bottom: 0 !important; padding-top: 0 !important; font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 0.99rem !important; } .usa-alert .usa-alert__body::before { content: ""; display: block; height: 3.5rem; left: 0.9166666667rem; position: absolute; top: -15px !important; } .usa-alert .usa-alert__body h4 { margin-top: 0 !important; margin-bottom: 0.5rem !important; margin-left: 0 !important; font-size: 1.0625rem; line-height: 1.375rem; } .usa-alert .usa-alert__body .usa-alert__text { margin-left: 0 !important; } .usa-alert #this-website-does-not-issue-alerts-for-missing-adults-if-this-is { margin: 0 0 0.625rem; } .usa-alert--deadline { margin-bottom: 0; margin-top: 1em; } .usa-alert .cta__headline::after { opacity: 1; font: 1em/1 anchorjs-icons; padding-left: 0.375em; } blockquote { position: relative; margin-left: 0; font-size: 1.5rem; font-style: italic; font-stretch: normal; font-weight: normal; padding: 0 2.125rem 0 2.125rem; line-height: 1.29; } blockquote::before { background-color: #2378c3; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 0.3125rem; } .ojp-breadcrumb { font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 0.8125rem; } .ojp-breadcrumb__list { line-height: 1.0625rem; list-style: none; margin: 0; padding: 1.25rem 0; } @media all and (min-width: 64em) { .ojp-breadcrumb__list { padding: 0.5rem 0; } } .ojp-breadcrumb__item { display: inline-block; font-weight: bold; margin-right: 0; min-height: 24px; min-width: 24px; } .ojp-breadcrumb__item:not(:last-child)::after { color: #1b1b1b; content: "/"; margin-left: 0.5rem; margin-right: 0.5rem; } .ojp-breadcrumb__link { color: var(--ojp-breadcrumb-link-color, #005ea2); font-weight: bold; padding: 0.375rem 0; text-decoration: underline; } .ojp-breadcrumb__link:visited { color: #54278f; } .ojp-breadcrumb__link:hover { text-decoration: underline; } .ojp-breadcrumb__current { color: #1b1b1b; font-weight: bold; } /** * @file * Styles for the Card component - matching OJP theme exactly. */ .card { border: thin solid #a9aeb1; background: #fcfcfc; margin-bottom: 2.5rem !important; } .card__headline a { text-decoration: none; } .card__body { padding: 1.3125rem; } .card__description { padding-bottom: 1.25rem; } .card__image .ojp-image { display: block; position: relative; width: 100%; } .card__image .ojp-image img { display: block; height: auto; } .card__image .ojp-image figcaption.ojp-image__caption { border-bottom: 0; border-left: 0; border-right: 0; position: absolute; bottom: 0; left: 0; background-color: #fcfcfc; opacity: 0.9; } .card__image .ojp-image figcaption.ojp-image__caption .video-legal { font-size: 0.8125rem; line-height: 1.0625rem; font-style: italic; } .card__image .ojp-image figcaption.ojp-image__caption .video-legal a { text-decoration: underline; } .card__image .ojp-image figcaption.ojp-image__caption .video-legal:first-child { padding-top: 0; } .card__image .ojp-image figcaption.ojp-video__caption { border: 0; margin: 0 1.25rem; position: relative; width: auto; } .card__image .ojp-image.card__video figure { display: block; } .card__image .ojp-image.card__video figcaption.ojp-image__caption { position: relative; border-bottom: 1px solid #dcdee0; width: auto; } @media all and (min-width: 30em) { .card.first { margin-left: 0; } .card.last { margin-right: 0; } } .supplementary-link { font-size: 0.9375rem; line-height: 1.375rem; } .layout--twocol-section .layout__region .card.only { flex: 0 1 100%; } .layout--twocol-section--33-67 .layout__region--first .card, .layout--twocol-section--25-75 .layout__region--first .card, .layout--twocol-section--50-50 .layout__region--first .card { flex: 0 1 100%; } @media all and (min-width: 30em) { .layout--onecol .layout__region .card--two-across { flex: 0 1 48.4375%; } .layout--onecol .layout__region .card--two-across.odd { margin-right: 3.125%; } .layout--onecol .layout__region .card--two-across .card__image { flex: 0 1 48.4375%; } .layout--onecol .layout__region .card.only .card__image { flex: 0 1 48.4375%; } .layout__region .card--two-across { flex: 0 1 48%; } .layout__region .card--two-across.odd { margin-right: auto; } } @media all and (min-width: 40em) { .layout__region .card--three-across { flex: 0 1 31.25%; width: 31.25%; } .layout__region .card--three-across:not(.third) { margin-right: 3.125%; } } @media all and (min-width: 40em) and (min-width: 30em) { .layout--onecol .layout__region .card.only { flex: 0 1 100%; display: flex; margin-left: 0; margin-right: 0 !important; } .layout--onecol .layout__region .card.only .card__image { float: left; flex: 0 1 48%; } .layout--onecol .layout__region .card.only .card__image img { display: block; } .layout--onecol .layout__region .card.only .card__body { flex: 1; } } @media all and (min-width: 40em) { .layout--onecol .layout__region .card.only .card__image { flex: 0 1 50% !important; padding-right: 1.5625rem; } .layout--onecol .layout__region .card.only .card__image .ojp-image { width: calc(100% + 1.5625rem); } } @media all and (min-width: 30em) { .layout__region { display: flex; flex-wrap: wrap; align-items: stretch; } .layout__region > div { flex: 0 0 100%; max-width: 100%; } } .cta { padding: 1.25rem; background-color: #fcfcfc; border-top: 3px solid var(--cta-top-bottom-border); border-bottom: 3px solid var(--cta-top-bottom-border); border-left: 1px solid var(--cta-side-border); border-right: 1px solid var(--cta-side-border); margin-bottom: 2rem; } .cta .cta__headline { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; margin: 0 0 0.75rem 0; } .cta .cta__subheadline { margin-top: 1.25rem; } .cta .cta__callout { border-bottom: 1px solid var(--cta-callout-divider); margin-bottom: 1.25rem; padding-bottom: 1.25rem; } .cta .cta__callout:last-child { border: none; margin-bottom: 0; padding-bottom: 0; } .cta .cta__callout .cta__item a { font-weight: 600; } .cta .cta__callout .series-links { display: inline; } .cta .cta__callout .series-links span { display: inline; } .cta .cta__callout .series-links a { display: inline; font-weight: 500; text-decoration: none; } .cta .cta__callout .series-links a:hover { text-decoration: underline; } .cta__read-more { text-align: right; margin-bottom: 2rem; } .cta--with-read-more { margin-bottom: 1.25rem; } .cta__items-list { list-style: none; padding-left: 0; margin: 0; } .cta__item { margin-bottom: 1.25rem; } .cta__item a { display: block; text-decoration: none; } .cta__item a .extlink-nobreak { white-space: normal; } .cta__item:last-child { margin-bottom: 0; } .block-publication-downloads .cta__item a { position: relative; padding-left: 24px; } .block-publication-downloads .cta__item a::before { background: var(--cta-download-background) 0 0 transparent no-repeat; width: 100%; height: 16px; content: ""; display: inline-block; position: absolute; top: 5px; left: 0; } .layout--node-landing_page .ojp--recent-content.cta--with-read-more, .ojp--recent-content.cta--with-read-more { margin-bottom: 1.25rem; } .layout--twocol-section .layout__region--second .field.cta { margin-bottom: 0; } .embedded-entity { width: 100%; } .media--view-mode-embedded { margin-bottom: 2.5rem; } @media all and (min-width: 30em) { .embedded-entity.align-right { width: 240px; margin: 1em 0 1em 1em; } .embedded-entity.align-left { width: 240px; margin: 1em 1em 1em 0em; } } .ojp-video__caption { text-align: left; padding: 0.625rem; width: 100%; background-color: #fcfcfc; border-top: none; border-right: 0.0625rem solid #a9aeb1; border-bottom: 0.0625rem solid #a9aeb1; border-left: 0.0625rem solid #a9aeb1; font-size: 0.8125rem; line-height: 1.0625rem; } .ojp-video__caption a { text-decoration: none; } .video-embed-field-responsive-video { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } .video-embed-field-responsive-video iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: 0; } drupal-entity[data-entity-bundle=video] { display: block; } .ojp-filter-section { padding: 1.875rem 0; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(45, 46, 47); } .ojp-filter-section:first-of-type, .ojp-filter-section:first-child { padding-top: 0; } .ojp-filter-section:last-child { border-bottom: 0 none; padding-bottom: 0; } .ojp-filter-section .ojp-filter-section__heading { color: black; } .ojp-filter-section .ojp-filter-section__filters { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; } .ojp-filter-section .ojp-filter-section__filters label { color: #1b1c1a; font-weight: bold; } .ojp-filter-section .ojp-filter-section__filters .description { font-style: italic; } .ojp-filter-section .ojp-filter-section__filters > * { flex: 1 1 100%; } @media all and (min-width: 40em) { .ojp-filter-section .ojp-filter-section__filters > * { flex: 0 0 calc(50% - 15px); } } @media all and (min-width: 40em) and (-ms-high-contrast: none), (min-width: 40em) and (-ms-high-contrast: active) { .ojp-filter-section .ojp-filter-section__filters > * { flex: 0 0 50%; } .ojp-filter-section .ojp-filter-section__filters > *:not(.form-actions) { max-width: calc(50% - 15px); } } .ojp-filter-section .ojp-filter-section__filters .date-range-wrapper { display: flex; gap: 15px; align-items: flex-end; } .ojp-filter-section .ojp-filter-section__filters .date-range-wrapper > * { flex: 1 1 auto; } .ojp-filter-section .ojp-filter-section__filters .form-actions { display: flex; flex-wrap: wrap; justify-content: space-between; flex: 1 1 100%; } .ojp-filter-section .ojp-filter-section__filters .form-actions button { margin: 0 0 30px 0; } .ojp-filter-section .ojp-filter-section__filters .form-actions button:last-child { margin: 0; } @media all and (min-width: 40em) { .ojp-filter-section .ojp-filter-section__filters .form-actions button { flex: 0 0 calc(50% - 15px); margin: 0; } } @media all and (min-width: 40em) and (-ms-high-contrast: none), (min-width: 40em) and (-ms-high-contrast: active) { .ojp-filter-section .ojp-filter-section__filters .form-actions button { flex: 0 0 50%; max-width: calc(50% - 15px); } } .usa-footer, .usa-footer__logo-heading, .usa-footer__contact-heading { font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important; } .usa-footer a { text-decoration: none; } .usa-footer a:hover { text-decoration: none; } .usa-footer .usa-footer-return-to-top { text-align: right; } .usa-footer .usa-footer-return-to-top #return-to-top { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.75rem; margin-right: 1.75rem; height: 4.6875rem; border: none; color: black; background-color: #edeff0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 1.5625rem; border-top-right-radius: 1.5625rem; padding: 0.3125rem 0.3125rem 0.5rem 0.3125rem; z-index: 1000; position: fixed; bottom: 0; right: 0; } @media (max-width: 479px) { .usa-footer .usa-footer-return-to-top #return-to-top { margin: 0; right: 0.75rem; } } .usa-footer .usa-footer-return-to-top #return-to-top:hover { background-color: #edeff0; } .usa-footer .usa-footer-return-to-top #return-to-top::before { content: ""; background-color: #face00; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='39' viewBox='0 0 64 39'%3E%3Cpath fill='%23000' d='M.655 34.187c-.427-.437-.64-.937-.64-1.503 0-.566.213-1.067.64-1.502L30.542.756c.427-.436.918-.653 1.474-.653.555 0 1.048.218 1.474.653l29.884 30.426c.428.435.642.936.642 1.502s-.213 1.066-.642 1.501l-3.206 3.265c-.427.436-.919.653-1.475.653-.555 0-1.047-.217-1.475-.653L32.016 11.79 6.81 37.45c-.427.436-.919.653-1.474.653-.556 0-1.048-.217-1.475-.653L.655 34.187z'/%3E%3C/svg%3E"); background-position: center center; background-repeat: no-repeat; background-size: 1.5rem 0.875rem; display: inline-block; height: 1.375rem; width: 1.375em; padding: 1.25rem; border-radius: 100%; } .usa-footer .usa-footer-return-to-top #return-to-top.show { visibility: visible; opacity: 1; transition: opacity 0.25s ease-in-out; filter: drop-shadow(0px 0px 10px #8d9297); } .usa-footer .usa-footer-return-to-top #return-to-top.hide { visibility: hidden; opacity: 0; transition: visibility 0s 0.25s, opacity 0.25s ease-in-out; } .usa-footer .usa-footer-return-to-top #return-to-top:after { content: none; height: 1.25rem; width: 1.75rem; background-position: calc(100% - 1px) bottom; background-repeat: no-repeat; background-size: 1.25rem 1rem; display: inline-block; } @media print { .usa-footer .usa-footer-return-to-top { display: none; } } .usa-footer .usa-footer__primary-section { background: #fcfcfc; border-top: 1px solid #f0f0f0; padding-top: 1.875rem; } @media print { .usa-footer .usa-footer__primary-section { display: none; } } @media (min-width: 640px) { .usa-footer .usa-footer__agency-heading { max-width: 66%; } } .usa-footer .usa-footer__primary-link:hover { text-decoration: none; } .usa-footer .usa-footer__secondary-section { background-color: #edeff0; padding-bottom: 2.8125rem; padding-top: 1.875rem; } @media print { .usa-footer .usa-footer__secondary-section { padding: 0; } } .usa-footer .usa-footer__secondary-section__secondary-link { color: #005999; } .usa-footer .usa-footer__secondary-section__secondary-link:hover { color: #252f3e; } .usa-footer .usa-footer__secondary-link { margin-left: 0; line-height: 1.5; } @media print { .usa-footer .menu--secondary-footer-link-menu { display: none; } } @media (min-width: 640px) { .usa-footer .menu--secondary-footer-link-menu ul.menu { margin: 0 auto; padding: 0 1rem; text-align: center; } } .usa-footer .menu--secondary-footer-link-menu li { list-style-type: none; line-height: 3rem; } @media (min-width: 640px) { .usa-footer .menu--secondary-footer-link-menu li { border-left: solid 1px black; display: inline; padding-left: 0.625rem; padding-right: 0.625rem; } .usa-footer .menu--secondary-footer-link-menu li:first-child { border-left: none; padding-left: 0; } } .usa-footer .menu--secondary-footer-link-menu a { font-size: 15px; display: inline-block; } .usa-footer .usa-footer-contact-heading { font-size: 15px; margin: 0 auto; padding-bottom: 0.375rem; text-align: center; } @media print { .usa-footer .usa-footer-contact-heading { display: none; } } .usa-footer .usa-footer__logos-container { padding-bottom: 1.5rem; } .usa-footer .usa-footer-logo { text-align: center; } .usa-footer .usa-footer-logo img { max-width: 450px; width: 100%; } @media print { .usa-footer .usa-footer-logo img { max-width: 350px; } } @media (min-width: 1024px) { .usa-footer .usa-footer-logo { text-align: left; } } @media print { .usa-footer .usa-footer-logo { border-right: none; width: 100%; text-align: center; } } .usa-footer__secondary-logos .grid-row:before { content: " "; flex-basis: 100%; height: 0; } .usa-footer__secondary-logos a { line-height: normal; } @media (min-width: 1024px) { .usa-footer__secondary-logos .row-count-7:before { order: 5; } .usa-footer__secondary-logos .row-count-8:before { order: 5; } .usa-footer__secondary-logos .row-count-9:before { order: 6; } .usa-footer__secondary-logos .row-count-10:before { order: 6; } .usa-footer__secondary-logos .row-count-11:before { order: 7; } .usa-footer__secondary-logos .row-count-12:before { order: 7; } } @media (min-width: 1024px) { .usa-footer__secondary-logos.has-footer-logo .row-count-7:before { order: 0; } .usa-footer__secondary-logos.has-footer-logo .row-count-8:before { order: 0; } .usa-footer__secondary-logos.has-footer-logo .row-count-9:before { order: 0; } .usa-footer__secondary-logos.has-footer-logo .row-count-10:before { order: 0; } .usa-footer__secondary-logos.has-footer-logo .row-count-11:before { order: 0; } .usa-footer__secondary-logos.has-footer-logo .row-count-12:before { order: 0; } .usa-footer__secondary-logos.has-footer-logo .row-count-4:before { order: 3; } } .usa-footer__secondary-logos :nth-child(1) { order: 1; } .usa-footer__secondary-logos :nth-child(2) { order: 2; } .usa-footer__secondary-logos :nth-child(3) { order: 3; } .usa-footer__secondary-logos :nth-child(4) { order: 4; } .usa-footer__secondary-logos :nth-child(5) { order: 5; } .usa-footer__secondary-logos :nth-child(6) { order: 6; } .usa-footer__secondary-logos :nth-child(7) { order: 7; } .usa-footer__secondary-logos :nth-child(8) { order: 8; } .usa-footer__secondary-logos :nth-child(9) { order: 9; } .usa-footer__secondary-logos :nth-child(10) { order: 10; } .usa-footer__secondary-logos :nth-child(11) { order: 11; } .usa-footer__secondary-logos :nth-child(12) { order: 12; } .usa-footer__secondary-logos :nth-child(13) { order: 13; } .usa-footer__secondary-logos :nth-child(14) { order: 14; } .usa-footer__secondary-logos :nth-child(15) { order: 15; } .usa-footer__secondary-logos :nth-child(16) { order: 16; } .usa-footer__secondary-logos :nth-child(17) { order: 17; } .usa-footer__secondary-logos :nth-child(18) { order: 18; } .usa-footer__secondary-logos :nth-child(19) { order: 19; } .usa-footer__secondary-logos :nth-child(20) { order: 20; } .usa-footer .usa-footer__partner-logos { max-width: 450px; margin: 0 auto; padding-bottom: 1.9375rem; padding-top: 1.9375rem; } @media all and (min-width: 55em) { .usa-footer .usa-footer__partner-logos { padding-left: 5.3125rem; padding-top: 0; } .usa-footer .usa-footer__partner-logos.without-usa-footer-logo { padding-left: 0; } } @media print { .usa-footer .usa-footer__partner-logos { display: none; } } .usa-footer .usa-footer__partner-logo { text-align: center; } .usa-footer .usa-footer__partner-logo img { position: relative; top: 50%; transform: translateY(-50%); max-height: 100%; } .usa-footer .usa-footer__primary-content--collapsible .usa-footer__primary-link { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M0 5h12v2H0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 15px) center; background-size: 0.75rem; line-height: 1.27624; margin: 0; } .usa-footer .usa-footer__primary-content--collapsible .usa-footer__primary-link::before { content: none; } @media (min-width: 480px) { .usa-footer .usa-footer__primary-content--collapsible .usa-footer__primary-link { background: none; margin-bottom: 0.5rem; } } .usa-footer .usa-footer__primary-content--collapsible.hidden .usa-footer__primary-link { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M0 5h12v2H0zM5 0h2v12H5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; cursor: pointer; } .usa-footer .usa-footer__primary-content--collapsible.hidden .usa-footer__primary-link::before { content: none; } .usa-footer .footer__wrapper { position: relative; } .usa-footer .footer__social { padding-bottom: 3.875rem; padding-top: 3.875rem; display: flex; } .usa-footer .footer__social > a { display: flex; } @media (min-width: 640px) { .usa-footer .footer__social { padding-top: 0; position: absolute; right: 15px; top: 0; } } @media (min-width: 1024px) { .usa-footer .footer__social { padding-top: 0; right: 30px; top: 0; } } .usa-footer .footer__social span.f { content: ""; background-image: url("/themes/custom/ojp_uswds_sdc/assets/images/ojp/fb.svg"); background-size: 26px 26px; background-position: bottom; background-repeat: no-repeat; display: inline-block; height: 30px; width: 30px; } @media (min-width: 640px) { .usa-footer .footer__social span.f { background-size: 16px 16px; height: 16px; width: 16px; } } .usa-footer .footer__social span.t { content: ""; background-image: url("/themes/custom/ojp_uswds_sdc/assets/images/ojp/x.svg"); background-size: 30px 30px; background-position: bottom; background-repeat: no-repeat; display: inline-block; height: 30px; width: 40px; } @media (min-width: 640px) { .usa-footer .footer__social span.t { background-size: 16px 16px; height: 16px; width: 16px; } } .usa-footer .footer__social span.yt { content: ""; background-image: url("../../assets/images/uswds-alt/youtube.svg"); background-size: 30px 30px; background-position: bottom; background-repeat: no-repeat; display: inline-block; height: 30px; width: 30px; } @media (min-width: 640px) { .usa-footer .footer__social span.yt { background-size: 24px 24px; height: 20px; width: 24px; } } body.js-off-canvas-dialog-open .usa-footer-return-to-top #return-to-top { display: none; } .usa-footer--big .usa-footer__primary-content--collapsible .usa-unstyled-list { padding-left: 0; } .usa-footer__primary-content { border-top: 1px solid #11181d; } @media (min-width: 640px) { .usa-footer__primary-content { border-top: transparent; } } .usa-footer-nav { margin-left: -15px; margin-right: -15px; width: 100vw; position: relative; } @media print { .usa-footer-nav .region-footer-menu { display: none; } } @media (min-width: 480px) { .usa-footer-nav { margin-left: 0; margin-right: 0; width: auto; } } .usa-banner { background-color: #fcfcfc; } .usa-banner .usa-banner__header { padding-bottom: 0; padding-top: 0; min-height: 0; } .usa-banner__inner { min-height: 1.75rem; } .usa-banner__inner .usa-banner__button, .usa-banner__inner .usa-banner .usa-banner__header-action { color: #1a4480; } @media all and (min-width: 40em) { .usa-banner__inner { align-items: center; } } @media all and (min-width: 64em) { .usa-banner__inner { padding-left: 2rem; padding-right: 2rem; } } @media all and (min-width: 40em) { .usa-banner__header--expanded .usa-banner__inner { margin-left: auto; } } @media (min-width: 64em) { .usa-header.usa-header--extended .usa-navbar { padding-left: 2rem; padding-right: 2rem; } } .usa-banner__content.usa-accordion__content { padding-left: 2rem; padding-right: 2rem; padding-bottom: 1.5rem; padding-top: 1.5rem; } /* Hero Component Base Styles - Color classes will be generated by each theme */ .hero { position: relative; } .hero:not(.hero--inset) .hero-container { max-width: 64rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media all and (min-width: 55em) { .hero:not(.hero--inset) .hero-container { padding-left: 2rem; padding-right: 2rem; } } .hero--no_styling { margin-top: 1.6875rem; } .hero.hero--no_styling { color: black; } .hero--no_styling .hero__no_styling-container .hero__text-container { background: transparent; } .hero--no_image { padding: 1.25rem 0; } @media all and (min-width: 55em) { .hero--no_image { padding: 4.375rem 0; } } @media print { .hero--no_image { padding: 1rem 0; } } .hero--no_image_short { padding: 1.25rem 0; } @media all and (min-width: 55em) { .hero--no_image_short { padding: 1.375rem 0; } } @media print { .hero--no_image_short { padding: 1rem 0; } } .hero--background { padding: 1.25rem 0; } @media all and (min-width: 55em) { .hero--background { padding: 4.375rem 0; } } @media print { .hero--background { padding: 0; } } .hero--background_short { padding: 1.25rem 0; } @media all and (min-width: 55em) { .hero--background_short { padding: 1.375rem 0; } } @media print { .hero--background_short { padding: 0; } } .hero .usa-button--big { margin-top: 1.25rem; } @media all and (max-width: 54.99em) { .hero.hero--inset { padding-bottom: 1rem; } } @media all and (min-width: 55em) { .hero.hero--inset::before { content: ""; height: 25.625rem; overflow: visible; top: 0; left: 0; position: absolute; width: 100%; } } @media print { .hero.hero--inset::before { height: auto; } } @media all and (min-width: 55em) { .hero.hero--inset .hero-container { max-width: 64rem; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; padding-top: 2.0625rem; } } /* Typography using exact rhythm calculations */ .hero__title { font-size: 1.875rem; line-height: 2.4375rem; margin: 0 0 0.625rem; font-weight: normal; } .hero--background .hero__title { font-size: 2.5rem; line-height: 3.25rem; } .hero--background_short.hero--primary .hero__title { margin: 0 0 0.625rem !important; } .hero--no_styling .hero__title { font-size: 2.5rem; line-height: 3.25rem; margin-bottom: 0.625rem; margin-top: 0; font-weight: 700; } @media all and (min-width: 55em) { .hero__title { font-size: 3.25rem; line-height: 4.25rem; } .hero--background .hero__title { font-size: 3.25rem; line-height: 4.25rem; margin: 0 0 0.625rem; } } .hero--no_styling.hero--no-nav .hero__title { margin-top: 1.25rem; } .hero__subtitle { font-size: 1.1875rem; line-height: 1.5625rem; margin-bottom: 0.9375rem; margin-top: 0; } .hero--no_styling .hero__subtitle { font-size: 1.375rem; line-height: 2.0625rem; margin-bottom: 1.25rem; } @media all and (min-width: 55em) { .hero__subtitle { font-size: 1.375rem; line-height: 2.0625rem; margin-bottom: 0; } } .hero__image-credit { font-size: 0.8125rem; line-height: 1.0625rem; display: block; font-style: italic; padding-top: 0.3125rem; } /* Background image styling */ .hero--background .hero-container, .hero--background_short .hero-container { position: relative; z-index: 3; } .hero__background-image { min-width: 100%; min-height: 100%; overflow: hidden; position: absolute; top: 0; z-index: 1; } .hero__background-image__overlay { height: 100%; position: absolute; top: 0; width: 100%; z-index: 2; } /* Inset image styling */ .hero--inset .hero__image-credit { display: none; max-width: 18.75rem; } @media all and (min-width: 55em) { .hero--inset .hero__image-credit { display: block; } } @media all and (min-width: 55em) { .hero__inset-container { margin: 0 -2.625rem; min-height: 25rem; padding: 2.5rem 2.625rem 0 2.5rem; position: relative; } } @media print { .hero__inset-container { min-height: auto; } } @media all and (min-width: 75em) { .hero__inset-container { min-height: 28.125rem; } } .hero__inset-container .hero__text-container { margin: 1rem 1rem 0 1rem; padding: 1.25rem 0.8125rem; } @media all and (min-width: 55em) { .hero__inset-container .hero__text-container { background: none; margin: auto; padding: 0 0 2.5rem 0; float: left; width: 60%; } } @media all and (min-width: 75em) { .hero__inset-container .hero__text-container { width: auto; max-width: 40.9375rem; } } @media print { .hero__inset-container .hero__text-container { width: 100%; } } .hero__inset-image { height: calc(100% + 1rem); width: 100%; position: absolute; top: -1rem; z-index: -1; } .hero__inset-image img { display: none; } @media print { .hero__inset-image { display: none; } } @media all and (min-width: 55em) { .hero__inset-image { background: none !important; float: right; position: relative; width: 35%; z-index: auto; } .hero__inset-image img { display: block; } } @media all and (min-width: 75em) { .hero__inset-image { top: 2.5rem; height: 21.125rem; position: absolute; right: -2.5rem; width: 21.125rem; } } /* Page spacing */ .page-with-hero div.uswds-middle-section { padding-top: 1.25rem; } @media all and (min-width: 55em) { .page-with-hero div.uswds-middle-section { padding-top: 2.5rem; } } /* Hero logo */ .hero-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 1em 0 2em; padding-right: 1em; } .hero-logo img.hero-logo-image { flex: 0 0 auto; } @media all and (min-width: 64em) { .hero-logo img.hero-logo-image { width: 100%; } } .hero__text-container.hero-logo-text { display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; } .icon-callout { margin-bottom: 2.5rem; } @media all and (min-width: 55em) { .icon-callout__text-wrapper { float: right; width: calc(100% - 125px); } } .icon-callout__icon { background-repeat: no-repeat; background-position: left bottom; display: block; height: 68px; text-align: center; text-indent: -9999px; margin-bottom: 0.5rem; } @media all and (min-width: 55em) { .icon-callout__icon { background-position: left top; float: left; height: 100px; width: 100px; } } .icon-callout__icon--funding-opportunities { background-image: url("../../color-theme-scss/assets-legacy/uswds-alt/funding-opportunities-icon-primary.svg"); background-size: 64px 60px; } @media all and (min-width: 55em) { .icon-callout__icon--funding-opportunities { background-size: 79px 84px; } } .icon-callout__icon--browse-topics { background-image: url("../../color-theme-scss/assets-legacy/uswds-alt/browse-icon-primary.svg"); background-size: 70px 68px; } @media all and (min-width: 55em) { .icon-callout__icon--browse-topics { background-size: 100px 100px; } } .icon-callout__icon--publications { background-image: url("../../color-theme-scss/assets-legacy/uswds-alt/news-icon-primary.svg"); background-size: 70px 56px; } @media all and (min-width: 55em) { .icon-callout__icon--publications { background-size: 92px 72px; } } .icon-callout__icon--events { background-image: url("../../color-theme-scss/assets-legacy/uswds-alt/register-icon-primary.svg"); background-size: 67px 66px; } @media all and (min-width: 55em) { .icon-callout__icon--events { background-size: 87px 83px; } } .icon-callout__icon--uswds { text-indent: 0; background-image: none; display: flex; align-items: center; justify-content: center; } .icon-callout__icon--uswds .usa-icon { width: 68px; height: 68px; fill: #002d3f; } @media all and (min-width: 55em) { .icon-callout__icon--uswds .usa-icon { width: 100px; height: 100px; } } .icon-callout__icon--uswds .usa-sr-only { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .icon-callout__title a { text-decoration: none; } .icon-callout__title a:hover { text-decoration: underline; } /** * @file * Media Slideshow styles. */ /* Slideshow view mode — styles for each rendered media entity */ .media--view-mode-slideshow { width: 100%; height: 100%; margin: 0 auto; } .media--view-mode-slideshow figure { position: relative; margin: 0; width: 100%; } .media--view-mode-slideshow figure .ojp-image__caption { position: absolute; bottom: 0; border-bottom: 0; border-left: 0; border-right: 0; left: 0; background-color: var(--card-background, #f0f0f0); opacity: 0.9; } .media--view-mode-slideshow img { width: 100%; height: auto; display: block; } .media--view-mode-slideshow .ojp-slideshow-caption { height: 100%; background-color: #edeff0; /* gray-cool-5 */ } .media--view-mode-slideshow .ojp-slideshow-caption .field--name-field-description { height: 100%; vertical-align: top; padding: 1.5rem; /* 24px */ background-color: #edeff0; /* gray-cool-5 */ font-size: 0.9375rem; /* 15px */ line-height: 1.0625rem; /* 17px */ } .media--view-mode-slideshow .ojp-slideshow-image .ojp-image { display: block; width: 100%; } .media--view-mode-slideshow .ojp-slideshow-image .ojp-image img { margin: 0 auto; } /* Block wrapper — padding reserves space for outside arrows */ .block-inline-blockmedia-slideshow { position: relative; width: 100%; box-sizing: border-box; } @media (min-width: 64em) { .block-inline-blockmedia-slideshow { padding-left: 2.75rem; /* 44px — matches arrow offset */ padding-right: 2.75rem; } .block-inline-blockmedia-slideshow h2 { margin-left: -2.75rem; margin-right: -2.75rem; } } .block-inline-blockmedia-slideshow:has(.ojp-slideshow__dots) { margin-bottom: 1rem; } /* Layout region */ .layout__region { max-width: 100%; } /* Main slideshow container */ .ojp-slideshow { position: relative; width: 100%; } .ojp-slideshow:focus { outline: 0.1875rem solid #ffbe2e; /* gold-20v */ outline-offset: 0.125rem; } /* Viewport clips the track overflow */ .ojp-slideshow__viewport { overflow: hidden; width: 100%; } /* Track holds all slides side-by-side */ .ojp-slideshow__track { display: flex !important; will-change: transform; width: 100%; } /* Individual slides */ .ojp-slideshow__track > *, .ojp-slideshow__slide { flex: 0 0 100%; min-width: 100%; height: inherit !important; box-sizing: border-box; } .ojp-slideshow__slide--active:focus img { outline: 0.25rem dashed #ffbe2e; /* gold-20v */ outline-offset: -0.25rem; } /* Navigation arrows — overlapping inside the viewport edges */ .ojp-slideshow__arrow { position: absolute; top: 50%; transform: translateY(-50%); height: 2.625rem; /* 42px */ width: 2.625rem; border-radius: 50%; background-color: transparent; border: none; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; color: var(--primary-color, #005ea2); pointer-events: auto; } .ojp-slideshow__arrow:hover { color: var(--primary-color-dark, #1a4480); } .ojp-slideshow__arrow:focus { outline: 0.1875rem solid #ffbe2e; /* gold-20v */ outline-offset: 0.125rem; } .ojp-slideshow__arrow svg { width: 2.25rem; /* 36px icon */ height: 2.25rem; } .ojp-slideshow__arrow--prev { left: -1rem; } @media (min-width: 64em) { .ojp-slideshow__arrow--prev { left: -2.75rem; } } @media (max-width: 768px) { .ojp-slideshow__arrow--prev { left: -0.375rem; } } .ojp-slideshow__arrow--next { right: -1rem; } @media (min-width: 64em) { .ojp-slideshow__arrow--next { right: -2.75rem; } } @media (max-width: 768px) { .ojp-slideshow__arrow--next { right: -0.375rem; } } /* Dot navigation */ .ojp-slideshow__dots { display: flex; justify-content: center; align-items: center; padding: 1rem 1.5rem 1.3125rem; /* 16px 24px 21px */ background-color: #edeff0; /* gray-cool-5 */ width: 100%; box-sizing: border-box; } .ojp-slideshow__dot { width: 1rem; /* 16px */ height: 1rem; border-radius: 50%; background: currentColor; border: none; padding: 0; margin: 0 0.375rem; cursor: pointer; opacity: 0.3; color: var(--primary-color, #005ea2); transition: opacity 0.2s, transform 0.2s; } .ojp-slideshow__dot:hover, .ojp-slideshow__dot:focus { opacity: 0.7; } .ojp-slideshow__dot:focus { outline: 0.1875rem solid #ffbe2e; /* gold-20v */ outline-offset: 0.125rem; } .ojp-slideshow__dot--active { opacity: 1; transform: scale(1.25); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .ojp-slideshow__track { transition: none !important; } .ojp-slideshow__dot { transition: none !important; } } /* Screen reader only */ .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; } .modification-notes-wysiwyg-content, .modification-notes .modification-notes__note_date, .modification-notes .modification-notes__note_text { font-style: italic; } .modification-notes { padding-top: 1.25rem; } .modification-notes .modification-notes__divider { background-color: #face00; width: 134px; height: 5px; margin-bottom: 0.625rem; } .modification-notes .modification-notes__note { padding-bottom: 1.25rem; } .modification-notes .modification-notes__note_created { font-size: 0.8125rem; } .modification-notes .modification-notes__note_date { font-size: 0.8125rem; } .modification-notes .modification-notes__note_date { font-weight: bold; } /* USWDS doesn't have support when menu item isn't a link */ .usa-col .usa-nav__submenu-item strong { display: block; padding: 0.5rem; color: #fff; } @media screen and (max-width: 640px) { .usa-col .usa-nav__submenu-item strong { color: #000; } } /* For some reason USWDS removes padding-left on first column only */ @media screen and (min-width: 640px) { .usa-megamenu .usa-col .usa-nav__submenu-item a, .usa-megamenu .usa-col .usa-nav__submenu-item strong { padding-left: 0 !important; } } .usa-header--basic .usa-nav__primary > .usa-nav__primary-item > a, .usa-header--basic .usa-nav__primary > .usa-nav__primary-item > button { padding-bottom: 0.5rem; } .basic-megamenu .usa-nav__primary button[aria-expanded] span::after { top: 60%; } /* Active nav item border */ span.usa-current-border, .usa-nav__submenu-item .usa-current-border, .usa-nav__primary .usa-nav__link.usa-current > span, .usa-nav__primary .usa-nav__link.is-active > span, .usa-nav__primary .usa-accordion__button.usa-current > span { border-left: 0.3125rem solid var(--ojp-header__active-nav); padding-left: 0.375rem; } /* Active nav item bottom indicator */ .usa-nav__primary .usa-nav__link.is-active::after { background-color: var(--ojp-header__active-nav) !important; } /* Mobile menu button — match legacy OJP theme */ .usa-navbar .usa-menu-btn { order: 90; margin-left: auto; text-transform: none; font-weight: bold !important; width: auto; } @media print { .usa-navbar .usa-menu-btn { display: none; } } /* Hide language switcher item for the current active language */ html:lang(en) .usa-nav__primary li.menu-lang-switcher-en, html:lang(es) .usa-nav__primary li.menu-lang-switcher-es { display: none; } /* Preview CSS */ .ui_patterns_component__stories .ui_patterns_story__story { position: relative; min-height: 100px; } .ui_patterns_component__stories .ui_patterns_story__story nav { position: absolute; } .usa-pagination .usa-pagination__button, .usa-pagination .usa-pagination__link { text-decoration: none; } .usa-pagination .usa-pagination__button:hover, .usa-pagination .usa-pagination__link:hover { text-decoration: none; } .usa-pagination .usa-current { background-color: #1b1b1b; border-color: transparent; color: white; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers { padding-top: 0; width: 100%; display: flex; justify-content: space-between; align-items: stretch; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers > span { display: none; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers > span.prev-removed { padding-left: calculate-rem(147); } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers > span.next-removed { padding-right: calculate-rem(147); } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next { width: calculate-rem(147); height: calculate-rem(62); border: 0 none; padding: 1.125rem; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous { margin-left: 0; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next { margin-left: auto; } @media all and (min-width: 40em) { .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.next { margin-left: 0; } } @media all and (min-width: 40em) { .dataTables_wrapper .dataTables_paginate.paging_simple_numbers > span { display: block; text-align: center; flex-grow: 1; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers > span a.paginate_button { display: inline-block; padding: calculate-rem(18); height: calculate-rem(60); border: 0 none; text-decoration: none; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers > span a.paginate_button:hover { outline: 0.25rem solid #2491ff; outline-offset: 0rem; position: relative; z-index: 2; color: inherit; border: 0 none; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers > span a.paginate_button.current { border: 0 none; padding-bottom: calculate-rem(15); position: relative; z-index: 1; } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers > span a.paginate_button.current:only-child { display: none; } } :root { --side-nav-borders: #a9aeb1; --side-nav-sub-active: #edeff0; --side-nav-sub-active-text: #1a4480; --side-nav-text: black; --side-nav-text-hover: #002d3f; --side-nav-active: #c9ab48; --menu-mobile-active: #c9ab48; } .usa-sidenav { font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important; border-bottom: 1px solid var(--side-nav-borders); } @media print { .usa-sidenav { display: none; } } .usa-sidenav .usa-sidenav__item { border-color: var(--side-nav-borders); } .usa-sidenav .usa-sidenav__item--is-parent > a { border-bottom: 1px solid var(--side-nav-borders); } .usa-sidenav .usa-sidenav__sublist li.usa-sidenav__item:first-child { border-top: none; } .usa-sidenav > .usa-sidenav__item { font-size: 1.0625rem; /* 17px */ } .usa-sidenav > .usa-sidenav__item a:not(.usa-button) { color: var(--side-nav-text); } .usa-sidenav > .usa-sidenav__item a:not(.usa-button):hover { color: var(--side-nav-text-hover); } .usa-sidenav > .usa-sidenav__item a.usa-current { font-weight: bold; } .usa-sidenav > .usa-sidenav__item a.usa-current::after { background-color: var(--side-nav-active); width: 0.3125rem; /* 5px */ border-radius: 0; top: 0; bottom: 0; left: 0; height: auto; } .usa-sidenav > .usa-sidenav__item a.usa-current .usa.current-border { border-left: 0.3125rem solid var(--menu-mobile-active); padding-left: 0.375rem; /* 6px */ } .usa-sidenav > .usa-sidenav__item .usa-sidenav__sublist > .usa-sidenav__item { font-size: 0.9375rem; /* 15px */ } .usa-sidenav > .usa-sidenav__item .usa-sidenav__sublist > .usa-sidenav__item a.usa-current, .usa-sidenav > .usa-sidenav__item .usa-sidenav__sublist > .usa-sidenav__item a:focus, .usa-sidenav > .usa-sidenav__item .usa-sidenav__sublist > .usa-sidenav__item a:active, .usa-sidenav > .usa-sidenav__item .usa-sidenav__sublist > .usa-sidenav__item a:hover { background-color: var(--side-nav-sub-active); color: var(--side-nav-sub-active-text); } .usa-sidenav > .usa-sidenav__item .usa-sidenav__sublist--level-1 .usa-sidenav__sublist[class*=usa-sidenav__sublist--level-] { margin-left: 1rem; } .usa-sidenav > .usa-sidenav__item .usa-sidenav__sublist--level-1 .usa-sidenav__sublist[class*=usa-sidenav__sublist--level-] a { padding-left: 1rem; } .usa-sidenav > .usa-sidenav__item .usa-sidenav__sublist--level-1 .usa-sidenav__sublist.usa-sidenav__sublist--level-2 { margin-left: 2rem; } .usa-table, table.dataTable { border: 0; border-collapse: collapse; font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 1.0625rem; margin: 0; line-height: normal; text-align: left; width: 100%; } .usa-table caption, table.dataTable caption { font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.9375rem; font-weight: bold; line-height: normal; margin-bottom: 0.75rem; padding: 0.625rem; text-align: left; border-top: 1px solid #c6cace; border-left: 1px solid #c6cace; border-right: 1px solid #c6cace; background-color: #112f4e; color: white; } .usa-table th, .usa-table td, table.dataTable th, table.dataTable td { padding: 0.625rem; border-top: 1px solid #c6cace; border-bottom: 1px solid #c6cace; border-left: 1px solid #c6cace; border-right: 1px solid #c6cace; } .usa-table thead th, table.dataTable thead th { background-color: #112f4e; color: white; border-top: 1px solid #c6cace; } .usa-table tbody td, table.dataTable tbody td { background-color: white; } .usa-table tbody th, table.dataTable tbody th { text-align: left; font-weight: bold; } .usa-table tbody tr:nth-child(even), table.dataTable tbody tr:nth-child(even) { background-color: #eff6fb; } .usa-table tbody tr:nth-child(odd), table.dataTable tbody tr:nth-child(odd) { background-color: white; } .usa-table tbody tr:hover td, .usa-table tbody tr:hover th[scope=row], table.dataTable tbody tr:hover td, table.dataTable tbody tr:hover th[scope=row] { background-color: #d9e8f6; } .usa-table a, table.dataTable a { font-weight: normal; } .table-wrapper { max-width: 100%; overflow: auto; clear: both; } @media print { .table-wrapper { overflow: visible; } } .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.current, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers a.paginate_button.current { border-bottom: solid 3px var(--ojp-header__active-nav) !important; } .layout--node-landing_page .block-layout-builder > .field--name-body, .page-node-type-landing-page .layout-builder__section .block-layout-builder > .field--name-body { margin-bottom: 1rem; } .layout--node-landing_page .ojp--recent-content, .page-node-type-landing-page .layout-builder__section .ojp--recent-content { flex-basis: 100%; } .layout--node-landing_page .ojp--recent-content .read-more, .page-node-type-landing-page .layout-builder__section .ojp--recent-content .read-more { text-align: right; margin-top: 0.625rem; } .layout--node-landing_page .ojp--recent-content, .layout--node-landing_page .ojp--accordion-section, .layout--node-landing_page .notes-accordion, .layout--node-landing_page .block-webform, .page-node-type-landing-page .layout-builder__section .ojp--recent-content, .page-node-type-landing-page .layout-builder__section .ojp--accordion-section, .page-node-type-landing-page .layout-builder__section .notes-accordion, .page-node-type-landing-page .layout-builder__section .block-webform { margin-bottom: 2.5rem; } .layout--node-landing_page .view-header, .page-node-type-landing-page .layout-builder__section .view-header { margin-bottom: 2.5rem; } .layout--node-landing_page .search-filter-results--filter, .page-node-type-landing-page .layout-builder__section .search-filter-results--filter { display: inline-block; } @media all and (min-width: 40em) { .layout--node-landing_page .block-views-blockbiographies-biographies-by-role .field--name-field-biography-image, .page-node-type-landing-page .layout-builder__section .block-views-blockbiographies-biographies-by-role .field--name-field-biography-image { float: right; padding: 0 0 1.25rem 1.25rem; } } .layout--node-landing_page .block-views-blockbiographies-biographies-by-role .view-content > h3, .page-node-type-landing-page .layout-builder__section .block-views-blockbiographies-biographies-by-role .view-content > h3 { margin: 1.875rem 0; } .layout--node-landing_page .block-views-blockbiographies-biographies-by-role .view-content > h3::before, .page-node-type-landing-page .layout-builder__section .block-views-blockbiographies-biographies-by-role .view-content > h3::before { content: "Class of "; } .layout--node-landing_page .block-views-blockbiographies-biographies-by-role .field--name-body, .page-node-type-landing-page .layout-builder__section .block-views-blockbiographies-biographies-by-role .field--name-body { margin-top: 0.9375rem; } .layout--node-landing_page .block-views-blockbiographies-biographies-by-role .views-row::after, .page-node-type-landing-page .layout-builder__section .block-views-blockbiographies-biographies-by-role .views-row::after { content: ""; display: table; clear: both; } .layout--node-landing_page .block-views-blockbiographies-biographies-by-role .views-row + .views-row, .page-node-type-landing-page .layout-builder__section .block-views-blockbiographies-biographies-by-role .views-row + .views-row { padding-top: 1.25rem; margin-top: 1.25rem; border-top: 1px solid; } .layout--node-landing_page .block-views-blockbiographies-biographies-by-role .field--name-field-biography-title, .layout--node-landing_page .block-views-blockbiographies-biographies-by-role .field--name-field-affiliation, .page-node-type-landing-page .layout-builder__section .block-views-blockbiographies-biographies-by-role .field--name-field-biography-title, .page-node-type-landing-page .layout-builder__section .block-views-blockbiographies-biographies-by-role .field--name-field-affiliation { font-style: italic; } .layout--node-landing_page .block-views-blockstate-administering-agency-block-1 .views-row, .layout--node-landing_page .block-views-blockstate-administering-agency-block-2 .views-row, .page-node-type-landing-page .layout-builder__section .block-views-blockstate-administering-agency-block-1 .views-row, .page-node-type-landing-page .layout-builder__section .block-views-blockstate-administering-agency-block-2 .views-row { margin-bottom: 1.625rem; } .layout--node-landing_page .block-views-blockstate-administering-agency-block-1 h3, .layout--node-landing_page .block-views-blockstate-administering-agency-block-2 h3, .page-node-type-landing-page .layout-builder__section .block-views-blockstate-administering-agency-block-1 h3, .page-node-type-landing-page .layout-builder__section .block-views-blockstate-administering-agency-block-2 h3 { margin-bottom: 1.375rem; } .layout--node-landing_page .block-views-blockstate-administering-agency-block-1 h3:not(:first-of-type), .layout--node-landing_page .block-views-blockstate-administering-agency-block-2 h3:not(:first-of-type), .page-node-type-landing-page .layout-builder__section .block-views-blockstate-administering-agency-block-1 h3:not(:first-of-type), .page-node-type-landing-page .layout-builder__section .block-views-blockstate-administering-agency-block-2 h3:not(:first-of-type) { margin-top: 2.625rem; } .layout--node-landing_page .block-views-blockabstracts-accessions-abstract-weekly-list .view-display-id-abstract_charge_subject_totals .views-row, .page-node-type-landing-page .layout-builder__section .block-views-blockabstracts-accessions-abstract-weekly-list .view-display-id-abstract_charge_subject_totals .views-row { display: list-item; list-style-type: disc; margin-left: 1.625rem; } .evidence-rating-icon { height: 20px; width: 20px; display: inline-block; background-repeat: no-repeat; background-size: contain; vertical-align: middle; } .evidence-rating-icon.promising-one-meta-analysis { background-image: url("/themes/custom/ojp/ojp_files/images/promising-one-meta-analysis.jpeg"); } .evidence-rating-icon.promising-more-than-one-meta-analysis { background-image: url("/themes/custom/ojp/ojp_files/images/promising-more-than-one-meta-analysis.jpeg"); } .evidence-rating-icon.effective-one-meta-analysis { background-image: url("/themes/custom/ojp/ojp_files/images/effective-one-meta-analysis.jpeg"); } .evidence-rating-icon.effective-more-than-one-meta-analysis { background-image: url("/themes/custom/ojp/ojp_files/images/effective-more-than-one-meta-analysis.jpeg"); } .evidence-rating-icon.no-effects-one-meta-analysis { background-image: url("/themes/custom/ojp/ojp_files/images/no-effects-one-meta-analysis.jpeg"); } .evidence-rating-icon.no-effects-more-than-one-meta-analysis { background-image: url("/themes/custom/ojp/ojp_files/images/no-effects-more-than-one-meta-analysis.jpeg"); } .evidence-rating-icon.ineffective-one-meta-analysis { background-image: url("/themes/custom/ojp/ojp_files/images/ineffective-one-meta-analysis.jpg"); } .evidence-rating-icon.ineffective-more-than-one-meta-analysis { background-image: url("/themes/custom/ojp/ojp_files/images/ineffective-more-than-one-meta-analysis.jpg"); } .evidence-rating-icon.negative-effects-one-meta-analysis { background-image: url("/themes/custom/ojp/ojp_files/images/negative-effects-single-study-small.jpg"); } .evidence-rating-icon.negative-effects-more-than-one-meta-analysis { background-image: url("/themes/custom/ojp/ojp_files/images/negative-effects-multiple-studies-small.jpg"); } .rating-cell { display: flex; align-items: center; gap: 0.5rem; text-align: left; } .rating-cell img { flex-shrink: 0; width: 20px; height: 20px; display: block; } .rating-cell p, .rating-cell .rating-cell__text { margin: 0; line-height: 1.2; } .rating-cell-list { display: flex; flex-direction: column; gap: 0.25rem; } .view-display-id-recently_rated .view-header { margin-block-end: 0; } .view.cta .evidence-rating-icon { display: inline-block; } .evaluation-outcome .outcome-multisite { margin-left: 0.5rem; display: inline-block; } .node--type-program-practice .layout__region .block-views { margin-bottom: 0; } .program-practice-accordion .field--name-field-outcomes .field__label { font-weight: 600 !important; } .page-node-type-program-practice .layout--twocol-section--75-25 .layout__region--first { padding-right: 2rem !important; } .page-node-type-program-practice table { max-width: 100%; margin-top: 0; table-layout: fixed; } .page-node-type-program-practice table td { padding: 0.625rem; overflow-wrap: break-word; } .page-node-type-program-practice table tr:nth-child(even) { background-color: #eff6fb; } .page-node-type-program-practice .dataTables_wrapper table.dataTable tr:nth-child(odd) { background-color: transparent; } .page-node-type-program-practice .snapshot-date { margin-top: 1rem; } .page-node-type-program-practice .related-practices-title { font-size: 1.0625rem; } .page-node-type-program-practice .download-csv { float: right; margin-top: -2rem; } .evaluation-outcome .promising-one-study { display: inline; background-repeat: no-repeat; background-size: contain; background-image: url("/themes/custom/ojp/ojp_files/images/programs/promising-one-study.jpeg"); } .evaluation-outcome .promising-more-than-one-study { display: inline; background-repeat: no-repeat; background-size: contain; background-image: url("/themes/custom/ojp/ojp_files/images/programs/promising-more-than-one-study.jpeg"); } .evaluation-outcome .effective-one-study { display: inline; background-repeat: no-repeat; background-size: contain; background-image: url("/themes/custom/ojp/ojp_files/images/programs/effective-one-study.jpeg"); } .evaluation-outcome .effective-more-than-one-study { display: inline; background-repeat: no-repeat; background-size: contain; background-image: url("/themes/custom/ojp/ojp_files/images/programs/effective-more-than-one-study.jpeg"); } .evaluation-outcome .no-effects-one-study { display: inline; background-repeat: no-repeat; background-size: contain; background-image: url("/themes/custom/ojp/ojp_files/images/programs/no-effects--one-study.jpeg"); } .evaluation-outcome .no-effects-more-than-one-study { display: inline; background-repeat: no-repeat; background-size: contain; background-image: url("/themes/custom/ojp/ojp_files/images/programs/no-effects-more-than-one-study.jpeg"); } .evaluation-outcome .ineffective-one-study { display: inline; background-repeat: no-repeat; background-size: contain; background-image: url("/themes/custom/ojp/ojp_files/images/ineffective-one-meta-analysis.jpg"); } .evaluation-outcome .ineffective-more-than-one-study { display: inline; background-repeat: no-repeat; background-size: contain; background-image: url("/themes/custom/ojp/ojp_files/images/ineffective-more-than-one-meta-analysis.jpg"); } .evaluation-outcome .negative-effects-one-study { display: inline; background-repeat: no-repeat; background-size: contain; background-image: url("/themes/custom/ojp/ojp_files/images/negative-effects-single-study-small.jpg"); } .evaluation-outcome .negative-effects-more-than-one-study { display: inline; background-repeat: no-repeat; background-size: contain; background-image: url("/themes/custom/ojp/ojp_files/images/negative-effects-multiple-studies-small.jpg"); } .program-type .evaluation-outcome .promising-one-study, .program-type .evaluation-outcome .effective-one-study, .program-type .evaluation-outcome .no-effects-one-study, .program-type .evaluation-outcome .ineffective-one-study, .program-type .evaluation-outcome .negative-effects-one-study, .program_rbo-type .evaluation-outcome .promising-one-study, .program_rbo-type .evaluation-outcome .effective-one-study, .program_rbo-type .evaluation-outcome .no-effects-one-study, .program_rbo-type .evaluation-outcome .ineffective-one-study, .program_rbo-type .evaluation-outcome .negative-effects-one-study { padding: 0.7rem 2.5rem 0.5rem 0; background-position: right top; height: 32px; width: 32px; } .program-type .evaluation-outcome .promising-more-than-one-study, .program-type .evaluation-outcome .effective-more-than-one-study, .program-type .evaluation-outcome .no-effects-more-than-one-study, .program-type .evaluation-outcome .ineffective-more-than-one-study, .program-type .evaluation-outcome .negative-effects-more-than-one-study, .program_rbo-type .evaluation-outcome .promising-more-than-one-study, .program_rbo-type .evaluation-outcome .effective-more-than-one-study, .program_rbo-type .evaluation-outcome .no-effects-more-than-one-study, .program_rbo-type .evaluation-outcome .ineffective-more-than-one-study, .program_rbo-type .evaluation-outcome .negative-effects-more-than-one-study { padding: 10px 40px 10px 0; background-position: right; background-size: 2rem; } .practice-snapshot .address, .practice-snapshot .evaluation-outcome { margin-top: 0; } .program_rbo-type .snapshot-text { margin-top: 1rem !important; } .program_rbo-type .view-display-id-program_rbo_outcome { margin-top: 1rem; } .program_rbo-type .view-display-id-program_rbo_outcome .dataTables_paginate .prev-removed { border: none; } .program_rbo-type .view-practice-snapshot .address, .program_rbo-type .view-practice-snapshot .evaluation-outcome, .program_rbo-type .snapshot-date-rbo { margin-top: 0; } .program_rbo-type .snapshot-section .program-category .field-list { margin-left: 1rem; } .program_rbo-type .snapshot-section .program-category .field-list .item-list { margin: 0; } .program_rbo-type .snapshot-section .program-category .field-list .item-list ul { list-style-position: outside; margin: 0 0 0 1rem; } .program_rbo-type .block-program-rbo-current-status-block > div { margin-bottom: 1rem; } .program_rbo-type .block-program-rbo-current-status-block > div:last-child { margin-bottom: 0; } .block-views-blockpractice-snapshot-evidence-rating-for-program { margin-bottom: 0 !important; } .block-views.block-views-blockpractice-snapshot-practice-content { margin-bottom: 0 !important; } .block-views-blockpractice-snapshot-program-rbo-outcome { margin-bottom: 0 !important; } .block-views-blockpractice-snapshot-block-evidence-rating-outcomes td, .block-views-blockpractice-snapshot-block-evidence-rating-outcomes th { border: 0 !important; } .block-views-blockpractice-snapshot-block-evidence-rating-outcomes .view-display-id-block_evidence_rating_outcomes .promising-more-than-one-meta-analysis, .block-views-blockpractice-snapshot-block-evidence-rating-outcomes .view-display-id-block_evidence_rating_outcomes .promising-one-meta-analysis, .block-views-blockpractice-snapshot-block-evidence-rating-outcomes .view-display-id-block_evidence_rating_outcomes .effective-one-meta-analysis, .block-views-blockpractice-snapshot-block-evidence-rating-outcomes .view-display-id-block_evidence_rating_outcomes .effective-more-than-one-meta-analysis, .block-views-blockpractice-snapshot-block-evidence-rating-outcomes .view-display-id-block_evidence_rating_outcomes .no-effects-one-meta-analysis, .block-views-blockpractice-snapshot-block-evidence-rating-outcomes .view-display-id-block_evidence_rating_outcomes .no-effects-more-than-one-meta-analysis, .block-views-blockpractice-snapshot-block-evidence-rating-outcomes .view-display-id-block_evidence_rating_outcomes .ineffective-one-meta-analysis, .block-views-blockpractice-snapshot-block-evidence-rating-outcomes .view-display-id-block_evidence_rating_outcomes .ineffective-more-than-one-meta-analysis, .block-views-blockpractice-snapshot-block-evidence-rating-outcomes .view-display-id-block_evidence_rating_outcomes .negative-effects-one-meta-analysis, .block-views-blockpractice-snapshot-block-evidence-rating-outcomes .view-display-id-block_evidence_rating_outcomes .negative-effects-more-than-one-meta-analysis { padding-left: 2rem; background-position: left center; } .meta-analysis-methodology table { margin-bottom: 2rem; } .meta-analysis-methodology table tr { background-color: #fff; } .meta-analysis-methodology table tr:nth-child(even), .usa-table .meta-analysis-methodology table tr:nth-child(even) { background-color: #eff6fb; } .meta-analysis-methodology table tr:nth-child(odd), .usa-table .meta-analysis-methodology table tr:nth-child(odd) { background-color: #fff; } .meta-analysis-methodology table tr:hover td, .meta-analysis-methodology table tr:hover th[scope=row], .usa-table .meta-analysis-methodology table tr:hover td, .usa-table .meta-analysis-methodology table tr:hover th[scope=row] { background-color: #d9e8f6; } .usa-form .usa-button { margin-top: 0.5rem; } @media all and (min-width: 30em) { .usa-form .usa-button { margin-top: 1.5rem; } } .webform-submission-form.usa-form { max-width: 100%; } .webform-submission-form.usa-form > .usa-fieldset { padding: 1rem 2rem 2rem; margin: 2rem 0; border: 1px solid #565c65; } .webform-submission-form.usa-form .fieldset-legend { font-weight: bold; } .webform-submission-form.usa-form .usa-input--required:after, .webform-submission-form.usa-form .form-required:after { content: " *"; color: #d83933; } .webform-submission-form.usa-form .tabledrag-toggle-weight { background: transparent; border: none; color: unset; } .webform-submission-form.usa-form .js-form-item-cost { position: relative; } .webform-submission-form.usa-form .js-form-item-cost .field-prefix { position: absolute; top: 2.3125rem; left: 0.625rem; } .webform-submission-form.usa-form input[type=number]#edit-cost { padding-left: 1.625rem; } .webform-submission-event-form.usa-form .container-inline { display: flex; align-items: center; } .webform-submission-event-form.usa-form .container-inline .form-number { margin-top: 1.5rem; } .webform-submission-event-form.usa-form .container-inline .form-submit { margin-bottom: -2px; } .webform-submission-event-form.usa-form .inline-field-group .fieldset-wrapper { display: flex; flex-direction: column; flex-wrap: wrap; align-items: baseline; } @media all and (min-width: 55em) { .webform-submission-event-form.usa-form .inline-field-group .fieldset-wrapper { flex-direction: row; } } .webform-submission-event-form.usa-form .inline-field-group .fieldset-wrapper .description { width: 100%; } .webform-submission-event-form.usa-form .inline-field-group .fieldset-wrapper .usa-form-group { margin-right: 3px; } .webform-submission-event-form.usa-form .inline-field-group .fieldset-wrapper .usa-form-group--error { border-left-color: transparent; margin-top: 0; margin-left: 0; padding-left: 0; } .hero--primary { color: white; } .hero--primary .usa-button--hero { background-color: #2378c3; } .hero--primary .usa-button--hero:hover { background-color: #074b69; } .hero--primary .usa-button--hero::after, .hero--primary .usa-button--hero:visited::after { background-color: #11181d; } .hero--primary.hero--no_image, .hero--primary.hero--no_image_short { background: #002d3f; } .hero--primary.hero--background, .hero--primary.hero--background_short { background: #002d3f; } .hero--primary .usa-button--big { margin-top: 1.25rem; color: white; } .hero--primary .usa-button--big.usa-button--hero::after, .hero--primary .usa-button--big.usa-button--hero:visited::after { background-color: #11181d; } .hero--primary .usa-button--secondary { color: white; background-color: #2378c3; } .hero--primary .usa-button--secondary::after, .hero--primary .usa-button--secondary:visited::after { background-color: #11181d; } .hero--primary .usa-button--secondary.usa-button--active { background-color: #002d3f; color: white; } .hero--primary .usa-button--secondary.usa-button--hover, .hero--primary .usa-button--secondary:hover { background-color: #074b69; color: white; } .hero--primary.hero--inset { color: black; } @media (min-width: 64em) { .hero--primary.hero--inset::before { background: #002d3f; } } .hero--primary.hero--inset .usa-button--big { color: white; } .hero--primary.hero--background .hero__image-credit { color: black; } .hero--primary .hero__background-image__overlay { background: rgba(0, 58, 112, 0.75); } .hero--primary .hero__background-image__overlay--solid { background: #002d3f; } .hero--primary.hero--inset .hero__image-credit { color: black; max-width: 18.75rem; } .hero--primary.hero--inset .hero__image-credit a { color: black; } .hero--primary.hero--inset .hero__image-credit a:visited { color: black; } @media (min-width: 64em) { .hero--primary .hero__inset-container { background: #face00; } } .hero--primary .hero__inset-container .hero__text-container { background: #face00; } .hero--secondary { color: white; } .hero--secondary .usa-button--hero { background-color: #2378c3; } .hero--secondary .usa-button--hero:hover { background-color: #074b69; } .hero--secondary .usa-button--hero::after, .hero--secondary .usa-button--hero:visited::after { background-color: #11181d; } .hero--secondary.hero--no_image, .hero--secondary.hero--no_image_short { background: #face00; } .hero--secondary.hero--background, .hero--secondary.hero--background_short { background: #face00; } .hero--secondary .usa-button--big { margin-top: 1.25rem; color: white; } .hero--secondary .usa-button--big.usa-button--hero::after, .hero--secondary .usa-button--big.usa-button--hero:visited::after { background-color: #11181d; } .hero--secondary .usa-button--secondary { color: white; background-color: #2378c3; } .hero--secondary .usa-button--secondary::after, .hero--secondary .usa-button--secondary:visited::after { background-color: #11181d; } .hero--secondary .usa-button--secondary.usa-button--active { background-color: #002d3f; color: white; } .hero--secondary .usa-button--secondary.usa-button--hover, .hero--secondary .usa-button--secondary:hover { background-color: #074b69; color: white; } .hero--secondary.hero--inset { color: white; } @media (min-width: 64em) { .hero--secondary.hero--inset::before { background: #face00; } } .hero--secondary.hero--inset .usa-button--big { color: white; } .hero--secondary.hero--background .hero__image-credit { color: white; } .hero--secondary .hero__background-image__overlay { background: rgba(31, 132, 98, 0.75); } .hero--secondary .hero__background-image__overlay--solid { background: #face00; } .hero--secondary.hero--inset .hero__image-credit { color: white; max-width: 18.75rem; } .hero--secondary.hero--inset .hero__image-credit a { color: white; } .hero--secondary.hero--inset .hero__image-credit a:visited { color: white; } @media (min-width: 64em) { .hero--secondary .hero__inset-container { background: #face00; } } .hero--secondary .hero__inset-container .hero__text-container { background: #face00; } .hero--gray { color: black; } .hero--gray .usa-button--hero { background-color: #face00; } .hero--gray .usa-button--hero:hover { background-color: #ffe396; } .hero--gray .usa-button--hero::after, .hero--gray .usa-button--hero:visited::after { background-color: #c2850c; } .hero--gray.hero--no_image, .hero--gray.hero--no_image_short { background: #adadad; } .hero--gray.hero--background, .hero--gray.hero--background_short { background: #adadad; } .hero--gray .usa-button--big { margin-top: 1.25rem; color: black; } .hero--gray .usa-button--big.usa-button--hero::after, .hero--gray .usa-button--big.usa-button--hero:visited::after { background-color: #c2850c; } .hero--gray .usa-button--secondary { color: black; background-color: #2378c3; } .hero--gray .usa-button--secondary::after, .hero--gray .usa-button--secondary:visited::after { background-color: #11181d; } .hero--gray .usa-button--secondary.usa-button--active { background-color: #002d3f; color: white; } .hero--gray .usa-button--secondary.usa-button--hover, .hero--gray .usa-button--secondary:hover { background-color: #074b69; color: white; } .hero--gray.hero--inset { color: black; } @media (min-width: 64em) { .hero--gray.hero--inset::before { background: #adadad; } } .hero--gray.hero--inset .usa-button--big { color: black; } .hero--gray.hero--background .hero__image-credit { color: black; } .hero--gray .hero__background-image__overlay { background: rgba(173, 173, 173, 0.85); } .hero--gray .hero__background-image__overlay--solid { background: #adadad; } .hero--gray.hero--inset .hero__image-credit { color: black; max-width: 18.75rem; } .hero--gray.hero--inset .hero__image-credit a { color: black; } .hero--gray.hero--inset .hero__image-credit a:visited { color: black; } @media (min-width: 64em) { .hero--gray .hero__inset-container { background: #adadad; } } .hero--gray .hero__inset-container .hero__text-container { background: #adadad; } .hero--accent_cool { color: white; } .hero--accent_cool .usa-button--hero { background-color: #112f4e; } .hero--accent_cool .usa-button--hero:hover { background-color: #005ea2; } .hero--accent_cool .usa-button--hero::after, .hero--accent_cool .usa-button--hero:visited::after { background-color: #13171f; } .hero--accent_cool.hero--no_image, .hero--accent_cool.hero--no_image_short { background: #207FA2; } .hero--accent_cool.hero--background, .hero--accent_cool.hero--background_short { background: #207FA2; } .hero--accent_cool .usa-button--big { margin-top: 1.25rem; color: white; } .hero--accent_cool .usa-button--big.usa-button--hero::after, .hero--accent_cool .usa-button--big.usa-button--hero:visited::after { background-color: #13171f; } .hero--accent_cool .usa-button--secondary { color: white; background-color: #2378c3; } .hero--accent_cool .usa-button--secondary::after, .hero--accent_cool .usa-button--secondary:visited::after { background-color: #11181d; } .hero--accent_cool .usa-button--secondary.usa-button--active { background-color: #002d3f; color: white; } .hero--accent_cool .usa-button--secondary.usa-button--hover, .hero--accent_cool .usa-button--secondary:hover { background-color: #074b69; color: white; } .hero--accent_cool.hero--inset { color: white; } @media (min-width: 64em) { .hero--accent_cool.hero--inset::before { background: #207FA2; } } .hero--accent_cool.hero--inset .usa-button--big { color: white; } .hero--accent_cool.hero--background .hero__image-credit { color: black; } .hero--accent_cool .hero__background-image__overlay { background: rgba(32, 127, 162, 0.85); } .hero--accent_cool .hero__background-image__overlay--solid { background: #207FA2; } .hero--accent_cool.hero--inset .hero__image-credit { color: white; max-width: 18.75rem; } .hero--accent_cool.hero--inset .hero__image-credit a { color: white; } .hero--accent_cool.hero--inset .hero__image-credit a:visited { color: white; } @media (min-width: 64em) { .hero--accent_cool .hero__inset-container { background: #065374; } } .hero--accent_cool .hero__inset-container .hero__text-container { background: #065374; } .hero--accent_warm { color: white; } .hero--accent_warm .usa-button--hero { background-color: #2672de; } .hero--accent_warm .usa-button--hero:hover { background-color: #1a4480; } .hero--accent_warm .usa-button--hero::after, .hero--accent_warm .usa-button--hero:visited::after { background-color: #252f3e; } .hero--accent_warm.hero--no_image, .hero--accent_warm.hero--no_image_short { background: #c05600; } .hero--accent_warm.hero--background, .hero--accent_warm.hero--background_short { background: #c05600; } .hero--accent_warm .usa-button--big { margin-top: 1.25rem; color: white; } .hero--accent_warm .usa-button--big.usa-button--hero::after, .hero--accent_warm .usa-button--big.usa-button--hero:visited::after { background-color: #252f3e; } .hero--accent_warm .usa-button--secondary { color: white; background-color: #2378c3; } .hero--accent_warm .usa-button--secondary::after, .hero--accent_warm .usa-button--secondary:visited::after { background-color: #11181d; } .hero--accent_warm .usa-button--secondary.usa-button--active { background-color: #002d3f; color: white; } .hero--accent_warm .usa-button--secondary.usa-button--hover, .hero--accent_warm .usa-button--secondary:hover { background-color: #074b69; color: white; } .hero--accent_warm.hero--inset { color: white; } @media (min-width: 64em) { .hero--accent_warm.hero--inset::before { background: #c05600; } } .hero--accent_warm.hero--inset .usa-button--big { color: white; } @media (min-width: 64em) { .hero--accent_warm.hero--inset.hero--accent_warm::before { background: #775540; } } .hero--accent_warm.hero--background .hero__image-credit { color: black; } .hero--accent_warm .hero__background-image__overlay { background: rgba(192, 86, 64, 0.85); } .hero--accent_warm .hero__background-image__overlay--solid { background: #c05600; } .hero--accent_warm.hero--inset .hero__image-credit { color: white; max-width: 18.75rem; } .hero--accent_warm.hero--inset .hero__image-credit a { color: white; } .hero--accent_warm.hero--inset .hero__image-credit a:visited { color: white; } @media (min-width: 64em) { .hero--accent_warm .hero__inset-container { background: #c05600; } } .hero--accent_warm .hero__inset-container .hero__text-container { background: #c05600; } .hero--no_styling .hero__no_styling-container .hero__text-container { background: transparent; } .usa-button.usa-button--big, .layout--node-event .field--name-field-event-url a, .usa-search.usa-search--small .gsc-search-button button.usa-button--big, .gsc-search-box .gsc-search-button button.usa-button--big { font-size: 1.0625rem; } .usa-button { position: relative; border-radius: 0.25rem; background-color: #face00; color: #1b1b1b; } .usa-button:visited { color: #1b1b1b; } .usa-button::after, .usa-button:visited::after { position: absolute; width: 100%; bottom: 0; left: 0; right: 0; height: 0.25rem; border-radius: 0 0 0.25rem 0.25rem; background-color: #8a7237; content: ""; } .usa-button.usa-button--hover, .usa-button:hover { background-color: #ffe396; color: #1b1b1b; } .usa-button.usa-button--active, .usa-button:active { background-color: #c9ab48; color: #1b1b1b; } .usa-button.usa-button--secondary, .usa-button.usa-button--secondary:visited { background-color: #2378c3; color: white; } .usa-button.usa-button--secondary::after, .usa-button.usa-button--secondary:visited::after { background-color: #11181d; } .usa-button.usa-button--secondary.usa-button--hover, .usa-button.usa-button--secondary:hover, .usa-button.usa-button--secondary:visited.usa-button--hover, .usa-button.usa-button--secondary:visited:hover { background-color: #074b69; color: white; } .usa-button.usa-button--secondary.usa-button--active, .usa-button.usa-button--secondary:active, .usa-button.usa-button--secondary:visited.usa-button--active, .usa-button.usa-button--secondary:visited:active { background-color: #002d3f; color: white; } .usa-button:disabled { background-color: #dfe1e2; color: #a9aeb1; } .usa-button:disabled::after { background-color: #a9aeb1; } .usa-button.usa-button--outline { background-color: transparent; color: #1b1b1b; } .usa-button.usa-button--outline::after { background-color: transparent; border: calculate-rem(4) solid #face00; } .usa-button.usa-button--outline.usa-button--hover, .usa-button.usa-button--outline:hover { background-color: transparent; color: #1b1b1b; } .usa-button.usa-button--outline.usa-button--hover::after, .usa-button.usa-button--outline:hover::after { border-color: #ffe396; } .usa-button.usa-button--outline.usa-button--active, .usa-button.usa-button--outline:active { background-color: transparent; color: #1b1b1b; } .usa-button.usa-button--outline.usa-button--active::after, .usa-button.usa-button--outline:active::after { border-color: #c9ab48; } .usa-button.usa-button--outline.usa-button--secondary { color: #1b1b1b; } .usa-button.usa-button--outline.usa-button--secondary::after { border-color: #2378c3; } .usa-button.usa-button--outline.usa-button--secondary.usa-button--hover, .usa-button.usa-button--outline.usa-button--secondary:hover { color: #1b1b1b; } .usa-button.usa-button--outline.usa-button--secondary.usa-button--hover::after, .usa-button.usa-button--outline.usa-button--secondary:hover::after { border-color: #074b69; } .usa-button.usa-button--outline.usa-button--secondary.usa-button--active, .usa-button.usa-button--outline.usa-button--secondary:active { color: #1b1b1b; } .usa-button.usa-button--outline.usa-button--secondary.usa-button--active::after, .usa-button.usa-button--outline.usa-button--secondary:active::after { border-color: #002d3f; } .usa-button.usa-button--outline:disabled { color: #a9aeb1; } .usa-button.usa-button--outline:disabled::after { border-color: #dfe1e2; } .usa-button.usa-button--outline.usa-button--inverse { background-color: transparent; color: white; } .usa-button.usa-button--outline.usa-button--inverse::after { background-color: transparent; border: calculate-rem(4) solid white; } .usa-button.usa-button--outline.usa-button--inverse.usa-button--active, .usa-button.usa-button--outline.usa-button--inverse:active { color: #a9aeb1; } .usa-button.usa-button--outline.usa-button--inverse.usa-button--active::after, .usa-button.usa-button--outline.usa-button--inverse:active::after { border-color: #a9aeb1; } .layout--node-event .field--name-field-event-url a, .usa-search.usa-search--small .gsc-search-button button, .gsc-search-box .gsc-search-button button { position: relative; } .layout--node-event .field--name-field-event-url a::after, .usa-search.usa-search--small .gsc-search-button button::after, .gsc-search-box .gsc-search-button button::after { position: absolute; width: 100%; bottom: 0; left: 0; right: 0; height: 0.25rem; background-color: #8a7237; content: ""; } .usa-header .usa-button:not(.usa-menu-btn)::after, .usa-header .usa-button:not(.usa-menu-btn):visited::after, .usa-search .usa-button::after, .usa-search .usa-button:visited::after, .gsc-search-button.gsc-search-button-v2::after, .gsc-search-button.gsc-search-button-v2:visited::after { content: none; display: none; } .usa-accordion__heading button.usa-accordion__button[aria-expanded=true] { background-color: #face00; color: black; background-image: url("../images/uswds-alt/minus-gray-cool-60.svg"); } .usa-accordion__heading button.usa-accordion__button[aria-expanded=false] { background-color: #dfe1e2; color: black; background-image: url("../images/uswds-alt/plus-gray-cool-60.svg"); } .usa-accordion__content { border-color: #a9aeb1; } .usa-accordion__content a { text-decoration: underline !important; } .usa-accordion__content a:hover { text-decoration: none !important; } .modification-notes .modification-notes__divider { background-color: #002d3f; } .ojp-tag { background-color: #2378c3; color: white; } .ojp-tag:hover { background-color: #002d3f; } @media all and (min-width: 40em) { .dataTables_paginate.paging_simple_numbers > span { border-top: 1px solid #a9aeb1; border-bottom: 1px solid #a9aeb1; background-color: #fcfcfc; } .dataTables_paginate.paging_simple_numbers > span a.paginate_button { background-color: #fcfcfc; } .dataTables_paginate.paging_simple_numbers > span a.paginate_button:hover { background: #fcfcfc; } .dataTables_paginate.paging_simple_numbers > span a.paginate_button.current { color: black; border-bottom: solid 3px #face00; background: #fcfcfc; } } :root { --side-nav-text: black; --side-nav-text-hover: #002d3f; --side-nav-active: #face00; } .listing-item-row { border-bottom: 1px solid #1b1b1b; } .listing-item__title a, h3.listing-item__title a { color: #005ea2; } .default-thumbnail svg * { fill: #002d3f; } .listing-item__media--audio-file::after { background-image: url("../images/uswds-alt/audio-icon.svg"); background-color: #fcfcfc; border: 1px solid #a9aeb1; } .card, .flexible-card { border-color: #a9aeb1; background: #fcfcfc; } .card figcaption.ojp-image__caption, .flexible-card figcaption.ojp-image__caption { background-color: #fcfcfc; }