/**
 * Do not edit directly, this file was auto-generated.
 * See <PARAGON_ROOT>/tokens/README.md for more details.
 */

:root {
  --pgn-size-btn-focus-width: 2px;
  --pgn-size-input-btn-focus-width: 1px;
  --pgn-spacing-input-btn-padding-y: 0.5625rem;
  --pgn-color-white: #FFFFFFFF; /** White color. */
  --pgn-rg-size-course-card-image-horizontal-width-max: 360px;
  --pgn-rg-size-footer-logo-height: 45px; /** The height of the logo in the footer. */
  --pgn-rg-size-header-logo-desktop-height: 45px; /** The height of the logo in the header. */
  --pgn-rg-size-header-logo-mobile-height: 45px; /** The height of the logo in the header for mobile devices. */
  --pgn-rg-size-container: 1230px; /** The width of the container. */
  --pgn-rg-color-footer-bg: #F9ECCCFF; /** The background color of the footer. */
  --pgn-rg-color-footer-links-nav: #242423FF; /** The color of navigation links in the footer. */
  --pgn-rg-color-footer-support-text-and-logo: #242423FF; /** The color of support text and logo in the footer. */
  --pgn-rg-color-registration-side-left-bg: #F2F5F8FF; /** The background color of left side of the registration page. */
  --pgn-rg-color-primary: #006A00FF; /** The primary color. */
  --pgn-rg-color-body-bg: #F5F5F5FF; /** Body background color. */
  --pgn-rg-spacing-header-vertical-padding: 30px; /** The vertical padding of the header. */
  --pgn-rg-spacing-promo-title-margin: 0; /** Bottom margin from H1 title on banner */
  --pgn-rg-typography-font-family-sans-serif: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; /** Sans-serif font family. */
  --pgn-rgg-main-text-color: #BCBCBCFF; /** The RGG main text color. */
  --pgn-rgg-secondary-text-color: #333333FF; /** The RGG secondary text color. */
  --pgn-rgg-avatar-position-color: #FFFFFFFF; /** RGG avatar position color. */
  --pgn-rgg-avatar-position-accent-color: #BACBD5FF; /** RGG avatar position accent color. */
  --pgn-rgg-avatar-border-color: #707070FF; /** RGG avatar position border color. */
  --pgn-rgg-avatar-image-bg-gray-color: #CDE4FCFF; /** From RGG chart avatar image background gray color */
  --pgn-rgg-avatar-letter-bg-gray-color: #303030FF; /** From RGG chart avatar letter background gray color */
  --pgn-rgg-btn-logo-dropdown-base-color: #313131FF; /** RGG button logo dropdown base color. */
  --pgn-rgg-quaternary-color: #00ABD9FF; /** From RGG chart quaternary color */
  --pgn-rgg-neutral-gray-color: #BCBCBCFF; /** From RGG chart neutral gray color */
  --pgn-rgg-muted-gray-color: #AAAAAAFF; /** From RGG chart muted gray color */
  --pgn-rgg-medium-gray-color: #6C6D6EFF; /** From RGG chart medium gray color */
  --pgn-rgg-success-green-color: #419E4DFF; /** From RGG chart success green color */
  --pgn-rgg-sky-blue-color: #4599C3FF; /** From RGG chart sky blue color */
  --pgn-rgg-warning-yellow-color: #FFCD00FF; /** From RGG chart warning yellow color */
  --pgn-rgg-orange-accent-color: #E87722FF; /** From RGG chart orange accent color */
  --pgn-rgg-aqua-blue-color: #00B5E2FF; /** From RGG chart aqua blue color */
  --pgn-rgg-purple-accent-color: #6244BBFF; /** From RGG chart purple accent color */
  --pgn-rgg-dark-gray-color: #888B8DFF; /** From RGG chart dark gray color */
  --pgn-rgg-error-red-color: #FF0000FF; /** From RGG chart error red color */
  --pgn-rgg-light-color: #FAFAFAFF; /** From RGG chart light color */
  --pgn-rgg-light-gray-color: #DFE0E8FF; /** From RGG chart light gray color */
  --pgn-rgg-olive-green-color: #556B2FFF; /** From RGG chart olive green color */
  --pgn-rgg-gold-color: #F8B805FF; /** From RGG chart gold color */
  --pgn-rgg-silver-color: #AFBAC7FF; /** From RGG chart silver color */
  --pgn-rgg-bronze-color: #E6814DFF; /** From RGG chart bronze color */
  --pgn-rgg-dashboard-page-corner-border-radius: 1.25rem; /** RGG dashboard page corner border radius. */
  --pgn-rgg-dropdown-item-padding-x: 1.875rem; /** Horizontal padding for RGG dropdown item */
  --pgn-rgg-dropdown-item-padding-y: 0.563rem; /** Vertical padding for RGG dropdown item */
  --pgn-rgg-empty-message-color: #707070FF; /** RGG empty message color. */
  --pgn-rgg-points-vault-img-size: 15.625rem; /** RGG points vault image size. */
  --pgn-rgg-statuses-progress-bg-color: #DFE0E8FF; /** RGG progress status background color. */
  --pgn-rgg-statuses-progress-track-bg-color: #556B2FFF; /** RGG progress status track background color. */
  --pgn-rgg-space-20: 1.25rem; /** Spacing size 20 for RGG progress-badge */
  --pgn-rgg-space-30: 1.875rem; /** Spacing size 30 for RGG progress-badge */
  --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
  --pgn-color-link-base: var(--pgn-rg-color-primary);
  --pgn-color-link-inline-base: var(--pgn-rg-color-primary);
  --pgn-color-teal: var(--pgn-rg-color-primary); /** Teal color. */
  --pgn-color-primary-base: var(--pgn-rg-color-primary); /** Basic primary color. */
  --pgn-color-brand-base: var(--pgn-rg-color-primary); /** Basic brand color. */
  --pgn-color-dark-base: var(--pgn-rg-color-primary); /** Basic dark color. */
  --pgn-rg-size-course-card-image-horizontal-width-min: var(--pgn-rg-size-course-card-image-horizontal-width-max);
  --pgn-rg-color-footer-links-social: var(--pgn-rg-color-primary); /** The color of social links in the footer. */
  --pgn-rg-color-header-bg: var(--pgn-color-white); /** The background color of the header. */
  --pgn-rg-color-header-links-nav: var(--pgn-rg-color-primary); /** The color of navigation links in the header. */
  --pgn-rg-color-header-btn-bg-primary: var(--pgn-rg-color-primary); /** Primary button background in header (sign in) */
  --pgn-rg-color-header-btn-hover-text: var(--pgn-color-white); /** Button hover text in header */
  --pgn-rg-color-header-hover-links-nav: #001E00FF; /** The hover state color for navigation links in the header. */
  --pgn-rg-color-promo-title: var(--pgn-color-white); /** H1 title color on banner */
  --pgn-rg-color-promo-description: var(--pgn-color-white); /** Description color on banner */
  --pgn-rg-typography-font-family-base: var(--pgn-rg-typography-font-family-sans-serif); /** Basic font family. */
  --pgn-rgg-primary-color: var(--pgn-rg-color-primary); /** From RGG chart primary color */
  --pgn-rgg-primary-font-family-base: var(--pgn-rg-typography-font-family-sans-serif); /** RGG Basic font family. */
  --pgn-rgg-accent-color: var(--pgn-rg-color-primary); /** The primary RGG color. */
  --pgn-rgg-accent-transparent-bg-color: #006A008C; /** The RGG primary transparent background color. */
  --pgn-color-link-hover: #001E00FF;
  --pgn-color-link-inline-decoration: #006A00FF;
  --pgn-color-link-inline-hover-base: #001E00FF;
  --pgn-color-link-inline-hover-decoration: #001E00FF;
  --pgn-color-primary-100: #F0F6F0FF; /** Primary color of level 100. */
  --pgn-color-primary-200: #BFDABFFF; /** Primary color of level 200. */
  --pgn-color-primary-300: #80B580FF; /** Primary color of level 300. */
  --pgn-color-primary-400: #408F40FF; /** Primary color of level 400. */
  --pgn-color-primary-500: var(--pgn-color-primary-base); /** Primary color of level 500. */
  --pgn-color-primary-600: #005F00FF; /** Primary color of level 600. */
  --pgn-color-primary-700: #005500FF; /** Primary color of level 700. */
  --pgn-color-primary-800: #005000FF; /** Primary color of level 800. */
  --pgn-color-primary-900: #004A00FF; /** Primary color of level 900. */
  --pgn-color-brand-100: #F0F6F0FF; /** Brand color of level 100. */
  --pgn-color-brand-200: #BFDABFFF; /** Brand color of level 200. */
  --pgn-color-brand-300: #80B580FF; /** Brand color of level 300. */
  --pgn-color-brand-400: #408F40FF; /** Brand color of level 400. */
  --pgn-color-brand-500: var(--pgn-color-brand-base); /** Brand color of level 500. */
  --pgn-color-brand-600: #005F00FF; /** Brand color of level 600. */
  --pgn-color-brand-700: #005500FF; /** Brand color of level 700. */
  --pgn-color-brand-800: #005000FF; /** Brand color of level 800. */
  --pgn-color-brand-900: #004A00FF; /** Brand color of level 900. */
  --pgn-color-dark-100: #F0F6F0FF; /** Dark color of level 100. */
  --pgn-color-dark-200: #BFDABFFF; /** Dark color of level 200. */
  --pgn-color-dark-300: #80B580FF; /** Dark color of level 300. */
  --pgn-color-dark-400: #408F40FF; /** Dark color of level 400. */
  --pgn-color-dark-500: var(--pgn-color-dark-base); /** Dark color of level 500. */
  --pgn-color-dark-600: #005F00FF; /** Dark color of level 600. */
  --pgn-color-dark-700: #005500FF; /** Info color of level 700. */
  --pgn-color-dark-800: #005000FF; /** Dark color of level 800. */
  --pgn-color-dark-900: #004A00FF; /** Dark color of level 900. */
  --pgn-color-action-default-primary-base: #003700FF;
  --pgn-color-action-default-brand-base: #003700FF;
  --pgn-color-action-default-dark-base: #003700FF;
  --pgn-rg-color-header-btn-hover-bg-primary: #005500FF; /** Primary button background hover in header (sign in) */
  --pgn-rg-color-header-btn-hover-bg-outlined-primary: #F0F6F0FF; /** Outline primary button background in header (register) */
  --pgn-rg-typography-promo-title-desktop: 400 2em/1.4em var(--pgn-rg-typography-font-family-base); /** Promo banner H1 title font size on desktop */
  --pgn-color-action-default-primary-100: #D0E3D0FF;
  --pgn-color-action-default-primary-200: #9FC79FFF;
  --pgn-color-action-default-primary-300: #60A260FF;
  --pgn-color-action-default-primary-400: #306C30FF;
  --pgn-color-action-default-primary-500: #003700FF;
  --pgn-color-action-default-primary-600: #002C00FF;
  --pgn-color-action-default-primary-700: #002200FF;
  --pgn-color-action-default-primary-800: #001D00FF;
  --pgn-color-action-default-primary-900: #001700FF;
  --pgn-color-action-default-brand-100: #D0E3D0FF;
  --pgn-color-action-default-brand-200: #9FC79FFF;
  --pgn-color-action-default-brand-300: #60A260FF;
  --pgn-color-action-default-brand-400: #306C30FF;
  --pgn-color-action-default-brand-500: #003700FF;
  --pgn-color-action-default-brand-600: #002C00FF;
  --pgn-color-action-default-brand-700: #002200FF;
  --pgn-color-action-default-brand-800: #001D00FF;
  --pgn-color-action-default-brand-900: #001700FF;
  --pgn-color-action-default-dark-100: #D0E3D0FF;
  --pgn-color-action-default-dark-200: #9FC79FFF;
  --pgn-color-action-default-dark-300: #60A260FF;
  --pgn-color-action-default-dark-400: #306C30FF;
  --pgn-color-action-default-dark-500: #003700FF;
  --pgn-color-action-default-dark-600: #002C00FF;
  --pgn-color-action-default-dark-700: #002200FF;
  --pgn-color-action-default-dark-800: #001D00FF;
  --pgn-color-action-default-dark-900: #001700FF;
  --pgn-rg-typography-promo-title-mobile: var(--pgn-rg-typography-promo-title-desktop); /** Promo banner H1 title font size on mobile */
}