@clr/ui/clr-ui.css

CSS for Clarity

@charset "UTF-8";
/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
:where(:root, :host) {
  --cds-global-base: 20;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

progress {
  vertical-align: baseline;
}

template,
[hidden] {
  display: none;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:active,
a:hover {
  outline-width: 0;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b,
strong {
  font-weight: inherit;
}

b,
strong {
  font-weight: bolder;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background-color: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

code,
kbd,
pre,
samp {
  font-family: monospace;
  font-size: 1em;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
  margin: 0;
}

textarea {
  line-height: 1.15;
}

optgroup {
  font-weight: bold;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

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

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

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

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/* stylelint-disable-next-line meowtec/no-px */
/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/* stylelint-disable */
/* stylelint-enable */
/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
:where(:root, :host) {
  --clr-color-neutral-0: hsl(198, 0%, 100%);
  --clr-color-neutral-50: hsl(198, 0%, 98%);
  --clr-color-neutral-100: hsl(198, 0%, 95%);
  --clr-color-neutral-200: hsl(198, 0%, 91%);
  --clr-color-neutral-300: hsl(198, 0%, 87%);
  --clr-color-neutral-400: hsl(198, 0%, 80%);
  --clr-color-neutral-500: hsl(198, 0%, 70%);
  --clr-color-neutral-600: hsl(198, 0%, 55%);
  --clr-color-neutral-700: hsl(198, 0%, 40%);
  --clr-color-neutral-800: hsl(198, 0%, 27%);
  --clr-color-neutral-900: hsl(198, 0%, 20%);
  --clr-color-neutral-1000: hsl(198, 0%, 0%);
  --clr-color-on-neutral-0: hsl(198, 0%, 0%);
  --clr-color-on-neutral-50: hsl(198, 0%, 0%);
  --clr-color-on-neutral-100: hsl(198, 0%, 0%);
  --clr-color-on-neutral-200: hsl(198, 0%, 0%);
  --clr-color-on-neutral-300: hsl(198, 0%, 0%);
  --clr-color-on-neutral-400: hsl(198, 0%, 0%);
  --clr-color-on-neutral-500: hsl(198, 0%, 0%);
  --clr-color-on-neutral-600: hsl(198, 0%, 100%);
  --clr-color-on-neutral-700: hsl(198, 0%, 100%);
  --clr-color-on-neutral-800: hsl(198, 0%, 100%);
  --clr-color-on-neutral-900: hsl(198, 0%, 100%);
  --clr-color-on-neutral-1000: hsl(198, 0%, 100%);
  --clr-color-action-50: hsl(198, 83%, 94%);
  --clr-color-action-100: hsl(198, 81%, 88%);
  --clr-color-action-200: hsl(198, 78%, 78%);
  --clr-color-action-300: hsl(198, 69%, 69%);
  --clr-color-action-400: hsl(198, 66%, 57%);
  --clr-color-action-500: hsl(198, 80%, 46%);
  --clr-color-action-600: hsl(198, 100%, 32%);
  --clr-color-action-700: hsl(198, 100%, 28%);
  --clr-color-action-800: hsl(198, 100%, 24%);
  --clr-color-action-900: hsl(198, 100%, 21%);
  --clr-color-action-1000: hsl(198, 100%, 15%);
  --clr-color-on-action-50: hsl(198, 0%, 0%);
  --clr-color-on-action-100: hsl(198, 0%, 0%);
  --clr-color-on-action-200: hsl(198, 0%, 0%);
  --clr-color-on-action-300: hsl(198, 0%, 0%);
  --clr-color-on-action-400: hsl(198, 0%, 0%);
  --clr-color-on-action-500: hsl(198, 0%, 0%);
  --clr-color-on-action-600: hsl(198, 0%, 100%);
  --clr-color-on-action-700: hsl(198, 0%, 100%);
  --clr-color-on-action-800: hsl(198, 0%, 100%);
  --clr-color-on-action-900: hsl(198, 0%, 100%);
  --clr-color-on-action-1000: hsl(198, 0%, 100%);
  --clr-color-secondary-action-50: hsl(282, 100%, 95%);
  --clr-color-secondary-action-100: hsl(282, 59%, 87%);
  --clr-color-secondary-action-200: hsl(282, 51%, 78%);
  --clr-color-secondary-action-300: hsl(282, 45%, 70%);
  --clr-color-secondary-action-400: hsl(282, 44%, 62%);
  --clr-color-secondary-action-500: hsl(282, 43%, 54%);
  --clr-color-secondary-action-600: hsl(282, 50%, 45%);
  --clr-color-secondary-action-700: hsl(282, 69%, 37%);
  --clr-color-secondary-action-800: hsl(282, 100%, 29%);
  --clr-color-secondary-action-900: hsl(282, 100%, 22%);
  --clr-color-secondary-action-1000: hsl(282, 100%, 14%);
  --clr-color-on-secondary-action-50: hsl(198, 0%, 0%);
  --clr-color-on-secondary-action-100: hsl(198, 0%, 0%);
  --clr-color-on-secondary-action-200: hsl(198, 0%, 0%);
  --clr-color-on-secondary-action-300: hsl(198, 0%, 0%);
  --clr-color-on-secondary-action-400: hsl(198, 0%, 0%);
  --clr-color-on-secondary-action-500: hsl(198, 0%, 100%);
  --clr-color-on-secondary-action-600: hsl(198, 0%, 100%);
  --clr-color-on-secondary-action-700: hsl(198, 0%, 100%);
  --clr-color-on-secondary-action-800: hsl(198, 0%, 100%);
  --clr-color-on-secondary-action-900: hsl(198, 0%, 100%);
  --clr-color-on-secondary-action-1000: hsl(198, 0%, 100%);
  --clr-color-danger-50: hsl(9, 100%, 97%);
  --clr-color-danger-100: hsl(9, 95%, 92%);
  --clr-color-danger-200: hsl(9, 91%, 86%);
  --clr-color-danger-300: hsl(9, 83%, 76%);
  --clr-color-danger-400: hsl(9, 85%, 67%);
  --clr-color-danger-500: hsl(9, 88%, 61%);
  --clr-color-danger-600: hsl(9, 92%, 50%);
  --clr-color-danger-700: hsl(9, 100%, 43%);
  --clr-color-danger-800: hsl(9, 100%, 38%);
  --clr-color-danger-900: hsl(9, 100%, 30%);
  --clr-color-danger-1000: hsl(9, 100%, 20%);
  --clr-color-on-danger-50: hsl(198, 0%, 0%);
  --clr-color-on-danger-100: hsl(198, 0%, 0%);
  --clr-color-on-danger-200: hsl(198, 0%, 0%);
  --clr-color-on-danger-300: hsl(198, 0%, 0%);
  --clr-color-on-danger-400: hsl(198, 0%, 0%);
  --clr-color-on-danger-500: hsl(198, 0%, 0%);
  --clr-color-on-danger-600: hsl(198, 0%, 0%);
  --clr-color-on-danger-700: hsl(198, 0%, 100%);
  --clr-color-on-danger-800: hsl(198, 0%, 100%);
  --clr-color-on-danger-900: hsl(198, 0%, 100%);
  --clr-color-on-danger-1000: hsl(198, 0%, 100%);
  --clr-color-warning-50: hsl(48, 100%, 95%);
  --clr-color-warning-100: hsl(48, 100%, 89%);
  --clr-color-warning-200: hsl(48, 100%, 83%);
  --clr-color-warning-300: hsl(48, 98%, 72%);
  --clr-color-warning-400: hsl(48, 94%, 57%);
  --clr-color-warning-500: hsl(48, 95%, 48%);
  --clr-color-warning-600: hsl(46, 100%, 45%);
  --clr-color-warning-700: hsl(43, 100%, 42%);
  --clr-color-warning-800: hsl(41, 100%, 34%);
  --clr-color-warning-900: hsl(38, 100%, 28%);
  --clr-color-warning-1000: hsl(31, 100%, 19%);
  --clr-color-on-warning-50: hsl(198, 0%, 0%);
  --clr-color-on-warning-100: hsl(198, 0%, 0%);
  --clr-color-on-warning-200: hsl(198, 0%, 0%);
  --clr-color-on-warning-300: hsl(198, 0%, 0%);
  --clr-color-on-warning-400: hsl(198, 0%, 0%);
  --clr-color-on-warning-500: hsl(198, 0%, 0%);
  --clr-color-on-warning-600: hsl(198, 0%, 0%);
  --clr-color-on-warning-700: hsl(198, 0%, 0%);
  --clr-color-on-warning-800: hsl(198, 0%, 0%);
  --clr-color-on-warning-900: hsl(198, 0%, 0%);
  --clr-color-on-warning-1000: hsl(198, 0%, 100%);
  --clr-color-success-50: hsl(93, 52%, 88%);
  --clr-color-success-100: hsl(93, 58%, 75%);
  --clr-color-success-200: hsl(93, 76%, 49%);
  --clr-color-success-300: hsl(93, 77%, 44%);
  --clr-color-success-400: hsl(93, 79%, 40%);
  --clr-color-success-500: hsl(93, 67%, 38%);
  --clr-color-success-600: hsl(93, 85%, 32%);
  --clr-color-success-700: hsl(93, 100%, 26%);
  --clr-color-success-800: hsl(93, 100%, 21%);
  --clr-color-success-900: hsl(93, 100%, 16%);
  --clr-color-success-1000: hsl(93, 100%, 13%);
  --clr-color-on-success-50: hsl(198, 0%, 0%);
  --clr-color-on-success-100: hsl(198, 0%, 0%);
  --clr-color-on-success-200: hsl(198, 0%, 0%);
  --clr-color-on-success-300: hsl(198, 0%, 0%);
  --clr-color-on-success-400: hsl(198, 0%, 0%);
  --clr-color-on-success-500: hsl(198, 0%, 0%);
  --clr-color-on-success-600: hsl(198, 0%, 0%);
  --clr-color-on-success-700: hsl(198, 0%, 100%);
  --clr-color-on-success-800: hsl(198, 0%, 100%);
  --clr-color-on-success-900: hsl(198, 0%, 100%);
  --clr-color-on-success-1000: hsl(198, 0%, 100%);
}

/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
:where(:root, :host), :where(:root, :host) [clr-density] {
  --clr-grid-gutter-width: var(--clr-base-horizontal-offset-2xl);
  --clr-grid-container-padding: calc(var(--clr-grid-gutter-width) * 0.5);
  --clr-grid-column-padding: calc(var(--clr-grid-gutter-width) * 0.5);
  --clr-grid-row-margin: calc(var(--clr-grid-gutter-width) * -0.5);
}

/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
:where(:root, :host) {
  --clr-basefont-size: 125%;
  --clr-global-borderradius: var(--cds-alias-object-border-radius-100);
  --clr-global-borderwidth: var(--cds-alias-object-border-width-100);
}
:where(:root, :host), :where(:root, :host) [cds-theme] {
  --clr-close-color: var(--cds-alias-object-interaction-color);
  --clr-close-color-hover: var(--cds-alias-object-interaction-color-hover);
  --clr-close-color-active: var(--cds-alias-object-interaction-color-active);
  --clr-global-app-background: var(--cds-alias-object-app-background);
  --clr-global-selection-color: var(--cds-alias-object-interaction-background-selected);
  --clr-global-on-selection-color: var(--cds-alias-object-interaction-color-selected);
  --clr-global-hover-color: var(--cds-global-typography-link-color-hover);
  --clr-global-content-header-font-color: var(--cds-alias-typography-color-400);
  --clr-global-font-color: var(--cds-alias-typography-color-500);
  --clr-global-success-color: var(--cds-alias-status-success);
  --clr-global-error-color: var(--cds-alias-status-danger);
}

:where(:root, :host) {
  --clr-popover-box-shadow-color: rgba(140, 140, 140, 0.25);
}

/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
:where(:root, :host) {
  --clr-metropolis-font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --clr-body-font: var(--clr-metropolis-font-family);
  --clr-font: var(--clr-body-font);
  --clr-display-font: var(--clr-metropolis-font-family);
  --clr-font-weight-light: var(--cds-alias-typography-font-weight-light);
  --clr-font-weight-regular: var(--cds-alias-typography-font-weight-regular);
  --clr-font-weight-semibold: var(--cds-alias-typography-font-weight-semibold);
  --clr-font-weight-bold: var(--cds-alias-typography-font-weight-bold);
  --clr-font-weight-extrabold: var(--cds-alias-typography-font-weight-extrabold);
  --clr-h1-font-weight: var(--cds-alias-typography-display-font-weight);
  --clr-h1-font-family: var(--clr-display-font);
  --clr-h1-letter-spacing: calc(-0.5 * (1rem / var(--cds-global-base)));
  --clr-h2-font-family: var(--clr-display-font);
  --clr-h2-font-weight: var(--cds-alias-typography-headline-font-weight);
  --clr-h2-letter-spacing: calc(-0.4 * (1rem / var(--cds-global-base)));
  --clr-h3-font-family: var(--clr-display-font);
  --clr-h3-font-weight: var(--cds-alias-typography-title-font-weight);
  --clr-h3-letter-spacing: calc(-0.2 * (1rem / var(--cds-global-base)));
  --clr-h4-font-family: var(--clr-display-font);
  --clr-h4-font-weight: var(--cds-alias-typography-section-font-weight);
  --clr-h4-letter-spacing: calc(-0.2 * (1rem / var(--cds-global-base)));
  --clr-h5-font-family: var(--clr-display-font);
  --clr-h5-font-weight: var(--cds-alias-typography-subsection-font-weight);
  --clr-h5-letter-spacing: calc(-0.2 * (1rem / var(--cds-global-base)));
  --clr-h6-font-family: var(--clr-display-font);
  --clr-h6-font-weight: var(--cds-alias-typography-message-font-weight);
  --clr-h6-letter-spacing: calc(-0.2 * (1rem / var(--cds-global-base)));
  --clr-p0-font-weight: var(--cds-alias-typography-body-font-weight);
  --clr-p0-letter-spacing: calc(-0.1 * (1rem / var(--cds-global-base)));
  --clr-p1-font-weight: var(--cds-alias-typography-body-font-weight);
  --clr-p1-letter-spacing: calc(-0.1 * (1rem / var(--cds-global-base)));
  --clr-p2-font-weight: var(--cds-alias-typography-font-weight-medium);
  --clr-p2-letter-spacing: calc(-0.1 * (1rem / var(--cds-global-base)));
  --clr-p3-font-weight: var(--cds-alias-typography-secondary-font-weight);
  --clr-p3-letter-spacing: calc(-0.1 * (1rem / var(--cds-global-base)));
  --clr-p4-font-weight: var(--cds-alias-typography-font-weight-semibold);
  --clr-p4-letter-spacing: calc(-0.1 * (1rem / var(--cds-global-base)));
  --clr-p5-font-weight: var(--cds-alias-typography-secondary-font-weight);
  --clr-p5-letter-spacing: calc(-0.1 * (1rem / var(--cds-global-base)));
  --clr-p6-font-weight: var(--cds-alias-typography-caption-font-weight);
  --clr-p6-letter-spacing: calc(0.2 * (1rem / var(--cds-global-base)));
  --clr-p7-font-weight: var(--cds-alias-typography-smallcaption-font-weight);
  --clr-p7-letter-spacing: calc(0.5 * (1rem / var(--cds-global-base)));
  --clr-p8-font-weight: var(--cds-alias-typography-smallcaption-font-weight);
  --clr-p8-letter-spacing: calc(0.5 * (1rem / var(--cds-global-base)));
}
:where(:root, :host), :where(:root, :host) [clr-density] {
  --clr-h1-font-size: var(--clr-base-typography-font-size-display);
  --clr-h1-line-height: var(--clr-base-typography-line-height-44);
  --clr-h2-font-size: var(--clr-base-typography-font-size-headline);
  --clr-h2-line-height: var(--clr-base-typography-line-height-36);
  --clr-h3-font-size: var(--clr-base-typography-font-size-heading);
  --clr-h3-line-height: var(--clr-base-typography-line-height-32);
  --clr-h4-font-size: var(--clr-base-typography-font-size-section);
  --clr-h4-line-height: var(--clr-base-typography-line-height-24);
  --clr-h5-font-size: var(--clr-base-typography-font-size-sub-section);
  --clr-h5-line-height: var(--clr-base-typography-line-height-24);
  --clr-h6-font-size: var(--clr-base-typography-font-size-sub-section);
  --clr-h6-line-height: var(--clr-base-typography-line-height-24);
  --clr-p0-font-size: var(--clr-base-typography-font-size-default);
  --clr-p0-line-height: var(--clr-base-typography-line-height-20);
  --clr-p1-font-size: var(--clr-base-typography-font-size-default);
  --clr-p1-line-height: var(--clr-base-typography-line-height-20);
  --clr-p2-font-size: var(--clr-base-typography-font-size-inline);
  --clr-p2-line-height: var(--clr-base-typography-line-height-24);
  --clr-p3-font-size: var(--clr-base-typography-font-size-inline);
  --clr-p3-line-height: var(--clr-base-typography-line-height-24);
  --clr-p4-font-size: var(--clr-base-typography-font-size-inline);
  --clr-p4-line-height: var(--clr-base-typography-line-height-20);
  --clr-p5-font-size: var(--clr-base-typography-font-size-inline);
  --clr-p5-line-height: var(--clr-base-typography-line-height-24);
  --clr-p6-font-size: var(--clr-base-typography-font-size-caption);
  --clr-p6-line-height: var(--clr-base-typography-line-height-16);
  --clr-p7-font-size: var(--clr-base-typography-font-size-caption-small);
  --clr-p7-line-height: var(--clr-base-typography-line-height-12);
  --clr-p8-font-size: var(--clr-base-typography-font-size-caption-small);
  --clr-p8-line-height: var(--clr-base-typography-line-height-12);
}
:where(:root, :host), :where(:root, :host) [cds-theme] {
  --clr-h1-color: var(--cds-alias-typography-color-300);
  --clr-h2-color: var(--cds-alias-typography-color-300);
  --clr-h3-color: var(--cds-alias-typography-color-300);
  --clr-h4-color: var(--cds-alias-typography-color-300);
  --clr-h5-color: var(--cds-alias-typography-color-300);
  --clr-h6-color: var(--cds-alias-typography-color-300);
  --clr-p0-color: var(--cds-alias-typography-color-450);
  --clr-p1-color: var(--cds-alias-typography-color-450);
  --clr-p2-color: var(--cds-alias-typography-color-450);
  --clr-p3-color: var(--cds-alias-typography-color-450);
  --clr-p4-color: var(--cds-alias-typography-color-450);
  --clr-p5-color: var(--cds-alias-typography-color-450);
  --clr-p6-color: var(--cds-alias-typography-color-450);
  --clr-p7-color: var(--cds-alias-typography-color-450);
  --clr-p8-color: var(--cds-alias-typography-color-450);
  --clr-list-item-color: var(--cds-alias-typography-color-400);
}

/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
:where(:root, :host) {
  --clr-base-typography-font-size-caption-small: calc(10 * (1rem / var(--cds-global-base)));
  --clr-base-typography-font-size-caption: calc(11 * (1rem / var(--cds-global-base)));
  --clr-base-typography-font-size-button: var(--cds-global-space-6);
  --clr-base-typography-font-size-inline: calc(13 * (1rem / var(--cds-global-base)));
  --clr-base-typography-font-size-default: calc(14 * (1rem / var(--cds-global-base)));
  --clr-base-typography-font-size-sub-section: var(--cds-global-space-7);
  --clr-base-typography-font-size-section: calc(20 * (1rem / var(--cds-global-base)));
  --clr-base-typography-font-size-heading: var(--cds-global-space-9);
  --clr-base-typography-font-size-headline: var(--cds-global-space-10);
  --clr-base-typography-font-size-display: calc(40 * (1rem / var(--cds-global-base)));
  --clr-base-typography-line-height-12: var(--cds-global-space-6);
  --clr-base-typography-line-height-16: var(--cds-global-space-7);
  --clr-base-typography-line-height-20: calc(20 * (1rem / var(--cds-global-base)));
  --clr-base-typography-line-height-24: var(--cds-global-space-9);
  --clr-base-typography-line-height-32: var(--cds-global-space-10);
  --clr-base-typography-line-height-36: var(--cds-global-space-11);
  --clr-base-typography-line-height-44: calc(44 * (1rem / var(--cds-global-base)));
  --clr-base-border-stroke: var(--cds-global-space-2);
  --clr-base-border-radius-xs: var(--cds-global-space-2);
  --clr-base-border-radius-s: var(--cds-global-space-3);
  --clr-base-border-radius-m: var(--cds-global-space-3);
  --clr-base-border-radius-l: var(--cds-global-space-4);
  --clr-base-border-radius-xl: var(--cds-global-space-7);
  --clr-base-offset-0: var(--cds-global-space-0);
  --clr-base-vertical-offset-2xs: var(--cds-global-space-2);
  --clr-base-vertical-offset-xs: var(--cds-global-space-3);
  --clr-base-vertical-offset-s: var(--cds-global-space-4);
  --clr-base-vertical-offset-m: var(--cds-global-space-5);
  --clr-base-vertical-offset-l: var(--cds-global-space-6);
  --clr-base-vertical-offset-xl: var(--cds-global-space-7);
  --clr-base-vertical-offset-2xl: var(--cds-global-space-9);
  --clr-base-vertical-offset-3xl: var(--cds-global-space-13);
  --clr-base-vertical-offset-multi-row-s: var(--cds-global-space-4);
  --clr-base-vertical-offset-multi-row-m: calc(10 * (1rem / var(--cds-global-base)));
  --clr-base-vertical-offset-multi-row-inline-s: var(--cds-global-space-3);
  --clr-base-vertical-offset-multi-row-inline-m: var(--cds-global-space-5);
  --clr-base-vertical-offset-multi-row-outline-s: var(--cds-global-space-5);
  --clr-base-vertical-offset-multi-row-outline-m: var(--cds-global-space-6);
  --clr-base-horizontal-offset-2xs: var(--cds-global-space-2);
  --clr-base-horizontal-offset-xs: var(--cds-global-space-3);
  --clr-base-horizontal-offset-s: var(--cds-global-space-4);
  --clr-base-horizontal-offset-m: var(--cds-global-space-5);
  --clr-base-horizontal-offset-l: var(--cds-global-space-6);
  --clr-base-horizontal-offset-xl: var(--cds-global-space-7);
  --clr-base-horizontal-offset-2xl: var(--cds-global-space-9);
  --clr-base-horizontal-offset-3xl: var(--cds-global-space-13);
  --clr-base-row-height-xs: var(--cds-global-space-7);
  --clr-base-row-height-s: var(--cds-global-space-9);
  --clr-base-row-height-m: var(--cds-global-space-11);
  --clr-base-row-height-l: calc(40 * (1rem / var(--cds-global-base)));
  --clr-base-row-height-20: calc(20 * (1rem / var(--cds-global-base)));
  --clr-base-app-level-alert-row-height: var(--cds-global-space-11);
  --clr-base-dg-row-height: var(--cds-global-space-10);
  --clr-base-dg-compact-row-height: var(--cds-global-space-9);
  --clr-base-gap-xs: var(--cds-global-space-3);
  --clr-base-gap-s: var(--cds-global-space-5);
  --clr-base-gap-m: var(--cds-global-space-6);
  --clr-base-gap-l: var(--cds-global-space-7);
  --clr-base-gap-xl: var(--cds-global-space-9);
  --clr-base-gap-2xl: var(--cds-global-space-10);
  --clr-base-icon-size-xs: var(--cds-global-space-6);
  --clr-base-icon-size-s: var(--cds-global-space-7);
  --clr-base-icon-size-m: calc(20 * (1rem / var(--cds-global-base)));
  --clr-base-icon-size-l: var(--cds-global-space-9);
  --clr-base-icon-size-xl: calc(28 * (1rem / var(--cds-global-base)));
  --clr-base-icon-size-2xl: var(--cds-global-space-10);
  --clr-base-icon-size-3xl: var(--cds-global-space-11);
  --clr-base-icon-size-4xl: var(--cds-global-space-13);
  --clr-base-layout-space-0: var(--cds-global-space-0);
  --clr-base-layout-space-4xs: var(--cds-global-space-1);
  --clr-base-layout-space-3xs: var(--cds-global-space-2);
  --clr-base-layout-space-2xs: var(--cds-global-space-3);
  --clr-base-layout-space-xs: var(--cds-global-space-5);
  --clr-base-layout-space-s: var(--cds-global-space-6);
  --clr-base-layout-space-m: var(--cds-global-space-7);
  --clr-base-layout-space-l: var(--cds-global-space-9);
  --clr-base-layout-space-xl: var(--cds-global-space-11);
  --clr-base-layout-space-2xl: calc(40 * (1rem / var(--cds-global-base)));
  --clr-base-layout-space-3xl: var(--cds-global-space-12);
  --clr-base-layout-space-4xl: calc(76 * (1rem / var(--cds-global-base)));
  --clr-base-layout-space-5xl: calc(112 * (1rem / var(--cds-global-base)));
  --clr-base-icon-tooltip: var(--cds-global-space-9);
  --clr-base-spinner-s: var(--cds-global-space-8);
  --clr-base-spinner-m: var(--cds-global-space-11);
  --clr-base-spinner-l: var(--cds-global-space-14);
  --clr-base-spinner-stroke-s: var(--cds-alias-object-border-width-200);
  --clr-base-spinner-stroke-m: var(--cds-alias-object-border-width-400);
  --clr-base-spinner-stroke-l: var(--cds-global-space-4);
  --clr-base-header-height: calc(60 * (1rem / var(--cds-global-base)));
  --clr-base-tree-node-height: var(--cds-global-space-10);
  --clr-base-progress-bar-height: var(--cds-global-space-6);
  --clr-base-control-group-gap: var(--cds-global-space-0);
}

[clr-density=regular] {
  --clr-base-typography-font-size-caption-small: calc(10 * (1rem / var(--cds-global-base)));
  --clr-base-typography-font-size-caption: calc(11 * (1rem / var(--cds-global-base)));
  --clr-base-typography-font-size-button: var(--cds-global-space-6);
  --clr-base-typography-font-size-inline: calc(13 * (1rem / var(--cds-global-base)));
  --clr-base-typography-font-size-default: calc(14 * (1rem / var(--cds-global-base)));
  --clr-base-typography-font-size-sub-section: var(--cds-global-space-7);
  --clr-base-typography-font-size-section: calc(20 * (1rem / var(--cds-global-base)));
  --clr-base-typography-font-size-heading: var(--cds-global-space-9);
  --clr-base-typography-font-size-headline: var(--cds-global-space-10);
  --clr-base-typography-font-size-display: calc(40 * (1rem / var(--cds-global-base)));
  --clr-base-typography-line-height-12: var(--cds-global-space-6);
  --clr-base-typography-line-height-16: var(--cds-global-space-7);
  --clr-base-typography-line-height-20: calc(20 * (1rem / var(--cds-global-base)));
  --clr-base-typography-line-height-24: var(--cds-global-space-9);
  --clr-base-typography-line-height-32: var(--cds-global-space-10);
  --clr-base-typography-line-height-36: var(--cds-global-space-11);
  --clr-base-typography-line-height-44: calc(44 * (1rem / var(--cds-global-base)));
  --clr-base-border-stroke: var(--cds-global-space-2);
  --clr-base-border-radius-xs: var(--cds-global-space-2);
  --clr-base-border-radius-s: var(--cds-global-space-3);
  --clr-base-border-radius-m: var(--cds-global-space-5);
  --clr-base-border-radius-l: var(--cds-global-space-6);
  --clr-base-border-radius-xl: var(--cds-global-space-7);
  --clr-base-offset-0: var(--cds-global-space-0);
  --clr-base-vertical-offset-2xs: var(--cds-global-space-2);
  --clr-base-vertical-offset-xs: var(--cds-global-space-3);
  --clr-base-vertical-offset-s: var(--cds-global-space-3);
  --clr-base-vertical-offset-m: var(--cds-global-space-4);
  --clr-base-vertical-offset-l: var(--cds-global-space-6);
  --clr-base-vertical-offset-xl: var(--cds-global-space-7);
  --clr-base-vertical-offset-2xl: var(--cds-global-space-9);
  --clr-base-vertical-offset-3xl: var(--cds-global-space-12);
  --clr-base-vertical-offset-multi-row-s: var(--cds-global-space-3);
  --clr-base-vertical-offset-multi-row-m: var(--cds-global-space-5);
  --clr-base-vertical-offset-multi-row-inline-s: var(--cds-global-space-3);
  --clr-base-vertical-offset-multi-row-inline-m: var(--cds-global-space-5);
  --clr-base-vertical-offset-multi-row-outline-s: var(--cds-global-space-4);
  --clr-base-vertical-offset-multi-row-outline-m: calc(10 * (1rem / var(--cds-global-base)));
  --clr-base-horizontal-offset-2xs: var(--cds-global-space-2);
  --clr-base-horizontal-offset-xs: var(--cds-global-space-3);
  --clr-base-horizontal-offset-s: var(--cds-global-space-3);
  --clr-base-horizontal-offset-m: var(--cds-global-space-5);
  --clr-base-horizontal-offset-l: var(--cds-global-space-6);
  --clr-base-horizontal-offset-xl: var(--cds-global-space-7);
  --clr-base-horizontal-offset-2xl: var(--cds-global-space-9);
  --clr-base-horizontal-offset-3xl: var(--cds-global-space-12);
  --clr-base-row-height-xs: var(--cds-global-space-7);
  --clr-base-row-height-s: var(--cds-global-space-9);
  --clr-base-row-height-m: var(--cds-global-space-10);
  --clr-base-row-height-l: var(--cds-global-space-11);
  --clr-base-row-height-20: calc(20 * (1rem / var(--cds-global-base)));
  --clr-base-app-level-alert-row-height: var(--cds-global-space-11);
  --clr-base-dg-row-height: var(--cds-global-space-10);
  --clr-base-dg-compact-row-height: var(--cds-global-space-9);
  --clr-base-gap-xs: var(--cds-global-space-3);
  --clr-base-gap-s: var(--cds-global-space-5);
  --clr-base-gap-m: var(--cds-global-space-6);
  --clr-base-gap-l: var(--cds-global-space-7);
  --clr-base-gap-xl: var(--cds-global-space-9);
  --clr-base-gap-2xl: var(--cds-global-space-10);
  --clr-base-icon-size-xs: var(--cds-global-space-6);
  --clr-base-icon-size-s: var(--cds-global-space-7);
  --clr-base-icon-size-m: calc(20 * (1rem / var(--cds-global-base)));
  --clr-base-icon-size-l: var(--cds-global-space-9);
  --clr-base-icon-size-xl: calc(28 * (1rem / var(--cds-global-base)));
  --clr-base-icon-size-2xl: var(--cds-global-space-10);
  --clr-base-icon-size-3xl: var(--cds-global-space-10);
  --clr-base-icon-size-4xl: var(--cds-global-space-13);
  --clr-base-layout-space-0: var(--cds-global-space-0);
  --clr-base-layout-space-4xs: var(--cds-global-space-1);
  --clr-base-layout-space-3xs: var(--cds-global-space-2);
  --clr-base-layout-space-2xs: var(--cds-global-space-3);
  --clr-base-layout-space-xs: var(--cds-global-space-5);
  --clr-base-layout-space-s: var(--cds-global-space-6);
  --clr-base-layout-space-m: var(--cds-global-space-7);
  --clr-base-layout-space-l: var(--cds-global-space-9);
  --clr-base-layout-space-xl: var(--cds-global-space-10);
  --clr-base-layout-space-2xl: calc(40 * (1rem / var(--cds-global-base)));
  --clr-base-layout-space-3xl: var(--cds-global-space-12);
  --clr-base-layout-space-4xl: var(--cds-global-space-13);
  --clr-base-layout-space-5xl: var(--cds-global-space-15);
  --clr-base-icon-tooltip: var(--clr-base-icon-size-s);
  --clr-base-spinner-s: var(--clr-base-icon-size-s);
  --clr-base-spinner-m: var(--cds-global-space-10);
  --clr-base-spinner-l: var(--clr-base-layout-space-4xl);
  --clr-base-spinner-stroke-s: var(--cds-alias-object-border-width-200);
  --clr-base-spinner-stroke-m: var(--cds-alias-object-border-width-400);
  --clr-base-spinner-stroke-l: var(--cds-global-space-4);
  --clr-base-header-height: calc(56 * (1rem / var(--cds-global-base)));
  --clr-base-tree-node-height: var(--cds-global-space-10);
  --clr-base-progress-bar-height: var(--cds-global-space-6);
  --clr-base-control-group-gap: var(--cds-global-space-0);
}

[clr-density=compact] {
  --clr-base-typography-font-size-caption-small: calc(10 * (1rem / var(--cds-global-base)));
  --clr-base-typography-font-size-caption: calc(11 * (1rem / var(--cds-global-base)));
  --clr-base-typography-font-size-button: var(--cds-global-space-6);
  --clr-base-typography-font-size-inline: var(--cds-global-space-6);
  --clr-base-typography-font-size-default: calc(13 * (1rem / var(--cds-global-base)));
  --clr-base-typography-font-size-sub-section: calc(14 * (1rem / var(--cds-global-base)));
  --clr-base-typography-font-size-section: var(--cds-global-space-7);
  --clr-base-typography-font-size-heading: var(--cds-global-space-9);
  --clr-base-typography-font-size-headline: calc(28 * (1rem / var(--cds-global-base)));
  --clr-base-typography-font-size-display: var(--cds-global-space-11);
  --clr-base-typography-line-height-12: var(--cds-global-space-6);
  --clr-base-typography-line-height-16: var(--cds-global-space-7);
  --clr-base-typography-line-height-20: var(--cds-global-space-8);
  --clr-base-typography-line-height-24: calc(20 * (1rem / var(--cds-global-base)));
  --clr-base-typography-line-height-32: calc(28 * (1rem / var(--cds-global-base)));
  --clr-base-typography-line-height-36: var(--cds-global-space-10);
  --clr-base-typography-line-height-44: var(--cds-global-space-10);
  --clr-base-border-stroke: var(--cds-global-space-1);
  --clr-base-border-radius-xs: var(--cds-global-space-2);
  --clr-base-border-radius-s: var(--cds-global-space-2);
  --clr-base-border-radius-m: var(--cds-global-space-3);
  --clr-base-border-radius-l: var(--cds-global-space-5);
  --clr-base-border-radius-xl: calc(10 * (1rem / var(--cds-global-base)));
  --clr-base-offset-0: var(--cds-global-space-0);
  --clr-base-vertical-offset-2xs: var(--cds-global-space-1);
  --clr-base-vertical-offset-xs: var(--cds-global-space-2);
  --clr-base-vertical-offset-s: var(--cds-global-space-2);
  --clr-base-vertical-offset-m: calc(3 * (1rem / var(--cds-global-base)));
  --clr-base-vertical-offset-l: var(--cds-global-space-5);
  --clr-base-vertical-offset-xl: var(--cds-global-space-6);
  --clr-base-vertical-offset-2xl: calc(20 * (1rem / var(--cds-global-base)));
  --clr-base-vertical-offset-3xl: var(--cds-global-space-11);
  --clr-base-vertical-offset-multi-row-s: var(--cds-global-space-2);
  --clr-base-vertical-offset-multi-row-m: var(--cds-global-space-3);
  --clr-base-vertical-offset-multi-row-inline-s: var(--cds-global-space-2);
  --clr-base-vertical-offset-multi-row-inline-m: var(--cds-global-space-3);
  --clr-base-vertical-offset-multi-row-outline-s: var(--cds-global-space-3);
  --clr-base-vertical-offset-multi-row-outline-m: var(--cds-global-space-4);
  --clr-base-horizontal-offset-2xs: var(--cds-global-space-1);
  --clr-base-horizontal-offset-xs: var(--cds-global-space-2);
  --clr-base-horizontal-offset-s: var(--cds-global-space-2);
  --clr-base-horizontal-offset-m: var(--cds-global-space-4);
  --clr-base-horizontal-offset-l: var(--cds-global-space-5);
  --clr-base-horizontal-offset-xl: var(--cds-global-space-6);
  --clr-base-horizontal-offset-2xl: calc(20 * (1rem / var(--cds-global-base)));
  --clr-base-horizontal-offset-3xl: var(--cds-global-space-11);
  --clr-base-row-height-xs: var(--cds-global-space-7);
  --clr-base-row-height-s: calc(20 * (1rem / var(--cds-global-base)));
  --clr-base-row-height-m: var(--cds-global-space-9);
  --clr-base-row-height-l: calc(28 * (1rem / var(--cds-global-base)));
  --clr-base-row-height-20: var(--cds-global-space-7);
  --clr-base-app-level-alert-row-height: calc(28 * (1rem / var(--cds-global-base)));
  --clr-base-dg-row-height: var(--cds-global-space-9);
  --clr-base-dg-compact-row-height: calc(20 * (1rem / var(--cds-global-base)));
  --clr-base-gap-xs: var(--cds-global-space-2);
  --clr-base-gap-s: var(--cds-global-space-4);
  --clr-base-gap-m: calc(10 * (1rem / var(--cds-global-base)));
  --clr-base-gap-l: var(--cds-global-space-6);
  --clr-base-gap-xl: calc(20 * (1rem / var(--cds-global-base)));
  --clr-base-gap-2xl: var(--cds-global-space-9);
  --clr-base-icon-size-xs: var(--cds-global-space-6);
  --clr-base-icon-size-s: var(--cds-global-space-7);
  --clr-base-icon-size-m: var(--cds-global-space-8);
  --clr-base-icon-size-l: calc(20 * (1rem / var(--cds-global-base)));
  --clr-base-icon-size-xl: var(--cds-global-space-9);
  --clr-base-icon-size-2xl: calc(28 * (1rem / var(--cds-global-base)));
  --clr-base-icon-size-3xl: calc(28 * (1rem / var(--cds-global-base)));
  --clr-base-icon-size-4xl: calc(60 * (1rem / var(--cds-global-base)));
  --clr-base-layout-space-0: var(--cds-global-space-0);
  --clr-base-layout-space-4xs: var(--cds-global-space-1);
  --clr-base-layout-space-3xs: var(--cds-global-space-2);
  --clr-base-layout-space-2xs: var(--cds-global-space-3);
  --clr-base-layout-space-xs: var(--cds-global-space-4);
  --clr-base-layout-space-s: var(--cds-global-space-6);
  --clr-base-layout-space-m: var(--cds-global-space-7);
  --clr-base-layout-space-l: calc(20 * (1rem / var(--cds-global-base)));
  --clr-base-layout-space-xl: var(--cds-global-space-9);
  --clr-base-layout-space-2xl: var(--cds-global-space-10);
  --clr-base-layout-space-3xl: calc(40 * (1rem / var(--cds-global-base)));
  --clr-base-layout-space-4xl: calc(56 * (1rem / var(--cds-global-base)));
  --clr-base-layout-space-5xl: calc(80 * (1rem / var(--cds-global-base)));
  --clr-base-icon-tooltip: var(--clr-base-icon-size-s);
  --clr-base-spinner-s: var(--clr-base-icon-size-s);
  --clr-base-spinner-m: calc(28 * (1rem / var(--cds-global-base)));
  --clr-base-spinner-l: var(--clr-base-layout-space-4xl);
  --clr-base-spinner-stroke-s: var(--cds-alias-object-border-width-200);
  --clr-base-spinner-stroke-m: var(--cds-alias-object-border-width-300);
  --clr-base-spinner-stroke-l: var(--cds-alias-object-border-width-400);
  --clr-base-header-height: var(--cds-global-space-12);
  --clr-base-tree-node-height: var(--cds-global-space-9);
  --clr-base-progress-bar-height: calc(10 * (1rem / var(--cds-global-base)));
  --clr-base-control-group-gap: var(--cds-global-space-2);
}
[clr-density=compact] .datagrid .datagrid-cell:not(.datagrid-detail-caret, .datagrid-expandable-caret, .datagrid-row-actions) clr-icon {
  margin-top: calc(-1 * var(--cds-global-space-3) - var(--cds-global-space-1));
  margin-bottom: calc(-1 * var(--cds-global-space-3));
  transform: translateY(calc(-1 * var(--cds-global-space-1)));
}
[clr-density=compact] .datagrid .datagrid-cell:not(.datagrid-detail-caret, .datagrid-expandable-caret, .datagrid-row-actions) cds-icon {
  margin-top: calc(-1 * var(--cds-global-space-3) - var(--cds-global-space-1));
  margin-bottom: calc(-1 * var(--cds-global-space-3));
}
[clr-density=compact] .datagrid .datagrid-cell:not(.datagrid-detail-caret, .datagrid-expandable-caret, .datagrid-row-actions) .badge {
  margin-top: calc(-1 * var(--cds-global-space-3));
  margin-bottom: calc(-1 * var(--cds-global-space-1));
}

/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
.clr-align-baseline {
  vertical-align: baseline !important;
}

.clr-align-top {
  vertical-align: top !important;
}

.clr-align-middle {
  vertical-align: middle !important;
}

.clr-align-bottom {
  vertical-align: bottom !important;
}

.clr-align-text-bottom {
  vertical-align: text-bottom !important;
}

.clr-align-text-top {
  vertical-align: text-top !important;
}

/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
.clr-clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
.clr-display-block {
  display: block !important;
}

.clr-display-inline-block {
  display: inline-block !important;
}

.clr-display-inline {
  display: inline !important;
}

/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
.clr-flex-row {
  flex-direction: row !important;
}

.clr-flex-column {
  flex-direction: column !important;
}

.clr-flex-row-reverse {
  flex-direction: row-reverse !important;
}

.clr-flex-column-reverse {
  flex-direction: column-reverse !important;
}

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

.clr-flex-nowrap {
  flex-wrap: nowrap !important;
}

.clr-flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.clr-flex-fill {
  flex: 1 1 auto !important;
}

.clr-flex-grow-0 {
  flex-grow: 0 !important;
}

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

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

.clr-flex-shrink-1 {
  flex-shrink: 1 !important;
}

.clr-justify-content-start {
  justify-content: flex-start !important;
}

.clr-justify-content-end {
  justify-content: flex-end !important;
}

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

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

.clr-justify-content-around {
  justify-content: space-around !important;
}

.clr-align-items-start {
  align-items: flex-start !important;
}

.clr-align-items-end {
  align-items: flex-end !important;
}

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

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

.clr-align-items-stretch {
  align-items: stretch !important;
}

.clr-align-content-start {
  align-content: flex-start !important;
}

.clr-align-content-end {
  align-content: flex-end !important;
}

.clr-align-content-center {
  align-content: center !important;
}

.clr-align-content-between {
  align-content: space-between !important;
}

.clr-align-content-around {
  align-content: space-around !important;
}

.clr-align-content-stretch {
  align-content: stretch !important;
}

.clr-align-self-auto {
  align-self: auto !important;
}

.clr-align-self-start {
  align-self: flex-start !important;
}

.clr-align-self-end {
  align-self: flex-end !important;
}

.clr-align-self-center {
  align-self: center !important;
}

.clr-align-self-baseline {
  align-self: baseline !important;
}

.clr-align-self-stretch {
  align-self: stretch !important;
}

@media (min-width: 576px) {
  .clr-flex-sm-row {
    flex-direction: row !important;
  }
  .clr-flex-sm-column {
    flex-direction: column !important;
  }
  .clr-flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }
  .clr-flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }
  .clr-flex-sm-wrap {
    flex-wrap: wrap !important;
  }
  .clr-flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }
  .clr-flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .clr-flex-sm-fill {
    flex: 1 1 auto !important;
  }
  .clr-flex-sm-grow-0 {
    flex-grow: 0 !important;
  }
  .clr-flex-sm-grow-1 {
    flex-grow: 1 !important;
  }
  .clr-flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }
  .clr-flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }
  .clr-justify-content-sm-start {
    justify-content: flex-start !important;
  }
  .clr-justify-content-sm-end {
    justify-content: flex-end !important;
  }
  .clr-justify-content-sm-center {
    justify-content: center !important;
  }
  .clr-justify-content-sm-between {
    justify-content: space-between !important;
  }
  .clr-justify-content-sm-around {
    justify-content: space-around !important;
  }
  .clr-align-items-sm-start {
    align-items: flex-start !important;
  }
  .clr-align-items-sm-end {
    align-items: flex-end !important;
  }
  .clr-align-items-sm-center {
    align-items: center !important;
  }
  .clr-align-items-sm-baseline {
    align-items: baseline !important;
  }
  .clr-align-items-sm-stretch {
    align-items: stretch !important;
  }
  .clr-align-content-sm-start {
    align-content: flex-start !important;
  }
  .clr-align-content-sm-end {
    align-content: flex-end !important;
  }
  .clr-align-content-sm-center {
    align-content: center !important;
  }
  .clr-align-content-sm-between {
    align-content: space-between !important;
  }
  .clr-align-content-sm-around {
    align-content: space-around !important;
  }
  .clr-align-content-sm-stretch {
    align-content: stretch !important;
  }
  .clr-align-self-sm-auto {
    align-self: auto !important;
  }
  .clr-align-self-sm-start {
    align-self: flex-start !important;
  }
  .clr-align-self-sm-end {
    align-self: flex-end !important;
  }
  .clr-align-self-sm-center {
    align-self: center !important;
  }
  .clr-align-self-sm-baseline {
    align-self: baseline !important;
  }
  .clr-align-self-sm-stretch {
    align-self: stretch !important;
  }
}
@media (min-width: 768px) {
  .clr-flex-md-row {
    flex-direction: row !important;
  }
  .clr-flex-md-column {
    flex-direction: column !important;
  }
  .clr-flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }
  .clr-flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }
  .clr-flex-md-wrap {
    flex-wrap: wrap !important;
  }
  .clr-flex-md-nowrap {
    flex-wrap: nowrap !important;
  }
  .clr-flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .clr-flex-md-fill {
    flex: 1 1 auto !important;
  }
  .clr-flex-md-grow-0 {
    flex-grow: 0 !important;
  }
  .clr-flex-md-grow-1 {
    flex-grow: 1 !important;
  }
  .clr-flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }
  .clr-flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }
  .clr-justify-content-md-start {
    justify-content: flex-start !important;
  }
  .clr-justify-content-md-end {
    justify-content: flex-end !important;
  }
  .clr-justify-content-md-center {
    justify-content: center !important;
  }
  .clr-justify-content-md-between {
    justify-content: space-between !important;
  }
  .clr-justify-content-md-around {
    justify-content: space-around !important;
  }
  .clr-align-items-md-start {
    align-items: flex-start !important;
  }
  .clr-align-items-md-end {
    align-items: flex-end !important;
  }
  .clr-align-items-md-center {
    align-items: center !important;
  }
  .clr-align-items-md-baseline {
    align-items: baseline !important;
  }
  .clr-align-items-md-stretch {
    align-items: stretch !important;
  }
  .clr-align-content-md-start {
    align-content: flex-start !important;
  }
  .clr-align-content-md-end {
    align-content: flex-end !important;
  }
  .clr-align-content-md-center {
    align-content: center !important;
  }
  .clr-align-content-md-between {
    align-content: space-between !important;
  }
  .clr-align-content-md-around {
    align-content: space-around !important;
  }
  .clr-align-content-md-stretch {
    align-content: stretch !important;
  }
  .clr-align-self-md-auto {
    align-self: auto !important;
  }
  .clr-align-self-md-start {
    align-self: flex-start !important;
  }
  .clr-align-self-md-end {
    align-self: flex-end !important;
  }
  .clr-align-self-md-center {
    align-self: center !important;
  }
  .clr-align-self-md-baseline {
    align-self: baseline !important;
  }
  .clr-align-self-md-stretch {
    align-self: stretch !important;
  }
}
@media (min-width: 992px) {
  .clr-flex-lg-row {
    flex-direction: row !important;
  }
  .clr-flex-lg-column {
    flex-direction: column !important;
  }
  .clr-flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }
  .clr-flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }
  .clr-flex-lg-wrap {
    flex-wrap: wrap !important;
  }
  .clr-flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }
  .clr-flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .clr-flex-lg-fill {
    flex: 1 1 auto !important;
  }
  .clr-flex-lg-grow-0 {
    flex-grow: 0 !important;
  }
  .clr-flex-lg-grow-1 {
    flex-grow: 1 !important;
  }
  .clr-flex-lg-shrink-0 {
    flex-shrink: