@charset "UTF-8";
/**
 * CONTENTS
 *
 *
 * 02-UTILITIES
 * All utility classes are prefixed with "u-".
 *
 * Spacing .................. Spacings.
 * Visibility ............... Visibility.
 *
 * 03-BASE
 * Fonts .................... Project fonts.
 * Normalize ................ Small browser reset. Base settings.
 *
 * 04-ELEMENTS
 * Root ..................... Global variables, *, html, body css.
 * Headlines ................ Headlines.
 * Links .................... a-tags.
 * Form ..................... Form elements.
 * Lists .................... ul, ol, dl.
 * Text ..................... p, small, etc.
 *
 * 05-WIDGETS
 * Wigets are small and reusable like buttons e.g.
 * All widget classes are prefixed with "w-" .
 *
 * 06-COMPONENTS
 * Components are larger than widgets and can contain multiple widgets and other components.
 * E.g. a navbar
 * All component classes are prefixed with "c-" .
 *
 * 07-PAGES
 * All page classes are prefixed with "p-" .
 *
 * 08-LAYOUTS
 * All layout classes are prefixed with "l-" .
 *
 * 09-VENDOR
 * Vendor styles.
 */
/**
 * UTILITIES
 *
 * Utility classes (`u-`) provide small, single-purpose styles that can be applied directly
 * to elements without modifying components or layouts.
 *
 * Key characteristics:
 * - Utilities are **low-level helpers** that apply one specific styling rule
 * - They are **highly reusable** and intended for quick adjustments
 * - They should **not** define complex styles or impact layout structures
 * - Use utilities to avoid inline styles and one-off CSS rules
 *
 * WHEN TO USE:
 * - Quick spacing adjustments (margins, paddings)
 * - Display/visibility changes
 * - Simple flexbox alignment
 * - Text styling (bold, uppercase, muted)
 * - One-off adjustments that don't warrant a component
 *
 * CONTENTS:
 * - Spacings ............... Margin and padding utilities
 * - Border ................. Border utilities
 * - Color .................. Color and fill utilities
 * - Display ................ Display utilities (block, flex, none, etc.)
 * - Flex ................... Flexbox utilities (direction, alignment, gap, etc.)
 * - Misc ................... Cursor, scroll and visibility utilities
 * - Position ............... Position utilities
 * - Sizing ................. Width/height utilities
 * - Text ................... Text utilities (weight, transform, decoration, etc.)
 * - Z-index ................ Z-index utilities
 *
 */
/**
 * SPACINGS
 *
 * Spacing utilities provide consistent margins and paddings based on a predefined spacing scale.
 * Naming pattern: `u-{property}_{direction}_{size}`
 *
 * Key characteristics:
 * - Based on spacing tokens (xs, sm, md, lg, xl)
 * - Directional control (top, bottom, left, right, or all sides)
 * - Responsive scaling via breakpoint factors
 * - Consistent spacing across the entire application
 *
 * CONTENTS:
 * - Margins ................ Margin utilities (all sides and directional)
 * - Paddings ............... Padding utilities (all sides and directional)
 *
 */
.u-margin_xxs {
  margin: 0.2rem !important;
}
.u-margin_top_xxs {
  margin-top: 0.2rem !important;
}
.u-margin_bottom_xxs {
  margin-bottom: 0.2rem !important;
}
.u-margin_left_xxs {
  margin-left: 0.2rem !important;
}
.u-margin_right_xxs {
  margin-right: 0.2rem !important;
}
.u-margin_block_xxs {
  margin-block: 0.2rem !important;
}
.u-margin_inline_xxs {
  margin-inline: 0.2rem !important;
}
.u-margin_xs {
  margin: 0.4rem !important;
}
.u-margin_top_xs {
  margin-top: 0.4rem !important;
}
.u-margin_bottom_xs, .c-card__body .w-headline {
  margin-bottom: 0.4rem !important;
}
.u-margin_left_xs {
  margin-left: 0.4rem !important;
}
.u-margin_right_xs {
  margin-right: 0.4rem !important;
}
.u-margin_block_xs {
  margin-block: 0.4rem !important;
}
.u-margin_inline_xs {
  margin-inline: 0.4rem !important;
}
.u-margin_sm {
  margin: 0.8rem !important;
}
.u-margin_top_sm {
  margin-top: 0.8rem !important;
}
.u-margin_bottom_sm {
  margin-bottom: 0.8rem !important;
}
.u-margin_left_sm {
  margin-left: 0.8rem !important;
}
.u-margin_right_sm, .w-paragraph-number {
  margin-right: 0.8rem !important;
}
.u-margin_block_sm {
  margin-block: 0.8rem !important;
}
.u-margin_inline_sm {
  margin-inline: 0.8rem !important;
}
.u-margin_md {
  margin: 1.6rem !important;
}
.u-margin_top_md {
  margin-top: 1.6rem !important;
}
.u-margin_bottom_md {
  margin-bottom: 1.6rem !important;
}
.u-margin_left_md {
  margin-left: 1.6rem !important;
}
.u-margin_right_md {
  margin-right: 1.6rem !important;
}
.u-margin_block_md {
  margin-block: 1.6rem !important;
}
.u-margin_inline_md {
  margin-inline: 1.6rem !important;
}
.u-margin_lg {
  margin: 2.4rem !important;
}
.u-margin_top_lg {
  margin-top: 2.4rem !important;
}
.u-margin_bottom_lg {
  margin-bottom: 2.4rem !important;
}
.u-margin_left_lg {
  margin-left: 2.4rem !important;
}
.u-margin_right_lg {
  margin-right: 2.4rem !important;
}
.u-margin_block_lg {
  margin-block: 2.4rem !important;
}
.u-margin_inline_lg {
  margin-inline: 2.4rem !important;
}
.u-margin_xl {
  margin: 3.8rem !important;
}
.u-margin_top_xl {
  margin-top: 3.8rem !important;
}
.u-margin_bottom_xl {
  margin-bottom: 3.8rem !important;
}
.u-margin_left_xl {
  margin-left: 3.8rem !important;
}
.u-margin_right_xl {
  margin-right: 3.8rem !important;
}
.u-margin_block_xl {
  margin-block: 3.8rem !important;
}
.u-margin_inline_xl {
  margin-inline: 3.8rem !important;
}

@media screen and (min-width: 360px) {
  .u-margin_xxs {
    margin: 0.2rem !important;
  }
  .u-margin_top_xxs {
    margin-top: 0.2rem !important;
  }
  .u-margin_bottom_xxs {
    margin-bottom: 0.2rem !important;
  }
  .u-margin_left_xxs {
    margin-left: 0.2rem !important;
  }
  .u-margin_right_xxs {
    margin-right: 0.2rem !important;
  }
  .u-margin_block_xxs {
    margin-block: 0.2rem !important;
  }
  .u-margin_inline_xxs {
    margin-inline: 0.2rem !important;
  }
  .u-margin_xs {
    margin: 0.4rem !important;
  }
  .u-margin_top_xs {
    margin-top: 0.4rem !important;
  }
  .u-margin_bottom_xs, .c-card__body .w-headline {
    margin-bottom: 0.4rem !important;
  }
  .u-margin_left_xs {
    margin-left: 0.4rem !important;
  }
  .u-margin_right_xs {
    margin-right: 0.4rem !important;
  }
  .u-margin_block_xs {
    margin-block: 0.4rem !important;
  }
  .u-margin_inline_xs {
    margin-inline: 0.4rem !important;
  }
  .u-margin_sm {
    margin: 0.8rem !important;
  }
  .u-margin_top_sm {
    margin-top: 0.8rem !important;
  }
  .u-margin_bottom_sm {
    margin-bottom: 0.8rem !important;
  }
  .u-margin_left_sm {
    margin-left: 0.8rem !important;
  }
  .u-margin_right_sm, .w-paragraph-number {
    margin-right: 0.8rem !important;
  }
  .u-margin_block_sm {
    margin-block: 0.8rem !important;
  }
  .u-margin_inline_sm {
    margin-inline: 0.8rem !important;
  }
  .u-margin_md {
    margin: 1.6rem !important;
  }
  .u-margin_top_md {
    margin-top: 1.6rem !important;
  }
  .u-margin_bottom_md {
    margin-bottom: 1.6rem !important;
  }
  .u-margin_left_md {
    margin-left: 1.6rem !important;
  }
  .u-margin_right_md {
    margin-right: 1.6rem !important;
  }
  .u-margin_block_md {
    margin-block: 1.6rem !important;
  }
  .u-margin_inline_md {
    margin-inline: 1.6rem !important;
  }
  .u-margin_lg {
    margin: 2.4rem !important;
  }
  .u-margin_top_lg {
    margin-top: 2.4rem !important;
  }
  .u-margin_bottom_lg {
    margin-bottom: 2.4rem !important;
  }
  .u-margin_left_lg {
    margin-left: 2.4rem !important;
  }
  .u-margin_right_lg {
    margin-right: 2.4rem !important;
  }
  .u-margin_block_lg {
    margin-block: 2.4rem !important;
  }
  .u-margin_inline_lg {
    margin-inline: 2.4rem !important;
  }
  .u-margin_xl {
    margin: 3.8rem !important;
  }
  .u-margin_top_xl {
    margin-top: 3.8rem !important;
  }
  .u-margin_bottom_xl {
    margin-bottom: 3.8rem !important;
  }
  .u-margin_left_xl {
    margin-left: 3.8rem !important;
  }
  .u-margin_right_xl {
    margin-right: 3.8rem !important;
  }
  .u-margin_block_xl {
    margin-block: 3.8rem !important;
  }
  .u-margin_inline_xl {
    margin-inline: 3.8rem !important;
  }
}
@media screen and (min-width: 480px) {
  .u-margin_xxs {
    margin: 0.21rem !important;
  }
  .u-margin_top_xxs {
    margin-top: 0.21rem !important;
  }
  .u-margin_bottom_xxs {
    margin-bottom: 0.21rem !important;
  }
  .u-margin_left_xxs {
    margin-left: 0.21rem !important;
  }
  .u-margin_right_xxs {
    margin-right: 0.21rem !important;
  }
  .u-margin_block_xxs {
    margin-block: 0.21rem !important;
  }
  .u-margin_inline_xxs {
    margin-inline: 0.21rem !important;
  }
  .u-margin_xs {
    margin: 0.42rem !important;
  }
  .u-margin_top_xs {
    margin-top: 0.42rem !important;
  }
  .u-margin_bottom_xs, .c-card__body .w-headline {
    margin-bottom: 0.42rem !important;
  }
  .u-margin_left_xs {
    margin-left: 0.42rem !important;
  }
  .u-margin_right_xs {
    margin-right: 0.42rem !important;
  }
  .u-margin_block_xs {
    margin-block: 0.42rem !important;
  }
  .u-margin_inline_xs {
    margin-inline: 0.42rem !important;
  }
  .u-margin_sm {
    margin: 0.84rem !important;
  }
  .u-margin_top_sm {
    margin-top: 0.84rem !important;
  }
  .u-margin_bottom_sm {
    margin-bottom: 0.84rem !important;
  }
  .u-margin_left_sm {
    margin-left: 0.84rem !important;
  }
  .u-margin_right_sm, .w-paragraph-number {
    margin-right: 0.84rem !important;
  }
  .u-margin_block_sm {
    margin-block: 0.84rem !important;
  }
  .u-margin_inline_sm {
    margin-inline: 0.84rem !important;
  }
  .u-margin_md {
    margin: 1.68rem !important;
  }
  .u-margin_top_md {
    margin-top: 1.68rem !important;
  }
  .u-margin_bottom_md {
    margin-bottom: 1.68rem !important;
  }
  .u-margin_left_md {
    margin-left: 1.68rem !important;
  }
  .u-margin_right_md {
    margin-right: 1.68rem !important;
  }
  .u-margin_block_md {
    margin-block: 1.68rem !important;
  }
  .u-margin_inline_md {
    margin-inline: 1.68rem !important;
  }
  .u-margin_lg {
    margin: 2.52rem !important;
  }
  .u-margin_top_lg {
    margin-top: 2.52rem !important;
  }
  .u-margin_bottom_lg {
    margin-bottom: 2.52rem !important;
  }
  .u-margin_left_lg {
    margin-left: 2.52rem !important;
  }
  .u-margin_right_lg {
    margin-right: 2.52rem !important;
  }
  .u-margin_block_lg {
    margin-block: 2.52rem !important;
  }
  .u-margin_inline_lg {
    margin-inline: 2.52rem !important;
  }
  .u-margin_xl {
    margin: 3.99rem !important;
  }
  .u-margin_top_xl {
    margin-top: 3.99rem !important;
  }
  .u-margin_bottom_xl {
    margin-bottom: 3.99rem !important;
  }
  .u-margin_left_xl {
    margin-left: 3.99rem !important;
  }
  .u-margin_right_xl {
    margin-right: 3.99rem !important;
  }
  .u-margin_block_xl {
    margin-block: 3.99rem !important;
  }
  .u-margin_inline_xl {
    margin-inline: 3.99rem !important;
  }
}
@media screen and (min-width: 768px) {
  .u-margin_xxs {
    margin: 0.22rem !important;
  }
  .u-margin_top_xxs {
    margin-top: 0.22rem !important;
  }
  .u-margin_bottom_xxs {
    margin-bottom: 0.22rem !important;
  }
  .u-margin_left_xxs {
    margin-left: 0.22rem !important;
  }
  .u-margin_right_xxs {
    margin-right: 0.22rem !important;
  }
  .u-margin_block_xxs {
    margin-block: 0.22rem !important;
  }
  .u-margin_inline_xxs {
    margin-inline: 0.22rem !important;
  }
  .u-margin_xs {
    margin: 0.44rem !important;
  }
  .u-margin_top_xs {
    margin-top: 0.44rem !important;
  }
  .u-margin_bottom_xs, .c-card__body .w-headline {
    margin-bottom: 0.44rem !important;
  }
  .u-margin_left_xs {
    margin-left: 0.44rem !important;
  }
  .u-margin_right_xs {
    margin-right: 0.44rem !important;
  }
  .u-margin_block_xs {
    margin-block: 0.44rem !important;
  }
  .u-margin_inline_xs {
    margin-inline: 0.44rem !important;
  }
  .u-margin_sm {
    margin: 0.88rem !important;
  }
  .u-margin_top_sm {
    margin-top: 0.88rem !important;
  }
  .u-margin_bottom_sm {
    margin-bottom: 0.88rem !important;
  }
  .u-margin_left_sm {
    margin-left: 0.88rem !important;
  }
  .u-margin_right_sm, .w-paragraph-number {
    margin-right: 0.88rem !important;
  }
  .u-margin_block_sm {
    margin-block: 0.88rem !important;
  }
  .u-margin_inline_sm {
    margin-inline: 0.88rem !important;
  }
  .u-margin_md {
    margin: 1.76rem !important;
  }
  .u-margin_top_md {
    margin-top: 1.76rem !important;
  }
  .u-margin_bottom_md {
    margin-bottom: 1.76rem !important;
  }
  .u-margin_left_md {
    margin-left: 1.76rem !important;
  }
  .u-margin_right_md {
    margin-right: 1.76rem !important;
  }
  .u-margin_block_md {
    margin-block: 1.76rem !important;
  }
  .u-margin_inline_md {
    margin-inline: 1.76rem !important;
  }
  .u-margin_lg {
    margin: 2.64rem !important;
  }
  .u-margin_top_lg {
    margin-top: 2.64rem !important;
  }
  .u-margin_bottom_lg {
    margin-bottom: 2.64rem !important;
  }
  .u-margin_left_lg {
    margin-left: 2.64rem !important;
  }
  .u-margin_right_lg {
    margin-right: 2.64rem !important;
  }
  .u-margin_block_lg {
    margin-block: 2.64rem !important;
  }
  .u-margin_inline_lg {
    margin-inline: 2.64rem !important;
  }
  .u-margin_xl {
    margin: 4.18rem !important;
  }
  .u-margin_top_xl {
    margin-top: 4.18rem !important;
  }
  .u-margin_bottom_xl {
    margin-bottom: 4.18rem !important;
  }
  .u-margin_left_xl {
    margin-left: 4.18rem !important;
  }
  .u-margin_right_xl {
    margin-right: 4.18rem !important;
  }
  .u-margin_block_xl {
    margin-block: 4.18rem !important;
  }
  .u-margin_inline_xl {
    margin-inline: 4.18rem !important;
  }
}
@media screen and (min-width: 1100px) {
  .u-margin_xxs {
    margin: 0.23rem !important;
  }
  .u-margin_top_xxs {
    margin-top: 0.23rem !important;
  }
  .u-margin_bottom_xxs {
    margin-bottom: 0.23rem !important;
  }
  .u-margin_left_xxs {
    margin-left: 0.23rem !important;
  }
  .u-margin_right_xxs {
    margin-right: 0.23rem !important;
  }
  .u-margin_block_xxs {
    margin-block: 0.23rem !important;
  }
  .u-margin_inline_xxs {
    margin-inline: 0.23rem !important;
  }
  .u-margin_xs {
    margin: 0.46rem !important;
  }
  .u-margin_top_xs {
    margin-top: 0.46rem !important;
  }
  .u-margin_bottom_xs, .c-card__body .w-headline {
    margin-bottom: 0.46rem !important;
  }
  .u-margin_left_xs {
    margin-left: 0.46rem !important;
  }
  .u-margin_right_xs {
    margin-right: 0.46rem !important;
  }
  .u-margin_block_xs {
    margin-block: 0.46rem !important;
  }
  .u-margin_inline_xs {
    margin-inline: 0.46rem !important;
  }
  .u-margin_sm {
    margin: 0.92rem !important;
  }
  .u-margin_top_sm {
    margin-top: 0.92rem !important;
  }
  .u-margin_bottom_sm {
    margin-bottom: 0.92rem !important;
  }
  .u-margin_left_sm {
    margin-left: 0.92rem !important;
  }
  .u-margin_right_sm, .w-paragraph-number {
    margin-right: 0.92rem !important;
  }
  .u-margin_block_sm {
    margin-block: 0.92rem !important;
  }
  .u-margin_inline_sm {
    margin-inline: 0.92rem !important;
  }
  .u-margin_md {
    margin: 1.84rem !important;
  }
  .u-margin_top_md {
    margin-top: 1.84rem !important;
  }
  .u-margin_bottom_md {
    margin-bottom: 1.84rem !important;
  }
  .u-margin_left_md {
    margin-left: 1.84rem !important;
  }
  .u-margin_right_md {
    margin-right: 1.84rem !important;
  }
  .u-margin_block_md {
    margin-block: 1.84rem !important;
  }
  .u-margin_inline_md {
    margin-inline: 1.84rem !important;
  }
  .u-margin_lg {
    margin: 2.76rem !important;
  }
  .u-margin_top_lg {
    margin-top: 2.76rem !important;
  }
  .u-margin_bottom_lg {
    margin-bottom: 2.76rem !important;
  }
  .u-margin_left_lg {
    margin-left: 2.76rem !important;
  }
  .u-margin_right_lg {
    margin-right: 2.76rem !important;
  }
  .u-margin_block_lg {
    margin-block: 2.76rem !important;
  }
  .u-margin_inline_lg {
    margin-inline: 2.76rem !important;
  }
  .u-margin_xl {
    margin: 4.37rem !important;
  }
  .u-margin_top_xl {
    margin-top: 4.37rem !important;
  }
  .u-margin_bottom_xl {
    margin-bottom: 4.37rem !important;
  }
  .u-margin_left_xl {
    margin-left: 4.37rem !important;
  }
  .u-margin_right_xl {
    margin-right: 4.37rem !important;
  }
  .u-margin_block_xl {
    margin-block: 4.37rem !important;
  }
  .u-margin_inline_xl {
    margin-inline: 4.37rem !important;
  }
}
@media screen and (min-width: 1200px) {
  .u-margin_xxs {
    margin: 0.24rem !important;
  }
  .u-margin_top_xxs {
    margin-top: 0.24rem !important;
  }
  .u-margin_bottom_xxs {
    margin-bottom: 0.24rem !important;
  }
  .u-margin_left_xxs {
    margin-left: 0.24rem !important;
  }
  .u-margin_right_xxs {
    margin-right: 0.24rem !important;
  }
  .u-margin_block_xxs {
    margin-block: 0.24rem !important;
  }
  .u-margin_inline_xxs {
    margin-inline: 0.24rem !important;
  }
  .u-margin_xs {
    margin: 0.48rem !important;
  }
  .u-margin_top_xs {
    margin-top: 0.48rem !important;
  }
  .u-margin_bottom_xs, .c-card__body .w-headline {
    margin-bottom: 0.48rem !important;
  }
  .u-margin_left_xs {
    margin-left: 0.48rem !important;
  }
  .u-margin_right_xs {
    margin-right: 0.48rem !important;
  }
  .u-margin_block_xs {
    margin-block: 0.48rem !important;
  }
  .u-margin_inline_xs {
    margin-inline: 0.48rem !important;
  }
  .u-margin_sm {
    margin: 0.96rem !important;
  }
  .u-margin_top_sm {
    margin-top: 0.96rem !important;
  }
  .u-margin_bottom_sm {
    margin-bottom: 0.96rem !important;
  }
  .u-margin_left_sm {
    margin-left: 0.96rem !important;
  }
  .u-margin_right_sm, .w-paragraph-number {
    margin-right: 0.96rem !important;
  }
  .u-margin_block_sm {
    margin-block: 0.96rem !important;
  }
  .u-margin_inline_sm {
    margin-inline: 0.96rem !important;
  }
  .u-margin_md {
    margin: 1.92rem !important;
  }
  .u-margin_top_md {
    margin-top: 1.92rem !important;
  }
  .u-margin_bottom_md {
    margin-bottom: 1.92rem !important;
  }
  .u-margin_left_md {
    margin-left: 1.92rem !important;
  }
  .u-margin_right_md {
    margin-right: 1.92rem !important;
  }
  .u-margin_block_md {
    margin-block: 1.92rem !important;
  }
  .u-margin_inline_md {
    margin-inline: 1.92rem !important;
  }
  .u-margin_lg {
    margin: 2.88rem !important;
  }
  .u-margin_top_lg {
    margin-top: 2.88rem !important;
  }
  .u-margin_bottom_lg {
    margin-bottom: 2.88rem !important;
  }
  .u-margin_left_lg {
    margin-left: 2.88rem !important;
  }
  .u-margin_right_lg {
    margin-right: 2.88rem !important;
  }
  .u-margin_block_lg {
    margin-block: 2.88rem !important;
  }
  .u-margin_inline_lg {
    margin-inline: 2.88rem !important;
  }
  .u-margin_xl {
    margin: 4.56rem !important;
  }
  .u-margin_top_xl {
    margin-top: 4.56rem !important;
  }
  .u-margin_bottom_xl {
    margin-bottom: 4.56rem !important;
  }
  .u-margin_left_xl {
    margin-left: 4.56rem !important;
  }
  .u-margin_right_xl {
    margin-right: 4.56rem !important;
  }
  .u-margin_block_xl {
    margin-block: 4.56rem !important;
  }
  .u-margin_inline_xl {
    margin-inline: 4.56rem !important;
  }
}
@media screen and (min-width: 1536px) {
  .u-margin_xxs {
    margin: 0.24rem !important;
  }
  .u-margin_top_xxs {
    margin-top: 0.24rem !important;
  }
  .u-margin_bottom_xxs {
    margin-bottom: 0.24rem !important;
  }
  .u-margin_left_xxs {
    margin-left: 0.24rem !important;
  }
  .u-margin_right_xxs {
    margin-right: 0.24rem !important;
  }
  .u-margin_block_xxs {
    margin-block: 0.24rem !important;
  }
  .u-margin_inline_xxs {
    margin-inline: 0.24rem !important;
  }
  .u-margin_xs {
    margin: 0.48rem !important;
  }
  .u-margin_top_xs {
    margin-top: 0.48rem !important;
  }
  .u-margin_bottom_xs, .c-card__body .w-headline {
    margin-bottom: 0.48rem !important;
  }
  .u-margin_left_xs {
    margin-left: 0.48rem !important;
  }
  .u-margin_right_xs {
    margin-right: 0.48rem !important;
  }
  .u-margin_block_xs {
    margin-block: 0.48rem !important;
  }
  .u-margin_inline_xs {
    margin-inline: 0.48rem !important;
  }
  .u-margin_sm {
    margin: 0.96rem !important;
  }
  .u-margin_top_sm {
    margin-top: 0.96rem !important;
  }
  .u-margin_bottom_sm {
    margin-bottom: 0.96rem !important;
  }
  .u-margin_left_sm {
    margin-left: 0.96rem !important;
  }
  .u-margin_right_sm, .w-paragraph-number {
    margin-right: 0.96rem !important;
  }
  .u-margin_block_sm {
    margin-block: 0.96rem !important;
  }
  .u-margin_inline_sm {
    margin-inline: 0.96rem !important;
  }
  .u-margin_md {
    margin: 1.92rem !important;
  }
  .u-margin_top_md {
    margin-top: 1.92rem !important;
  }
  .u-margin_bottom_md {
    margin-bottom: 1.92rem !important;
  }
  .u-margin_left_md {
    margin-left: 1.92rem !important;
  }
  .u-margin_right_md {
    margin-right: 1.92rem !important;
  }
  .u-margin_block_md {
    margin-block: 1.92rem !important;
  }
  .u-margin_inline_md {
    margin-inline: 1.92rem !important;
  }
  .u-margin_lg {
    margin: 2.88rem !important;
  }
  .u-margin_top_lg {
    margin-top: 2.88rem !important;
  }
  .u-margin_bottom_lg {
    margin-bottom: 2.88rem !important;
  }
  .u-margin_left_lg {
    margin-left: 2.88rem !important;
  }
  .u-margin_right_lg {
    margin-right: 2.88rem !important;
  }
  .u-margin_block_lg {
    margin-block: 2.88rem !important;
  }
  .u-margin_inline_lg {
    margin-inline: 2.88rem !important;
  }
  .u-margin_xl {
    margin: 4.56rem !important;
  }
  .u-margin_top_xl {
    margin-top: 4.56rem !important;
  }
  .u-margin_bottom_xl {
    margin-bottom: 4.56rem !important;
  }
  .u-margin_left_xl {
    margin-left: 4.56rem !important;
  }
  .u-margin_right_xl {
    margin-right: 4.56rem !important;
  }
  .u-margin_block_xl {
    margin-block: 4.56rem !important;
  }
  .u-margin_inline_xl {
    margin-inline: 4.56rem !important;
  }
}
.u-no-margin {
  margin: 0 !important;
}

.u-margin_top--2px {
  margin-top: -2px !important;
}

.u-padding_xxs {
  padding: 0.2rem !important;
}
.u-padding_top_xxs {
  padding-top: 0.2rem !important;
}
.u-padding_bottom_xxs {
  padding-bottom: 0.2rem !important;
}
.u-padding_left_xxs {
  padding-left: 0.2rem !important;
}
.u-padding_right_xxs {
  padding-right: 0.2rem !important;
}
.u-padding_block_xxs {
  padding-block: 0.2rem !important;
}
.u-padding_inline_xxs {
  padding-inline: 0.2rem !important;
}
.u-padding_xs, .c-note__header {
  padding: 0.4rem !important;
}
.u-padding_top_xs {
  padding-top: 0.4rem !important;
}
.u-padding_bottom_xs, .c-card__header {
  padding-bottom: 0.4rem !important;
}
.u-padding_left_xs {
  padding-left: 0.4rem !important;
}
.u-padding_right_xs {
  padding-right: 0.4rem !important;
}
.u-padding_block_xs {
  padding-block: 0.4rem !important;
}
.u-padding_inline_xs {
  padding-inline: 0.4rem !important;
}
.u-padding_sm, .c-alert {
  padding: 0.8rem !important;
}
.u-padding_top_sm {
  padding-top: 0.8rem !important;
}
.u-padding_bottom_sm {
  padding-bottom: 0.8rem !important;
}
.u-padding_left_sm {
  padding-left: 0.8rem !important;
}
.u-padding_right_sm {
  padding-right: 0.8rem !important;
}
.u-padding_block_sm {
  padding-block: 0.8rem !important;
}
.u-padding_inline_sm {
  padding-inline: 0.8rem !important;
}
.u-padding_md, .c-table td,
.c-table th, .c-navbar__search .c-navbar__item, .c-card__footer {
  padding: 1.6rem !important;
}
.u-padding_top_md, .c-root__main-header {
  padding-top: 1.6rem !important;
}
.u-padding_bottom_md, .c-root__main-header {
  padding-bottom: 1.6rem !important;
}
.u-padding_left_md {
  padding-left: 1.6rem !important;
}
.u-padding_right_md {
  padding-right: 1.6rem !important;
}
.u-padding_block_md {
  padding-block: 1.6rem !important;
}
.u-padding_inline_md {
  padding-inline: 1.6rem !important;
}
.u-padding_lg {
  padding: 2.4rem !important;
}
.u-padding_top_lg {
  padding-top: 2.4rem !important;
}
.u-padding_bottom_lg {
  padding-bottom: 2.4rem !important;
}
.u-padding_left_lg {
  padding-left: 2.4rem !important;
}
.u-padding_right_lg {
  padding-right: 2.4rem !important;
}
.u-padding_block_lg {
  padding-block: 2.4rem !important;
}
.u-padding_inline_lg {
  padding-inline: 2.4rem !important;
}
.u-padding_xl {
  padding: 3.8rem !important;
}
.u-padding_top_xl {
  padding-top: 3.8rem !important;
}
.u-padding_bottom_xl {
  padding-bottom: 3.8rem !important;
}
.u-padding_left_xl {
  padding-left: 3.8rem !important;
}
.u-padding_right_xl {
  padding-right: 3.8rem !important;
}
.u-padding_block_xl {
  padding-block: 3.8rem !important;
}
.u-padding_inline_xl {
  padding-inline: 3.8rem !important;
}

@media screen and (min-width: 360px) {
  .u-padding_xxs {
    padding: 0.2rem !important;
  }
  .u-padding_top_xxs {
    padding-top: 0.2rem !important;
  }
  .u-padding_bottom_xxs {
    padding-bottom: 0.2rem !important;
  }
  .u-padding_left_xxs {
    padding-left: 0.2rem !important;
  }
  .u-padding_right_xxs {
    padding-right: 0.2rem !important;
  }
  .u-padding_block_xxs {
    padding-block: 0.2rem !important;
  }
  .u-padding_inline_xxs {
    padding-inline: 0.2rem !important;
  }
  .u-padding_xs, .c-note__header {
    padding: 0.4rem !important;
  }
  .u-padding_top_xs {
    padding-top: 0.4rem !important;
  }
  .u-padding_bottom_xs, .c-card__header {
    padding-bottom: 0.4rem !important;
  }
  .u-padding_left_xs {
    padding-left: 0.4rem !important;
  }
  .u-padding_right_xs {
    padding-right: 0.4rem !important;
  }
  .u-padding_block_xs {
    padding-block: 0.4rem !important;
  }
  .u-padding_inline_xs {
    padding-inline: 0.4rem !important;
  }
  .u-padding_sm, .c-alert {
    padding: 0.8rem !important;
  }
  .u-padding_top_sm {
    padding-top: 0.8rem !important;
  }
  .u-padding_bottom_sm {
    padding-bottom: 0.8rem !important;
  }
  .u-padding_left_sm {
    padding-left: 0.8rem !important;
  }
  .u-padding_right_sm {
    padding-right: 0.8rem !important;
  }
  .u-padding_block_sm {
    padding-block: 0.8rem !important;
  }
  .u-padding_inline_sm {
    padding-inline: 0.8rem !important;
  }
  .u-padding_md, .c-table td,
  .c-table th, .c-navbar__search .c-navbar__item, .c-card__footer {
    padding: 1.6rem !important;
  }
  .u-padding_top_md, .c-root__main-header {
    padding-top: 1.6rem !important;
  }
  .u-padding_bottom_md, .c-root__main-header {
    padding-bottom: 1.6rem !important;
  }
  .u-padding_left_md {
    padding-left: 1.6rem !important;
  }
  .u-padding_right_md {
    padding-right: 1.6rem !important;
  }
  .u-padding_block_md {
    padding-block: 1.6rem !important;
  }
  .u-padding_inline_md {
    padding-inline: 1.6rem !important;
  }
  .u-padding_lg {
    padding: 2.4rem !important;
  }
  .u-padding_top_lg {
    padding-top: 2.4rem !important;
  }
  .u-padding_bottom_lg {
    padding-bottom: 2.4rem !important;
  }
  .u-padding_left_lg {
    padding-left: 2.4rem !important;
  }
  .u-padding_right_lg {
    padding-right: 2.4rem !important;
  }
  .u-padding_block_lg {
    padding-block: 2.4rem !important;
  }
  .u-padding_inline_lg {
    padding-inline: 2.4rem !important;
  }
  .u-padding_xl {
    padding: 3.8rem !important;
  }
  .u-padding_top_xl {
    padding-top: 3.8rem !important;
  }
  .u-padding_bottom_xl {
    padding-bottom: 3.8rem !important;
  }
  .u-padding_left_xl {
    padding-left: 3.8rem !important;
  }
  .u-padding_right_xl {
    padding-right: 3.8rem !important;
  }
  .u-padding_block_xl {
    padding-block: 3.8rem !important;
  }
  .u-padding_inline_xl {
    padding-inline: 3.8rem !important;
  }
}
@media screen and (min-width: 480px) {
  .u-padding_xxs {
    padding: 0.21rem !important;
  }
  .u-padding_top_xxs {
    padding-top: 0.21rem !important;
  }
  .u-padding_bottom_xxs {
    padding-bottom: 0.21rem !important;
  }
  .u-padding_left_xxs {
    padding-left: 0.21rem !important;
  }
  .u-padding_right_xxs {
    padding-right: 0.21rem !important;
  }
  .u-padding_block_xxs {
    padding-block: 0.21rem !important;
  }
  .u-padding_inline_xxs {
    padding-inline: 0.21rem !important;
  }
  .u-padding_xs, .c-note__header {
    padding: 0.42rem !important;
  }
  .u-padding_top_xs {
    padding-top: 0.42rem !important;
  }
  .u-padding_bottom_xs, .c-card__header {
    padding-bottom: 0.42rem !important;
  }
  .u-padding_left_xs {
    padding-left: 0.42rem !important;
  }
  .u-padding_right_xs {
    padding-right: 0.42rem !important;
  }
  .u-padding_block_xs {
    padding-block: 0.42rem !important;
  }
  .u-padding_inline_xs {
    padding-inline: 0.42rem !important;
  }
  .u-padding_sm, .c-alert {
    padding: 0.84rem !important;
  }
  .u-padding_top_sm {
    padding-top: 0.84rem !important;
  }
  .u-padding_bottom_sm {
    padding-bottom: 0.84rem !important;
  }
  .u-padding_left_sm {
    padding-left: 0.84rem !important;
  }
  .u-padding_right_sm {
    padding-right: 0.84rem !important;
  }
  .u-padding_block_sm {
    padding-block: 0.84rem !important;
  }
  .u-padding_inline_sm {
    padding-inline: 0.84rem !important;
  }
  .u-padding_md, .c-table td,
  .c-table th, .c-navbar__search .c-navbar__item, .c-card__footer {
    padding: 1.68rem !important;
  }
  .u-padding_top_md, .c-root__main-header {
    padding-top: 1.68rem !important;
  }
  .u-padding_bottom_md, .c-root__main-header {
    padding-bottom: 1.68rem !important;
  }
  .u-padding_left_md {
    padding-left: 1.68rem !important;
  }
  .u-padding_right_md {
    padding-right: 1.68rem !important;
  }
  .u-padding_block_md {
    padding-block: 1.68rem !important;
  }
  .u-padding_inline_md {
    padding-inline: 1.68rem !important;
  }
  .u-padding_lg {
    padding: 2.52rem !important;
  }
  .u-padding_top_lg {
    padding-top: 2.52rem !important;
  }
  .u-padding_bottom_lg {
    padding-bottom: 2.52rem !important;
  }
  .u-padding_left_lg {
    padding-left: 2.52rem !important;
  }
  .u-padding_right_lg {
    padding-right: 2.52rem !important;
  }
  .u-padding_block_lg {
    padding-block: 2.52rem !important;
  }
  .u-padding_inline_lg {
    padding-inline: 2.52rem !important;
  }
  .u-padding_xl {
    padding: 3.99rem !important;
  }
  .u-padding_top_xl {
    padding-top: 3.99rem !important;
  }
  .u-padding_bottom_xl {
    padding-bottom: 3.99rem !important;
  }
  .u-padding_left_xl {
    padding-left: 3.99rem !important;
  }
  .u-padding_right_xl {
    padding-right: 3.99rem !important;
  }
  .u-padding_block_xl {
    padding-block: 3.99rem !important;
  }
  .u-padding_inline_xl {
    padding-inline: 3.99rem !important;
  }
}
@media screen and (min-width: 768px) {
  .u-padding_xxs {
    padding: 0.22rem !important;
  }
  .u-padding_top_xxs {
    padding-top: 0.22rem !important;
  }
  .u-padding_bottom_xxs {
    padding-bottom: 0.22rem !important;
  }
  .u-padding_left_xxs {
    padding-left: 0.22rem !important;
  }
  .u-padding_right_xxs {
    padding-right: 0.22rem !important;
  }
  .u-padding_block_xxs {
    padding-block: 0.22rem !important;
  }
  .u-padding_inline_xxs {
    padding-inline: 0.22rem !important;
  }
  .u-padding_xs, .c-note__header {
    padding: 0.44rem !important;
  }
  .u-padding_top_xs {
    padding-top: 0.44rem !important;
  }
  .u-padding_bottom_xs, .c-card__header {
    padding-bottom: 0.44rem !important;
  }
  .u-padding_left_xs {
    padding-left: 0.44rem !important;
  }
  .u-padding_right_xs {
    padding-right: 0.44rem !important;
  }
  .u-padding_block_xs {
    padding-block: 0.44rem !important;
  }
  .u-padding_inline_xs {
    padding-inline: 0.44rem !important;
  }
  .u-padding_sm, .c-alert {
    padding: 0.88rem !important;
  }
  .u-padding_top_sm {
    padding-top: 0.88rem !important;
  }
  .u-padding_bottom_sm {
    padding-bottom: 0.88rem !important;
  }
  .u-padding_left_sm {
    padding-left: 0.88rem !important;
  }
  .u-padding_right_sm {
    padding-right: 0.88rem !important;
  }
  .u-padding_block_sm {
    padding-block: 0.88rem !important;
  }
  .u-padding_inline_sm {
    padding-inline: 0.88rem !important;
  }
  .u-padding_md, .c-table td,
  .c-table th, .c-navbar__search .c-navbar__item, .c-card__footer {
    padding: 1.76rem !important;
  }
  .u-padding_top_md, .c-root__main-header {
    padding-top: 1.76rem !important;
  }
  .u-padding_bottom_md, .c-root__main-header {
    padding-bottom: 1.76rem !important;
  }
  .u-padding_left_md {
    padding-left: 1.76rem !important;
  }
  .u-padding_right_md {
    padding-right: 1.76rem !important;
  }
  .u-padding_block_md {
    padding-block: 1.76rem !important;
  }
  .u-padding_inline_md {
    padding-inline: 1.76rem !important;
  }
  .u-padding_lg {
    padding: 2.64rem !important;
  }
  .u-padding_top_lg {
    padding-top: 2.64rem !important;
  }
  .u-padding_bottom_lg {
    padding-bottom: 2.64rem !important;
  }
  .u-padding_left_lg {
    padding-left: 2.64rem !important;
  }
  .u-padding_right_lg {
    padding-right: 2.64rem !important;
  }
  .u-padding_block_lg {
    padding-block: 2.64rem !important;
  }
  .u-padding_inline_lg {
    padding-inline: 2.64rem !important;
  }
  .u-padding_xl {
    padding: 4.18rem !important;
  }
  .u-padding_top_xl {
    padding-top: 4.18rem !important;
  }
  .u-padding_bottom_xl {
    padding-bottom: 4.18rem !important;
  }
  .u-padding_left_xl {
    padding-left: 4.18rem !important;
  }
  .u-padding_right_xl {
    padding-right: 4.18rem !important;
  }
  .u-padding_block_xl {
    padding-block: 4.18rem !important;
  }
  .u-padding_inline_xl {
    padding-inline: 4.18rem !important;
  }
}
@media screen and (min-width: 1100px) {
  .u-padding_xxs {
    padding: 0.23rem !important;
  }
  .u-padding_top_xxs {
    padding-top: 0.23rem !important;
  }
  .u-padding_bottom_xxs {
    padding-bottom: 0.23rem !important;
  }
  .u-padding_left_xxs {
    padding-left: 0.23rem !important;
  }
  .u-padding_right_xxs {
    padding-right: 0.23rem !important;
  }
  .u-padding_block_xxs {
    padding-block: 0.23rem !important;
  }
  .u-padding_inline_xxs {
    padding-inline: 0.23rem !important;
  }
  .u-padding_xs, .c-note__header {
    padding: 0.46rem !important;
  }
  .u-padding_top_xs {
    padding-top: 0.46rem !important;
  }
  .u-padding_bottom_xs, .c-card__header {
    padding-bottom: 0.46rem !important;
  }
  .u-padding_left_xs {
    padding-left: 0.46rem !important;
  }
  .u-padding_right_xs {
    padding-right: 0.46rem !important;
  }
  .u-padding_block_xs {
    padding-block: 0.46rem !important;
  }
  .u-padding_inline_xs {
    padding-inline: 0.46rem !important;
  }
  .u-padding_sm, .c-alert {
    padding: 0.92rem !important;
  }
  .u-padding_top_sm {
    padding-top: 0.92rem !important;
  }
  .u-padding_bottom_sm {
    padding-bottom: 0.92rem !important;
  }
  .u-padding_left_sm {
    padding-left: 0.92rem !important;
  }
  .u-padding_right_sm {
    padding-right: 0.92rem !important;
  }
  .u-padding_block_sm {
    padding-block: 0.92rem !important;
  }
  .u-padding_inline_sm {
    padding-inline: 0.92rem !important;
  }
  .u-padding_md, .c-table td,
  .c-table th, .c-navbar__search .c-navbar__item, .c-card__footer {
    padding: 1.84rem !important;
  }
  .u-padding_top_md, .c-root__main-header {
    padding-top: 1.84rem !important;
  }
  .u-padding_bottom_md, .c-root__main-header {
    padding-bottom: 1.84rem !important;
  }
  .u-padding_left_md {
    padding-left: 1.84rem !important;
  }
  .u-padding_right_md {
    padding-right: 1.84rem !important;
  }
  .u-padding_block_md {
    padding-block: 1.84rem !important;
  }
  .u-padding_inline_md {
    padding-inline: 1.84rem !important;
  }
  .u-padding_lg {
    padding: 2.76rem !important;
  }
  .u-padding_top_lg {
    padding-top: 2.76rem !important;
  }
  .u-padding_bottom_lg {
    padding-bottom: 2.76rem !important;
  }
  .u-padding_left_lg {
    padding-left: 2.76rem !important;
  }
  .u-padding_right_lg {
    padding-right: 2.76rem !important;
  }
  .u-padding_block_lg {
    padding-block: 2.76rem !important;
  }
  .u-padding_inline_lg {
    padding-inline: 2.76rem !important;
  }
  .u-padding_xl {
    padding: 4.37rem !important;
  }
  .u-padding_top_xl {
    padding-top: 4.37rem !important;
  }
  .u-padding_bottom_xl {
    padding-bottom: 4.37rem !important;
  }
  .u-padding_left_xl {
    padding-left: 4.37rem !important;
  }
  .u-padding_right_xl {
    padding-right: 4.37rem !important;
  }
  .u-padding_block_xl {
    padding-block: 4.37rem !important;
  }
  .u-padding_inline_xl {
    padding-inline: 4.37rem !important;
  }
}
@media screen and (min-width: 1200px) {
  .u-padding_xxs {
    padding: 0.24rem !important;
  }
  .u-padding_top_xxs {
    padding-top: 0.24rem !important;
  }
  .u-padding_bottom_xxs {
    padding-bottom: 0.24rem !important;
  }
  .u-padding_left_xxs {
    padding-left: 0.24rem !important;
  }
  .u-padding_right_xxs {
    padding-right: 0.24rem !important;
  }
  .u-padding_block_xxs {
    padding-block: 0.24rem !important;
  }
  .u-padding_inline_xxs {
    padding-inline: 0.24rem !important;
  }
  .u-padding_xs, .c-note__header {
    padding: 0.48rem !important;
  }
  .u-padding_top_xs {
    padding-top: 0.48rem !important;
  }
  .u-padding_bottom_xs, .c-card__header {
    padding-bottom: 0.48rem !important;
  }
  .u-padding_left_xs {
    padding-left: 0.48rem !important;
  }
  .u-padding_right_xs {
    padding-right: 0.48rem !important;
  }
  .u-padding_block_xs {
    padding-block: 0.48rem !important;
  }
  .u-padding_inline_xs {
    padding-inline: 0.48rem !important;
  }
  .u-padding_sm, .c-alert {
    padding: 0.96rem !important;
  }
  .u-padding_top_sm {
    padding-top: 0.96rem !important;
  }
  .u-padding_bottom_sm {
    padding-bottom: 0.96rem !important;
  }
  .u-padding_left_sm {
    padding-left: 0.96rem !important;
  }
  .u-padding_right_sm {
    padding-right: 0.96rem !important;
  }
  .u-padding_block_sm {
    padding-block: 0.96rem !important;
  }
  .u-padding_inline_sm {
    padding-inline: 0.96rem !important;
  }
  .u-padding_md, .c-table td,
  .c-table th, .c-navbar__search .c-navbar__item, .c-card__footer {
    padding: 1.92rem !important;
  }
  .u-padding_top_md, .c-root__main-header {
    padding-top: 1.92rem !important;
  }
  .u-padding_bottom_md, .c-root__main-header {
    padding-bottom: 1.92rem !important;
  }
  .u-padding_left_md {
    padding-left: 1.92rem !important;
  }
  .u-padding_right_md {
    padding-right: 1.92rem !important;
  }
  .u-padding_block_md {
    padding-block: 1.92rem !important;
  }
  .u-padding_inline_md {
    padding-inline: 1.92rem !important;
  }
  .u-padding_lg {
    padding: 2.88rem !important;
  }
  .u-padding_top_lg {
    padding-top: 2.88rem !important;
  }
  .u-padding_bottom_lg {
    padding-bottom: 2.88rem !important;
  }
  .u-padding_left_lg {
    padding-left: 2.88rem !important;
  }
  .u-padding_right_lg {
    padding-right: 2.88rem !important;
  }
  .u-padding_block_lg {
    padding-block: 2.88rem !important;
  }
  .u-padding_inline_lg {
    padding-inline: 2.88rem !important;
  }
  .u-padding_xl {
    padding: 4.56rem !important;
  }
  .u-padding_top_xl {
    padding-top: 4.56rem !important;
  }
  .u-padding_bottom_xl {
    padding-bottom: 4.56rem !important;
  }
  .u-padding_left_xl {
    padding-left: 4.56rem !important;
  }
  .u-padding_right_xl {
    padding-right: 4.56rem !important;
  }
  .u-padding_block_xl {
    padding-block: 4.56rem !important;
  }
  .u-padding_inline_xl {
    padding-inline: 4.56rem !important;
  }
}
@media screen and (min-width: 1536px) {
  .u-padding_xxs {
    padding: 0.24rem !important;
  }
  .u-padding_top_xxs {
    padding-top: 0.24rem !important;
  }
  .u-padding_bottom_xxs {
    padding-bottom: 0.24rem !important;
  }
  .u-padding_left_xxs {
    padding-left: 0.24rem !important;
  }
  .u-padding_right_xxs {
    padding-right: 0.24rem !important;
  }
  .u-padding_block_xxs {
    padding-block: 0.24rem !important;
  }
  .u-padding_inline_xxs {
    padding-inline: 0.24rem !important;
  }
  .u-padding_xs, .c-note__header {
    padding: 0.48rem !important;
  }
  .u-padding_top_xs {
    padding-top: 0.48rem !important;
  }
  .u-padding_bottom_xs, .c-card__header {
    padding-bottom: 0.48rem !important;
  }
  .u-padding_left_xs {
    padding-left: 0.48rem !important;
  }
  .u-padding_right_xs {
    padding-right: 0.48rem !important;
  }
  .u-padding_block_xs {
    padding-block: 0.48rem !important;
  }
  .u-padding_inline_xs {
    padding-inline: 0.48rem !important;
  }
  .u-padding_sm, .c-alert {
    padding: 0.96rem !important;
  }
  .u-padding_top_sm {
    padding-top: 0.96rem !important;
  }
  .u-padding_bottom_sm {
    padding-bottom: 0.96rem !important;
  }
  .u-padding_left_sm {
    padding-left: 0.96rem !important;
  }
  .u-padding_right_sm {
    padding-right: 0.96rem !important;
  }
  .u-padding_block_sm {
    padding-block: 0.96rem !important;
  }
  .u-padding_inline_sm {
    padding-inline: 0.96rem !important;
  }
  .u-padding_md, .c-table td,
  .c-table th, .c-navbar__search .c-navbar__item, .c-card__footer {
    padding: 1.92rem !important;
  }
  .u-padding_top_md, .c-root__main-header {
    padding-top: 1.92rem !important;
  }
  .u-padding_bottom_md, .c-root__main-header {
    padding-bottom: 1.92rem !important;
  }
  .u-padding_left_md {
    padding-left: 1.92rem !important;
  }
  .u-padding_right_md {
    padding-right: 1.92rem !important;
  }
  .u-padding_block_md {
    padding-block: 1.92rem !important;
  }
  .u-padding_inline_md {
    padding-inline: 1.92rem !important;
  }
  .u-padding_lg {
    padding: 2.88rem !important;
  }
  .u-padding_top_lg {
    padding-top: 2.88rem !important;
  }
  .u-padding_bottom_lg {
    padding-bottom: 2.88rem !important;
  }
  .u-padding_left_lg {
    padding-left: 2.88rem !important;
  }
  .u-padding_right_lg {
    padding-right: 2.88rem !important;
  }
  .u-padding_block_lg {
    padding-block: 2.88rem !important;
  }
  .u-padding_inline_lg {
    padding-inline: 2.88rem !important;
  }
  .u-padding_xl {
    padding: 4.56rem !important;
  }
  .u-padding_top_xl {
    padding-top: 4.56rem !important;
  }
  .u-padding_bottom_xl {
    padding-bottom: 4.56rem !important;
  }
  .u-padding_left_xl {
    padding-left: 4.56rem !important;
  }
  .u-padding_right_xl {
    padding-right: 4.56rem !important;
  }
  .u-padding_block_xl {
    padding-block: 4.56rem !important;
  }
  .u-padding_inline_xl {
    padding-inline: 4.56rem !important;
  }
}
.u-no-padding {
  padding: 0 !important;
}

.u-bg-error {
  background-color: #f44336 !important;
}

.u-bg-blue-grey-darken-4 {
  background-color: #263238 !important;
}

.u-bg-green-lighten-5 {
  background-color: #e8f5e9 !important;
}

.u-bg-grey-lighten-5 {
  background-color: #fafafa !important;
}

.u-bg-red-lighten-5 {
  background-color: #ffebee !important;
}

.u-bg-red-darken-2 {
  background-color: #d32f2f !important;
}

.u-bg-red-darken-3 {
  background-color: #c62828 !important;
}

.u-bg-red-darken-4 {
  background-color: #b71c1c !important;
}

.u-bg-grey-lighten-4 {
  background-color: #f5f5f5 !important;
}

.u-bg-blue-lighten-4 {
  background-color: #bbdefb !important;
}

.u-bg-blue-lighten-5 {
  background-color: #e3f2fd !important;
}

.u-bg-yellow {
  background-color: #ffeb3b !important;
}

.u-bg-yellow-lighten-5 {
  background-color: #fffde7 !important;
}

.u-bg-redacted {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3e%3cpath d='M-1,1 l2,-2 M0,20 l20,-20 M19,21 l2,-2' stroke='rgba(0,0,0,0.1)' stroke-width='1'/%3e%3c/svg%3e") !important;
}

.u-border-0 {
  border: 0 !important;
}

.u-border-2px {
  border: 2px solid !important;
}

.u-border-error {
  border-color: #f44336 !important;
}

.u-border-color-yellow-base {
  border-color: #ffeb3b !important;
}

.u-border-success {
  border-color: #4caf50 !important;
}

.u-border-error {
  border-color: #f44336 !important;
}

.u-c-error {
  color: #f44336 !important;
}

.u-c-white {
  color: #fff !important;
}

.u-c-grey {
  color: #9e9e9e !important;
}

.u-c-blue-darken-4 {
  color: #0d47a1 !important;
}

.u-d-block {
  display: block !important;
}

.u-d-none {
  display: none !important;
}

.u-d-flex {
  display: flex !important;
}

.u-d-inline-flex {
  display: inline-flex !important;
}

@media screen and (min-width: 480px) {
  .xs\:u-d-none {
    display: none !important;
  }
  .xs\:u-d-block {
    display: block !important;
  }
  .xs\:u-d-flex {
    display: flex !important;
  }
}
@media screen and (min-width: 768px) {
  .sm\:u-d-none {
    display: none !important;
  }
  .sm\:u-d-inline {
    display: inline !important;
  }
  .sm\:u-d-flex {
    display: flex !important;
  }
  .sm\:u-d-block {
    display: block !important;
  }
}
@media screen and (min-width: 1100px) {
  .md\:u-d-none {
    display: none !important;
  }
  .md\:u-d-inline {
    display: inline !important;
  }
  .md\:u-d-flex {
    display: flex !important;
  }
}
@media screen and (min-width: 1200px) {
  .lg\:u-d-flex {
    display: flex !important;
  }
}
.u-flex-column {
  flex-direction: column !important;
}

.u-flex-wrap {
  flex-wrap: wrap !important;
}

.u-flex-shrink-0 {
  flex-shrink: 0 !important;
}

.u-flex-grow-1 {
  flex-grow: 1 !important;
}

.u-flex-120px {
  flex: 120px !important;
}

.u-flex-30pct {
  flex: 0 0 30% !important;
}

.u-flex-40pct {
  flex: 0 0 40% !important;
}

.u-flex-50pct {
  flex: 0 0 50% !important;
}

.u-flex-60pct {
  flex: 0 0 60% !important;
}

.u-flex-70pct {
  flex: 0 0 70% !important;
}

.u-flex-100pct {
  flex: 0 0 100% !important;
}

.u-justify-content-center {
  justify-content: center !important;
}

.u-justify-content-center {
  justify-content: center !important;
}

.u-justify-content-between {
  justify-content: space-between !important;
}

.u-align-items-center {
  align-items: center !important;
}

.u-align-items-baseline {
  align-items: baseline !important;
}

.u-gap-xs {
  gap: 0.4rem !important;
}

.u-gap-sm {
  gap: 0.8rem !important;
}

.u-gap-md {
  gap: 1.6rem !important;
}

@media screen and (min-width: 480px) {
  .xs\:u-flex-50pct {
    flex: 0 0 50% !important;
  }
  .xs\:u-flex-nowrap {
    flex-wrap: nowrap !important;
  }
}
@media screen and (min-width: 768px) {
  .sm\:u-flex-nowrap {
    flex-wrap: nowrap !important;
  }
  .sm\:u-gap-md {
    gap: 1.6rem !important;
  }
  .sm\:u-flex-40pct {
    flex: 0 0 40% !important;
  }
  .sm\:u-flex-50pct {
    flex: 0 0 50% !important;
  }
  .sm\:u-flex-60pct {
    flex: 0 0 60% !important;
  }
}
@media screen and (min-width: 1100px) {
  .md\:u-gap-md {
    gap: 1.6rem !important;
  }
  .md\:u-flex-30pct {
    flex: 0 0 30% !important;
  }
  .md\:u-flex-40pct {
    flex: 0 0 40% !important;
  }
  .md\:u-flex-70pct {
    flex: 0 0 70% !important;
  }
}
/**
 * Screen reader only.
 */
.u-cursor-help {
  cursor: help !important;
}

.u-scroll-margin-top-60 {
  scroll-margin-top: 60px !important;
}

/**
 * Screen reader only.
 */
.u-invisible, .u-invisible-on-mobile {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap; /* Prevents breaks for inline elements */
  width: 1px !important;
}

.u-visible {
  clip: auto !important;
  border: 0 !important;
  clip-path: none !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: static !important;
  white-space: normal !important;
  width: auto !important;
}

.u-visually-disabled {
  opacity: 0.5;
}

@media screen and (min-width: 768px) {
  .u-invisible-on-mobile {
    clip: auto !important;
    border: 0 !important;
    clip-path: none !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    position: static !important;
    white-space: normal !important;
    width: auto !important;
  }
}

.u-position-sticky {
  position: sticky !important;
}

.u-position-relative {
  position: relative !important;
}

.u-right-0 {
  right: 0 !important;
}

.u-left-0 {
  left: 0 !important;
}

.u-top-46px {
  top: 46px !important;
}

.u-top-56px {
  top: 56px !important;
}

.u-w-30pct {
  width: 30% !important;
}

.u-w-40pct {
  width: 40% !important;
}

.u-w-50pct {
  width: 50% !important;
}

.u-w-60pct {
  width: 60% !important;
}

.u-w-70pct {
  width: 70% !important;
}

.u-w-100pct {
  width: 100% !important;
}

.u-w-30px {
  width: 30px !important;
}

.u-w-80px {
  width: 80px !important;
}

.u-w-100px {
  width: 100px !important;
}

.u-w-180px {
  width: 180px !important;
}

.u-w-240px {
  width: 240px !important;
}

.u-w-280px {
  width: 280px !important;
}

.u-w-320px {
  width: 320px !important;
}

.u-w-380px {
  width: 380px !important;
}

.u-max-w-280px {
  max-width: 280px !important;
}

.u-max-w-465px {
  max-width: 465px !important;
}

@media screen and (min-width: 480px) {
  .xs\:u-w-30pct {
    width: 30% !important;
  }
  .xs\:u-w-40pct {
    width: 40% !important;
  }
  .xs\:u-w-50pct {
    width: 50% !important;
  }
  .xs\:u-w-60pct {
    width: 60% !important;
  }
  .xs\:u-w-70pct {
    width: 70% !important;
  }
}
.u-text-muted, .w-form-label_floating, textarea.w-form-control::placeholder {
  color: #757575 !important;
}

.u-text-uppercase {
  text-transform: uppercase !important;
}

.u-font-mono {
  font-family: "Fira Code", sans-serif;
}

.u-fw-normal {
  font-weight: normal !important;
}

.u-fw-bold {
  font-weight: bold !important;
}

.u-text-decoration-line-through {
  text-decoration: line-through !important;
}

.u-word-spacing-sm {
  word-spacing: -0.26em !important;
}

.u-z-10 {
  z-index: 10 !important;
}

/**
 * BASE
 *
 * Base styles define global settings like fonts, animations, and resets.
 * These are the foundational styles that affect the entire application.
 *
 * Key characteristics:
 * - No classes, only global CSS rules
 * - Font imports and @font-face declarations
 * - @keyframes animations
 * - Global resets and normalizations
 *
 * CONTENTS:
 * - Animations ............. Keyframe animations (@keyframes)
 * - Fonts .................. Font imports and @font-face declarations
 *
 */
@keyframes fadeIn {
  from {
    scale: 0.9;
    opacity: 0;
  }
  to {
    scale: 1;
    opacity: 1;
  }
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* roboto-condensed-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto-condensed-v27-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/roboto-condensed-v27-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto-v30-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/roboto-v47-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/roboto-v30-latin-italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/roboto-v30-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-code-regular */
@font-face {
  font-family: "Fira Code";
  src: url("../fonts/FiraCode-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
/**
 * ELEMENTS
 *
 * Elements define the base styling for raw HTML elements (h1, p, a, button, input, etc.).
 * These styles ensure a consistent look across the project without relying on classes.
 *
 * Key characteristics:
 * - Elements apply directly to standard HTML tags (no classes needed)
 * - They do **not** define layout or positioning
 * - They serve as the foundation for typography, forms, and other basic styles
 * - Element styles provide sensible defaults that can be overridden by widgets/components
 *
 * CONTENTS:
 * - Grouping ............... Grouping elements (hr, etc.)
 * - Link ................... Link elements (a)
 * - List ................... List elements (ul, ol, dl)
 * - Nav .................... Navigation elements (nav)
 * - Form ................... Form elements (input, textarea, select, button)
 * - Pseudo ................. Pseudo-element styles (::before, ::after)
 * - Root ................... Root element styles (:root, *, html, body)
 * - Text ................... Text elements (p, span, small)
 *
 */
hr {
  margin: 0;
  opacity: 1;
}

a {
  color: #212121;
  text-decoration: none;
}
a:hover {
  color: inherit;
}

ul,
ol {
  padding-left: 1.6rem;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  /* 1 */
  box-sizing: border-box;
  /* 2 */
  padding: 0;
}

fieldset {
  margin: 0;
  border: none;
  padding: 0;
}

legend {
  padding: 0;
}

input,
select,
textarea {
  margin: 0;
  box-shadow: none;
  border: none;
  background-color: transparent;
  color: inherit;
  font-size: 100%;
  line-height: 1.15;
  font-family: inherit;
}

button {
  all: unset;
}

input {
  overflow: visible;
}

select {
  /* Remove standard arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cGF0aCBkPSJNMTIuNzggNS4yMmEuNzQ5Ljc0OSAwIDAgMSAwIDEuMDZsLTQuMjUgNC4yNWEuNzQ5Ljc0OSAwIDAgMS0xLjA2IDBMMy4yMiA2LjI4YS43NDkuNzQ5IDAgMSAxIDEuMDYtMS4wNkw4IDguOTM5bDMuNzItMy43MTlhLjc0OS43NDkgMCAwIDEgMS4wNiAwWiIgLz48L3N2Zz4=");
  background-position: right 0.4rem center;
  background-repeat: no-repeat;
  padding-right: 2.4rem !important;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
  background: none;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

textarea {
  overflow: auto;
  resize: none;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 */
::selection {
  background: rgba(253, 216, 53, 0.5);
  text-shadow: none;
}

:focus,
:focus-visible {
  outline: 0;
}

/*
 * Is triggered when the browser recognizes that the focus should be visibly highlighted
 * (e.g. when navigating with the keyboard).
 */
:focus-visible {
  box-shadow: 0 0 2px 2px #90caf9;
}

:disabled {
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
}

/**
 * Global variables
 * Defined in /settings
 *
 * CSS variables can be easily read and modified by JavaScript. This enables seamless interaction between stylesheets and scripts,
 * which is very useful in the development of interactive and dynamic web applications.
 */
:root {
  /**
   * Breakpoints for responsive design
   * These custom properties can be accessed via JavaScript or Blazor for dynamic adjustments.
   *
   * Usage in JavaScript:
   * ```js
   * function getBreakpointValue(breakpoint) {
   *   return getComputedStyle(document.documentElement).getPropertyValue(breakpoint);
   * }
   * ```
   *
   * Usage in Blazor (using JS Interop):
   * ```csharp
   * public async Task<string> GetBreakpointValue(string breakpoint) {
   *   return await JSRuntime.InvokeAsync<string>("getBreakpointValue", breakpoint);
   * }
   * ```
   *
   */
  --color-annotation-author: #0d47a1;
  --color-annotation-master: #212121;
  --color-annotation-user: #f44336;
  --color-black: #000;
  --color-blue: #2196f3;
  /**
   * Color variables
   * These colors can be used throughout the CSS for a consistent design system.
   * Access these custom properties in JavaScript or Blazor similarly to the breakpoints.
   */
  --color-blue-darken-2: #1976d2;
  --color-blue-darken-4: #0d47a1;
  --color-blue-grey: #607d8b;
  --color-blue-grey-darken-2: #455a64;
  --color-blue-grey-darken-3: #37474f;
  --color-blue-grey-darken-4: #263238;
  --color-blue-grey-lighten-1: #78909c;
  --color-blue-grey-lighten-3: #b0bec5;
  --color-blue-grey-lighten-4: #cfd8dc;
  --color-blue-grey-lighten-5: #eceff1;
  --color-blue-lighten-1: #42a5f5;
  --color-blue-lighten-2: #64b5f6;
  --color-blue-lighten-3: #90caf9;
  --color-blue-lighten-4: #bbdefb;
  --color-blue-lighten-5: #e3f2fd;
  --color-deep-orange-darken-2: #e64a19;
  --color-deep-purple-lighten-1: #7e57c2;
  --color-focus-visible: #90caf9;
  --color-font: #212121;
  --color-green: #4caf50;
  --color-green-darken-2: #388e3c;
  --color-green-darken-3: #2e7d32;
  --color-green-darken-4: #1b5e20;
  --color-green-lighten-5: #e8f5e9;
  --color-green-lighten-1: #66bb6a;
  --color-grey: #9e9e9e;
  --color-grey-darken-1: #757575;
  --color-grey-darken-2: #616161;
  --color-grey-darken-4: #212121;
  --color-grey-lighten-1: #bdbdbd;
  --color-grey-lighten-2: #e0e0e0;
  --color-grey-lighten-4: #f5f5f5;
  --color-grey-lighten-5: #fafafa;
  --breakpoint-lg: 1200px;
  --color-light-blue-accent-3: #00b0ff;
  --color-light-green-accent-3: #76ff03;
  --color-logo-epc: #f44336;
  --color-logo-pct: #2196f3;
  --color-logo-ip-appify: #ffc107;
  --color-logo-ip-translator: #4caf50;
  --color-logo-secondary: #cfd8dc;
  --breakpoint-md: 1100px;
  --color-orange: #ff9800;
  --color-orange-darken-4: #e65100;
  --color-orange-lighten-1: #ffa726;
  --color-orange-lighten-2: #ffb74d;
  --color-orange-lighten-3: #ffcc80;
  --color-red: #f44336;
  --color-red-accent-3: #ff1744;
  --color-red-darken-1: #e53935;
  --color-red-darken-2: #d32f2f;
  --color-red-darken-3: #c62828;
  --color-red-darken-4: #b71c1c;
  --breakpoint-sm: 768px;
  --color-white: #fff;
  --color-widget-link: #0d47a1;
  --color-widget-link-hover: #1976d2;
  --breakpoint-xl: 1536px;
  --breakpoint-xs: 480px;
  --color-yellow: #ffeb3b;
  --color-yellow-lighten-3: #fff59d;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/**
 * 1. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  font-size: 62.5%;
  scroll-padding-top: 120px;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 1 */
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: #eceff1;
  color: #212121;
  font-family: "Roboto", sans-serif;
  font-size: 1.5rem;
  -webkit-font-smoothing: antialiased;
  line-height: 1.46;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

p {
  font-family: "Roboto", sans-serif;
}

pre {
  font-family: "Fira Code", sans-serif;
  margin: 0;
}

small {
  font-size: 1.3rem;
}

mark {
  background: #fff59d;
  border-radius: 2px;
  color: inherit;
  padding: 0.12rem 0.3rem;
}

/**
 * WIDGETS
 *
 * Widget classes (`w-`) are small, reusable UI elements that are more specific than elements but
 * not as complex as full components. They typically enhance elements with additional styles.
 *
 * Key characteristics:
 * - Widgets are **single-purpose** and **reusable** across the application
 * - They add visual enhancements to elements (styled buttons, icons, labels)
 * - Unlike components, widgets do **not** contain multiple elements
 * - Widgets can be combined to create more complex components
 *
 * CONTENTS:
 * - Badge ................... Status pill/tag with color variants
 * - Button ................. Button styles with size and variant modifiers
 * - Code ................... Inline and block code formatting
 * - Divider ................ Horizontal/vertical separators
 * - Focusable .............. Enhanced focus styles for accessibility
 * - Form Checkbox .......... Styled checkbox inputs
 * - Form Control ........... Styled text inputs, selects, textareas
 * - Form Label ............. Styled form labels
 * - Form Radio ............. Styled radio button inputs
 * - Form Toggle ............ Toggle checkbox inputs
 * - Headline ............... Typography styles for headings
 * - Icon ................... Icon sizing and styling
 * - Link ................... Enhanced link styles
 * - List ................... Styled list elements
 * - Logo ................... Brand logo element
 * - Paragraph Number ....... Numbered paragraph styles
 * - Spinner ................ Loading spinner animation
 * - Text ................... Text color utilities (success, error, warning, info)
 * - Tooltip ................ Hover tooltip element
 *
 */
.w-badge {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 100px;
  display: inline-flex;
  font-size: 1.3rem;
  font-weight: bold;
  gap: 0.2rem;
  line-height: 1;
  padding: 0.4rem 0.8rem;
  white-space: nowrap;
}
.w-badge_success {
  background-color: #e8f5e9;
  border-color: #c8e6c9;
  color: #2e7d32;
  fill: #2e7d32;
}
.w-badge_error {
  background-color: #ffebee;
  border-color: #ffcdd2;
  color: #c62828;
  fill: #c62828;
}
.w-badge_muted {
  background-color: #f5f5f5;
  border-color: #eeeeee;
  color: #9e9e9e;
}

/**
 * BUTTON
 *
 * Button widget with multiple size and style variants.
 * Can be used on <button>, <a>, or <input type="button"> elements.
 *
 * STRUCTURE:
 * - w-btn .................. Base button class (required)
 * - w-btn__section ......... Section within button (for grouping content)
 *
 * SIZE MODIFIERS:
 * - w-btn_xs ............... Extra small button
 * - w-btn_sm ............... Small button
 * - w-btn_md ............... Medium button (default)
 *
 * STYLE MODIFIERS:
 * - w-btn_primary .......... Primary button (dark background)
 * - w-btn_secondary ........ Secondary button (light background)
 * - w-btn_outlined ......... Outlined button (border only)
 * - w-btn_underlined ....... Underlined button
 * - w-btn_unstyled ......... Unstyled button (no background/border)
 *
 * USAGE EXAMPLES:
 *
 * Primary button
 * <button class="w-btn w-btn_primary w-btn_md">Save Changes</button>
 *
 * Secondary button
 * <button class="w-btn w-btn_secondary w-btn_sm">Cancel</button>
 *
 * Outlined button
 * <a href="/docs" class="w-btn w-btn_outlined w-btn_md">Learn More</a>
 *
 * Button with icon
 * <button class="w-btn w-btn_primary w-btn_sm u-gap-sm">
 *   <svg class="w-icon w-icon_xs">
 *     <use href="svg/defs.svg#octicon-check"></use>
 *   </svg>
 *   <span>Confirm</span>
 * </button>
 *
 * Unstyled button (icon only)
 * <button class="w-btn w-btn_unstyled">
 *   <svg class="w-icon w-icon_sm">
 *     <use href="svg/defs.svg#octicon-x"></use>
 *   </svg>
 * </button>
 *
 */
.w-btn {
  align-items: center;
  color: #212121;
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.05rem;
  line-height: 1.25;
  margin: 0;
  outline: 0;
  overflow: visible;
  padding: 0;
  position: relative;
  text-decoration: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  transition: all 0.12s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  user-select: none;
  vertical-align: middle;
}
.w-btn svg {
  transition: all 0.12s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.w-btn__section {
  align-items: center;
  display: flex;
}
.w-btn_xs {
  padding: 0.4rem 0.8rem;
}
.w-btn_sm {
  padding: 0.8rem;
}
.w-btn_md {
  padding: calc(0.8rem * 1.5) 1.6rem;
}
.w-btn_unstyled {
  background: none;
  border: none;
  color: #424242;
}
.w-btn_unstyled:hover {
  color: #212121;
}
.w-btn_outlined, .w-btn_primary, .w-btn_secondary {
  border-radius: 4px;
}
.w-btn_outlined, .w-btn_underlined {
  border-color: #cfd8dc;
}
.w-btn_outlined:hover, .w-btn_underlined:hover {
  border-color: #b0bec5;
}
.w-btn_outlined {
  border-style: solid;
  border-width: 3px;
}
.w-btn_underlined {
  border-bottom-style: solid;
  border-bottom-width: 3px;
  margin-top: -3px;
}
.w-btn_primary {
  background-color: #263238;
  color: #eceff1;
  fill: #eceff1;
}
.w-btn_primary:hover {
  background-color: #37474f;
  color: #eceff1;
}
.w-btn_secondary {
  background-color: #eceff1;
  color: #37474f;
}
.w-btn_secondary:hover {
  background-color: #cfd8dc;
  color: #37474f;
}

/**
 * CODE
 *
 * Code widget for displaying inline or block code with consistent styling.
 * Features dark background with light text and custom text selection colors.
 *
 * STRUCTURE:
 * - w-code ................ Base code class (applied to <code> or <pre>)
 *
 * USAGE EXAMPLES:
 *
 * Inline code
 * <p>Use the <code class="w-code">console.log()</code> function to debug.</p>
 *
 * Code block
 * <pre class="w-code">
 * function greet(name) {
 *   return `Hello, ${name}!`;
 * }
 * </pre>
 *
 * Code snippet in documentation
 * <div class="c-docs">
 *   <p>Example usage:</p>
 *   <code class="w-code">npm install package-name</code>
 * </div>
 *
 * NOTE: Features subpixel antialiasing for improved readability.
 * Text selection has custom styling for better contrast.
 *
 */
.w-code {
  background-color: #37474f;
  color: #eceff1;
  -webkit-font-smoothing: subpixel-antialiased;
  line-height: 1.72;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.w-code::selection {
  background: #eceff1;
  color: black;
}

/**
 * DIVIDER
 *
 * Horizontal divider widget for visual separation of content sections.
 * Renders as a thin horizontal line with consistent color.
 *
 * STRUCTURE:
 * - w-divider ............. Base divider class (applied to <hr>)
 *
 * USAGE EXAMPLES:
 *
 * Basic divider
 * <hr class="w-divider" />
 *
 * Between content sections
 * <section class="c-section">
 *   <h2>First Section</h2>
 *   <p>Content here...</p>
 * </section>
 * <hr class="w-divider" />
 * <section class="c-section">
 *   <h2>Second Section</h2>
 *   <p>More content...</p>
 * </section>
 *
 * In a card
 * <div class="c-card">
 *   <div class="c-card__header">Header</div>
 *   <hr class="w-divider" />
 *   <div class="c-card__content">Content</div>
 * </div>
 *
 */
.w-divider {
  background-color: #cfd8dc;
  border: none;
  height: 1px;
  width: 100%;
}

/**
 * FOCUSABLE
 *
 * Focusable widget that provides consistent focus, hover, and active states.
 * Uses dotted outlines with different colors for each state.
 *
 * STRUCTURE:
 * - w-focusable ........... Base focusable class
 *
 * STATES:
 * - :hover ................ Hover state (light grey outline)
 * - :focus ................ Focus state (dark grey outline)
 * - :active ............... Active state (dark grey outline)
 *
 * USAGE EXAMPLES:
 *
 * Focusable div
 * <div class="w-focusable" tabindex="0">
 *   Click or tab to focus this element
 * </div>
 *
 * Interactive card
 * <div class="c-card w-focusable" tabindex="0" role="button">
 *   <h3>Card Title</h3>
 *   <p>Card content...</p>
 * </div>
 *
 * Custom button
 * <button class="w-focusable">Custom Button</button>
 *
 * NOTE: Ensure elements have tabindex attribute for keyboard navigation.
 *
 */
.w-focusable:hover {
  outline: 2px dotted #bdbdbd;
  outline-offset: 0;
}
.w-focusable:focus, .w-focusable:active, .w-focusable:focus-within {
  box-shadow: none;
  outline: 2px dotted #424242;
  outline-offset: 0;
}

p.w-focusable:focus-within:not(:focus) {
  box-shadow: none;
  outline: none;
}

/**
 * FORM CHECKBOX
 *
 * Checkbox widget with custom styling and icon animation.
 * Native input remains accessible while providing custom visual appearance.
 *
 * STRUCTURE:
 * - w-form-checkbox ........... Base checkbox container (label element)
 * - w-form-checkbox__box ...... Custom visual checkbox box
 * - w-form-control ............ Native checkbox input (hidden)
 *
 * STATES:
 * - is-checked ................ Checkbox is selected (icon becomes visible)
 *
 * USAGE EXAMPLES:
 *
 * Basic checkbox
 * <label class="w-form-checkbox@(ViewModel.AcceptTermsAndConditions ? " is-checked" : "")" for="acceptTermsAndConditions">
 *   <InputCheckbox id="acceptTermsAndConditions" class="w-form-control" />
 *   <span class="w-form-checkbox__box">
 *     <svg class="w-icon w-icon_xs">
 *       <use href="svg/defs.svg#octicon-check"></use>
 *     </svg>
 *   </span>
 *   <span>Accept terms and conditions</span>
 * </label>
 *
 * Checked checkbox
 * <label class="w-form-checkbox is-checked">
 *   <input type="checkbox" class="w-form-control" checked />
 *   <span class="w-form-checkbox__box">
 *     <svg class="w-icon w-icon_xs">
 *       <use href="svg/defs.svg#octicon-check"></use>
 *     </svg>
 *   </span>
 *   <span>Remember me</span>
 * </label>
 *
 * NOTE: Native input remains present (opacity: 0) for accessibility.
 *
 */
.w-form-checkbox {
  cursor: pointer;
  display: flex;
  line-height: 1.4;
}
.w-form-checkbox .w-form-control {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.w-form-checkbox.is-checked .w-icon {
  opacity: 1;
  transform: scale(1);
}
.w-form-checkbox__box {
  align-items: center;
  border: 1px solid #9e9e9e;
  border-radius: 3px;
  display: flex;
  flex-shrink: 0;
  height: calc(1.5rem * 1.4);
  justify-content: center;
  margin-right: 0.8rem;
  position: relative;
  transition: all 0.12s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  width: calc(1.5rem * 1.4);
}
.w-form-checkbox__box .w-icon {
  fill: #212121;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
  transition: all 0.12s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

/**
 * FORM CONTROL
 *
 * Base form control class applied to all form input elements.
 * Provides consistent styling for text inputs, textareas, and selects.
 * Also used on checkboxes and radio buttons (styled differently in their respective widgets).
 *
 * STRUCTURE:
 * - w-form-control ........... Applied to all input, textarea, and select elements
 *
 * RESPONSIVE:
 * - Mobile (default): Full width
 * - xs+: Auto width
 * - md+: Increased height and padding
 *
 * USAGE EXAMPLES:
 *
 * Text input
 * <input type="text" class="w-form-control" placeholder="Enter your name" />
 *
 * Email input
 * <input type="email" class="w-form-control" placeholder="email@example.com" />
 *
 * Password input
 * <input type="password" class="w-form-control" placeholder="Password" />
 *
 * Textarea
 * <textarea class="w-form-control" placeholder="Enter your message" rows="4"></textarea>
 *
 * Select dropdown
 * <select class="w-form-control">
 *   <option>Option 1</option>
 *   <option>Option 2</option>
 *   <option>Option 3</option>
 * </select>
 *
 * Number input
 * <input type="number" class="w-form-control" min="0" max="100" />
 *
 * With form group
 * <div class="c-form-group">
 *   <label class="w-form-label">Username</label>
 *   <input type="text" class="w-form-control" />
 * </div>
 *
 */
.w-form-control {
  display: flex;
  align-items: center;
  border: 1px solid #9e9e9e;
  border-radius: 3px;
  padding-inline: 0.8rem;
  width: 100%;
  height: calc(1.5rem * 2.7);
}
.w-form-control:focus {
  outline: none;
  box-shadow: 0 0 0 1px #9e9e9e;
}

textarea.w-form-control {
  padding: 0.8rem;
  height: auto;
  overflow: hidden;
}
/**
 * FORM LABEL
 *
 * Styled label widget for form inputs with consistent typography and spacing.
 *
 * STRUCTURE:
 * - w-form-label .............. Base label class
 *
 * MODIFIERS:
 * - w-form-label_checkbox ..... Label for checkbox (no bottom margin)
 * - w-form-label_radio ........ Label for radio button (no bottom margin)
 *
 * USAGE EXAMPLES:
 *
 * Standard form label
 * <label class="w-form-label" for="email">Email Address</label>
 * <input type="email" id="email" class="w-form-control" />
 *
 * Label with form group
 * <div class="c-form-group">
 *   <label class="w-form-label" for="username">Username</label>
 *   <input type="text" id="username" class="w-form-control" />
 * </div>
 *
 * Checkbox label (inline with checkbox)
 * <label class="w-form-checkbox">
 *   <input type="checkbox" />
 *   <span class="w-form-label w-form-label_checkbox">Remember me</span>
 * </label>
 *
 * Radio label (inline with radio)
 * <label class="w-form-radio">
 *   <input type="radio" name="option" class="w-form-control" />
 *   <span class="w-form-radio__circle"></span>
 *   <span class="w-form-label w-form-label_radio">Option 1</span>
 * </label>
 *
 * Floating label (Material Design style)
 * <div class="c-form-group">
 *   <label class="w-form-label w-form-label_floating">Email</label>
 *   <input type="email" class="w-form-control" placeholder=" " />
 * </div>
 *
 * NOTE: The placeholder=" " (with space) is required for the :placeholder-shown selector to work
 *
 */
.w-form-label {
  color: #424242;
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.01rem;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.w-form-label_checkbox, .w-form-label_radio {
  margin: 0;
}
.w-form-label_floating {
  background: #fff;
  font-weight: 400;
  left: 0.8rem;
  margin: 0;
  padding: 0 0.4rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
  transition: all 0.2s ease;
}

/**
 * FORM RADIO
 *
 * Radio button widget with custom styling and animated inner dot.
 * Native input remains accessible while providing custom visual appearance.
 *
 * STRUCTURE:
 * - w-form-radio .............. Base radio container (label element)
 * - w-form-radio__circle ...... Custom visual radio circle
 * - w-form-control ............ Native radio input (hidden)
 *
 * STATES:
 * - is-checked ................ Radio is selected (inner dot is displayed)
 * - :disabled ................. Radio is disabled (reduced opacity)
 *
 * USAGE EXAMPLES:
 *
 * Basic radio button
 * <label class="w-form-radio">
 *   <input type="radio" name="option" class="w-form-control" />
 *   <span class="w-form-radio__circle"></span>
 *   <span class="w-form-label w-form-label_radio">Option 1</span>
 * </label>
 *
 * Checked radio button
 * <label class="w-form-radio is-checked">
 *   <input type="radio" name="option" class="w-form-control" checked />
 *   <span class="w-form-radio__circle"></span>
 *   <span class="w-form-label w-form-label_radio">Option 2</span>
 * </label>
 *
 * Disabled radio button
 * <label class="w-form-radio">
 *   <input type="radio" name="option" class="w-form-control" disabled />
 *   <span class="w-form-radio__circle"></span>
 *   <span class="w-form-label w-form-label_radio">Option 3 (disabled)</span>
 * </label>
 *
 * Radio group
 * <div class="c-form-group">
 *   <div class="u-d-flex u-flex-column u-gap-sm">
 *     <label class="w-form-radio">
 *       <input type="radio" name="choice" class="w-form-control" />
 *       <span class="w-form-radio__circle"></span>
 *       <span class="w-form-label w-form-label_radio">Choice A</span>
 *     </label>
 *     <label class="w-form-radio is-checked">
 *       <input type="radio" name="choice" class="w-form-control" checked />
 *       <span class="w-form-radio__circle"></span>
 *       <span class="w-form-label w-form-label_radio">Choice B</span>
 *     </label>
 *   </div>
 * </div>
 *
 * NOTE: Native input remains present (opacity: 0) for accessibility.
 *
 */
.w-form-radio {
  align-items: center;
  cursor: pointer;
  display: flex;
}
.w-form-radio > :disabled ~ span {
  opacity: 0.5;
}
.w-form-radio .w-form-control {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap; /* Prevents breaks for inline elements */
  width: 1px !important;
  pointer-events: none;
}
.w-form-radio.is-checked .w-form-radio__circle::after {
  background-color: #424242;
  border-radius: 50%;
  content: "";
  height: 0.9rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.9rem;
}
.w-form-radio__circle {
  align-items: center;
  border: 1px solid #9e9e9e;
  border-radius: 100%;
  display: flex;
  flex-shrink: 0;
  height: 1.8rem;
  justify-content: center;
  margin-right: 0.4rem;
  min-width: 1.8rem;
  position: relative;
  transition: all 0.12s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  width: 1.8rem;
}

/**
 * FORM TOGGLE
 *
 * Toggle widget with smooth animation.
 * Native input remains accessible while providing custom visual appearance.
 *
 * STRUCTURE:
 * - w-form-toggle ............. Base toggle container (label element)
 * - w-form-toggle__track ...... Visual toggle track/background
 * - w-form-toggle__knob ....... Movable toggle knob/handle
 * - w-form-control ............ Native checkbox input (hidden)
 *
 * STATES:
 * - is-checked ................ Toggle is ON (knob moves to right, track changes color)
 *
 * USAGE EXAMPLES:
 *
 * Basic toggle
 * <label class="w-form-toggle@(ViewModel.EnableNotifications ? " is-checked" : "")" for="enableNotifications">
 *   <InputCheckbox id="enableNotifications" class="w-form-control" />
 *   <span class="w-form-toggle__track">
 *     <span class="w-form-toggle__knob"></span>
 *   </span>
 *   <span>Enable notifications</span>
 * </label>
 *
 * Checked toggle
 * <label class="w-form-toggle is-checked">
 *   <input type="checkbox" class="w-form-control" checked />
 *   <span class="w-form-toggle__track">
 *     <span class="w-form-toggle__knob"></span>
 *   </span>
 *   <span>Dark mode</span>
 * </label>
 *
 * NOTE: Native input remains present (opacity: 0) for accessibility.
 *
 */
.w-form-toggle {
  align-items: center;
  cursor: pointer;
  display: flex;
  line-height: 1.4;
}
.w-form-toggle .w-form-control {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.w-form-toggle.is-checked .w-form-toggle__track {
  background-color: #90a4ae;
}
.w-form-toggle.is-checked .w-form-toggle__knob {
  transform: translateX(20px);
}
.w-form-toggle__track {
  align-items: center;
  background-color: #cfd8dc;
  border-radius: 12px;
  display: flex;
  flex-shrink: 0;
  height: 24px;
  margin-right: 0.8rem;
  padding: 2px;
  position: relative;
  transition: all 0.12s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  width: 44px;
}
.w-form-toggle__knob {
  background-color: #fff;
  border-radius: 50%;
  display: block;
  height: 20px;
  transition: all 0.12s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  width: 20px;
}

/**
 * HEADLINE
 *
 * Headline widget for consistent typography across heading elements.
 * Provides 6 size variants from primary (largest) to sextary (smallest).
 *
 * STRUCTURE:
 * - w-headline .............. Base headline class
 *
 * SIZE MODIFIERS (largest to smallest):
 * - w-headline_primary ...... Largest headline (h1 equivalent)
 * - w-headline_secondary .... Second level headline (h2 equivalent)
 * - w-headline_tertiary ..... Third level headline (h3 equivalent)
 * - w-headline_quaternary ... Fourth level headline (h4 equivalent)
 * - w-headline_quinary ...... Fifth level headline (h5 equivalent, bold)
 * - w-headline_sextary ...... Smallest headline (h6 equivalent, bold)
 *
 * SPECIAL MODIFIERS:
 * - w-headline_group ........ Headline with badge/tag styling (inline-block, background)
 *
 * USAGE EXAMPLES:
 *
 * Page title
 * <h1 class="w-headline w-headline_primary">Welcome to Our App</h1>
 *
 * Section heading
 * <h2 class="w-headline w-headline_secondary">Features</h2>
 *
 * Subsection heading
 * <h3 class="w-headline w-headline_tertiary">Product Details</h3>
 *
 * Card header
 * <div class="c-card__header">
 *   <h3 class="w-headline w-headline_quaternary">Order Summary</h3>
 * </div>
 *
 * Small heading
 * <h5 class="w-headline w-headline_quinary">Specifications</h5>
 *
 * Group/badge headline
 * <span class="w-headline w-headline_group">New</span>
 *
 * With utility classes
 * <h2 class="w-headline w-headline_secondary u-fw-bold">Important Notice</h2>
 *
 */
.w-headline, .c-modal__title {
  display: block;
  font-weight: 400;
  line-height: 1.34;
  font-family: "Roboto", sans-serif;
}
.w-headline_primary {
  margin-bottom: 1rem;
  font-size: 2.389rem;
}
.w-headline_secondary, .c-modal__title {
  margin-bottom: 0.875rem;
  font-size: 2.124rem;
}
.w-headline_tertiary {
  margin-bottom: 0.875rem;
  font-size: 1.888rem;
}
.w-headline_quaternary {
  margin-bottom: 0.875rem;
  font-size: 1.678rem;
}
.w-headline_quinary {
  margin-bottom: 0.875rem;
  font-weight: 700;
  font-size: 1.492rem;
}
.w-headline_sextary {
  margin-bottom: 0.375rem;
  font-weight: 700;
  font-size: 1.492rem;
}
.w-headline_group {
  display: inline-block;
  border-radius: 6px;
  background: #f5f5f5;
  padding: 0.4rem 0.8rem;
  font-weight: bold;
  font-size: 1.678rem;
}

/**
 * ICON
 *
 * Icon widget for SVG icons with size variants.
 * Works with SVG sprite system (defs.svg).
 *
 * STRUCTURE:
 * - w-icon .............. Base icon class (applied to <svg>)
 *
 * SIZE MODIFIERS:
 * - w-icon_xxs .......... Extra extra small icon
 * - w-icon_xs ........... Extra small icon
 * - w-icon_sm ........... Small icon
 * - w-icon_md ........... Medium icon
 *
 * USAGE EXAMPLES:
 *
 * Small icon
 * <svg class="w-icon w-icon_sm">
 *   <use href="svg/defs.svg#octicon-check" width="18"></use>
 * </svg>
 *
 * Icon in button
 * <button class="w-btn w-btn_primary w-btn_md u-gap-sm">
 *   <svg class="w-icon w-icon_xs">
 *     <use href="svg/defs.svg#octicon-plus" width="14"></use>
 *   </svg>
 *   <span>Add Item</span>
 * </button>
 *
 * Icon in alert
 * <div class="c-alert c-alert_success">
 *   <svg class="c-alert__icon w-icon w-icon_sm">
 *     <use href="svg/defs.svg#octicon-check-circle-fill" width="18"></use>
 *   </svg>
 *   <span class="c-alert__text">Success message</span>
 * </div>
 *
 * Large icon
 * <svg class="w-icon w-icon_md">
 *   <use href="svg/defs.svg#octicon-info" width="24"></use>
 * </svg>
 *
 * Icon with color utility
 * <svg class="w-icon w-icon_sm u-f-success">
 *   <use href="svg/defs.svg#octicon-check" width="18"></use>
 * </svg>
 *
 * NOTE: Icons inherit fill color from parent element by default.
 * Use color utilities (u-f-*) to override.
 *
 */
.w-icon {
  display: block;
  fill: inherit;
}
.w-icon_xxs {
  height: 12px;
  width: 12px;
}
.w-icon_xs {
  height: 14px;
  width: 14px;
}
.w-icon_sm {
  height: 18px;
  width: 18px;
}
.w-icon_md {
  height: 24px;
  width: 24px;
}

/**
 * LINK
 *
 * Link widget with consistent styling and hover effects.
 * Features a dotted underline and smooth color transition.
 *
 * STRUCTURE:
 * - w-link ................ Base link class
 *
 * ATTRIBUTES:
 * - rel="external" ........ For external links (currently no additional styling)
 *
 * USAGE EXAMPLES:
 *
 * Basic link
 * <a href="/about" class="w-link">Learn more about us</a>
 *
 * External link
 * <a href="https://example.com" class="w-link" rel="external">Visit our partner site</a>
 *
 * Link in text
 * <p>
 *   For more information, check out our
 *   <a href="/docs" class="w-link">documentation</a>.
 * </p>
 *
 * Link with icon
 * <a href="/help" class="w-link u-d-inline-flex u-align-items-center u-gap-xs">
 *   <span>Help Center</span>
 *   <svg class="w-icon w-icon_xxs">
 *     <use href="svg/defs.svg#octicon-link-external"></use>
 *   </svg>
 * </a>
 *
 */
.w-link {
  border-bottom: 1px dotted #0d47a1;
  color: #0d47a1;
  transition: all 0.12s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.w-link_external {
  border-bottom: none;
}
.w-link:hover {
  color: #1976d2;
  fill: #1976d2;
}

/**
 * LIST
 *
 * List widget with utility modifiers for common list layouts.
 * Provides unstyled and flexbox layout options.
 *
 * STRUCTURE:
 * - w-list ................ Base list class (no default styles)
 *
 * MODIFIERS:
 * - w-list_unstyled ....... Removes default list styling (bullets, padding, margin)
 * - w-list_flex ........... Flexbox layout with wrapping and gap
 *
 * USAGE EXAMPLES:
 *
 * Unstyled list (no bullets)
 * <ul class="w-list w-list_unstyled">
 *   <li>Item 1</li>
 *   <li>Item 2</li>
 *   <li>Item 3</li>
 * </ul>
 *
 * Horizontal flex list
 * <ul class="w-list w-list_unstyled w-list_flex">
 *   <li>Tag 1</li>
 *   <li>Tag 2</li>
 *   <li>Tag 3</li>
 * </ul>
 *
 * Navigation list
 * <nav>
 *   <ul class="w-list w-list_unstyled w-list_flex">
 *     <li><a href="/">Home</a></li>
 *     <li><a href="/about">About</a></li>
 *     <li><a href="/contact">Contact</a></li>
 *   </ul>
 * </nav>
 *
 */
.w-list_unstyled {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.w-list_flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}

/**
 * LOGO
 *
 * Logo widget with predefined sizes for specific logo variants.
 * Currently supports the EPC PCT App logo.
 *
 * STRUCTURE:
 * - w-logo ................ Base logo class (no default styles)
 *
 * MODIFIERS:
 * - w-logo_epc-pct-app .... EPC PCT App logo (72x20px)
 *
 * USAGE EXAMPLES:
 *
 * EPC PCT App logo (SVG)
 * <svg class="w-logo w-logo_epc-pct-app">
 *   <use href="svg/defs.svg#logo-epc-pct-app"></use>
 * </svg>
 *
 * Logo in header
 * <header class="c-header">
 *   <a href="/" class="c-header__logo">
 *     <svg class="w-logo w-logo_epc-pct-app">
 *       <use href="svg/defs.svg#logo-epc-pct-app"></use>
 *     </svg>
 *   </a>
 * </header>
 *
 * Logo as image
 * <img src="/logo.svg" alt="Company Logo" class="w-logo w-logo_epc-pct-app" />
 *
 */
.w-logo_epc-pct-app {
  height: 20px;
  width: 72px;
}
.w-logo_epc-pct-app_sm {
  height: 16px;
  width: 56px;
}
.w-logo_ip-translator {
  height: 20px;
  width: 98px;
}

/**
 * PARAGRAPH NUMBER
 *
 * Paragraph number widget for numbered sections or lists.
 * Features bold text and consistent right margin.
 *
 * STRUCTURE:
 * - w-paragraph-number .... Base paragraph number class
 *
 * USAGE EXAMPLES:
 *
 * Numbered paragraph
 * <div class="c-paragraph">
 *   <span class="w-paragraph-number">1.</span>
 *   <p>This is the first paragraph of content.</p>
 * </div>
 *
 * Legal document numbering
 * <section class="c-legal-section">
 *   <h3>
 *     <span class="w-paragraph-number">§1</span>
 *     <span>Introduction</span>
 *   </h3>
 *   <p>Section content...</p>
 * </section>
 *
 * Numbered list item
 * <div class="c-list-item">
 *   <span class="w-paragraph-number">2.1</span>
 *   <span>Subsection title</span>
 * </div>
 *
 */
.w-paragraph-number {
  font-weight: 700;
}

/**
 * BASE
 *
 * Base styles define global settings like fonts, animations, and resets.
 * These are the foundational styles that affect the entire application.
 *
 * Key characteristics:
 * - No classes, only global CSS rules
 * - Font imports and @font-face declarations
 * - @keyframes animations
 * - Global resets and normalizations
 *
 * CONTENTS:
 * - Animations ............. Keyframe animations (@keyframes)
 * - Fonts .................. Font imports and @font-face declarations
 *
 */
/**
 * SPINNER
 *
 * Spinner widget for loading states and progress indication.
 * Features a rotating circular animation with customizable sizes.
 *
 * STRUCTURE:
 * - w-spinner ............. Base spinner class (default small size)
 *
 * SIZE MODIFIERS:
 * - w-spinner_xs .......... Extra small spinner
 *
 * USAGE EXAMPLES:
 *
 * Default spinner (small)
 * <div class="w-spinner"></div>
 *
 * Extra small spinner
 * <div class="w-spinner w-spinner_xs"></div>
 *
 * Loading button
 * <button class="w-btn w-btn_primary w-btn_md" disabled>
 *   <div class="w-spinner w-spinner_xs"></div>
 *   <span>Loading...</span>
 * </button>
 *
 * Loading state in content area
 * <div class="c-loading-state u-d-flex u-justify-content-center u-py-xl">
 *   <div class="w-spinner"></div>
 * </div>
 *
 * Inline with text
 * <p class="u-d-flex u-align-items-center u-gap-sm">
 *   <span class="w-spinner w-spinner_xs"></span>
 *   <span>Processing your request...</span>
 * </p>
 *
 * NOTE: Uses the 'rotation' animation from 03-base/animations.
 * The spinner is centered using flexbox utilities.
 *
 */
.w-spinner {
  animation: rotation 1s linear infinite;
  border: 2px solid #eceff1;
  border-bottom-color: #455a64;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  height: 18px;
  width: 18px;
}
.w-spinner_xs {
  height: 14px;
  width: 14px;
}

/**
 * TEXT
 *
 * Text widget with semantic color modifiers for various states and purposes.
 * Use these classes to apply consistent text colors across the application.
 *
 * STRUCTURE:
 * - w-text ................ Base text class (no default styles)
 *
 * MODIFIERS:
 * - w-text_muted .......... Muted/subdued text (grey)
 * - w-text_error .......... Error state text (red)
 * - w-text_warning ........ Warning state text (orange/yellow)
 * - w-text_success ........ Success state text (green)
 * - w-text_info ........... Informational text (blue)
 *
 * USAGE EXAMPLES:
 *
 * Muted text
 * <p class="w-text w-text_muted">This is secondary information.</p>
 *
 * Error message
 * <span class="w-text w-text_error">Invalid email address.</span>
 *
 * Warning message
 * <div class="w-text w-text_warning">Your session will expire soon.</div>
 *
 * Success message
 * <p class="w-text w-text_success">Changes saved successfully!</p>
 *
 * Info message
 * <span class="w-text w-text_info">Click here to learn more.</span>
 *
 * In form validation
 * <div class="c-form-group">
 *   <label class="w-form-label">Email</label>
 *   <input type="email" class="w-form-control" />
 *   <span class="w-text w-text_error">Please enter a valid email.</span>
 * </div>
 *
 */
.w-text_muted {
  color: #9e9e9e;
}
.w-text_error {
  color: #f44336;
}
.w-text_warning {
  color: #ff9800;
}
.w-text_success {
  color: #4caf50;
}
.w-text_info {
  color: #2196f3;
}

/**
 * TOOLTIP
 *
 * Tooltip widget for displaying contextual information on hover.
 * Features multiple alignment options and responsive behavior.
 *
 * STRUCTURE:
 * - w-tooltip-wrapper ..... Container element (position: relative)
 * - w-tooltip ............. Tooltip element (position: absolute)
 *
 * ALIGNMENT MODIFIERS:
 * - w-tooltip_left-align ........... Tooltip appears on the left side
 * - w-tooltip_right-align .......... Tooltip appears on the right side
 * - w-tooltip_bottom-align ......... Tooltip appears below the element
 * - w-tooltip_bottom-left-align .... Tooltip appears below, left-aligned
 * - w-tooltip_bottom-right-align ... Tooltip appears below, right-aligned
 * - (default) ...................... Tooltip appears above the element
 *
 * RESPONSIVE:
 * - md:w-tooltip_left-align  Left alignment at medium breakpoint and up
 *
 * USAGE EXAMPLES:
 *
 * Basic tooltip (appears above)
 * <div class="w-tooltip-wrapper" aria-label="hover-me" aria-describedby="tt-hover-me">
 *   <button class="w-btn w-btn_primary">Hover me</button>
 *   <span id="tt-hover-me" class="w-tooltip">This is a helpful tooltip</span>
 * </div>
 *
 * Tooltip on the right
 * <div class="w-tooltip-wrapper">
 *   <svg class="w-icon w-icon_sm">
 *     <use href="svg/defs.svg#octicon-info"></use>
 *   </svg>
 *   <span class="w-tooltip w-tooltip_right-align">Additional information</span>
 * </div>
 *
 * Tooltip below element
 * <div class="w-tooltip-wrapper">
 *   <span class="w-text">Hover for details</span>
 *   <span class="w-tooltip w-tooltip_bottom-align">Details appear below</span>
 * </div>
 *
 * Responsive tooltip (left on mobile, bottom on desktop)
 * <div class="w-tooltip-wrapper">
 *   <button class="w-btn w-btn_outlined">Info</button>
 *   <span class="w-tooltip w-tooltip_left-align md:w-tooltip_left-align">
 *     Responsive tooltip text
 *   </span>
 * </div>
 *
 * NOTE: Tooltips only appear on devices with hover capability (pointer: fine).
 * Arrow position is automatically adjusted based on alignment.
 *
 */
.w-tooltip-wrapper {
  position: relative;
}

.w-tooltip {
  background-color: #37474f;
  border-radius: 4px;
  color: white;
  font-size: 1.3rem;
  font-weight: bold;
  left: 0;
  opacity: 0;
  padding: 0.8rem;
  pointer-events: none; /* Prevents the tooltip from interfering with the hover event */
  position: absolute;
  transform: translateX(0);
  transition: opacity 0.6s;
  visibility: hidden;
  white-space: nowrap;
  z-index: 90;
}
.w-tooltip::after {
  border-style: solid;
  border-width: 6px;
  content: "";
  position: absolute;
}

@media (hover: hover) and (pointer: fine) {
  .w-tooltip-wrapper:hover .w-tooltip {
    opacity: 1;
    visibility: visible;
  }
  .w-tooltip-wrapper:hover .w-tooltip_left-align {
    left: -0.8rem;
    transform: translateX(-100%) translateY(0);
  }
  .w-tooltip-wrapper:hover .w-tooltip_left-align::after {
    border-color: transparent transparent transparent #37474f;
    left: auto;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
  }
  .w-tooltip-wrapper:hover .w-tooltip_right-align {
    left: calc(100% + 0.8rem);
  }
  .w-tooltip-wrapper:hover .w-tooltip_right-align::after {
    border-color: transparent #37474f transparent transparent;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
  }
  .w-tooltip-wrapper:hover .w-tooltip_bottom-align {
    bottom: -0.8rem;
    transform: translateX(0) translateY(100%);
  }
  .w-tooltip-wrapper:hover .w-tooltip_bottom-align::after {
    border-color: transparent transparent #37474f transparent;
    left: 10px;
    top: -10px;
  }
  .w-tooltip-wrapper:hover .w-tooltip_bottom-left-align {
    bottom: -0.8rem;
    transform: translateX(-60%) translateY(100%);
  }
  .w-tooltip-wrapper:hover .w-tooltip_bottom-left-align::after {
    border-color: transparent transparent #37474f transparent;
    right: 10px;
    top: -10px;
  }
  .w-tooltip-wrapper:hover .w-tooltip_bottom-right-align {
    bottom: -0.8rem;
    left: auto;
    right: 0;
    transform: translateX(0) translateY(100%);
  }
  .w-tooltip-wrapper:hover .w-tooltip_bottom-right-align::after {
    border-color: transparent transparent #37474f transparent;
    right: 10px;
    top: -10px;
  }
}
@media screen and (hover: hover) and (pointer: fine) and (min-width: 1100px) {
  .w-tooltip-wrapper:hover .md\:w-tooltip_left-align {
    left: -0.8rem;
    transform: translateX(-100%) translateY(0);
  }
  .w-tooltip-wrapper:hover .md\:w-tooltip_left-align::after {
    border-color: transparent transparent transparent #37474f;
    left: auto;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
  }
}
/**
 * COMPONENTS
 *
 * Component classes (`c-`) are reusable UI elements that work independently of page layouts.
 * They can be small collections of widgets or larger modules containing multiple elements.
 *
 * Key characteristics:
 * - Components are **self-contained** and can be used across different layouts
 * - They typically include visual styles (colors, shadows, paddings) but do not define page layouts
 * - A component should be **modular** and not depend on the layout for its function
 * - Components can contain widgets and other components while remaining reusable
 *
 * CONTENTS:
 *
 * Alert .................... Alert boxes for notifications (success, error, warning, info)
 * Aside .................... Sidebar component
 * Bar ...................... Toolbar component for grouping buttons and actions
 * Card ..................... Card container with header, body, and footer
 * Color Picker ............. Color selection component
 * Contract ................. Contract-specific styling (line-height, margins, etc.)
 * Dropdown ................. Dropdown menu component
 * Form Group ............... Form group wrapper for labels and inputs
 * Group .................... Flexbox group for displaying sections in columns with borders
 * Link Picker .............. Link selection component
 * Loader ................... Loading indicator component
 * Mobile Sticky Bottom ..... Sticky bottom bar for mobile view only
 * Modal .................... Overlay dialog/modal component
 * Navbar ................... Navigation bar with responsive design
 * Nav Inline ............... Inline navigation component
 * Note ..................... Fixed position notification component
 * Note Assistant ........... Note assistant sidebar component
 * Overlay .................. Full-screen overlay backdrop
 * Popover .................. Popup component for additional information near trigger elements
 * Root ..................... Main application layout structure (header, content, footer)
 * Table .................... Responsive table component
 * Tabs ..................... Tab navigation component
 * TOC ...................... Table of contents for document navigation
 *
 */
/**
 * ALERT
 *
 * Alert component for displaying notifications, messages, and feedback to users.
 * Supports different variants: success, error, warning, and info.
 *
 * STRUCTURE:
 * - c-alert ................ Container (with variant modifier)
 * - c-alert__icon .......... Icon element (SVG)
 * - c-alert__text .......... Text content
 *
 * MODIFIERS:
 * - c-alert_success ........ Green background for success messages
 * - c-alert_error .......... Red background for error messages
 * - c-alert_warning ........ Yellow background for warning messages
 * - c-alert_info ........... Blue background for informational messages
 *
 * USAGE EXAMPLES:
 *
 * // Success alert
 * <div class="c-alert c-alert_success">
 *   <svg class="c-alert__icon w-icon w-icon_sm">
 *     <use href="svg/defs.svg#octicon-check-circle-fill"></use>
 *   </svg>
 *   <span class="c-alert__text">10% Rabatt angewendet</span>
 * </div>
 *
 * // Error alert
 * <div class="c-alert c-alert_error c-alert_inline">
 *   <svg class="c-alert__icon w-icon w-icon_sm">
 *     <use href="svg/defs.svg#octicon-x-circle-fill"></use>
 *   </svg>
 *   <span class="c-alert__text">Fehler beim Speichern</span>
 * </div>
 *
 * // Warning alert
 * <div class="c-alert c-alert_warning c-alert_inline">
 *   <svg class="c-alert__icon w-icon w-icon_sm">
 *     <use href="svg/defs.svg#octicon-warning"></use>
 *   </svg>
 *   <span class="c-alert__text">Bitte überprüfen Sie Ihre Eingabe</span>
 * </div>
 *
 * // Info alert
 * <div class="c-alert c-alert_info c-alert_inline">
 *   <svg class="c-alert__icon w-icon w-icon_sm">
 *     <use href="svg/defs.svg#octicon-info"></use>
 *   </svg>
 *   <span class="c-alert__text">Wichtiger Hinweis</span>
 * </div>
 *
 * // Alert without icon
 * <div class="c-alert c-alert_success c-alert_inline">
 *   <span class="c-alert__text">Erfolgreich gespeichert</span>
 * </div>
 *
 */
.c-alert {
  border-radius: 3px;
  display: inline-flex;
  gap: 0.8rem;
}
.c-alert__icon {
  flex-shrink: 0;
}
.c-alert__text {
  flex: 1;
}
.c-alert__text ul:has(> li:only-child) {
  list-style: none;
  padding-left: 0;
}
.c-alert_block {
  align-items: flex-start;
  font-size: 1.5rem;
  line-height: 1.46;
}
.c-alert_inline {
  align-items: center;
  font-size: 1.3rem;
  line-height: 1.25;
}
.c-alert_success {
  background-color: #e8f5e9;
  color: #2e7d32;
}
.c-alert_success .c-alert__icon {
  fill: #388e3c;
}
.c-alert_error {
  background-color: #ffebee;
  color: #c62828;
}
.c-alert_error .c-alert__icon {
  fill: #d32f2f;
}
.c-alert_warning {
  background-color: #fffde7;
  color: #f57f17;
}
.c-alert_warning .c-alert__icon {
  fill: #f57c00;
}
.c-alert_info {
  background-color: #e3f2fd;
  color: #0d47a1;
}
.c-alert_info .c-alert__icon {
  fill: #1976d2;
}

.c-aside .c-toc {
  height: 0;
  left: 1.6rem;
  overflow: hidden;
  position: absolute;
  right: 1.6rem;
  top: 1.6rem;
  z-index: 100;
}
.c-aside .c-toc.is-active {
  height: auto;
}
.c-aside .c-toc.is-active .c-card {
  opacity: 1;
  overflow-y: scroll;
}
.c-aside .c-toc .c-card {
  transition: all 0.12s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.c-aside .c-toc .c-mobile-sticky-bottom {
  display: flex;
}

@media screen and (min-width: 1200px) {
  .c-aside .c-toc {
    height: auto;
    left: 0;
    position: relative;
    right: 0;
    top: 0;
  }
  .c-aside .c-toc .c-bar {
    position: fixed;
    z-index: 1;
  }
  .c-aside .c-toc .c-card {
    height: calc(100% - 160px);
    margin-top: 60px;
    opacity: 1;
    overflow-y: auto;
    position: fixed;
  }
  .c-aside .c-toc .c-mobile-sticky-bottom {
    display: none;
  }
}
/**
 * BASE
 *
 * Base styles define global settings like fonts, animations, and resets.
 * These are the foundational styles that affect the entire application.
 *
 * Key characteristics:
 * - No classes, only global CSS rules
 * - Font imports and @font-face declarations
 * - @keyframes animations
 * - Global resets and normalizations
 *
 * CONTENTS:
 * - Animations ............. Keyframe animations (@keyframes)
 * - Fonts .................. Font imports and @font-face declarations
 *
 */
.c-bar {
  --separator-length: 100%;
  --separator-thickness: 1px;
  background-color: #fff;
  border: 3px solid #b0bec5;
  border-radius: 4px;
  box-shadow: 3px 6px 8px rgba(33, 33, 33, 0.16);
  color: #212121;
  display: flex;
  font-size: 1.4rem;
  line-height: 1.25;
  padding: 0.4rem;
  position: relative;
}
.c-bar .c-bar {
  position: absolute;
}
.c-bar_pagination .w-btn {
  border-right: 2px solid white;
  width: 16px;
}
.c-bar .w-btn + .c-bar {
  animation: fadeIn 0.12s ease forwards;
  box-shadow: 3px 6px 14px rgba(33, 33, 33, 0.16);
  position: absolute;
}
.c-bar_vertical {
  width: 50px;
}
.c-bar_vertical .c-bar__separator {
  height: var(--separator-thickness);
  width: var(--separator-length);
}
.c-bar_vertical > .c-bar__group {
  flex-direction: column;
}
.c-bar__group {
  align-items: center;
  display: flex;
  height: 100%;
  width: 100%;
}
.c-bar__group::after {
  background-color: #eceff1;
  content: "";
  height: 80%;
  width: 1px;
}
.c-bar__group:last-child::after {
  display: none;
}
.c-bar__item {
  align-items: center;
  display: flex;
  position: relative;
}
.c-bar__separator {
  background-color: #cfd8dc;
  height: var(--separator-length);
  width: var(--separator-thickness);
}
.c-bar .w-btn:disabled {
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
}
.c-bar .w-btn:hover {
  background-color: #eceff1;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/**
 * CARD
 *
 * Card component for displaying content in a container with optional header, body, and footer.
 * Cards are commonly used for grouping related information with visual separation.
 *
 * STRUCTURE:
 * - c-card ................... Container with shadow and border radius
 * - c-card__header ........... Header section with padding (for titles, actions)
 * - c-card__body ............. Main content area
 * - c-card__footer ........... Footer section with top border
 * - c-card__delete-button .... Absolutely positioned delete button (top-right)
 *
 * USAGE EXAMPLES:
 *
 * // Basic card with header and body
 * <div class="c-card">
 *   <div class="c-card__header">
 *     <h2 class="w-headline w-headline_tertiary">Card Title</h2>
 *   </div>
 *   <div class="c-card__body">
 *     <p>Card content goes here...</p>
 *   </div>
 * </div>
 *
 * // Card with footer
 * <div class="c-card">
 *   <div class="c-card__header">
 *     <h3 class="w-headline w-headline_quaternary">Product Details</h3>
 *   </div>
 *   <div class="c-card__body">
 *     <p>Product information...</p>
 *   </div>
 *   <div class="c-card__footer">
 *     <button class="w-btn w-btn_primary w-btn_sm">Buy Now</button>
 *     <button class="w-btn w-btn_outlined w-btn_sm">Add to Cart</button>
 *   </div>
 * </div>
 *
 * // Card with delete button
 * <div class="c-card">
 *   <button class="c-card__delete-button w-btn w-btn_unstyled">
 *     <svg class="w-icon w-icon_sm">
 *       <use href="svg/defs.svg#octicon-trash"></use>
 *     </svg>
 *   </button>
 *   <div class="c-card__body">
 *     <p>Deletable card content</p>
 *   </div>
 * </div>
 *
 */
.c-card {
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(33, 33, 33, 0.2);
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}
.c-card_overflow-visible {
  overflow: visible;
}
.c-card__header {
  padding: 1.6rem;
}
.c-card__header .w-headline {
  margin: 0;
}
.c-card__header_branded {
  --color-logo-secondary: #263238;
  border-bottom: 1px solid #e0e0e0;
  padding-block: 2.4rem !important;
}
.c-card__footer {
  border-top: 1px solid #cfd8dc;
}
.c-card__delete-button {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 50;
}

.c-color-picker {
  display: inline-block;
  position: relative;
}
.c-color-picker__swatch {
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  transition: all 0.4s;
  height: clamp(18px, 2vw, 24px);
  width: clamp(18px, 2vw, 24px);
}
.c-color-picker__swatch.is-active {
  border-color: #212121;
  box-shadow: 0 4px 8px rgba(33, 33, 33, 0.4);
}
.c-color-picker__swatch:hover {
  border-color: #9e9e9e;
}
.c-color-picker__swatch_selected {
  height: 32px;
  width: 32px;
}
.c-color-picker__grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 2.4rem;
}
.c-color-picker__grid .c-color-picker__swatch {
  height: 18px;
  width: 100%;
}

.c-contract {
  --contract-primary-bar-width: 100%;
  line-height: 1.46;
}
.c-contract__main-header {
  display: flex;
  height: 60px;
  justify-content: space-between;
}
.c-contract__main {
  /*
   * - spacing('sm'): bar margin.
   * - 2px: optic
   */
  margin-right: calc(50px - 0.8rem + 2px);
}
.u-editmode_readonly .c-contract__main {
  margin-right: 0;
}
.c-contract__primary-bar, .c-contract__secondary-bar {
  position: fixed;
  z-index: 1;
}
.c-contract__primary-bar {
  margin-right: 0.8rem;
  width: var(--contract-primary-bar-width);
}
.c-contract__secondary-bar {
  display: flex;
  justify-content: space-between;
  /*
    * - spacing('sm'): bar margin.
    * - spacing('sm'): gap of the contract-layout grid.
    */
  right: calc(0.8rem + 50px + 0.8rem);
}
.u-editmode_readonly .c-contract__secondary-bar {
  right: 1.6rem;
}
.c-contract__mobile-action-bar {
  position: fixed;
}
.u-editmode_readonly .c-contract .c-bar_vertical {
  display: none;
}

@media screen and (min-width: 768px) {
  .c-contract {
    --contract-primary-bar-width: auto;
  }
  .c-contract__mobile-action-bar {
    display: none;
  }
}
.c-dropdown {
  background-color: #fff;
  border: 1px solid #eceff1;
  border-radius: 4px;
  box-shadow: 3px 6px 8px rgba(33, 33, 33, 0.16);
  margin-top: 0.8rem;
  max-height: 60rem;
  min-width: 310px;
  outline: none;
  overflow-y: auto;
  position: absolute;
  right: 0;
  transform-origin: top right;
  z-index: 10;
}
.c-dropdown__item {
  color: #263238;
  display: block;
  padding: 0.8rem 3.8rem;
  text-decoration: none;
  white-space: nowrap;
}
.c-dropdown__item:hover {
  background-color: #eceff1;
}

.c-dropdown-toggle {
  display: inline-block;
  position: relative;
}
.c-dropdown-toggle > .c-dropdown {
  display: none;
  left: 0;
  right: auto;
  top: 100%;
}
.c-dropdown-toggle > input:checked ~ .c-dropdown {
  display: block;
}

@media screen and (min-width: 768px) {
  .c-dropdown {
    min-width: 360px;
  }
}
/**
 * FORM GROUP
 *
 * Form group component for wrapping form labels and inputs with consistent spacing.
 * This is a standalone component that can exist without a form component as parent.
 *
 * STRUCTURE:
 * - c-form-group ................. Container with vertical layout and bottom margin
 * - c-form-group__input-wrapper .. Wrapper for input with icon/button
 *
 * MODIFIERS:
 * - c-form-group_has-btn ......... Form group with button inside input (e.g., search, clear)
 * - c-form-group_has-icon ........ Form group with icon inside input (left side)
 *
 * USAGE EXAMPLES:
 *
 * // Basic form group
 * <div class="c-form-group">
 *   <label class="w-form-label" for="email">Email Address</label>
 *   <input type="email" id="email" class="w-form-control" placeholder="email@example.com" />
 * </div>
 *
 * // Form group with button inside input
 * <div class="c-form-group c-form-group_has-btn">
 *   <label class="w-form-label" for="search">Search</label>
 *   <div class="c-form-group__input-wrapper">
 *     <input type="text" id="search" class="w-form-control" placeholder="Search..." />
 *     <button class="w-btn w-btn_unstyled">
 *       <svg class="w-icon w-icon_sm">
 *         <use href="svg/defs.svg#octicon-search"></use>
 *       </svg>
 *     </button>
 *   </div>
 * </div>
 *
 * // Form group with icon
 * <div class="c-form-group c-form-group_has-icon">
 *   <label class="w-form-label" for="username">Username</label>
 *   <div class="c-form-group__input-wrapper">
 *     <svg class="w-icon w-icon_sm">
 *       <use href="svg/defs.svg#octicon-person"></use>
 *     </svg>
 *     <input type="text" id="username" class="w-form-control" placeholder="Username" />
 *   </div>
 * </div>
 *
 * // Form group with floating label (Material Design style)
 * <div class="c-form-group">
 *   <input type="email" id="email" class="w-form-control" placeholder=" " />
 *   <label class="w-form-label w-form-label_floating" for="email">Email</label>
 * </div>
 *
 * // Form group with floating label for select
 * <div class="c-form-group @(string.IsNullOrEmpty(value) ? "" : "has-value")">
 *   <select class="w-form-control" @bind-Value="value">
 *     <option value="">Please select...</option>
 *     <option value="1">Option 1</option>
 *   </select>
 *   <label class="w-form-label w-form-label_floating">Country</label>
 * </div>
 *
 * NOTE: The placeholder=" " (with space) is required for :placeholder-shown to work
 * NOTE: Label must come AFTER input for the sibling selector (~) to work
 * NOTE: For select, use has-value class when a value is selected
 *
 */
.c-form-group {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 1.6rem;
}
.c-form-group svg {
  fill: #212121;
}
.c-form-group__input-wrapper {
  display: inherit;
  align-items: center;
  width: 100%;
}
.c-form-group_has-btn {
  width: 100%;
}
.c-form-group_has-btn .w-form-control {
  width: 100%;
}
.c-form-group_has-btn .w-btn {
  position: absolute;
  right: 0.8rem;
}
.c-form-group_has-btn .w-btn:hover svg {
  fill: #455a64;
}
.c-form-group_has-icon .w-form-control {
  padding-left: 2.4rem;
}
.c-form-group_has-icon .w-form-label_floating {
  left: 2rem;
}
.c-form-group_has-icon .w-icon {
  position: absolute;
  margin-left: 0.6rem;
}
.c-form-group .w-form-control:focus ~ .w-form-label_floating,
.c-form-group .w-form-control:not(:placeholder-shown) ~ .w-form-label_floating {
  top: 0;
  left: 0.8rem;
  transform: translateY(-50%) scale(0.85);
  color: #424242;
}
.c-form-group.has-value .w-form-label_floating,
.c-form-group select.w-form-control:focus ~ .w-form-label_floating {
  top: 0;
  left: 0.8rem;
  transform: translateY(-50%) scale(0.85);
  color: #424242;
}

.c-link-picker {
  position: relative;
}
.c-link-picker__title {
  font-weight: bold;
  margin-bottom: 0.8rem;
}
.c-link-picker__items {
  font-size: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-link-picker__item {
  line-height: 1.25;
  margin-bottom: 0.4rem;
}
.c-link-picker__item:last-child {
  margin-bottom: 0;
}
.c-link-picker__item.is-active a,
.c-link-picker__item.is-active button {
  font-weight: bold;
}
.c-link-picker__item a,
.c-link-picker__item button {
  background-color: #fafafa;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 0.8rem;
  user-select: none;
  width: 100%;
}
.c-link-picker__item a:hover,
.c-link-picker__item button:hover {
  background-color: #f5f5f5;
  color: inherit;
}

/**
 * GROUP
 *
 * Group component for displaying content in rows with sections.
 * Uses flexbox to display sections in columns on larger screens. Items have bottom borders.
 *
 * STRUCTURE:
 * - c-group ................. Container (typically ul/ol or div)
 * - c-group__item ........... Row item with bottom border (becomes flexbox on sm+ screens)
 * - c-group__item-section ... Section within item (e.g., label or value)
 *
 * MODIFIERS:
 * - c-group_borderless ...... Removes bottom borders from items
 * - c-group__item_half-size . Item takes 50% width (responsive, sm+ only)
 *
 * USAGE EXAMPLES:
 *
 * // Basic group with label/value pairs
 * <div class="c-group">
 *   <div class="c-group__item">
 *     <div class="c-group__item-section">
 *       <h3 class="w-headline w-headline_quaternary u-fw-bold">Product</h3>
 *     </div>
 *     <div class="c-group__item-section">
 *       EPC Standard Edition
 *     </div>
 *   </div>
 *   <div class="c-group__item">
 *     <div class="c-group__item-section">
 *       <h3 class="w-headline w-headline_quaternary u-fw-bold">Price</h3>
 *     </div>
 *     <div class="c-group__item-section">
 *       299.00 EUR
 *     </div>
 *   </div>
 * </div>
 *
 * // Borderless group
 * <div class="c-group c-group_borderless">
 *   <div class="c-group__item">
 *     <div class="c-group__item-section">Section 1</div>
 *     <div class="c-group__item-section">Section 2</div>
 *   </div>
 * </div>
 *
 * // Group with half-size items
 * <div class="c-group">
 *   <div class="c-group__item c-group__item_half-size">
 *     <div class="c-group__item-section">Left Item</div>
 *   </div>
 *   <div class="c-group__item c-group__item_half-size">
 *     <div class="c-group__item-section">Right Item</div>
 *   </div>
 * </div>
 *
 */
.c-group {
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-group__item {
  border-bottom: 1px solid #e0e0e0;
}
.c-group__item-section {
  flex: 1;
  padding: 1.6rem;
}
.c-group__item:last-child {
  border-bottom: none;
}
.c-group_borderless .c-group__item {
  border-bottom: 0;
}

@media screen and (min-width: 768px) {
  .c-group__item {
    display: flex;
    flex-wrap: wrap;
  }
  .c-group__item_half-size {
    width: 50%;
  }
}
.c-app-loader svg {
  display: block;
  height: 8rem;
  margin: 20vh auto 1rem auto;
  position: relative;
  width: 8rem;
}
.c-app-loader circle {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: 0.6rem;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.c-app-loader circle:last-child {
  stroke: #1b6ec2;
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}
.c-app-loader__text {
  font-weight: bold;
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
  position: absolute;
  text-align: center;
}
.c-app-loader__text:after {
  content: var(--blazor-load-percentage-text, "Loading");
}

.c-loader {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  justify-content: center;
  padding: 3.8rem;
}
.c-loader__text {
  color: #757575;
}

.c-mobile-sticky-bottom {
  bottom: 0;
  display: none;
  justify-content: center;
  left: 0;
  padding: 0.8rem;
  position: fixed;
  right: 0;
  width: 100vw;
  z-index: 80;
}

@media screen and (min-width: 1100px) {
  .c-mobile-sticky-bottom {
    display: none;
  }
}
/**
 * MODAL
 *
 * Modal (dialog) component for displaying overlay content with backdrop.
 * Uses native <dialog> element with custom styling and animations.
 *
 * STRUCTURE:
 * - c-modal ............... Main modal container (applied to <dialog>)
 * - c-modal__title ........ Modal title with icon support
 * - c-modal__header ....... Header section
 * - c-modal__body ......... Main content area
 * - c-modal__footer ....... Footer section (typically for buttons)
 *
 * STATES:
 * - is-open ............... Open state (applies scale and opacity animation)
 *
 * USAGE EXAMPLES:
 *
 * // Basic modal
 * <dialog class="c-modal">
 *   <div class="c-modal__header">
 *     <h2 class="c-modal__title">
 *       <svg class="w-icon w-icon_sm">
 *         <use href="svg/defs.svg#octicon-info"></use>
 *       </svg>
 *       Confirm Action
 *     </h2>
 *   </div>
 *   <div class="c-modal__body">
 *     <p>Are you sure you want to proceed?</p>
 *   </div>
 *   <div class="c-modal__footer">
 *     <button class="w-btn w-btn_secondary w-btn_sm">Cancel</button>
 *     <button class="w-btn w-btn_primary w-btn_sm">Confirm</button>
 *   </div>
 * </dialog>
 *
 * // Open modal (add class with JavaScript)
 * <dialog class="c-modal is-open">
 *   ...
 * </dialog>
 *
 * // Simple modal without footer
 * <dialog class="c-modal">
 *   <div class="c-modal__header">
 *     <h2 class="c-modal__title">Information</h2>
 *   </div>
 *   <div class="c-modal__body">
 *     <p>This is some important information.</p>
 *   </div>
 * </dialog>
 *
 */
.c-modal {
  background-color: #fff;
  border: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  line-height: 1.46;
  margin: 0 auto;
  max-height: 600px;
  opacity: 0;
  position: fixed;
  top: 48px;
  transform: scaleY(0);
  transition: all 0.4s ease-in;
  width: 500px;
  z-index: 100;
}
.c-modal__title {
  align-items: center;
  display: flex;
  gap: 0.8rem;
}
.c-modal__header, .c-modal__body, .c-modal__footer {
  margin: 1.6rem;
}
.c-modal__header {
  margin-bottom: 2.4rem;
}
.c-modal__footer {
  display: flex;
  gap: 1.6rem;
  margin-top: 2.4rem;
}
.c-modal.is-open {
  opacity: 1;
  transform: scaleY(1);
}
.c-modal::backdrop {
  background-color: #607d8b;
  opacity: 0.5;
  transition: all 0.7s;
}
@starting-style {
  .c-modal::backdrop {
    opacity: 0;
  }
}

.c-navbar {
  --search-width: 100%;
  --subnav-width: 100%;
  --subnav-block-padding: 1.6rem;
  --subnav-primary-left: 0;
  --subnav-secondary-right: 0;
  --link-inline-margin: 0;
  --secondary-link-inline-padding: 0.8rem;
  --hamburger-font-size: 1.3rem;
  --logo-margin-right: 0.8rem;
  --hamburger-text-block: none;
  align-items: center;
  display: flex;
  fill: #cfd8dc;
  height: 100%;
}
.c-navbar a {
  fill: inherit;
}
.c-navbar input:checked + .c-navbar__link {
  background: #37474f;
}
.c-navbar input:checked + .c-navbar__link + .c-navbar__sub-nav {
  display: block;
}
.c-navbar__item input[type=checkbox]:checked + label.w-tooltip-wrapper .w-tooltip {
  opacity: 0;
  visibility: hidden;
}
.c-navbar .w-icon {
  height: 18px;
  width: 18px;
}
.c-navbar__logo {
  bottom: -2px;
  margin-right: var(--logo-margin-right);
  position: relative;
}
.c-navbar__logo .c-navbar__link {
  background: transparent;
  padding: 0;
}
.c-navbar__logo .c-navbar__link:hover {
  background: transparent;
}
.c-navbar__nav, .c-navbar__item, .c-navbar__link {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}
.c-navbar__link {
  color: #cfd8dc;
  cursor: pointer;
  margin-inline: var(--link-inline-margin);
  text-decoration: none;
  transition: all 0.12s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  width: 100%;
}
.c-navbar__link:hover, .c-navbar__link_active {
  background-color: #37474f;
  color: #eceff1;
}
.c-navbar__link_hamburger {
  color: #cfd8dc;
}
.c-navbar__link_hamburger:hover {
  color: #eceff1;
}
.c-navbar__link_hamburger .w-text {
  display: var(--hamburger-text-block);
  font-size: var(--hamburger-font-size);
  margin-left: 0.4rem;
}
.c-navbar__sub-nav {
  background-color: #fff;
  box-shadow: 3px 6px 8px rgba(33, 33, 33, 0.16);
  display: none;
  height: auto;
  padding-block: var(--subnav-block-padding);
  position: absolute;
  top: 48px;
  width: var(--subnav-width);
  z-index: 50;
}
.c-navbar__sub-nav .c-navbar__link {
  color: #263238;
  padding: 0.8rem 3.8rem;
}
.c-navbar__sub-nav .c-navbar__link:hover, .c-navbar__sub-nav .c-navbar__link_active {
  background-color: #eceff1;
}
.c-navbar__sub-nav .c-navbar__link .w-icon {
  fill: #212121;
  margin-left: -23px;
  position: absolute;
}
.c-navbar_primary .c-navbar__nav_mobile {
  display: block;
}
.c-navbar_primary .c-navbar__nav_desktop {
  display: none;
  margin-left: 2.4rem;
}
.c-navbar_primary .c-navbar__nav_desktop .c-navbar__link {
  padding-inline: 1.6rem;
}
.c-navbar_primary .c-navbar__sub-nav {
  left: var(--subnav-primary-left);
}
.c-navbar_secondary .c-navbar__link {
  padding-inline: var(--secondary-link-inline-padding);
}
.c-navbar_secondary .c-navbar__item:first-child .c-navbar__sub-nav {
  right: auto;
}
.c-navbar_secondary .c-navbar__sub-nav {
  right: var(--subnav-secondary-right);
}
.c-navbar_secondary .c-navbar__sub-nav .c-navbar__link {
  padding: 0.8rem 3.8rem;
}
.c-navbar_secondary .c-navbar__sub-nav .c-navbar__link:hover, .c-navbar_secondary .c-navbar__sub-nav .c-navbar__link_active {
  background-color: #eceff1;
}
.c-navbar__search {
  width: var(--search-width);
}
.c-navbar__search .c-navbar__item .w-icon {
  height: 14px;
  width: 14px;
}

@media screen and (min-width: 360px) {
  .c-navbar {
    --hamburger-text-block: block;
  }
}
@media screen and (min-width: 480px) {
  .c-navbar {
    --hamburger-font-size: 1.4rem;
    --hamburger-margin-left: 1.6rem;
    --subnav-width: auto;
    --subnav-primary-left: auto;
    --secondary-link-inline-padding: 0.8rem;
  }
  .c-navbar .w-icon {
    height: 24px;
    width: 24px;
  }
}
@media screen and (min-width: 768px) {
  .c-navbar {
    --hamburger-font-size: 1.5rem;
    --search-width: 460px;
  }
}
@media screen and (min-width: 1100px) {
  .c-navbar__item {
    position: relative;
  }
  .c-navbar_primary .c-navbar__nav_mobile {
    display: none;
  }
  .c-navbar_primary .c-navbar__nav_desktop {
    display: flex;
  }
}
.c-nav-inline ul {
  display: inline-flex;
}
.c-nav-inline a:hover {
  text-decoration: underline;
}
.c-nav-inline a:after {
  content: "|";
  margin-inline: 0.4rem;
}
.c-nav-inline li:last-child a:after {
  content: "";
}

.c-note {
  background-color: #ffb74d;
  border-radius: 3px;
  bottom: 0;
  box-shadow: 3px 6px 8px rgba(33, 33, 33, 0.16);
  display: inline-block;
  margin: 3.8rem;
  position: fixed;
  right: 0;
  transform: translateX(0);
  transition: all 0.12s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.c-note-is-hidden {
  transform: translateX(100vw);
}
.c-note__header {
  border-bottom: 1px solid #ffcc80;
  display: flex;
  justify-content: end;
}
.c-note__content {
  padding: 0.8rem;
}

@media screen and (min-width: 1100px) {
  .c-note {
    max-width: 20vw;
  }
  .c-note__content {
    padding: 1.6rem;
  }
}
.c-note-assistant {
  --dropdown-offset: auto;
  --note-assistant-group-margin: 0.8rem;
  --dropdown-width: 100%;
  --toggle-text-width: 270px;
  --page-counter-width: 70px;
  --c-bar-width: calc(100% - 1.6rem * 2);
}
.c-note-assistant__group {
  display: flex;
  justify-content: flex-end;
  margin-inline: var(--note-assistant-group-margin);
  width: 100%;
}
.c-note-assistant .c-bar {
  width: var(--c-bar-width);
}
.c-note-assistant .c-bar__group {
  flex-wrap: wrap-reverse;
  width: 100%;
}
.c-note-assistant .c-dropdown {
  left: var(--dropdown-offset);
  right: 0;
  width: var(--dropdown-width);
}
.c-note-assistant .c-dropdown__toggle span {
  display: inline-block;
  max-width: var(--toggle-text-width);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-note-assistant__page-counter {
  width: var(--page-counter-width);
}

@media screen and (min-width: 480px) {
  .c-note-assistant {
    --toggle-text-width: 370px;
  }
}
@media screen and (min-width: 768px) {
  .c-note-assistant {
    --dropdown-offset: calc(-0.8rem - 2px);
    --dropdown-width: calc(100% + 178px);
    --toggle-text-width: 330px;
    --note-assistant-group-margin: 0;
    --c-bar-width: 580px;
  }
  .c-note-assistant__group {
    justify-content: start;
  }
  .c-note-assistant__group:last-child {
    justify-content: end;
  }
  .c-note-assistant .c-bar__group {
    flex-wrap: nowrap;
  }
}
.c-overlay {
  background-color: #607d8b;
  height: 100vh;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transition: all 1.3s allow-discrete;
  width: 100vw;
  z-index: 99;
}
.c-overlay.is-active {
  opacity: 0.5;
  pointer-events: auto;
}

.c-popover {
  background-color: #fff;
  border: 2px solid #b0bec5;
  border-radius: 4px;
  color: #212121;
  font-size: 1.4rem;
  left: 1.6rem;
  max-width: 560px;
  min-width: 400px;
  position: absolute;
  right: 1.6rem;
  z-index: 40;
}
.c-popover__header {
  border-bottom: 1px solid #eceff1;
  display: flex;
  justify-content: space-between;
  padding: 0.8rem;
}
.c-popover__header p {
  font-weight: bold;
  margin: 0;
}
.c-popover__content {
  padding: 0.8rem;
}

.c-root {
  --footer-padding-bottom: 1.6rem;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
  position: relative;
}
.c-root__header {
  background-color: #263238;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 50;
}
.c-root__header .l-container__inside {
  align-items: center;
  box-shadow: 0 4px 8px rgba(33, 33, 33, 0.4);
  display: flex;
  height: 48px;
  justify-content: space-between;
}
.c-root__main {
  margin-top: 3.8rem;
  overflow-x: hidden;
  padding-top: 1.6rem;
  position: relative;
}
.c-root__main .c-bar_vertical {
  display: flex;
  position: fixed;
  right: 0.8rem;
  top: calc(3.8rem + 1.6rem);
  z-index: 2;
}
.c-root__main .c-bar_vertical .c-bar {
  right: 3.2rem;
  top: -0.7rem;
}
.c-root__footer {
  display: flex;
  flex-direction: column;
  font-size: 1.2rem;
  justify-content: flex-end;
  padding: 0.8rem;
  padding-bottom: var(--footer-padding-bottom);
  position: relative;
  text-align: center;
  z-index: 0;
}
.c-root__footer .c-navbar {
  margin-bottom: 0.4rem;
}

@media screen and (min-width: 768px) {
  .c-root__footer {
    flex-direction: row;
    font-size: 1.2rem;
    padding: 0.4rem 1.6rem 0.4rem 0.8rem;
  }
  .c-root__footer .w-copyright {
    margin-left: 1.6rem;
  }
}
/*
 * Responsive table
 */
.c-table {
  border-collapse: collapse;
  table-layout: auto;
  width: 100%;
}
.c-table td,
.c-table th {
  white-space: nowrap;
}
.c-table__row {
  border-bottom: 1px solid #e0e0e0;
}
.c-table__row:last-child:not(:only-child) {
  border-bottom: none;
}
.c-table__header-cell {
  font-weight: 700;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .c-table_unstack-from-sm.c-table_is-responsive .c-table__head {
    display: table-header-group;
  }
  .c-table_unstack-from-sm.c-table_is-responsive .c-table__cell {
    padding-block: 1.6rem;
  }
  .c-table_unstack-from-sm.c-table_is-responsive .c-table__body {
    display: table-row-group;
  }
  .c-table_unstack-from-sm.c-table_is-responsive .c-table__row {
    border-bottom: 1px solid #e0e0e0;
  }
  .c-table_unstack-from-sm.c-table_is-responsive .c-table__row:last-child:not(:only-child) {
    border-bottom: none;
  }
  .c-table_unstack-from-sm.c-table_is-responsive .c-table__cell {
    display: table-cell;
  }
  .c-table_unstack-from-sm.c-table_is-responsive .c-table__cell:is(:empty) {
    display: table-cell;
  }
  .c-table_unstack-from-sm.c-table_is-responsive .c-table__cell[data-label]:not(:empty)::before {
    content: "";
  }
}
@media screen and (min-width: 1100px) {
  .c-table_unstack-from-md.c-table_is-responsive .c-table__head {
    display: table-header-group;
  }
  .c-table_unstack-from-md.c-table_is-responsive .c-table__cell {
    padding-block: 1.6rem;
  }
  .c-table_unstack-from-md.c-table_is-responsive .c-table__body {
    display: table-row-group;
  }
  .c-table_unstack-from-md.c-table_is-responsive .c-table__row {
    border-bottom: 1px solid #e0e0e0;
  }
  .c-table_unstack-from-md.c-table_is-responsive .c-table__row:last-child:not(:only-child) {
    border-bottom: none;
  }
  .c-table_unstack-from-md.c-table_is-responsive .c-table__cell {
    display: table-cell;
  }
  .c-table_unstack-from-md.c-table_is-responsive .c-table__cell:is(:empty) {
    display: table-cell;
  }
  .c-table_unstack-from-md.c-table_is-responsive .c-table__cell[data-label]:not(:empty)::before {
    content: "";
  }
}

.c-table_is-responsive .c-table__head {
  display: none;
}
.c-table_is-responsive .c-table__body {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-block: 1.6rem;
}
.c-table_is-responsive .c-table__row {
  border-bottom: none;
}
.c-table_is-responsive .c-table__cell {
  align-items: center;
  display: flex;
  gap: 0.8rem;
  padding-block: 0.8rem;
}
.c-table_is-responsive .c-table__cell:is(:empty) {
  display: none;
}
.c-table_is-responsive .c-table__cell[data-label]:not(:empty)::before {
  content: attr(data-label) ": ";
  font-weight: bold;
}

.c-tabs__nav {
  display: flex;
  gap: 0.8rem;
}
.c-tabs__btn {
  font-weight: normal;
}
.c-tabs__btn.is-active {
  border-color: #78909c;
}

.c-toc__action-bar_expand-collapse {
  display: none;
}
.c-toc__chapter {
  display: block;
  font-weight: 700;
  margin-top: 0.8rem;
  padding: 0.4rem 0;
  text-transform: uppercase;
}
.c-toc__item {
  list-style-type: none;
  margin-left: 0.8rem;
  padding: 0.2rem 0;
}
.c-toc__item-header {
  line-height: 1.25;
  position: relative;
}
.c-toc__toggle {
  left: -1.8rem;
  position: absolute;
  top: 0.35rem;
}
.c-toc__link {
  border-radius: 3px;
  display: block;
  margin-left: -0.4rem;
  padding: 0.4rem calc(0.4rem * 2);
  text-decoration: none;
  transition: all 0.12s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.c-toc__link:hover, .c-toc__link_is-active {
  background-color: #f5f5f5;
}
.c-toc__link_is-active {
  font-weight: 700;
}
.c-toc__list {
  padding: 0;
}
.c-toc__drag-image {
  align-items: center;
  background-color: #fff;
  border: 1px solid #9e9e9e;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: default;
  display: flex;
  font-size: 15px;
  font-weight: 700;
  gap: 8px;
  left: -1000px;
  max-width: 400px;
  overflow: hidden;
  padding: 8px 14px 8px 10px;
  pointer-events: none;
  position: fixed;
  text-overflow: ellipsis;
  top: -1000px;
  white-space: nowrap;
  z-index: 10000;
}
.c-toc__drag-image::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='%236b7280'/%3E%3Ccircle cx='8' cy='2' r='1.5' fill='%236b7280'/%3E%3Ccircle cx='2' cy='8' r='1.5' fill='%236b7280'/%3E%3Ccircle cx='8' cy='8' r='1.5' fill='%236b7280'/%3E%3Ccircle cx='2' cy='14' r='1.5' fill='%236b7280'/%3E%3Ccircle cx='8' cy='14' r='1.5' fill='%236b7280'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  cursor: default;
  display: block;
  flex-shrink: 0;
  height: 16px;
  width: 10px;
}

@media screen and (min-width: 1200px) {
  .c-toc__action-bar_expand-collapse {
    display: flex;
  }
}
/**
 * PAGES
 *
 * Page classes (`p-`) define styles specific to individual pages or page types.
 * They handle page-specific layouts, styling, and behaviors.
 *
 * Key characteristics:
 * - Pages contain styles that are **unique to specific page templates**
 * - They can **override or extend** component and widget styles for page-specific needs
 * - Page styles are applied to the **highest level** of a page's structure
 * - Should be used sparingly - prefer reusable components when possible
 *
 * CONTENTS:
 * - Error .................. Error page styles (404, 500, etc.)
 *
 * NOTE: Most pages should be built using components and layouts.
 * Only use page-specific styles when absolutely necessary.
 *
 */
.p-error .w-code {
  font-size: 1.4rem;
}

/**
 * LAYOUTS
 *
 * Layout classes (`l-`) define the structure and positioning of page sections.
 * They control **how content is arranged** but do not dictate **how it looks**.
 *
 * Key characteristics:
 * - Layouts define the **grid or flexbox system** of a page
 * - They control **positioning and spacing** of major page sections
 * - They do **not** include specific styles like colors, shadows, or decorative visuals
 * - Layouts are **structural only** - visual styling belongs in components
 *
 * CONTENTS:
 * - Container .............. Centered max-width container for content
 * - Contract ............... Contract-specific layout (document structure)
 * - Styles ................. Styles page layout (style guide/documentation)
 *
 * NOTE: Layouts should be structural only.
 * Visual styling (colors, borders, shadows) belongs in components.
 *
 */
.l-container {
  margin: 0 auto;
}
.l-container_fullwidth {
  width: 100%;
}
.l-container_medium {
  max-width: 1152px;
}
.l-container__inside {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}

.l-contract {
  margin-right: 0.8rem;
}
.u-editmode_readonly .l-contract {
  margin-right: 0;
}

@media screen and (min-width: 1200px) {
  .l-contract {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: 380px 1fr auto;
    margin-right: 0;
    min-height: 100vh;
    overflow-x: hidden;
  }
  .u-editmode_readonly .l-contract {
    grid-template-columns: 380px 1fr;
  }
  .l-contract__aside {
    z-index: 1;
  }
  .l-contract__aside .c-bar,
  .l-contract__aside .c-card {
    max-width: 380px;
    width: 100%;
  }
}
@media screen and (min-width: 1536px) {
  .l-contract {
    grid-template-columns: 480px 1fr auto;
  }
  .u-editmode_readonly .l-contract {
    grid-template-columns: 480px 1fr;
  }
  .l-contract__aside .c-bar,
  .l-contract__aside .c-card {
    max-width: 480px;
  }
}
.l-styles__settings {
  display: grid;
  gap: 0.8rem;
}

@media screen and (min-width: 1200px) {
  .l-styles__settings {
    grid-template-columns: 1fr minmax(0, 640px);
  }
}
/**
 * To prevent naming collisions, all custom CSS classes for "components" and "widgets"
 * are prefixed with "c-" (components) or "w-" (widgets).
 *
 * This convention ensures consistent and maintainable styling across the application.
 * For more details, see app.scss.
 */
#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  color: white;
  padding: 1rem 1rem 1rem 3.7rem;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.ql-container {
  font-family: "Roboto", sans-serif;
  font-size: 1.5rem;
  position: static;
}
.ql-container.ql-snow {
  border: none;
}

.ql-editor {
  min-width: 1em;
  overflow-y: clip;
  padding: 0;
}

.ql-snow .ql-editor {
  line-height: 1.46;
}
.ql-snow .ql-editor a {
  text-decoration: none;
}
.ql-snow .ql-editor ol,
.ql-snow .ql-editor ul {
  padding-left: 1.2rem;
}
.ql-snow .ql-editor li {
  padding: 0;
  position: static;
}
.ql-snow .ql-editor li > .ql-ui {
  margin-left: -1.2rem;
}
.ql-snow .ql-editor li > .ql-ui:before {
  margin: 0;
  width: auto;
}
.ql-snow .ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 1.6rem;
}
.ql-snow .ql-editor:focus-visible {
  box-shadow: none;
}

.ql-editor:focus td {
  border: 1px solid #757575;
}

.ql-container table {
  table-layout: auto;
}
.ql-container td, .ql-container th {
  max-width: 200px;
  min-width: 40px;
}
.ql-container td[data-table-header], .ql-container th[data-table-header] {
  font-weight: bold;
}
.ql-container.ql-disabled td {
  border: none;
}
.ql-container.ql-disabled td[data-table-header] {
  border-bottom: 1px solid #757575;
}

.w-ql-annotation {
  margin-inline: 0.4rem;
  position: relative;
}
.w-ql-annotation a {
  border-color: inherit;
  color: inherit;
}
.w-ql-annotation_block {
  display: block;
}
.w-ql-annotation_inline {
  display: inline-block;
}
.w-ql-annotation_inline::before, .w-ql-annotation_inline::after {
  position: absolute;
}
.w-ql-annotation_inline::before {
  content: "[";
  left: 0;
}
.w-ql-annotation_inline::after {
  content: "]";
  right: 0;
}
.w-ql-annotation_inline p {
  margin: 0 !important;
}
.w-ql-annotation_inline .ql-editor {
  align-items: center;
  display: flex;
  justify-content: center;
  line-height: inherit;
  overflow: visible;
  position: relative;
}
.w-ql-annotation_inline .ql-editor::before {
  font-style: normal;
  left: auto;
  right: auto;
}
.w-ql-annotation_inline .ql-editor.ql-blank:before {
  content: "...";
  position: absolute;
  top: 0;
}
.w-ql-annotation_inline .ql-container {
  display: inline-block;
  padding-inline: 0.72rem;
}

.w-ql-style_m1 {
  border-bottom: 1px solid currentcolor;
}
.w-ql-style_m2 {
  background-color: #ffeb3b;
  border-bottom: 1px solid currentcolor;
}
.w-ql-style_tl {
  border-bottom: 1px solid #ff9800;
}
.w-ql-style_fee {
  border-bottom: 1px solid #76ff03;
}
.w-ql-style_lang {
  border-bottom: 1px solid #00b0ff;
}
.w-ql-style_lc {
  border-bottom: 1px solid #ff1744;
}
.w-ql-style_u1 {
  background-color: #cfd8dc;
}
.w-ql-style_u2 {
  background-color: #7e57c2;
}
.w-ql-style_annotation_master {
  color: #212121;
}
.w-ql-style_annotation_user {
  color: #f44336;
}
.w-ql-style_annotation_author {
  color: #0d47a1;
}

/**
 * BASE
 *
 * Base styles define global settings like fonts, animations, and resets.
 * These are the foundational styles that affect the entire application.
 *
 * Key characteristics:
 * - No classes, only global CSS rules
 * - Font imports and @font-face declarations
 * - @keyframes animations
 * - Global resets and normalizations
 *
 * CONTENTS:
 * - Animations ............. Keyframe animations (@keyframes)
 * - Fonts .................. Font imports and @font-face declarations
 *
 */
.blazored-toast-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 100;
}
.blazored-toast-container.position-topleft {
  left: 1.6rem;
  top: 1.6rem;
}
.blazored-toast-container.position-topright {
  right: 1.6rem;
  top: 1.6rem;
}
.blazored-toast-container.position-topcenter {
  left: 50%;
  top: 1.6rem;
  transform: translate(-50%, 0%);
}
.blazored-toast-container.position-bottomleft {
  bottom: 1.6rem;
  left: 1.6rem;
}
.blazored-toast-container.position-bottomright {
  bottom: 1.6rem;
  right: 1.6rem;
}
.blazored-toast-container.position-bottomcenter {
  bottom: 1.6rem;
  left: 50%;
  transform: translate(-50%, 0%);
}
.blazored-toast-container .w-icon {
  flex-shrink: 0;
  margin-top: -0.2rem;
}
.blazored-toast-container .w-icon_info {
  fill: #2196f3;
}
.blazored-toast-container .w-icon_check {
  fill: #4caf50;
}
.blazored-toast-container .w-icon_warning {
  fill: #ff9800;
}
.blazored-toast-container .w-icon_circle {
  fill: #f44336;
}

.blazored-toast {
  animation: fadeIn 1.3s;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 3px 6px 8px rgba(33, 33, 33, 0.16);
  margin-bottom: 1.6rem;
  padding: 1.6rem;
  position: relative;
  width: 340px;
}

.blazored-toast-progressbar {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  bottom: 2px;
  height: 0.4rem;
  left: 2px;
  position: absolute;
  right: 2px;
}
.blazored-toast-progressbar > span {
  background-color: #9e9e9e;
  border-bottom-left-radius: 3px;
  height: 0.4rem;
  position: absolute;
  transition: all 0.1s linear;
}

@media screen and (min-width: 480px) {
  .blazored-toast {
    width: 360px;
  }
}
@media screen and (min-width: 768px) {
  .blazored-toast {
    width: 420px;
  }
}
.c-blazored-toast__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 2.4rem;
}
.c-blazored-toast__title {
  font-size: 1.678rem;
  margin: 0;
}
.c-blazored-toast__link {
  text-decoration: underline !important;
}
.c-blazored-toast__details {
  border-radius: 3px;
  display: block;
  font-size: 1.3rem;
  padding: 0.8rem;
}
.c-blazored-toast__message {
  flex-grow: 1;
  font-size: 1.5rem;
  line-height: 1.25;
}
.c-blazored-toast__content {
  align-items: top;
  display: flex;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
.c-blazored-toast__status-border {
  border-top: 4px solid;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.c-blazored-toast__status-border.c-blazored-toast-status_info {
  border-color: #2196f3;
}
.c-blazored-toast__status-border.c-blazored-toast-status_success {
  border-color: #4caf50;
}
.c-blazored-toast__status-border.c-blazored-toast-status_warning {
  border-color: #f44336;
}
.c-blazored-toast__status-border.c-blazored-toast-status_error {
  border-color: #f44336;
}

/*# sourceMappingURL=app.css.map */