@umbraco-ui/uui-css/dist/uui-css.css

Umbraco UI css component

/** Naming concept, any inputs are welcome.
UUI - Mapping-level or specific component name - State - Name - Part - Overwrites
*/

/* Size Properties */

:root {
  --uui-size-1: 3px;
  --uui-size-2: 6px;
  --uui-size-3: 9px;
  --uui-size-4: 12px;
  --uui-size-5: 15px;
  --uui-size-6: 18px;
  --uui-size-7: 21px;
  --uui-size-8: 24px;
  --uui-size-9: 27px;
  --uui-size-10: 30px;
  --uui-size-11: 33px;
  --uui-size-12: 36px;
  --uui-size-14: 42px;
  --uui-size-16: 48px;
  --uui-size-20: 60px;
  --uui-size-22: 66px;
  --uui-size-24: 72px;
  --uui-size-28: 84px;
  --uui-size-32: 96px;
  --uui-size-36: 108px;
  --uui-size-40: 120px;
  --uui-size-44: 132px;
  --uui-size-46: 138px;
  --uui-size-48: 144px;
  --uui-size-52: 156px;
  --uui-size-56: 168px;
  --uui-size-60: 180px;
  --uui-size-64: 192px;
  --uui-size-72: 216px;
  --uui-size-80: 240px;
  --uui-size-96: 288px;
  --uui-size-100: 300px;

  /** space and layout sizes for simpler usage of sizes: */
  --uui-size-space-1: 3px; /*--uui-size-1*/
  --uui-size-space-2: 6px; /*--uui-size-2*/
  --uui-size-space-3: 9px; /*--uui-size-3*/
  --uui-size-space-4: 12px; /*--uui-size-4*/
  --uui-size-space-5: 18px; /*--uui-size-6*/
  --uui-size-space-6: 24px; /*--uui-size-8*/

  --uui-size-layout-1: 24px; /*--uui-size-8*/
  --uui-size-layout-2: 30px; /*--uui-size-10*/
  --uui-size-layout-3: 42px; /*--uui-size-14*/
  --uui-size-layout-4: 66px; /*--uui-size-22*/
  --uui-size-layout-5: 96px; /*--uui-size-32*/
  --uui-size-layout-6: 138px; /*--uui-size-46*/

  /** Other size props: */
  --uui-border-radius: var(--uui-size-1,3px);

  /** Typography */
  --uui-type-default-size: 14px;
  --uui-type-small-size: 12px;
  --uui-type-h1-size: 60px; /*--uui-size-20*/
  --uui-type-h2-size: 42px; /*--uui-size-14*/
  --uui-type-h3-size: 30px; /*--uui-size-10*/
  --uui-type-h4-size: 21px;
  --uui-type-h5-size: var(--uui-type-default-size,14px);
  --uui-type-h6-size: var(--uui-type-small-size,12px);
}

/** Interface shadows*/

/* TODO: fix automatic fallback values for shadows before we use them */

:root {
  --uui-shadow-depth-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --uui-shadow-depth-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  --uui-shadow-depth-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  --uui-shadow-depth-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  --uui-shadow-depth-5: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

/* Currently used https://chir.ag/projects/name-that-color/ for naming inspiration */

/* Color Properties */

:root {
  --uui-palette-deep-saffron: #f79c37;
  --uui-palette-deep-saffron-light: rgb(
    249,
    181,
    103
  ); /* color($deep-saffron lightness(+ 10%)) */
  --uui-palette-deep-saffron-dark: rgb(
    222,
    145,
    56
  ); /* color($deep-saffron blackness(+ 10%)); */
  --uui-palette-deep-saffron-dimmed: rgb(
    166,
    150,
    133
  ); /* color(
    $deep-saffron saturation(- 74%) blackness(+ 1%)
  ); */
  --uui-palette-sunglow: #fad634;
  --uui-palette-sunglow-light: rgb(
    251,
    224,
    101
  ); /* color($sunglow lightness(+ 10%)); */
  --uui-palette-sunglow-dark: rgb(
    224,
    193,
    51
  ); /* color($sunglow blackness(+ 10%)); */
  --uui-palette-sunglow-dimmed: rgb(
    166,
    160,
    133
  ); /* color(
    $sunglow saturation(- 78%) blackness(+ 1%)
  ); */
  --uui-palette-spanish-pink: #f5c1bc;
  --uui-palette-spanish-pink-light: rgb(
    248,
    214,
    211
  ); /* color($spanish-pink lightness(+ 5%)); */
  --uui-palette-spanish-pink-dark: rgb(
    232,
    192,
    189
  ); /* color($spanish-pink blackness(+ 5%)); */
  --uui-palette-spanish-pink-dimmed: rgb(
    219,
    212,
    212
  ); /* color(
    $spanish-pink saturation(- 60%) blackness(+ 1%)
  ); */
  --uui-palette-gunmetal: #162335;
  --uui-palette-gunmetal-light: rgb(
    35,
    55,
    83
  ); /* color($gunmetal lightness(+ 8%)); */
  --uui-palette-gunmetal-dark: rgb(
    23,
    27,
    33
  ); /* color($gunmetal blackness(+ 8%)); */
  --uui-palette-gunmetal-dimmed: rgb(
    54,
    54,
    54
  ); /* color(
    $gunmetal saturation(- 50%) lightness(+ 6%)
  ); */
  --uui-palette-space-cadet: #1b264f;
  --uui-palette-space-cadet-light: rgb(
    38,
    53,
    110
  ); /* color($space-cadet lightness(+ 8%)); */
  --uui-palette-space-cadet-dark: rgb(
    28,
    35,
    59
  ); /* color($space-cadet blackness(+ 8%)); */
  --uui-palette-space-cadet-dimmed: rgb(
    106,
    117,
    154
  ); /* color(
    $space-cadet saturation(- 30%) lightness(+ 30%)
  ); */
  --uui-palette-violet-blue: #3544b1;
  --uui-palette-violet-blue-light: rgb(
    70,
    86,
    200
  ); /* color($violet-blue lightness(+ 8%)); */
  --uui-palette-violet-blue-dark: rgb(
    54,
    65,
    156
  ); /* color($violet-blue blackness(+ 8%)); */
  --uui-palette-violet-blue-dimmed: rgb(
    87,
    87,
    87
  ); /* color(
    $violet-blue saturation(- 30%) blackness(+ 22%)
  ); */
  --uui-palette-malibu: #3879ff;
  --uui-palette-malibu-light: rgb(
    97,
    150,
    255
  ); /* color($malibu lightness(+ 8%)); */
  --uui-palette-malibu-dark: rgb(
    56,
    116,
    235
  ); /* color($malibu blackness(+ 8%)); */
  --uui-palette-malibu-dimmed: rgb(
    115,
    120,
    130
  ); /* color(
    $malibu saturation(- 60%) blackness(+ 26%)
  ); */
  --uui-palette-maroon-flush: #d42054;
  --uui-palette-maroon-flush-light: rgb(
    226,
    60,
    107
  ); /* color($maroon-flush lightness(+ 8%)); */
  --uui-palette-maroon-flush-dark: rgb(
    191,
    33,
    78
  ); /* color($maroon-flush blackness(+ 8%)); */
  --uui-palette-maroon-flush-dimmed: rgb(
    133,
    107,
    114
  ); /* color(
    $maroon-flush saturation(- 62%) blackness(+ 2%)
  ); */
  --uui-palette-jungle-green: #2bc37c;
  --uui-palette-jungle-green-light: rgb(
    58,
    212,
    140
  ); /* color($jungle-green lightness(+ 6%)); */
  --uui-palette-jungle-green-dark: rgb(
    43,
    179,
    115
  ); /* color($jungle-green blackness(+ 6%)); */
  --uui-palette-jungle-green-dimmed: rgb(
    102,
    135,
    120
  ); /* color(
    $jungle-green saturation(- 50%) blackness(+ 1%)
  ); */
  --uui-palette-forest-green: #0b8152;
  --uui-palette-forest-green-light: rgb(
    13,
    155,
    98
  ); /* color($forest-green lightness(+ 6%)); */
  --uui-palette-forest-green-dark: rgb(
    10,
    115,
    73
  ); /* color($forest-green blackness(+ 6%)); */
  --uui-palette-forest-green-dimmed: rgb(
    46,
    89,
    72
  ); /* color(
    $forest-green saturation(- 50%) blackness(+ 1%)
  ); */
  --uui-palette-cocoa-black: #191715;
  --uui-palette-cocoa-black-light: rgb(
    39,
    36,
    32
  ); /* color($cocoa-black lightness(+ 5%)); */
  --uui-palette-cocoa-black-dark: rgb(
    20,
    20,
    20
  ); /* color($cocoa-black blackness(+ 5%)); */
  --uui-palette-cocoa-black-dimmed: rgb(
    48,
    48,
    48
  ); /* color(
    $cocoa-black saturation(- 20%) lightness(+ 10%)
  ); */
  --uui-palette-dune-black: #2e2b29;
  --uui-palette-dune-black-light: rgb(
    57,
    53,
    50
  ); /* color($dune-black lightness(+ 4%)); */
  --uui-palette-dune-black-dark: rgb(
    38,
    38,
    38
  ); /* color($dune-black blackness(+ 10%)); */
  --uui-palette-dune-black-dimmed: rgb(
    64,
    64,
    64
  ); /* color(
    $dune-black saturation(- 30%) lightness(+ 8%)
  ); */
  --uui-palette-cocoa-brown: #332a24;
  --uui-palette-cocoa-brown-light: rgb(
    66,
    54,
    47
  ); /* color($cocoa-brown lightness(+ 5%)); */
  --uui-palette-cocoa-brown-dark: rgb(
    38,
    37,
    36
  ); /* color($cocoa-brown blackness(+ 5%)); */
  --uui-palette-cocoa-brown-dimmed: rgb(
    43,
    43,
    43
  ); /* color(
    $cocoa-brown saturation(- 40%) blackness(+ 2%)
  ); */
  --uui-palette-chamoisee: #9d8057;
  --uui-palette-chamoisee-light: rgb(
    175,
    148,
    110
  ); /* color($chamoisee lightness(+ 8%)); */
  --uui-palette-chamoisee-dark: rgb(
    138,
    116,
    87
  ); /* color($chamoisee blackness(+ 8%)); */
  --uui-palette-chamoisee-dimmed: rgb(
    115,
    113,
    110
  ); /* color(
    $chamoisee saturation(- 18%) blackness(+ 8%)
  ); */
  --uui-palette-timberwolf: #e2dad4;
  --uui-palette-timberwolf-light: rgb(
    243,
    239,
    237
  ); /* color($timberwolf lightness(+ 8%)); */
  --uui-palette-timberwolf-dark: rgb(
    208,
    208,
    208
  ); /* color($timberwolf blackness(+ 8%)); */
  --uui-palette-timberwolf-dimmed: rgb(
    207,
    207,
    207
  ); /* color(
    $timberwolf saturation(- 82%) blackness(+ 6%)
  ); */
  --uui-palette-gravel: #d8d7d9;
  --uui-palette-gravel-light: rgb(
    237,
    237,
    238
  ); /* color($gravel lightness(+ 8%)); */
  --uui-palette-gravel-dark: rgb(
    200,
    200,
    200
  ); /* color($gravel blackness(+ 8%)); */
  --uui-palette-gravel-dimmed: rgb(
    204,
    204,
    204
  ); /* color($gravel saturation(- 82%) blackness(+ 6%)); */
  --uui-palette-sand: #f3f3f5;
  --uui-palette-sand-light: rgb(
    255,
    255,
    255
  ); /* color($sand lightness(+ 8%)); */
  --uui-palette-sand-dark: rgb(
    226,
    226,
    226
  ); /* color($sand blackness(+ 8%)); */
  --uui-palette-sand-dimmed: rgb(
    231,
    231,
    231
  ); /* color($sand saturation(- 82%) blackness(+ 6%)); */
  --uui-palette-white: #fefefe;
  --uui-palette-white-light: rgb(
    255,
    255,
    255
  ); /* color($white lightness(+ 2%)); */
  --uui-palette-white-dark: rgb(
    250,
    250,
    250
  ); /* color($white blackness(+ 2%)); */
  --uui-palette-white-dimmed: rgb(
    228,
    228,
    228
  ); /* color($white saturation(- 100%) blackness(+ 12%)); */
  --uui-palette-black: #060606;
  --uui-palette-black-light: rgb(
    26,
    26,
    26
  ); /* color($black lightness(+ 8%)); */
  --uui-palette-black-dark: rgb(5, 5, 5); /* color($black blackness(+ 8%)); */
  --uui-palette-black-dimmed: rgb(
    36,
    36,
    36
  ); /* color($black saturation(- 100%) lightness(+ 12%)); */
  --uui-palette-grey: #c4c4c4;
  --uui-palette-grey-light: rgb(
    222,
    222,
    222
  ); /* color($grey lightness(+ 10%)); */
  --uui-palette-grey-dark: rgb(
    179,
    179,
    179
  ); /* color($grey blackness(+ 10%)); */
  --uui-palette-grey-dimmed: rgb(
    189,
    189,
    189
  ); /* color($grey saturation(- 100%) blackness(+ 4%)); */

  /** not begin used currently. */
  --uui-palette-dusty-grey: #9b9b9b;
  --uui-palette-dusty-grey-light: rgb(
    176,
    176,
    176
  ); /* color($dusty-grey lightness(+ 8%)); */
  --uui-palette-dusty-grey-dark: rgb(
    141,
    141,
    141
  ); /* color($dusty-grey blackness(+ 10%)); */
  --uui-palette-dusty-grey-dimmed: rgb(
    186,
    186,
    186
  ); /* color(
    $dusty-grey saturation(- 100%) lightness(+ 12%)
  ); */
  --uui-palette-mine-grey: #3e3e3e;
  --uui-palette-mine-grey-light: rgb(
    82,
    82,
    82
  ); /* color($mine-grey lightness(+ 8%)); */
  --uui-palette-mine-grey-dark: rgb(
    56,
    56,
    56
  ); /* color($mine-grey blackness(+ 10%)); */
  --uui-palette-mine-grey-dimmed: rgb(
    87,
    87,
    87
  ); /* color(
    $mine-grey saturation(- 100%) lightness(+ 10%)
  ); */
}

:root {
  font-family: 'Roboto', sans-serif;

  /* ----- STATES -----  */
  --uui-color-selected: var(--uui-palette-violet-blue,#3544b1);
  --uui-color-selected-emphasis: var(--uui-palette-violet-blue-light,rgb(
    70,
    86,
    200
  ));
  --uui-color-selected-standalone: var(--uui-palette-violet-blue-dark,rgb(
    54,
    65,
    156
  ));
  --uui-color-selected-contrast: #fff;

  --uui-color-current: var(--uui-palette-spanish-pink,#f5c1bc);
  --uui-color-current-emphasis: var(--uui-palette-spanish-pink-light,rgb(
    248,
    214,
    211
  ));
  --uui-color-current-standalone: var(--uui-palette-spanish-pink-dark,rgb(
    232,
    192,
    189
  ));
  --uui-color-current-contrast: var(--uui-palette-space-cadet,#1b264f);

  --uui-color-disabled: var(--uui-palette-sand,#f3f3f5);
  --uui-color-disabled-standalone: var(--uui-palette-sand-dark,rgb(
    226,
    226,
    226
  ));
  --uui-color-disabled-contrast: var(--uui-palette-grey,#c4c4c4);

  /* ----- UNIVERSAL -----  */
  --uui-color-header-surface: var(--uui-palette-space-cadet,#1b264f);
  --uui-color-header-contrast: rgba(255, 255, 255, 0.8);
  --uui-color-header-contrast-emphasis: #fff;

  --uui-color-focus: var(--uui-palette-malibu,#3879ff);

  /* ----- SURFACE -----  */
  --uui-color-surface: #fff;
  --uui-color-surface-alt: var(--uui-palette-sand,#f3f3f5);
  --uui-color-surface-emphasis: var(--uui-palette-white-dark,rgb(
    250,
    250,
    250
  ));

  --uui-color-background: var(--uui-palette-sand,#f3f3f5);

  --uui-color-text: var(--uui-palette-black,#060606);
  --uui-color-text-alt: var(--uui-palette-dune-black,#2e2b29);

  --uui-color-interactive: var(--uui-palette-space-cadet,#1b264f);
  --uui-color-interactive-emphasis: var(--uui-palette-violet-blue,#3544b1);

  --uui-color-border: #d8d7d9;
  --uui-color-border-standalone: #c2c2c2;
  --uui-color-border-emphasis: #a1a1a1;

  --uui-color-divider: #f6f6f7;
  --uui-color-divider-standalone: #e9e9eb;
  --uui-color-divider-emphasis: #bdbdbd;

  /* ----- COLORS -----  */
  --uui-color-default: var(--uui-palette-space-cadet,#1b264f);
  --uui-color-default-emphasis: var(--uui-palette-violet-blue,#3544b1);
  --uui-color-default-standalone: var(--uui-palette-space-cadet-dark,rgb(
    28,
    35,
    59
  ));
  --uui-color-default-contrast: #fff;

  --uui-color-warning: #fbd142;
  --uui-color-warning-emphasis: var(--uui-palette-sunglow-light,rgb(
    251,
    224,
    101
  ));
  --uui-color-warning-standalone: #a17700;
  --uui-color-warning-contrast: #000;
  /* --uui-color-warning: var(--uui-palette-sunglow); Contrast not high enough */
  /* --uui-color-warning-standalone: var(--uui-palette-sunglow-dark); Contrast not high enough */

  --uui-color-danger: var(--uui-palette-maroon-flush,#d42054);
  --uui-color-danger-emphasis: var(--uui-palette-maroon-flush-light,rgb(
    226,
    60,
    107
  ));
  --uui-color-danger-standalone: var(--uui-palette-maroon-flush-dark,rgb(
    191,
    33,
    78
  ));
  --uui-color-danger-contrast: white;

  --uui-color-invalid: var(--uui-palette-maroon-flush,#d42054);
  --uui-color-invalid-emphasis: var(--uui-palette-maroon-flush-light,rgb(
    226,
    60,
    107
  ));
  --uui-color-invalid-standalone: var(--uui-palette-maroon-flush-dark,rgb(
    191,
    33,
    78
  ));
  --uui-color-invalid-contrast: white;

  --uui-color-positive: var(--uui-palette-forest-green,#0b8152);
  --uui-color-positive-emphasis: var(--uui-palette-forest-green-light,rgb(
    13,
    155,
    98
  ));
  --uui-color-positive-standalone: var(--uui-palette-forest-green-dark,rgb(
    10,
    115,
    73
  ));
  --uui-color-positive-contrast: #fff;
}

:root[data-theme='dark'] {
  /* ----- STATES -----  */
  /* --uui-color-selected: #2a72b6;
  --uui-color-selected-emphasis: #3385d1;
  --uui-color-selected-standalone: #215b91;
  --uui-color-selected-contrast: white;

  --uui-color-current: #d49e98;
  --uui-color-current-emphasis: #dbaea9;
  --uui-color-current-standalone: #c3786f;
  --uui-color-current-contrast: #1b264f; */

  /* ----- UNIVERSAL -----  */
  /* --uui-color-header: #14171b;

  --uui-color-focus: #2294ff;

  --uui-color-hover: #3f464e;
  --uui-color-hover-standalone: #51abff;

  --uui-color-disabled: #373e47;
  --uui-color-disabled-standalone: #444c55;
  --uui-color-disabled-contrast: #636e7b; */

  /* ----- SURFACE -----  */
  /* --uui-color-surface: #2d333b;
  --uui-color-surface-alt: #373e47;

  --uui-color-background: #22272e;

  --uui-color-text: #cdd9e5;
  --uui-color-text-alt: #636e7b;

  --uui-color-border: #4d5661;
  --uui-color-border-standalone: #59636e;
  --uui-color-border-emphasis: #697380;

  --uui-color-divider: #383d44;
  --uui-color-divider-standalone: #444c56;
  --uui-color-divider-emphasis: #4f5864; */
  /* ----- COLORS -----  */
  /* --uui-color-default: #2c70d6;
  --uui-color-default-emphasis: #3886fc;
  --uui-color-default-standalone: #88bdff;
  --uui-color-default-contrast: white;

  --uui-color-warning: #977b00;
  --uui-color-warning-emphasis: #bda22b;
  --uui-color-warning-standalone: #ffd82c;
  --uui-color-warning-contrast: white;

  --uui-color-danger: #8a2944;
  --uui-color-danger-emphasis: #a03452;
  --uui-color-danger-standalone: #ff7a9f;
  --uui-color-danger-contrast: white;

  --uui-color-positive: #26793e;
  --uui-color-positive-emphasis: #358f4e;
  --uui-color-positive-standalone: #52d176;
  --uui-color-positive-contrast: white; */
}

:root {
  --uui-font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/*
  Lato

  Light: font-weight: 300;
  Regular: font-weight: normal;
  Bold: font-weight: bold;
  Black: font-weight: 900;

*/

/* Webfont: LatoLatin-Black */

@font-face {
  font-family: 'Lato';
  src: local('LatoLatin Black'), local('LatoLatin-Black'),
    url('../assets/fonts/lato/LatoLatin-Black.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  text-rendering: optimizeLegibility;
}

/* Webfont: LatoLatin-BlackItalic */

@font-face {
  font-family: 'Lato';
  src: local('LatoLatin BlackItalic'), local('LatoLatin-BlackItalic'),
    url('../assets/fonts/lato/LatoLatin-BlackItalic.woff2') format('woff2');
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  text-rendering: optimizeLegibility;
}

/* Webfont: LatoLatin-Bold */

@font-face {
  font-family: 'Lato';
  src: local('LatoLatin Bold'), local('LatoLatin-Bold'),
    url('../assets/fonts/lato/LatoLatin-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  text-rendering: optimizeLegibility;
}

/* Webfont: LatoLatin-BoldItalic */

@font-face {
  font-family: 'Lato';
  src: local('LatoLatin BoldItalic'), local('LatoLatin-BoldItalic'),
    url('../assets/fonts/lato/LatoLatin-BoldItalic.woff2') format('woff2');
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  text-rendering: optimizeLegibility;
}

/* Webfont: LatoLatin-Italic */

@font-face {
  font-family: 'Lato';
  src: local('LatoLatin Italic'), local('LatoLatin-Italic'),
    url('../assets/fonts/lato/LatoLatin-Italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  text-rendering: optimizeLegibility;
}

/* Webfont: LatoLatin-Regular */

@font-face {
  font-family: 'Lato';
  src: local('LatoLatin Regular'), local('LatoLatin-Regular'),
    url('../assets/fonts/lato/LatoLatin-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  text-rendering: optimizeLegibility;
}

/* Webfont: LatoLatin-Light */

@font-face {
  font-family: 'Lato';
  src: local('LatoLatin Light'), local('LatoLatin-Light'),
    url('../assets/fonts/lato/LatoLatin-Light.woff2') format('woff2');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  text-rendering: optimizeLegibility;
}

/* Webfont: LatoLatin-LightItalic */

@font-face {
  font-family: 'Lato';
  src: local('LatoLatin LightItalic'), local('LatoLatin-LightItalic'),
    url('../assets/fonts/lato/LatoLatin-LightItalic.woff2') format('woff2');
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  text-rendering: optimizeLegibility;
}

.uui-font {
  font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: calc(var(--uui-size-2,6px) * 4);
  -webkit-font-smoothing: antialiased;
}

.uui-h1,
.uui-h2,
.uui-h3,
.uui-h4,
.uui-h5,
.uui-a,
.uui-p,
.uui-p-lead,
.uui-small,
.uui-quoteblock,
.uui-ul,
.uui-ol,
.uui-text {
  font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 21px;
  -webkit-font-smoothing: antialiased;
}

.uui-text h1,
.uui-h1.uui-h1 {
  font-size: var(--uui-type-h1-size,60px);
  line-height: var(--uui-size-layout-4,66px);
  font-weight: 300;
  margin-left: -5px;
  margin-top: var(--uui-size-layout-1,24px);
  margin-bottom: var(--uui-size-layout-1,24px);
}

.uui-text p + h1,
.uui-text p + .uui-h1 {
  margin-top: var(--uui-size-layout-4,66px);
}

.uui-text h1.--no-top-margin,
.uui-text h1:first-child,
.uui-h1.--no-top-margin,
.uui-h1:first-child {
  margin-top: 0;
}

.uui-text h2,
.uui-h2.uui-h2 {
  font-size: var(--uui-type-h2-size,42px);
  line-height: var(--uui-size-layout-3,42px);
  font-weight: 300;
  margin-left: -3px;
  margin-top: var(--uui-size-layout-1,24px);
  margin-bottom: var(--uui-size-layout-1,24px);
}

.uui-text p + h2,
.uui-text p + .uui-h2 {
  margin-top: var(--uui-size-layout-3,42px);
}

.uui-text h2.--no-top-margin,
.uui-text h2:first-child,
.uui-h2.--no-top-margin,
.uui-h2:first-child {
  margin-top: 0;
}

.uui-text h3,
.uui-h3.uui-h3 {
  font-size: var(--uui-type-h3-size,30px);
  line-height: var(--uui-size-large);
  font-weight: 300;
  margin-left: -2px;
  margin-top: var(--uui-size-layout-1,24px);
  margin-bottom: var(--uui-size-layout-1,24px);
}

.uui-text h3.--no-top-margin,
.uui-text h3:first-child,
.uui-h3.--no-top-margin,
.uui-h3:first-child {
  margin-top: 0;
}

.uui-text h4,
.uui-h4.uui-h4 {
  font-size: var(--uui-type-h4-size,21px);
  line-height: 21px;
  font-weight: 400;
  margin-left: -1px;
  margin-top: var(--uui-size-layout-1,24px);
  margin-bottom: var(--uui-size-layout-1,24px);
}

.uui-text h4.--no-top-margin,
.uui-text h4:first-child,
.uui-h4.--no-top-margin,
.uui-h4:first-child {
  margin-top: 0;
}

.uui-text h5,
.uui-h5.uui-h5 {
  font-size: var(--uui-type-h5-size,14px);
  line-height: inherit;
  font-weight: 700;
  margin-left: 0;
  margin-top: var(--uui-size-layout-1,24px);
  margin-bottom: 0;
}

.uui-text h5.--no-top-margin,
.uui-text h5:first-child,
.uui-h5.--no-top-margin,
.uui-h5:first-child {
  margin-top: 0;
}

.uui-p,
.uui-text p {
  margin-top: var(--uui-size-layout-1,24px);
  margin-bottom: var(--uui-size-layout-1,24px);
}

.uui-p-lead,
.uui-text p.uui-lead {
  font-size: var(--uui-size-6,18px);
  line-height: var(--uui-size-8,24px);
}

.uui-a,
.uui-text a {
  color: var(--uui-color-interactive,#1b264f);
}

.uui-a:link,
.uui-a:active .uui-text a:link,
.uui-text a:active {
  color: var(--uui-color-interactive,#1b264f);
}

.uui-a:hover,
.uui-text a:hover {
  color: var(--uui-color-interactive-emphasis,#3544b1);
}

.uui-small,
.uui-text small {
  display: inline-block;
  font-size: var(--uui-type-small-size,12px);
  line-height: 18px;
}

.uui-quoteblock,
.uui-text blockquote {
  float: right;
  font-size: 14px;
  line-height: inherit;
  font-weight: 700;
  font-style: italic;
  margin-top: 0;
  margin-bottom: var(--uui-size-layout-1,24px);
  margin-right: -0.035em;
  max-width: 16em;
  quotes: '“' '”' '‘' '’';
}

.uui-quoteblock:before,
.uui-text blockquote:before {
  content: open-quote;
  margin-left: -0.4em;
  margin-right: 0.08em;
  vertical-align: bottom;
  font-weight: 400;
  font-size: 2em;
}

.uui-quoteblock:after,
.uui-text blockquote:after {
  content: close-quote;
  margin-left: 0.04em;
  margin-right: -0.4em;
  vertical-align: bottom;
  font-weight: 400;
  font-size: 2em;
  margin-bottom: -2px;
  display: inline-block;
}

.uui-ul,
.uui-text ul {
  list-style-type: square;
  padding-left: var(--uui-size-layout-1,24px);
  margin-top: var(--uui-size-layout-1,24px);
  margin-bottom: var(--uui-size-layout-1,24px);
}

.uui-ol,
.uui-text ol {
  padding-left: var(--uui-size-layout-1,24px);
  margin-top: var(--uui-size-layout-1,24px);
  margin-bottom: var(--uui-size-layout-1,24px);
}